Merge pull request #236 from Light-it-labs/feature/CU-86durd6r4/pass-…

…to-session-storage

[CU-86durd6r4] pass to session storage

apps/eo_web/src/components/ThankYou.tsx

@@ -38,11 +38,7 @@ export const ThankYou = ({
   const { mutate } = useMutation({
     mutationFn: mutationFunction,
     mutationKey: mutationKey,
-    onSuccess: () => {
-      setIsLoading(false);
-      resetSurveyStore();
-    },
-    onError: () => {
+    onSettled: () => {
       setIsLoading(false);
       resetSurveyStore();
       resetProfilingStore();
@@ -52,6 +48,9 @@ export const ThankYou = ({
   useMount(() => {
     if (mutateOnMount) {
       mutate(mutationsParams);
+    } else {
+      resetSurveyStore();
+      resetProfilingStore();
     }
   });
 

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

@@ -20,6 +20,7 @@ const flowsWithSmallFooter: FlowType[] = [
   Flows.employer_center,
   Flows.inova,
   Flows.uva,
+  Flows.mass_retirees,
 
   // The flows related to resources_center_1/2
   Flows.cancer_buddy,

apps/eo_web/src/screens/ProfilingThankYou.tsx

@@ -41,6 +41,7 @@ const flowsWithSmallFooter: FlowType[] = [
 
 export const ProfilingThankYou = () => {
   const { flow, account, usePayment, channel } = useProfilingStore();
+
   const [searchParams] = useSearchParams();
   const submission_id = searchParams.get("submission_id") ?? "";
   const navigate = useNavigate();
@@ -71,8 +72,8 @@ export const ProfilingThankYou = () => {
         }}
       >
         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
-        a text message and an email with a link to{" "}
+        care plan within 24 hours. When your care plan is ready, we will send
+        you a text message and an email with a link to{" "}
         <span className="cursor-pointer underline" onClick={goToWebApp}>
           log into your account.
         </span>

apps/eo_web/src/screens/Senior/SeniorSurveyThankYou.tsx

@@ -5,12 +5,16 @@ import { ThankYou } from "~/components";
 import { FAQs } from "~/components/FAQs";
 import { HowEOWorks } from "~/components/HowEOWorks";
 import { LayoutDefault } from "~/layouts";
+import { Footer } from "~/layouts/Footer";
 import { FooterFull } from "~/layouts/FooterFull";
-import { type Channel } from "~/stores/useProfilingStore";
+import { Flows, type Channel, type FlowType } from "~/stores/useProfilingStore";
 import { useSurveyStore } from "~/stores/useSurveyStore";
 
+const flowsWithSmallFooter: FlowType[] = [Flows.mass_retirees];
+
 export const SeniorSurveyThankYou = () => {
-  const { email, phase, channel } = useSurveyStore();
+  const { flow, email, phase, channel } = useSurveyStore();
+
   const [searchParams] = useSearchParams();
   const submission_id = searchParams.get("submission_id") ?? "";
 
@@ -32,9 +36,14 @@ export const SeniorSurveyThankYou = () => {
           channel: channel as Channel,
         }}
       />
-      <HowEOWorks />
-      <FAQs />
-      <FooterFull />
+
+      <HowEOWorks flow={flow} />
+      <FAQs flow={flow} />
+      {flowsWithSmallFooter.includes(flow) ? (
+        <Footer flow={flow} />
+      ) : (
+        <FooterFull />
+      )}
     </LayoutDefault>
   );
 };

apps/eo_web/src/stores/SessionStorage.ts

@@ -0,0 +1,13 @@
+import { createJSONStorage, type StateStorage } from "zustand/middleware";
+
+const SessionStateStorage: StateStorage = {
+  getItem: (key: string) => {
+    return sessionStorage.getItem(key);
+  },
+  setItem: (key: string, value: string) => {
+    sessionStorage.setItem(key, value);
+  },
+  removeItem: (key: string) => sessionStorage.removeItem(key),
+};
+
+export const SessionStorage = createJSONStorage(() => SessionStateStorage);

apps/eo_web/src/stores/useProfilingStore.ts

@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+import { SessionStorage } from "~/stores/SessionStorage";
+
 export const Channels = {
   senior: "senior",
   cancer: "cancer",
@@ -118,7 +120,14 @@ export const useProfilingStore = create<ProfilingStore>()(
         set({ usePayment });
       },
       resetProfilingStore: () => {
-        set({ ...get(), ...defaultState });
+        const currentState: ProfilingStore = get();
+        set({
+          ...currentState,
+          ...defaultState,
+          // We don't remove the flow and usePayment because it's needed to render components and they aren't PHI
+          flow: currentState.flow,
+          usePayment: currentState.usePayment,
+        });
       },
       setOrigin: (origin: string) => {
         set({ origin });
@@ -136,6 +145,7 @@ export const useProfilingStore = create<ProfilingStore>()(
     }),
     {
       name: "useProfilingStore",
+      storage: SessionStorage,
     },
   ),
 );

apps/eo_web/src/stores/useSurveyStore.tsx

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+import { SessionStorage } from "~/stores/SessionStorage";
 import { Flows, type Channel, type FlowType } from "~/stores/useProfilingStore";
 
 export interface SurveyStorageState {
@@ -26,6 +27,7 @@ const initialState = {
   flow: Flows.marketing_site,
   channel: undefined,
 } as const;
+
 export const useSurveyStore = create<SurveyStorageState>()(
   persist(
     (set, _get) => ({
@@ -35,11 +37,13 @@ export const useSurveyStore = create<SurveyStorageState>()(
       setPhase: (phase: string) => set({ phase }),
       setFlow: (flow: FlowType) => set({ flow }),
       reset: () => {
+        // We don't remove the flow because it's needed to render components and they aren't PHI
         set({ ...initialState, flow: _get().flow });
       },
     }),
     {
       name: "useSurveyStore",
+      storage: SessionStorage,
     },
   ),
 );