From 757b69f4d814ec4890c209f7a9fdf3d9940157d9 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 12:03:05 +0700 Subject: fix --- src/lib/checkout/components/Checkout.jsx | 272 +++++++++++++++++++++++++++++++ 1 file changed, 272 insertions(+) create mode 100644 src/lib/checkout/components/Checkout.jsx (limited to 'src/lib') diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx new file mode 100644 index 00000000..0a3949c3 --- /dev/null +++ b/src/lib/checkout/components/Checkout.jsx @@ -0,0 +1,272 @@ +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 VariantCard from '@/lib/variant/components/VariantCard' +import { ExclamationCircleIcon } from '@heroicons/react/24/outline' +import { useEffect, useRef, useState } from 'react' +import _ from 'lodash' +import { getCart, getItemCart } from '@/core/utils/cart' +import currencyFormat from '@/core/utils/currencyFormat' +import { toast } from 'react-hot-toast' + +const Checkout = () => { + 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) + + useEffect(() => { + const loadProducts = async () => { + const cart = getCart() + const variantIds = _.filter(cart, (o) => o.selected == true) + .map((o) => o.productId) + .join(',') + const dataProducts = await CartApi({ variantIds }) + const dataProductsQuantity = _.map(dataProducts, (o) => ({ + ...o, + quantity: getItemCart({ productId: o.id }).quantity + })) + setProducts(dataProductsQuantity) + } + loadProducts() + }, []) + + useEffect(() => { + if (products) { + let calculateTotalAmount = 0 + let calculateTotalDiscountAmount = 0 + products.forEach((product) => { + calculateTotalAmount += product.price.price * product.quantity + calculateTotalDiscountAmount += + (product.price.price - product.price.priceDiscount) * product.quantity + }) + setTotalAmount(calculateTotalAmount) + setTotalDiscountAmount(calculateTotalDiscountAmount) + } + }, [products]) + + const [selectedPayment, setSelectedPayment] = useState(null) + + const poNumber = useRef('') + const poFile = useRef('') + + const [isLoading, setIsLoading] = useState(false) + + const checkout = async () => { + if (!selectedPayment) { + toast.error('Pilih metode pembayaran', { position: 'bottom-center' }) + return + } + } + + return ( + <> +
+ +
+ +
+ + Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami + disini + + +
+ + + + + + + +
+ {products?.map((product) => ( + + ))} +
+ + + +
+
+
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 +

+
+ + + + + + + +
+
+ Metode Pembayaran (Wajib dipilih) +
+
+ {payments.map((payment, index) => ( + + ))} +
+
+ + + +
+
Purchase Order
+ +
+
+ + +
+
+ + +
+
+

Ukuran dokumen PO Maksimal 5MB

+
+ + + +
+ +
+ + ) +} + +const payments = [ + { name: 'BCA', number: '8870-4000-81' }, + { name: 'MANDIRI', number: '155-0067-6869-75' } +] + +const SectionAddress = ({ address, label, url }) => ( +
+
+
{label}
+ + Pilih Alamat Lain + +
+ + {address && ( +
+
+ {address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'} +
+

{address.name}

+

{address.mobile}

+

+ {address.street}, {address?.city?.name} +

+
+ )} +
+) + +export default Checkout -- cgit v1.2.3