From 00b7d41b30bbb877821652d98ceee125014b6464 Mon Sep 17 00:00:00 2001
From: Matias Fernandez <matias.fernandez@lightit.io>
Date: Tue, 9 Apr 2024 16:14:42 -0300
Subject: [PATCH 1/2] feat: send email when someone subscribes to EO

---
 apps/eo_web/src/api/email.ts                  | 13 ++++++++-
 apps/eo_web/src/components/EOInYourInbox.tsx  | 29 ++++++++++++++++---
 .../EmailVerificationUncompletedButLogged.tsx |  2 +-
 cspell.json                                   |  9 ++++--
 packages/ui/src/common/Button.tsx             |  2 +-
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/apps/eo_web/src/api/email.ts b/apps/eo_web/src/api/email.ts
index f2750120..af41bcd4 100644
--- a/apps/eo_web/src/api/email.ts
+++ b/apps/eo_web/src/api/email.ts
@@ -1,4 +1,4 @@
-import { apiElixir } from "~/api/axios";
+import { apiElixir, apiLaravel } from "~/api/axios";
 
 export interface ResendEmailVerificationResponse {
   success: boolean;
@@ -10,3 +10,14 @@ export const resendEmailVerification = async (email: string) => {
     { email },
   );
 };
+
+export interface SubscribeToEoEmailPostResponse {
+  success: boolean;
+}
+
+export const SubscribeToEoEmailPost = async (email: string) => {
+  return await apiLaravel.post<SubscribeToEoEmailPostResponse>(
+    "/api/slack-notification/eo-subscription",
+    { email },
+  );
+};
diff --git a/apps/eo_web/src/components/EOInYourInbox.tsx b/apps/eo_web/src/components/EOInYourInbox.tsx
index 3a8e0d11..24639537 100644
--- a/apps/eo_web/src/components/EOInYourInbox.tsx
+++ b/apps/eo_web/src/components/EOInYourInbox.tsx
@@ -1,8 +1,26 @@
 import { Button, Typography } from '@eo/ui'
 import React, { useState } from 'react'
