Merged in Feature/all-promotion (pull request #202)

Feature/all promotion

Approved-by: trisusilo

5 files changed, 203 insertions, 14 deletions

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
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 9de761a2..7d9e4264 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -27,6 +27,7 @@ import {
   MenuList,
   useDisclosure,
 } from '@chakra-ui/react';
+import style from "./style/NavbarDesktop.module.css";
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
 const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
@@ -203,45 +204,65 @@ const NavbarDesktop = () => {
               </div>
             </button>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
+            <Link
+                href="/shop/promo"
+                className={`${
+                  router.asPath === '/shop/promo' && 'bg-gray_r-3'
+                }  flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
+                target="_blank"
+                rel="noreferrer"
+              >
+                <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
+                {/* <div className='w-full h-full flex justify-end items-start'> 
+                  <Image
+                    src='/images/ICON PROMO DISKON.svg'
+                    alt='promo'
+                    width={100}
+                    height={100}
+                    quality={100}
+                    className={`inline-block  z-20`}
+                  />
+                </div> */}
+              </Link>
+
+
               <Link
                 href='/shop/brands'
-                className={`${
+                className={`${  
                   router.asPath === '/shop/brands' && 'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
-                Semua Brand
+               <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p>
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
                 className={`${
                   router.asPath === '/shop/search?orderBy=stock' &&
                   'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
-                Ready Stock
+                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p>
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                Blog Indoteknik
+                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p>
               </Link>
-              <Link
+              {/* <Link
                 href='/video'
-                className={`${
-                  router.asPath === '/video' && 'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
+                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
                 target='_blank'
                 rel='noreferrer'
               >
                 Indoteknik TV
-              </Link>
+              </Link> */}
             </div>
 
             <div className='w-3/12 flex gap-x-1 relative'>
diff --git a/src/core/components/elements/Navbar/style/NavbarDesktop.module.css b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css
new file mode 100644
index 00000000..9cddb127
--- /dev/null
+++ b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css
@@ -0,0 +1,14 @@
+/* navbarDesktop.module.css */
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.blink {
+  animation: blink 0.8s infinite;
+}
+
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 38fcdef8..55838890 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -117,6 +117,9 @@ const Sidebar = ({ active, close }) => {
                     </>
                   )}
                 </div>
+                <SidebarLink className={itemClassName} href='/shop/promo'>
+                  Semua Promo
+                </SidebarLink>
                 <SidebarLink className={itemClassName} href='/shop/brands'>
                   Semua Brand
                 </SidebarLink>
@@ -128,9 +131,9 @@ const Sidebar = ({ active, close }) => {
                 >
                   Blog Indoteknik
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href='/video'>
+                {/* <SidebarLink className={itemClassName} href='/video'>
                   Indoteknik TV
-                </SidebarLink>
+                </SidebarLink> */}
                 <SidebarLink className={itemClassName} href='/tentang-kami'>
                   Tentang Indoteknik
                 </SidebarLink>