diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 15 | ||||
| -rw-r--r-- | src/lib/product/components/Product/ProductMobile.jsx | 71 |
2 files changed, 83 insertions, 3 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 41eedc55..a7c1d907 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -397,8 +397,21 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { <div className='text-center'> <Spinner aria-label='Center-aligned spinner example' /> </div> - ) : ( + ) : variant?.sla?.qty > 0 ? ( variant?.sla?.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> )} </td> <td className='flex justify-center'> diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 667a4ba1..a5caee92 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -15,6 +15,8 @@ import { createSlug } from '@/core/utils/slug' 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' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() @@ -24,6 +26,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const [addCartAlert, setAddCartAlert] = useState(false) + const [isLoadingSLA, setIsLoadingSLA] = useState(true) + const getLowestPrice = () => { const prices = product.variants.map((variant) => variant.price) const lowest = prices.reduce((lowest, price) => { @@ -66,7 +70,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { name: variant.parent.name + variantAttributes, price: variant.price, stock: variant.stock, - weight: variant.weight + weight: variant.weight, + sla: variant.sla }) } }, [selectedVariant, product]) @@ -100,6 +105,23 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`) } + useEffect(() => { + const fetchData = async () => { + const promises = product.variants.map(async (variant) => { + const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`) + return { + ...variant, + sla: dataSLA + } + }) + const variantData = await Promise.all(promises) + product.variants = variantData + + setIsLoadingSLA(false) + } + fetchData() + }, [product]) + const productSimilarQuery = [ product?.name, `fq=-product_id_i:${product.id}`, @@ -228,6 +250,51 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { active={informationTab == 'specification'} className='rounded border border-gray_r-6 divide-y divide-gray_r-6' > + <SpecificationContent label='Ketersediaan'> + <span> + {isLoadingSLA ? ( + <Button color='gray'> + <Spinner aria-label='Alternate spinner button example' /> + <span className='pl-3'>Loading...</span> + </Button> + ) : activeVariant?.sla?.slaDate != '-' ? ( + <button + type='button' + title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`} + className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${ + activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' + }`} + > + <div + className={`flex-1 text-sm ${ + activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : '' + }`} + > + {activeVariant?.sla?.slaDate} + </div> + <div className='flex-end'> + <svg + aria-hidden='true' + fill='none' + stroke='currentColor' + stroke-width='1.5' + className={`w-7 h-7 text-sm ${ + activeVariant?.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> + ) : ( + '-' + )} + </span> + </SpecificationContent> <SpecificationContent label='Jumlah Varian'> <span>{product?.variantTotal} Varian</span> </SpecificationContent> @@ -343,7 +410,7 @@ const TabContent = ({ children, active, className, ...props }) => ( ) const SpecificationContent = ({ children, label }) => ( - <div className='flex justify-between p-3'> + <div className='flex justify-between p-3 items-center'> <span className='text-gray_r-11'>{label}</span> {children} </div> |