summaryrefslogtreecommitdiff
path: root/src/lib/product/components/Product/ProductDesktopVariant.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/product/components/Product/ProductDesktopVariant.jsx')
-rw-r--r--src/lib/product/components/Product/ProductDesktopVariant.jsx151
1 files changed, 88 insertions, 63 deletions
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 44ae04bd..6b4ab1e1 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -1,3 +1,4 @@
+import { AlertTriangle } from 'lucide-react';
import { Box, Button, Skeleton, Tooltip } from '@chakra-ui/react';
import { HeartIcon } from '@heroicons/react/24/outline';
import { Info, MessageCircleIcon, Share2Icon } from 'lucide-react';
@@ -249,6 +250,7 @@ const ProductDesktopVariant = ({
});
router.push('/shop/quotation?source=buy');
};
+ const hasPrice = Number(product?.price?.price) > 0;
const variantSectionRef = useRef(null);
const goToVariantSection = () => {
@@ -314,6 +316,17 @@ const ProductDesktopVariant = ({
return (
<DesktopView>
+ <div className='relative'>
+ {!hasPrice && (
+ <div className='absolute inset-0 z-[20] flex items-center justify-center pointer-events-none select-none'>
+ <img
+ src='/images/produk_tidak_tersedia.svg'
+ alt='Produk tidak tersedia'
+ className='w-[35%] opacity-50 -translate-x-[3%] -translate-y-[-70%]'
+ />
+ </div>
+ )}
+ </div>
<div className='container mx-auto pt-10'>
<div className='flex'>
<div className='w-full flex flex-wrap'>
@@ -326,9 +339,21 @@ const ProductDesktopVariant = ({
</div>
<div className='w-7/12 px-6'>
+ {!hasPrice && (
+ <div className='bg-red-50 p-2 py-1.5 rounded-lg border border-red-500 flex gap-1 items-center '>
+ <AlertTriangle
+ size={18}
+ className='text-red-600 shrink-0 mx-2'
+ />
+ <h1 className='text-red-600 font-normal text-h-sm'>
+ Maaf untuk saat ini Produk yang anda cari tidak tersedia
+ </h1>
+ </div>
+ )}
<h1 className='text-title-md leading-10 font-medium'>
{product?.name}
</h1>
+
<div className='mt-10'>
<div className='flex p-3 bg-gray_r-4'>
<div className='w-4/12 text-gray_r-12/70'>Item Code</div>
@@ -430,73 +455,55 @@ const ProductDesktopVariant = ({
</div>
</div>
<div className='w-[33%]'>
- {product?.isFlashsale > 0 &&
- product?.price?.discountPercentage > 0 ? (
+ {product?.price?.price > 0 && (
<>
- <div className='flex gap-x-1 items-center mt-2'>
- <div className='badge-solid-red text-caption-1'>
- {product?.price?.discountPercentage}%
- </div>
- <div className='text-gray_r-9 line-through text-caption-1'>
- {currencyFormat(product?.price?.price)}
- </div>
- <div className='text-danger-500 font-semibold text-xl'>
- {currencyFormat(product?.price?.priceDiscount)}
- </div>
- </div>
- <div className='text-gray_r-9 text-base font-normal mt-1'>
- Termasuk PPN:{' '}
- {currencyFormat(
- product?.price?.priceDiscount * process.env.NEXT_PUBLIC_PPN
- )}
- </div>
- </>
- ) : (
- <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
- {product?.price?.price > 0 ? (
+ {product?.isFlashsale > 0 &&
+ product?.price?.discountPercentage > 0 ? (
<>
- {currencyFormat(product?.price?.price)}
+ <div className='flex gap-x-1 items-center mt-2'>
+ <div className='badge-solid-red text-caption-1'>
+ {product?.price?.discountPercentage}%
+ </div>
+ <div className='text-gray_r-9 line-through text-caption-1'>
+ {currencyFormat(product?.price?.price)}
+ </div>
+ <div className='text-danger-500 font-semibold text-xl'>
+ {currencyFormat(product?.price?.priceDiscount)}
+ </div>
+ </div>
<div className='text-gray_r-9 text-base font-normal mt-1'>
Termasuk PPN:{' '}
{currencyFormat(
- product?.price?.price * process.env.NEXT_PUBLIC_PPN
+ product?.price?.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,&nbsp;
- <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 className='text-danger-500 font-semibold mt-1 text-title-md'>
+ {currencyFormat(product?.price?.price)}
+ <div className='text-gray_r-9 text-base font-normal mt-1'>
+ Termasuk PPN:{' '}
+ {currencyFormat(
+ product?.price?.price * process.env.NEXT_PUBLIC_PPN
+ )}
+ </div>
+ </h3>
)}
- </h3>
+ </>
)}
+
<div className='flex gap-x-5 items-center py-5'>
<div className='relative flex items-center'>
<button
type='button'
- className='absolute left-0 px-2 py-1 h-full text-gray-500'
+ className='absolute left-0 px-2 py-1 h-full text-gray-500 disabled:opacity-40'
onClick={() => {
const n = parseInt(String(quantityInput), 10);
const next = Number.isFinite(n) ? Math.max(1, n - 1) : 1;
setQuantityInput(next);
}}
+ disabled={!hasPrice}
>
-
</button>
@@ -518,43 +525,40 @@ const ProductDesktopVariant = ({
if (['e', 'E', '+', '-', '.'].includes(e.key))
e.preventDefault();
}}
- className='w-24 h-10 text-center border border-gray-300 rounded focus:outline-none'
+ className='w-24 h-10 text-center border border-gray-300 rounded focus:outline-none disabled:bg-gray-100 disabled:text-gray-400'
+ disabled={!hasPrice}
/>
<button
type='button'
- className='absolute right-0 px-2 py-1 h-full text-gray-500'
+ className='absolute right-0 px-2 py-1 h-full text-gray-500 disabled:opacity-40'
onClick={() => {
const n = parseInt(String(quantityInput), 10);
const next = (Number.isFinite(n) ? n : 0) + 1;
setQuantityInput(next);
}}
+ disabled={!hasPrice}
>
+
</button>
</div>
<div>
- {/* <Skeleton
+ <Skeleton
isLoaded={!isLoadingSLA}
h='21px'
- // w={16}
className={
- product?.sla?.qty < 10 ? 'text-red-600 font-medium' : ''
+ !hasPrice || fakeStock < 10
+ ? 'text-red-600 font-medium'
+ : ''
}
>
- Stock : {product?.sla?.qty}{' '}
- </Skeleton> */}
- <Skeleton
- isLoaded={!isLoadingSLA}
- h='21px'
- className={fakeStock < 10 ? 'text-red-600 font-medium' : ''}
- >
- Stock : {fakeStock}{' '}
+ Stock : {hasPrice ? fakeStock : 'Habis'}
</Skeleton>
</div>
+
<div>
- {qtyPickUp > 0 && (
+ {qtyPickUp > 0 && hasPrice && (
<Link href='/panduan-pick-up-service' className='group'>
<Image
src='/images/PICKUP-NOW.png'
@@ -565,20 +569,23 @@ const ProductDesktopVariant = ({
)}
</div>
</div>
- {qtyPickUp > 0 && (
+ {/* {qtyPickUp > 0 && (
<>
<div className='text-[12px] mt-1 text-red-500 italic'>
* {qtyPickUp} barang bisa di pickup
</div>
<div className='h-4' />
</>
- )}
+ )} */}
<div className='flex gap-x-3'>
<Button
onClick={() => handleAddToCart(product.id)}
className='w-full'
colorScheme='red'
variant={'outline'}
+ isDisabled={
+ !product?.price?.price || product?.price?.price <= 0
+ }
>
Keranjang
</Button>
@@ -586,6 +593,9 @@ const ProductDesktopVariant = ({
onClick={() => handleBuy(product.id)}
className='w-full'
colorScheme='red'
+ isDisabled={
+ !product?.price?.price || product?.price?.price <= 0
+ }
>
Beli
</Button>
@@ -595,6 +605,7 @@ const ProductDesktopVariant = ({
color={'red'}
colorScheme='white'
className='w-full border-2 p-2 gap-1 mt-2 hover:bg-slate-100 flex items-center'
+ isDisabled={!product?.price?.price || product?.price?.price <= 0}
>
<ImageNext
src='/images/doc_red.svg'
@@ -692,6 +703,20 @@ const ProductDesktopVariant = ({
alt={product.name}
className='h-32 object-contain object-center w-full border border-gray_r-4'
/>
+ {/* Watermark jika produk nonaktif */}
+ {/* {(!product?.price?.price || product?.price?.price <= 0) && (
+ <div className='absolute inset-0 flex items-center justify-center'>
+ <span
+ className='text-[60px] font-extrabold text-green-700/20 rotate-[-25deg] select-none'
+ style={{
+ textShadow: '0 0 3px rgba(0,0,0,0.1)',
+ letterSpacing: '6px',
+ }}
+ >
+ NONAKTIF
+ </span>
+ </div>
+ )} */}
</div>
<div className='ml-3 flex flex-1 items-center font-normal'>
{product.name}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 21:18:32 +0000