chore: Add newsletter signup to bottom banner (SCE-29) (#1116)

chanzuckerberg · Oct 1, 2024 · 1f0048f · 1f0048f
1 parent 563a03c
commit 1f0048f
Show file tree

Hide file tree

Showing 16 changed files with 515 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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>
+    </>
   );
 }