feature: Unify Thank you pages in a reusable component

apps/eo_web/src/components/ThankYou.tsx

@@ -0,0 +1,90 @@
+import { type HTMLAttributes } from "react";
+import { Typography } from "@eo/ui";
+import { AllDonePanel } from "./AllDonePanel";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { toast } from "react-toastify";
+import { Loading } from "~/components/Loading";
+
+import { useMount } from "~/hooks/useMount";
+import { useState } from "react";
+
+type ThankYouProps = HTMLAttributes<HTMLElement> & {
+  mutationsParams: {
+    email: string;
+    phase?: string;
+    submission_id: string;
+  },
+  mutationKey: string[];
+  mutationFunction: (data: object) => Promise<any>;
+  isProfiling?: boolean;
+  mutateOnMount?: boolean;
+}
+
+export const ThankYou = ({
+  children,
+  mutationKey,
+  mutationFunction,
+  mutationsParams,
+  mutateOnMount = true
+}: ThankYouProps) => {
+  const [isLoading, setIsLoading] = useState(mutateOnMount);
+
+  const { mutate } = useMutation({
+    mutationFn: mutationFunction,
+    mutationKey: mutationKey,
+    onSuccess: () => {
+      setIsLoading(false);
+    },
+    onError: (result) => {
+      if (axios.isAxiosError(result)) {
+        if (result.response?.status !== 200) {
+          toast.error("Something went wrong");
+        }
+      } else {
+        toast.error("Something went wrong");
+      }
+    },
+  });
+
+  useMount(() => {
+    if (mutateOnMount) {
+      mutate(mutationsParams);
+    };
+  })
+
+  return (
+    isLoading ?
+      <section className="flex flex-col items-center justify-center md:min-h-[479px] relative">
+        <Loading />
+      </section>
+      :
+      <AllDonePanel>
+        <Typography
+          variant="base"
+          font="regular"
+          className="max-w-xl text-center text-[22px] font-normal leading-[36px]"
+        >
+          {children ?? <>
+            We received your feedback!
+            <br />
+            <br />
+            Thank you!
+          </>
+          }
+          <br />
+          <br />
+          Have questions? We’re here. Email support@eo.care, call{" "}
+          <a href="tel:+1-888-823-6143">888-823-6143</a>, or{" "}
+          <a
+            className="cursor-pointer font-new-hero text-[22px] underline"
+            href="https://calendly.com/eo-care/30min?back=1"
+            target="_blank"
+          >
+            schedule a video chat
+          </a>{" "}
+          with a member of our team.
+        </Typography>
+      </AllDonePanel>
+  )
+};

apps/eo_web/src/components/index.ts

@@ -0,0 +1,12 @@
+export * from "./AllDonePanel";
+export * from "./Carousel";
+export * from "./Collapsible";
+export * from "./EOInYourInbox";
+export * from "./FAQs";
+export * from "./Header";
+export * from "./HowEOWorks";
+export * from "./JotformFrame";
+export * from "./Loading";
+export * from "./NumberedStep";
+export * from "./SurveyResponded";
+export * from "./ThankYou";

apps/eo_web/src/screens/Cancer/CancerSurveyThankYou.tsx

@@ -1,97 +1,50 @@
-import { useState } from "react";
-import { useMutation } from "@tanstack/react-query";
-import axios from "axios";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { toast } from "react-toastify";
-
-import { Typography } from "@eo/ui";
-
-import { useApi } from "~/api/useApi";
-import { AllDonePanel } from "~/components/AllDonePanel";
 import { FAQs } from "~/components/FAQs";
 import { HowEOWorks } from "~/components/HowEOWorks";
-import { Loading } from "~/components/Loading";
-import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { FooterFull } from "~/layouts/FooterFull";
-import { Flows } from "~/stores/useProfilingStore";
-import { useSurveyStore } from "~/stores/useSurveyStore";
+import { Flows, type FlowType } from "~/stores/useProfilingStore";
 import { Footer } from "~/layouts/Footer";
