diff options
Diffstat (limited to 'src/lib/checkout')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 449 |
1 files changed, 297 insertions, 152 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index ef0b1d54..57d217a7 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -16,8 +16,9 @@ import checkoutApi from '../api/checkoutApi' import { useRouter } from 'next/router' import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' import axios from 'axios' -import Script from 'next/script' import Image from '@/core/components/elements/Image/Image' +import MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' const Checkout = () => { const router = useRouter() @@ -99,17 +100,12 @@ const Checkout = () => { } }, [products]) - const poNumber = useRef('') - const poFile = useRef('') + const poNumber = useRef(null) + const poFile = useRef(null) const [isLoading, setIsLoading] = useState(false) const checkout = async () => { - if (!paymentMethod) { - toast.error('Metode pembayaran harus dipilih', { position: 'bottom-center' }) - return - } - const file = poFile.current.files[0] if (typeof file !== 'undefined' && file.size > 5000000) { toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' }) @@ -130,179 +126,331 @@ const Checkout = () => { if (typeof file !== 'undefined') data.po_file = await getFileBase64(file) const isCheckouted = await checkoutApi({ data }) - setIsLoading(false) if (!isCheckouted?.id) { toast.error('Gagal melakukan transaksi, terjadi kesalahan internal') return } for (const product of products) deleteItemCart({ productId: product.id }) - if (paymentMethod == 'midtrans') { - const payment = await axios.post( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}` - ) - window.location.href = payment.data.redirectUrl - } else { - router.push(`/shop/checkout/finish?order_id=${isCheckouted.name}`) - } + 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 } return ( <> - <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> + <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 /> + <Divider /> - <SectionAddress - label='Alamat Pengiriman' - url='/my/address?select=shipping' - address={selectedAddress.shipping} - /> + <SectionAddress + label='Alamat Pengiriman' + url='/my/address?select=shipping' + address={selectedAddress.shipping} + /> - <Divider /> + <Divider /> - <div className='p-4 flex flex-col gap-y-4'> - {products && ( - <VariantGroupCard - openOnClick={false} - variants={products} - /> - )} - </div> + <div className='p-4 flex flex-col gap-y-4'> + {products && <VariantGroupCard openOnClick={false} variants={products} />} + </div> - <Divider /> + <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-red_r-11'>- {currencyFormat(totalDiscountAmount)}</div> + <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> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>Subtotal</div> - <div>{currencyFormat(totalAmount - totalDiscountAmount)}</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-red_r-11'>- {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% (Incl.)</div> + <div>{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</div> + </div> </div> - <div className='flex gap-x-2 justify-between'> - <div className='text-gray_r-11'>PPN 11% (Incl.)</div> - <div>{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</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)} + </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='/' className='inline font-normal'> + Syarat & Ketentuan + </Link>{' '} + yang berlaku + </p> </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)} + + <Divider /> + + <SectionAddress + label='Alamat Penagihan' + url='/my/address?select=invoicing' + address={selectedAddress.invoicing} + /> + + <Divider /> + + <div className='p-4'> + <div className='font-medium mb-4'>Metode Pembayaran</div> + <div className='flex flex-col gap-y-3'> + <div + className={`p-2 idt-transition border rounded text-gray_r-12/80 ${ + paymentMethod == 'manual' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6' + }`} + onClick={() => setPaymentMethod('manual')} + > + Bank BCA (PT. Indoteknik Dotcom) + <div className='mt-1'>8870-4000-81</div> + </div> + <div + className={`p-2 idt-transition border rounded ${ + paymentMethod == 'midtrans' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6' + }`} + onClick={() => setPaymentMethod('midtrans')} + > + <Image src='/images/payments/midtrans.jpg' alt='Midtrans Payment' /> + </div> </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='/' - className='inline font-normal' - > - Syarat & Ketentuan - </Link>{' '} - yang berlaku - </p> - </div> - <Divider /> - - <SectionAddress - label='Alamat Penagihan' - url='/my/address?select=invoicing' - address={selectedAddress.invoicing} - /> + <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 /> + <Divider /> - <div className='p-4'> - <div className='font-medium mb-4'>Metode Pembayaran</div> - <div className='flex flex-col gap-y-3'> - <div - className={`p-2 idt-transition border rounded text-gray_r-12/80 ${ - paymentMethod == 'manual' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6' - }`} - onClick={() => setPaymentMethod('manual')} - > - Bank BCA (PT. Indoteknik Dotcom) - <div className='mt-1'>8870-4000-81</div> - </div> - <div - className={`p-2 idt-transition border rounded ${ - paymentMethod == 'midtrans' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6' - }`} - onClick={() => setPaymentMethod('midtrans')} + <div className='flex gap-x-3 p-4'> + <button + className='flex-1 btn-yellow' + onClick={checkout} + disabled={isLoading || !products || products?.length == 0} > - <Image - src='/images/payments/midtrans.jpg' - alt='Midtrans Payment' - /> - </div> + {isLoading ? 'Loading...' : 'Bayar'} + </button> </div> - </div> - - <Divider /> + </MobileView> + + <DesktopView> + <div className='container mx-auto py-10 flex'> + <div className='w-3/4 border border-gray_r-6 rounded bg-white'> + <SectionAddress + label='Alamat Pengiriman' + url='/my/address?select=shipping' + address={selectedAddress.shipping} + /> - <div className='p-4'> - <div className='font-medium'>Purchase Order</div> + <Divider /> - <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} + <SectionAddress + label='Alamat Penagihan' + url='/my/address?select=invoicing' + address={selectedAddress.invoicing} /> + + <Divider /> + + <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-[30%] 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> + </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'> + {currencyFormat(product?.price?.priceDiscount)} + </div> + </td> + <td> + <div className='text-red_r-11 font-medium'> + {currencyFormat(product?.price?.priceDiscount * product?.quantity)} + </div> + </td> + </tr> + ))} + </tbody> + </table> + </div> </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 className='w-1/4 pl-4'> + <div className='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-red_r-11'>- {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% (Incl.)</div> + <div>{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</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)} + </div> + </div> + <p className='text-caption-2 text-gray_r-11 mb-2'> + *) Belum termasuk biaya pengiriman + </p> + <p className='text-caption-2 text-gray_r-11 leading-5'> + Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} + <Link href='/' 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} + > + {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} + </button> + </div> </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} - > - {isLoading ? 'Loading...' : 'Bayar'} - </button> - </div> + </DesktopView> </> ) } @@ -311,10 +459,7 @@ 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} - > + <Link className='text-caption-1' href={url}> Pilih Alamat Lain </Link> </div> |