[Release] 10/07/2024

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4.0.0
+        uses: pnpm/action-setup@v4
 
       - name: Setup Node 18
         uses: actions/setup-node@v4

.github/workflows/production_deploy.yml

@@ -0,0 +1,49 @@
+name: PRODUCTION Deploy
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 8.3.1
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.PROD_AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.PROD_AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-2
+
+      - name: Deploy static site to S3 bucket
+        run: aws s3 sync ./apps/eo_web/dist/ s3://eo-care-web-prod --delete

.github/workflows/staging_deploy.yml

@@ -0,0 +1,49 @@
+name: STAGING Deploy
+
+on:
+  push:
+    branches:
+      - develop
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 8.3.1
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.DEV_AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.DEV_AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-2
+
+      - name: Deploy static site to S3 bucket
+        run: aws s3 sync ./apps/eo_web/dist/ s3://eo-care-web-dev --delete

.gitignore

@@ -8,7 +8,8 @@ node_modules
 # testing
 coverage
 
-# production
+# builds
+dist
 build
 !./apps/eo_web/build/*
 

apps/eo_web/package.json

@@ -19,6 +19,7 @@
     "@headlessui/react": "^1.7.13",
     "@hookform/resolvers": "^3.6.0",
     "@react-oauth/google": "^0.9.0",
+    "@sentry/react": "^8.13.0",
     "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-query-devtools": "^5.45.1",
     "autoprefixer": "^10.4.14",
@@ -28,8 +29,8 @@
     "react-dom": "^18.2.0",
     "react-multi-date-picker": "^3.3.4",
     "react-router-dom": "^6.10.0",
-    "react-toastify": "^9.1.1",
-    "swiper": "^11.0.5",
+    "react-toastify": "^10.0.5",
+    "swiper": "^11.1.4",
     "uuid": "^9.0.0",
     "zod": "^3.21.4",
     "zustand": "^4.5.2"

apps/eo_web/src/App.tsx

@@ -3,9 +3,12 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ToastContainer } from "react-toastify";
 
 import { env } from "./env";
+
+import "./configs/env";
+
 import { Router } from "./router";
-import "react-toastify/dist/ReactToastify.css";
 
+import "react-toastify/dist/ReactToastify.css";
 
 const queryClient = new QueryClient();
 type Hosts =
@@ -37,6 +40,8 @@ interface EnvironmentsConfigs {
   ROI_CALCULATOR_FORM: string;
   WEB_APP_URL: string;
   CHECKOUT_FORM_ID: string;
+  VITE_SENTRY_DNS_PUBLIC: string;
+  VITE_APP_ENV: string;
 }
 
 declare global {
@@ -67,7 +72,7 @@ function App() {
         draggable
         pauseOnHover
       />
-      {env.VITE_APP_ENV === "local" && (
+      {env.VITE_APP_ENV === "localhost" && (
         <ReactQueryDevtools initialIsOpen={false} />
       )}
     </QueryClientProvider>

apps/eo_web/src/api/useApi.ts

@@ -79,6 +79,7 @@ interface CreatePreProfileParams {
   last_name: string;
   email: string;
   phone_number: string;
+  origin: string;
 }
 
 export const useApi = () => {
@@ -133,11 +134,8 @@ export const useApi = () => {
       authHeader,
     );
 
-  const eligibleEmail = async (email: string) =>
-    await apiElixir.post<LaravelSuccessBase<unknown> | LaravelErrorValidation>(
-      "/v2/profiles/eligible",
-      { email },
-    );
+  const eligibleEmail = (email: string) =>
+    apiLaravel.post<void>(`/api/profiles/eligible`, { email });
 
   const surveyStatus = async (email: string, phase: string) =>
     await apiElixir.get<{ active: boolean }>(

apps/eo_web/src/api/useProfile.ts

@@ -0,0 +1,24 @@
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
+
+import { useApi } from "~/api/useApi";
+
+const useProfilesKeys = {
+  eligibleEmailQuery: (email: string) => ["eligibleEmail", email],
+};
+
+export const useProfile = () => {
+  const { eligibleEmail } = useApi();
+  const useEligibleEmailQuery = (
+    email: string,
+    extraConfig: Partial<UseQueryOptions>,
+  ) =>
+    useQuery({
+      queryKey: useProfilesKeys.eligibleEmailQuery(email),
+      queryFn: () => eligibleEmail(email),
+      ...extraConfig,
+    });
+
+  return {
+    useEligibleEmailQuery,
+  };
+};

apps/eo_web/src/components/Carousel.tsx

@@ -4,19 +4,15 @@ import { type Swiper as SwiperType } from "swiper";
 import { A11y, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-import { useIsDesktop, useIsMobile } from "~/hooks/useIsMobile";
-// Import Swiper styles
+import { useIsDesktop, useIsMobile } from "~/hooks/useIsMobile"; // Import Swiper styles
 import "swiper/css";
 import "swiper/css/pagination";
-import React, { Fragment, useRef } from "react";
+
+import React, { useRef } from "react";
 
 import { tw } from "@eo/shared";
 import { icons } from "@eo/ui";
 
-
-
-
-
 export interface EoCarouselProps {
   children: React.ReactNode[];
 }
@@ -59,11 +55,9 @@ export const EoCarousel = ({ children }: EoCarouselProps) => {
         >
           {children.map((item, key) => {
             return (
-              <Fragment key={`${key}`}>
-                <SwiperSlide>
-                  <div className="mb-12">{item}</div>
-                </SwiperSlide>
-              </Fragment>
+              <SwiperSlide key={`carrousel-item-${key}`}>
+                <div className="mb-12">{item}</div>
+              </SwiperSlide>
             );
           })}
         </Swiper>

apps/eo_web/src/components/FAQs.tsx

@@ -1,12 +1,11 @@
-import React from "react";
+import React, { useId } from "react";
 
 import { Typography } from "@eo/ui";
 
 import { cOrgFaqs, inovaFaqs, paidFaqs, pilotFaqs } from "~/copy/copy";
 import { Flows, type FlowType } from "~/stores/useProfilingStore";
 import { Collapsible } from "./Collapsible";
 
-
 interface FAQsProps {
   flow?: FlowType;
 }
@@ -24,10 +23,7 @@ const flowsWithCOrgFaqs: FlowType[] = [
   Flows.stupid_cancer,
 ];
 
-const flowsWithInovaFaqs: FlowType[] = [
-  Flows.inova,
-  Flows.uva,
-];
+const flowsWithInovaFaqs: FlowType[] = [Flows.inova, Flows.uva];
 
 const getFAQCopies = (flow?: FlowType) => {
   if (flow && flowsWithCOrgFaqs.includes(flow)) return cOrgFaqs;
@@ -39,6 +35,7 @@ const getFAQCopies = (flow?: FlowType) => {
 
 export const FAQs = ({ flow }: FAQsProps) => {
   const faqList = getFAQCopies(flow);
+  const faqId = useId();
 
   return (
     <section className="px-6 py-12 md:mx-0 md:my-[100px]">
@@ -52,7 +49,7 @@ export const FAQs = ({ flow }: FAQsProps) => {
         </Typography>
         <div className="flex flex-col gap-6">
           {faqList.map(({ title, content }) => (
-            <Collapsible key={title} title={title} active={false}>
+            <Collapsible key={`${title}-${faqId}`} title={title} active={false}>
               <Typography className="text-[18px] leading-[26px] text-gray-800">
                 {content}
               </Typography>

apps/eo_web/src/components/HowEOWorks.tsx

@@ -11,7 +11,6 @@ import {
 import { Flows, type FlowType } from "~/stores/useProfilingStore";
 import { EoCarousel } from "./Carousel";
 
-
 interface HowEOWorksProps {
   flow?: FlowType;
 }
@@ -39,7 +38,7 @@ export const HowEOWorks = ({ flow }: HowEOWorksProps) => {
       <EoCarousel>
         {carouselItems.map(({ title, content, step, icon: Icon }) => (
           <article
-            key={step}
+            key={`${title}-${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">