summaryrefslogtreecommitdiff
path: root/src/lib/product/components/Product
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/product/components/Product')
-rw-r--r--src/lib/product/components/Product/ColumnsSLA.jsx81
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx73
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx55
3 files changed, 101 insertions, 108 deletions
diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx
new file mode 100644
index 00000000..33da703a
--- /dev/null
+++ b/src/lib/product/components/Product/ColumnsSLA.jsx
@@ -0,0 +1,81 @@
+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 { useQuery } from 'react-query'
+
+const ColumnSLA = ({ variant, product }) => {
+ const fetchSLA = async () => await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+ const dataSLA = useQuery(`VariantSLA-${variant.id}`, fetchSLA, { refetchOnWindowFocus: false })
+
+ 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>
+ )}
+ </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' : ''
+ }`}
+ >
+ {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>
+ ) : (
+ '-'
+ )}
+ </td>
+ </>
+ )
+}
+
+export default memo(ColumnSLA)
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 2ea08ea7..937f2746 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -20,7 +20,8 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
import useAuth from '@/core/hooks/useAuth'
import ImageNext from 'next/image'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
-import CountDown from '@/core/components/elements/CountDown/CountDown'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import ColumnsSLA from './ColumnsSLA'
const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -184,7 +185,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
setIsLoadingSLA(false)
}
- fetchData()
+ if (product.variantTotal == 1) fetchData()
}, [product])
return (
@@ -568,71 +569,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
{variant.code}
</td>
<td>{variant.attributes.join(', ') || '-'}</td>
- <td>
- {isLoadingSLA ? (
- <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'>
- {isLoadingSLA ? (
- <Button color='gray'>
- <Spinner aria-label='Alternate spinner button example' />
- <span className='pl-3'>Loading...</span>
- </Button>
- ) : variant?.sla?.slaDate != '-' ? (
- <button
- type='button'
- title={`Masa Persiapan Barang ${variant?.sla?.slaDate}`}
- className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
- variant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
- }`}
- >
- <div
- className={`flex-1 text-caption-1 ${
- variant?.sla?.slaDate === 'indent' ? 'text-white' : ''
- }`}
- >
- {variant?.sla?.slaDate}
- </div>
- <div className='flex-end'>
- <svg
- aria-hidden='true'
- fill='none'
- stroke='currentColor'
- stroke-width='1.5'
- className={`w-7 h-7 ${
- variant?.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>
- ) : (
- '-'
- )}
- </td>
+ <LazyLoadComponent>
+ <ColumnsSLA variant={variant} product={product} />
+ </LazyLoadComponent>
<td>
{variant.price.discountPercentage > 0 &&
variant.price.priceDiscount > 0 && (
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 9c0630a6..6b0b27a5 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -83,35 +83,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
})
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)
- if (product.variants.length === 1) {
- setActiveVariant({
- id: product.variants[0].id,
- code: product.variants[0].code,
- name: product.variants[0].parent.name,
- price: product.variants[0].price,
- stock: product.variants[0].stock,
- weight: product.variants[0].weight,
- sla: product.variants[0].sla,
- hasProgram: product.variants[0].hasProgram
- })
- }
- }
- fetchData()
- }, [product])
-
- useEffect(() => {
if (!selectedVariant && variantOptions.length == 1) {
setSelectedVariant(variantOptions[0])
}
@@ -123,16 +94,23 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const variantAttributes =
variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
- setActiveVariant({
+ const newActiveVariant = {
id: variant.id,
code: variant.code,
name: variant.parent.name + variantAttributes,
price: variant.price,
stock: variant.stock,
weight: variant.weight,
- sla: variant.sla,
hasProgram: variant.hasProgram
- })
+ }
+
+ setActiveVariant(newActiveVariant)
+
+ const fetchSLA = async () => {
+ const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+ setActiveVariant({ ...newActiveVariant, sla: dataSLA })
+ }
+ fetchSLA()
}
}, [selectedVariant, product])
@@ -355,12 +333,7 @@ const ProductMobile = ({ 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>
- ) : selectedVariant ? (
+ {selectedVariant ? (
activeVariant?.sla?.slaDate != '-' ? (
<button
type='button'
@@ -412,13 +385,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
<span>{activeVariant?.code || '-'}</span>
</SpecificationContent>
<SpecificationContent label='Stok'>
- {activeVariant?.stock > 0 && (
+ {activeVariant?.sla?.qty > 0 && (
<span className='flex gap-x-1.5'>
<div className='badge-solid-red'>Ready Stock</div>
- <div className='badge-gray'>{activeVariant?.stock > 5 ? '> 5' : '< 5'}</div>
+ <div className='badge-gray'>{activeVariant?.sla?.qty}</div>
</span>
)}
- {activeVariant?.stock == 0 && (
+ {activeVariant?.sla?.qty == 0 && (
<a
href={whatsappUrl('product', {
name: product.name,
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:57:42 +0000