From 64e0862ee37b29709db46986dc82ee6726f5e56f Mon Sep 17 00:00:00 2001
From: oleeh-shd <oleehshd@gmail.com>
Date: Mon, 14 Aug 2023 14:05:48 +0300
Subject: [PATCH 1/4] create new mutation to save user credentials

---
 app/home-page.tsx              | 65 ++++++++++++++++++++++++----------
 components/Home/Modal.tsx      |  2 +-
 components/Home/Newsletter.tsx | 34 +++++++++---------
 lib/subscribeUser.ts           | 23 ++++++++++++
 types.d.ts                     |  5 +++
 5 files changed, 94 insertions(+), 35 deletions(-)
 create mode 100644 lib/subscribeUser.ts

diff --git a/app/home-page.tsx b/app/home-page.tsx
index cabf794..76a2841 100644
--- a/app/home-page.tsx
+++ b/app/home-page.tsx
@@ -12,6 +12,10 @@ import Newsletter from "../components/Home/Newsletter";
 import Chapters from "../components/Home/Chapters";
 import NotificationBanner from "../components/Shared/NotificationBanner";
 import Image from "next/image";
+import { useTheme } from "next-themes";
+import { subscribeUser } from "../lib/subscribeUser";
+
+export type SubscribeMessage = { isSuccess: boolean; message: string };
 
 interface Props extends ChaptersProps {
   notification: { name: string; message: string; status: string };
@@ -19,6 +23,7 @@ interface Props extends ChaptersProps {
 
 function HomePage({ chapters, notification }: Props) {
   const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const { theme } = useTheme();
 
   const pathName = usePathname();
   const [cookies, setCookie, removeCookie] = useCookies(["access_token"]);
@@ -30,16 +35,32 @@ function HomePage({ chapters, notification }: Props) {
       setCookie("access_token", access_token[1]);
     }
   }, [pathName, setCookie]);
-  function handleSubscribe(
+
+  async function handleSubscribe(
     e: FormEvent<HTMLFormElement>,
-    formData: NewsletterFormData
-  ): boolean {
+    { name, email }: NewsletterFormData
+  ): Promise<SubscribeMessage> {
     e.preventDefault();
-    if (formData.name && formData.email) {
-      // todo call newsletter subscribe API
-      setModalVisible(true);
-      return true;
-    } else return false;
+    if (name && email) {
+      try {
+        await subscribeUser(name, email);
+
+        setModalVisible(true);
+        return {
+          isSuccess: true,
+          message: "",
+        };
+      } catch (error) {
+        return {
+          isSuccess: false,
+          message: "ERROR: Email already exists",
+        };
+      }
+    } else
+      return {
+        isSuccess: false,
+        message: "ERROR: Name or Email Cannot be Empty",
+      };
   }
 
   return (
@@ -52,16 +73,24 @@ function HomePage({ chapters, notification }: Props) {
           />
           <div className="relative">
             <Banner />
-            <div className="absolute top-[204px] z-0 w-full h-[460px]">
-              <Image src="/main-background.png" alt="background image" fill />
-            </div>
-            <Image
-              src="/flower.svg"
-              alt="flower"
-              width={365}
-              height={150}
-              className="absolute top-[54%] left-[50%] -translate-x-2/4"
-            />
+            {theme === "light" && (
+              <>
+                <div className="absolute top-[204px] z-0 w-full h-[460px]">
+                  <Image
+                    src="/main-background.png"
+                    alt="background image"
+                    fill
+                  />
+                </div>
+                <Image
+                  src="/flower.svg"
+                  alt="flower"
+                  width={365}
+                  height={150}
+                  className="absolute top-[54%] left-[50%] -translate-x-2/4"
+                />
+              </>
+            )}
             <VerseOfDay />
           </div>
 
diff --git a/components/Home/Modal.tsx b/components/Home/Modal.tsx
index 619e22a..8e32dfb 100644
--- a/components/Home/Modal.tsx
+++ b/components/Home/Modal.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 function Modal({ modalVisible, setModalVisible }: Props) {
   return (
-    <div className={` ${!modalVisible && "hidden"}`}>
+    <div className={`relative z-50 ${!modalVisible && "hidden"}`}>
       <div
         className="fixed z-10 inset-0 overflow-y-auto"
         aria-labelledby="modal-title"
diff --git a/components/Home/Newsletter.tsx b/components/Home/Newsletter.tsx
index 342b025..523b60d 100644
--- a/components/Home/Newsletter.tsx
+++ b/components/Home/Newsletter.tsx
@@ -1,11 +1,12 @@
 import { FormEvent, useState } from "react";
 import Image from "next/image";
+import { SubscribeMessage } from "../../app/home-page";
 
 interface Props {
   handleSubscribe: (
     e: FormEvent<HTMLFormElement>,
     formData: NewsletterFormData
-  ) => boolean;
+  ) => Promise<SubscribeMessage>;
 }
 
 const Newsletter = ({ handleSubscribe }: Props) => {
@@ -14,6 +15,19 @@ const Newsletter = ({ handleSubscribe }: Props) => {
     email: "",
   });
   const [isValid, setIsValid] = useState<boolean>(true);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const onSubmit = async (e) => {
+    const { isSuccess, message } = await handleSubscribe(e, formData);
+    if (isSuccess) {
+      setFormData({ name: "", email: "" });
+      setIsValid(true);
+      setErrorMessage("");
+    } else {
+      setIsValid(false);
+      setErrorMessage(message);
+    }
+  };
 
   return (
     <div className="mt-14 relative z-0">
@@ -32,17 +46,7 @@ const Newsletter = ({ handleSubscribe }: Props) => {
           <h1 className="text-4xl text-black font-bold mb-8 z-50">
             Have the Shloka of the Day delivered to your inbox each morning.
           </h1>
-          <form
-            className="flex flex-col md:flex-row"
-            onSubmit={(e) => {
-              if (handleSubscribe(e, formData)) {
-                setFormData({ name: "", email: "" });
-                setIsValid(true);
-              } else {
-                setIsValid(false);
-              }
-            }}
-          >
+          <form className="flex flex-col md:flex-row" onSubmit={onSubmit}>
             <input
               className="appearance-none z-50 mt-4 md:mt-0 border rounded-md w-full py-3 mr-6 px-3 text-gray-700 leading-tight focus:outline-none focus:border-my-orange dark:bg-white"
               id="name"
@@ -81,10 +85,8 @@ const Newsletter = ({ handleSubscribe }: Props) => {
             </button>
           </form>
           {!isValid && (
-            <div className="text-lg text-black-900 mt-4">
-              <p className="font-bold mr-20 mt-12">
-                ERROR: Name or Email Cannot be Empty
-              </p>
+            <div className="text-lg text-red-400 mt-4">
+              <p className="font-bold mr-20 mt-12">{errorMessage}</p>
             </div>
           )}
         </div>
diff --git a/lib/subscribeUser.ts b/lib/subscribeUser.ts
new file mode 100644
index 0000000..9143480
--- /dev/null
+++ b/lib/subscribeUser.ts
@@ -0,0 +1,23 @@
+import { gql } from "@apollo/client";
+import apolloClient from "./apolloClient";
+
+export const subscribeUser = async (
+  name: string,
+  email: string
+): Promise<void> => {
+  await apolloClient.mutate({
+    mutation: gql`
+      mutation MyMutation {
+        insert_newsletter_subscriptions_one(
+          object: {
+              user_name: "${name}"
+              user_email: "${email}"
+          }
+        ) {
+          user_name
+          user_email
+        }
+      }
+    `,
+  });
+};
diff --git a/types.d.ts b/types.d.ts
index e9960cc..364fb1b 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -77,3 +77,8 @@ type CurrentVerse = Omit<GitaVerse, "word_meanings" | "text">;
 interface SvgProps {
   className: string;
 }
+
+type SubscriptionCredentials = {
+  user_name: string;
+  user_email: string;
+};

From 0a755f287bb2059f398071b86ed744beacf8cf39 Mon Sep 17 00:00:00 2001
From: oleeh-shd <oleehshd@gmail.com>
Date: Mon, 14 Aug 2023 14:08:45 +0300
Subject: [PATCH 2/4] minor fix

---
 types.d.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/types.d.ts b/types.d.ts
index 364fb1b..e9960cc 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -77,8 +77,3 @@ type CurrentVerse = Omit<GitaVerse, "word_meanings" | "text">;
 interface SvgProps {
   className: string;
 }
-
-type SubscriptionCredentials = {
-  user_name: string;
-  user_email: string;
-};

From 24d86f70c7fc1736bc3f1ca9e1f26da4807cca69 Mon Sep 17 00:00:00 2001
From: oleeh-shd <oleehshd@gmail.com>
Date: Mon, 14 Aug 2023 14:52:13 +0300
Subject: [PATCH 3/4] change text and aligned modal

---
 app/home-page.tsx         | 2 +-
 components/Home/Modal.tsx | 7 ++++---
 layouts/HomeLayout.tsx    | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/home-page.tsx b/app/home-page.tsx
index 76a2841..7eabcd0 100644
--- a/app/home-page.tsx
+++ b/app/home-page.tsx
@@ -68,7 +68,7 @@ function HomePage({ chapters, notification }: Props) {
       <main>
         <HomeLayout>
           <Modal
-            modalVisible={modalVisible}
+            modalVisible={!modalVisible}
             setModalVisible={setModalVisible}
           />
           <div className="relative">
diff --git a/components/Home/Modal.tsx b/components/Home/Modal.tsx
index 8e32dfb..3885d35 100644
--- a/components/Home/Modal.tsx
+++ b/components/Home/Modal.tsx
@@ -14,7 +14,7 @@ function Modal({ modalVisible, setModalVisible }: Props) {
         x-ref="dialog"
         aria-modal="true"
       >
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <div
             className="fixed inset-0 bg-gray-500 dark:bg-dark-bg opacity-75 transition-opacity"
             aria-hidden="true"
@@ -51,11 +51,12 @@ function Modal({ modalVisible, setModalVisible }: Props) {
                   className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200"
                   id="modal-title"
                 >
-                  Subcribe successful
+                  Subscription Successful!
                 </h3>
                 <div className="mt-2">
                   <p className="text-sm text-gray-500 dark:text-gray-300">
-                    You have successfully subcribe to daily Shloka of the Day
+                    Congratulations! You have now subscribed to the daily
+                    &quot;Shloka of the Day&quot; newsletter.
                   </p>
                 </div>
               </div>
diff --git a/layouts/HomeLayout.tsx b/layouts/HomeLayout.tsx
index 0db8e60..b9d8649 100644
--- a/layouts/HomeLayout.tsx
+++ b/layouts/HomeLayout.tsx
@@ -6,7 +6,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => {
   return (
     <div className="dark:bg-dark-bg min-h-screen flex flex-col">
       <IndexHeader />
-      <div className="pt-24 lg:pt-[90px] flex-1">{children}</div>
+      <div className="pt-[84px] lg:pt-[90px] flex-1">{children}</div>
       <Footer />
     </div>
   );

From ad573b1d1ce20762e597c254c015593c5ef20c57 Mon Sep 17 00:00:00 2001
From: oleeh-shd <oleehshd@gmail.com>
Date: Mon, 14 Aug 2023 14:54:47 +0300
Subject: [PATCH 4/4] minor fix

---
 app/home-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/home-page.tsx b/app/home-page.tsx
index 7eabcd0..76a2841 100644
--- a/app/home-page.tsx
+++ b/app/home-page.tsx
@@ -68,7 +68,7 @@ function HomePage({ chapters, notification }: Props) {
       <main>
         <HomeLayout>
           <Modal
-            modalVisible={!modalVisible}
+            modalVisible={modalVisible}
             setModalVisible={setModalVisible}
           />
           <div className="relative">