fix: email submission clean up

AtomiCloud · Dec 29, 2024 · 53441c9 · 53441c9
1 parent cd66734
commit 53441c9
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 15 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -6,6 +6,8 @@ import react from '@astrojs/react';
 
 import cloudflare from '@astrojs/cloudflare';
 
+import icon from 'astro-icon';
+
 export default defineConfig({
   env: {
     schema: {
@@ -18,6 +20,7 @@ export default defineConfig({
       applyBaseStyles: false,
     }),
     react(),
+    icon(),
   ],
 
   adapter: cloudflare({

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -13,13 +13,15 @@
     "@astrojs/cloudflare": "^12.1.0",
     "@astrojs/react": "^4.1.2",
     "@astrojs/tailwind": "^5.1.4",
+    "@iconify-json/mdi": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@tabler/icons-react": "^3.26.0",
     "@types/canvas-confetti": "^1.9.0",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "astro": "^5.1.1",
+    "astro-icon": "^1.1.5",
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -22,18 +22,44 @@ export const server = {
           listIds: [5],
         }),
       };
-
-      const r = await fetch('https://api.brevo.com/v3/contacts', options);
-
-      if (!r.ok) {
-        console.error(r.statusText);
-        console.error(r.status);
-        console.error(r.url);
+      let r;
+      try {
+        r = await fetch('https://api.brevo.com/v3/contacts', options);
+      } catch (error) {
+        console.error('caught error', error);
         throw new ActionError({
           message: 'Something went wrong while adding you to the waitlist 😢',
-          statusCode: 'INTERNAL_SERVER_ERROR',
+          code: 'INTERNAL_SERVER_ERROR',
         });
       }
+
+      const body = await r.text();
+      if (!r.ok) {
+        // Check if the response is a JSON object
+        let response;
+        try {
+          response = JSON.parse(body);
+        } catch (error) {
+          console.error('caught error', error);
+          throw new ActionError({
+            message: 'Something went wrong while adding you to the waitlist 😢',
+            code: 'BAD_REQUEST',
+          });
+        }
+        console.error(response);
+        if (response.code && response.code == 'duplicate_parameter') {
+          throw new ActionError({
+            message: 'You are already on the waitlist!',
+            code: 'CONFLICT',
+          });
+        } else {
+          throw new ActionError({
+            message: 'Something went wrong while adding you to the waitlist 😢',
+            code: 'BAD_REQUEST',
+          });
+        }
+      }
+      console.log('Success', r.ok);
       return email;
     },
   }),

diff --git a/src/components/index/Waitlist.astro b/src/components/index/Waitlist.astro
@@ -1,13 +1,19 @@
 ---
 import PulsatingButton from "../ui/pulsating-button";
 import {Input} from "../ui/input";
+import { Icon } from 'astro-icon/components'
 ---
 
 <div class="flex flex-col gap-2">
     <Input id="email" className="text-center text-md" type="email" placeholder="Enter your email"/>
     <p id="error" class="text-xs text-red-500 text-center py-0"></p>
 </div>
-<PulsatingButton id="reserve" className="text-md">Reserve your Spot</PulsatingButton>
+<PulsatingButton id="reserve" >
+    <div class="text-md flex justify-center items-center gap-4">
+        <Icon name="mdi:loading" class="text-lg hidden animate-spin"/>
+        Reserve your Spot
+    </div>
+</PulsatingButton>
 <script>
     import z from "zod";
     import {actions} from 'astro:actions';
@@ -46,6 +52,7 @@ import {Input} from "../ui/input";
     const join = document.getElementById('reserve') as HTMLButtonElement;
     const emailInput = document.getElementById('email') as HTMLInputElement;
     const errorBox = document.getElementById('error') as HTMLDivElement;
+    const loader = document.querySelector('#reserve svg.animate-spin') as HTMLDivElement;
 
     function emailValidator(email: string): string[] {
 
@@ -76,15 +83,25 @@ import {Input} from "../ui/input";
             toast.error(errors[0]);
             return;
         }
-        const {error} = await actions.submitWaitlistEmail({email});
-        emailInput!.value = '';
-        if (!error) {
-            fireworksClick();
-            toast.success('You have been added to the waitlist  🎉');
-        } else {
+        loader.classList.remove('hidden');
+        try {
+            const {error} = await actions.submitWaitlistEmail({email});
+            emailInput!.value = '';
+            if (!error) {
+                fireworksClick();
+                toast.success('You have been added to the waitlist  🎉');
+            } else {
+                errorBox.innerHTML = error.message;
+                toast.error(error.message);
+            }
+            loader.classList.add('hidden');
+        } catch (error) {
+            loader.classList.add('hidden');
+            console.error("caught error",error);
             errorBox.innerHTML = error.message;
             toast.error('Something went wrong while adding you to the waitlist 😢');
         }
 
+
     });
 </script>