Merge branch 'new-release' into CR/form-merchant

10 files changed, 152 insertions, 28 deletions

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index ab2e7ce1..86d1dc43 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -1,5 +1,6 @@
 import style from '../styles/item.module.css'
-
+import odooApi from '~/libs/odooApi';
+import { useEffect, useState } from 'react';
 import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
 import { InfoIcon } from 'lucide-react'
 import Image from 'next/image'
@@ -22,6 +23,17 @@ type Props = {
 }
 
 const CartItem = ({ item, editable = true, selfPicking}: Props) => {
+  const [qtyPickUp, setQtyPickUp] = useState(0);
+  useEffect(() => {
+    const fetchData = async () => {
+      const qty_available = await odooApi(
+        'GET',
+        `/api/v1/product_variant/${item.id}/qty_available`
+      );
+      setQtyPickUp(qty_available?.qty);
+    };
+    fetchData();
+  }, [item]);
   return (
     <div className={style.wrapper}>
       {item.cart_type === 'promotion' && (  
@@ -54,11 +66,11 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
         <CartItem.Image item={item} />
 
         <div className={style.details}>
-          {item?.available_quantity > 0 && (
+          {qtyPickUp > 0 && (
             <div className='text-[10px] text-red-500 italic'>
-              {item.quantity <= item?.available_quantity
+              {item.quantity <= qtyPickUp
                 ? '*Barang ini bisa di pickup maksimal pukul 16.00'
-                : `*${item?.available_quantity} Barang ini bisa di pickup maksimal pukul 16.00`}
+                : `*${qtyPickUp} Barang ini bisa di pickup maksimal pukul 16.00`}
             </div>
           )}
           <CartItem.Name item={item} />
diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index d50711cc..cae50abf 100644
--- a/src-migrate/modules/popup-information/index.tsx
+++ b/src-migrate/modules/popup-information/index.tsx
@@ -15,7 +15,6 @@ const PagePopupInformation = () => {
   const [data, setData] = useState<any>(null);
   const [loading, setLoading] = useState(true);
 
-
   useEffect(() => {
     const getData = async () => {
       const res = await fetch(`/api/hero-banner?type=popup-banner`);
@@ -44,7 +43,10 @@ const PagePopupInformation = () => {
             className='w-[350px] md:w-[530px]'
             onClick={() => setActive(false)}
           >
-            <Link href={data[0].url === false ? '/' :data[0].url} aria-label='popup'>
+            <Link
+              href={data[0].url === false ? '/' : data[0].url}
+              aria-label='popup'
+            >
               <Image
                 src={data[0]?.image}
                 alt={data[0]?.name}
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 280e4a7a..95bc1d88 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -15,7 +15,8 @@ import { useProductCartContext } from '@/contexts/ProductCartContext';
 import { createSlug } from '~/libs/slug';
 import formatCurrency from '~/libs/formatCurrency';
 import { useProductDetail } from '../stores/useProductDetail';
-
+import { gtagAddToCart } from '@/core/utils/googleTag';
+import axios from 'axios';
 type Props = {
   variantId: number | null;
   quantity?: number;
@@ -50,6 +51,38 @@ const AddToCart = ({
     isLoading,
     setIsloading,
   } = useProductCartContext();
+  const [activeVariant, setActiveVariant] = useState({
+    id: 0,
+    code: '',
+    name: '',
+    price: '',
+    stock: '',
+    weight: '',
+    isFlashSale: false,
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (variantId) {
+        let response = await axios(
+          `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/variant-detail?id=${variantId}`
+        );
+        let productVariant = response.data;
+        if (productVariant) {
+          setActiveVariant({
+            id: productVariant[0].id,
+            code: productVariant[0].code,
+            name: productVariant[0].name,
+            price: productVariant[0].price.price,
+            stock: productVariant[0].stockTotal,
+            weight: productVariant[0].weight,
+            isFlashSale: productVariant[0].isFlashsale,
+          });
+        }
+      }
+    };
+    fetchData();
+  }, [variantId]);
 
   const productSimilarQuery = [
     product?.name,
@@ -101,6 +134,8 @@ const AddToCart = ({
     setRefreshCart(true);
     setAddCartAlert(true);
 
+    gtagAddToCart(activeVariant, quantity);
+
     toast({
       title: 'Tambah ke keranjang',
       description: 'Berhasil menambahkan barang ke keranjang belanja',
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 9348bbfb..850c2d9d 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -163,7 +163,7 @@ const PriceAction = ({ product }: Props) => {
           </span> */}
         </div>
         <div>
-          {selectedVariant?.is_in_bu && (
+          {qtyPickUp > 0 && (
             <Link href='/panduan-pick-up-service' className='group'>
               <Image
                 src='/images/PICKUP-NOW.png'
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index b036cc2d..0660b9c0 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,7 +2,7 @@ import style from '../styles/product-detail.module.css';
 
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@chakra-ui/react';
 import { MessageCircleIcon, Share2Icon } from 'lucide-react';
@@ -66,9 +66,23 @@ const ProductDetail = ({ product }: Props) => {
     if (typeof auth === 'object') {
       setIsApproval(auth?.feature?.soApproval);
     }
-    setSelectedVariant(product?.variants[0])
+    const selectedVariant =
+      product?.variants?.find((variant) => variant.is_in_bu) ||
+      product?.variants?.[0];
+    setSelectedVariant(selectedVariant);
+    // setSelectedVariant(product?.variants[0])
   }, []);
 
+  // Gabungkan semua gambar produk (utama + tambahan)
+  const allImages = product.image_carousel ? [...product.image_carousel] : [];
+
+  if (product.image) {
+    allImages.unshift(product.image); // Tambahkan gambar utama di awal array
+  }
+  console.log(product);
+
+  const [mainImage, setMainImage] = useState(allImages[0] || '');
+
   return (
     <>
       <div className='md:flex md:flex-wrap'>
@@ -78,7 +92,37 @@ const ProductDetail = ({ product }: Props) => {
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
           <div className='md:flex md:flex-wrap'>
             <div className='md:w-4/12'>
-              <ProductImage product={product} />
+              <ProductImage product={{ ...product, image: mainImage }} />
+
+              {/* Carousel horizontal */}
+              {allImages.length > 0 && (
+                <div className='mt-4 overflow-x-auto'>
+                  <div className='flex space-x-3 pb-3'>
+                    {allImages.map((img, index) => (
+                      <div
+                        key={index}
+                        className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
+                          mainImage === img
+                            ? 'border-red-500 ring-2 ring-red-200'
+                            : 'border-gray-200 hover:border-gray-300'
+                        }`}
+                        onClick={() => setMainImage(img)}
+                      >
+                        <img
+                          src={img}
+                          alt={`Thumbnail ${index + 1}`}
+                          className='w-full h-full object-cover rounded-sm'
+                          loading='lazy'
+                          onError={(e) => {
+                            (e.target as HTMLImageElement).src =
+                              '/path/to/fallback-image.jpg';
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className='md:w-8/12 px-4 md:pl-6'>
@@ -102,7 +146,12 @@ const ProductDetail = ({ product }: Props) => {
             )}
 
             <div className='h-4 md:h-10' />
-            {!!activeVariantId && !isApproval && <ProductPromoSection product={product} productId={activeVariantId} />}
+            {!!activeVariantId && !isApproval && (
+              <ProductPromoSection
+                product={product}
+                productId={activeVariantId}
+              />
+            )}
 
             {/* <div className={style['section-card']}>
               <h2 className={style['heading']}>
@@ -117,15 +166,18 @@ const ProductDetail = ({ product }: Props) => {
             <div className={style['section-card']}>
               <h2 className={style['heading']}>Informasi Produk</h2>
               <div className='h-4' />
-              <div
-                className={style['description']}
-                dangerouslySetInnerHTML={{
-                  __html:
-                    !product.description || product.description == '<p><br></p>'
-                      ? 'Belum ada deskripsi'
-                      : product.description,
-                }}
-              />
+              <div className='overflow-x-auto'>
+                <div
+                  className={style['description']}
+                  dangerouslySetInnerHTML={{
+                    __html:
+                      !product.description ||
+                      product.description == '<p><br></p>'
+                        ? 'Belum ada deskripsi'
+                        : product.description,
+                  }}
+                />
+              </div>
             </div>
           </div>
         </div>
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 034d13e9..0c225c74 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -18,6 +18,7 @@ interface Voucher {
   name: string;
   description: string;
   code: string;
+  voucher_category: [];
 }
 
 const VoucherComponent = () => {
diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
index 332c5358..5933b5f2 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -13,11 +13,11 @@ const RegistrasiBisnis: React.FC<FormProps> = ({
   chekValid,
   buttonSubmitClick,
 }) => {
-  const [isPKP, setIsPKP] = useState(true);
+  const [isPKP, setIsPKP] = useState(false);
   const [isTerdaftar, setIsTerdaftar] = useState(false);
   const [isDropIndividu, setIsDropIndividu] = useState(true);
   const [isBisnisClicked, setisBisnisClicked] = useState(true);
-  const [selectedValue, setSelectedValue] = useState('PKP');
+  const [selectedValue, setSelectedValue] = useState('Non-PKP');
   const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
   const { validate, updateForm } = useRegisterStore();
 
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index 39f4771c..06f7cbea 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -101,6 +101,13 @@ const Register = () => {
           status: 'warning',
         });
         break;
+      case 'BISNIS_NOT_FOUND':
+        toast({
+          ...toastProps,
+          title: 'Bisnis tidak ditemukan',
+          status: 'warning',
+        });
+        break;
     }
   };
 
diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
index 1e086c06..79ab3612 100644
--- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
+++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
@@ -171,7 +171,7 @@ type StatePengiriman = {
 };
 type ActionPengiriman = {
   updateFormPengiriman: (name: string, value: string) => void;
-
+  updateDokumenProsedur: (name: string, format: string, base64: string) => void;
   validatePengiriman: () => void;
 };
 export const usePengajuanTempoStorePengiriman = create<
@@ -186,6 +186,8 @@ export const usePengajuanTempoStorePengiriman = create<
     districtPengiriman: '',
     subDistrictPengiriman: '',
     zipPengiriman: '',
+    PICBarangMobile: '',
+    invoicePicMobile: '',
     invoicePicTittle: '',
     invoicePic: '',
     isSameAddrees: '',
@@ -202,12 +204,21 @@ export const usePengajuanTempoStorePengiriman = create<
     dokumenPengirimanInput: '',
     dokumenKirimInput: '',
     dokumenPengirimanInvoice: '',
+    dokumenProsedur: { name: '', format: '', base64: '' },
   },
   updateFormPengiriman: (name, value) =>
     set((state) => ({
       formPengiriman: { ...state.formPengiriman, [name]: value },
     })),
 
+  updateDokumenProsedur: (name, format, base64) =>
+    set((state) => ({
+      formPengiriman: {
+        ...state.formPengiriman,
+        dokumenProsedur: { name, format, base64 },
+      },
+    })),
+
   errorsPengiriman: {},
   validatePengiriman: () => {
     try {
@@ -260,6 +271,7 @@ export const usePengajuanTempoStoreDokumen = create<
     dokumenLaporanKeuangan: { name: '', format: '', base64: '' },
     dokumenFotoKantor: { name: '', format: '', base64: '' },
     dokumenTempatBekerja: { name: '', format: '', base64: '' },
+    dokumenProsedur: { name: '', format: '', base64: '' },
   },
 
   // Memperbarui dokumen dengan name, format, dan base64
diff --git a/src-migrate/modules/side-banner/index.tsx b/src-migrate/modules/side-banner/index.tsx
index 878b8e70..7bc5f394 100644
--- a/src-migrate/modules/side-banner/index.tsx
+++ b/src-migrate/modules/side-banner/index.tsx
@@ -5,12 +5,15 @@ import Image from "~/components/ui/image";;
 import { getBanner } from "~/services/banner";
 import { getRandomInt } from '@/utils/getRandomInt';
 
-const SideBanner = () => {
+interface SideBannerProps {
+  query?: string; // Menentukan bahwa 'query' adalah string (bisa undefined)
+}
+
+const SideBanner: React.FC<SideBannerProps> = ({ query }) => {
   const fetchSideBanner = useQuery({
-    queryKey: 'sideBanner',
-    queryFn: () => getBanner({ type: 'side-banner-search' })
+    queryKey: ["sideBanner", query],
+    queryFn: () => getBanner({ type: "side-banner-search", keyword: query }),
   });
-
   const length = useMemo(() => fetchSideBanner.data?.length, [fetchSideBanner.data]);
   const randomIndex = useMemo(() => getRandomInt(length), [length]);
   const banner = fetchSideBanner?.data?.[randomIndex] || false;