Merged in Feature/template-switch (pull request #228)

Feature/template switch

6 files changed, 67 insertions, 75 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 3e34d5c3..931f8f2f 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -24,6 +24,9 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
   const utmSource = useUtmSource()
   const router = useRouter();
 
+  const ppnString = process.env.NEXT_PUBLIC_PPN;
+  const ppnNumber = ppnString !== undefined ? Number(ppnString) : 0;
+
   const id = product.id.toString ()
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
@@ -169,36 +172,24 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
         >
           {product.name}
         </Link>
-        <div className='h-1.5' />
-        {product?.flash_sale?.id > 0 ? (<div></div>) :
-        (
-          <div className={style['price']}>
-          Rp {formatCurrency(product.lowest_price.price)}
-        </div>
-      )
-    }
-
-        
 
         <div className='h-1.5' />
-
-        {product?.flash_sale?.id > 0 &&
-          product?.lowest_price?.discountPercentage > 0 ? (
+      {product?.lowest_price.discountPercentage === undefined ? (
+        <div>
+          {product?.flash_sale?.id > 0 &&
+          product?.lowest_price.discount_percentage > 0 ? (
             <>
-              {product?.lowest_price.discountPercentage > 0 && (
-                <div className='flex gap-x-1 mb-1 items-center'>
-                  <div className='badge-solid-red'>
-                    {Math.floor(product?.lowest_price.discount_percentage ? product?.lowest_price.discount_percentage : product?.lowest_price.discountPercentage)}%
-                  </div>
-                  <div className='text-gray_r-11 line-through text-caption-2'>
-                    {currencyFormat(product?.lowest_price?.price)}
-                  </div>
+              <div className='flex gap-x-1 mb-1 items-center'>
+                <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                  {currencyFormat(product.lowest_price.price)}
                 </div>
-              )}
-
+                <div className='badge-solid-red'>
+                  {Math.floor(product?.lowest_price.discount_percentage)}%
+                </div>
+              </div>
               <div className='text-danger-500 font-semibold mb-2'>
-                {product?.lowest_price?.price_discount ? product?.lowest_price?.price_discount : product?.lowest_price?.priceDiscount > 0 ? (
-                  currencyFormat(product?.lowest_price?.price_discount ? product?.lowest_price?.price_discount : product?.lowest_price?.priceDiscount)
+                {product?.lowest_price.price_discount > 0 ? (
+                  currencyFormat(product?.lowest_price.price_discount)
                 ) : (
                   <a
                     rel='noopener noreferrer'
@@ -209,41 +200,49 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
                   </a>
                 )}
               </div>
-              <div className='flex w-full items-center gap-x-1 '>
-            {product?.stockTotal > 0 && (
+            </>
+          ) : (
+            <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
+              {product?.lowest_price.price > 0 ? (
+                <>
+                  {currencyFormat(product?.lowest_price.price)}
+                  <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
+                    Inc. PPN:{' '}
+                    {currencyFormat(
+                      product.lowest_price.price * ppnNumber
+                    )}
+                  </div>
+                </>
+              ) : (
+                <a
+                  rel='noopener noreferrer'
+                  target='_blank'
+                  href={callForPriceWhatsapp}
+                >
+                  Call for Inquiry
+                </a>
+              )}
+            </div>
+          )}
+
+          <div className='flex w-full items-center gap-x-1 '>
+            {product?.stock_total > 0 && (
               <div className='badge-solid-red'>Ready Stock</div>
             )}
             {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
-            {product?.qtySold > 0 && (
+            {product?.qty_sold > 0 && (
               <div className='text-gray_r-9 text-[11px]'>
-                {sellingProductFormat(product?.qtySold) + ' Terjual'}
+                {sellingProductFormat(product?.qty_sold) + ' Terjual'}
               </div>
             )}
           </div>
-            </>
-          ) : (
-            <div>
-              <div className={style['price-inc']}>
-                Inc PPN:
-                Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
-              </div>
-
-              <div className='h-1' />
-
-              <div className='flex items-center gap-x-2.5'>
-                {product.stock_total > 0 && (
-                  <div className={style['ready-stock']}>
-                    Ready Stock
-                  </div>
-                )}
-                {product.qty_sold > 0 && (
-                  <div className={style['sold']}>
-                    {formatToShortText(product.qty_sold)} Terjual
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
+        </div>
+      ) : (
+        <div>
+          
+        </div>
+      )}
+        
 
 
       </div>
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 6bd025af..169e1903 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -37,7 +37,7 @@ const ProductDetail = ({ product }: Props) => {
   const router = useRouter()
   const auth = getAuth()
   const { setAskAdminUrl, askAdminUrl, activeVariantId, setIsApproval, isApproval } = useProductDetail()
-
+  
   useEffect(() => {
     gtagProductDetail(product);
   },[product])
diff --git a/src-migrate/modules/product-detail/components/SimilarBottom.tsx b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
index ab33f106..8ff0a6bf 100644
--- a/src-migrate/modules/product-detail/components/SimilarBottom.tsx
+++ b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
@@ -16,7 +16,6 @@ const SimilarBottom = ({ product, source }: Props) => {
   })
 
   const products = productSimilar.data?.products || []
-
   return (
     <Skeleton
       isLoaded={!productSimilar.isLoading}
diff --git a/src-migrate/services/product.ts b/src-migrate/services/product.ts
index ec5435cd..2152ba26 100644
--- a/src-migrate/services/product.ts
+++ b/src-migrate/services/product.ts
@@ -57,21 +57,24 @@ export const getProductSimilar = async ({
     dataflashSale = dataFlash.response.products.map((product: {
       qtySold: any;
       stockTotal: any;
-      flashSale: any; lowestPrice: any; 
-}) => ({
+      flashSale: any; 
+      lowestPrice: any;
+ }) => ({
       ...product,
-      lowest_price: product.lowestPrice,
+      lowest_price: {
+        discount_percentage: product.lowestPrice.discountPercentage,
+        price: product.lowestPrice.price,
+        price_discount: product.lowestPrice.priceDiscount,
+      },
       flash_sale: product.flashSale,
       stock_total: product.stockTotal,
       qty_sold: product.qtySold,
-      lowestPrice: undefined
     }));
     if (source === 'bottom') {
       dataflashSale = dataflashSale.slice('2', '4')
     } else {
       dataflashSale = dataflashSale
     }
-    console.log("dataflashSale",dataflashSale)
   }
   const query = [
     `q=${name}`,
diff --git a/src-migrate/types/productVariant.ts b/src-migrate/types/productVariant.ts
index 861b216a..5f6bded5 100644
--- a/src-migrate/types/productVariant.ts
+++ b/src-migrate/types/productVariant.ts
@@ -8,6 +8,10 @@ export interface IProductVariantDetail {
     remaining_time: number;
     is_flashsale: boolean;
   };
+  categories: {
+    id: string;
+    name: string;
+  }[];
   price: {
     price: number;
     price_discount: number;
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 882673f4..b8ec0580 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -176,7 +176,7 @@ const ProductDesktopVariant = ({
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
-        <Breadcrumb productId={product.id} productName={product.name} />
+        <Breadcrumb id={product.id} name={product.parent.name} />
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
             <div className='w-5/12'>
@@ -415,24 +415,11 @@ const ProductDesktopVariant = ({
                 Beli
               </button>
             </div>
-            {/* <div className='flex mt-4'>
-              <button
-                className='flex items-center gap-x-1'
-                onClick={toggleWishlist}
-              >
-                {wishlist.data?.productTotal > 0 ? (
-                  <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
-                ) : (
-                  <HeartIcon className='w-6' />
-                )}
-                Wishlist
-              </button>
-            </div> */}
             <div className='border border-gray_r-6 overflow-auto mt-4'>
               <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
                 Produk Serupa
               </div>
-              <div className='h-full divide-y divide-gray_r-6 max-h-96'>
+              <div className='h-full divide-y divide-gray_r-6 max-h-[500px]'>
                 {productSimilarInBrand &&
                   productSimilarInBrand?.map((product) => (
                     <div className='py-2' key={product.id}>