From a49f5a3f968dcc8c84759a382a0762abf0bc758b Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 23 Mar 2023 17:01:03 +0700 Subject: cart, checkout, quotation --- src/lib/cart/components/Cart.jsx | 218 ++++++++-- src/lib/checkout/components/Checkout.jsx | 449 ++++++++++++++------- .../product/components/Product/ProductDesktop.jsx | 2 + src/lib/quotation/components/Quotation.jsx | 273 +++++++++---- 4 files changed, 683 insertions(+), 259 deletions(-) (limited to 'src/lib') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index b48b41fc..8bd9e362 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -1,6 +1,7 @@ import Link from '@/core/components/elements/Link/Link' import useCart from '../hooks/useCart' import Image from '@/core/components/elements/Image/Image' +import NextImage from 'next/image' import currencyFormat from '@/core/utils/currencyFormat' import { useEffect, useState } from 'react' import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart' @@ -118,6 +119,33 @@ const Cart = () => { return ( <> + setDeleteConfirmation(null)} + title='Hapus dari Keranjang' + > +
+ Apakah anda yakin menghapus barang{' '} + {deleteConfirmation?.name} dari keranjang? +
+
+ + +
+ +
@@ -255,41 +283,169 @@ const Cart = () => {
- - setDeleteConfirmation(null)} - title='Hapus dari Keranjang' - > -
- Apakah anda yakin menghapus barang{' '} - {deleteConfirmation?.name} dari keranjang? -
-
- - -
- -
-
-
-

Daftar Produk Belanja

+
+
+

Daftar Produk Belanja

+ + + + + + + + + + + + + {!cart.isLoading && (!products || products?.length == 0) && ( + + + + )} + {products?.map((product) => ( + + + + + + + + + ))} + +
Nama ProdukJumlahHargaSubtotalAction
Keranjang belanja anda masih kosong
+ + + + {product?.name} + +
+ + {product?.parent?.name} + +
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} +
+
+ 		+ updateQuantity(e.target.value, product?.id)} + onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} + /> + + {product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
+ {product?.price?.discountPercentage}% +
+
+ )} +
+ {currencyFormat(product?.price?.priceDiscount)} +
+ 		+
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)} +
+ 		+
+ +
+
+ +
+ +
+ Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran! +
+
+
+ +
+
+

Ringkasan Belanja

+
+
+ Total: + +   + {selectedProduct().length > 0 + ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) + : '-'} + +
+
+
+ + +
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 ( <> -
- -
- -
- - Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami - disini - - -
+ +
+ +
+ +
+ + Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami + disini + + +
- + - + - + -
- {products && ( - - )} -
+
+ {products && } +
- + -
-
-
Ringkasan Pesanan
-
{products?.length} Barang
-
-
-
-
-
Total Belanja
-
{currencyFormat(totalAmount)}
-
-
-
Total Diskon
-
- {currencyFormat(totalDiscountAmount)}
+
+
+
Ringkasan Pesanan
+
{products?.length} Barang
-
-
Subtotal
-
{currencyFormat(totalAmount - totalDiscountAmount)}
+
+
+
+
Total Belanja
+
{currencyFormat(totalAmount)}
+
+
+
Total Diskon
+
- {currencyFormat(totalDiscountAmount)}
+
+
+
Subtotal
+
{currencyFormat(totalAmount - totalDiscountAmount)}
+
+
+
PPN 11% (Incl.)
+
{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}
+
-
-
PPN 11% (Incl.)
-
{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}
+
+
+
Grand Total
+
+ {currencyFormat(totalAmount - totalDiscountAmount)} +
+

*) Belum termasuk biaya pengiriman

+

+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} + + Syarat & Ketentuan + {' '} + yang berlaku +

-
-
-
Grand Total
-
- {currencyFormat(totalAmount - totalDiscountAmount)} + + + + + + + +
+
Metode Pembayaran
+
+
setPaymentMethod('manual')} + > + Bank BCA (PT. Indoteknik Dotcom) +
8870-4000-81
+
+
setPaymentMethod('midtrans')} + > + Midtrans Payment +
-

*) Belum termasuk biaya pengiriman

-

- Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} - - Syarat & Ketentuan - {' '} - yang berlaku -

-
- - - + + +
+
Purchase Order
+ +
+
+ + +
+
+ + +
+
+

Ukuran dokumen PO Maksimal 5MB

