diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/PriceAction.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/PriceAction.tsx | 338 |
1 files changed, 246 insertions, 92 deletions
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 850c2d9d..ffc9ba40 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -12,12 +12,16 @@ import { getAuth } from '~/libs/auth'; import useDevice from '@/core/hooks/useDevice'; import odooApi from '~/libs/odooApi'; import { Button, Skeleton } from '@chakra-ui/react'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; type Props = { product: IProductDetail; }; -const PPN : number = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0; +const PPN: number = process.env.NEXT_PUBLIC_PPN + ? parseFloat(process.env.NEXT_PUBLIC_PPN) + : 0; const PriceAction = ({ product }: Props) => { const { activePrice, @@ -84,26 +88,59 @@ const PriceAction = ({ product }: Props) => { > {!!activePrice && activePrice.price > 0 && ( <> - <div className='flex items-end gap-x-2'> - {activePrice.discount_percentage > 0 && ( - <> - <div className={style['disc-badge']}> - {Math.floor(activePrice.discount_percentage)}% - </div> - <div className={style['disc-price']}> + <DesktopView> + <div className='flex items-end gap-x-2'> + {activePrice.discount_percentage > 0 && ( + <> + <div className={style['disc-badge']}> + {Math.floor(activePrice.discount_percentage)}% + </div> + <div className={style['disc-price']}> + Rp {formatCurrency(activePrice.price || 0)} + </div> + </> + )} + <div className={style['main-price']}> + Rp {formatCurrency(activePrice.price_discount || 0)} + </div> + </div> + <div className='h-1' /> + <div className={style['secondary-text']}> + Termasuk PPN: Rp{' '} + {formatCurrency(Math.round(activePrice.price_discount * PPN))} + </div> + </DesktopView> + <MobileView> + <div className='flex items-end gap-x-2'> + {activePrice.discount_percentage > 0 ? ( + <> + <div className={style['disc-badge']}> + {Math.floor(activePrice.discount_percentage)}% + </div> + + {/* harga setelah diskon (main-price) di kiri */} + <div className={style['main-price']}> + Rp {formatCurrency(activePrice.price_discount || 0)} + </div> + + {/* harga coret di kanan */} + <div className={style['disc-price']}> + Rp {formatCurrency(activePrice.price || 0)} + </div> + </> + ) : ( + // kalau tidak ada diskon, tampilkan harga normal saja + <div className={style['main-price']}> Rp {formatCurrency(activePrice.price || 0)} </div> - </> - )} - <div className={style['main-price']}> - Rp {formatCurrency(activePrice.price_discount || 0)} + )} </div> - </div> - <div className='h-1' /> - <div className={style['secondary-text']}> - Termasuk PPN: Rp{' '} - {formatCurrency(Math.round(activePrice.price_discount * PPN))} - </div> + + <div className='text-md text-gray-500 shadow-0'> + Termasuk PPN: Rp{' '} + {formatCurrency(Math.round(activePrice.price_discount * PPN))} + </div> + </MobileView> </> )} @@ -120,92 +157,209 @@ const PriceAction = ({ product }: Props) => { </span> )} - <div className='h-4' /> - <div className='flex gap-x-5 items-center'> - <div className='relative flex items-center'> - <button - type='button' - className='absolute left-0 px-2 py-1 h-full text-gray-500' - onClick={() => - setQuantityInput(String(Math.max(1, Number(quantityInput) - 1))) - } - > - - - </button> - <input - type='number' - id='quantity' - min={1} - value={quantityInput} - onChange={(e) => setQuantityInput(e.target.value)} - className={style['quantity-input']} - /> - <button - type='button' - className='absolute right-0 px-2 py-1 h-full text-gray-500' - onClick={() => setQuantityInput(String(Number(quantityInput) + 1))} - > - + - </button> - </div> + <DesktopView> + <div className='h-4' /> + <div className='flex gap-x-5 items-center'> + {/* Qty */} + <div className='relative flex items-center'> + <button + type='button' + className='absolute left-0 px-2 py-1 h-full text-gray-500' + onClick={() => + setQuantityInput(String(Math.max(1, Number(quantityInput) - 1))) + } + > + - + </button> + <input + type='number' + id='quantity' + min={1} + value={quantityInput} + onChange={(e) => setQuantityInput(e.target.value)} + className={style['quantity-input']} + /> + <button + type='button' + className='absolute right-0 px-2 py-1 h-full text-gray-500' + onClick={() => + setQuantityInput(String(Number(quantityInput) + 1)) + } + > + + + </button> + </div> - <div> - <Skeleton - isLoaded={sla} - h='21px' - // w={16} - className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''} - > - Stock : {sla?.qty}{' '} - </Skeleton> - {/* <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}> - {' '} - </span> */} - </div> - <div> - {qtyPickUp > 0 && ( - <Link href='/panduan-pick-up-service' className='group'> - <Image - src='/images/PICKUP-NOW.png' - className='group-hover:scale-105 transition-transform duration-200' - alt='pickup now' - width={100} - height={12} - /> - </Link> - )} + {/* Stok */} + <div> + <Skeleton + isLoaded={sla} + h='21px' + className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''} + > + Stock : {sla?.qty}{' '} + </Skeleton> + </div> + + {/* Pickup badge */} + <div> + {qtyPickUp > 0 && ( + <div className='flex items-center gap-2'> + <Link href='/panduan-pick-up-service' className='group'> + <Image + src='/images/PICKUP-NOW.png' + className='group-hover:scale-105 transition-transform duration-200' + alt='pickup now' + width={100} + height={12} + /> + </Link> + </div> + )} + </div> </div> - </div> - {qtyPickUp > 0 && ( - <div className='text-[12px] mt-1 text-red-500 italic'> + <span className='text-[12px] text-red-500 italic'> * {qtyPickUp} barang bisa di pickup + </span> + </DesktopView> + + {/* ===== MOBILE: grid kiri-kanan, kanan hanya qty ===== */} + <MobileView> + <div className='grid grid-cols-12 items-start gap-3'> + {/* Kiri */} + <div className='col-span-8 mt-2'> + <div className='flex items-center gap-1'> + <Skeleton + isLoaded={sla} + h='21px' + w='auto' // ⬅️ penting: biar selebar konten + display='inline-block' // ⬅️ penting: jangan full width + className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''} + > + Stock : {sla?.qty} + </Skeleton> + + {qtyPickUp > 0 && ( + <Link + href='/panduan-pick-up-service' + className='inline-block shrink-0' + > + <Image + src='/images/PICKUP-NOW.png' + className='align-middle' + alt='pickup now' + width={90} + height={12} + /> + </Link> + )} + </div> + + {qtyPickUp > 0 && ( + <div className='text-[12px] mt-1 text-red-500 italic'> + * {qtyPickUp} barang bisa di pickup + </div> + )} + </div> + + {/* Kanan: hanya qty, rata kanan */} + <div className='col-span-4 flex justify-end'> + <div className='inline-flex items-stretch border rounded-xl overflow-hidden'> + <button + type='button' + className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500' + onClick={() => + setQuantityInput( + String(Math.max(1, Number(quantityInput) - 1)) + ) + } + aria-label='Kurangi' + > + <span className='text-2xl leading-none'>–</span> + </button> + + <input + type='number' + id='quantity' + min={1} + value={quantityInput} + onChange={(e) => setQuantityInput(e.target.value)} + className='h-11 md:h-12 w-16 md:w-20 text-center text-lg md:text-xl outline-none border-x + [appearance:textfield] + [&::-webkit-outer-spin-button]:appearance-none + [&::-webkit-inner-spin-button]:appearance-none' + /> + + <button + type='button' + className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500' + onClick={() => + setQuantityInput(String(Number(quantityInput) + 1)) + } + aria-label='Tambah' + > + <span className='text-2xl leading-none'>+</span> + </button> + </div> + </div> </div> - )} + </MobileView> <div className='h-4' /> - <div className={`${style['action-wrapper']}`}> - <AddToCart - products={product} - variantId={activeVariantId} - quantity={Number(quantityInput)} - /> - {!isApproval && ( + <DesktopView> + <div className={`${style['action-wrapper']}`}> <AddToCart + products={product} + variantId={activeVariantId} + quantity={Number(quantityInput)} + /> + {!isApproval && ( + <AddToCart + source='buy' + products={product} + variantId={activeVariantId} + quantity={Number(quantityInput)} + /> + )} + </div> + <div className='mt-4'> + <AddToQuotation source='buy' products={product} variantId={activeVariantId} quantity={Number(quantityInput)} /> - )} - </div> - <div className='mt-4'> - <AddToQuotation - source='buy' - products={product} - variantId={activeVariantId} - quantity={Number(quantityInput)} - /> - </div> + </div> + </DesktopView> + <MobileView> + <div className='grid grid-cols-12 gap-2'> + <div className='col-span-2'> + <AddToQuotation + source='buy' + products={product} + variantId={activeVariantId} + quantity={Number(quantityInput)} + /> + </div> + <div className='col-span-5'> + <AddToCart + products={product} + variantId={activeVariantId} + quantity={Number(quantityInput)} + /> + </div> + <div className='col-span-5'> + {!isApproval && ( + <AddToCart + source='buy' + products={product} + variantId={activeVariantId} + quantity={Number(quantityInput)} + /> + )} + </div> + </div> + </MobileView> </div> ); }; |