[FEATURE][CU-86dr00833] Build relationship between survey responses, users and plans and limit the user to answer just once

apps/eo_web/dist/manifest.json

@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-ddf6ac53.css",
+    "file": "assets/main-f1ea2402.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-ddf6ac53.css"
+      "assets/main-f1ea2402.css"
     ],
-    "file": "assets/main-19237548.js",
+    "file": "assets/main-b0db4f37.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/src/api/useApi.ts

@@ -131,6 +131,11 @@ export const useApi = () => {
       { email },
     );
 
+  const surveyStatus = async (email: string, phase: string) =>
+    await apiElixir.get<{ active: boolean }>(
+      `/v2/survey/${email}/availability/${phase}`,
+    );
+
   const postCancerFormSubmission = async (data: object) =>
     await apiLaravel.post<LaravelSuccessBase<ProfileCreationResult>>(
       "/api/v2/cancer/profile",
@@ -173,5 +178,6 @@ export const useApi = () => {
     postAthleteSurveyFormSubmission,
     postSeniorFormSubmission,
     postSeniorSurveyFormSubmission,
+    surveyStatus,
   };
 };

apps/eo_web/src/components/Loading.tsx

@@ -0,0 +1,10 @@
+export const Loading = () => {
+  return (
+    <div
+      className="right-[calc(50%-20px)] top-1/2 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-gray-1000"
+      style={{
+        position: "absolute",
+      }}
+    />
+  );
+};

apps/eo_web/src/components/SurveyResponded.tsx

@@ -0,0 +1,30 @@
+import { Button, Typography, icons } from "@eo/ui";
+
+import { WEB_APP_URL } from "~/configs/env";
+
+export const SurveyResponded = () => (
+  <div className="mx-6 flex flex-col-reverse justify-between lg:ml-8 lg:flex-row xl:mx-0 xl:ml-[155px] xl:mt-[144px] xl:w-[979px] xl:items-center">
+    <section className="mt-4 flex flex-col gap-[35px] lg:mt-0">
+      <Typography
+        variant="large"
+        className="!text-[48px] font-extrabold !leading-[120%]"
+      >
+        Survey already <br />
+        responded!
+      </Typography>
+      <Typography className="text-[20px] text-gray-800" font="regular">
+        Thank you for answering our survey! <br />
+        Your insights are greatly appreciated and will help us improve.
+      </Typography>
+      <div>
+        <a href={WEB_APP_URL} className="float-left block">
+          <Button variant="black">
+            <span className="hidden lg:block">Go Back Home</span>
+            <span className="lg:hidden">Go Back</span>
+          </Button>
+        </a>
+      </div>
+    </section>
+    <icons.SurveyIcon className="mt-0 lg:mt-6" />
+  </div>
+);

apps/eo_web/src/helpers/index.tsx

@@ -0,0 +1,10 @@
+export const scapeParamFromQuery = (
+  key: string,
+  urlParam?: URLSearchParams,
+): string | null => {
+  if (!urlParam) {
+    urlParam = new URLSearchParams(window.location.search);
+  }
+  const val = urlParam.get(key);
+  return val ? val.replace(" ", "+") : null;
+};

apps/eo_web/src/layouts/LayoutDefault.tsx

@@ -1,10 +1,21 @@
 import { type ReactNode } from "react";
 
+import { tw } from "@eo/shared";
+
 import { Header } from "~/components/Header";
 
