[RELEASE] 18 January 🚀🚀

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"
   }

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;
 }
 

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>

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>
+  );
+};

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/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";