summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/checkout/components/Checkout.jsx143
-rw-r--r--src/lib/product/api/productApi.js2
-rw-r--r--src/lib/product/api/variantApi.js2
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx13
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx26
5 files changed, 111 insertions, 75 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index ce691403..6d2f62e0 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -4,7 +4,13 @@ import Link from '@/core/components/elements/Link/Link'
import useAuth from '@/core/hooks/useAuth'
import { getItemAddress } from '@/core/utils/address'
import addressesApi from '@/lib/address/api/addressesApi'
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
+import {
+ ArrowLongLeftIcon,
+ BanknotesIcon,
+ ChevronLeftIcon,
+ ClockIcon,
+ ExclamationCircleIcon
+} from '@heroicons/react/24/outline'
import React, { useEffect, useRef, useState } from 'react'
import _ from 'lodash'
import { deleteItemCart, getCartApi } from '@/core/utils/cart'
@@ -93,6 +99,8 @@ const Checkout = () => {
const [etd, setEtd] = useState(null)
const [etdFix, setEtdFix] = useState(null)
const [bottomPopup, SetBottomPopup] = useState(null)
+ const [bottomPopupTnC, SetBottomPopupTnC] = useState(null)
+ const [itemTnC, setItemTnC] = useState(null)
const [listVouchers, SetListVoucher] = useState(null)
const [discountVoucher, SetDiscountVoucher] = useState(0)
const [codeVoucher, SetCodeVoucher] = useState(null)
@@ -370,11 +378,59 @@ const Checkout = () => {
handleUseVoucher(code, !isChecked)
}
+ const handlingTnC = async (item) => {
+ setItemTnC(item)
+ SetBottomPopupTnC(true)
+ }
// const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
return (
<>
<BottomPopup
+ className='w-full md:!w-[40%] !min-h-[90vh]'
+ active={bottomPopupTnC}
+ close={() => {
+ SetBottomPopupTnC(false)
+ SetBottomPopup(false)
+ }}
+ title={
+ <div>
+ <button className='flex gap-x-2 items-center' onClick={() => SetBottomPopupTnC(false)}>
+ <ChevronLeftIcon class='h- w-5 text-black' /> <span className='text-lg'>Voucher</span>
+ </button>{' '}
+ </div>
+ }
+ >
+ <div className='row'>
+ <h3 className='font-semibold mb-4'> {itemTnC?.name}</h3>
+ <div className='flex items-center justify-between bg-gray-50 rounded-lg border-t border-b border-green-50 p-3'>
+ <div className='flex items-center gap-x-1'>
+ <ClockIcon class='h-6 w-6 text-green-500' />{' '}
+ <span className='text-sm'>
+ {' '}
+ Berakhir dalam :{' '}
+ <span className='text-sm text-red-500'>{itemTnC?.remainingTime} lagi</span>
+ </span>
+ </div>
+ <div className='flex items-center gap-x-1'>
+ <BanknotesIcon class='h-6 w-6 text-green-500' />
+ <span className='text-sm'> Kode Voucher : </span>
+ <span className='text-red-500 font-semibold'>{itemTnC?.code}</span>
+ </div>
+ </div>
+ <div>
+ <h3 className='font-semibold mb-4 mt-4'>Syarat dan Ketentuan</h3>
+ <hr />
+ <div className='p-2 pl-4 pr-4 mx-auto text-sm'>
+ <div
+ className='prose prose-sm'
+ dangerouslySetInnerHTML={{ __html: itemTnC?.termsConditions }}
+ ></div>
+ </div>
+ </div>
+ </div>
+ </BottomPopup>
+ <BottomPopup
className='w-full md:!w-[40%] !min-h-[350px]'
active={bottomPopup}
close={() => SetBottomPopup(false)}
@@ -488,10 +544,6 @@ const Checkout = () => {
{!loadingVoucher &&
listVouchers?.map((item) => (
<div key={item.id} className='relative'>
- {item.canApply === false && (
- <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
- )}
-
<div
className={`border border-solid mb-5 w-full hover:cursor-pointer p-2 pl-4 pr-4 `}
>
@@ -508,67 +560,23 @@ const Checkout = () => {
</p>
</div>
)}
- {!item.canApply && item.applyStatus === 'MPA-HF' && (
+ {!item.canApply && (
<div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
+ class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50'
role='alert'
+ onClick={() => handlingTnC(item)}
>
- <p className='text-sm'>Voucher tidak bisa digabung dengan promo lainya</p>
- </div>
- )}
- {!item.canApply && item.applyStatus === 'UM' && (
- <div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
- role='alert'
- >
- <p className='text-sm'>
- Tambah produk{' '}
- <span className='text-red-500 font-bold '>{item.manufactureNames}</span>{' '}
- senilai{' '}
- <span className='text-red-500 font-bold'>
- {currencyFormat(item.minPurchaseAmount)}
- </span>{' '}
- untuk pakai promo ini
+ <p>
+ Voucher tidak bisa di gunakan,{' '}
+ <span className='text-red font-bold'>Baca Selengkapnya !</span>
</p>
</div>
)}
- {!item.canApply &&
- item.applyStatus === 'MPA' &&
- item.manufactureNames != '' && (
- <div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
- role='alert'
- >
- <p className='text-sm'>
- Tambah produk{' '}
- <span className='text-red-500 font-bold'>{item.manufactureNames}</span>{' '}
- senilai{' '}
- <span className='text-red-500 font-bold'>
- {currencyFormat(item.differenceToApply)}
- </span>{' '}
- untuk pakai promo ini
- </p>
- </div>
+ <div className={`flex gap-x-3 relative`}>
+ {item.canApply === false && (
+ <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
)}
-
- {!item.canApply &&
- item.applyStatus === 'MPA' &&
- item.manufactureNames === '' && (
- <div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
- role='alert'
- >
- <p className='text-sm'>
- Tambah{' '}
- <span className='text-red-500 font-bold'>
- {currencyFormat(item.differenceToApply)}
- </span>{' '}
- untuk pakai promo ini{' '}
- </p>
- </div>
- )}
- <div className={`flex gap-x-3`}>
<div className='hidden md:w-[250px] md:block'>
<Image src={item.image} alt={item.name} className={`object-cover`} />
</div>
@@ -620,10 +628,15 @@ const Checkout = () => {
stroke-linejoin='round'
></path>
</svg>
- <span className='text-left ml-3 text-sm '>
- Berakhir dalam{' '}
- <span className='text-red-600'>{item.remainingTime}</span> lagi{' '}
- </span>
+ <div className='flex justify-between items-center'>
+ <div className='text-left ml-3 text-sm '>
+ Berakhir dalam{' '}
+ <span className='text-red-600'>{item.remainingTime}</span> lagi,{' '}
+ </div>
+ <div className='text-sm ml-2 text-red-600' onClick={() => handlingTnC(item)} >
+ Baca S&K
+ </div>
+ </div>
</div>
</div>
</div>
@@ -1496,13 +1509,13 @@ function calculateEstimatedArrival(duration) {
return ''
}
-function splitDuration(duration){
+function splitDuration(duration) {
if (duration) {
let estimationDate = null
- if (duration.includes('-')){
+ if (duration.includes('-')) {
estimationDate = duration.split('-')
estimationDate = parseInt(estimationDate[1])
- }else{
+ } else {
estimationDate = parseInt(duration)
}
diff --git a/src/lib/product/api/productApi.js b/src/lib/product/api/productApi.js
index 33f1265c..bc6169a4 100644
--- a/src/lib/product/api/productApi.js
+++ b/src/lib/product/api/productApi.js
@@ -2,7 +2,7 @@ import odooApi from '@/core/api/odooApi'
const productApi = async ({ id, headers = {} }) => {
if (!id) return
- const dataProduct = await odooApi('GET', `/api/v2/product/${id}`, {}, headers)
+ const dataProduct = await odooApi('GET', `/api/v3/product/${id}`, {}, headers)
return dataProduct
}
diff --git a/src/lib/product/api/variantApi.js b/src/lib/product/api/variantApi.js
index 47273dd7..06cf4c9e 100644
--- a/src/lib/product/api/variantApi.js
+++ b/src/lib/product/api/variantApi.js
@@ -2,7 +2,7 @@ import odooApi from '@/core/api/odooApi'
const variantApi = async ({ id, headers = {} }) => {
if (!id) return
- const dataProduct = await odooApi('GET', `/api/v2/product_variant/${id}`, {}, headers)
+ const dataProduct = await odooApi('GET', `/api/v3/product_variant/${id}`, {}, headers)
return dataProduct
}
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 3b9296a8..618c35f5 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -197,7 +197,11 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
{product?.flashSale?.remainingTime > 0 && (
<div className={`absolute bottom-0 w-full`}>
<div className='absolute bottom-0 w-full h-full'>
- <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} />
+ <ImageNext
+ src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'}
+ width={1000}
+ height={100}
+ />
</div>
<div className='relative'>
<div className='flex gap-x-2 items-center p-2'>
@@ -553,7 +557,12 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
<tbody>
{product.variants.map((variant, index) => (
<tr key={variant.id}>
- <td>{variant.code}</td>
+ <td className='flex items-center justify-center gap-x-1'>
+ {variant.isFlashsale && (
+ <span className='blink-color-flash-sale'>&#128498;</span>
+ )}
+ {variant.code}
+ </td>
<td>{variant.attributes.join(', ') || '-'}</td>
<td>
{isLoadingSLA ? (
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index d25d0861..56f20aac 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -62,12 +62,25 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
hasProgram: false
})
- const variantOptions = product.variants?.map((variant) => ({
- value: variant.id,
- label:
- (variant.code ? `[${variant.code}] ` : '') +
- (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name)
- }))
+ const variantOptions = product.variants?.map((variant) => {
+ let label = []
+ if (variant.isFlashsale) {
+ label.push("<span class='blink-color-flash-sale'>&#128498;</span>")
+ }
+ if (variant.code) {
+ label.push(`[${variant.code}]`)
+ }
+ if (variant.attributes.length > 0) {
+ label.push(variant.attributes.join(', '))
+ } else {
+ label.push(product.name)
+ }
+
+ return {
+ value: variant.id,
+ label: label.join(' ')
+ }
+ })
useEffect(() => {
const fetchData = async () => {
@@ -279,6 +292,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
name='variant'
classNamePrefix='form-select'
options={variantOptions}
+ formatOptionLabel={({ label }) => <div dangerouslySetInnerHTML={{ __html: label }} />}
className='mt-2'
value={selectedVariant}
onChange={(option) => setSelectedVariant(option)}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-25 18:12:52 +0000