From 484d079f2c072b49bb81af4194062e0e0d0ea7f7 Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Wed, 7 Aug 2024 11:45:25 -0400 Subject: [PATCH 1/4] feat: Add survey bottom banner without hubspot (#7319) --- .../src/common/constants/airtableLinks.ts | 6 +- .../components/ModalContent/connect.ts | 14 +- .../components/ModalContent/index.tsx | 3 +- .../src/components/BottomBanner/connect.ts | 23 +- .../src/components/BottomBanner/constants.ts | 20 +- .../src/components/BottomBanner/index.tsx | 71 ++---- frontend/src/components/BottomBanner/style.ts | 4 - frontend/src/components/BottomBanner/types.ts | 16 +- .../src/components/LandingFooter/index.tsx | 14 -- .../CellGuideBottomBanner/index.tsx | 34 --- .../components/LandingPage/index.tsx | 3 + .../components/Main/index.tsx | 234 +++++++++--------- .../WheresMyGeneV2/components/Main/index.tsx | 3 + .../features/wheresMyGene/landingPage.test.ts | 19 +- 14 files changed, 181 insertions(+), 283 deletions(-) delete mode 100644 frontend/src/views/CellGuide/components/CellGuideBottomBanner/index.tsx diff --git a/frontend/src/common/constants/airtableLinks.ts b/frontend/src/common/constants/airtableLinks.ts index 026284dc42109..b8a49437b19db 100644 --- 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/components/BottomBanner/components/ModalContent/connect.ts b/frontend/src/components/BottomBanner/components/ModalContent/connect.ts index fcc1ae948ea6f..541b1b1a7e328 100644 --- 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 index 9cd04dac09518..48f6d777b99f2 100644 --- 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 ( diff --git a/frontend/src/components/BottomBanner/connect.ts b/frontend/src/components/BottomBanner/connect.ts index 4b4d3e5e6e1d6..d20ec8780a306 100644 --- 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(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 index d70b3f2e5a283..9a39537ac93ce 100644 --- a/frontend/src/components/BottomBanner/constants.ts +++ b/frontend/src/components/BottomBanner/constants.ts @@ -1,11 +1,13 @@ -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 = @@ -13,10 +15,10 @@ export const NEWSLETTER_SIGNUP_SUCCESS_MESSAGE = 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 index 666debffdd8ae..351eeb77e4d8a 100644 --- a/frontend/src/components/BottomBanner/index.tsx +++ b/frontend/src/components/BottomBanner/index.tsx @@ -1,4 +1,3 @@ -import Script from "next/script"; import { memo } from "react"; import { BOTTOM_BANNER_ID, @@ -6,72 +5,47 @@ import { 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 ( <> - - {!asFooter && ( - - )} - -