From a98fd863bc6c5af4f926a534a74e0a676bd36323 Mon Sep 17 00:00:00 2001 From: cgarcia-lightit <117183993+cgarcia-lightit@users.noreply.github.com> Date: Tue, 9 Jul 2024 13:50:32 -0300 Subject: [PATCH] [BUGFIX][CU-86du17mby] Bug multiple surveys processed for a single response (#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 --- apps/eo_web/src/components/ThankYou.tsx | 22 +++++++++---------- .../screens/Cancer/CancerSurveyThankYou.tsx | 11 +++++++--- apps/eo_web/src/screens/ProfilingThankYou.tsx | 17 ++++++++------ .../screens/Senior/SeniorSurveyThankYou.tsx | 10 +++++++-- apps/eo_web/src/stores/useSurveyStore.tsx | 19 +++++++++++----- packages/shared/src/tw.tsx | 3 ++- 6 files changed, 52 insertions(+), 30 deletions(-) diff --git a/apps/eo_web/src/components/ThankYou.tsx b/apps/eo_web/src/components/ThankYou.tsx index fd8e97fc..9fdbd2f2 100644 --- 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 & { @@ -30,6 +29,10 @@ 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({ @@ -37,15 +40,12 @@ export const ThankYou = ({ 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 index 4ae0150b..41550014 100644 --- 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 ; } @@ -39,7 +39,12 @@ export const CancerSurveyThankYou = () => { diff --git a/apps/eo_web/src/screens/ProfilingThankYou.tsx b/apps/eo_web/src/screens/ProfilingThankYou.tsx index 6e365349..08b5b2a3 100644 --- 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 ; - } + 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 index 0b845cbc..ee6db8e6 100644 --- 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 ; } @@ -24,7 +25,12 @@ export const SeniorSurveyThankYou = () => { diff --git a/apps/eo_web/src/stores/useSurveyStore.tsx b/apps/eo_web/src/stores/useSurveyStore.tsx index b20078e6..90a7295d 100644 --- 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()( 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 index 0c94fa9c..a0c51569 100644 --- 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));