diff options
Diffstat (limited to 'src-migrate/modules/product-card/components')
| -rw-r--r-- | src-migrate/modules/product-card/components/ProductCard.tsx | 159 |
1 files changed, 136 insertions, 23 deletions
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx index 0febfadb..931f8f2f 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,17 @@ type Props = { 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, + 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 +89,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 +136,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']} @@ -104,33 +172,78 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => { > {product.name} </Link> - <div className='h-1.5' /> - - <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> - - <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 + {product?.lowest_price.discountPercentage === undefined ? ( + <div> + {product?.flash_sale?.id > 0 && + product?.lowest_price.discount_percentage > 0 ? ( + <> + <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 > 0 ? ( + currencyFormat(product?.lowest_price.price_discount) + ) : ( + <a + rel='noopener noreferrer' + target='_blank' + href={callForPriceWhatsapp} + > + Call for Inquiry + </a> + )} + </div> + </> + ) : ( + <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?.qty_sold > 0 && ( + <div className='text-gray_r-9 text-[11px]'> + {sellingProductFormat(product?.qty_sold) + ' Terjual'} + </div> + )} + </div> </div> + ) : ( + <div> + + </div> + )} + + </div> </div> |