Merge pull request #186 from gita/newsletter-subscription

Newsletter subscription

app/home-page.tsx

@@ -12,13 +12,18 @@ 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 };
 }
 
 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>
 

components/Home/Modal.tsx

@@ -7,14 +7,14 @@ 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"
         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>

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>

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>
   );

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