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/checkout/components') 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 From 7265295454801c1d921385a4b67fb3780b46771e Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 14:00:00 +0700 Subject: fix --- src/lib/checkout/components/Checkout.jsx | 36 +++++++++++++++++++++++--- src/lib/checkout/components/FinishCheckout.jsx | 30 +++++++++++++++++++++ 2 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 src/lib/checkout/components/FinishCheckout.jsx (limited to 'src/lib/checkout/components') diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 0a3949c3..8416cd9e 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -9,11 +9,15 @@ 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 { 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' const Checkout = () => { + const router = useRouter() const auth = useAuth() const [selectedAddress, setSelectedAddress] = useState({ shipping: null, @@ -96,6 +100,33 @@ const Checkout = () => { toast.error('Pilih metode pembayaran', { 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' }) + return + } + setIsLoading(true) + const productOrder = products.map((product) => ({ + product_id: product.id, + quantity: product.quantity + })) + let data = { + partner_shipping_id: selectedAddress.shipping.id, + partner_invoice_id: selectedAddress.invoicing.id, + order_line: JSON.stringify(productOrder), + 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 }) + setIsLoading(false) + if (isCheckouted?.id) { + for (const product of products) deleteItemCart({ productId: product.id }) + router.push(`/shop/checkout/finish?id=${isCheckouted.id}`) + return + } + toast.error('Gagal melakukan transaksi, terjadi kesalahan internal') } return ( @@ -232,8 +263,7 @@ const Checkout = () => {
diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx new file mode 100644 index 00000000..f0aaba4e --- /dev/null +++ b/src/lib/checkout/components/FinishCheckout.jsx @@ -0,0 +1,30 @@ +import Link from "@/core/components/elements/Link/Link" +import useTransaction from "@/lib/transaction/hooks/useTransaction" + +const FinishCheckout = ({ id }) => { + const { transaction } = useTransaction({ id }) + + return ( +
+
+
+

Terima Kasih atas Pembelian Anda

+

+ Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak + menerima email, anda dapat menghubungi kami disini. +

+

{transaction.data?.name}

+

No. Transaksi

+
+ + Lihat detail pembelian Anda disini + +
+
+ ) +} + +export default FinishCheckout \ No newline at end of file -- cgit v1.2.3 From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 23:36:47 +0700 Subject: fix --- src/lib/checkout/components/Checkout.jsx | 33 ++++++++++++++++++---- src/lib/checkout/components/FinishCheckout.jsx | 38 +++++++++++++------------- 2 files changed, 46 insertions(+), 25 deletions(-) (limited to 'src/lib/checkout/components') diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 8416cd9e..8048eeba 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -132,7 +132,10 @@ const Checkout = () => { return ( <>
- +
@@ -155,7 +158,11 @@ const Checkout = () => {
{products?.map((product) => ( - + ))}
@@ -195,7 +202,10 @@ const Checkout = () => {

*) Belum termasuk biaya pengiriman

Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} - + Syarat & Ketentuan {' '} yang berlaku @@ -253,7 +263,11 @@ const Checkout = () => {

- +

Ukuran dokumen PO Maksimal 5MB

@@ -262,7 +276,11 @@ const Checkout = () => {
-
@@ -279,7 +297,10 @@ const SectionAddress = ({ address, label, url }) => (
{label}
- + Pilih Alamat Lain
diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx index f0aaba4e..a7d65dd0 100644 --- a/src/lib/checkout/components/FinishCheckout.jsx +++ b/src/lib/checkout/components/FinishCheckout.jsx @@ -1,30 +1,30 @@ -import Link from "@/core/components/elements/Link/Link" -import useTransaction from "@/lib/transaction/hooks/useTransaction" +import Link from '@/core/components/elements/Link/Link' +import useTransaction from '@/lib/transaction/hooks/useTransaction' const FinishCheckout = ({ id }) => { const { transaction } = useTransaction({ id }) return ( -
+
-
-

Terima Kasih atas Pembelian Anda

-

- Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak - menerima email, anda dapat menghubungi kami disini. -

-

{transaction.data?.name}

-

No. Transaksi

-
- - Lihat detail pembelian Anda disini - +
+

Terima Kasih atas Pembelian Anda

+

+ Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak + menerima email, anda dapat menghubungi kami disini. +

+

{transaction.data?.name}

+

No. Transaksi

+ + Lihat detail pembelian Anda disini + +
) } -export default FinishCheckout \ No newline at end of file +export default FinishCheckout -- cgit v1.2.3 From edc3f04078da7fc7d53cabf3b397f02193306d67 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 23 Feb 2023 11:32:27 +0700 Subject: fix --- src/lib/checkout/components/Checkout.jsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'src/lib/checkout/components') diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 8048eeba..4d7b2b88 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -15,6 +15,7 @@ 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' const Checkout = () => { const router = useRouter() @@ -158,11 +159,7 @@ const Checkout = () => {
{products?.map((product) => ( - + ))}
-- cgit v1.2.3 From 5a8ec23af34e300b121d7f786b9fa229029027c9 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 23 Feb 2023 11:37:10 +0700 Subject: fix --- src/lib/checkout/components/Checkout.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'src/lib/checkout/components') diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 4d7b2b88..f6170b13 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -158,9 +158,12 @@ const Checkout = () => {
- {products?.map((product) => ( - - ))} + {products && ( + + )}
-- cgit v1.2.3