[FEATURE][86dqp22d7] Cancer Care Signup/Pilot site Updates

apps/eo_web/dist/manifest.json

@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-06decd13.css",
+    "file": "assets/main-9c240f12.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-06decd13.css"
+      "assets/main-9c240f12.css"
     ],
-    "file": "assets/main-84dff66e.js",
+    "file": "assets/main-62613a26.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/index.html

@@ -27,6 +27,12 @@
         return this.environments[window.location.host][key]
       }
       return null
+    },
+    isMarketingSite: function (host) {
+      return ['www.eo.care', 'eo-marketing.webflow.io'].includes(host)
+    },
+    isPartnerSite: function (host) {
+      return ['partner.eo.care', 'eo-marketing-06cbaf66a5b1fbfeecb0ca9525.webflow.io'].includes(host)
     }
   }
 </script>

apps/eo_web/src/App.tsx

@@ -32,6 +32,7 @@ interface EnvironmentsConfigs {
   SENIOR_PROFILE_PATIENT_ID: string;
   SENIOR_PROFILE_CAREGIVER_ID: string;
   SENIOR_SURVEY_FORM: string;
+  WEB_APP_URL: string;
 }
 
 declare global {
@@ -41,6 +42,8 @@ declare global {
       isProduction: boolean;
       environments: Record<Hosts, EnvironmentsConfigs>;
       getEnv: (key: keyof EnvironmentsConfigs) => string | null;
+      isMarketingSite: (host: string) => boolean;
+      isPartnerSite: (host: string) => boolean;
     };
   }
 }

apps/eo_web/src/components/Header.tsx

@@ -9,9 +9,6 @@ import { ROUTES } from "~/router";
 import { useProfileStore } from "~/stores/useProfileStore";
 
 
-
-
-
 export const Header = () => {
   const profile = useProfileStore((state) => state.profile);
 
@@ -39,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/you/privacy-policy", "_blank");
         }}
       >
         <path
