[RELEASE] 18 January 🚀🚀 (#84)

* [FEATURE][CU-865da45qm] Athletes Feedback Survey (#36) * feat: add new form to save athletes feedback survey and refactor some stuff * review: modify by code review * [FEATURE][CU-86dqk6etj] Some Basics step (#37) * feature: do the following changes * Refactor navbar * Do the foother * configure scaffolding for seniors and cancer profile * remove unnecesary logic * Change some styles. * fix: change param name. * feat: add senior profiling * feature: add senior profiling page, and thank you page * review: do some changes from code review * Feature/86dqkm09a pass state to profiling form (#38) * feature: do the following changes * Refactor navbar * Do the foother * configure scaffolding for seniors and cancer profile * remove unnecesary logic * Change some styles. * fix: change param name. * feat: add senior profiling * feature: add senior profiling page, and thank you page * change base components * feat: some improvements and change email validation endpoint, add also the state, add symptoms from website to populate profiling form. and add payment state to show payment on profiling * feat: add the following changes * add interfaces to useApi * reset store when start a new flow and when end a flow * add payment variable to jotforms * improvent: add enum to reuse it in the code * change right arrow ti icons files * review: add changes for code review * remove spaces and change prettier config * review: do changes from code review * fix: resolve some problems * fix: add dist folder * feature: add origin to redirec back, to able diferents domains redirections. (#39) * [FEATURE][86dqm7ndu] Add experience with cannabis (#40) * feature: add experience with cannabis and pass it to profiling form * feat: add dist files * feat: fix styles in staging and production environment * feat: changes modal on header and look and fell, add new environment to web app url and fix some redirections back (#41) * [FEATURE][86dqp22d7] Cancer Care Signup/Pilot site Updates (#42) * feat: implement all the changes for thank you page. * fix: some styles changes * feat: add changes from code review * [FEATURE][86dqp22d7] Cancer Care Signup/Pilot site Updates (#43) * feat: implement all the changes for thank you page. * fix: some styles changes * feat: add changes from code review * fix: fixin some stiles for webflow classes * Update UI for patient/caregiver question * remove unused radio * Update for mobile viewing * [FEATURE][86dqnp6fy] Update Seniors Care Plan Signup (#45) * feature: add senior endpoint and connect to profiling thank you page. * review: add return type from laravel api * feature: add email value to cancer/senior profilings to identify the jotforms submission on jotforms admin panel * [FEATURE][86dqnavqf] Implement Seniors Feedback Survey (#47) * feature: add pages for senior survey * feature: change return type on success case on post senior survey * [FEATURE][86dqqqw1h] Updates to Thank you page (#46) * feature: change icons from carrousel on thank you page, remove unused route, add new color to tailwind and rename some icons * feat: modify subscribe section * feature: change copy on creation account (#48) * [FEATURE][86dqteqh5] Update the "Which best describes you" screen title and option labels (#49) * feature: change some copies * review: change some clases for tailwind * feature: make rounded panel white as figma design reference * feature: add shadow to the card * fix: add compiled files * [BUGFIX] Resolve bad merge conflicts. (#50) * feature: change icons from carrousel on thank you page, remove unused route, add new color to tailwind and rename some icons * feat: modify subscribe section * feature: add new icons for carrousel * Update steps copy * build * deploy: add builds to deploy (#53) * [FEATURE][86dqv7bbn] Cancer Caregiver Survey (#54) * feature: add caregiver survey for profiled caregivers * feature: implement code-review * feature: implement code-review * fix: resolve typo error (#55) * bugfix: hidde the panel eo in your inbox (#56) * feature: add title to corrousel section (#57) * feat: add new compiles files (#58) * fix: handle various phone number formats (#59) * feature: change query string and prevent remove the query paramas payment to lost the reference of flow (#60) * Bugfix/86dqubvn8/error typo (#61) * fix: resolve typo error * bugfix: remove double your * fix: new assets * chore: update thank you page emails * fix: change privacy policy link * chore: add bundle * merge: Fixed conflicts between main and dev: * merge: Fixed conflicts between main and dev * hotfix: build again the assets * [FEATURE][86dr018j8] Update minor changes in Cancer Pilot (stage and prod) (#67) * feature: change the copy * feature: modify text copy. * feature: add margin top to separate the icon and text * [FEATURE][86dr018j8] Update minor changes in Cancer Pilot (stage and prod) #67 (#69) * feature: change the copy * feature: modify text copy. * feature: add margin top to separate the icon and text * review: add auto-code reivew * chore: add compiled files * Change email check copy * bugfix: prevent show eye icon by microsoft edge browser and user custom icom. (#66) * chore: rebuild assets * feat: update survey thank you pages * feature: add seniors modifications (#72) * feature: change defualt seniors form for caregiver (#73) * feat: update thank you pages * feat: update pilot carousel * fix: caroussel copy * fix: capitalize caroussel copy * feature: resolve the following problems * RadioGroup error using forwardRef when isn't necessary * Make Jotform iframe as component and adding a loading to prevent weird behavios while jotform load the form * fix jotform undefined variable * add package.lock file pending * new color for tailwind * feature: improve replace hidden attribute to opacity because it perfm better * feature: implement changes from code-review * fix: start profiling previous button * chore: generate build * fix: thank you pages copy and ui * fix: thank you font * fix: faqs and caroussel copys * fix: merge main into develop branch and resolve conflict (#83) * fix: copys --------- Co-authored-by: LeoBLightIt <[email protected]> Co-authored-by: LeoBLightIt <[email protected]> Co-authored-by: sgoycoechea-lightit <[email protected]> Co-authored-by: sgoycoechea-lightit <[email protected]> Co-authored-by: Lucas Lois <[email protected]>
Light-it-labs · Jan 18, 2024 · c91415d · c91415d
1 parent ed2f04a
commit c91415d
Show file tree

Hide file tree

Showing 30 changed files with 726 additions and 487 deletions.
diff --git a/apps/eo_web/dist/assets/main-2bb9d3aa.js b/apps/eo_web/dist/assets/main-2bb9d3aa.js
diff --git a/apps/eo_web/dist/assets/main-cf66f3ed.js b/apps/eo_web/dist/assets/main-cf66f3ed.js
diff --git a/apps/eo_web/dist/assets/main-94a1d790.css → apps/eo_web/dist/assets/main-d3160e96.css b/apps/eo_web/dist/assets/main-94a1d790.css → apps/eo_web/dist/assets/main-d3160e96.css
diff --git a/apps/eo_web/dist/manifest.json b/apps/eo_web/dist/manifest.json
@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-94a1d790.css",
+    "file": "assets/main-d3160e96.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-94a1d790.css"
+      "assets/main-d3160e96.css"
     ],
-    "file": "assets/main-2bb9d3aa.js",
+    "file": "assets/main-cf66f3ed.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

diff --git a/apps/eo_web/package-lock.json b/apps/eo_web/package-lock.json
diff --git a/apps/eo_web/src/App.tsx b/apps/eo_web/src/App.tsx
@@ -32,7 +32,8 @@ interface EnvironmentsConfigs {
   SENIOR_INTRO_QUESTION_CAREGIVER_ID: string;
   SENIOR_PROFILE_PATIENT_ID: string;
   SENIOR_PROFILE_CAREGIVER_ID: string;
-  SENIOR_SURVEY_FORM: string;
+  SENIOR_PATIENT_SURVEY_ID: string;
+  SENIOR_CAREGIVER_SURVEY_ID: string;
   WEB_APP_URL: string;
 }
 

diff --git a/apps/eo_web/src/components/AllDonePanel.tsx b/apps/eo_web/src/components/AllDonePanel.tsx
@@ -0,0 +1,22 @@
+import { Typography } from '@eo/ui'
+import type { ReactNode } from "react";
+
+interface AllDonePanelProps {
+  children?: ReactNode
+}
+
+export const AllDonePanel = ({ children }: AllDonePanelProps) => {
+  return (
+    <section className="flex h-auto flex-col items-center justify-center px-[20%] md:min-h-[479px] pb-10">
+      <Typography
+        variant="large"
+        className="text-[42px] font-bold leading-[55px]"
+      >
+        All done!
+      </Typography>
+
+      <br />
+      {children}
+    </section>
+  )
+}
diff --git a/apps/eo_web/src/components/EOInYourInbox.tsx b/apps/eo_web/src/components/EOInYourInbox.tsx
@@ -0,0 +1,30 @@
+import { Button, Typography } from '@eo/ui'
+import React from 'react'
+
+export const EOInYourInbox = () => {
+  return (
+    <section className="w-full bg-white px-6 py-12 md:px-[50px] md:py-[100px]">
+      <div className="flex flex-col items-center">
+        <Typography
+          font="bold"
+          className="mb-4 text-center text-[32px] leading-[40px] text-skunk"
+        >
+          eo in your inbox
+        </Typography>
+        <Typography className="text-center text-skunk-mid">
+          Rollouts in new markets, new partnerships, research initiatives and
+          special offers are all coming soon.
+        </Typography>
+        <div className="mt-[30px] flex w-full flex-col justify-items-end gap-4 md:w-auto md:flex-row">
+          <input
+            className="h-[49px] w-full rounded-[40px] border border-solid border-black bg-white py-3 pl-4 pr-2 text-black placeholder:text-gray-300 md:w-[327px]"
+            placeholder="Enter your email..."
+          />
+          <Button variant="black" font="semiBold">
+            Subscribe
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/eo_web/src/components/FAQs.tsx b/apps/eo_web/src/components/FAQs.tsx
@@ -0,0 +1,34 @@
+import { Typography } from '@eo/ui'
+import React from 'react'
+import { faqs, pilotFaqs } from '~/copy/copy'
+import { Collapsible } from './Collapsible'
+
+interface FAQsProps {
+  pilot?: boolean
+}
+
+export const FAQs = ({ pilot = false }: FAQsProps) => {
+  const faqList = pilot ? pilotFaqs : faqs
+  return (
+    <section className="px-6 py-12 md:mx-0 md:my-[100px]">
+      <div className="mx-auto my-0 flex max-w-[900px] flex-col">
+        <Typography
+          font="bold"
+          variant="large"
+          className="mb-[50px] text-center"
+        >
+          FAQs
+        </Typography>
+        <div className="flex flex-col gap-6">
+          {faqList.map(({ title, content }) => (
+            <Collapsible key={title} title={title} active={false}>
+              <Typography className="text-[18px] leading-[26px] text-gray-800">
+                {content}
+              </Typography>
+            </Collapsible>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/eo_web/src/components/Header.tsx b/apps/eo_web/src/components/Header.tsx
@@ -76,7 +76,7 @@ export const Header = () => {
             <Button
               variant="black"
               onClick={() => setOpenModal(true)}
-              font="regular"
+              font="semiBold"
             >
               Need Help?
             </Button>

diff --git a/apps/eo_web/src/components/HowEOWorks.tsx b/apps/eo_web/src/components/HowEOWorks.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+import { Typography } from "@eo/ui";
+
+import { CancerPilotCarrouselItems, CarrouselItems } from "~/copy/copy";
+import { EoCarousel } from "./Carousel";
+
+
+interface HowEOWorksProps {
+  pilot?: boolean
+}
+
+export const HowEOWorks = ({ pilot = false }: HowEOWorksProps) => {
+  const carouselItems = pilot ? CancerPilotCarrouselItems : CarrouselItems;
+  return (
+    <section className="bg-white px-6 py-12 md:px-[50px] md:py-[100px] ">
+      <Typography font="bold" variant="large" className="mb-20 text-center">
+        {pilot ? "How the eo Pilot Works" : "How eo Care Plans Work"}
+      </Typography>
+      <EoCarousel>
+        {carouselItems.map(({ title, content, step, icon: Icon }) => (
+          <article
+            key={step}
+            className="mx-auto my-0 flex h-auto w-auto max-w-[361px] flex-col items-center justify-center gap-2 md:flex-none md:items-start"
+          >
+            <div className="flex h-[70.13px] w-[70.13px] flex-row items-center justify-center rounded-full bg-electric-blue fill-gray-50">
+              <Icon className="h-9 w-[37px]" />
+            </div>
+
+            <Typography className="text-[16px] uppercase leading-4 tracking-[.8px]">
+              {step}
+            </Typography>
+            <Typography font="bold" className="text-xl">
+              {title}
+            </Typography>
+            <Typography className="text-center text-lg md:text-left">
+              {content}
+            </Typography>
+          </article>
+        ))}
+      </EoCarousel>
+    </section>
+  );
+};
diff --git a/apps/eo_web/src/components/JotformFrame.tsx b/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} />
+    </>
+  );
+};
diff --git a/apps/eo_web/src/configs/env.ts b/apps/eo_web/src/configs/env.ts
@@ -30,10 +30,12 @@ export const SENIOR_INTRO_QUESTION_CAREGIVER_ID =
 export const SENIOR_PROFILE_PATIENT_ID =
   window.data.getEnv("SENIOR_PROFILE_PATIENT_ID") || 233245009995159;
 export const SENIOR_PROFILE_CAREGIVER_ID =
-  window.data.getEnv("SENIOR_PROFILE_CAREGIVER_ID") || 233244799896174;
+  window.data.getEnv("SENIOR_PROFILE_CAREGIVER_ID") || 240105148124645;
 
-export const SENIOR_SURVEY_ID =
-  window.data.getEnv("SENIOR_SURVEY_FORM") || 233441843921657;
+export const SENIOR_PATIENT_SURVEY_ID =
+  window.data.getEnv("SENIOR_PATIENT_SURVEY_ID") || 233441843921657;
+export const SENIOR_CAREGIVER_SURVEY_ID =
+  window.data.getEnv("SENIOR_CAREGIVER_SURVEY_ID") || 240026821042139;
 
 export const API_ELIXIR =
   window.data.getEnv("API_URL") || "http://localhost:4200";