-
+import { ThankYou } from "~/components";
+import { useSurveyStore } from "~/stores/useSurveyStore";
+import { useApi } from "~/api/useApi";
+import { Navigate, useSearchParams } from "react-router-dom";
+
+const flowsWithSmallFooter: FlowType[] = [
+  Flows.c_org,
+  Flows.cancer_pilot,
+  Flows.twist_out_cancer,
+  Flows.cancer_support_community,
+  Flows.resource_center_1,
+  Flows.resource_center_2,
+  Flows.employer_center,
+  Flows.inova,
+];
 
 export const CancerSurveyThankYou = () => {
-  const [isLoading, setIsLoading] = useState(true);
+  const { flow, email, phase } = useSurveyStore();
 
   const [searchParams] = useSearchParams();
-
-  const { email, phase, flow } = useSurveyStore();
-
   const submission_id = searchParams.get("submission_id") ?? "";
 
-  const navigate = useNavigate();
+  const { postCancerSurveyFormSubmission } = useApi();
 
   if (!submission_id) {
-    navigate("/");
+    return <Navigate to={'/'} />
   }
 
-  const { postCancerSurveyFormSubmission } = useApi();
-
-  const { mutate } = useMutation({
-    mutationFn: postCancerSurveyFormSubmission,
-    mutationKey: ["postCancerSurveyFormSubmission", submission_id],
-    onSuccess: () => {
-      setIsLoading(false);
-    },
-    onError: (result) => {
-      if (axios.isAxiosError(result)) {
-        if (result.response?.status !== 200) {
-          toast.error("Something went wrong");
-        }
-      } else {
-        toast.error("Something went wrong");
-      }
-    },
-  });
-
-  useMount(() => mutate({ email, phase, submission_id }));
-
-  if (isLoading) {
-    return (
-      <LayoutDefault>
-        <Loading />
-      </LayoutDefault>
-    );
-  }
 
   return (
     <LayoutDefault>
-      <AllDonePanel>
-        <Typography
-          variant="base"
-          font="regular"
-          className="max-w-xl text-center text-[22px] font-normal leading-[36px]"
-        >
-          We received your feedback! <br />
-          <br />
-          Thank you! <br />
-          <br />
-          Have questions? We’re here. Email support@eo.care, call{" "}
-          <a href="tel:+1-888-823-6143">888-823-6143</a>, or{" "}
-          <a
-            className="cursor-pointer font-new-hero text-[22px] underline"
-            href="https://calendly.com/eo-care/30min?back=1"
-            target="_blank"
-          >
-            schedule a video chat
-          </a>{" "}
-          with a member of our team.
-        </Typography>
-      </AllDonePanel>
+      <ThankYou
+        mutationKey={["postCancerSurveyFormSubmission", submission_id]}
+        mutationFunction={postCancerSurveyFormSubmission}
+        mutationsParams={{ email, phase, submission_id }}
+      />
       <HowEOWorks pilot={flow === Flows.cancer_pilot} />
       <FAQs flow={flow} />
-      {['c_org', 'cancer_pilot', 'twist_out_cancer', 'cancer_support_community', 'employer_center', 'resource_center_1', 'resource_center_2', 'inova'].includes(flow)
+      {flowsWithSmallFooter.includes(flow)
         ? <Footer flow={flow} />
         : <FooterFull />}
-    </LayoutDefault>
+    </LayoutDefault >
   );
 };

apps/eo_web/src/screens/ProfilingThankYou.tsx

@@ -1,18 +1,12 @@
 import React from "react";
-import { useMutation } from "@tanstack/react-query";
-import axios from "axios";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { toast } from "react-toastify";
-
-import { Typography } from "@eo/ui";
+import { Navigate, useSearchParams } from "react-router-dom";
 
 import { useApi } from "~/api/useApi";
-import { AllDonePanel } from "~/components/AllDonePanel";
+import { ThankYou } from "~/components";
 import { EOInYourInbox } from "~/components/EOInYourInbox";
 import { FAQs } from "~/components/FAQs";
 import { HowEOWorks } from "~/components/HowEOWorks";
 import { WEB_APP_URL } from "~/configs/env";
-import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { Footer } from "~/layouts/Footer";
 import { FooterFull } from "~/layouts/FooterFull";
@@ -38,72 +32,37 @@ const flowsWithSmallFooter: FlowType[] = [
 ];
 
 export const ProfilingThankYou = () => {
+  const { flow, account, usePayment } = useProfilingStore();
   const [searchParams] = useSearchParams();
-  const { account, flow, usePayment } = useProfilingStore();
-  const submissionId = searchParams.get("submission_id") || "";
-  const navigate = useNavigate();
-
-  if (!submissionId) {
-    navigate(ROUTES.userRolSelector);
-  }
+  const submission_id = searchParams.get("submission_id") ?? "";
 
   const { checkoutComplete } = useApi();
 
-  const { mutate } = useMutation({
-    mutationFn: checkoutComplete,
-    mutationKey: ["checkoutComplete", submissionId],
-    onError: (result) => {
-      if (axios.isAxiosError(result)) {
-        if (result.response?.status !== 200) {
-          toast.error("Something went wrong");
-        }
-      } else {
-        toast.error("Something went wrong");
-      }
-    },
-  });
-
-  useMount(() => {
-    if (usePayment) {
-      mutate({
-        email: account.email,
-        submission_id: submissionId,
-      });
-    }
-  });
+  if (!submission_id) {
+    return <Navigate to={ROUTES.userRolSelector} />
+  }
 
   const goToWebApp = () => {
     window.location.href = WEB_APP_URL;
   };
 
   return (
     <LayoutDefault>
-      <AllDonePanel>
-        <Typography
-          variant="base"
-          font="regular"
-          className="max-w-3xl text-center text-[22px] font-normal leading-[36px]"
-        >
-          You’ll be able to review your initial, personalized,
-          clinician-approved care plan within 24 hours. When your care plan is
-          ready, we will send you an email with a link to{" "}
-          <span className="cursor-pointer underline" onClick={goToWebApp}>
-            log into your account.
-          </span>
-          <br />
-          <br />
-          Have questions? We’re here. Email support@eo.care, call{" "}
-          <a href="tel:+1-888-823-6143">888-823-6143</a>, or{" "}
-          <a
-            className="cursor-pointer font-new-hero text-[22px] underline"
-            href="https://calendly.com/eo-care/30min?back=1"
-            target="_blank"
-          >
-            schedule a video chat
-          </a>{" "}
-          with a member of our team.
-        </Typography>
-      </AllDonePanel>
+      <ThankYou
+        mutationKey={["checkoutComplete", submission_id]}
+        mutationFunction={checkoutComplete}
+        isProfiling={true}
+        mutateOnMount={usePayment}
+        mutationsParams={{ email: account.email, submission_id }}
+      >
+        You’ll be able to review your initial, personalized,
+        clinician-approved care plan within 24 hours. When your care plan is
+        ready, we will send you an email with a link to{" "}
+        <span className="cursor-pointer underline" onClick={goToWebApp}>
+          log into your account.
+        </span>
+      </ThankYou>
+
       <HowEOWorks pilot={flow == Flows.cancer_pilot} />
       <FAQs flow={flow} />
       <EOInYourInbox />