nshop-front-m/src/components/layout/footer/SubscribeNewsletter.tsx

"use client";

import Link from "next/link";
import { useForm, type FieldErrors } from "react-hook-form";
import { SUBSCRIBE_TO_NEWSLETTER } from "@/graphql/theme/mutations";
import { useApolloClient } from "@apollo/client/react";
import { useCustomToast } from "@utils/hooks/useToast";
import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
import { EMAIL_REGEX } from "@utils/constants";

type FormValues = {
  email: string;
  isAgree: boolean;
};

export default function SubscribeNewsletter() {
    const apolloClient = useApolloClient();
    const { showToast } = useCustomToast();
    const {
        register,
        handleSubmit,
        formState: { errors }
    } = useForm<FormValues>({
        mode: "onChange",
        reValidateMode: "onChange", 
        defaultValues: {
            email: '',
            isAgree: true
        }
    });

    const onSubmit = async (data: FormValues) => {
        overlayLoading.start();
        apolloClient.mutate({
            mutation: SUBSCRIBE_TO_NEWSLETTER,
            variables: {
                input: {
                    customerEmail: data.email
                }
            }
        }).then((res) => {
            overlayLoading.stop();
            const resData = res.data?.createNewsletter?.newsletter;
            let success = true;
            let msg = "";
            if(resData) {
                success = resData.success;
                msg = resData.message;
                
            } else {
                success = false;
                msg = 'Fail to subscribe!';
            }

            if(success) {
                showToast(msg, 'success');
            } else {
                showToast(msg, 'danger');
            }
        }).catch((err) => {
            overlayLoading.stop();
            showToast(err.message, "danger");
        });

    };

    const onInvalid = (errors: FieldErrors<FormValues>) => {
        const msg = errors.isAgree?.message
        if (msg) {
            showToast(msg,"warning");
        }
    };

    return (<>
        <div className="text-ly-16 text-[#FFDBA3] font-bold">Get the latest News Posted</div>
        <form className="w-full mt-6" onSubmit={handleSubmit(onSubmit,onInvalid)}>
            <div className="w-full h-11 bg-white">
                <input type="text" className="block w-full h-full border-1 px-3 text-ly-14 placeholder:text-[#d3d3d3]" 
                    placeholder="Email Address" 
                    {...register('email', {
                        required: "Email is required",
                        pattern: {
                            value: EMAIL_REGEX,
                            message: "Enter a valid email",
                        },
                    })}
                />
            </div>
            {errors.email && <p className="text-red-500 text-ly-12">{errors.email.message}</p>}

            <button className="flex justify-center items-center mt-4 w-full h-12 rounded-lg bg-white text-ly-16 text-ly-middlegreen font-bold" type="submit">
                Subscribe Now
            </button>
            <label className="w-full mt-3 flex items-start" htmlFor="footer_subscribe_is_agree">
                <div className="group block relative w-4 h-4 mt-1 mr-2">
                    <input type="checkbox" className="absolute w-full h-full top-0 left-0 opacity-0" id="footer_subscribe_is_agree"
                        {...register("isAgree", {
                            required: "Please agree to the Terms & Conditions and Privacy Policy."
                        })}
                    />
                    <svg className="icon-check hidden group-has-[:checked]:block" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17" fill="none">
                        <rect  x="0.5" y="0.5" width="16" height="16" rx="1"    fill="#FFFFFF" ></rect>
                        <path   fill="rgba(0, 0, 0, 1)"  d="M1.5 0L15.5 0C16.3284 0 17 0.671573 17 1.5L17 15.5C17 16.3284 16.3284 17 15.5 17L1.5 17C0.671573 17 0 16.3284 0 15.5L0 1.5C0 0.671573 0.671573 0 1.5 0ZM1.5 1C1.22386 1 1 1.22386 1 1.5L1 15.5C1 15.7761 1.22386 16 1.5 16L15.5 16C15.7761 16 16 15.7761 16 15.5L16 1.5C16 1.22386 15.7761 1 15.5 1L1.5 1Z"></path>
                        <path d="M13.78 5.84263L7.78033 12.1324C7.48744 12.4394 7.01256 12.4394 6.71967 12.1324L3.71967 8.9873L3.71953 8.98715C3.58389 8.84488 3.5 8.64837 3.5 8.43132C3.5 8.21427 3.58389 8.01777 3.71953 7.8755L3.71967 7.87535C3.75449 7.83885 3.79236 7.80626 3.8333 7.77758C3.87424 7.7489 3.91745 7.72469 3.96294 7.70493C4.00843 7.68517 4.05532 7.67026 4.10361 7.66019C4.1519 7.65011 4.20067 7.64507 4.2499 7.64506C4.29914 7.64505 4.34791 7.65008 4.3962 7.66014C4.44449 7.6702 4.49139 7.6851 4.53688 7.70485C4.58237 7.7246 4.62559 7.7488 4.66654 7.77747C4.70748 7.80613 4.74537 7.83871 4.78019 7.8752L4.78033 7.87535L7.25 10.4644L12.7193 4.73068L12.7197 4.73029C12.79 4.65657 12.8711 4.59975 12.963 4.55985C13.0549 4.51995 13.1505 4.5 13.25 4.5C13.4571 4.5 13.6446 4.58801 13.7803 4.73029C13.916 4.87258 14 5.06914 14 5.28626C14 5.50339 13.916 5.69995 13.7803 5.84224L13.78 5.84263Z"   fill="#000000" ></path>
                    </svg>
                    <svg className="icon-uncheck block group-has-[:checked]:hidden" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17" fill="none">
                        <rect  x="0.5" y="0.5" width="16" height="16" rx="1"    fill="#FFFFFF" ></rect>
                        <path   fill="rgba(0, 0, 0, 1)"  d="M1.5 0L15.5 0C16.3284 0 17 0.671573 17 1.5L17 15.5C17 16.3284 16.3284 17 15.5 17L1.5 17C0.671573 17 0 16.3284 0 15.5L0 1.5C0 0.671573 0.671573 0 1.5 0ZM1.5 1C1.22386 1 1 1.22386 1 1.5L1 15.5C1 15.7761 1.22386 16 1.5 16L15.5 16C15.7761 16 16 15.7761 16 15.5L16 1.5C16 1.22386 15.7761 1 15.5 1L1.5 1Z"></path>
                    </svg>
                </div>
                <p className="text-ly-12 leading-5 text-white">
                    I agree to the 
                    <Link className="underline" href="/privacy-policy">Privacy Policy</Link> 
                    and 
                    <Link className="underline" href="/terms-conditions">Terms & Conditions</Link>.
                    And consent to receive marketing messages via email and phone number. Unsubscribe anytime.
                </p>
            </label>
        </form>
  
    </>);
   
};