diff options
Diffstat (limited to 'src/lib/product/components/Product/ProductDesktopVariant.jsx')
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktopVariant.jsx | 164 |
1 files changed, 73 insertions, 91 deletions
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index 940ba46f..51739bc9 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -16,7 +16,9 @@ import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' import useAuth from '@/core/hooks/useAuth' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' +import { useProductCartContext } from '@/contexts/ProductCartContext' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) => { const router = useRouter() @@ -28,6 +30,8 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) const [addCartAlert, setAddCartAlert] = useState(false) const [isLoadingSLA, setIsLoadingSLA] = useState(true) + const { setRefreshCart } = useProductCartContext() + const getLowestPrice = useCallback(() => { const lowest = product.price /* const lowest = prices.reduce((lowest, price) => { @@ -71,6 +75,8 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) programLineId: null, selected: true, source: null + }).then(() => { + setRefreshCart(true) }) setAddCartAlert(true) } @@ -144,16 +150,16 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1> <div className='mt-10'> <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div> - <div className='w-3/4'>SKU-{product.id}</div> + <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div> + <div className='w-8/12'>SKU-{product.id}</div> </div> <div className='flex p-3 bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Part Number</div> - <div className='w-3/4'>{product.code || '-'}</div> + <div className='w-4/12 text-gray_r-12/70'>Part Number</div> + <div className='w-8/12'>{product.code || '-'}</div> </div> <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Manufacture</div> - <div className='w-3/4'> + <div className='w-4/12 text-gray_r-12/70'>Manufacture</div> + <div className='w-8/12'> {product.manufacture?.name ? ( <Link href={createSlug( @@ -169,68 +175,36 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) )} </div> </div> + <div className='flex p-3 items-center bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div> - <div className='w-3/4'> - {product.sla ? ( - product.sla?.slaDate != '-' ? ( - <button - type='button' - title={`Masa Persiapan Barang ${product.sla?.slaDate}`} - className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${ - product.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' - }`} - > - <div - className={`flex-1 text-caption-1 ${ - product.sla?.slaDate === 'indent' ? 'text-white' : '' - }`} - > - {product.sla?.slaDate} - </div> - <div className='flex-end'> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - className={`w-7 h-7 ${ - product.sla?.slaDate === 'indent' ? 'text-white' : '' - }`} - > - <path - d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' - stroke-linecap='round' - stroke-linejoin='round' - ></path> - </svg> - </div> - </button> - ) : ( - '-' - ) - ) : ( - <Button color='gray'> - <Spinner aria-label='Alternate spinner button example' /> - <span className='pl-3'>Loading...</span> - </Button> + <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div> + <div className='w-8/12'> + {!product?.sla && <Skeleton width='20%' height='16px' />} + {product?.sla && ( + <Tooltip + placement='top' + label={`Masa Persiapan Barang ${product?.sla?.slaDate}`} + > + <Box className='w-fit flex items-center gap-x-2'> + {product?.sla?.slaDate} + <Info size={16} /> + </Box> + </Tooltip> )} </div> </div> + <div className='flex p-3'> - <div className='w-1/4 text-gray_r-12/70'>Stock</div> - <div className='w-3/4'> - {isLoadingSLA && ( - <div className=''> - <Spinner aria-label='Center-aligned spinner example' /> - </div> - )} + <div className='w-4/12 text-gray_r-12/70'>Stock</div> + <div className='w-8/12'> + {!product?.sla && <Skeleton width='10%' height='16px' />} {product?.sla?.qty > 0 && <span>{product?.sla?.qty}</span>} {product?.sla?.qty == 0 && ( <a href={whatsappUrl('product', { name: product.name, - url: createSlug('/shop/product/variant/', product.name, product.id, true) + manufacture: product?.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) })} className='text-danger-500 font-medium' > @@ -240,8 +214,8 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) </div> </div> <div className='flex p-3 bg-gray_r-4'> - <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div> - <div className='w-3/4'> + <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div> + <div className='w-8/12'> {product?.weight > 0 && <span>{product?.weight} KG</span>} {product?.weight == 0 && ( <a @@ -296,44 +270,52 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) </div> */} </div> <div className='w-[25%]'> - {lowestPrice?.priceDiscount > 0 ? ( + {product?.flashSale?.remainingTime > 0 ? ( <> - <div className='flex gap-x-2 mb-3 items-center'> - <div className='flex'> - <span className='text-gray-400 text-md'>Harga Sebelum PPN : </span> - </div> - <div className='flex'> - <span className=' text-body-1 '> - {currencyFormat(lowestPrice?.priceDiscount)} - </span> - </div> - </div> - <span className='font-semibold'>Termasuk PPN :</span> - <div className='flex gap-x-1 items-center mt-2 '> + <div className='flex gap-x-1 items-center mt-2'> <div className='badge-solid-red text-caption-1'> {lowestPrice?.discountPercentage}% </div> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(lowestPrice?.price * 1.11)} + <div className='text-gray_r-9 line-through text-caption-1'> + {currencyFormat(lowestPrice?.price)} + </div> + <div className='text-danger-500 font-semibold text-xl'> + {currencyFormat(lowestPrice?.priceDiscount)} </div> - <h3 className='text-danger-500 font-semibold text-title-sm'> - {currencyFormat(lowestPrice?.priceDiscount * 1.11)} - </h3> + </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(lowestPrice?.priceDiscount * process.env.NEXT_PUBLIC_PPN)} </div> </> ) : ( - <span className='text-gray_r-12/90 font-normal text-h-sm'> - Hubungi kami untuk dapatkan harga terbaik, - <a - href={whatsappUrl('product', { - name: product.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-danger-500 underline' - > - klik disini - </a> - </span> + <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> + {lowestPrice?.price > 0 ? ( + <> + {currencyFormat(lowestPrice?.price)} + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(lowestPrice?.price * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <span className='text-gray_r-12/90 font-normal text-h-sm'> + Hubungi kami untuk dapatkan harga terbaik, + <a + href={whatsappUrl('product', { + name: product.name, + manufacture: product.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-danger-500 underline' + rel='noopener noreferrer' + target='_blank' + > + klik disini + </a> + </span> + )} + </h3> )} <div className='flex gap-x-3 mt-4'> <input |