+import { SubscribeToEoEmailPost } from '~/api/email'
 
 export const EOInYourInbox = () => {
+  const [isLoading, setIsLoading] = useState(false)
   const [submitted, setSubmitted] = useState(false)
+  const [email, setEmail] = useState('')
+
+  const onButtonSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true)
+
+    try {
+      await SubscribeToEoEmailPost(email);
+    } catch (error) {
+      console.error('Error submitting email:', error);
+    } finally {
+      setIsLoading(false)
+      setSubmitted(true)
+    }
+  };
+
   return (
     <section className="w-full bg-white px-6 py-12 md:px-[50px] md:py-[100px]">
       <div className="flex flex-col items-center">
@@ -17,15 +35,18 @@ export const EOInYourInbox = () => {
           special offers are all coming soon.
         </Typography>
         {!submitted ?
-          (<div className="mt-[30px] flex w-full flex-col justify-items-end gap-4 md:w-auto md:flex-row">
+          (<form onSubmit={(e) => { void onButtonSubmit(e) }} 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..."
+              type='email'
+              value={email}
+              onChange={(e) => { setEmail(e.target.value) }}
             />
-            <Button variant="black" font="semiBold" onClick={() => setSubmitted(true)}>
+            <Button type='submit' variant="black" font="semiBold" disabled={isLoading || !email}>
               Subscribe
             </Button>
-          </div>
+          </form>
           ) : (
             <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  ">
@@ -35,6 +56,6 @@ export const EOInYourInbox = () => {
             </div>
           )}
       </div>
-    </section>
+    </section >
   )
 }
diff --git a/apps/eo_web/src/screens/EmailVerificationUncompletedButLogged.tsx b/apps/eo_web/src/screens/EmailVerificationUncompletedButLogged.tsx
index 8427903b..2ed70b04 100644
--- a/apps/eo_web/src/screens/EmailVerificationUncompletedButLogged.tsx
+++ b/apps/eo_web/src/screens/EmailVerificationUncompletedButLogged.tsx
@@ -29,7 +29,7 @@ export const EmailVerificationUncompletedButLogged = () => {
 
   return (
     <LayoutDefault>
-      <div className="flex h-full h-full flex-col items-center justify-center px-2">
+      <div className="flex h-full flex-col items-center justify-center px-2">
         <Typography variant="large" font="bold">
           It looks like you haven’t verified your email.{" "}
           <br className="hidden md:block" /> Try checking your junk or spam
diff --git a/cspell.json b/cspell.json
index cfecd182..0dcbf96a 100644
--- a/cspell.json
+++ b/cspell.json
@@ -1,5 +1,7 @@
 {
-  "enableFiletypes": ["astro"],
+  "enableFiletypes": [
+    "astro"
+  ],
   "ignorePaths": [
     "*node_modules",
     "*tsconfig.tsbuildinfo",
@@ -30,6 +32,7 @@
     "ianvs",
     "iconify",
     "jotform",
+    "LARAVEL",
     "manypkg",
     "medtech",
     "middlewares",
@@ -53,8 +56,8 @@
     "Viewports",
     "WORKDIR",
     "xlink",
-    "zustand",
+    "Zuko",
     "ZUKO",
-    "Zuko"
+    "zustand"
   ]
 }
diff --git a/packages/ui/src/common/Button.tsx b/packages/ui/src/common/Button.tsx
index c0f92c7e..d8df695e 100644
--- a/packages/ui/src/common/Button.tsx
+++ b/packages/ui/src/common/Button.tsx
@@ -48,7 +48,7 @@ export const Button = forwardRef(
       ref={ref}
       type={type}
       className={tw(
-        "flex h-12 flex-row items-center justify-between gap-2 border border-transparent text-center focus:outline-none",
+        "flex h-12 flex-row items-center justify-between gap-2 border border-transparent text-center focus:outline-none disabled:cursor-not-allowed",
         "rounded-[37.3px] focus:ring-2 focus:ring-offset-0",
         !left && !right && "justify-center",
         variant === "primary" &&

From 7fcef95e8f37186fb8f7d13bebf139bafdf9e5a2 Mon Sep 17 00:00:00 2001
From: Matias Fernandez <matias.fernandez@lightit.io>
Date: Thu, 11 Apr 2024 16:46:15 -0300
Subject: [PATCH 2/2] fix: implementing improvements

---
 apps/eo_web/src/api/email.ts                 |  2 +-
 apps/eo_web/src/components/EOInYourInbox.tsx | 29 +++++++++-----------
 packages/ui/src/common/Button.tsx            |  2 +-
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/apps/eo_web/src/api/email.ts b/apps/eo_web/src/api/email.ts
index af41bcd4..4d942405 100644
--- a/apps/eo_web/src/api/email.ts
+++ b/apps/eo_web/src/api/email.ts
@@ -15,7 +15,7 @@ export interface SubscribeToEoEmailPostResponse {
   success: boolean;
 }
 
-export const SubscribeToEoEmailPost = async (email: string) => {
+export const subscribeToEoEmailPost = async (email: string) => {
   return await apiLaravel.post<SubscribeToEoEmailPostResponse>(
     "/api/slack-notification/eo-subscription",
     { email },
diff --git a/apps/eo_web/src/components/EOInYourInbox.tsx b/apps/eo_web/src/components/EOInYourInbox.tsx
index 24639537..0efe5c70 100644
--- a/apps/eo_web/src/components/EOInYourInbox.tsx
+++ b/apps/eo_web/src/components/EOInYourInbox.tsx
@@ -1,25 +1,18 @@
 import { Button, Typography } from '@eo/ui'
 import React, { useState } from 'react'
-import { SubscribeToEoEmailPost } from '~/api/email'
+import { useMutation } from '@tanstack/react-query'
+import { subscribeToEoEmailPost } from '~/api/email'
+import { toast } from 'react-toastify'
 
 export const EOInYourInbox = () => {
-  const [isLoading, setIsLoading] = useState(false)
   const [submitted, setSubmitted] = useState(false)
   const [email, setEmail] = useState('')
 
-  const onButtonSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setIsLoading(true)
-
-    try {
-      await SubscribeToEoEmailPost(email);
-    } catch (error) {
-      console.error('Error submitting email:', error);
-    } finally {
-      setIsLoading(false)
-      setSubmitted(true)
-    }
-  };
+  const { mutate, isLoading } = useMutation({
+    mutationFn: subscribeToEoEmailPost,
+    onSuccess: () => setSubmitted(true),
+    onError: () => toast.error("Something went wrong, try again.")
+  });
 
   return (
     <section className="w-full bg-white px-6 py-12 md:px-[50px] md:py-[100px]">
@@ -35,7 +28,11 @@ export const EOInYourInbox = () => {
           special offers are all coming soon.
         </Typography>
         {!submitted ?
-          (<form onSubmit={(e) => { void onButtonSubmit(e) }} className="mt-[30px] flex w-full flex-col justify-items-end gap-4 md:w-auto md:flex-row">
+          (<form onSubmit={
+            (e) => {
+              e.preventDefault()
+              mutate(email)
+            }} 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..."
diff --git a/packages/ui/src/common/Button.tsx b/packages/ui/src/common/Button.tsx
index d8df695e..7c2e93b4 100644
--- a/packages/ui/src/common/Button.tsx
+++ b/packages/ui/src/common/Button.tsx
@@ -48,7 +48,7 @@ export const Button = forwardRef(
       ref={ref}
       type={type}
       className={tw(
-        "flex h-12 flex-row items-center justify-between gap-2 border border-transparent text-center focus:outline-none disabled:cursor-not-allowed",
+        "flex h-12 flex-row items-center justify-between gap-2 border border-transparent text-center focus:outline-none disabled:opacity-40",
         "rounded-[37.3px] focus:ring-2 focus:ring-offset-0",
         !left && !right && "justify-center",
         variant === "primary" &&