whatsapp url

14 files changed, 121 insertions, 28 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 325d7d7b..d340ff3e 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -8,6 +8,7 @@ import {
 import Link from '../Link/Link'
 import MobileView from '../../views/MobileView'
 import DesktopView from '../../views/DesktopView'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const BasicFooter = () => {
   return (
@@ -190,7 +191,7 @@ const InformationCenter = () => (
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
         <DevicePhoneMobileIcon className='w-[18px] mr-2' />
-        <a href='https://wa.me/628128080622' target='_blank' rel='noreferrer'>
+        <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
           0812-8080-622
         </a>
       </li>
diff --git a/src/core/components/elements/Footer/SimpleFooter.jsx b/src/core/components/elements/Footer/SimpleFooter.jsx
index 41ca6094..343f041d 100644
--- a/src/core/components/elements/Footer/SimpleFooter.jsx
+++ b/src/core/components/elements/Footer/SimpleFooter.jsx
@@ -20,7 +20,7 @@ const SimpleFooter = () => (
         </li>
         <li className='text-gray_r-12/80 flex items-center'>
           <DevicePhoneMobileIcon className='w-[18px] mr-2' />
-          <a href='https://wa.me/628128080622' target='_blank' rel='noreferrer'>
+          <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
             0812-8080-622
           </a>
         </li>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 43407fab..3da0035a 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -15,6 +15,7 @@ import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCart } from '@/core/utils/cart'
 import TopBanner from './TopBanner'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -89,7 +90,7 @@ const NavbarDesktop = () => {
               Wishlist
             </Link>
             <a
-              href='https://wa.me/628128080622'
+              href={whatsappUrl()}
               target='_blank'
               rel='noreferrer'
               className='flex items-center gap-x-1 !text-gray_r-12/80'
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 8f45d947..ae4c3eaa 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic'
 import BasicFooter from '../elements/Footer/BasicFooter'
 import Image from 'next/image'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const Navbar = dynamic(() => import('../elements/Navbar/Navbar'))
 const AnimationLayout = dynamic(() => import('./AnimationLayout'))
@@ -12,7 +13,10 @@ const BasicLayout = ({ children }) => {
       <AnimationLayout>
         {children}
         <div className='fixed bottom-4 right-4 sm:bottom-10 sm:right-8 z-50'>
-          <a href='https://wa.me/628128080622' className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'>
+          <a
+            href={whatsappUrl()}
+            className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
+          >
             <Image
               src='/images/socials/WHATSAPP.svg'
               alt='Whatsapp'
diff --git a/src/core/utils/slug.js b/src/core/utils/slug.js
index d5eecd3e..e91bcf83 100644
--- a/src/core/utils/slug.js
+++ b/src/core/utils/slug.js
@@ -9,7 +9,7 @@ import toTitleCase from './toTitleCase'
  * @param {number} id - The ID to be appended to the slug.
  * @returns {string} - The generated slug with the prefix, name, and ID.
  */
-const createSlug = (prefix, name, id) => {
+const createSlug = (prefix, name, id, withHost = false) => {
   let slug =
     name
       ?.trim()
@@ -19,7 +19,9 @@ const createSlug = (prefix, name, id) => {
     id
   let splitSlug = slug.split('-')
   let filterSlugFromEmptyChar = splitSlug.filter((x) => x != '')
-  return prefix + filterSlugFromEmptyChar.join('-')
+  slug = prefix + filterSlugFromEmptyChar.join('-')
+  if (withHost) slug = process.env.NEXT_PUBLIC_SELF_HOST + slug
+  return slug
 }
 
 /**
diff --git a/src/core/utils/whatsappUrl.js b/src/core/utils/whatsappUrl.js
new file mode 100644
index 00000000..696e01d8
--- /dev/null
+++ b/src/core/utils/whatsappUrl.js
@@ -0,0 +1,22 @@
+const whatsappUrl = (template = 'default', payload) => {
+  let url = 'https://wa.me/628128080622'
+  let text = ''
+  switch (template) {
+    case 'product':
+      text = `Halo, saya mau tanya ${payload.name}, bisa tolong bantu saya?\n\nBerikut ini linknya: ${payload.url}`
+      break
+    case 'productWeight':
+      text = `Mau tanya untuk berat ${payload.name}, bisa minta tolong informasikan beratnya?\n\nBerikut ini linknya: ${payload.url}`
+      break
+    case 'productSearch':
+      text = `Saya lagi cari-cari produk ${payload.name}, bisa bantu saya cari produknya?`
+      break
+    default:
+      text = 'Halo, saya mau tanya-tanya seputar produk, bisa tolong bantu saya?'
+      break
+  }
+  if (text) url += `?text=${encodeURI(text)}`
+  return url
+}
+
+export default whatsappUrl
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 3a61e9be..1008bffc 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -16,6 +16,7 @@ import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import ProductCard from '@/lib/product/components/ProductCard'
 import productSearchApi from '@/lib/product/api/productSearchApi'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const Cart = () => {
   const router = useRouter()
@@ -429,7 +430,7 @@ const Cart = () => {
                 Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran!
                 <span>
                   {' '}
-                  <a href='https://wa.me/628128080622' className='text-danger-500'>
+                  <a href={whatsappUrl()} className='text-danger-500'>
                     Hubungi Kami
                   </a>
                 </span>
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 0a8b072a..dc3908db 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -19,6 +19,8 @@ import axios from 'axios'
 import Image from '@/core/components/elements/Image/Image'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { createSlug } from '@/core/utils/slug'
 
 const Checkout = () => {
   const router = useRouter()
@@ -251,7 +253,7 @@ const Checkout = () => {
           <div className='px-4 mb-4'>
             <span className='text-danger-500'>
               *) Terdapat produk yang belum memiliki harga,{' '}
-              <a href='https://wa.me/628128080622' className='underline'>
+              <a href={whatsappUrl()} className='underline'>
                 Hubungi Kami untuk meminta harga.
               </a>
             </span>
@@ -330,7 +332,13 @@ const Checkout = () => {
                           {product.price.priceDiscount > 0 ? (
                             currencyFormat(product?.price?.priceDiscount * product?.quantity)
                           ) : (
-                            <a href='https://wa.me/628128080622' className='underline'>
+                            <a
+                              href={whatsappUrl('product', {
+                                name: product.name,
+                                url: createSlug('/shop/product/', product.name, product.id, true)
+                              })}
+                              className='underline'
+                            >
                               Call For Price{' '}
                             </a>
                           )}
@@ -423,7 +431,7 @@ const Checkout = () => {
                 <div className='mt-4'>
                   <span className='text-danger-500'>
                     *) Terdapat produk yang belum memiliki harga,{' '}
-                    <a href='https://wa.me/628128080622' className='underline'>
+                    <a href={whatsappUrl()} className='underline'>
                       Hubungi Kami untuk meminta harga.
                     </a>
                   </span>
diff --git a/src/lib/checkout/email/FinishCheckoutEmail.jsx b/src/lib/checkout/email/FinishCheckoutEmail.jsx
index e8f63afa..d40ce7d4 100644
--- a/src/lib/checkout/email/FinishCheckoutEmail.jsx
+++ b/src/lib/checkout/email/FinishCheckoutEmail.jsx
@@ -1,5 +1,6 @@
 import currencyFormat from '@/core/utils/currencyFormat'
 import toTitleCase from '@/core/utils/toTitleCase'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 import {
   Body,
   Column,
@@ -255,7 +256,7 @@ const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => {
                 Jika ada pertanyaan seputar teknis pembayaran {transaction.address.customer.name}{' '}
                 dapat hubungi kami melalui Email{' '}
                 <a href='mailto:sales@indoteknik.com'>(sales@indoteknik.com)</a> atau Whatsapp{' '}
-                <a href='https://wa.me/628128080622' target='_blank' rel='noreferrer'>
+                <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
                   (+62 812-8080-622)
                 </a>
                 .
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
index 61e5381d..5b5b0f8f 100644
--- a/src/lib/content/components/PageContent.jsx
+++ b/src/lib/content/components/PageContent.jsx
@@ -6,6 +6,14 @@ const PageContent = ({ path }) => {
   const fetchContent = async () => await pageContentApi({ path })
   const content = useQuery(`content-${path}`, fetchContent)
 
+  if (content.isLoading) {
+    return (
+      <div className='flex justify-center my-6'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+      </div>
+    )
+  }
+
   if (content.data?.id) {
     let parsedContent = content.data.content
     parsedContent = parsedContent.replaceAll(
@@ -13,6 +21,8 @@ const PageContent = ({ path }) => {
       `src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image`
     )
     const contentClassNames = ` 
+      container
+      mx-auto
       prose 
       prose-gray 
       prose-a:text-danger-500 
@@ -28,14 +38,6 @@ const PageContent = ({ path }) => {
     return <div className={contentClassNames} dangerouslySetInnerHTML={{ __html: parsedContent }} />
   }
 
-  if (content.isLoading) {
-    return (
-      <div className='flex justify-center my-6'>
-        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-      </div>
-    )
-  }
-
   return <></>
 }
 
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index dc22fcae..39651eab 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -13,6 +13,7 @@ import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -141,7 +142,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 <div className='w-3/4'>
                   {product?.weight > 0 && <span>{product?.weight} KG</span>}
                   {product?.weight == 0 && (
-                    <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
+                    <a
+                      href={whatsappUrl('productWeight', {
+                        name: product.name,
+                        url: createSlug('/shop/product/', product.name, product.id, true)
+                      })}
+                      className='text-danger-500 font-medium'
+                    >
                       Tanya Berat
                     </a>
                   )}
@@ -171,7 +178,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               ) : (
                 <span className='text-gray_r-12/90 font-normal text-h-sm'>
                   Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                  <a href='https://wa.me/628128080622' className='text-danger-500 underline'>
+                  <a
+                    href={whatsappUrl('product', {
+                      name: product.name,
+                      url: createSlug('/shop/product/', product.name, product.id, true)
+                    })}
+                    className='text-danger-500 underline'
+                  >
                     klik disini
                   </a>
                 </span>
@@ -269,7 +282,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                           {variant.price.priceDiscount > 0 ? (
                             currencyFormat(variant.price.priceDiscount)
                           ) : (
-                            <a href='https://wa.me/628128080622' className='text-red_r-11'>
+                            <a
+                              href={whatsappUrl('product', {
+                                name: variant.name,
+                                url: createSlug('/shop/product/', product.name, product.id, true)
+                              })}
+                              className='text-red_r-11'
+                            >
                               Call for price
                             </a>
                           )}
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 02cf0137..426fe1b8 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -13,6 +13,7 @@ import MobileView from '@/core/components/views/MobileView'
 import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -152,7 +153,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           ) : (
             <span className='text-gray_r-11 leading-6 font-normal'>
               Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-              <a href='https://wa.me/628128080622' className='text-danger-500 underline'>
+              <a
+                href={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 underline'
+              >
                 klik disini
               </a>
             </span>
@@ -236,7 +243,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
               </span>
             )}
             {activeVariant?.stock == 0 && (
-              <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
+              <a
+                href={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 font-medium'
+              >
                 Tanya Stok
               </a>
             )}
@@ -244,7 +257,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           <SpecificationContent label='Berat Barang'>
             {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
             {activeVariant?.weight == 0 && (
-              <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
+              <a
+                href={whatsappUrl('productWeight', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 font-medium'
+              >
                 Tanya Berat
               </a>
             )}
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 725e6efe..9300643e 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -2,8 +2,14 @@ import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
+  const callForPriceWhatsapp = whatsappUrl('product', {
+    name: product.name,
+    url: createSlug('/shop/product/', product.name, product.id, true)
+  })
+
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white'>
@@ -58,7 +64,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             {product?.lowestPrice.priceDiscount > 0 ? (
               currencyFormat(product?.lowestPrice.priceDiscount)
             ) : (
-              <a href='https://wa.me/628128080622'>Call for price</a>
+              <a href={callForPriceWhatsapp}>Call for price</a>
             )}
           </div>
 
@@ -130,7 +136,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             {product?.lowestPrice?.priceDiscount > 0 ? (
               currencyFormat(product?.lowestPrice?.priceDiscount)
             ) : (
-              <a href='https://wa.me/628128080622'>Call for price</a>
+              <a href={callForPriceWhatsapp}>Call for price</a>
             )}
           </div>
 
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx
index 8cd70bc0..93234c53 100644
--- a/src/lib/variant/components/VariantCard.jsx
+++ b/src/lib/variant/components/VariantCard.jsx
@@ -6,6 +6,7 @@ import Link from '@/core/components/elements/Link/Link'
 import { createSlug } from '@/core/utils/slug'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { updateItemCart } from '@/core/utils/cart'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
   const router = useRouter()
@@ -57,7 +58,13 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
           {product.price.priceDiscount > 0 ? (
             currencyFormat(product.quantity * product.price.priceDiscount)
           ) : (
-            <a href='https://wa.me/628128080622' className='underline text-danger-500'>
+            <a
+              href={whatsappUrl('product', {
+                name: product.name,
+                url: createSlug('/shop/product/', product.name, product.id, true)
+              })}
+              className='underline text-danger-500'
+            >
               Call For Price{' '}
             </a>
           )}