Merge pull request #104 from Light-it-labs/develop

[RELEASE] 8 March 🚀🚀

.vscode/settings.json

@@ -9,5 +9,5 @@
   "cSpell.diagnosticLevel": "Error",
   "[typescriptreact]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
-  },
+  }
 }

apps/eo_web/dist/manifest.json

@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-cae12d70.css",
+    "file": "assets/main-2eb98fae.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-cae12d70.css"
+      "assets/main-2eb98fae.css"
     ],
-    "file": "assets/main-9a4200e5.js",
+    "file": "assets/main-6b5e7998.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/src/components/EOInYourInbox.tsx

@@ -1,29 +1,39 @@
 import { Button, Typography } from '@eo/ui'
-import React from 'react'
+import React, { useState } from 'react'
 
 export const EOInYourInbox = () => {
+  const [submitted, setSubmitted] = useState(false)
   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"
+          className="mb-4 text-center text-[32px] leading-[40px] text-skun"
         >
           EO in your inbox
         </Typography>
-        <Typography className="text-center text-skunk-mid">
+        <Typography className="text-center text-skun-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>
+        {!submitted ?
+          (<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" onClick={() => setSubmitted(true)}>
+              Subscribe
+            </Button>
+          </div>
+          ) : (
+            <div className="mt-[30px] px-6 py-12 lg:px-32 lg:py-18 rounded-lg border-2 border-black">
+              <Typography font="semiBold" className="text-center text-lg  ">
+                Thank you! <br />
+                Your submission has been received!
+              </Typography>
+            </div>
+          )}
       </div>
     </section>
   )

apps/eo_web/src/components/FAQs.tsx

@@ -1,14 +1,30 @@
-import { Typography } from '@eo/ui'
-import React from 'react'
-import { faqs, pilotFaqs } from '~/copy/copy'
-import { Collapsible } from './Collapsible'
+import React from "react";
+
+import { Typography } from "@eo/ui";
+
+import { cOrgFaqs, faqs, pilotFaqs } from "~/copy/copy";
+import { type Channel } from "~/stores/useProfilingStore";
+import { Collapsible } from "./Collapsible";
+
 
 interface FAQsProps {
-  pilot?: boolean
+  usePayment?: boolean;
+  flow?: string;
+  channel?: Channel;
 }
 
-export const FAQs = ({ pilot = false }: FAQsProps) => {
-  const faqList = pilot ? pilotFaqs : faqs
+export const FAQs = ({ usePayment = false, channel, flow }: FAQsProps) => {
+  const flowsWithCOrgFaqs = [
+    "c_org",
+    "twist_out_cancer",
+    "cancer_support_community",
+    "resource_center_1",
+    "resource_center_2",
+  ];
+  let faqList = faqs;
+  if (flow && flowsWithCOrgFaqs.includes(flow)) faqList = cOrgFaqs;
+  else if (channel === "cancer" && !usePayment) faqList = pilotFaqs;
+
   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">
@@ -30,5 +46,5 @@ export const FAQs = ({ pilot = false }: FAQsProps) => {
         </div>
       </div>
     </section>
-  )
-}
+  );
+};

apps/eo_web/src/components/Header.tsx

@@ -36,7 +36,7 @@ export const Header = () => {
         viewBox="0 0 42 20"
         fill="none"
         onClick={() => {
-          window.open("https://www.eo.care/web/privacy-policy", "_blank");
+          window.open("https://www.eo.care", "_blank");
         }}
       >
         <path
@@ -90,7 +90,7 @@ export const Header = () => {
         )}
       </div>
       {/* eslint-disable-next-line @typescript-eslint/no-empty-function */}
-      <Modal isOpen={openModal} onClose={() => { }} controller={setOpenModal}>
+      <Modal isOpen={openModal} onClose={() => {}} controller={setOpenModal}>
         <div
           className="flex h-full w-full flex-col justify-center rounded-3xl bg-white px-10 py-[50px] leading-[48px]
                     shadow-lg md:px-[60px] md:py-20"
@@ -130,10 +130,10 @@ export const Header = () => {
               >
                 Call{" "}
                 <a
-                  href="tel:877-707-0706"
+                  href="tel:888-823-6143"
                   className="underline decoration-1 underline-offset-8"
                 >
-                  877-707-0706
+                  888-823-6143
                 </a>
               </Typography>
             </li>

apps/eo_web/src/components/NumberedStep.tsx

@@ -0,0 +1,25 @@
+import { Typography } from '@eo/ui'
+import React from 'react'
+
+interface NumberedStepProps {
+  number: number
+  title: string
+  children: React.ReactNode
+}
+
+export const NumberedStep = ({ number, title, children }: NumberedStepProps) => {
+  return (
+    <div className="flex flex-col items-center gap-4 max-w-[360px]">
+      <div className="rounded-full bg-electric-blue w-[70px] h-[70px] items-center justify-center flex">
+        <span className="text-white font-bold text-[40px] font-new-hero">{number}</span>
+      </div>
+      <Typography
+        font="bold"
+        className="text-center text-xl leading-[28px]"
+      >
+        {title}
+      </Typography>
+      {children}
+    </div>
+  )
+}