<iman> update template switch

1 files changed, 132 insertions, 18 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>