[BUGFIX][CU-86du17mby] Bug multiple surveys processed for a single re…

…sponse (#197) * feat: remove data from store to avoid send multiple times * feat: remove data from store to avoid send multiple times * chore: build app * chore: resolve typescript inference * chore: remove manifest.json
Light-it-labs · Jul 9, 2024 · a98fd86 · a98fd86
1 parent 16ab1ca
commit a98fd86
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 30 deletions.
diff --git a/apps/eo_web/src/components/ThankYou.tsx b/apps/eo_web/src/components/ThankYou.tsx
@@ -1,13 +1,12 @@
 import { useState, type HTMLAttributes } from "react";
 import { useMutation } from "@tanstack/react-query";
-import axios from "axios";
-import { toast } from "react-toastify";
 
 import { Typography } from "@eo/ui";
 
 import { Loading } from "~/components/Loading";
 import { useMount } from "~/hooks/useMount";
-import { type Channel } from "~/stores/useProfilingStore";
+import { useProfilingStore, type Channel } from "~/stores/useProfilingStore";
+import { useSurveyStore } from "~/stores/useSurveyStore";
 import { AllDonePanel } from "./AllDonePanel";
 
 type ThankYouProps = HTMLAttributes<HTMLElement> & {
@@ -30,22 +29,23 @@ export const ThankYou = ({
   mutationsParams,
   mutateOnMount = true,
 }: ThankYouProps) => {
+  const resetSurveyStore = useSurveyStore((store) => store.reset);
+  const resetProfilingStore = useProfilingStore(
+    (store) => store.resetProfilingStore,
+  );
   const [isLoading, setIsLoading] = useState(mutateOnMount);
 
   const { mutate } = useMutation({
     mutationFn: mutationFunction,
     mutationKey: mutationKey,
     onSuccess: () => {
       setIsLoading(false);
+      resetSurveyStore();
     },
-    onError: (result) => {
-      if (axios.isAxiosError(result)) {
-        if (result.response?.status !== 200) {
-          toast.error("Something went wrong");
-        }
-      } else {
-        toast.error("Something went wrong");
-      }
+    onError: () => {
+      setIsLoading(false);
+      resetSurveyStore();
+      resetProfilingStore();
     },
   });
 

diff --git a/apps/eo_web/src/screens/Cancer/CancerSurveyThankYou.tsx b/apps/eo_web/src/screens/Cancer/CancerSurveyThankYou.tsx
@@ -7,7 +7,7 @@ import { HowEOWorks } from "~/components/HowEOWorks";
 import { LayoutDefault } from "~/layouts";
 import { Footer } from "~/layouts/Footer";
 import { FooterFull } from "~/layouts/FooterFull";
-import { Flows, type FlowType } from "~/stores/useProfilingStore";
+import { type Channel, Flows, type FlowType } from "~/stores/useProfilingStore";
 import { useSurveyStore } from "~/stores/useSurveyStore";
 
 const flowsWithSmallFooter: FlowType[] = [
@@ -30,7 +30,7 @@ export const CancerSurveyThankYou = () => {
 
   const { postCancerSurveyFormSubmission } = useApi();
 
-  if (!submission_id || !channel) {
+  if (!submission_id) {
     return <Navigate to={"/"} />;
   }
 
@@ -39,7 +39,12 @@ export const CancerSurveyThankYou = () => {
       <ThankYou
         mutationKey={["postCancerSurveyFormSubmission", submission_id]}
         mutationFunction={postCancerSurveyFormSubmission as never}
-        mutationsParams={{ email, phase, submission_id, channel }}
+        mutationsParams={{
+          email,
+          phase,
+          submission_id,
+          channel: channel as Channel,
+        }}
       />
       <HowEOWorks flow={flow} />
       <FAQs flow={flow} />

diff --git a/apps/eo_web/src/screens/ProfilingThankYou.tsx b/apps/eo_web/src/screens/ProfilingThankYou.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Navigate, useSearchParams } from "react-router-dom";
+import React, { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { useApi } from "~/api/useApi";
 import { ThankYou } from "~/components";
@@ -14,6 +14,7 @@ import { ROUTES } from "~/router";
 import {
   Flows,
   useProfilingStore,
+  type Channel,
   type FlowType,
 } from "~/stores/useProfilingStore";
 
@@ -35,12 +36,15 @@ export const ProfilingThankYou = () => {
   const { flow, account, usePayment, channel } = useProfilingStore();
   const [searchParams] = useSearchParams();
   const submission_id = searchParams.get("submission_id") ?? "";
+  const navigate = useNavigate();
 
   const { checkoutComplete } = useApi();
 
-  if (!submission_id && usePayment) {
-    return <Navigate to={ROUTES.userRolSelector} />;
-  }
+  useEffect(() => {
+    if (!submission_id && usePayment) {
+      navigate(ROUTES.userRolSelector);
+    }
+  }, [navigate, submission_id, usePayment]);
 
   const goToWebApp = () => {
     window.location.href = WEB_APP_URL;
@@ -56,8 +60,7 @@ export const ProfilingThankYou = () => {
         mutationsParams={{
           email: account.email,
           submission_id,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          channel: channel!,
+          channel: channel as Channel,
         }}
       >
         You’ll be able to review your initial, personalized, clinician-approved

diff --git a/apps/eo_web/src/screens/Senior/SeniorSurveyThankYou.tsx b/apps/eo_web/src/screens/Senior/SeniorSurveyThankYou.tsx
@@ -6,6 +6,7 @@ import { FAQs } from "~/components/FAQs";
 import { HowEOWorks } from "~/components/HowEOWorks";
 import { LayoutDefault } from "~/layouts";
 import { FooterFull } from "~/layouts/FooterFull";
+import { type Channel } from "~/stores/useProfilingStore";
 import { useSurveyStore } from "~/stores/useSurveyStore";
 
 export const SeniorSurveyThankYou = () => {
@@ -15,7 +16,7 @@ export const SeniorSurveyThankYou = () => {
 
   const { postSeniorSurveyFormSubmission } = useApi();
 
-  if (!submission_id || !channel) {
+  if (!submission_id) {
     return <Navigate to={"/"} />;
   }
 
@@ -24,7 +25,12 @@ export const SeniorSurveyThankYou = () => {
       <ThankYou
         mutationKey={["postSeniorSurveyFormSubmission", submission_id]}
         mutationFunction={postSeniorSurveyFormSubmission as never}
-        mutationsParams={{ email, phase, submission_id, channel }}
+        mutationsParams={{
+          email,
+          phase,
+          submission_id,
+          channel: channel as Channel,
+        }}
       />
       <HowEOWorks />
       <FAQs />

diff --git a/apps/eo_web/src/stores/useSurveyStore.tsx b/apps/eo_web/src/stores/useSurveyStore.tsx
@@ -1,8 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-import { type Channel, Flows, type FlowType } from "~/stores/useProfilingStore";
-
+import { Flows, type Channel, type FlowType } from "~/stores/useProfilingStore";
 
 export interface SurveyStorageState {
   phase: string;
@@ -17,19 +16,27 @@ export interface SurveyStorageState {
   setEmail(email: string): void;
 
   setFlow(flows: FlowType): void;
+
+  reset: () => void;
 }
 
+const initialState = {
+  phase: "",
+  email: "",
+  flow: Flows.marketing_site,
+  channel: undefined,
+} as const;
 export const useSurveyStore = create<SurveyStorageState>()(
   persist(
     (set, _get) => ({
-      phase: "",
-      email: "",
-      flow: Flows.marketing_site,
-      channel: undefined,
+      ...initialState,
       setChannel: (channel: Channel) => set({ channel }),
       setEmail: (email: string) => set({ email }),
       setPhase: (phase: string) => set({ phase }),
       setFlow: (flow: FlowType) => set({ flow }),
+      reset: () => {
+        set({ ...initialState, flow: _get().flow });
+      },
     }),
     {
       name: "useSurveyStore",

diff --git a/packages/shared/src/tw.tsx b/packages/shared/src/tw.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export const tw: typeof clsx = (...params) => twMerge(clsx(...params));
+export const tw: (...inputs: clsx.ClassValue[]) => string = (...params) =>
+  twMerge(clsx(params));