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

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-7d92494d
+        tag: sha-ae2edd43
       replicaCount: 1
       env:
         # env vars common to all deployment stages

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) => {

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",
 }

client/src/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

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>

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>
+    </>
   );
 }