Merging staging branch into prod branch

chanzuckerberg · Aug 8, 2024 · 6baf9a7 · 6baf9a7
2 parents 8604996 + 408b487
commit 6baf9a7
Show file tree

Hide file tree

Showing 33 changed files with 748 additions and 491 deletions.
diff --git a/frontend/public/cxg-og.jpg b/frontend/public/cxg-og.jpg
diff --git a/frontend/src/common/analytics/events.ts b/frontend/src/common/analytics/events.ts
@@ -69,6 +69,7 @@ export enum EVENTS {
   DOWNLOAD_DATA_COMPLETE = "DOWNLOAD_DATA_COMPLETE",
   DOWNLOAD_DATA_COPY = "DOWNLOAD_DATA_COPY",
   DOWNLOAD_DATA_FORMAT_CLICKED = "DOWNLOAD_DATA_FORMAT_CLICKED",
+  HOMEPAGE_SEC_NAV_DE = "HOMEPAGE_SEC_NAV_DE",
   HOMEPAGE_SEC_NAV_CENSUS = "HOMEPAGE_SEC_NAV_CENSUS",
   HOMEPAGE_SEC_NAV_CELL_GUIDE = "HOMEPAGE_SEC_NAV_CELL_GUIDE",
   HOMEPAGE_SEC_NAV_COLLECTIONS_DATASETS = "HOMEPAGE_SEC_NAV_COLLECTIONS_DATASETS",
@@ -125,6 +126,7 @@ export enum EVENTS {
   CG_OPEN_INTEGRATED_EMBEDDING_CLICKED = "CG_OPEN_INTEGRATED_EMBEDDING_CLICKED",
   SUBMIT_CORRECTION_CLICKED = "SUBMIT_CORRECTION_CLICKED",
   // DIFFERENTIAL EXPRESSION
+  DE_CLICKED = "DE_CLICKED",
   DE_DOCUMENTATION_CLICKED = "DE_DOCUMENTATION_CLICKED",
   // Event triggered when a visitor selects a cell type for Cell group 1 or Cell group 2
   DE_SELECT_CELL_TYPE = "DE_SELECT_CELL_TYPE",

diff --git a/frontend/src/common/constants/airtableLinks.ts b/frontend/src/common/constants/airtableLinks.ts
@@ -1,6 +1,4 @@
-export const GENE_EXPRESSION_BANNER_SURVEY_LINK =
-  "https://airtable.com/shrLwepDSEX1HI6bo";
-export const CELL_GUIDE_BANNER_SURVEY_LINK =
-  "https://airtable.com/shrEReYLtRTAAsNiE";
 export const CELL_GUIDE_CORRECTION_SURVEY_LINK =
   "https://airtable.com/shr6hViGxXnJIxIVJ";
+export const BANNER_FEEDBACK_SURVEY_LINK =
+  "https://airtable.com/app8fNSQ8ieIiHLOv/shrmD31azkGtSupmO";
diff --git a/frontend/src/common/queries/wheresMyGene.ts b/frontend/src/common/queries/wheresMyGene.ts
@@ -30,7 +30,6 @@ import { EMPTY_OBJECT } from "../constants/utils";
 import { DEFAULT_FETCH_OPTIONS, JSON_BODY_FETCH_OPTIONS } from "./common";
 import { ENTITIES } from "./entities";
 import { Dataset } from "@mui/icons-material";
-import { formatCitation } from "../utils/formatCitation";
 
 interface RawOntologyTerm {
   [id: string]: string;
@@ -1158,7 +1157,7 @@ function toEntity(item: RawOntologyTerm) {
 function toCitationEntity(citation: string) {
   return {
     id: citation,
-    name: formatCitation(citation),
+    name: citation,
   };
 }
 

diff --git a/frontend/src/common/utils/formatCitation.ts b/frontend/src/common/utils/formatCitation.ts
diff --git a/frontend/src/components/BottomBanner/components/ModalContent/connect.ts b/frontend/src/components/BottomBanner/components/ModalContent/connect.ts
@@ -9,12 +9,10 @@ import {
 
 export const useConnect = ({
   id,
-  isHubSpotReady,
   email,
   setError,
 }: {
   id?: string;
-  isHubSpotReady: boolean;
   email: string;
   setError: (error: string) => void;
 }) => {
@@ -85,8 +83,6 @@ export const useConnect = ({
    * handles the submission success flow and email validation failure flow
    */
   useEffect(() => {
-    if (!isHubSpotReady) return;
-
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         for (let i = 0; i < mutation.addedNodes.length; i++) {
@@ -106,14 +102,6 @@ export const useConnect = ({
       }
     });
 
-    hbspt.forms.create({
-      region: "na1",
-      portalId: "7272273",
-      formId: "eb65b811-0451-414d-8304-7b9b6f468ce5",
-      target: formContainerQueryId,
-      formInstanceId: id,
-    });
-
     const form = document.querySelector(formContainerQueryId);
 
     if (form) {
@@ -126,7 +114,7 @@ export const useConnect = ({
     return () => {
       observer.disconnect();
     };
-  }, [formContainerQueryId, id, setError, isHubSpotReady]);
+  }, [formContainerQueryId, id, setError]);
 
   return {
     isSubmitted,

diff --git a/frontend/src/components/BottomBanner/components/ModalContent/index.tsx b/frontend/src/components/BottomBanner/components/ModalContent/index.tsx
@@ -22,7 +22,6 @@ import {
 
 export default function BottomBannerModalContent({
   id = "newsletter-banner",
-  isHubSpotReady = false,
   setEmail,
   setError,
   emailValidationError,
@@ -34,7 +33,7 @@ export default function BottomBannerModalContent({
     submitButtonEnabledOnce,
     setSubmitButtonEnabledOnce,
     emailRef,
-  } = useConnect({ id, isHubSpotReady, setError, email });
+  } = useConnect({ id, setError, email });
 
   return (
     <StyledNewsletterSignupModal data-testid="newsletter-modal-content">

diff --git a/frontend/src/components/BottomBanner/connect.ts b/frontend/src/components/BottomBanner/connect.ts
@@ -7,28 +7,15 @@ import {
 import { track } from "src/common/analytics";
 import { EVENTS } from "src/common/analytics/events";
 
-export const useConnect = ({
-  isHubSpotReadyProp,
-  asFooter,
-}: {
-  isHubSpotReadyProp: boolean;
-  asFooter?: boolean;
-}) => {
+export const useConnect = ({ asFooter }: { asFooter?: boolean }) => {
   const [bottomBannerLastClosedTime, setBottomBannerLastClosedTime] =
     useLocalStorage<number>(BOTTOM_BANNER_LAST_CLOSED_TIME_KEY, 0);
 
   const [newsletterModalIsOpen, setNewsletterModalIsOpen] = useState(false);
-  const [isHubSpotReady, setIsHubSpotReady] = useState(false);
   const [email, setEmail] = useState("");
   const [emailValidationError, setError] = useState("");
   const [isDirectLink, setIsDirectLink] = useState(false);
 
-  useEffect(() => {
-    if (!isHubSpotReadyProp) return;
-
-    setIsHubSpotReady(true);
-  }, [isHubSpotReady, isHubSpotReadyProp]);
-
   /**
    * useEffect
    * Reads a query parameter from the URL to auto open the newsletter signup modal
@@ -37,8 +24,6 @@ export const useConnect = ({
    * isDirectLink is tracked in setter function or else we get window not defined error
    */
   useEffect(() => {
-    if (!isHubSpotReady) return;
-
     if (!asFooter && window) {
       const openModalParam = new URLSearchParams(window.location.search).get(
         "newsletter_signup"
@@ -54,7 +39,7 @@ export const useConnect = ({
         });
       }
     }
-  }, [asFooter, isDirectLink, isHubSpotReady]);
+  }, [asFooter, isDirectLink]);
 
   /**
    * showBanner
@@ -78,6 +63,8 @@ export const useConnect = ({
   /**
    * toggleNewsletterSignupModal
    * Toggles the newsletter signup modal
+   * (smcanny) 07/24 - not in use currently
+   * leaving it here incase a new newsletter modal is established
    * */
   function toggleNewsletterSignupModal() {
     if (!newsletterModalIsOpen) {
@@ -91,11 +78,9 @@ export const useConnect = ({
   return {
     setBottomBannerLastClosedTime,
     newsletterModalIsOpen,
-    setIsHubSpotReady,
     isDirectLink,
     toggleNewsletterSignupModal,
     showBanner,
-    isHubSpotReady,
     email,
     setEmail,
     emailValidationError,

diff --git a/frontend/src/components/BottomBanner/constants.ts b/frontend/src/components/BottomBanner/constants.ts
@@ -1,22 +1,24 @@
-export const FORM_CONTAINER_ID = "hubspot-form-container";
+export const FORM_CONTAINER_ID = "form-container";
 export const FORM_CONTAINER_ID_QUERY = `#${FORM_CONTAINER_ID}`;
-export const FAILED_EMAIL_VALIDATION_STRING =
-  "Please provide a valid email address.";
-export const HIDDEN_NEWSLETTER_SUCCESS_MESSAGE =
-  "Thank you for joining our newsletter.";
+
 export const BOTTOM_BANNER_EXPIRATION_TIME_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
 export const BOTTOM_BANNER_LAST_CLOSED_TIME_KEY = "bottomBannerLastClosedTime";
+export const BOTTOM_BANNER_SURVEY_LINK_TEXT = "quick survey.";
+export const BOTTOM_BANNER_SURVEY_TEXT = "Send us feedback with this";
+
+//(smcanny) 07/24 - Newsletter constants not currently in use
+// leaving it here incase a new newsletter modal is established
 export const NEWSLETTER_SIGNUP_TITLE = "Join Our Newsletter";
 export const NEWSLETTER_SIGNUP_MESSAGE = "Thanks for subscribing!";
 export const NEWSLETTER_SIGNUP_SUCCESS_MESSAGE =
   "Get a quarterly email with the latest CELLxGENE features and data.";
 export const NEWSLETTER_SIGNUP_UNSUBSCRIBE_MESSAGE_UPON_SIGNUP =
   'To unsubscribe, click on the "Unsubscribe" link at the bottom of the newsletter.';
 export const NEWSLETTER_SIGNUP_UNSUBSCRIBE_MESSAGE = "Unsubscribe at any time.";
-export const HUBSPOT_URL = "https://js.hsforms.net/forms/v2.js";
 export const NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_BUTTON_TEXT = "Subscribe";
 export const NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_TEXT =
   "to our newsletter to receive updates about new features.";
-export const NEWSLETTER_SIGNUP_BANNER_SURVEY_LINK_TEXT = "quick survey.";
-export const NEWSLETTER_SIGNUP_BANNER_SURVEY_TEXT =
-  "Send us feedback with this";
+export const FAILED_EMAIL_VALIDATION_STRING =
+  "Please provide a valid email address.";
+export const HIDDEN_NEWSLETTER_SUCCESS_MESSAGE =
+  "Thank you for joining our newsletter.";
diff --git a/frontend/src/components/BottomBanner/index.tsx b/frontend/src/components/BottomBanner/index.tsx
@@ -1,77 +1,51 @@
-import Script from "next/script";
 import { memo } from "react";
 import {
   BOTTOM_BANNER_ID,
   NewsletterModal,
   StyledBanner,
   StyledBottomBannerWrapper,
   StyledLink,
-  HeaderContainer,
-  HiddenHubSpotForm,
   FooterContentWrapper,
   StyledCloseButtonIcon,
+  HeaderContainer,
 } from "./style";
 import CellxgeneLogoSvg from "src/common/images/CellxGene.svg";
-import Head from "next/head";
 import { EXCLUDE_IN_SCREENSHOT_CLASS_NAME } from "src/views/WheresMyGeneV2/components/GeneSearchBar/components/SaveExport";
-import { noop } from "src/common/constants/utils";
 import BottomBannerModalContent from "./components/ModalContent";
 import { useConnect } from "./connect";
 import {
-  FORM_CONTAINER_ID,
-  HUBSPOT_URL,
+  BOTTOM_BANNER_SURVEY_LINK_TEXT,
+  BOTTOM_BANNER_SURVEY_TEXT,
   NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_BUTTON_TEXT,
   NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_TEXT,
-  NEWSLETTER_SIGNUP_BANNER_SURVEY_LINK_TEXT,
-  NEWSLETTER_SIGNUP_BANNER_SURVEY_TEXT,
 } from "./constants";
 import { Props } from "./types";
 
 export default memo(function BottomBanner({
-  includeSurveyLink = true,
+  hasSurveyLink = true,
+  hasNewsletterSignup = false,
   asFooter = false,
   customSurveyLinkPrefix,
   analyticsHandler,
-  airtableLink,
+  surveyLink,
   id = "newsletter-banner",
-  isHubSpotReady: isHubSpotReadyProp = false,
-  onHubSpotReady = noop,
 }: Props): JSX.Element | null {
   const {
     setBottomBannerLastClosedTime,
     setEmail,
     setError,
-    setIsHubSpotReady,
     toggleNewsletterSignupModal,
     newsletterModalIsOpen,
     isDirectLink,
     showBanner,
-    isHubSpotReady,
     email,
     emailValidationError,
-  } = useConnect({ isHubSpotReadyProp, asFooter });
+  } = useConnect({ asFooter });
 
   if (!showBanner) return null;
 
   return (
     <>
-      <Head>
-        {!asFooter && (
-          <meta
-            id="newsletter-signup-meta"
-            name="viewport"
-            content="width=device-width, initial-scale=1, maximum-scale=1"
-          />
-        )}
-      </Head>
-      <Script
-        onReady={() => {
-          setIsHubSpotReady(true);
-          onHubSpotReady();
-        }}
-        type="text/javascript"
-        src={HUBSPOT_URL}
-      />
       <StyledBottomBannerWrapper
         asFooter={asFooter}
         id={BOTTOM_BANNER_ID}
@@ -84,13 +58,9 @@ export default memo(function BottomBanner({
           onClose={() => setBottomBannerLastClosedTime(Date.now())}
           data-id={id}
         >
-          {/* Hidden form for submitting the data to HubSpot */}
-          <HiddenHubSpotForm id={FORM_CONTAINER_ID} />
-
           {asFooter ? (
             <FooterContentWrapper>
               <BottomBannerModalContent
-                isHubSpotReady={isHubSpotReady}
                 setError={setError}
                 setEmail={setEmail}
                 email={email}
@@ -100,25 +70,29 @@ export default memo(function BottomBanner({
           ) : (
             <>
               <>
-                <StyledLink
-                  onClick={toggleNewsletterSignupModal}
-                  data-testid="newsletter-modal-open-button"
-                >
-                  {NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_BUTTON_TEXT}
-                </StyledLink>
-                {NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_TEXT}
-                {includeSurveyLink && (
+                {hasNewsletterSignup && (
+                  <>
+                    <StyledLink
+                      onClick={toggleNewsletterSignupModal}
+                      data-testid="newsletter-modal-open-button"
+                    >
+                      {NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_BUTTON_TEXT}
+                    </StyledLink>
+                    {NEWSLETTER_SIGNUP_BANNER_SUBSCRIBE_TEXT}
+                  </>
+                )}
+                {hasSurveyLink && (
                   <>
                     {customSurveyLinkPrefix
                       ? customSurveyLinkPrefix
-                      : NEWSLETTER_SIGNUP_BANNER_SURVEY_TEXT}
+                      : BOTTOM_BANNER_SURVEY_TEXT}
                     <StyledLink
-                      href={airtableLink}
+                      href={surveyLink}
                       target="_blank"
                       rel="noopener"
                       onClick={analyticsHandler}
                     >
-                      {NEWSLETTER_SIGNUP_BANNER_SURVEY_LINK_TEXT}
+                      {BOTTOM_BANNER_SURVEY_LINK_TEXT}
                     </StyledLink>
                   </>
                 )}
@@ -141,7 +115,6 @@ export default memo(function BottomBanner({
                   />
                 </HeaderContainer>
                 <BottomBannerModalContent
-                  isHubSpotReady={isHubSpotReady}
                   setError={setError}
                   setEmail={setEmail}
                   email={email}

diff --git a/frontend/src/components/BottomBanner/style.ts b/frontend/src/components/BottomBanner/style.ts
@@ -6,10 +6,6 @@ import { SKINNY_MODE_BREAKPOINT_WIDTH } from "src/views/CellGuide/components/Cel
 
 export const BOTTOM_BANNER_ID = "bottom-banner";
 
-export const HiddenHubSpotForm = styled.div`
-  display: none;
-`;
-
 export const StyledBanner = styled(Banner)`
   ${fontBodyS}