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, 23 insertions, 136 deletions
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx index 931f8f2f..0febfadb 100644 --- a/src-migrate/modules/product-card/components/ProductCard.tsx +++ b/src-migrate/modules/product-card/components/ProductCard.tsx @@ -10,10 +10,6 @@ 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 @@ -22,17 +18,7 @@ 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}`, @@ -89,42 +75,6 @@ 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> @@ -136,24 +86,6 @@ 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']} @@ -172,78 +104,33 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => { > {product.name} </Link> - <div className='h-1.5' /> - {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 className={style['price']}> + Rp {formatCurrency(product.lowest_price.price)} </div> - ) : ( - <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 + </div> + )} + </div> </div> </div> |