diff options
Diffstat (limited to 'src/lib/checkout/components')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 1010 | ||||
| -rw-r--r-- | src/lib/checkout/components/CheckoutOld.jsx | 811 |
2 files changed, 1626 insertions, 195 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 07d9acb6..5a9dcf7f 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -4,32 +4,44 @@ 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 CartApi from '@/lib/cart/api/CartApi' import { ExclamationCircleIcon } from '@heroicons/react/24/outline' import React, { useEffect, useRef, useState } from 'react' import _ from 'lodash' -import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart' +import { deleteItemCart, getCartApi } from '@/core/utils/cart' import currencyFormat from '@/core/utils/currencyFormat' import { toast } from 'react-hot-toast' import getFileBase64 from '@/core/utils/getFileBase64' -import checkoutApi from '../api/checkoutApi' +// import checkoutApi from '../api/checkoutApi' import { useRouter } from 'next/router' import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' import axios from 'axios' import Image from '@/core/components/elements/Image/Image' +import imageNext from 'next/image' import MobileView from '@/core/components/views/MobileView' import DesktopView from '@/core/components/views/DesktopView' import ExpedisiList from '../api/ExpedisiList' import whatsappUrl from '@/core/utils/whatsappUrl' import { createSlug } from '@/core/utils/slug' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { useQuery } from 'react-query' import { gtagPurchase } from '@/core/utils/googleTag' +import { findVoucher, getVoucher } from '../api/getVoucher' const SELF_PICKUP_ID = 32 +const { checkoutApi } = require('../api/checkoutApi') +const { getProductsCheckout } = require('../api/checkoutApi') + const Checkout = () => { const router = useRouter() const auth = useAuth() + + const [activeVoucher, SetActiveVoucher] = useState(null) + + const { data: cartCheckout } = useQuery('cartCheckout-' + activeVoucher, () => + getProductsCheckout(activeVoucher) + ) + const [selectedAddress, setSelectedAddress] = useState({ shipping: null, invoicing: null @@ -66,8 +78,6 @@ const Checkout = () => { }, [addresses]) const [products, setProducts] = useState(null) - const [totalAmount, setTotalAmount] = useState(0) - const [totalDiscountAmount, setTotalDiscountAmount] = useState(0) const [totalWeight, setTotalWeight] = useState(0) const [priceCheck, setPriceCheck] = useState(false) const [listExpedisi, setExpedisi] = useState([]) @@ -81,6 +91,60 @@ const Checkout = () => { const [selectedExpedisiService, setselectedExpedisiService] = useState(null) const [etd, setEtd] = useState(null) const [etdFix, setEtdFix] = useState(null) + const [bottomPopup, SetBottomPopup] = useState(null) + const [listVouchers, SetListVoucher] = useState(null) + const [discountVoucher, SetDiscountVoucher] = useState(0) + const [codeVoucher, SetCodeVoucher] = useState(null) + const [findCodeVoucher, SetFindVoucher] = useState(null) + const [selisihHargaCode, SetSelisihHargaCode] = useState(null) + const [buttonTerapkan, SetButtonTerapkan] = useState(false) + const [checkoutValidation, setCheckoutValidation] = useState(false) + const [loadingVoucher, setLoadingVoucher] = useState(true) + + const expedisiValidation = useRef(null) + + const voucher = async () => { + try { + let dataVoucher = await getVoucher(auth?.id) + SetListVoucher(dataVoucher) + } finally { + setLoadingVoucher(false) + } + } + const VoucherCode = async (code) => { + let dataVoucher = await findVoucher(code, auth.id) + if (dataVoucher.length <= 0) { + SetFindVoucher(1) + return + } + + let addNewLine = dataVoucher[0] + let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code) + if (checkList >= 0) { + if (listVouchers[checkList].canApply) { + ToggleSwitch(code) + SetCodeVoucher(null) + } else { + SetSelisihHargaCode(listVouchers[checkList].differenceToApply) + SetFindVoucher(2) + } + return + } + if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) { + SetSelisihHargaCode(currencyFormat(addNewLine.minPurchaseAmount - cartCheckout?.subtotal)) + SetFindVoucher(2) + return + } else { + SetFindVoucher(3) + SetButtonTerapkan(true) + } + SetListVoucher((prevList) => [addNewLine, ...prevList]) + SetActiveVoucher(addNewLine.code) + } + + useEffect(() => { + SetFindVoucher(null) + }, [bottomPopup]) useEffect(() => { const loadExpedisi = async () => { @@ -93,57 +157,47 @@ const Checkout = () => { setExpedisi(dataExpedisi) } loadExpedisi() + // voucher() }, []) - useEffect(() => { - const loadProducts = async () => { - let variantIds = '' - let { query } = router - if (query?.productId) { - variantIds = query.productId - } else { - const cart = getCart() - variantIds = _.filter(cart, (o) => o.selected == true) - .map((o) => o.productId) - .join(',') + const hitungDiscountVoucher = (code) => { + let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code) + let dataActiveVoucher = listVouchers[dataVoucherIndex] + + let countDiscount = dataActiveVoucher.discountVoucher + + /*if (dataActiveVoucher.discountType === 'percentage') { + countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100) + if ( + dataActiveVoucher.maxDiscountAmount > 0 && + countDiscount > dataActiveVoucher.maxDiscountAmount + ) { + countDiscount = dataActiveVoucher.maxDiscountAmount } + } else { + countDiscount = dataActiveVoucher.discountAmount + }*/ - const dataProducts = await CartApi({ variantIds }) - const productsWithQuantity = dataProducts?.map((product) => { - if (product.price.priceDiscount == 0) setPriceCheck(true) - return { - ...product, - quantity: query.quantity - ? query.quantity - : getItemCart({ productId: product.id }).quantity - } - }) - setProducts(productsWithQuantity) - } - loadProducts() - }, [router]) + return countDiscount + } useEffect(() => { - if (products) { - let calculateTotalAmount = 0 - let calculateTotalDiscountAmount = 0 - let calcuateTotalWeight = 0 - products.forEach((product) => { - calculateTotalAmount += product.price.price * product.quantity - calculateTotalDiscountAmount += - (product.price.price - product.price.priceDiscount) * product.quantity - calcuateTotalWeight += product.weight * product.quantity - if (product.weight == 0) { - setCheckWeight(true) - } - }) - setTotalAmount(calculateTotalAmount) - setTotalDiscountAmount(calculateTotalDiscountAmount) - setTotalWeight(calcuateTotalWeight * 1000) - } - }, [products]) + if (!listVouchers) return + if (!activeVoucher) return + + const countDiscount = hitungDiscountVoucher(activeVoucher) + + SetDiscountVoucher(countDiscount) + }, [activeVoucher, listVouchers]) useEffect(() => { + setProducts(cartCheckout?.products) + setCheckWeight(cartCheckout?.hasProductWithoutWeight) + setTotalWeight(cartCheckout?.totalWeight.g) + }, [cartCheckout]) + + useEffect(() => { + setCheckoutValidation(false) const loadServiceRajaOngkir = async () => { const body = { origin: 2127, @@ -193,6 +247,9 @@ const Checkout = () => { useEffect(() => { if (selectedExpedisi) { let serviceType = selectedExpedisi.split(',') + if (serviceType[0] === 0) { + setSelectedExpedisi(0) + } setselectedCarrier(serviceType[0]) setselectedCarrierId(serviceType[1]) setListServiceExpedisi([]) @@ -210,6 +267,21 @@ const Checkout = () => { toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' }) return } + if (selectedExpedisi === 0) { + setCheckoutValidation(true) + if (expedisiValidation.current) { + const position = expedisiValidation.current.getBoundingClientRect() + window.scrollTo({ + top: position.top - 300 + window.pageYOffset, + behavior: 'smooth' + }) + } + return + } + if (selectedCarrier != 1 && biayaKirim == 0) { + toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.') + return + } setIsLoading(true) const productOrder = products.map((product) => ({ product_id: product.id, @@ -218,10 +290,12 @@ const Checkout = () => { let data = { partner_shipping_id: auth.partnerId, partner_invoice_id: auth.partnerId, + user_id: auth.id, order_line: JSON.stringify(productOrder), delivery_amount: biayaKirim, carrier_id: selectedCarrierId, delivery_service_type: selectedExpedisiService, + voucher: activeVoucher, type: 'sale_order' } if (poNumber.current.value) data.po_number = poNumber.current.value @@ -246,20 +320,288 @@ const Checkout = () => { gtag('event', 'conversion', { send_to: 'AW-954540379/nDymCL3BhaQYENvClMcD', - value: - totalAmount - - totalDiscountAmount + - taxTotal + - Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000, + value: cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000, currency: 'IDR', transaction_id: isCheckouted.id, event_callback: midtrans }) } - const taxTotal = (totalAmount - totalDiscountAmount) * 0.11 + + const handlingActivateCode = async () => { + VoucherCode(codeVoucher) + } + + const handleUseVoucher = async (code, isCheck) => { + if (isCheck) { + if (code === activeVoucher) { + SetActiveVoucher(null) + SetDiscountVoucher(0) + } else { + SetActiveVoucher(code) + SetFindVoucher(null) + document.getElementById('uniqCode').value = '' + SetButtonTerapkan(false) + } + } else { + SetActiveVoucher(code) + SetFindVoucher(null) + document.getElementById('uniqCode').value = '' + SetButtonTerapkan(false) + } + } + + const onChangeCodeVoucher = async (e) => { + SetCodeVoucher(e.target.value) + SetButtonTerapkan(false) + } + + const [isChecked, setIsChecked] = useState(false) + + const ToggleSwitch = (code) => { + setIsChecked(!isChecked) + handleUseVoucher(code, !isChecked) + } + + // const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11 return ( <> + <BottomPopup + className='w-full md:!w-[40%] !min-h-[350px]' + active={bottomPopup} + close={() => SetBottomPopup(false)} + title='Gunakan Promo' + > + <div className='row'> + <div className='flex justify-between items-center'> + <div className='flex md:w-[70%]'> + <input + type='text' + id='uniqCode' + name='uniqCode' + className='form-input w-full rounded-md' + placeholder='Kode Voucher' + autoCapitalize='true' + onChange={(e) => onChangeCodeVoucher(e)} + /> + </div> + <div className='flex'> + <button + className='btn-solid-red flex-1 md:flex-none rounded-md' + type='button' + onClick={() => handlingActivateCode()} + disabled={buttonTerapkan} + > + Terapkan + </button> + </div> + </div> + {findCodeVoucher === 3 && activeVoucher === codeVoucher && ( + <div className='mt-2'> + <span className='text-caption-1 mt-2 text-green-600'> + Voucher berhasil ditambahkan{' '} + </span> + </div> + )} + {findCodeVoucher === 1 && ( + <div className='mt-2'> + <span className='text-caption-1 mt-2 text-red-600'> + Kode voucher salah / sudah tidak berlaku lagi. Coba voucher lainnya, ya. + </span> + </div> + )} + {findCodeVoucher === 2 && ( + <div className='mt-2'> + <span className='text-caption-1 mt-2 text-red-600'> + Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo + ini + </span> + </div> + )} + + <hr className='mt-10 my-4 border-gray_r-10' /> + <div className=''> + {!loadingVoucher && !listVouchers ? ( + <div className='flex items-center justify-center mt-4 mb-4'> + <div className='text-center'> + <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1> + <p className='text-gray-500'>Maaf, saat ini tidak ada voucher yang tersedia.</p> + </div> + </div> + ) : ( + <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth?.name}</h3> + )} + {loadingVoucher && ( + <> + <div className={`border border-solid w-full hover:cursor-pointer p-2`}> + <div class='flex items-center space-x-3'> + <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'> + <svg + class='w-10 h-10 text-gray-200 dark:text-gray-600' + aria-hidden='true' + xmlns='http://www.w3.org/2000/svg' + fill='currentColor' + viewBox='0 0 16 20' + > + <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' /> + <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' /> + </svg> + </div> + <div> + <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div> + <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + </div> + </div> + </div> + <div className={`border border-solid w-full hover:cursor-pointer p-2`}> + <div class='flex items-center space-x-3'> + <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'> + <svg + class='w-10 h-10 text-gray-200 dark:text-gray-600' + aria-hidden='true' + xmlns='http://www.w3.org/2000/svg' + fill='currentColor' + viewBox='0 0 16 20' + > + <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' /> + <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' /> + </svg> + </div> + <div> + <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div> + <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + </div> + </div> + </div> + </> + )} + {!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-4 `}> + <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> + <div className='w-full'> + <div className='flex justify-between gap-x-2 mb-1 items-center'> + <div className=''> + <h3 className='font-semibold'>{item.name}</h3> + <div className='mt-1'> + <span className='text-sm line-clamp-3'>{item.description} </span> + </div> + </div> + <div className='flex justify-end'> + <label class='relative inline-flex items-center cursor-pointer'> + <input + type='checkbox' + value='' + class='sr-only peer' + checked={activeVoucher === item.code ? true : false} + onChange={() => ToggleSwitch(item.code)} + /> + <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div> + </label> + </div> + </div> + <hr className='mt-3 my-4 border-gray_r-8' /> + <div className='flex justify-between items-center'> + <p className='text-justify text-sm md:text-xs'> + Kode Voucher :{' '} + <span className='text-red-500 font-semibold'>{item.code}</span> + </p> + <p className='text-sm md:text-xs'> + {activeVoucher === item.code && ( + <span className=' text-green-600'>Voucher digunakan </span> + )} + </p> + </div> + </div> + </div> + <div className='mt-3'> + <p className='text-justify text-sm '> + {!item.canApply && + item.applyStatus === 'MPA' && + item.manufactureNames != '' && ( + <p> + Tambah produk{' '} + <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '} + <span className='text-red-500'> + {currencyFormat(item.differenceToApply)} + </span>{' '} + untuk pakai promo ini + </p> + )} + {!item.canApply && + item.applyStatus === 'MPA' && + item.manufactureNames === '' && ( + <p> + Tambah{' '} + <span className='text-red-500'> + {currencyFormat(item.differenceToApply)} + </span>{' '} + untuk pakai promo ini{' '} + </p> + )} + {!item.canApply && item.applyStatus === 'UM' && ( + <p> + Tambah produk{' '} + <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '} + <span className='text-red-500'> + {currencyFormat(item.minPurchaseAmount)} + </span>{' '} + untuk pakai promo ini + </p> + )} + {item.canApply && ( + <p> + Potensi potongan sebesar{' '} + <span className='text-red-500'> + {currencyFormat(item.discountVoucher)} + </span> + </p> + )} + {/* {item.canApply === false + ? 'Tambah ' + + currencyFormat(item.differenceToApply) + + ' untuk pakai promo ini' + : 'Potensi potongan sebesar ' + + currencyFormat(hitungDiscountVoucher(item.code))} */} + </p> + <hr className='mt-2 my-4 border-gray_r-8' /> + <div className='flex items-center'> + <svg + aria-hidden='true' + fill='none' + stroke='currentColor' + stroke-width='1.5' + viewBox='0 0 24 24' + className='w-5 text-black' + > + <path + d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' + stroke-linecap='round' + 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> + </div> + </div> + </div> + ))} + </div> + </div> + </BottomPopup> <MobileView> <div className='p-4'> <Alert type='info' className='text-caption-2 flex gap-x-3'> @@ -298,6 +640,8 @@ const Checkout = () => { listExpedisi={listExpedisi} setSelectedExpedisi={setSelectedExpedisi} checkWeigth={checkWeigth} + checkoutValidation={checkoutValidation} + expedisiValidation={expedisiValidation} /> <Divider /> <SectionListService @@ -317,41 +661,136 @@ const Checkout = () => { <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div> </div> <hr className='my-4 border-gray_r-6' /> - <div className='flex flex-col gap-y-4'> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>Total Belanja</div> - <div>{currencyFormat(totalAmount)}</div> - </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>Total Diskon</div> - <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div> + {!cartCheckout ? ( + <div + role='status' + class='max-w-md space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700' + > + <div class='flex items-center justify-between'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>Subtotal</div> - <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div> + ) : ( + <div className='flex flex-col gap-y-4'> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Total Belanja</div> + <div>{currencyFormat(cartCheckout?.totalPurchase)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Diskon Produk</div> + <div className='text-danger-500'> + - {currencyFormat(cartCheckout?.totalDiscount)} + </div> + </div> + {activeVoucher && ( + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Diskon Voucher</div> + <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div> + </div> + )} + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Subtotal</div> + <div>{currencyFormat(cartCheckout?.subtotal)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>PPN 11%</div> + <div>{currencyFormat(cartCheckout?.tax)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'> + Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p> + </div> + <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div> + </div> </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>PPN 11%</div> - <div>{currencyFormat(taxTotal)}</div> + )} + + <hr className='my-4 border-gray_r-6' /> + {!cartCheckout ? ( + <div className='flex gap-x-2 justify-between mb-4'> + <div> + {' '} + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div className='font-semibold text-gray_r-12'> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'> - Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p> + ) : ( + <div className='flex gap-x-2 justify-between mb-4'> + <div>Grand Total</div> + <div className='font-semibold text-gray_r-12'> + {currencyFormat( + cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )} </div> - <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div> </div> - </div> + )} + <hr className='my-4 border-gray_r-6' /> - <div className='flex gap-x-2 justify-between mb-4'> - <div>Grand Total</div> - <div className='font-semibold text-gray_r-12'> - {currencyFormat( - totalAmount - - totalDiscountAmount + - taxTotal + - Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 - )} - </div> + + <div className='mt-4 mb-4'> + <button + type='button' + onClick={() => { + SetBottomPopup(true) + voucher() + }} + className='text-gray-900 p-4 flex items-center justify-between rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]' + > + <div className='flex items-center justify-between gap-x-3'> + <span className='text-left text-gray_r-9'> + <Image + src={'/images/DISKONICON.svg'} + alt={''} + className='object-contain object-center h-6 rounded-md' + /> + </span> + {activeVoucher ? ( + <div className=''> + <div className='text-left text-sm text-black font-semibold'> + Potongan Senilai {currencyFormat(discountVoucher)} + </div> + <div className='text-left mt-1 text-green-600 text-xs'> + Voucher berhasil digunakan + </div> + </div> + ) : ( + <span className='text-left text-sm text-gray_r-9'> + Hemat belanja dengan promo + </span> + )} + </div> + + <span className='text-left ml-1 text-gray_r-9'>{'>'}</span> + </button> </div> {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */} <p className='text-caption-2 text-gray_r-10 leading-5'> @@ -392,9 +831,7 @@ const Checkout = () => { <button className='flex-1 btn-yellow' onClick={checkout} - disabled={ - isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0 - } + disabled={isLoading || !products || products?.length == 0 || priceCheck} > {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} </button> @@ -437,6 +874,8 @@ const Checkout = () => { listExpedisi={listExpedisi} setSelectedExpedisi={setSelectedExpedisi} checkWeigth={checkWeigth} + checkoutValidation={checkoutValidation} + expedisiValidation={expedisiValidation} /> <Divider /> <SectionListService @@ -456,75 +895,149 @@ const Checkout = () => { </tr> </thead> <tbody> - {products?.map((product) => ( - <tr key={product.id}> - <td className='flex'> - <div className='w-[20%] flex-shrink-0'> - <Image - src={product?.parent?.image} - alt={product?.name} - className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' - /> + {!products ? ( + <tr> + <td colSpan={4}> + <div className='container my-4'> + <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div> + <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> </div> - <div className='px-2 text-left'> - <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'> - {product?.parent?.name} - </div> - <div className='text-gray_r-11 mt-2'> - {product?.code}{' '} - {product?.attributes.length > 0 - ? `| ${product?.attributes.join(', ')}` - : ''} - </div> - <div className='text-gray_r-11 mt-2'> - Berat item : {product?.weight} Kg - </div> - </div> - </td> - <td> - <input - className='form-input w-16 py-2 text-center bg-gray_r-1' - type='number' - value={product?.quantity} - disabled - /> </td> - <td> - {product?.price?.discountPercentage > 0 && ( - <div className='flex gap-x-1 items-center justify-center mt-3'> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(product?.price?.price)} + </tr> + ) : ( + products?.map((product) => ( + <> + <tr + key={product.id} + className={`${product.program ? '!border-t-0 !border-b-0' : ''}`} + > + <td className='flex'> + <div className='w-[20%] flex-shrink-0'> + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> </div> - <div className='badge-solid-red'> - {product?.price?.discountPercentage}% + <div className='px-2 text-left'> + <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'> + {product?.parent?.name} + </div> + <div className='text-gray_r-11 mt-2'> + {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} + </div> + <div className='text-gray_r-11 mt-2'> + Berat item : {product?.weight} Kg + </div> </div> - </div> - )} - <div className='font-normal mt-1'> - {product.price.priceDiscount > 0 - ? currencyFormat(product?.price?.priceDiscount) - : 'Call For Price'} - </div> - </td> - <td> - <div className='text-danger-500 font-medium'> - {product.price.priceDiscount > 0 ? ( - currencyFormat(product?.price?.priceDiscount * product?.quantity) - ) : ( - <a - href={whatsappUrl('product', { - name: product.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='underline' - > - Call For Price{' '} - </a> - )} - </div> - </td> - </tr> - ))} + </td> + <td> + <input + className='form-input w-16 py-2 text-center bg-gray_r-1' + type='number' + value={product?.quantity} + disabled + /> + </td> + <td> + {product?.price?.discountPercentage > 0 && ( + <div className='flex gap-x-1 items-center justify-center mt-3'> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(product?.price?.price)} + </div> + <div className='badge-solid-red'> + {product?.price?.discountPercentage}% + </div> + </div> + )} + <div className='font-normal mt-1'> + {product.price.priceDiscount > 0 + ? currencyFormat(product?.price?.priceDiscount) + : 'Call For Price'} + </div> + </td> + <td> + <div className='text-danger-500 font-medium'> + {product.price.priceDiscount > 0 ? ( + currencyFormat(product?.price?.priceDiscount * product?.quantity) + ) : ( + <a + href={whatsappUrl('product', { + name: product.name, + url: createSlug( + '/shop/product/', + product.name, + product.id, + true + ) + })} + className='underline' + > + Call For Price{' '} + </a> + )} + </div> + </td> + </tr> + {product.program && + product.program.items && + product.program.items.map((item) => ( + <> + <tr key={product?.program?.id} className='!border-t-0'> + <td className='flex'> + <div className='w-[20%] flex-shrink-0'> + <Image + src={item.parent.image} + alt={item.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> + </div> + <div className='px-2 text-left'> + <div className=''> + <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'> + {product.program.type.label} + </span> + </div> + <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div> + </div> + </td> + <td> + <input + className='form-input w-16 py-2 text-center bg-gray_r-1' + type='number' + value={1} + disabled + /> + </td> + <td> + {item?.price?.discountPercentage > 0 && ( + <div className='flex gap-x-1 items-center justify-center mt-3'> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(product?.price?.price)} + </div> + </div> + )} + <div className='font-normal mt-1'> + {item?.price.priceDiscount > 0 ? 'Gratis' : ''} + </div> + </td> + <td> + <div className='text-danger-500 font-medium'> + {item.price.priceDiscount > 0 ? 'Gratis' : ''} + </div> + </td> + <td></td> + </tr> + </> + ))} + </> + )) + )} </tbody> </table> </div> @@ -538,46 +1051,141 @@ const Checkout = () => { </div> <hr className='my-4 border-gray_r-6' /> - - <div className='flex flex-col gap-y-4'> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>Total Belanja</div> - <div>{currencyFormat(totalAmount)}</div> - </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>Total Diskon</div> - <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div> + {!cartCheckout ? ( + <div + role='status' + class='max-w-md space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700' + > + <div class='flex items-center justify-between'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> + <div class='flex items-center justify-between pt-4'> + <div> + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>Subtotal</div> - <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div> + ) : ( + <div className='flex flex-col gap-y-4'> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Total Belanja</div> + <div>{currencyFormat(cartCheckout?.totalPurchase)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Diskon Produk</div> + <div className='text-danger-500'> + - {currencyFormat(cartCheckout?.totalDiscount)} + </div> + </div> + {activeVoucher && ( + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Diskon Voucher</div> + <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div> + </div> + )} + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Subtotal</div> + <div>{currencyFormat(cartCheckout?.subtotal)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>PPN 11%</div> + <div>{currencyFormat(cartCheckout?.tax)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'> + Biaya Kirim + <p className='text-xs mt-3'>{etdFix}</p> + </div> + <div> + {currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)} + </div> + </div> </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>PPN 11%</div> - <div>{currencyFormat(taxTotal)}</div> + )} + + <hr className='my-4 border-gray_r-6' /> + {!cartCheckout ? ( + <div className='flex gap-x-2 justify-between mb-4'> + <div> + {' '} + <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div> + </div> + <div className='font-semibold text-gray_r-12'> + <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div> + </div> </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'> - Biaya Kirim - <p className='text-xs mt-3'>{etdFix}</p> + ) : ( + <div className='flex gap-x-2 justify-between mb-4'> + <div>Grand Total</div> + <div className='font-semibold text-gray_r-12'> + {currencyFormat( + cartCheckout?.grandTotal + + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )} </div> - <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div> </div> - </div> + )} <hr className='my-4 border-gray_r-6' /> - <div className='flex gap-x-2 justify-between mb-4'> - <div>Grand Total</div> - <div className='font-semibold text-gray_r-12'> - {currencyFormat( - totalAmount - - totalDiscountAmount + - taxTotal + - Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 - )} - </div> + <div className='mt-4 mb-4'> + <button + type='button' + onClick={() => { + SetBottomPopup(true) + voucher() + }} + className='text-gray-900 p-3 flex items-center justify-between rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]' + > + <div className='flex items-center justify-between gap-x-3'> + <span className='text-left text-gray_r-9'> + <Image + src={'/images/DISKONICON.svg'} + alt={''} + className='object-contain object-center h-6 w-full rounded-md' + /> + </span> + {activeVoucher ? ( + <div className=''> + <div className='text-left text-sm text-black font-semibold'> + Hemat {currencyFormat(discountVoucher)} + </div> + <div className='text-left mt-1 text-green-600 text-xs'> + Voucher berhasil digunakan + </div> + </div> + ) : ( + <span className='text-left text-sm text-gray_r-9'> + Hemat belanja dengan promo + </span> + )} + </div> + <span className='text-left ml-1 text-gray_r-9'>{'>'}</span> + </button> </div> + <p className='text-caption-2 text-gray_r-11 leading-5'> Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} <Link href='/syarat-ketentuan' className='inline font-normal'> @@ -614,14 +1222,7 @@ const Checkout = () => { <button className='w-full btn-yellow mt-4' onClick={checkout} - disabled={ - isLoading || - !products || - products?.length == 0 || - priceCheck || - selectedCarrier == 0 || - (selectedCarrier != 1 && biayaKirim == 0) - } + disabled={isLoading || !products || products?.length == 0 || priceCheck} > {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} </button> @@ -684,14 +1285,25 @@ const SectionValidation = ({ address }) => </BottomPopup> ) -const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) => +const SectionExpedisi = ({ + address, + listExpedisi, + setSelectedExpedisi, + checkWeigth, + checkoutValidation, + expedisiValidation +}) => address?.rajaongkirCityId > 0 && ( - <div className='p-4'> + <div className='p-4' ref={expedisiValidation}> <div className='flex justify-between items-center'> <div className='font-medium'>Pilih Expedisi : </div> - <div> - <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}> - <option value='0,0'>Pengiriman</option> + <div className='w-[250px]'> + <select + className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`} + onChange={(e) => setSelectedExpedisi(e.target.value)} + required + > + <option value='0,0'>Pilih Pengiriman</option> <option value='1,32'>SELF PICKUP</option> {checkWeigth != true && listExpedisi.map((expedisi) => ( @@ -705,7 +1317,15 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig </option> ))} </select> + {checkoutValidation && ( + <span className='text-sm text-red-500'>*silahkan pilih expedisi</span> + )} </div> + <style jsx>{` + .shake { + animation: shake 0.4s ease-in-out; + } + `}</style> </div> {checkWeigth == true && ( <p className='mt-4 text-gray_r-11 leading-6'> diff --git a/src/lib/checkout/components/CheckoutOld.jsx b/src/lib/checkout/components/CheckoutOld.jsx new file mode 100644 index 00000000..088b641b --- /dev/null +++ b/src/lib/checkout/components/CheckoutOld.jsx @@ -0,0 +1,811 @@ +import Alert from '@/core/components/elements/Alert/Alert' +import Divider from '@/core/components/elements/Divider/Divider' +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 CartApi from '@/lib/cart/api/CartApi' +import { ExclamationCircleIcon } from '@heroicons/react/24/outline' +import React, { useEffect, useRef, useState } from 'react' +import _ from 'lodash' +import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart' +import currencyFormat from '@/core/utils/currencyFormat' +import { toast } from 'react-hot-toast' +import getFileBase64 from '@/core/utils/getFileBase64' +import checkoutApi from '../api/checkoutApi' +import { useRouter } from 'next/router' +import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' +import axios from 'axios' +import Image from '@/core/components/elements/Image/Image' +import MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import ExpedisiList from '../api/ExpedisiList' +import whatsappUrl from '@/core/utils/whatsappUrl' +import { createSlug } from '@/core/utils/slug' +import { Button, Modal } from 'flowbite-react' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' + +const SELF_PICKUP_ID = 32 + +const Checkout = () => { + const router = useRouter() + const auth = useAuth() + const [selectedAddress, setSelectedAddress] = useState({ + shipping: null, + invoicing: null + }) + const [addresses, setAddresses] = useState(null) + + useEffect(() => { + if (!auth) return + + const getAddresses = async () => { + const dataAddresses = await addressesApi() + setAddresses(dataAddresses) + } + + getAddresses() + }, [auth]) + + useEffect(() => { + if (!addresses) return + + const matchAddress = (key) => { + const addressToMatch = getItemAddress(key) + const foundAddress = addresses.filter((address) => address.id == addressToMatch) + if (foundAddress.length > 0) { + return foundAddress[0] + } + return addresses[0] + } + + setSelectedAddress({ + shipping: matchAddress('shipping'), + invoicing: matchAddress('invoicing') + }) + }, [addresses]) + + const [products, setProducts] = useState(null) + const [totalAmount, setTotalAmount] = useState(0) + const [totalDiscountAmount, setTotalDiscountAmount] = useState(0) + const [totalWeight, setTotalWeight] = useState(0) + const [priceCheck, setPriceCheck] = useState(false) + const [listExpedisi, setExpedisi] = useState([]) + const [listserviceExpedisi, setListServiceExpedisi] = useState([]) + const [selectedExpedisi, setSelectedExpedisi] = useState(0) + const [selectedCarrierId, setselectedCarrierId] = useState(0) + const [selectedCarrier, setselectedCarrier] = useState(0) + const [biayaKirim, setBiayaKirim] = useState(0) + const [checkWeigth, setCheckWeight] = useState(false) + const [selectedServiceType, setSelectedServiceType] = useState(null) + const [selectedExpedisiService, setselectedExpedisiService] = useState(null) + const [etd, setEtd] = useState(null) + const [etdFix, setEtdFix] = useState(null) + + useEffect(() => { + const loadExpedisi = async () => { + let dataExpedisi = await ExpedisiList() + dataExpedisi = dataExpedisi.map((expedisi) => ({ + value: expedisi.id, + label: expedisi.name, + carrierId: expedisi.deliveryCarrierId + })) + setExpedisi(dataExpedisi) + } + loadExpedisi() + }, []) + + useEffect(() => { + const loadProducts = async () => { + let variantIds = '' + let { query } = router + if (query?.productId) { + variantIds = query.productId + } else { + const cart = getCart() + variantIds = _.filter(cart, (o) => o.selected == true) + .map((o) => o.productId) + .join(',') + } + + const dataProducts = await CartApi({ variantIds }) + const productsWithQuantity = dataProducts?.map((product) => { + if (product.price.priceDiscount == 0) setPriceCheck(true) + return { + ...product, + quantity: query.quantity + ? query.quantity + : getItemCart({ productId: product.id }).quantity + } + }) + setProducts(productsWithQuantity) + } + loadProducts() + }, [router]) + + useEffect(() => { + if (products) { + let calculateTotalAmount = 0 + let calculateTotalDiscountAmount = 0 + let calcuateTotalWeight = 0 + products.forEach((product) => { + calculateTotalAmount += product.price.price * product.quantity + calculateTotalDiscountAmount += + (product.price.price - product.price.priceDiscount) * product.quantity + calcuateTotalWeight += product.weight * product.quantity + if (product.weight == 0) { + setCheckWeight(true) + } + }) + setTotalAmount(calculateTotalAmount) + setTotalDiscountAmount(calculateTotalDiscountAmount) + setTotalWeight(calcuateTotalWeight * 1000) + } + }, [products]) + + useEffect(() => { + const loadServiceRajaOngkir = async () => { + const body = { + origin: 2127, + destination: selectedAddress.shipping.rajaongkirCityId, + weight: totalWeight, + courier: selectedCarrier, + originType: 'subdistrict', + destinationType: 'subdistrict' + } + setBiayaKirim(0) + const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body)) + setListServiceExpedisi(dataService.data[0].costs) + if (dataService.data[0].costs[0]) { + setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value) + setselectedExpedisiService( + dataService.data[0].costs[0]?.description + '-' + dataService.data[0].costs[0]?.service + ) + setEtd(dataService.data[0].costs[0]?.cost[0].etd) + toast.success('Harap pilih tipe layanan pengiriman') + } else { + toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.') + } + } + if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) { + loadServiceRajaOngkir() + } else { + setListServiceExpedisi() + setBiayaKirim(0) + setselectedExpedisiService() + setEtd() + } + }, [selectedCarrier, selectedAddress, totalWeight]) + + useEffect(() => { + if (selectedServiceType) { + let serviceType = selectedServiceType.split(',') + setBiayaKirim(serviceType[0]) + setselectedExpedisiService(serviceType[1]) + setEtd(serviceType[2]) + } + }, [selectedServiceType]) + + useEffect(() => { + if (etd) setEtdFix(calculateEstimatedArrival(etd)) + }, [etd]) + + useEffect(() => { + if (selectedExpedisi) { + let serviceType = selectedExpedisi.split(',') + setselectedCarrier(serviceType[0]) + setselectedCarrierId(serviceType[1]) + setListServiceExpedisi([]) + } + }, [selectedExpedisi]) + + const poNumber = useRef(null) + const poFile = useRef(null) + + const [isLoading, setIsLoading] = useState(false) + + const checkout = async () => { + const file = poFile.current.files[0] + if (typeof file !== 'undefined' && file.size > 5000000) { + toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' }) + return + } + setIsLoading(true) + const productOrder = products.map((product) => ({ + product_id: product.id, + quantity: product.quantity + })) + let data = { + partner_shipping_id: auth.partnerId, + partner_invoice_id: auth.partnerId, + order_line: JSON.stringify(productOrder), + delivery_amount: biayaKirim, + carrier_id: selectedCarrierId, + delivery_service_type: selectedExpedisiService, + type: 'sale_order' + } + if (poNumber.current.value) data.po_number = poNumber.current.value + if (typeof file !== 'undefined') data.po_file = await getFileBase64(file) + + const isCheckouted = await checkoutApi({ data }) + if (!isCheckouted?.id) { + toast.error('Gagal melakukan transaksi, terjadi kesalahan internal') + return + } + + for (const product of products) deleteItemCart({ productId: product.id }) + const payment = await axios.post( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}` + ) + setIsLoading(false) + window.location.href = payment.data.redirectUrl + } + const taxTotal = (totalAmount - totalDiscountAmount) * 0.11 + + return ( + <> + <MobileView> + <div className='p-4'> + <Alert type='info' className='text-caption-2 flex gap-x-3'> + <div> + <ExclamationCircleIcon className='w-7 text-blue-700' /> + </div> + <span className='leading-5'> + Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami + disini + </span> + </Alert> + </div> + + <Divider /> + + {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />} + {selectedCarrierId != SELF_PICKUP_ID && ( + <> + <SectionAddress + address={selectedAddress.shipping} + label='Alamat Pengiriman' + url='/my/address?select=shipping' + /> + <Divider /> + <SectionAddress + address={selectedAddress.invoicing} + label='Alamat Penagihan' + url='/my/address?select=invoice' + /> + </> + )} + <Divider /> + <SectionValidation address={selectedAddress.invoicing} /> + <SectionExpedisi + address={selectedAddress.shipping} + listExpedisi={listExpedisi} + setSelectedExpedisi={setSelectedExpedisi} + checkWeigth={checkWeigth} + /> + <Divider /> + <SectionListService + listserviceExpedisi={listserviceExpedisi} + setSelectedServiceType={setSelectedServiceType} + /> + + <div className='p-4 flex flex-col gap-y-4'> + {products && <VariantGroupCard openOnClick={false} variants={products} />} + </div> + + <Divider /> + + <div className='p-4'> + <div className='flex justify-between items-center'> + <div className='font-medium'>Ringkasan Pesanan</div> + <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div> + </div> + <hr className='my-4 border-gray_r-6' /> + <div className='flex flex-col gap-y-4'> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Total Belanja</div> + <div>{currencyFormat(totalAmount)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Total Diskon</div> + <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Subtotal</div> + <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>PPN 11%</div> + <div>{currencyFormat(taxTotal)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'> + Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p> + </div> + <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div> + </div> + </div> + <hr className='my-4 border-gray_r-6' /> + <div className='flex gap-x-2 justify-between mb-4'> + <div>Grand Total</div> + <div className='font-semibold text-gray_r-12'> + {currencyFormat( + totalAmount - + totalDiscountAmount + + taxTotal + + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )} + </div> + </div> + {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */} + <p className='text-caption-2 text-gray_r-10 leading-5'> + Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} + <Link href='/syarat-ketentuan' className='inline font-normal'> + Syarat & Ketentuan + </Link>{' '} + yang berlaku + </p> + </div> + + <Divider /> + + <div className='p-4'> + <div className='font-medium'>Purchase Order</div> + + <div className='mt-4 flex gap-x-3'> + <div className='w-6/12'> + <label className='form-label font-normal'>Dokumen PO</label> + <input + type='file' + className='form-input mt-2 h-12' + accept='image/*,application/pdf' + ref={poFile} + /> + </div> + <div className='w-6/12'> + <label className='form-label font-normal'>Nomor PO</label> + <input type='text' className='form-input mt-2 h-12' ref={poNumber} /> + </div> + </div> + <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p> + </div> + + <Divider /> + + <div className='flex gap-x-3 p-4'> + <button + className='flex-1 btn-yellow' + onClick={checkout} + disabled={ + isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0 + } + > + {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} + </button> + </div> + {priceCheck && ( + <div className='px-4 mb-4'> + <span className='text-danger-500'> + *) Terdapat produk yang belum memiliki harga,{' '} + <a href={whatsappUrl()} className='underline'> + Hubungi Kami untuk meminta harga. + </a> + </span> + </div> + )} + </MobileView> + + <DesktopView> + <div className='container mx-auto py-10 flex'> + <div className='w-3/4 border border-gray_r-6 rounded bg-white'> + {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />} + {selectedCarrierId != SELF_PICKUP_ID && ( + <> + <SectionAddress + address={selectedAddress.shipping} + label='Alamat Pengiriman' + url='/my/address?select=shipping' + /> + <Divider /> + <SectionAddress + address={selectedAddress.invoicing} + label='Alamat Penagihan' + url='/my/address?select=invoice' + /> + </> + )} + <Divider /> + <SectionValidation address={selectedAddress.invoicing} /> + <SectionExpedisi + address={selectedAddress.shipping} + listExpedisi={listExpedisi} + setSelectedExpedisi={setSelectedExpedisi} + checkWeigth={checkWeigth} + /> + <Divider /> + <SectionListService + listserviceExpedisi={listserviceExpedisi} + setSelectedServiceType={setSelectedServiceType} + /> + + <div className='p-4'> + <div className='font-medium'>Detail Pesanan</div> + <table className='table-checkout'> + <thead> + <tr> + <th>Nama Produk</th> + <th>Jumlah</th> + <th>Harga</th> + <th>Subtotal</th> + </tr> + </thead> + <tbody> + {products?.map((product) => ( + <tr key={product.id}> + <td className='flex'> + <div className='w-[20%] flex-shrink-0'> + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> + </div> + <div className='px-2 text-left'> + <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'> + {product?.parent?.name} + </div> + <div className='text-gray_r-11 mt-2'> + {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} + </div> + <div className='text-gray_r-11 mt-2'> + Berat item : {product?.weight} Kg + </div> + </div> + </td> + <td> + <input + className='form-input w-16 py-2 text-center bg-gray_r-1' + type='number' + value={product?.quantity} + disabled + /> + </td> + <td> + {product?.price?.discountPercentage > 0 && ( + <div className='flex gap-x-1 items-center justify-center mt-3'> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(product?.price?.price)} + </div> + <div className='badge-solid-red'> + {product?.price?.discountPercentage}% + </div> + </div> + )} + <div className='font-normal mt-1'> + {product.price.priceDiscount > 0 + ? currencyFormat(product?.price?.priceDiscount) + : 'Call For Price'} + </div> + </td> + <td> + <div className='text-danger-500 font-medium'> + {product.price.priceDiscount > 0 ? ( + currencyFormat(product?.price?.priceDiscount * product?.quantity) + ) : ( + <a + href={whatsappUrl('product', { + name: product.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='underline' + > + Call For Price{' '} + </a> + )} + </div> + </td> + </tr> + ))} + </tbody> + </table> + </div> + </div> + + <div className='w-1/4 pl-4'> + <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'> + <div className='flex justify-between items-center'> + <div className='font-medium'>Ringkasan Pesanan</div> + <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div> + </div> + + <hr className='my-4 border-gray_r-6' /> + + <div className='flex flex-col gap-y-4'> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Total Belanja</div> + <div>{currencyFormat(totalAmount)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Total Diskon</div> + <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>Subtotal</div> + <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'>PPN 11%</div> + <div>{currencyFormat(taxTotal)}</div> + </div> + <div className='flex gap-x-2 justify-between'> + <div className='text-gray_r-11'> + Biaya Kirim + <p className='text-xs mt-3'>{etdFix}</p> + </div> + <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div> + </div> + </div> + + <hr className='my-4 border-gray_r-6' /> + + <div className='flex gap-x-2 justify-between mb-4'> + <div>Grand Total</div> + <div className='font-semibold text-gray_r-12'> + {currencyFormat( + totalAmount - + totalDiscountAmount + + taxTotal + + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )} + </div> + </div> + <p className='text-caption-2 text-gray_r-11 leading-5'> + Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} + <Link href='/syarat-ketentuan' className='inline font-normal'> + Syarat & Ketentuan + </Link>{' '} + yang berlaku + </p> + + <hr className='my-4 border-gray_r-6' /> + + <div className='font-medium mt-4'> + Purchase Order <span className='font-normal text-gray_r-11'>(Opsional)</span> + </div> + + <div className='mt-4 flex gap-x-3'> + <div className='w-6/12'> + <label className='form-label font-normal'>Dokumen PO</label> + <input + type='file' + className='form-input mt-2 h-12' + accept='image/*,application/pdf' + ref={poFile} + /> + </div> + <div className='w-6/12'> + <label className='form-label font-normal'>Nomor PO</label> + <input type='text' className='form-input mt-2 h-12' ref={poNumber} /> + </div> + </div> + <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p> + + <hr className='my-4 border-gray_r-6' /> + + <button + className='w-full btn-yellow mt-4' + onClick={checkout} + disabled={ + isLoading || + !products || + products?.length == 0 || + priceCheck || + selectedCarrier == 0 || + (selectedCarrier != 1 && biayaKirim == 0) + } + > + {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} + </button> + {priceCheck && ( + <div className='mt-4'> + <span className='text-danger-500'> + *) Terdapat produk yang belum memiliki harga,{' '} + <a href={whatsappUrl()} className='underline'> + Hubungi Kami untuk meminta harga. + </a> + </span> + </div> + )} + </div> + </div> + </div> + </DesktopView> + </> + ) +} + +const SectionAddress = ({ address, label, url }) => ( + <div className='p-4'> + <div className='flex justify-between items-center'> + <div className='font-medium'>{label}</div> + <Link className='text-caption-1' href={url}> + Pilih Alamat Lain + </Link> + </div> + + {address && ( + <div className='mt-4 text-caption-1'> + <div className='badge-red mb-2'> + {address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'} + </div> + <p className='font-medium'>{address.name}</p> + <p className='mt-2 text-gray_r-11'>{address.mobile}</p> + <p className='mt-1 text-gray_r-11'> + {address.street}, {address?.city?.name} + </p> + </div> + )} + </div> +) + +const SectionValidation = ({ address }) => + address?.rajaongkirCityId == 0 && ( + <BottomPopup active={true} title='Update Alamat'> + <div className='leading-7 text-gray_r-12/80'> + Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '} + </div> + <div className='flex justify-center mt-6 gap-x-4'> + <Link + className='btn-solid-red w-full md:w-fit text-white' + href={`/my/address/${address?.id}/edit`} + > + Update Alamat + </Link> + </div> + </BottomPopup> + ) + +const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) => + address?.rajaongkirCityId > 0 && ( + <div className='p-4'> + <div className='flex justify-between items-center'> + <div className='font-medium'>Pilih Expedisi : </div> + <div> + <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}> + <option value='0,0'>Pengiriman</option> + <option value='1,32'>SELF PICKUP</option> + {checkWeigth != true && + listExpedisi.map((expedisi) => ( + <option + disabled={checkWeigth} + value={expedisi.label + ',' + expedisi.carrierId} + key={expedisi.value} + > + {' '} + {expedisi.label.toUpperCase()}{' '} + </option> + ))} + </select> + </div> + </div> + {checkWeigth == true && ( + <p className='mt-4 text-gray_r-11 leading-6'> + Mohon maaf, pengiriman hanya tersedia untuk self pickup karena terdapat barang yang belum + diatur beratnya. Mohon atur berat barang dengan menghubungi admin melalui{' '} + <a + className='text-danger-500 inline' + href='https://api.whatsapp.com/send?phone=628128080622' + > + tautan ini + </a> + </p> + )} + </div> + ) + +const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => + listserviceExpedisi?.length > 0 && ( + <> + <div className='p-4'> + <div className='flex justify-between items-center'> + <div className='font-medium'>Service Type Expedisi : </div> + <div> + <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}> + {listserviceExpedisi.map((service) => ( + <option + value={ + service.cost[0].value + + ',' + + service.description + + '-' + + service.service + + ',' + + extractDuration(service.cost[0].etd) + } + key={service.service} + > + {' '} + {service.description} - {service.service.toUpperCase()} + {extractDuration(service.cost[0].etd) && + ` (Estimasi Tiba ${extractDuration(service.cost[0].etd)} Hari)`} + </option> + ))} + </select> + </div> + </div> + </div> + <Divider /> + </> + ) + +function addDays(date, days) { + const result = new Date(date) + result.setDate(result.getDate() + days) + return result +} + +function formatDate(date) { + const day = date.getDate() + const month = date.toLocaleString('default', { month: 'short' }) + return `${day} ${month}` +} + +function calculateEstimatedArrival(duration) { + if (duration) { + let estimationDate = duration.split('-') + estimationDate[0] = parseInt(estimationDate[0]) + estimationDate[1] = parseInt(estimationDate[1]) + const from = addDays(new Date(), estimationDate[0] + 3) + const to = addDays(new Date(), estimationDate[1] + 3) + + let etdText = `*Estimasi tiba ${formatDate(from)}` + + if (estimationDate[1] > estimationDate[0]) { + etdText += ` - ${formatDate(to)}` + } + + return etdText + } + + return '' +} + +const extractDuration = (text) => { + const matches = text.match(/\d+(?:-\d+)?/g) + + if (matches && matches.length === 1) { + const parts = matches[0].split('-') + const min = parseInt(parts[0]) + const max = parseInt(parts[1]) + + if (min === max) { + return min.toString() + } + + return matches[0] + } + + return '' +} + +const PickupAddress = ({ label }) => ( + <div className='p-4'> + <div className='flex justify-between items-center'> + <div className='font-medium'>{label}</div> + </div> + <div className='mt-4 text-caption-1'> + <p className='font-medium'>Indoteknik</p> + <p className='mt-2 mb-2 text-gray_r-11 leading-6'> + Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec. Penjaringan, Kota Jkt Utara, + Daerah Khusus Ibukota Jakarta, Indonesia Kodepos : 14440 + </p> + <p className='mt-1 text-gray_r-11'>Telp : 021-2933 8828/29</p> + <p className='mt-1 text-gray_r-11'>Mobile : 0813 9000 7430</p> + </div> + </div> +) + +export default Checkout |