+
- + -
-
Metode Pembayaran
-
-
setPaymentMethod('manual')} - > - Bank BCA (PT. Indoteknik Dotcom) -
8870-4000-81
-
-
setPaymentMethod('midtrans')} +
+
+ {isLoading ? 'Loading...' : 'Bayar'} +
-
- - + + + +
+
+ -
-
Purchase Order
+ -
-
- - + + + +
+
Detail Pesanan
+ + + + + + + + + + + {products?.map((product) => ( + + + + + + + ))} + +
Nama ProdukJumlahHargaSubtotal
+
+ {product?.name} +
+
+
+ {product?.parent?.name} +
+
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} +
+
+ 		+ + + {product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
+ {product?.price?.discountPercentage}% +
+
+ )} +
+ {currencyFormat(product?.price?.priceDiscount)} +
+ 		+
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)} +
+
+
-
- - + +
+
+
+
Ringkasan Pesanan
+
{products?.length} Barang
+
+ +
+ +
+
+
Total Belanja
+
{currencyFormat(totalAmount)}
+
+
+
Total Diskon
+
- {currencyFormat(totalDiscountAmount)}
+
+
+
Subtotal
+
{currencyFormat(totalAmount - totalDiscountAmount)}
+
+
+
PPN 11% (Incl.)
+
{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}
+
+
+ +
+ +
+
Grand Total
+
+ {currencyFormat(totalAmount - totalDiscountAmount)} +
+
+

+ *) Belum termasuk biaya pengiriman +

+

+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} + + Syarat & Ketentuan + {' '} + yang berlaku +

+ +
+ +
+ Purchase Order (Opsional) +
+ +
+
+ + +
+
+ + +
+
+

Ukuran dokumen PO Maksimal 5MB

+ +
+ + +
-

Ukuran dokumen PO Maksimal 5MB

-
- - - -
- -
+ ) } @@ -311,10 +459,7 @@ const SectionAddress = ({ address, label, url }) => (
{label}
- + Pilih Alamat Lain
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index ac17ec6e..98b40400 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -154,6 +154,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { Part Number + Varian Harga Jumlah Action @@ -163,6 +164,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { {product.variants.map((variant) => ( {variant.code} + {variant.attributes.join(', ')} {variant.price.discountPercentage > 0 && ( <> diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx index b6e276a3..3054616c 100644 --- a/src/lib/quotation/components/Quotation.jsx +++ b/src/lib/quotation/components/Quotation.jsx @@ -12,6 +12,9 @@ import { toast } from 'react-hot-toast' import checkoutApi from '@/lib/checkout/api/checkoutApi' import { useRouter } from 'next/router' import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' +import MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import Image from '@/core/components/elements/Image/Image' const Quotation = () => { const router = useRouter() @@ -77,89 +80,207 @@ const Quotation = () => { return ( <> -
- -
- -
- - Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami - disini - - -
- - - -
- {products && ( - - )} -
- - - -
-
-
Ringkasan Penawaran
-
{products?.length} Barang
+ +
+ +
+ +
+ + Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami + disini + +
-
-
-
-
Total Belanja
-
{currencyFormat(totalAmount)}
-
-
-
Total Diskon
-
- {currencyFormat(totalDiscountAmount)}
+ + + +
+ {products && } +
+ + + +
+
+
Ringkasan Penawaran
+
{products?.length} Barang
-
-
Subtotal
-
{currencyFormat(totalAmount - totalDiscountAmount)}
+
+
+
+
Total Belanja
+
{currencyFormat(totalAmount)}
+
+
+
Total Diskon
+
- {currencyFormat(totalDiscountAmount)}
+
+
+
Subtotal
+
{currencyFormat(totalAmount - totalDiscountAmount)}
+
+
+
PPN 11% (Incl.)
+
{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}
+
-
-
PPN 11% (Incl.)
-
{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}
+
+
+
Grand Total
+
+ {currencyFormat(totalAmount - totalDiscountAmount)} +
+

*) Belum termasuk biaya pengiriman

+

+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} + + Syarat & Ketentuan + {' '} + yang berlaku +

+
+ + + +
+
-
-
-
Grand Total
-
- {currencyFormat(totalAmount - totalDiscountAmount)} + + + +
+
+
Detail Barang
+ + + + + + + + + + + {products?.map((product) => ( + + + + + + + ))} + +
Nama ProdukJumlahHargaSubtotal
+
+ {product?.name} +
+
+
+ {product?.parent?.name} +
+
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} +
+
+ 		+ + + {product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
+ {product?.price?.discountPercentage}% +
+
+ )} +
+ {currencyFormat(product?.price?.priceDiscount)} +
+ 		+
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)} +
+
+
+ +
+
+
+
Ringkasan Pesanan
+
{products?.length} Barang
+
+ +
+ +
+
+
Total Belanja
+
{currencyFormat(totalAmount)}
+
+
+
Total Diskon
+
- {currencyFormat(totalDiscountAmount)}
+
+
+
Subtotal
+
{currencyFormat(totalAmount - totalDiscountAmount)}
+
+
+
PPN 11% (Incl.)
+
{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}
+
+
+ +
+ +
+
Grand Total
+
+ {currencyFormat(totalAmount - totalDiscountAmount)} +
+
+

+ *) Belum termasuk biaya pengiriman +

+

+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} + + Syarat & Ketentuan + {' '} + yang berlaku +

+ +
+ + +
-

*) Belum termasuk biaya pengiriman

-

- Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} - - Syarat & Ketentuan - {' '} - yang berlaku -

-
- - - -
- -
+ ) } -- cgit v1.2.3