diff options
Diffstat (limited to 'src/lib/product/components/Product')
5 files changed, 273 insertions, 306 deletions
diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx index 33da703a..e5296f96 100644 --- a/src/lib/product/components/Product/ColumnsSLA.jsx +++ b/src/lib/product/components/Product/ColumnsSLA.jsx @@ -1,8 +1,9 @@ import odooApi from '@/core/api/odooApi' import { createSlug } from '@/core/utils/slug' import whatsappUrl from '@/core/utils/whatsappUrl' -import { Button, Spinner } from 'flowbite-react' -import { memo, useEffect, useState } from 'react' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' +import { memo } from 'react' import { useQuery } from 'react-query' const ColumnSLA = ({ variant, product }) => { @@ -12,67 +13,35 @@ const ColumnSLA = ({ variant, product }) => { return ( <> <td> - {dataSLA.isFetching ? ( - <div className='text-center'> - <Spinner aria-label='Center-aligned spinner example' /> - </div> - ) : dataSLA?.data?.qty > 0 ? ( - dataSLA?.data?.qty - ) : ( - <a - href={whatsappUrl('product', { - name: variant.name, - manufacture: product.manufacture?.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-danger-500 font-medium' - target='_blank' - rel='noreferrer noopener' - > - Tanya Admin - </a> - )} + <Skeleton isLoaded={!dataSLA.isFetching} w='full'> + {dataSLA?.data?.qty > 0 ? ( + dataSLA?.data?.qty + ) : ( + <a + href={whatsappUrl('product', { + name: variant.name, + manufacture: product.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-danger-500 font-medium' + target='_blank' + rel='noreferrer noopener' + > + Tanya Admin + </a> + )} + </Skeleton> </td> + <td className='flex justify-center'> - {dataSLA.isFetching ? ( - <Button color='gray'> - <Spinner aria-label='Alternate spinner button example' /> - <span className='pl-3'>Loading...</span> - </Button> - ) : dataSLA?.data?.slaDate != '-' ? ( - <button - type='button' - title={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`} - className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${ - dataSLA?.data?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' - }`} - > - <div - className={`flex-1 text-caption-1 ${ - dataSLA?.data?.slaDate === 'indent' ? 'text-white' : '' - }`} - > + <Skeleton isLoaded={!dataSLA.isFetching} w='75%'> + <Tooltip placement='top' label={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}> + <Box className='border border-gray_r-7 rounded-md p-2 flex justify-center items-center gap-x-2'> {dataSLA?.data?.slaDate} - </div> - <div className='flex-end'> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - className={`w-7 h-7 ${dataSLA?.data?.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> - ) : ( - '-' - )} + <Info size={16} /> + </Box> + </Tooltip> + </Skeleton> </td> </> ) diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 6da289bc..0df60673 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -15,7 +15,6 @@ import ProductCard from '../ProductCard' import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' import ImageNext from 'next/image' @@ -23,6 +22,8 @@ import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import { LazyLoadComponent } from 'react-lazy-load-image-component' import ColumnsSLA from './ColumnsSLA' import { useProductCartContext } from '@/contexts/ProductCartContext' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -40,7 +41,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) - const {setRefreshCart , refreshCart} = useProductCartContext() + const { setRefreshCart, refreshCart } = useProductCartContext() const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -256,16 +257,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <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( @@ -282,9 +283,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { </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.variants.length > 1 ? ( + <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div> + <div className='w-8/12'> + {product.variants.length > 1 && ( <button type='button' onClick={goToVariantSection} @@ -292,62 +293,32 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { > <span className='text-red-600 text-sm'>Lihat Selengkapnya</span> </button> - ) : product.variants[0].sla ? ( - product.variants[0].sla?.slaDate != '-' ? ( - <button - type='button' - title={`Masa Persiapan Barang ${product.variants[0].sla?.slaDate}`} - className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${ - product.variants[0].sla?.slaDate === 'indent' - ? 'bg-indigo-900' - : 'btn-light' - }`} - > - <div - className={`flex-1 text-caption-1 ${ - product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : '' - }`} + )} + + {product.variants.length === 1 && ( + <> + {!product.variants[0]?.sla && <Skeleton width='20%' height='16px' />} + {product.variants[0]?.sla && ( + <Tooltip + placement='top' + label={`Masa Persiapan Barang ${product.variants[0]?.sla?.slaDate}`} > - {product.variants[0].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.variants[0].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> + <Box className='w-fit flex items-center gap-x-2'> + {product.variants[0]?.sla?.slaDate} + <Info size={16} /> + </Box> + </Tooltip> + )} + </> )} </div> </div> + {product.variants.length === 1 && ( <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.variants[0]?.sla && <Skeleton width='10%' height='16px' />} {product?.variants[0].sla?.qty > 0 && ( <span>{product?.variants[0].sla?.qty}</span> )} @@ -366,9 +337,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { </div> </div> )} + <div className={`flex p-3 ${product.variants.length > 1 ? '' : '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 @@ -441,13 +413,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <div className='text-gray_r-12/80'>Harga mulai dari: </div> )} - {lowestPrice?.discountPercentage > 0 && ( + {/* {lowestPrice?.discountPercentage > 0 && ( <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)} + <div className='text-gray_r-9 text-caption-1'> + Include PPN {currencyFormat(lowestPrice?.price * process.env.NEXT_PUBLIC_PPN)} </div> {product.flashSale.remainingTime > 0 && ( <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'> @@ -464,28 +436,54 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { </div> )} </div> + )} */} + + {product?.flashSale?.remainingTime > 0 ? ( + <> + <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-9 line-through text-caption-1'> + {currencyFormat(lowestPrice?.price)} + </div> + <div className='text-danger-500 font-semibold text-xl'> + {currencyFormat(lowestPrice?.priceDiscount)} + </div> + </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN: {currencyFormat(lowestPrice?.priceDiscount * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <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> )} - <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> - {lowestPrice?.priceDiscount > 0 ? ( - currencyFormat(lowestPrice?.priceDiscount) - ) : ( - <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> + {product.variants.length > 1 ? ( <button type='button' 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 diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 6b0b27a5..a9d34683 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -17,7 +17,6 @@ import whatsappUrl from '@/core/utils/whatsappUrl' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import { gtagAddToCart } from '@/core/utils/googleTag' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' import ImageNext from 'next/image' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' @@ -101,7 +100,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { price: variant.price, stock: variant.stock, weight: variant.weight, - hasProgram: variant.hasProgram + hasProgram: variant.hasProgram, + isFlashsale: variant.isFlashsale } setActiveVariant(newActiveVariant) @@ -152,6 +152,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { router.push(`/shop/checkout?source=buy`) } + console.log('ini log', activeVariant) + const productSimilarQuery = [ product?.name, `fq=-product_id_i:${product.id}`, @@ -232,32 +234,48 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { <div className='text-gray_r-12/80 text-caption-2 mt-2 mb-1'>Harga mulai dari: </div> )} - {activeVariant?.price?.discountPercentage > 0 && ( - <div className='flex gap-x-1 items-center'> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(activeVariant?.price?.price)} + {activeVariant.isFlashsale ? ( + <> + <div className='flex gap-x-1 items-center'> + <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(activeVariant?.price?.price)} + </div> + <div className='text-danger-500 font-semibold'> + {currencyFormat(activeVariant?.price?.priceDiscount)} + </div> </div> - <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div> - </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <h3 className='text-danger-500 font-semibold mt-1'> + {activeVariant?.price?.priceDiscount > 0 ? ( + <> + {currencyFormat(activeVariant?.price?.priceDiscount)} + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <span className='text-gray_r-11 leading-6 font-normal'> + 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> )} - <h3 className='text-danger-500 font-semibold mt-1'> - {activeVariant?.price?.priceDiscount > 0 ? ( - currencyFormat(activeVariant?.price?.priceDiscount) - ) : ( - <span className='text-gray_r-11 leading-6 font-normal'> - 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> </div> <Divider /> diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx index e0ba90c3..a7b1a543 100644 --- a/src/lib/product/components/Product/ProductMobileVariant.jsx +++ b/src/lib/product/components/Product/ProductMobileVariant.jsx @@ -16,7 +16,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import whatsappUrl from '@/core/utils/whatsappUrl' import { gtagAddToCart } from '@/core/utils/googleTag' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' +import { Skeleton } from '@chakra-ui/react' const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() @@ -39,7 +39,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { name: product.name, price: getLowestPrice(), stock: product.stockTotal, - weight: product.weight + weight: product.weight, + isFlashSale: product.isFlashsale }) useEffect(() => { @@ -50,7 +51,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { name: product.name, price: product.price, stock: product.stock, - weight: product.weight + weight: product.weight, + isFlashSale: product.isFlashsale }) } }, [selectedVariant, product]) @@ -80,6 +82,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { }) setAddCartAlert(true) } + console.log('ini log', activeVariant) const handleClickBuy = () => { if (!validAction()) return @@ -89,7 +92,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { quantity, programLineId: null, selected: true, - source : 'buy' + source: 'buy' }) router.push(`/shop/checkout?source=buy`) } @@ -139,47 +142,47 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { </div> <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1> - {activeVariant?.price?.priceDiscount > 0 ? ( + {activeVariant.isFlashsale ? ( <> <div className='flex gap-x-1 items-center'> - <div className='text-gray_r-11 text-caption-1'>Harga Sebelum PPN :</div> - <div className='text-gray_r-12 line-through text-caption-1'> - {' '} + <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(activeVariant?.price?.price)} + </div> + <div className='text-danger-500 font-semibold'> {currencyFormat(activeVariant?.price?.priceDiscount)} </div> </div> - <div className='mt-2'> - <span className='font-semibold '>Termasuk PPN :</span> - <div className='flex gap-x-2 items-center mt-2'> - {activeVariant?.price?.discountPercentage > 0 && ( - <> - <div className='badge-solid-red'> - {activeVariant?.price?.discountPercentage}% - </div> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(activeVariant?.price?.price * 1.11)} - </div> - </> - )} - <h3 className='text-danger-500 font-semibold'> - {currencyFormat(activeVariant?.price?.priceDiscount * 1.11)} - </h3> - </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} </div> </> ) : ( - <span className='text-gray_r-11 leading-6 font-normal'> - 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'> + {activeVariant?.price?.priceDiscount > 0 ? ( + <> + {currencyFormat(activeVariant?.price?.priceDiscount)} + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <span className='text-gray_r-11 leading-6 font-normal'> + 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> )} </div> @@ -230,10 +233,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { <SpecificationContent label='Ketersediaan'> <span> {isLoadingSLA ? ( - <Button color='gray'> - <Spinner aria-label='Alternate spinner button example' /> - <span className='pl-3'>Loading...</span> - </Button> + <Skeleton width='100px' height='full' /> ) : product?.sla?.slaDate != '-' ? ( <button type='button' @@ -267,7 +267,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { </svg> </div> </button> - ): ( + ) : ( '-' )} </span> |