From 1f0048f7efb69cd5094edeee35f27debad858ede Mon Sep 17 00:00:00 2001
From: Ronen <kaloster@users.noreply.github.com>
Date: Tue, 1 Oct 2024 10:50:48 -0400
Subject: [PATCH] chore: Add newsletter signup to bottom banner (SCE-29)
 (#1116)

---
 .infra/rdev/values.yaml                       |   2 +-
 client/__tests__/e2e/e2e.test.ts              |  24 +++
 client/index.html                             |   5 +
 client/index_template.html                    |   5 +
 client/src/analytics/events.ts                |   6 +
 client/src/assets.d.ts                        |   4 +
 client/src/assets/img/CellxGene.svg           |  10 ++
 client/src/components/App/App.tsx             |   3 +-
 .../components/BottomBanner/BottomBanner.tsx  |  76 ++++++---
 .../NewsletterSignup/NewsletterSignup.tsx     | 116 ++++++++++++++
 .../components/NewsletterSignup/style.ts      |  98 ++++++++++++
 client/src/components/BottomBanner/connect.ts | 151 ++++++++++++++++++
 .../src/components/BottomBanner/constants.ts  |  12 +-
 client/src/components/BottomBanner/style.ts   |   4 +
 client/src/global.d.ts                        |  31 +++-
 client/tsconfig.json                          |   2 +-
 16 files changed, 515 insertions(+), 34 deletions(-)
 create mode 100644 client/src/assets.d.ts
 create mode 100644 client/src/assets/img/CellxGene.svg
 create mode 100644 client/src/components/BottomBanner/components/NewsletterSignup/NewsletterSignup.tsx
 create mode 100644 client/src/components/BottomBanner/components/NewsletterSignup/style.ts
 create mode 100644 client/src/components/BottomBanner/connect.ts

diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml
index 80790175b..cff23d0c0 100644
--- a/.infra/rdev/values.yaml
+++ b/.infra/rdev/values.yaml
@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-a694292f
+        tag: sha-e352565b
       replicaCount: 1
       env:
         # env vars common to all deployment stages
diff --git a/client/__tests__/e2e/e2e.test.ts b/client/__tests__/e2e/e2e.test.ts
index 9a2472ab6..e62ec69c0 100644
--- a/client/__tests__/e2e/e2e.test.ts
+++ b/client/__tests__/e2e/e2e.test.ts
@@ -236,6 +236,30 @@ for (const testDataset of testDatasets) {
               testInfo
             );
           });
