[FEATURE][86drmx95g] Send email when someone subscribes to EO

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

apps/eo_web/src/components/EOInYourInbox.tsx

@@ -1,8 +1,19 @@
 import { Button, Typography } from '@eo/ui'
 import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { subscribeToEoEmailPost } from '~/api/email'
+import { toast } from 'react-toastify'
 
 export const EOInYourInbox = () => {
   const [submitted, setSubmitted] = useState(false)
+  const [email, setEmail] = useState('')
+
+  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]">
       <div className="flex flex-col items-center">
@@ -17,15 +28,22 @@ 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) => {
+              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..."
+              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 +53,6 @@ export const EOInYourInbox = () => {
             </div>
           )}
       </div>
-    </section>
+    </section >
   )
 }

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

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

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:opacity-40",
         "rounded-[37.3px] focus:ring-2 focus:ring-offset-0",
         !left && !right && "justify-center",
         variant === "primary" &&