@@ -54,36 +51,34 @@ export const Header = () => {
       <div className="right-12 flex flex-row items-center gap-2">
         {isMobile ? (
           <>
-            <img
-              alt="Privacy and policy"
-              src="https://assets-global.website-files.com/6087423fbc61c1bded1c5d8e/63da9be7c173debd1e84e3c4_image%206.png"
+            <icons.PrivacyPolicyIcon
               onClick={() => {
-                window.open("https://www.eo.care/web/privacy-policy", "_blank");
+                window.open("https://www.eo.care/you/privacy-policy", "_blank");
               }}
-            ></img>
-            <icons.QuestionMarkCircleIcon
+              className="h-8 w-8 rounded-full stroke-2"
+            />
+            <icons.MarkCircleIcon
               onClick={() => setOpenModal(true)}
-              className="h-6 w-6 rounded-full bg-primary-900 stroke-2"
+              className="h-8 w-8 rounded-full"
             />
           </>
         ) : (
           <>
             <Button
               variant="tertiary-link"
               onClick={() => {
-                window.open("https://www.eo.care/web/privacy-policy", "_blank");
+                window.open("https://www.eo.care/you/privacy-policy", "_blank");
               }}
               font="regular"
             >
               Privacy Policy
             </Button>
             <Button
               variant="black"
-              left={<icons.QuestionMarkCircleIcon className="stroke-2" />}
               onClick={() => setOpenModal(true)}
               font="regular"
             >
-              Need Help
+              Need Help?
             </Button>
           </>
         )}
@@ -96,58 +91,64 @@ export const Header = () => {
       </div>
       {/* eslint-disable-next-line @typescript-eslint/no-empty-function */}
       <Modal isOpen={openModal} onClose={() => {}} controller={setOpenModal}>
-        <div className="flex h-full w-full flex-col justify-center bg-white px-10 py-8 leading-[48px] md:px-12">
-          <Typography variant="large" className="font-nobel mb-6 ">
-            {/* eslint-disable-next-line react/no-unescaped-entities */}
-            We're here.
+        <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"
+        >
+          <Typography
+            variant="large"
+            className="mb-4 text-[32px] font-bold leading-7 md:mb-6"
+          >
+            {}
+            We’re here.
           </Typography>
           <Typography
             font="light"
             variant="large"
-            className="mb-6 whitespace-normal text-[14px] leading-[18px] md:text-[22px]"
+            className="mb-4 whitespace-normal text-[18px] font-semibold leading-normal text-gray-800 md:mb-6 md:text-[22px]"
           >
-            Have questions or prefer to complete these questions and set-up your
-            account with an eo rep?
+            Have questions or prefer to talk with an eo rep?
           </Typography>
           <ul className="list-disc pl-4">
             <li>
               <Typography
                 variant="base"
-                className="mb-5 text-base font-light tracking-wide md:text-2xl"
+                className="text-sm font-normal leading-[26px] md:text-lg"
               >
                 <a
                   href="https://calendly.com/help-eo/30min"
                   className="underline decoration-1 underline-offset-8"
                 >
-                  <strong>Schedule a video chat</strong>
+                  Schedule a video chat
                 </a>{" "}
                 with a member of our team.
               </Typography>
             </li>
             <li>
               <Typography
                 variant="base"
-                className="mb-5 text-base font-light tracking-wide md:text-2xl"
+                className="text-sm font-normal leading-[26px] md:text-lg"
               >
                 Call{" "}
-                <a href="tel:877-707-0706">
-                  <strong className="underline decoration-1 underline-offset-8">
-                    877-707-0706
-                  </strong>
+                <a
+                  href="tel:877-707-0706"
+                  className="underline decoration-1 underline-offset-8"
+                >
+                  877-707-0706
                 </a>
               </Typography>
             </li>
             <li>
               <Typography
                 variant="base"
-                className="mb-5 text-base font-light tracking-wide md:text-2xl"
+                className="text-sm font-normal leading-[26px] md:text-lg"
               >
                 Email{" "}
                 <a
                   href="mailto:members@eo.care"
                   className="underline decoration-1 underline-offset-8"
                 >
-                  <strong>members@eo.care</strong>
+                  members@eo.care
                 </a>
               </Typography>
             </li>

apps/eo_web/src/configs/env.ts

@@ -34,3 +34,6 @@ export const API_ELIXIR =
   window.data.getEnv("API_URL") || "http://localhost:4200";
 export const API_LARAVEL =
   window.data.getEnv("API_LARAVEL") || "http://localhost";
+
+export const WEB_APP_URL =
+  window.data.getEnv("WEB_APP_URL") ?? "http://localhost:3000";

apps/eo_web/src/screens/ProfilingThankYou.tsx

@@ -6,20 +6,19 @@ import { toast } from "react-toastify";
 import { Typography } from "@eo/ui";
 
 import { useApi } from "~/api/useApi";
+import { WEB_APP_URL } from "~/configs/env";
 import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { ROUTES } from "~/router";
 import { useProfilingStore } from "~/stores/useProfilingStore";
 
 
-
-
-
 export const ProfilingThankYou = () => {
   const [searchParams] = useSearchParams();
 
-  const { account, introQuestionSubmissionId, channel, resetProfilingStore } =
-    useProfilingStore((state) => state);
+  const { account, introQuestionSubmissionId, channel } = useProfilingStore(
+    (state) => state,
+  );
   const submissionId = searchParams.get("submission_id") || "";
 
   const navigate = useNavigate();
@@ -33,9 +32,6 @@ export const ProfilingThankYou = () => {
   const { mutate } = useMutation({
     mutationFn: postCancerSeniorFormSubmission,
     mutationKey: ["postCancerSeniorFormSubmission", submissionId],
-    onSuccess: () => {
-      resetProfilingStore();
-    },
     onError: (result) => {
       if (axios.isAxiosError(result)) {
         if (result.response?.status !== 200) {
@@ -62,27 +58,33 @@ export const ProfilingThankYou = () => {
     }),
   );
 
+  const goToWebApp = () => {
+    window.location.href = WEB_APP_URL;
+  };
+
   return (
     <LayoutDefault>
       <div className="flex h-full flex-col items-center justify-center px-[20%]">
         <Typography
           variant="large"
-          className="font-nunito text-[45px] font-bold leading-[55px]"
+          className="text-[45px] font-bold leading-[55px]"
         >
           All done!
         </Typography>
+
         <br />
         <Typography
           variant="base"
           font="regular"
-          className="text-center font-nunito text-[28px] font-light leading-[40px]"
+          className="text-center text-[22px] font-normal leading-[36px]"
         >
-          You’ll receive your initial, personalized, clinician-approved care
-          care plan via email within 24 hours. <br />
+          You’ll be able to review your your initial, personalized,
+          clinician-approved care plan within 24 hours. When you’re care plan is
+          ready, we will send you an email with a link to{" "}
+          <span className="cursor-pointer underline" onClick={goToWebApp}>
+            log into your account.
+          </span>
           <br />
-          If you’ve opted to receive a medical card through eo and/or take home
-          delivery of your products, we’ll communicate your next steps in
-          separate email(s) you’ll receive shortly. <br />
           <br />
           Have questions? We’re here. Email members@eo.care, call{" "}
           <a href="tel:+1-877-707-0706">877-707-0706</a>, or schedule a free

apps/eo_web/src/screens/UserRolSelector.tsx

@@ -54,9 +54,15 @@ export const UserRolSelector = () => {
             strokeWidth="2"
             stroke="currentColor"
             className="absolute left-4 top-4 h-6 w-6"
-            onClick={() =>
-              (window.location.href = `https://${window.location.host}/pilot#how-eo-care-plans-works`)
-            }
+            onClick={() => {
+              if (window.data.isMarketingSite(origin)) {
+                window.location.href = `https://${window.location.host}/pilot#how-eo-care-plans-works`;
+              } else if (window.data.isPartnerSite(origin)) {
+                window.location.href = `https://${window.location.host}/cancer-pilot#how-eo-care-plans-works`;
+              } else {
+                history.back();
+              }
+            }}
           >
             <path
               strokeLinecap="round"

packages/ui/src/common/Icons.tsx

@@ -128,6 +128,72 @@ export const icons = {
       />
     </svg>
   ),
+  MarkCircleIcon: ({ className, ...props }: SVGProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="33"
+      viewBox="0 0 32 33"
+      fill="none"
+      className={tw("h-32 w-32", className)}
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.0003 4.16669C9.18881 4.16669 3.66699 9.68851 3.66699 16.5C3.66699 23.3115 9.18881 28.8334 16.0003 28.8334C22.8118 28.8334 28.3337 23.3115 28.3337 16.5C28.3337 9.68851 22.8118 4.16669 16.0003 4.16669ZM1.66699 16.5C1.66699 8.58394 8.08424 2.16669 16.0003 2.16669C23.9164 2.16669 30.3337 8.58394 30.3337 16.5C30.3337 24.4161 23.9164 30.8334 16.0003 30.8334C8.08424 30.8334 1.66699 24.4161 1.66699 16.5ZM16.0003 10.8334C15.1719 10.8334 14.5003 11.5049 14.5003 12.3334C14.5003 12.8856 14.0526 13.3334 13.5003 13.3334C12.948 13.3334 12.5003 12.8856 12.5003 12.3334C12.5003 10.4004 14.0673 8.83335 16.0003 8.83335C17.9333 8.83335 19.5003 10.4004 19.5003 12.3334C19.5003 13.6178 18.8079 14.7395 17.7807 15.3472C17.5183 15.5024 17.3018 15.6719 17.1607 15.8381C17.0237 15.9995 17.0003 16.1048 17.0003 16.1667V17.8334C17.0003 18.3856 16.5526 18.8334 16.0003 18.8334C15.448 18.8334 15.0003 18.3856 15.0003 17.8334V16.1667C15.0003 15.4922 15.2956 14.9449 15.6358 14.544C15.9718 14.148 16.3908 13.8456 16.7623 13.6259C17.2062 13.3632 17.5003 12.8821 17.5003 12.3334C17.5003 11.5049 16.8288 10.8334 16.0003 10.8334ZM16.0003 23.1667C16.7367 23.1667 17.3337 22.5697 17.3337 21.8334C17.3337 21.097 16.7367 20.5 16.0003 20.5C15.2639 20.5 14.667 21.097 14.667 21.8334C14.667 22.5697 15.2639 23.1667 16.0003 23.1667Z"
+        fill="#1B1D21"
+      />
+    </svg>
+  ),
+  PrivacyPolicyIcon: ({ className, ...props }: SVGProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="33"
+      viewBox="0 0 32 33"
+      fill="none"
+      className={tw("h-32 w-32", className)}
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.3333 12.5C12.3333 10.475 13.975 8.83335 16 8.83335C18.025 8.83335 19.6667 10.475 19.6667 12.5C19.6667 14.5251 18.025 16.1667 16 16.1667C13.975 16.1667 12.3333 14.5251 12.3333 12.5ZM16 10.8334C15.0795 10.8334 14.3333 11.5795 14.3333 12.5C14.3333 13.4205 15.0795 14.1667 16 14.1667C16.9205 14.1667 17.6667 13.4205 17.6667 12.5C17.6667 11.5795 16.9205 10.8334 16 10.8334Z"
+        fill="#1B1D21"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16 16.8334C14.4057 16.8334 12.9128 17.1543 11.7816 17.72C10.7101 18.2557 9.66667 19.1808 9.66667 20.5L9.6665 20.5833C9.66445 21.2638 9.66101 22.4096 10.747 23.1957C11.2509 23.5605 11.9159 23.7931 12.7396 23.9413C13.5709 24.0909 14.6363 24.1667 16 24.1667C17.3637 24.1667 18.4291 24.0909 19.2604 23.9413C20.0841 23.7931 20.7491 23.5605 21.253 23.1957C22.339 22.4096 22.3355 21.2638 22.3335 20.5833L22.3333 20.5C22.3333 19.1808 21.2899 18.2557 20.2185 17.72C19.0872 17.1543 17.5943 16.8334 16 16.8334ZM11.6667 20.5C11.6667 20.3465 11.8171 19.9382 12.676 19.5088C13.475 19.1093 14.6488 18.8334 16 18.8334C17.3512 18.8334 18.525 19.1093 19.324 19.5088C20.1829 19.9382 20.3333 20.3465 20.3333 20.5C20.3333 21.306 20.282 21.4296 20.0803 21.5756C19.9176 21.6934 19.5825 21.8513 18.9063 21.9729C18.2376 22.0932 17.303 22.1667 16 22.1667C14.697 22.1667 13.7624 22.0932 13.0937 21.9729C12.4175 21.8513 12.0824 21.6934 11.9197 21.5756C11.718 21.4296 11.6667 21.306 11.6667 20.5Z"
+        fill="#1B1D21"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.6312 3.23484C13.5564 2.57546 14.75 2.16669 16 2.16669C17.25 2.16669 18.4436 2.57546 20.3688 3.23484L21.3387 3.56686C23.3138 4.24295 24.8381 4.76472 25.9293 5.208C26.479 5.4313 26.9515 5.64758 27.332 5.86856C27.6982 6.08122 28.0656 6.34647 28.3152 6.70208C28.5619 7.05357 28.6894 7.48568 28.7696 7.90165C28.8529 8.3341 28.9032 8.85287 28.9356 9.4485C29 10.6312 29 12.2515 29 14.3531V16.4885C29 24.6232 22.856 28.5234 19.2022 30.1194L19.1661 30.1352C18.713 30.3332 18.2872 30.5193 17.7979 30.6445C17.2812 30.7768 16.7323 30.8334 16 30.8334C15.2677 30.8334 14.7188 30.7768 14.2021 30.6445C13.7128 30.5193 13.287 30.3332 12.8339 30.1352L12.7978 30.1194C9.14404 28.5234 3 24.6232 3 16.4885V14.3532C3 12.2517 3 10.6312 3.0644 9.4485C3.09683 8.85287 3.14708 8.3341 3.23042 7.90165C3.31058 7.48568 3.43814 7.05357 3.68484 6.70208C3.93443 6.34647 4.30179 6.08122 4.66798 5.86856C5.04849 5.64758 5.52105 5.4313 6.07071 5.208C7.16187 4.76472 8.68616 4.24295 10.6613 3.56687L11.6312 3.23484ZM16 4.16669C15.123 4.16669 14.2602 4.44887 12.1075 5.18575L11.3437 5.44718C9.32695 6.13754 7.85613 6.64142 6.82346 7.06094C6.308 7.27034 5.93454 7.44582 5.67238 7.59806C5.54296 7.67322 5.45378 7.73524 5.39423 7.78365C5.34373 7.8247 5.32448 7.84795 5.32172 7.85134C5.31914 7.85552 5.30257 7.88323 5.27924 7.94873C5.25259 8.02355 5.22306 8.1308 5.19429 8.2801C5.13605 8.58228 5.09193 8.99737 5.06144 9.55724C5.00037 10.6788 5 12.2445 5 14.3889V16.4885C5 23.3886 10.1599 26.7846 13.5984 28.2867C14.0937 28.503 14.3797 28.6255 14.6981 28.707C15.0022 28.7849 15.3733 28.8334 16 28.8334C16.6267 28.8334 16.9978 28.7849 17.3019 28.707C17.6203 28.6255 17.9063 28.503 18.4016 28.2867C21.8401 26.7846 27 23.3886 27 16.4885V14.3889C27 12.2445 26.9996 10.6788 26.9386 9.55724C26.9081 8.99737 26.8639 8.58228 26.8057 8.2801C26.7769 8.1308 26.7474 8.02355 26.7208 7.94873C26.6974 7.88318 26.6808 7.85548 26.6783 7.85133C26.6755 7.84791 26.6562 7.82467 26.6058 7.78365C26.5462 7.73524 26.457 7.67322 26.3276 7.59806C26.0655 7.44582 25.692 7.27034 25.1765 7.06094C24.1439 6.64142 22.6731 6.13754 20.6563 5.44718L19.8925 5.18575C17.7398 4.44887 16.877 4.16669 16 4.16669Z"
+        fill="#1B1D21"
+      />
+    </svg>
+  ),
+  XCloseIcon: ({ className, ...props }: SVGProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      className={tw("h-32 w-32", className)}
+      {...props}
+    >
+      <path
+        d="M23.9999 8.00006L8 24M7.99993 8L23.9999 23.9999"
+        stroke="#1B1D21"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+    </svg>
+  ),
 };
 
 export const IconWrapper = ({

packages/ui/src/common/Modal.tsx

@@ -45,12 +45,12 @@ export const Modal = ({
             >
               <Dialog.Panel
                 className={tw(
-                  "min-h-auto relative flex w-11/12 flex-row transition-all md:h-[60vh] md:w-9/12",
+                  "relative flex h-auto w-auto flex-row transition-all md:min-h-[176px] md:max-w-[780px]",
                   className,
                 )}
               >
                 <icons.XMarkIcon
-                  className="strike-20 absolute right-0 m-4 h-10 w-10 stroke-[4px]"
+                  className="strike-20 absolute right-0 m-4 h-10 w-10"
                   onClick={() => {
                     onPressX ? onPressX() : null;
                     controller(false);