feat: add new form to save athletes feedback survey and refactor some…

… stuff

apps/eo_web/dist/manifest.json

@@ -18,7 +18,7 @@
     "css": [
       "assets/main-6104ee8d.css"
     ],
-    "file": "assets/main-cbf3985d.js",
+    "file": "assets/main-4ca17b26.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/src/App.tsx

@@ -24,6 +24,8 @@ interface EnvironmentsConfigs {
   CANCER_PROFILE_CAREGIVER_ID: string;
   CANCER_USER_DATA: string;
   CANCER_SURVEY_FORM: string;
+  ATHLETE_PROFILE_FORM: string;
+  ATHLETE_SURVEY_FORM: string;
 }
 
 declare global {

apps/eo_web/src/api/useElixirApi.ts → apps/eo_web/src/api/useApi.ts

@@ -47,7 +47,7 @@ export interface ProfileOne {
   };
 }
 
-export const useElixirApi = () => {
+export const useApi = () => {
   const token = useProfileStore((state) => state.session?.token);
 
   const authHeader = {
@@ -129,6 +129,13 @@ export const useElixirApi = () => {
     );
   };
 
+  const postAthleteSurveyFormSubmission = async (data: object) => {
+    return await api.post<{ success: boolean; message: string }>(
+      `${API_LARAVEL}/api/athletes/survey`,
+      data,
+    );
+  };
+
   return {
     validateZipCode,
     combineProfileOne,
@@ -140,5 +147,6 @@ export const useElixirApi = () => {
     eligibleEmail,
     postCancerFormSubmission,
     postCancerSurveyFormSubmission,
+    postAthleteSurveyFormSubmission,
   };
 };

apps/eo_web/src/configs/env.ts

@@ -12,7 +12,12 @@ export const CANCER_PROFILE_PATIENT_ID =
 export const CANCER_PROFILE_CAREGIVER_ID =
   window.data.getEnv("CANCER_PROFILE_CAREGIVER_ID") || 232564208467662;
 export const CANCER_SURVEY_ID =
-  window.data.getEnv("CANCER_SURVEY_FORM") || 232395615249664;
+  window.data.getEnv("CANCER_SURVEY_FORM") || 232885421299668;
+
+export const ATHLETE_PROFILE_FORM =
+  window.data.getEnv("ATHLETE_PROFILE_FORM") || 233115151709146;
+export const ATHLETE_SURVEY_FORM =
+  window.data.getEnv("ATHLETE_SURVEY_FORM") || 233164188186664;
 
 export const API_ELIXIR =
   window.data.getEnv("API_URL") || "http://localhost:4200";

apps/eo_web/src/router/Router.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { Route, Routes } from "react-router-dom";
 
 import { ROUTES } from "~/router/routes";
+import { AthleteSurveyForm } from "~/screens/Athlete/AthleteSurveyForm";
+import { AthleteSurveyThankYou } from "~/screens/Athlete/AthleteSurveyThankYou";
 import { Form } from "~/screens/Cancer/Form";
 import { FormDemo } from "~/screens/Cancer/FormDemo";
 import { FormThankYou } from "~/screens/Cancer/FormThankYou";
@@ -100,6 +102,13 @@ export const Router = () => {
 
       <Route element={<SurveyForm />} path={ROUTES.cancerSurvey} />
       <Route element={<SurveyThankYou />} path={ROUTES.cancerSurveyThankYou} />
+
+      {/* ATHLETES */}
+      <Route element={<AthleteSurveyForm />} path={ROUTES.athleteSurvey} />
+      <Route
+        element={<AthleteSurveyThankYou />}
+        path={ROUTES.athleteSurveyThankYou}
+      />
     </Routes>
   );
 };

apps/eo_web/src/router/routes.tsx

@@ -26,4 +26,8 @@ export const ROUTES = {
   cancerThankYou: "/cancer/thank-you",
   cancerSurvey: "/cancer/survey",
   cancerSurveyThankYou: "/cancer/survey-thank-you",
+
+  // Athletes PATH
+  athleteSurvey: "/athletes/survey",
+  athleteSurveyThankYou: "athletes/survey-thank-you",
 } as const;

apps/eo_web/src/screens/Athlete/AthleteSurveyForm.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { ATHLETE_SURVEY_FORM } from "~/configs/env";
+import { jotformScript } from "~/helpers/jotform_script";
+import { LayoutDefault } from "~/layouts";
+
+
+
+
+
+export const AthleteSurveyForm = () => {
+  const [searchParams] = useSearchParams();
+
+  const email = searchParams.get("email") || "";
+  const symptoms = searchParams.get("symptoms") || "";
+
+  useEffect(() => {
+    jotformScript(ATHLETE_SURVEY_FORM);
+  }, []);
+  return (
+    <LayoutDefault>
+      <div className="mb-10 flex h-screen flex-col">
+        <iframe
+          id={`JotFormIFrame-${ATHLETE_SURVEY_FORM}`}
+          title=""
+          onLoad={() => window.parent.scrollTo(0, 0)}
+          allow="geolocation; microphone; camera"
+          allowTransparency={true}
+          allowFullScreen={true}
+          src={`https://form.jotform.com/${ATHLETE_SURVEY_FORM}?email=${email}&symptoms=${symptoms}`}
+          className="h-full w-full"
+          style={{
+            minWidth: "100%",
+            height: "539px",
+            border: "none",
+          }}
+        ></iframe>
+      </div>
+    </LayoutDefault>
+  );
+};

apps/eo_web/src/screens/Athlete/AthleteSurveyThankYou.tsx

@@ -0,0 +1,83 @@
+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 { useMount } from "~/hooks/useMount";
+import { LayoutDefault } from "~/layouts";
+import { ROUTES } from "~/router";
+
+
+
+
+
+export const AthleteSurveyThankYou = () => {
+  const [searchParams] = useSearchParams();
+
+  const submission_id = searchParams.get("submission_id") || "";
+
+  const navigate = useNavigate();
+
+  if (!submission_id) {
+    navigate(ROUTES.cancerProfile);
+  }
+
+  const { postAthleteSurveyFormSubmission } = useApi();
+
+  const { mutate } = useMutation({
+    mutationFn: postAthleteSurveyFormSubmission,
+    mutationKey: ["postAthleteSurveyFormSubmission", submission_id],
+    onError: (result) => {
+      if (axios.isAxiosError(result)) {
+        if (result.response?.status !== 200) {
+          toast.error("Something went wrong");
+        }
+      } else {
+        toast.error("Something went wrong");
+      }
+    },
+  });
+
+  useMount(() => mutate({ submission_id }));
+
+  return (
+    <LayoutDefault>
+      <div className="flex h-full flex-col items-center justify-center px-[20%]">
+        <Typography
+          variant="large"
+          className="font-nunito font-bold"
+          style={{
+            fontFamily: "nunito",
+            lineHeight: "55px",
+            fontSize: "45px",
+          }}
+        >
+          All done!
+        </Typography>
+        <br />
+        <Typography
+          variant="base"
+          font="regular"
+          className="text-center font-nunito"
+          style={{
+            fontWeight: "300px",
+            fontFamily: "nunito",
+            lineHeight: "40px",
+            fontSize: "28px",
+          }}
+        >
+          We receive 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 schedule a free
+          consultation.
+        </Typography>
+      </div>
+    </LayoutDefault>
+  );
+};

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

@@ -5,7 +5,7 @@ import { toast } from "react-toastify";
 
 import { Typography } from "@eo/ui";
 
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
@@ -25,7 +25,7 @@ export const FormThankYou = () => {
     navigate(ROUTES.cancerProfile);
   }
 
-  const { postCancerFormSubmission } = useElixirApi();
+  const { postCancerFormSubmission } = useApi();
 
   const { mutate } = useMutation({
     mutationFn: postCancerFormSubmission,

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

@@ -5,7 +5,7 @@ import { toast } from "react-toastify";
 
 import { Typography } from "@eo/ui";
 
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
@@ -25,7 +25,7 @@ export const SurveyThankYou = () => {
     navigate(ROUTES.cancerProfile);
   }
 
-  const { postCancerSurveyFormSubmission } = useElixirApi();
+  const { postCancerSurveyFormSubmission } = useApi();
 
   const { mutate } = useMutation({
     mutationFn: postCancerSurveyFormSubmission,

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

@@ -4,7 +4,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { Loading, Modal, Typography } from "@eo/ui";
 
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 
@@ -16,7 +16,7 @@ export const UserVerification = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
-  const { eligibleEmail } = useElixirApi();
+  const { eligibleEmail } = useApi();
 
   const submissionId = searchParams.get("submission_id") || "";
   const name = searchParams.get("name") || "";

apps/eo_web/src/screens/ForgotPassword.tsx

@@ -8,10 +8,14 @@ import { z } from "zod";
 
 import { Button, Input, Typography, icons } from "@eo/ui";
 
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 
+
+
+
+
 const forgotPasswordSchema = z.object({
   email: z
     .string()
@@ -21,7 +25,7 @@ const forgotPasswordSchema = z.object({
 export type TypeForgotPasswordShema = z.infer<typeof forgotPasswordSchema>;
 
 export const ForgotPassword = () => {
-  const { sendEmailToRecoveryPassword } = useElixirApi();
+  const { sendEmailToRecoveryPassword } = useApi();
 
   const {
     formState: { errors },

apps/eo_web/src/screens/PrePlan.tsx

@@ -4,15 +4,19 @@ import { useNavigate } from "react-router-dom";
 import { Button, Typography, icons } from "@eo/ui";
 
 import { ThcProductPreferencesEnum } from "~/api/PrePlanTypes";
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { usePrePlan } from "~/api/usePrePlan";
 import { getImageForForm } from "~/helpers/PrePlan";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 
+
+
+
+
 export const PrePlan = () => {
   // when have time connect to backend
-  const { getSubmission } = useElixirApi();
+  const { getSubmission } = useApi();
   const { data } = useQuery({
     queryFn: getSubmission,
     queryKey: ["getSubmission"],

apps/eo_web/src/screens/PrePlanV2.tsx

@@ -9,7 +9,7 @@ import {
   ThcProductPreferencesEnum,
   type Schedule,
 } from "~/api/PrePlanTypes";
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { usePrePlan } from "~/api/usePrePlan";
 import { getImageForForm } from "~/helpers/PrePlan";
 import { LayoutDefault } from "~/layouts";
@@ -30,7 +30,7 @@ export const PrePlanV2 = () => {
   const maxRetries = 10;
   const [countFetching, setCountFetching] = useState(0);
 
-  const { getSubmissionById } = useElixirApi();
+  const { getSubmissionById } = useApi();
   const { data } = useQuery({
     queryFn: () => getSubmissionById(submissionId as string),
     queryKey: ["getSubmission", submissionId],

apps/eo_web/src/screens/RecoveryPassword.tsx

@@ -9,10 +9,14 @@ import { z } from "zod";
 
 import { Button, Input, Typography, icons } from "@eo/ui";
 
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 
+
+
+
+
 const recoveryPasswordSchema = z.object({
   password: z
     .string()
@@ -29,7 +33,7 @@ const recoveryPasswordSchema = z.object({
 export type TypeRecoveryPasswordSchema = z.infer<typeof recoveryPasswordSchema>;
 
 export const RecoveryPassword = () => {
-  const { resetPassword } = useElixirApi();
+  const { resetPassword } = useApi();
 
   const [showPassword, setShowPassword] = useState(false);
   const {

apps/eo_web/src/screens/ZipCodeValidation.tsx

@@ -9,7 +9,7 @@ import { z } from "zod";
 
 import { Button, Input, Typography } from "@eo/ui";
 
-import { useElixirApi } from "~/api/useElixirApi";
+import { useApi } from "~/api/useApi";
 import { ZUKO_SLUG_ID } from "~/configs/env";
 import { useZukoAnalytic } from "~/hooks/useZukoAnalytic";
 import { LayoutDefault } from "~/layouts";
@@ -29,7 +29,7 @@ const zipCodeValidationSchema = z.object({
 export type ZipCodeValidationSchema = z.infer<typeof zipCodeValidationSchema>;
 
 export const ZipCodeValidation = () => {
-  const { validateZipCode } = useElixirApi();
+  const { validateZipCode } = useApi();
   const { triggerViewEvent } = useZukoAnalytic(ZUKO_SLUG_ID);
   useEffect(triggerViewEvent, [triggerViewEvent]);