+
+          test("newsletter signup modal opens and closes", async ({ page }) => {
+            await goToPage(page, url);
+
+            await page.getByTestId("newsletter-modal-open-button").click();
+
+            await expect(
+              page.getByTestId("newsletter-modal-content")
+            ).toBeVisible();
+
+            await page.getByTestId("newsletter-email-input").fill("test");
+
+            await page.getByTestId("newsletter-subscribe-button").click();
+
+            await expect(
+              page.getByText("Please provide a valid email address.")
+            ).toBeVisible();
+
+            await page.getByTestId("newsletter-modal-close-button").click();
+
+            await expect(
+              page.getByTestId("newsletter-modal-content")
+            ).not.toBeVisible();
+          });
         });
 
         test("resize graph", async ({ page }, testInfo) => {
diff --git a/client/index.html b/client/index.html
index 7ffe01a57..9d344561c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -87,5 +87,10 @@
       data-template="<%= OBSOLETE_TEMPLATE %>"
       data-regex="<%= OBSOLETE_REGEX %>"
     ></script>
+    <!-- Hubspot -->
+    <script>
+      var _hsq = (window._hsq = window._hsq || []);
+      _hsq.push(["doNotTrack"]);
+    </script>
   </body>
 </html>
diff --git a/client/index_template.html b/client/index_template.html
index c8ecd4d94..2dab3ffb1 100644
--- a/client/index_template.html
+++ b/client/index_template.html
@@ -85,6 +85,11 @@
       data-template="<%= OBSOLETE_TEMPLATE %>"
       data-regex="<%= OBSOLETE_REGEX %>"
     ></script>
+    <!-- Hubspot -->
+    <script>
+      var _hsq = (window._hsq = window._hsq || []);
+      _hsq.push(["doNotTrack"]);
+    </script>
     {% for script in SCRIPTS -%}
     <script type="text/javascript"
       {{ ('integrity="%s"' % script.integrity) | safe if script.integrity }}
diff --git a/client/src/analytics/events.ts b/client/src/analytics/events.ts
index 996bb8cb1..ea2bc225e 100644
--- a/client/src/analytics/events.ts
+++ b/client/src/analytics/events.ts
@@ -79,4 +79,10 @@ export enum EVENTS {
   DOCUMENTATION_CLICK_NAV = "DOCUMENTATION_CLICK_NAV",
   CELL_GUIDE_CLICK_NAV = "CELL_GUIDE_CLICK_NAV",
   DE_CLICK_NAV = "DE_CLICK_NAV",
+
+  NEWSLETTER_SIGNUP_SUCCESS = "NEWSLETTER_SIGNUP_SUCCESS",
+  NEWSLETTER_SIGNUP_FAILURE = "NEWSLETTER_SIGNUP_FAILURE",
+  NEWSLETTER_OPEN_MODAL_CLICKED = "NEWSLETTER_OPEN_MODAL_CLICKED",
+  NEWSLETTER_EMAIL_SUBMITTED = "NEWSLETTER_EMAIL_SUBMITTED",
+  NEWSLETTER_SUBSCRIBE_BUTTON_AVAILABLE = "NEWSLETTER_SUBSCRIBE_BUTTON_AVAILABLE",
 }
diff --git a/client/src/assets.d.ts b/client/src/assets.d.ts
new file mode 100644
index 000000000..5e52f805e
--- /dev/null
+++ b/client/src/assets.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
diff --git a/client/src/assets/img/CellxGene.svg b/client/src/assets/img/CellxGene.svg
new file mode 100644
index 000000000..00b74faee
--- /dev/null
+++ b/client/src/assets/img/CellxGene.svg
@@ -0,0 +1,10 @@
+<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5.8C5 5.51997 5 5.37996 5.0545 5.273C5.10243 5.17892 5.17892 5.10243 5.273 5.0545C5.37996 5 5.51997 5 5.8 5H17.2C17.48 5 17.62 5 17.727 5.0545C17.8211 5.10243 17.8976 5.17892 17.9455 5.273C18 5.37996 18 5.51997 18 5.8V17.2C18 17.48 18 17.62 17.9455 17.727C17.8976 17.8211 17.8211 17.8976 17.727 17.9455C17.62 18 17.48 18 17.2 18H5.8C5.51997 18 5.37996 18 5.273 17.9455C5.17892 17.8976 5.10243 17.8211 5.0545 17.727C5 17.62 5 17.48 5 17.2V5.8ZM15 8H8V15H15V8Z" fill="black"/>
+<path d="M0 5.8C0 5.51997 0 5.37996 0.0544967 5.273C0.102433 5.17892 0.178924 5.10243 0.273005 5.0545C0.379961 5 0.519974 5 0.8 5H2.2C2.48003 5 2.62004 5 2.727 5.0545C2.82108 5.10243 2.89757 5.17892 2.9455 5.273C3 5.37996 3 5.51997 3 5.8V17.2C3 17.48 3 17.62 2.9455 17.727C2.89757 17.8211 2.82108 17.8976 2.727 17.9455C2.62004 18 2.48003 18 2.2 18H0.8C0.519974 18 0.379961 18 0.273005 17.9455C0.178924 17.8976 0.102433 17.8211 0.0544967 17.727C0 17.62 0 17.48 0 17.2V5.8Z" fill="black"/>
+<path d="M5 0.8C5 0.519974 5 0.379961 5.0545 0.273005C5.10243 0.178924 5.17892 0.102433 5.273 0.0544967C5.37996 0 5.51997 0 5.8 0H17.2C17.48 0 17.62 0 17.727 0.0544967C17.8211 0.102433 17.8976 0.178924 17.9455 0.273005C18 0.379961 18 0.519974 18 0.8V2.2C18 2.48003 18 2.62004 17.9455 2.727C17.8976 2.82108 17.8211 2.89757 17.727 2.9455C17.62 3 17.48 3 17.2 3H5.8C5.51997 3 5.37996 3 5.273 2.9455C5.17892 2.89757 5.10243 2.82108 5.0545 2.727C5 2.62004 5 2.48003 5 2.2V0.8Z" fill="#8F5AFF"/>
+<path d="M26.1396 11.6982C26.1396 10.6699 26.4824 9.81738 27.168 9.13184C27.8535 8.44629 28.7061 8.10352 29.7432 8.10352C30.1211 8.10352 30.499 8.16504 30.8682 8.2793C31.2373 8.39355 31.5361 8.52539 31.7646 8.66602C31.9932 8.80664 32.2129 8.97363 32.4238 9.1582C32.6348 9.34277 32.7754 9.47461 32.8281 9.54492C32.8896 9.61523 32.9336 9.67676 32.9688 9.7207L35.043 7.55859L34.8408 7.30371C34.7178 7.12793 34.5068 6.91699 34.208 6.6709C33.9092 6.4248 33.5664 6.17871 33.1709 5.93262C32.7754 5.68652 32.2744 5.47559 31.6592 5.2998C31.0527 5.12402 30.4111 5.03613 29.7344 5.03613C27.7832 5.03613 26.1221 5.69531 24.7598 7.00488C23.3975 8.31445 22.7119 9.87891 22.7119 11.6982C22.7119 13.5264 23.3975 15.0908 24.7598 16.4004C26.1221 17.71 27.7832 18.3604 29.7344 18.3604C30.4199 18.3604 31.0703 18.2725 31.7031 18.0967C32.3359 17.9209 32.8369 17.7188 33.2236 17.4902C33.6104 17.2705 33.9619 17.0156 34.2959 16.7256C34.6299 16.4355 34.8408 16.2334 34.9287 16.1191C35.0166 16.0049 35.0869 15.9082 35.1309 15.8379L33.1533 13.6758L32.7754 14.0801C32.5293 14.3613 32.1162 14.6338 31.5449 14.8975C30.9824 15.1699 30.376 15.3018 29.7344 15.3018C28.7061 15.3018 27.8447 14.959 27.1592 14.2734C26.4736 13.5879 26.1396 12.7354 26.1396 11.6982ZM41.8896 8.46387L36.3086 14.9414V18H46.5742V14.9414H40.8086L46.3896 8.46387V5.39648H36.5811V8.46387H41.8896Z" fill="black"/>
+<path d="M51.0811 11.6982C51.0811 13.5 51.7051 15.0293 52.9707 16.2861C54.2275 17.5518 55.7568 18.1758 57.5586 18.1758C58.1914 18.1758 58.8154 18.0879 59.4131 17.9033C60.0107 17.7188 60.5029 17.5078 60.8721 17.2705C61.2412 17.042 61.584 16.7695 61.918 16.4707C62.252 16.1719 62.4629 15.9697 62.5596 15.8555C62.6562 15.7412 62.7266 15.6445 62.7793 15.5742L61.8828 14.7568L61.7158 14.9766C61.6104 15.1348 61.4346 15.3193 61.1885 15.5303C60.9424 15.7412 60.6523 15.9434 60.3271 16.1543C60.002 16.3652 59.5977 16.5498 59.1055 16.6992C58.6133 16.8486 58.0947 16.9189 57.5586 16.9189C56.1172 16.9189 54.8955 16.418 53.9111 15.416C52.918 14.4141 52.4258 13.1748 52.4258 11.6982C52.4258 10.2217 52.918 8.98242 53.9111 7.98047C54.8955 6.97852 56.1172 6.47754 57.5586 6.47754C58.0947 6.47754 58.6133 6.55664 59.1055 6.71484C59.5977 6.87305 59.9932 7.04883 60.292 7.24219C60.5908 7.43555 60.8721 7.64648 61.127 7.89258C61.3906 8.13867 61.5488 8.31445 61.6191 8.41113C61.6895 8.50781 61.7422 8.58691 61.7773 8.63965L62.6826 7.83105L62.4805 7.55859C62.3574 7.38281 62.1465 7.16309 61.8564 6.89941C61.5664 6.64453 61.2324 6.38965 60.8457 6.13477C60.459 5.88867 59.9756 5.66895 59.3867 5.49316C58.8066 5.31738 58.1914 5.2207 57.5498 5.2207C55.7568 5.2207 54.2275 5.85352 52.9619 7.11035C51.7051 8.37598 51.0811 9.90527 51.0811 11.6982ZM66.3832 16.7432V12.0586H72.2279V10.8018H66.3832V6.66211H73.6693V5.39648H65.0296V18H73.8539V16.7432H66.3832ZM84.0144 18V16.7432H77.5368V5.39648H76.1833V18H84.0144ZM93.7266 18V16.7432H87.2491V5.39648H85.8956V18H93.7266Z" fill="black"/>
+<path d="M98.7969 8.09766L97.8984 8.99609L100.701 11.7988L97.8984 14.6016L98.7969 15.5L101.6 12.6973L104.402 15.5L105.301 14.6016L102.498 11.7988L105.301 8.99609L104.402 8.09766L101.6 10.9004L98.7969 8.09766Z" fill="black"/>
+<path d="M110.081 11.6982C110.081 13.5 110.705 15.0293 111.971 16.2861C113.228 17.5518 114.757 18.1758 116.559 18.1758C117.191 18.1758 117.815 18.0879 118.422 17.9033C119.028 17.7188 119.521 17.5078 119.907 17.2705C120.294 17.042 120.654 16.7695 120.988 16.4707C121.322 16.1719 121.533 15.9697 121.639 15.8555C121.744 15.7412 121.814 15.6445 121.867 15.5742V11.5225H117.64V12.7793H120.522V15.2139L120.373 15.3896C120.276 15.5127 120.118 15.6621 119.898 15.8203C119.67 15.9785 119.415 16.1455 119.125 16.3125C118.826 16.4795 118.457 16.6201 118 16.7432C117.543 16.8662 117.06 16.9189 116.559 16.9189C115.117 16.9189 113.896 16.418 112.911 15.416C111.918 14.4141 111.426 13.1748 111.426 11.6982C111.426 10.2217 111.918 8.98242 112.911 7.98047C113.896 6.97852 115.117 6.47754 116.559 6.47754C117.095 6.47754 117.613 6.55664 118.105 6.71484C118.598 6.87305 118.993 7.04883 119.292 7.24219C119.591 7.43555 119.872 7.64648 120.136 7.89258C120.391 8.13867 120.558 8.31445 120.628 8.41113C120.698 8.50781 120.751 8.58691 120.786 8.63965L121.691 7.83105L121.489 7.55859C121.357 7.38281 121.146 7.16309 120.856 6.89941C120.566 6.64453 120.232 6.38965 119.846 6.13477C119.459 5.88867 118.976 5.66895 118.387 5.49316C117.807 5.31738 117.191 5.2207 116.55 5.2207C114.757 5.2207 113.228 5.85352 111.962 7.11035C110.705 8.37598 110.081 9.90527 110.081 11.6982ZM126.192 16.7432V12.0586H132.036V10.8018H126.192V6.66211H133.478V5.39648H124.838V18H133.662V16.7432H126.192ZM144.904 5.39648V15.5742L137.161 5.39648H135.992V18H137.345V7.83105L145.08 18H146.249V5.39648H144.904ZM151.03 16.7432V12.0586H156.875V10.8018H151.03V6.66211H158.316V5.39648H149.677V18H158.501V16.7432H151.03Z" fill="black"/>
+<path d="M22.9009 23.6982V30H25.1069C25.9814 30 26.7329 29.6924 27.3613 29.0684C27.9854 28.4487 28.3018 27.7104 28.3018 26.8535C28.3018 25.9922 27.9854 25.2539 27.3613 24.6343C26.7329 24.0103 25.9814 23.7026 25.1069 23.7026L22.9009 23.6982ZM25.1069 24.6035C25.7178 24.6035 26.2363 24.8188 26.6626 25.2539C27.0933 25.689 27.3042 26.2207 27.3042 26.8535C27.3042 27.4819 27.0933 28.0137 26.6626 28.4487C26.2363 28.8838 25.7178 29.1035 25.1069 29.1035H23.8896V24.6035H25.1069ZM30.0088 30H30.9975V23.6982H30.0088V30ZM36.0356 28.1982C36.0356 28.4795 35.9213 28.7168 35.6972 28.9058C35.4687 29.0991 35.1611 29.1914 34.7744 29.1914C34.5634 29.1914 34.3613 29.1694 34.1723 29.1167C33.9834 29.064 33.8339 29.0068 33.7197 28.9453C33.6054 28.8838 33.4956 28.8091 33.3989 28.7256C33.3022 28.6421 33.2363 28.585 33.2099 28.5498C33.1836 28.5146 33.1616 28.4883 33.1528 28.4707L32.5244 29.0991L32.6123 29.209C32.665 29.2749 32.7573 29.354 32.8803 29.4507C33.0034 29.5474 33.1484 29.644 33.3154 29.7407C33.4824 29.8374 33.6933 29.9165 33.9526 29.9868C34.2119 30.0571 34.4843 30.0923 34.7744 30.0923C35.4775 30.0923 36.0268 29.9165 36.4267 29.5649C36.8222 29.2134 37.0244 28.7563 37.0244 28.2026C37.0244 27.8862 36.9629 27.6138 36.8398 27.3853C36.7168 27.1567 36.5542 26.981 36.3608 26.8579C36.1674 26.7349 35.9521 26.6294 35.7148 26.5415C35.4775 26.4536 35.2402 26.3833 35.0029 26.3218C34.7656 26.2603 34.5459 26.1943 34.3525 26.1196C34.1591 26.0449 34.0009 25.9395 33.8779 25.8076C33.7548 25.6758 33.6933 25.5132 33.6933 25.3198C33.6933 25.1045 33.79 24.9155 33.9878 24.7529C34.1855 24.5947 34.4492 24.5112 34.7744 24.5112C34.9326 24.5112 35.0864 24.5332 35.2314 24.5684C35.3764 24.6079 35.4951 24.6519 35.583 24.7002C35.6709 24.7485 35.7544 24.8013 35.8335 24.8628C35.9126 24.9243 35.9609 24.9683 35.9829 24.9946C36.0048 25.021 36.0224 25.043 36.0356 25.0518L36.664 24.4189L36.5937 24.3311C36.541 24.2783 36.4619 24.2124 36.3564 24.1333C36.2509 24.0542 36.1235 23.9795 35.9829 23.9004C35.8422 23.8213 35.6621 23.7554 35.4467 23.6982C35.2314 23.6411 35.0073 23.6104 34.7744 23.6104C34.1372 23.6104 33.6318 23.7773 33.2627 24.1025C32.8891 24.4277 32.7046 24.8364 32.7046 25.3198C32.7046 25.6406 32.7661 25.9131 32.8891 26.1416C33.0122 26.3701 33.1704 26.5415 33.3637 26.6646C33.5571 26.7876 33.7768 26.8931 34.0141 26.981C34.2514 27.0688 34.4887 27.1436 34.726 27.2051C34.9633 27.2666 35.1787 27.3325 35.372 27.4072C35.5654 27.4819 35.728 27.583 35.851 27.7148C35.9741 27.8467 36.0356 28.0049 36.0356 28.1982ZM41.6142 23.6104C40.6694 23.6104 39.8784 23.9268 39.2412 24.5508C38.5996 25.1792 38.2831 25.9438 38.2831 26.8491C38.2831 27.7544 38.5996 28.5234 39.2412 29.1475C39.8784 29.7759 40.6694 30.0879 41.6142 30.0879C41.9306 30.0879 42.2382 30.0439 42.5371 29.9561C42.8359 29.8682 43.082 29.7671 43.2665 29.6572C43.4511 29.543 43.6269 29.4155 43.7939 29.2749C43.9609 29.1299 44.0663 29.0288 44.1147 28.9717C44.163 28.9146 44.1982 28.8706 44.2202 28.8354L43.5873 28.2026L43.517 28.3125C43.4643 28.3784 43.3808 28.4575 43.2665 28.5542C43.1523 28.6509 43.0248 28.7476 42.8754 28.8442C42.726 28.9409 42.5414 29.02 42.3173 29.0903C42.0932 29.1606 41.8559 29.1958 41.6098 29.1958C40.955 29.1958 40.4013 28.9673 39.9487 28.5146C39.496 28.0576 39.2675 27.5039 39.2675 26.8535C39.2675 26.1987 39.496 25.645 39.9487 25.1924C40.4057 24.7397 40.9594 24.5156 41.6098 24.5156C41.8559 24.5156 42.0932 24.5464 42.3129 24.6167C42.5327 24.687 42.7128 24.7617 42.8491 24.8408C42.9897 24.9199 43.1171 25.0166 43.2358 25.1265C43.3588 25.2407 43.4335 25.3154 43.4687 25.3594C43.5038 25.4033 43.5258 25.4341 43.5434 25.4561L44.1718 24.8232L44.0751 24.7002C44.0092 24.6167 43.9038 24.5156 43.7587 24.397C43.6181 24.2827 43.4511 24.1641 43.2578 24.041C43.0644 23.9224 42.8227 23.8213 42.5283 23.7378C42.2382 23.6543 41.9306 23.6104 41.6142 23.6104ZM46.1952 26.8491C46.1952 26.1987 46.4194 25.645 46.872 25.1924C47.3246 24.7397 47.8783 24.5112 48.5331 24.5112C49.1879 24.5112 49.7416 24.7397 50.1943 25.1924C50.6469 25.645 50.8754 26.1987 50.8754 26.8491C50.8754 27.5039 50.6469 28.0576 50.1943 28.5103C49.7416 28.9673 49.1879 29.1914 48.5331 29.1914C47.8783 29.1914 47.3246 28.9673 46.872 28.5103C46.4194 28.0576 46.1952 27.5039 46.1952 26.8491ZM45.2065 26.8491C45.2065 27.7544 45.5229 28.5234 46.1645 29.1475C46.8017 29.7759 47.5927 30.0879 48.5331 30.0879C49.4736 30.0879 50.2646 29.7759 50.9018 29.1475C51.5434 28.5234 51.8598 27.7544 51.8598 26.8491C51.8598 25.9438 51.5434 25.1792 50.9018 24.5508C50.2646 23.9268 49.4736 23.6104 48.5331 23.6104C47.5927 23.6104 46.8017 23.9268 46.1645 24.5508C45.5229 25.1792 45.2065 25.9438 45.2065 26.8491ZM55.0653 30H56.0541L58.5282 23.6982H57.4955L55.5575 28.7388L53.6239 23.6982H52.5868L55.0653 30ZM60.9559 29.0991V27.1655H63.7025V26.2646H60.9559V24.5991H64.4232V23.6982H59.9672V30H64.5111V29.0991H60.9559ZM66.1346 30H67.1234V27.5698H68.5648L69.9139 30H70.995L69.5536 27.4819L69.681 27.4248C69.7689 27.3896 69.8744 27.3237 69.9974 27.2271C70.1205 27.1304 70.2435 27.0205 70.3666 26.8887C70.4896 26.7612 70.5951 26.5854 70.683 26.3613C70.7709 26.1372 70.8148 25.8955 70.8148 25.6362C70.8148 25.0913 70.6214 24.6299 70.2391 24.2563C69.8524 23.8872 69.369 23.6982 68.7889 23.6982H66.1346V30ZM69.8216 25.6362C69.8216 25.9307 69.7206 26.1768 69.5228 26.3745C69.3251 26.5723 69.079 26.6689 68.7889 26.6689H67.1234V24.5991H68.7889C69.079 24.5991 69.3251 24.7002 69.5228 24.8979C69.7206 25.0957 69.8216 25.3418 69.8216 25.6362Z" fill="#8F5AFF"/>
+</svg>
diff --git a/client/src/components/App/App.tsx b/client/src/components/App/App.tsx
index 8a8b657c6..822146cdf 100644
--- a/client/src/components/App/App.tsx
+++ b/client/src/components/App/App.tsx
@@ -22,7 +22,6 @@ import { selectIsSeamlessEnabled } from "../../selectors/datasetMetadata";
 import Graph from "../Graph/Graph";
 import Scatterplot from "../scatterplot/scatterplot";
 import PanelEmbedding from "../PanelEmbedding/PanelEmbedding";
-import { BANNER_FEEDBACK_SURVEY_LINK } from "../BottomBanner/constants";
 
 interface StateProps {
   loading: RootState["controls"]["loading"];
@@ -125,7 +124,7 @@ class App extends React.Component<StateProps & { dispatch: AppDispatch }> {
                     <LeftSideBar />
                     <RightSideBar />
                   </Layout>
-                  <BottomBanner surveyLink={BANNER_FEEDBACK_SURVEY_LINK} />
+                  <BottomBanner />
                 </>
               )}
             </ThemeProvider>
diff --git a/client/src/components/BottomBanner/BottomBanner.tsx b/client/src/components/BottomBanner/BottomBanner.tsx
index 6dae8785c..c575cdad8 100644
--- a/client/src/components/BottomBanner/BottomBanner.tsx
+++ b/client/src/components/BottomBanner/BottomBanner.tsx
@@ -1,19 +1,27 @@
 import React, { memo } from "react";
 import { connect } from "react-redux";
+
 import { AppDispatch, RootState } from "reducers";
+
 import {
   BOTTOM_BANNER_ID,
   StyledBanner,
   StyledBottomBannerWrapper,
   StyledLink,
+  HiddenHubspotForm,
 } from "./style";
 import {
   BOTTOM_BANNER_SURVEY_LINK_TEXT,
   BOTTOM_BANNER_SURVEY_TEXT,
+  BANNER_FEEDBACK_SURVEY_LINK,
+  BOTTOM_BANNER_NEWSLETTER_LINK_TEXT,
+  BOTTOM_BANNER_NEWSLETTER_TEXT,
+  FORM_CONTAINER_ID,
 } from "./constants";
+import { NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
+import { useConnect } from "./connect";
 
 export interface BottomBannerProps {
-  surveyLink: string;
   showBottomBanner: boolean;
   dispatch: AppDispatch;
 }
@@ -26,19 +34,7 @@ const mapDispatchToProps = (dispatch: AppDispatch) => ({
   dispatch,
 });
 
-function BannerContent({ surveyLink }: { surveyLink: string }): JSX.Element {
-  return (
-    <span>
-      {BOTTOM_BANNER_SURVEY_TEXT}
-      <StyledLink href={surveyLink} target="_blank" rel="noopener">
-        {BOTTOM_BANNER_SURVEY_LINK_TEXT}
-      </StyledLink>
-    </span>
-  );
-}
-
 function BottomBanner({
-  surveyLink,
   showBottomBanner,
   dispatch,
 }: BottomBannerProps): JSX.Element | null {
@@ -49,21 +45,53 @@ function BottomBanner({
     });
   };
 
+  const { toggleNewsletterSignupModal, newsletterModalIsOpen } = useConnect();
+
   if (!showBottomBanner) return null;
 
   return (
-    <StyledBottomBannerWrapper
-      id={BOTTOM_BANNER_ID}
-      data-testid={BOTTOM_BANNER_ID}
-    >
-      <StyledBanner
-        dismissible
-        sdsType="primary"
-        onClose={setBottomBannerLastClosedTime}
+    <>
+      <HiddenHubspotForm id={FORM_CONTAINER_ID} />
+      <StyledBottomBannerWrapper
+        id={BOTTOM_BANNER_ID}
+        data-testid={BOTTOM_BANNER_ID}
       >
-        <BannerContent surveyLink={surveyLink} />
-      </StyledBanner>
-    </StyledBottomBannerWrapper>
+        <StyledBanner
+          dismissible
+          sdsType="primary"
+          onClose={setBottomBannerLastClosedTime}
+        >
+          <span>
+            <span>
+              <StyledLink
+                onClick={() => {
+                  toggleNewsletterSignupModal();
+                }}
+                data-testid="newsletter-modal-open-button"
+              >
+                {" "}
+                {BOTTOM_BANNER_NEWSLETTER_LINK_TEXT}
+              </StyledLink>
+              {BOTTOM_BANNER_NEWSLETTER_TEXT}{" "}
+            </span>
+            <span>
+              {BOTTOM_BANNER_SURVEY_TEXT}
+              <StyledLink
+                href={BANNER_FEEDBACK_SURVEY_LINK}
+                target="_blank"
+                rel="noopener"
+              >
+                {BOTTOM_BANNER_SURVEY_LINK_TEXT}
+              </StyledLink>
+            </span>
+          </span>{" "}
+        </StyledBanner>
+        <NewsletterSignup
+          isOpen={newsletterModalIsOpen}
+          toggleModal={toggleNewsletterSignupModal}
+        />
+      </StyledBottomBannerWrapper>
+    </>
   );
 }
 
diff --git a/client/src/components/BottomBanner/components/NewsletterSignup/NewsletterSignup.tsx b/client/src/components/BottomBanner/components/NewsletterSignup/NewsletterSignup.tsx
new file mode 100644
index 000000000..5d08021ba
--- /dev/null
+++ b/client/src/components/BottomBanner/components/NewsletterSignup/NewsletterSignup.tsx
@@ -0,0 +1,116 @@
+import React from "react";
+import { Button } from "@blueprintjs/core";
+import { FORM_CONTAINER_ID } from "components/BottomBanner/constants";
+import cellxgeneLogoSvg from "assets/img/CellxGene.svg";
+import { track } from "analytics";
+import { EVENTS } from "analytics/events";
+import {
+  HeaderContainer,
+  HiddenHubspotForm,
+  NewsletterModal,
+  StyledDescription,
+  StyledDisclaimer,
+  StyledErrorMessage,
+  StyledForm,
+  StyledInputText,
+  StyledSubmitButton,
+  StyledTitle,
+} from "./style";
+import { useConnect } from "../../connect";
+
+export function NewsletterSignup({
+  isOpen,
+  toggleModal,
+}: {
+  isOpen: boolean;
+  toggleModal: () => void;
+}) {
+  const {
+    isSubmitted,
+    email,
+    emailValidationError,
+    handleSubmit,
+    emailRef,
+    setError,
+    setSubmitButtonEnabledOnce,
+    submitButtonEnabledOnce,
+    setEmail,
+  } = useConnect();
+
+  return (
+    <>
+      <HiddenHubspotForm id={FORM_CONTAINER_ID} />
+      <NewsletterModal isOpen={isOpen} title="" onClose={() => toggleModal()}>
+        <>
+          <HeaderContainer>
+            <img alt="CELLxGENE Logo" src={cellxgeneLogoSvg} />
+            <Button
+              minimal
+              onClick={() => toggleModal()}
+              data-testid="newsletter-modal-close-button"
+            >
+              x
+            </Button>
+          </HeaderContainer>
+          <div data-testid="newsletter-modal-content">
+            <StyledTitle>Join Our Newsletter</StyledTitle>
+
+            <StyledDescription>
+              {isSubmitted
+                ? "Thanks for subscribing!"
+                : "Get a quarterly email with the latest CELLxGENE features and data."}
+            </StyledDescription>
+
+            <StyledForm onSubmit={handleSubmit} noValidate>
+              {!isSubmitted && (
+                <>
+                  <StyledInputText
+                    intent={emailValidationError ? "error" : "default"}
+                    inputRef={emailRef}
+                    placeholder="Enter email address"
+                    label="Email"
+                    hideLabel
+                    onChange={(event) => {
+                      if (emailValidationError) setError("");
+
+                      if (!submitButtonEnabledOnce) {
+                        setSubmitButtonEnabledOnce(true);
+                        track(EVENTS.NEWSLETTER_SUBSCRIBE_BUTTON_AVAILABLE);
+                      }
+
+                      setEmail(event.target.value);
+                    }}
+                    id="email-input"
+                    value={email}
+                    required
+                    type="email"
+                    inputProps={{ "data-testid": "newsletter-email-input" }}
+                  />
+                  <StyledSubmitButton
+                    type="submit"
+                    color="primary"
+                    name="subscribe"
+                    disabled={!email}
+                    data-testid="newsletter-subscribe-button"
+                  >
+                    Subscribe
+                  </StyledSubmitButton>
+                </>
+              )}
+            </StyledForm>
+
+            <StyledErrorMessage data-testid="newsletter-validation-error-message">
+              {emailValidationError}
+            </StyledErrorMessage>
+
+            <StyledDisclaimer>
+              {isSubmitted
+                ? 'To unsubscribe, click on the "Unsubscribe" link at the bottom of the newsletter.'
+                : "Unsubscribe at any time."}
+            </StyledDisclaimer>
+          </div>
+        </>
+      </NewsletterModal>
+    </>
+  );
+}
diff --git a/client/src/components/BottomBanner/components/NewsletterSignup/style.ts b/client/src/components/BottomBanner/components/NewsletterSignup/style.ts
new file mode 100644
index 000000000..9732d8884
--- /dev/null
+++ b/client/src/components/BottomBanner/components/NewsletterSignup/style.ts
@@ -0,0 +1,98 @@
+import styled from "@emotion/styled";
+import { Button, Classes, Dialog } from "@blueprintjs/core";
+import {
+  InputText,
+  fontBodyS,
+  fontBodyXxxs,
+  fontHeaderXl,
+} from "@czi-sds/components";
+import { error400, gray500 } from "util/theme";
+
+export const NewsletterModal = styled(Dialog)`
+  background: white;
+  .${Classes.DIALOG_HEADER} {
+    display: none !important;
+  }
+  min-width: 400px !important;
+  min-height: 266px !important;
+  max-width: 400px !important;
+  max-height: 266px !important;
+  margin: 0;
+  padding: 24px;
+  padding-bottom: 24px !important;
+`;
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+export const StyledTitle = styled.div`
+  ${fontHeaderXl}
+  letter-spacing: -0.019em;
+  font-size: 24px !important;
+  margin: 0;
+  height: auto !important;
+  padding-top: 16px;
+  padding-bottom: 8px;
+`;
+
+export const StyledDescription = styled.div`
+  ${fontBodyS}
+  letter-spacing: -0.006em;
+  padding-bottom: 16px;
+`;
+
+export const StyledForm = styled.form`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 34px;
+  margin-bottom: 0;
+  align-items: center;
+  width: 100%;
+`;
+
+export const StyledInputText = styled(InputText)`
+  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #5826c1 !important;
+  }
+  flex: 1;
+  margin-right: 4px;
+  margin-bottom: 0px;
+  display: inline-flex;
+`;
+
+export const StyledSubmitButton = styled(Button)`
+  padding: 6px 12px;
+  width: 91px;
+  height: 34px;
+  background: #8f5aff;
+  font-weight: 500;
+  :hover {
+    background: #5826c1;
+  }
+`;
+
+export const StyledErrorMessage = styled.div`
+  ${fontBodyXxxs}
+  letter-spacing: -0.005em;
+  align-self: flex-start;
+  height: 16px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  color: ${error400};
+`;
+
+export const StyledDisclaimer = styled.div`
+  ${fontBodyXxxs}
+  letter-spacing: -0.005em;
+
+  color: ${gray500};
+`;
+
+export const HiddenHubspotForm = styled.div`
+  display: none;
+`;
diff --git a/client/src/components/BottomBanner/connect.ts b/client/src/components/BottomBanner/connect.ts
new file mode 100644
index 000000000..95d052698
--- /dev/null
+++ b/client/src/components/BottomBanner/connect.ts
@@ -0,0 +1,151 @@
+import { track } from "analytics";
+import { EVENTS } from "analytics/events";
+import {
+  FAILED_EMAIL_VALIDATION_STRING,
+  FORM_CONTAINER_ID_QUERY,
+  NEWSLETTER_SIGNUP_FAILURE_MESSAGE,
+  NEWSLETTER_SIGNUP_SUCCESS_MESSAGE,
+} from "components/BottomBanner/constants";
+import { useEffect, useRef, useState } from "react";
+
+export function useConnect() {
+  const [newsletterModalIsOpen, setNewsletterModalIsOpen] = useState(false);
+  const [isHubSpotReady, setIsHubSpotReady] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [email, setEmail] = useState("");
+  const [emailValidationError, setError] = useState("");
+
+  /**
+   * For analytics if submit button was made enabled by user input
+   */
+  const [submitButtonEnabledOnce, setSubmitButtonEnabledOnce] = useState(false);
+
+  const emailRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://js.hsforms.net/forms/v2.js";
+    script.async = true;
+
+    script.onload = () => {
+      setIsHubSpotReady(true);
+    };
+
+    document.body.appendChild(script);
+
+    /**
+     * Observer to observe changes in the Hubspot embedded form,
+     * which is hidden from the user in order to use our own form view
+     */
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        /**
+         * Loop through all added nodes that were detected
+         */
+        for (let i = 0; i < mutation.addedNodes.length; i += 1) {
+          const node = mutation.addedNodes.item(i);
+
+          /**
+           *  Submission success flow
+           */
+          if (node?.textContent?.includes(NEWSLETTER_SIGNUP_SUCCESS_MESSAGE)) {
+            setIsSubmitted(true);
+            setError("");
+
+            track(EVENTS.NEWSLETTER_SIGNUP_SUCCESS);
+          } else if (
+            /**
+             * Hubspot email validation failure flow
+             */
+            node?.textContent?.includes(NEWSLETTER_SIGNUP_FAILURE_MESSAGE)
+          ) {
+            /**
+             * HTML email validation may pass, but may not pass validation for Hubspot
+             */
+            setError(FAILED_EMAIL_VALIDATION_STRING);
+            track(EVENTS.NEWSLETTER_SIGNUP_FAILURE);
+          }
+        }
+      }
+    });
+
+    if (isHubSpotReady) {
+      window.hbspt?.forms.create({
+        region: "na1",
+        portalId: "7272273",
+        formId: "eb65b811-0451-414d-8304-7b9b6f468ce5",
+        target: FORM_CONTAINER_ID_QUERY,
+      });
+
+      const form = document.querySelector(FORM_CONTAINER_ID_QUERY);
+
+      if (form) {
+        observer.observe(form, {
+          childList: true,
+          subtree: true,
+        });
+      }
+    }
+
+    return () => observer.disconnect();
+  }, [isHubSpotReady]);
+
+  function toggleNewsletterSignupModal() {
+    if (!newsletterModalIsOpen) {
+      track(EVENTS.NEWSLETTER_OPEN_MODAL_CLICKED);
+    }
+    setError("");
+    setEmail("");
+    setNewsletterModalIsOpen((prevValue) => !prevValue);
+  }
+
+  function validateEmail() {
+    const validityState = emailRef?.current?.validity;
+    if (validityState?.valueMissing || validityState?.typeMismatch) {
+      setError(FAILED_EMAIL_VALIDATION_STRING);
+      track(EVENTS.NEWSLETTER_SIGNUP_FAILURE);
+      return false;
+    }
+    setError("");
+    return true;
+  }
+
+  const handleSubmit = (event: React.FormEvent) => {
+    track(EVENTS.NEWSLETTER_EMAIL_SUBMITTED);
+
+    event.preventDefault();
+    const isValid = validateEmail();
+    const form: HTMLFormElement | null = isValid
+      ? document.querySelector(`${FORM_CONTAINER_ID_QUERY} form`)
+      : null;
+
+    if (!isValid || !form) {
+      return;
+    }
+
+    const input = form.querySelector("input");
+    if (!input) {
+      return;
+    }
+
+    input.value = email;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    form.submit();
+  };
+
+  return {
+    newsletterModalIsOpen,
+    isHubSpotReady,
+    isSubmitted,
+    email,
+    emailRef,
+    emailValidationError,
+    toggleNewsletterSignupModal,
+    setIsHubSpotReady,
+    handleSubmit,
+    submitButtonEnabledOnce,
+    setSubmitButtonEnabledOnce,
+    setError,
+    setEmail,
+  };
+}
diff --git a/client/src/components/BottomBanner/constants.ts b/client/src/components/BottomBanner/constants.ts
index 191bb6b51..2a9b1eba0 100644
--- a/client/src/components/BottomBanner/constants.ts
+++ b/client/src/components/BottomBanner/constants.ts
@@ -4,4 +4,14 @@ export const BOTTOM_BANNER_SURVEY_LINK_TEXT = "quick survey.";
 export const BOTTOM_BANNER_SURVEY_TEXT = "Send us feedback with this";
 export const BOTTOM_BANNER_LAST_CLOSED_TIME_KEY = "bottomBannerLastClosedTime";
 export const BOTTOM_BANNER_EXPIRATION_TIME_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
