summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx150
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx80
2 files changed, 228 insertions, 2 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 4a1590ba..90387a9b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -15,6 +15,11 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import ProductCard from '../ProductCard'
import productSimilarApi from '../../api/productSimilarApi'
import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagAddToCart } from '@/core/utils/googleTag'
+import odooApi from '@/core/api/odooApi'
+import { last } from 'lodash-contrib'
+import { m } from 'framer-motion'
+import { Button, Spinner } from 'flowbite-react'
import PromotionType from '@/lib/promotinProgram/components/PromotionType'
import useAuth from '@/core/hooks/useAuth'
@@ -28,6 +33,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const [product, setProducts] = useState(products)
const [addCartAlert, setAddCartAlert] = useState(false)
+ const [isLoadingSLA, setIsLoadingSLA] = useState(true)
const [promotionType, setPromotionType] = useState(false)
const [promotionActiveId, setPromotionActiveId] = useState(null)
const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
@@ -134,6 +140,23 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
if (!productSimilarInBrand) loadProductSimilarInBrand()
}, [product, productSimilarInBrand])
+ 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])
+
return (
<DesktopView>
<div className='container mx-auto pt-10'>
@@ -176,7 +199,65 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
)}
</div>
</div>
- <div className='flex p-3 bg-gray_r-4'>
+ <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 ? (
+ <button
+ type='button'
+ onClick={goToVariantSection}
+ className={`flex gap-x-1 items-center p-2 rounded-lg w-auto btn-light`}
+ >
+ <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[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>
+ )}
+ </div>
+ </div>
+ <div className='flex p-3 '>
<div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
<div className='w-3/4'>
{product?.weight > 0 && <span>{product?.weight} KG</span>}
@@ -349,6 +430,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
<tr>
<th>Part Number</th>
<th>Varian</th>
+ <th>Stock</th>
+ <th>Persiapan Barang</th>
<th>Harga</th>
<th>Jumlah</th>
<th>Action</th>
@@ -360,6 +443,71 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
<td>{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>
+ <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 fa1e2521..91de173a 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -16,6 +16,8 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
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'
const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -25,6 +27,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
const [addCartAlert, setAddCartAlert] = useState(false)
+ const [isLoadingSLA, setIsLoadingSLA] = useState(true)
const [promotionType, setPromotionType] = useState(false)
const [promotionActiveId, setPromotionActiveId] = useState(null)
@@ -54,6 +57,35 @@ 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])
}
@@ -72,6 +104,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
price: variant.price,
stock: variant.stock,
weight: variant.weight,
+ sla: variant.sla,
hasProgram: variant.hasProgram
})
}
@@ -246,6 +279,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>
+ ) : selectedVariant ? 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>
@@ -361,7 +439,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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 11:15:16 +0000