Merged in CR/widget_WA (pull request #17)

CR/widget WA

8 files changed, 187 insertions, 16 deletions

diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index e19d5f0a..16bccbd5 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import Link from '../Link/Link'
 import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
 import { useEffect, useState } from 'react'
-import { getCart } from '@/core/utils/cart'
+import { getCart, getCountCart } from '@/core/utils/cart'
 
 /**
  * The AppBar component is a navigation component used to display a header or toolbar
@@ -19,7 +19,11 @@ const AppBar = ({ title }) => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx
new file mode 100644
index 00000000..61503d17
--- /dev/null
+++ b/src/core/components/elements/CountDown/CountDown2.jsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+
+const CountDown2 = ({ initialTime }) => {
+  const hours = Math.floor(initialTime / 3600)
+  const minutes = Math.floor((initialTime % 3600) / 60)
+  const seconds = initialTime % 60
+
+  const [timeLeft, setTimeLeft] = useState({
+    hour: hours,
+    minute: minutes,
+    second: seconds
+  })
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const totalSeconds = timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
+      const secondsLeft = totalSeconds - 1
+      if (secondsLeft < 0) {
+        clearInterval(timer)
+      } else {
+        const hours = Math.floor(secondsLeft / 3600)
+        const minutes = Math.floor((secondsLeft % 3600) / 60)
+        const seconds = secondsLeft % 60
+        setTimeLeft({ hour: hours, minute: minutes, second: seconds })
+      }
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [timeLeft])
+
+  return (
+    <div className='flex justify-between gap-x-2'>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
+          {timeLeft.hour.toString().padStart(2, '0')}
+        </span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-200 border border-red-500 text-black  font-sm w-10 h-8 flex items-center justify-center rounded'>
+          {timeLeft.minute.toString().padStart(2, '0')}
+        </span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
+          {timeLeft.second.toString().padStart(2, '0')}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown2
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 26edd5a4..ea4b03ae 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -13,9 +13,13 @@ import Category from '@/lib/category/components/Category'
 import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
-import { getCart } from '@/core/utils/cart'
+import { getCountCart } from '@/core/utils/cart'
 import TopBanner from './TopBanner'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { useRouter } from 'next/router'
+import { getAuth } from '@/core/utils/auth'
+import { createSlug, getIdFromSlug } from '@/core/utils/slug'
+import productApi from '@/lib/product/api/productApi'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -25,13 +29,37 @@ const NavbarDesktop = () => {
 
   const [cartCount, setCartCount] = useState(0)
 
+  const [templateWA, setTemplateWA] = useState(null)
+  const [payloadWA, setPayloadWa] = useState(null)
+
+  const router = useRouter()
+
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
     window.addEventListener('localStorageChange', handleCartChange)
+    if (router.pathname === '/shop/product/[slug]') {
+      const authToken = getAuth().token
+
+      const { slug } = router.query
+      const getProduct = async () => {
+        let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
+        setPayloadWa({
+          name: product[0]?.name,
+          manufacture: product[0]?.manufacture.name,
+          url: createSlug('/shop/product/', product[0]?.name, product[0]?.id, true)
+        })
+      }
+      getProduct()
+      setTemplateWA('product')
+    }
 
     return () => {
       window.removeEventListener('localStorageChange', handleCartChange)
@@ -92,7 +120,7 @@ const NavbarDesktop = () => {
               Wishlist
             </Link>
             <a
-              href={whatsappUrl()}
+              href={whatsappUrl(templateWA, payloadWA)}
               target='_blank'
               rel='noreferrer'
               className='flex items-center gap-x-1 !text-gray_r-12/80'
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index b69e86e8..704e91b6 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -6,7 +6,7 @@ import useSidebar from '@/core/hooks/useSidebar'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import { useEffect, useState } from 'react'
-import { getCart } from '@/core/utils/cart'
+import { getCart, getCountCart } from '@/core/utils/cart'
 import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
@@ -18,7 +18,11 @@ const NavbarMobile = () => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 0f4088d4..829ff2a6 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -58,7 +58,7 @@ const BottomPopup = ({ children, active = false, title, close, className = '' })
                 className={`fixed left-1/2 -translate-x-1/2 translate-y-1/2 md:w-1/4 lg:w-1/3 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto ${className}`}
               >
                 <div className='flex justify-between py-4'>
-                  <div className='font-semibold text-h-sm'>{title}</div>
+                  <div className='font-semibold text-title-sm'>{title}</div>
                   {close && (
                     <button type='button' onClick={close}>
                       <XMarkIcon className='w-5 stroke-2' />
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 70482e12..073303fe 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -5,11 +5,21 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { useEffect, useState } from 'react'
 import axios from 'axios'
 import odooApi from '@/core/api/odooApi'
+import { useRouter } from 'next/router'
+import { getURL } from 'next/dist/shared/lib/utils'
+import productApi from '@/lib/product/api/productApi'
+import { getAuth } from '@/core/utils/auth'
+import { createSlug, getIdFromSlug } from '@/core/utils/slug'
 
 const Navbar = dynamic(() => import('../elements/Navbar/Navbar'))
 const AnimationLayout = dynamic(() => import('./AnimationLayout'))
 
 const BasicLayout = ({ children }) => {
+  const [templateWA, setTemplateWA] = useState(null)
+  const [payloadWA, setPayloadWa] = useState(null)
+
+  const router = useRouter()
+
   useEffect(() => {
     const getIP = async () => {
       const ip = await odooApi('GET', '/api/ip-address')
@@ -21,6 +31,23 @@ const BasicLayout = ({ children }) => {
       axios.get(`/api/user-activity?page_title=${data.page_title}&url=${data.url}&ip=${data.ip}`)
     }
     getIP()
+    if (router.pathname === '/shop/product/[slug]') {
+      const authToken = getAuth().token
+
+      const { slug } = router.query
+      const getProduct = async () => {
+        let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
+        console.log('ini product', product)
+        setPayloadWa({
+          name: product[0]?.name,
+          manufacture: product[0]?.manufacture.name,
+          url: createSlug('/shop/product/', product[0]?.name, product[0]?.id, true)
+        })
+      }
+      getProduct()
+      setTemplateWA('product')
+     
+    }
   }, [])
   return (
     <>
@@ -29,8 +56,10 @@ const BasicLayout = ({ children }) => {
         {children}
         <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
           <a
-            href={whatsappUrl(null)}
+            href={whatsappUrl(templateWA, payloadWA)}
             className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
+            rel='noopener noreferrer'
+            target='_blank'
           >
             <Image
               src='/images/socials/WHATSAPP.svg'
diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index d987cda7..16befdf7 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -1,3 +1,6 @@
+import odooApi from "../api/odooApi"
+import { getAuth } from "./auth"
+
 /**
  * Retrieves cart data from localStorage, if available.
  *
@@ -27,6 +30,49 @@ const setCart = (cart) => {
   return false
 }
 
+const addCart = async (product_id, qty, selected, programLineId = null) => {
+  const data = {
+    'product_id' : product_id,
+    'qty' : qty,
+    'selected' : selected,
+    'program_line_id' : programLineId
+  }
+
+  const id = getAuth()?.id
+  const cartAdd = await odooApi(
+    'POST',
+    `/api/v1/user/${id}/cart/create-or-update`,
+    data
+  )
+
+  return true
+  
+}
+
+const getCartApi = async () => {
+  const id = getAuth()?.id
+  const cart = await odooApi('GET', `/api/v1/user/${id}/cart`)
+
+  return cart
+}
+
+const getCountCart = async () => {
+  const id = getAuth()?.id
+  if(id){
+    const cart = await odooApi('GET', `/api/v1/user/${id}/cart/count`)
+    return cart
+  }
+  return
+}
+
+const deleteCart = async (product_id) => {
+  const id = getAuth()?.id
+  const cartDelete = await odooApi(
+    'DELETE',
+    `/api/v1/user/${id}/cart?product_ids=${product_id}`
+  )
+}
+
 /**
  * Retrieves an item from the cart data based on the given product ID.
  *
@@ -48,11 +94,12 @@ const getItemCart = ({ productId }) => {
  * @param {boolean} [options.selected=false] - The new selected status of the product in the cart. Default is `false`.
  * @returns {boolean} - Returns `true`.
  */
-const updateItemCart = ({ productId, quantity, selected = false }) => {
+const updateItemCart = async ({ productId, quantity, selected = false , programLineId}) => {
   let cart = getCart()
   quantity = parseInt(quantity)
   cart[productId] = { productId, quantity, selected }
   setCart(cart)
+  await addCart(productId, quantity, selected, programLineId)
   return true
 }
 
@@ -66,8 +113,9 @@ const updateItemCart = ({ productId, quantity, selected = false }) => {
 const deleteItemCart = ({ productId }) => {
   let cart = getCart()
   delete cart[productId]
+  deleteCart(productId)
   setCart(cart)
   return true
 }
 
-export { getCart, getItemCart, updateItemCart, deleteItemCart }
+export { getCart, getItemCart, updateItemCart, deleteItemCart, addCart, getCartApi, getCountCart}
diff --git a/src/core/utils/whatsappUrl.js b/src/core/utils/whatsappUrl.js
index 6ca9722b..81ea3463 100644
--- a/src/core/utils/whatsappUrl.js
+++ b/src/core/utils/whatsappUrl.js
@@ -1,20 +1,27 @@
+import { getAuth } from "./auth"
+
 const whatsappUrl = (template = 'default', payload) => {
+  let user = getAuth()
+  if(!user){
+    return '/login'
+  }
   let url = 'https://wa.me/628128080622'
-  let text = ''
+  let text = 'Hallo Indoteknik.com,'
   switch (template) {
     case 'product':
-      text = `Halo, saya mau tanya ${payload.name}, bisa tolong bantu saya?\n\nBerikut ini linknya: ${payload.url}`
+      text += `  Saya ${user.name} , Saya dari ${user.parentName} Saya mencari barang dibawah ini\n\n: Brand = ${payload?.manufacture}\n\n Item Name = ${payload?.name}\n\nLink : ${payload?.url}`
       break
     case 'productWeight':
-      text = `Mau tanya untuk berat ${payload.name}, bisa minta tolong informasikan beratnya?\n\nBerikut ini linknya: ${payload.url}`
+      text += `  Saya ${user.name} , Saya dari ${user.parentName} Saya mencari barang dibawah ini\n\n: Brand = ${payload?.manufacture}\n\n Item Name = ${payload?.name}\n\nLink : ${payload?.url}`
       break
     case 'productSearch':
-      text = `Saya lagi cari-cari produk ${payload.name}, bisa bantu saya cari produknya?`
+      text += `Saya lagi cari-cari produk ${payload?.name}, bisa bantu saya cari produknya?`
       break
     case null:
+      text += `Saya ${user.name}, Saya dari ${user.parentName} Bisa tolong bantu kebutuhan saya?`
       break;
     default:
-      text = 'Halo, saya mau tanya-tanya seputar produk, bisa tolong bantu saya?'
+      text += `Saya ${user.name}, Saya dari ${user.parentName} Bisa tolong bantu kebutuhan saya?`
       break
   }
   if (text) url += `?text=${encodeURI(text)}`