-// export const BOTTOM_BANNER_EXPIRATION_TIME_MS = 30 * 1000; // 30 seconds
+export const BOTTOM_BANNER_NEWSLETTER_TEXT =
+  "to our newsletter to receive updates about new features.";
+export const BOTTOM_BANNER_NEWSLETTER_LINK_TEXT = "Subscribe";
+export const FAILED_EMAIL_VALIDATION_STRING =
+  "Please provide a valid email address.";
+export const FORM_CONTAINER_ID = "hubspot-form-container";
+export const FORM_CONTAINER_ID_QUERY = `#${FORM_CONTAINER_ID}`;
+export const NEWSLETTER_SIGNUP_SUCCESS_MESSAGE =
+  "Thank you for joining our newsletter.";
+export const NEWSLETTER_SIGNUP_FAILURE_MESSAGE =
+  "Please enter a valid email address.";
diff --git a/client/src/components/BottomBanner/style.ts b/client/src/components/BottomBanner/style.ts
index 91a7b1888..cb7944015 100644
--- a/client/src/components/BottomBanner/style.ts
+++ b/client/src/components/BottomBanner/style.ts
@@ -61,3 +61,7 @@ export const StyledCloseButtonIcon = styled(Icon, {
   shouldForwardProp: (prop) =>
     !STYLED_CLOSE_BUTTON_ICON_DENY_PROPS.includes(prop),
 })``;