-export const LayoutDefault = ({ children }: { children: ReactNode }) => {
+
+export const LayoutDefault = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
   return (
-    <section className="flex h-screen w-screen flex-col bg-ice-silver">
+    <section
+      className={tw("flex h-screen w-screen flex-col bg-ice-silver", className)}
+    >
       <div className="flex h-full w-full flex-col overflow-auto">
         <Header />
         {children}

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

@@ -6,19 +6,21 @@ import { toast } from "react-toastify";
 import { Typography } from "@eo/ui";
 
 import { useApi } from "~/api/useApi";
-import { useMount } from "~/hooks/useMount";
-import { LayoutDefault } from "~/layouts";
 import { AllDonePanel } from "~/components/AllDonePanel";
-import { HowEOWorks } from "~/components/HowEOWorks";
 import { FAQs } from "~/components/FAQs";
+import { HowEOWorks } from "~/components/HowEOWorks";
+import { useMount } from "~/hooks/useMount";
+import { LayoutDefault } from "~/layouts";
 import { FooterFull } from "~/layouts/FooterFull";
 import { useProfilingStore } from "~/stores/useProfilingStore";
+import { useSurveyStore } from "~/stores/useSurveyStore";
 
 
 export const CancerSurveyThankYou = () => {
   const [searchParams] = useSearchParams();
 
-  const usePayment = useProfilingStore((s) => s.usePayment);
+  const { email, phase } = useSurveyStore();
+  const { usePayment } = useProfilingStore();
 
   const submission_id = searchParams.get("submission_id") ?? "";
 
@@ -44,23 +46,24 @@ export const CancerSurveyThankYou = () => {
     },
   });
 
-  useMount(() => mutate({ submission_id }));
+  useMount(() => mutate({ email, phase, submission_id }));
 
   return (
     <LayoutDefault>
       <AllDonePanel>
         <Typography
           variant="base"
           font="regular"
-          className="text-center text-[22px] font-normal leading-[36px] max-w-xl"
+          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 [email protected], call <a href="tel:+1-877-707-0706">877-707-0706</a>, or {" "}
+          Have questions? We’re here. Email [email protected], call{" "}
+          <a href="tel:+1-877-707-0706">877-707-0706</a>, or{" "}
           <a
-            className="cursor-pointer underline font-new-hero text-[22px]"
+            className="cursor-pointer font-new-hero text-[22px] underline"
             href="https://eo-care-telemed.as.me/schedule.php"
             target="_blank"
           >

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

@@ -1,39 +1,67 @@
+import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
 
+import { useApi } from "~/api/useApi";
 import { JotformFrame } from "~/components/JotformFrame";
+import { Loading } from "~/components/Loading";
+import { SurveyResponded } from "~/components/SurveyResponded";
 import {
   CANCER_CAREGIVER_SURVEY_ID,
   CANCER_PATIENT_SURVEY_ID,
 } from "~/configs/env";
+import { scapeParamFromQuery } from "~/helpers";
+import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { useProfilingStore } from "~/stores/useProfilingStore";
+import { useSurveyStore } from "~/stores/useSurveyStore";
 
 
 export const SurveyForm = () => {
   const [searchParams] = useSearchParams();
-  const setUsePayment = useProfilingStore((s) => s.setUsePayment);
+  const { setUsePayment } = useProfilingStore();
+  const { setPhase, setEmail } = useSurveyStore();
+  const { surveyStatus } = useApi();
 
   const isPilot = (searchParams.get("pilot") ?? "") === "true";
-  const email = searchParams.get("email") ?? "";
+  const email = scapeParamFromQuery("email", searchParams);
   const profiled = searchParams.get("profiled") ?? "patient";
   const symptoms = searchParams.get("symptoms") ?? "";
+  const phase = searchParams.get("phase") ?? "";
 
-  setUsePayment(!isPilot);
+  if (!email) {
+    window.location.href = "https://eo.care";
+  }
+
+  useMount(() => {
+    setPhase(phase);
+    setEmail(email as string);
+    setUsePayment(!isPilot);
+  });
+
+  const { data, isLoading, isSuccess } = useQuery({
+    queryFn: () => (email && phase ? surveyStatus(email, phase) : null),
+    queryKey: ["surveyStatus"],
+  });
 
   const formId =
     profiled === "patient"
       ? CANCER_PATIENT_SURVEY_ID
       : CANCER_CAREGIVER_SURVEY_ID;
 
   const params = new URLSearchParams({
-    email,
+    email: email as string,
     symptoms,
   });
 
   return (
-    <LayoutDefault>
+    <LayoutDefault className="bg-gradient lg:bg-ice-silver lg:bg-none">
       <div className="mb-10 flex h-screen flex-col">
-        <JotformFrame formId={formId} searchParam={params} />
+        {isLoading && <Loading />}
+        {!isLoading && isSuccess && data?.data.active ? (
+          <JotformFrame formId={formId} searchParam={params} />
+        ) : (
+          isSuccess && data?.data && !data?.data?.active && <SurveyResponded />
+        )}
       </div>
     </LayoutDefault>
   );

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

@@ -1,21 +1,45 @@
+import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
 
+import { useApi } from "~/api/useApi";
 import { JotformFrame } from "~/components/JotformFrame";
+import { Loading } from "~/components/Loading";
+import { SurveyResponded } from "~/components/SurveyResponded";
 import {
   SENIOR_CAREGIVER_SURVEY_ID,
   SENIOR_PATIENT_SURVEY_ID,
 } from "~/configs/env";
+import { scapeParamFromQuery } from "~/helpers";
+import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
+import { useSurveyStore } from "~/stores/useSurveyStore";
 
 
 export const SeniorSurveyForm = () => {
-  const [params] = useSearchParams();
-  const email = params.get("email") || "";
-  const symptoms = params.get("symptoms") || "";
-  const profiled = params.get("profiled") ?? "patient";
+  const { surveyStatus } = useApi();
+  const { setPhase, setEmail } = useSurveyStore();
+  const [searchParams] = useSearchParams();
+  const email = scapeParamFromQuery("email", searchParams);
+  const symptoms = searchParams.get("symptoms") || "";
+  const profiled = searchParams.get("profiled") ?? "patient";
+  const phase = searchParams.get("phase") ?? "";
 
-  const searchParam = new URLSearchParams({
-    email,
+  if (!email) {
+    window.location.href = "https://eo.care";
+  }
+
+  useMount(() => {
+    setPhase(phase);
+    setEmail(email as string);
+  });
+
+  const { data, isLoading, isSuccess } = useQuery({
+    queryFn: () => (email && phase ? surveyStatus(email, phase) : null),
+    queryKey: ["surveyStatus"],
+  });
+
+  const params = new URLSearchParams({
+    email: email as string,
     symptoms,
   });
 
@@ -25,9 +49,14 @@ export const SeniorSurveyForm = () => {
       : SENIOR_CAREGIVER_SURVEY_ID;
 
   return (
-    <LayoutDefault>
+    <LayoutDefault className="bg-gradient lg:bg-ice-silver lg:bg-none">
       <div className="mb-10 flex h-screen flex-col">
-        <JotformFrame formId={formId} searchParam={searchParam} />
+        {isLoading && <Loading />}
+        {!isLoading && isSuccess && data?.data.active ? (
+          <JotformFrame formId={formId} searchParam={params} />
+        ) : (
+          isSuccess && data?.data && !data?.data?.active && <SurveyResponded />
+        )}
       </div>
     </LayoutDefault>
   );

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

@@ -6,17 +6,19 @@ import { toast } from "react-toastify";
 import { Typography } from "@eo/ui";
 
 import { useApi } from "~/api/useApi";
-import { useMount } from "~/hooks/useMount";
-import { LayoutDefault } from "~/layouts";
 import { AllDonePanel } from "~/components/AllDonePanel";
-import { HowEOWorks } from "~/components/HowEOWorks";
 import { FAQs } from "~/components/FAQs";
+import { HowEOWorks } from "~/components/HowEOWorks";
+import { useMount } from "~/hooks/useMount";
+import { LayoutDefault } from "~/layouts";
 import { FooterFull } from "~/layouts/FooterFull";
+import { useSurveyStore } from "~/stores/useSurveyStore";
 
 
 export const SeniorSurveyThankYou = () => {
   const [searchParams] = useSearchParams();
 
+  const { email, phase } = useSurveyStore();
   const submission_id = searchParams.get("submission_id") || "";
 
   const navigate = useNavigate();
@@ -41,23 +43,24 @@ export const SeniorSurveyThankYou = () => {
     },
   });
 
-  useMount(() => mutate({ submission_id }));
+  useMount(() => mutate({ email, phase, submission_id }));
 
   return (
     <LayoutDefault>
       <AllDonePanel>
         <Typography
           variant="base"
           font="regular"
-          className="text-center text-[22px] font-normal leading-[36px] max-w-xl"
+          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 [email protected], call <a href="tel:+1-877-707-0706">877-707-0706</a>, or {" "}
+          Have questions? We’re here. Email [email protected], call{" "}
+          <a href="tel:+1-877-707-0706">877-707-0706</a>, or{" "}
           <a
-            className="cursor-pointer underline font-new-hero text-[22px]"
+            className="cursor-pointer font-new-hero text-[22px] underline"
             href="https://eo-care-telemed.as.me/schedule.php"
             target="_blank"
           >

apps/eo_web/src/stores/useSurveyStore.tsx

@@ -0,0 +1,30 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+
+
+
+
+export interface SurveyStorageState {
+  phase: string;
+  email: string;
+
+  setPhase(phase: string): void;
+
+  setEmail(email: string): void;
+}
+
+export const useSurveyStore = create<SurveyStorageState>()(
+  persist(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (set, get) => ({
+      phase: "",
+      email: "",
+      setEmail: (email: string) => set({ email }),
+      setPhase: (phase: string) => set({ phase }),
+    }),
+    {
+      name: "useSurveyStore",
+    },
+  ),
+);