<iman> update template switch

3 files changed, 171 insertions, 22 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 0febfadb..3e34d5c3 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -10,6 +10,10 @@ import formatCurrency from '~/libs/formatCurrency'
 import { formatToShortText } from '~/libs/formatNumber'
 import { createSlug } from '~/libs/slug'
 import { IProduct } from '~/types/product'
+import { useRouter } from 'next/router';
+import currencyFormat from '@/core/utils/currencyFormat';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import { sellingProductFormat } from '@/core/utils/formatValue';
 
 type Props = {
   product: IProduct
@@ -18,7 +22,14 @@ type Props = {
 
 const ProductCard = ({ product, layout = 'vertical' }: Props) => {
   const utmSource = useUtmSource()
-  
+  const router = useRouter();
+
+  const id = product.id.toString ()
+  const callForPriceWhatsapp = whatsappUrl('product', {
+    name: product.name,
+    manufacture: product.manufacture?.name,
+    url: createSlug('/shop/product/', product.name, id, true),
+  });
 
   const URL = {
     product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
@@ -75,6 +86,42 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             </div>
           </div>
         </div>
+        {layout === 'vertical' && (
+          <div>
+            {router.pathname != '/' && product?.flash_sale.id > 0 && (
+                <div className='absolute left-0 bottom-0 w-full grid'>
+                  <div className='absolute  bottom-0 w-full h-full'>
+                    <ImageNext
+                      src='/images/BG-FLASH-SALE.jpg'
+                      className='h-full'
+                      width={1000}
+                      height={100} alt={''}                />
+                  </div>
+                  <div className='relative'>
+                    <div className='flex gap-x-1 items-center p-2 justify-center'>
+                      <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
+                        <span className='text-sm font-bold text-black'>
+                          {Math.floor(product?.lowest_price.discount_percentage ? product?.lowest_price.discount_percentage : product?.lowest_price.discountPercentage)}%
+                        </span>
+                      </div>
+                      <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
+                        <ImageNext
+                          src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                          width={13}
+                          height={5} alt={''}                    />
+                        <span className='text-white text-[9px] md:text-[10px] font-semibold'>
+                          {product?.flash_sale?.tag != 'false' ||
+                          product?.flash_sale?.tag
+                            ? product?.flash_sale?.tag
+                            : 'FLASH SALE'}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+          </div>
+        )}
 
           {product.variant_total > 1 && (
             <div className={style['variant-badge']}>{product.variant_total} Varian</div>
@@ -86,6 +133,24 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
         [style['content-v']]: layout === 'vertical',
         [style['content-h']]: layout === 'horizontal',
       })}>
+        {layout === 'horizontal' && (
+          <div>
+              {product.flash_sale.id > 0 && (
+              <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
+                <ImageNext
+                    src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                    width={15}
+                    height={10} alt={''}                />
+                <span className='text-white text-xs font-semibold'>
+                  {' '}
+                  {product?.flash_sale?.tag != 'false' || product?.flash_sale?.tag
+                    ? product?.flash_sale?.tag
+                    : 'FLASH SALE'}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
         <Link
           href={URL.manufacture}
           className={style['brand']}
@@ -105,32 +170,81 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
           {product.name}
         </Link>
         <div className='h-1.5' />
-
-        <div className={style['price']}>
+        {product?.flash_sale?.id > 0 ? (<div></div>) :
+        (
+          <div className={style['price']}>
           Rp {formatCurrency(product.lowest_price.price)}
         </div>
+      )
+    }
+
+        
 
         <div className='h-1.5' />
 
-        <div className={style['price-inc']}>
-          Inc PPN:
-          Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
-        </div>
+        {product?.flash_sale?.id > 0 &&
+          product?.lowest_price?.discountPercentage > 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>
+              )}
 
-        <div className='h-1' />
+              <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)
+                ) : (
+                  <a
+                    rel='noopener noreferrer'
+                    target='_blank'
+                    href={callForPriceWhatsapp}
+                  >
+                    Call for Inquiry
+                  </a>
+                )}
+              </div>
+              <div className='flex w-full items-center gap-x-1 '>
+            {product?.stockTotal > 0 && (
+              <div className='badge-solid-red'>Ready Stock</div>
+            )}
+            {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
+            {product?.qtySold > 0 && (
+              <div className='text-gray_r-9 text-[11px]'>
+                {sellingProductFormat(product?.qtySold) + ' Terjual'}
+              </div>
+            )}
+          </div>
+            </>
+          ) : (
+            <div>
+              <div className={style['price-inc']}>
+                Inc PPN:
+                Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
+              </div>
 
-        <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 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>
diff --git a/src-migrate/services/product.ts b/src-migrate/services/product.ts
index fe415d11..51667eb9 100644
--- a/src-migrate/services/product.ts
+++ b/src-migrate/services/product.ts
@@ -2,6 +2,7 @@ import { IProduct, IProductDetail } from '~/types/product';
 import snakeCase from 'snakecase-keys';
 import odooApi from '~/libs/odooApi';
 import { ICategoryBreadcrumb } from '~/types/category';
+import productSearchApi from '../../src/lib/product/api/productSearchApi'
 
 const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
 
@@ -40,6 +41,27 @@ export const getProductSimilar = async ({
   except,
   limit = 30,
 }: GetProductSimilarProps): Promise<GetProductSimilarRes> => {
+  let dataflashSale = null
+  const flashSale = await odooApi('GET', '/api/v1/flashsale/header')
+  if (flashSale && flashSale.length > 0) {
+    const dataFlash = await productSearchApi({
+      query: `fq=flashsale_id_i:${flashSale[0].pricelist_id}&fq=flashsale_price_f:[1 TO *]&limit=4`,
+      operation: 'AND'
+    })
+    
+    dataflashSale = dataFlash.response.products.map((product: {
+      qtySold: any;
+      stockTotal: any;
+      flashSale: any; lowestPrice: any; 
+}) => ({
+      ...product,
+      lowest_price: product.lowestPrice,
+      flash_sale: product.flashSale,
+      stock_total: product.stockTotal,
+      qty_sold: product.qtySold,
+      lowestPrice: undefined
+    }));
+  }
   const query = [
     `q=${name}`,
     'page=1',
@@ -47,16 +69,25 @@ export const getProductSimilar = async ({
     'operation=OR',
     'priceFrom=1',
   ];
-
   if (except?.productId) query.push(`fq=-product_id_i:${except.productId}`);
   if (except?.manufactureId)
     query.push(`fq=-manufacture_id_i:${except.manufactureId}`);
-
   const url = `${SELF_HOST}/api/shop/search?${query.join('&')}`;
 
-  return await fetch(url)
+  const fetchedData = await fetch(url)
     .then((res) => res.json())
     .then((res) => snakeCase(res.response));
+
+  if (dataflashSale) {
+    fetchedData.products = [
+      ...dataflashSale,
+      ...fetchedData.products
+    ]
+  } else {
+    fetchedData.products = [...fetchedData.products]
+  }
+
+  return fetchedData;
 };
 
 export const getProductCategoryBreadcrumb = async (
diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts
index 681cdc8e..75d55002 100644
--- a/src-migrate/types/product.ts
+++ b/src-migrate/types/product.ts
@@ -1,6 +1,8 @@
 import { IProductVariantDetail } from './productVariant';
 
 export interface IProduct {
+  qtySold: number;
+  stockTotal: number;
   id: number;
   image: string;
   code: string;
@@ -18,11 +20,13 @@ export interface IProduct {
     name: string;
   }[];
   flash_sale: {
-    id: string;
+    id: number;
     remaining_time: number;
     tag: string;
   };
   lowest_price: {
+    priceDiscount: number;
+    discountPercentage: number;
     price: number;
     price_discount: number;
     discount_percentage: number;