+
+export const HiddenHubspotForm = styled.div`
+  display: none;
+`;
diff --git a/client/src/global.d.ts b/client/src/global.d.ts
index 3de67308e..76598e38e 100644
--- a/client/src/global.d.ts
+++ b/client/src/global.d.ts
@@ -1,10 +1,5 @@
 import { Viewer, Options } from "openseadragon";
 
-declare module "*.svg" {
-  const content: string;
-  export default content;
-}
-
 /**
  * We use v4, but the types are for v3. This is a temporary workaround.
  * https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/openseadragon
@@ -14,3 +9,29 @@ declare module "openseadragon" {
 
   export default openseadragon;
 }
+
+namespace HubSpotFormAPI {
+  /**
+   * HubSpot form creation options.
+   * https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options
+   */
+  export interface CreateFormOptions {
+    region: string;
+    portalId: string;
+    formId: string;
+    target?: string;
+  }
+
+  export interface HubSpotForm {
+    create(options: CreateFormOptions): void;
+  }
+  export interface HubSpot {
+    forms: HubSpotForm;
+  }
+}
+
+declare global {
+  interface Window {
+    hbspt: HubSpotFormAPI.HubSpot;
+  }
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 0c0df8139..0a819b6c2 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -15,7 +15,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "paths": {
-      "~/globals": ["globals.ts"],
+      "~/globals": ["globals.ts"]
     },
     "skipLibCheck": true,
     "strict": true,