Merge pull request #78 from Light-it-labs/feature/86dr2w52q/add-loadi…

…ng-for-jotforms-iframes

[FEATURE][86dr2w52q] Weird behaviour on loading forms of Jotforms

apps/eo_web/dist/manifest.json

@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-0d348634.css",
+    "file": "assets/main-f7238d96.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-0d348634.css"
+      "assets/main-f7238d96.css"
     ],
-    "file": "assets/main-e874f5ce.js",
+    "file": "assets/main-b3be06ed.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/src/components/JotformFrame.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from "react";
+
+import { jotformScript } from "~/helpers/jotform_script";
+import { useMount } from "~/hooks/useMount";
+
+interface JotformFrameProps {
+  formId: string | number;
+  searchParam?: URLSearchParams;
+}
+
+const Iframe = ({ formId, searchParam }: JotformFrameProps) => {
+  const ref = useRef<HTMLIFrameElement>(null);
+  useMount(() => {
+    jotformScript(formId);
+    setTimeout(() => {
+      if (ref?.current) {
+        ref.current.style.opacity = "100";
+      }
+    }, 1700);
+  }, [formId, searchParam]);
+
+  return (
+    <iframe
+      ref={ref}
+      src={`https://form.jotform.com/${formId}?${
+        searchParam ? searchParam.toString() : ""
+      }`}
+      id={`JotFormIFrame-${formId}`}
+      title=""
+      onLoad={() => {
+        window.parent.scrollTo(0, 0);
+      }}
+      allow="geolocation; microphone; camera"
+      allowFullScreen={true}
+      className="h-full w-full min-w-full border-none opacity-0"
+    ></iframe>
+  );
+};
+
+const Loading = () => {
+  const [showLoading, setShowLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setShowLoading(false);
+    }, 1200);
+  });
+
+  return (
+    <>
+      {showLoading && (
+        <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",
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export const JotformFrame = ({ formId, searchParam }: JotformFrameProps) => {
+  return (
+    <>
+      <Loading />
+      <Iframe formId={formId} searchParam={searchParam} />
+    </>
+  );
+};

apps/eo_web/src/helpers/jotform_script.js

@@ -27,6 +27,7 @@ export const jotformScript = (profileId) => {
       return;
     }
     var args = e.data.split(":");
+    let iframe;
     if (args.length > 2) {
       iframe = document.getElementById(
         "JotFormIFrame-" + args[args.length - 1],

apps/eo_web/src/hooks/useMount.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-export const useMount = (fn: () => void) => {
+export const useMount = (fn: () => void, deps: unknown[] = []) => {
   const onceFlag = useRef(true);
 
   useEffect(() => {
@@ -9,5 +9,5 @@ export const useMount = (fn: () => void) => {
       fn();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, deps);
 };

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

@@ -1,11 +1,10 @@
 import { useNavigate } from "react-router-dom";
 
+import { JotformFrame } from "~/components/JotformFrame";
 import {
   CANCER_PROFILE_CAREGIVER_ID,
   CANCER_PROFILE_PATIENT_ID,
 } from "~/configs/env";
-import { jotformScript } from "~/helpers/jotform_script";
-import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 import { useProfilingStore } from "~/stores/useProfilingStore";
@@ -34,31 +33,10 @@ export const Profiling = () => {
     navigate(ROUTES.userRolSelector);
   }
 
-  useMount(() => {
-    setTimeout(() => {
-      jotformScript(cancerProfileId);
-    }, 400);
-  });
-
   return (
     <LayoutDefault>
       <div className="mb-10 flex h-screen flex-col">
-        {/* uncomment for real flow */}
-        <iframe
-          id={`JotFormIFrame-${cancerProfileId}`}
-          title=""
-          onLoad={() => window.parent.scrollTo(0, 0)}
-          allow="geolocation; microphone; camera"
-          allowTransparency={true}
-          allowFullScreen={true}
-          src={`https://form.jotform.com/${cancerProfileId}?${searchParam.toString()}`}
-          className="h-full w-full"
-          style={{
-            minWidth: "100%",
-            height: "539px",
-            border: "none",
-          }}
-        ></iframe>
+        <JotformFrame formId={cancerProfileId} searchParam={searchParam} />
       </div>
     </LayoutDefault>
   );

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

@@ -1,25 +1,24 @@
-import { useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 
+import { JotformFrame } from "~/components/JotformFrame";
 import {
   CANCER_CAREGIVER_SURVEY_ID,
   CANCER_PATIENT_SURVEY_ID,
 } from "~/configs/env";
-import { jotformScript } from "~/helpers/jotform_script";
 import { LayoutDefault } from "~/layouts";
 import { useProfilingStore } from "~/stores/useProfilingStore";
 
 
 export const SurveyForm = () => {
   const [searchParams] = useSearchParams();
-  const setUsePayment = useProfilingStore((s) => s.setUsePayment)
+  const setUsePayment = useProfilingStore((s) => s.setUsePayment);
 
   const isPilot = (searchParams.get("pilot") ?? "") === "true";
   const email = searchParams.get("email") ?? "";
   const profiled = searchParams.get("profiled") ?? "patient";
   const symptoms = searchParams.get("symptoms") ?? "";
 
-  setUsePayment(!isPilot)
+  setUsePayment(!isPilot);
 
   const formId =
     profiled === "patient"
@@ -31,27 +30,10 @@ export const SurveyForm = () => {
     symptoms,
   });
 
-  useEffect(() => {
-    jotformScript(formId);
-  }, [formId]);
   return (
     <LayoutDefault>
       <div className="mb-10 flex h-screen flex-col">
-        <iframe
-          id={`JotFormIFrame-${formId}`}
-          title=""
-          onLoad={() => window.parent.scrollTo(0, 0)}
-          allow="geolocation; microphone; camera"
-          allowTransparency={true}
-          allowFullScreen={true}
-          src={`https://form.jotform.com/${formId}?${params.toString()}`}
-          className="h-full w-full"
-          style={{
-            minWidth: "100%",
-            height: "539px",
-            border: "none",
-          }}
-        ></iframe>
+        <JotformFrame formId={formId} searchParam={params} />
       </div>
     </LayoutDefault>
   );

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

@@ -1,11 +1,10 @@
 import { useNavigate } from "react-router-dom";
 
+import { JotformFrame } from "~/components/JotformFrame";
 import {
   SENIOR_PROFILE_CAREGIVER_ID,
   SENIOR_PROFILE_PATIENT_ID,
 } from "~/configs/env";
-import { jotformScript } from "~/helpers/jotform_script";
-import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 import { useProfilingStore } from "~/stores/useProfilingStore";
@@ -34,31 +33,10 @@ export const Profiling = () => {
     navigate(ROUTES.userRolSelector);
   }
 
-  useMount(() => {
-    setTimeout(() => {
-      jotformScript(seniorFormId);
-    }, 400);
-  });
-
   return (
     <LayoutDefault>
       <div className="mb-10 flex h-screen flex-col">
-        {/* uncomment for real flow */}
-        <iframe
-          id={`JotFormIFrame-${seniorFormId}`}
-          title=""
-          onLoad={() => window.parent.scrollTo(0, 0)}
-          allow="geolocation; microphone; camera"
-          allowTransparency={true}
-          allowFullScreen={true}
-          src={`https://form.jotform.com/${seniorFormId}?${searchParam.toString()}`}
-          className="h-full w-full"
-          style={{
-            minWidth: "100%",
-            height: "539px",
-            border: "none",
-          }}
-        ></iframe>
+        <JotformFrame formId={seniorFormId} searchParam={searchParam} />
       </div>
     </LayoutDefault>
   );

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

@@ -1,11 +1,10 @@
-import { useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 
+import { JotformFrame } from "~/components/JotformFrame";
 import {
   SENIOR_CAREGIVER_SURVEY_ID,
   SENIOR_PATIENT_SURVEY_ID,
 } from "~/configs/env";
-import { jotformScript } from "~/helpers/jotform_script";
 import { LayoutDefault } from "~/layouts";
 
 
@@ -25,27 +24,10 @@ export const SeniorSurveyForm = () => {
       ? SENIOR_PATIENT_SURVEY_ID
       : SENIOR_CAREGIVER_SURVEY_ID;
 
-  useEffect(() => {
-    jotformScript(formId);
-  }, []);
   return (
     <LayoutDefault>
       <div className="mb-10 flex h-screen flex-col">
-        <iframe
-          id={`JotFormIFrame-${formId}`}
-          title=""
-          onLoad={() => window.parent.scrollTo(0, 0)}
-          allow="geolocation; microphone; camera"
-          allowTransparency={true}
-          allowFullScreen={true}
-          src={`https://form.jotform.com/${formId}?${searchParam.toString()}`}
-          className="h-full w-full"
-          style={{
-            minWidth: "100%",
-            height: "539px",
-            border: "none",
-          }}
-        ></iframe>
+        <JotformFrame formId={formId} searchParam={searchParam} />
       </div>
     </LayoutDefault>
   );

packages/config/tailwind/index.ts

@@ -155,9 +155,11 @@ export default {
         transparent: "transparent",
         gray: {
           50: "#FEFEFF",
+          200: "#DFE4EB",
           600: "#7C7B7A",
           700: "#697079",
           800: "#535A63",
+          1000: "#1B1D21",
         },
         cream: {
           100: "#F8F6F3",