-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feature: Unify Thank you pages in a reusable component #140
Changes from 4 commits
b847903
1be011d
2cb04f9
136ad2a
393acba
be5ce18
a9d486d
afdfa7d
84604e1
fdabc38
67b50a4
f11597e
f90a216
91ff44a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,94 @@ | ||||||||||||||
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 { useNavigate, useSearchParams } from "react-router-dom"; | ||||||||||||||
import { toast } from "react-toastify"; | ||||||||||||||
import { useSurveyStore } from "~/stores/useSurveyStore"; | ||||||||||||||
import { Loading } from "~/components/Loading"; | ||||||||||||||
|
||||||||||||||
import { useMount } from "~/hooks/useMount"; | ||||||||||||||
import { useState } from "react"; | ||||||||||||||
import { useProfilingStore } from "~/stores/useProfilingStore"; | ||||||||||||||
|
||||||||||||||
type ThankYouProps = HTMLAttributes<HTMLElement> & { | ||||||||||||||
mutationKey: string; | ||||||||||||||
mutationFunction: (data: object) => Promise<any>; | ||||||||||||||
exitRoute?: string; | ||||||||||||||
isProfiling?: boolean; | ||||||||||||||
} | ||||||||||||||
|
||||||||||||||
export const ThankYou = ({ children, mutationKey, mutationFunction, exitRoute = '/', isProfiling = false }: ThankYouProps) => { | ||||||||||||||
const [isLoading, setIsLoading] = useState(true); | ||||||||||||||
|
||||||||||||||
const [searchParams] = useSearchParams(); | ||||||||||||||
|
||||||||||||||
const { email, phase } = useSurveyStore(); | ||||||||||||||
const { account, usePayment } = useProfilingStore(); | ||||||||||||||
|
||||||||||||||
const submission_id = searchParams.get("submission_id") ?? ""; | ||||||||||||||
|
||||||||||||||
const navigate = useNavigate(); | ||||||||||||||
|
||||||||||||||
if (!submission_id) { | ||||||||||||||
navigate(exitRoute); | ||||||||||||||
} | ||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Another approach to early exit & navigate
Suggested change
|
||||||||||||||
|
||||||||||||||
const { mutate } = useMutation({ | ||||||||||||||
mutationFn: mutationFunction, | ||||||||||||||
mutationKey: [mutationKey, 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(() => { | ||||||||||||||
if (!isProfiling || usePayment) { | ||||||||||||||
|
||||||||||||||
mutate({ email: isProfiling ? account.email : email, phase, submission_id }) | ||||||||||||||
}; | ||||||||||||||
}) | ||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think instead of this it would be better to use a prop named Also, we could pass the |
||||||||||||||
|
||||||||||||||
return ( | ||||||||||||||
<AllDonePanel> | ||||||||||||||
{isLoading ? | ||||||||||||||
<Loading /> | ||||||||||||||
: <> | ||||||||||||||
<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! | ||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be passed as a children There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm using that as a default because it's shared by 2 out of the 3 pages |
||||||||||||||
</>} | ||||||||||||||
<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> | ||||||||||||||
</>} | ||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fragment is unnecessary |
||||||||||||||
</AllDonePanel> | ||||||||||||||
) | ||||||||||||||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,97 +1,37 @@ | ||
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"; | ||
|
||
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 [searchParams] = useSearchParams(); | ||
|
||
const { email, phase, flow } = useSurveyStore(); | ||
|
||
const submission_id = searchParams.get("submission_id") ?? ""; | ||
|
||
const navigate = useNavigate(); | ||
|
||
if (!submission_id) { | ||
navigate("/"); | ||
} | ||
const { flow } = useSurveyStore(); | ||
|
||
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" mutationFunction={postCancerSurveyFormSubmission} /> | ||
<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 > | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think all the
submission_id
related stuff should be in the parent components, it shouldn't be a responsibility of theThankYou
component.We should pass it in the
mutationKey
andmutationParams
, and move the navigate to the parent as well.