From 8456bd17207e349c717d062fcc6fe4d032da1334 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 22 Jun 2024 12:39:22 +0700
Subject: <iman> update bagian footer untuk penawaran(baru tampilan saja) all
 promotion

---
 .../components/elements/Footer/BasicFooter.jsx     |   3 +
 src/core/components/elements/Footer/PromoOffer.tsx | 112 +++++++++++++++++++++
 .../elements/Footer/style/promoOffer.module.css    |  39 +++++++
 3 files changed, 154 insertions(+)
 create mode 100644 src/core/components/elements/Footer/PromoOffer.tsx
 create mode 100644 src/core/components/elements/Footer/style/promoOffer.module.css

(limited to 'src')

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 6129143d..e1f95d6b 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -9,12 +9,14 @@ import Link from '../Link/Link';
 import MobileView from '../../views/MobileView';
 import DesktopView from '../../views/DesktopView';
 import whatsappUrl from '@/core/utils/whatsappUrl';
+import PromoOffer from '../Footer/PromoOffer'
 
 const BasicFooter = () => {
   return (
     <>
       <MobileView>
         <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'>
+          <PromoOffer/>
           <div className='w-1/2 flex flex-col gap-y-8 pr-2'>
             <div>
               <NextImage
@@ -54,6 +56,7 @@ const BasicFooter = () => {
 
       <DesktopView>
         <footer className='bg-gray_r-3 py-6'>
+          <PromoOffer/>
           <div className='container mx-auto flex flex-wrap justify-between'>
             <div className='w-4/12'>
               <NextImage
diff --git a/src/core/components/elements/Footer/PromoOffer.tsx b/src/core/components/elements/Footer/PromoOffer.tsx
new file mode 100644
index 00000000..a5432b6a
--- /dev/null
+++ b/src/core/components/elements/Footer/PromoOffer.tsx
@@ -0,0 +1,112 @@
+
+import React from "react";
+// import { useGeneralSetting } from "@/common/state-management/general-setting";
+import { FormEvent, useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import style from "../Footer/style/promoOffer.module.css"
+const PromoOffer = ()=>{
+    // const { data, isLoading, fetchData } = useGeneralSetting();
+    const [formData, setFormData] = useState<FormData>({
+        email: "",
+        name: "",
+        telephone: "",
+        message: "",
+      });
+
+      useEffect(() => {
+        // fetchData();
+      }, []);
+
+      type FormData = {
+        email: string;
+        name: string;
+        telephone: string;
+        message: string;
+      };
+
+      const [errors, setErrors] = useState({
+        email: false,
+        name: false,
+        message: false,
+      });
+
+
+const handleGetOffer = async (e: FormEvent) => {
+    e.preventDefault();
+    let loadingToast;
+    try {
+      loadingToast = toast.loading("Mengirimkan formulir...");
+      const response = await fetch("/api/contactus", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ ...formData, from: "newsletter" }),
+      });
+  
+      if (response.ok) {
+        toast.dismiss(loadingToast);
+        toast.success("Terima kasih telah menghubungi kami");
+        setFormData({
+          email: "",
+          name: "",
+          telephone: "",
+          message: "",
+        });
+      } else {
+        toast.dismiss(loadingToast);
+        toast.error("Gagal mengirimkan formulir. Silakan coba lagi nanti.");
+      }
+    } catch (error) {
+      toast.dismiss(loadingToast);
+      console.error("Gagal mengirimkan formulir", error);
+      toast.error("Terjadi kesalahan. Silakan coba lagi nanti.");
+    }
+  };
+
+  
+
+
+    return(
+        <div className=" py-3 mb-3">
+              <div className="md:flex container mx-auto md:justify-between md:items-center md:gap-x-20">
+                <div className="">
+                  <span className="text-black font-semibold text-sm md:text-lg">
+                    Dapatkan Promo Menarik Setiap Bulan{" "}
+                  </span>
+                  <p>
+                    Promo produk dengan penawaran terbatas setiap bulannya!
+                  </p>
+                </div>
+                <div className=" flex-1 flex items-center h-full  justify-end text-sm text-slate-950">
+                <form  onSubmit={handleGetOffer} className={style['form-input']}>
+                    <div className="flex justify-start  w-full">
+                        <div className="flex justify-end">
+                            <input  
+                                type="email"
+                                value={formData.email}
+                                onChange={(e) =>
+                                    setFormData({ ...formData, email: e.target.value })
+                                }
+                                className={style['input']}
+                                placeholder="Masukkan email anda disini"
+                            />
+                            <button
+                                type="submit"
+                                className={style['button']}
+                            >
+                                Dapatkan
+                            </button>
+                        </div>
+                        
+
+                    </div>
+                  </form>
+
+                </div>
+              </div>
+          </div>
+    )
+  };
+
+  export default PromoOffer;
diff --git a/src/core/components/elements/Footer/style/promoOffer.module.css b/src/core/components/elements/Footer/style/promoOffer.module.css
new file mode 100644
index 00000000..3184182d
--- /dev/null
+++ b/src/core/components/elements/Footer/style/promoOffer.module.css
@@ -0,0 +1,39 @@
+.form-input {
+    @apply 
+    h-full
+    w-[514px] 
+    text-slate-950 
+    flex
+    justify-center;
+}
+
+.input{
+    @apply w-[320px] 
+    sm:w-[320px]
+    md:w-[500px]
+    xl:w-[514px]
+    lg:w-[514px]
+    2xl:w-[514px]
+    text-black 
+    py-2
+    h-11
+    md:py-3 
+    px-4 
+    bg-[#FDF1C7]
+    rounded-3xl
+    focus:outline-none
+    ;
+}
+
+.button{
+    @apply bg-[#FAD147] 
+    absolute
+    py-1.5 
+    rounded-3xl
+    text-black 
+    md:py-2.5 
+    px-4
+    h-11
+    z-0
+    ;
+}
\ No newline at end of file
-- 
cgit v1.2.3