From ada443445767679dd2d2b2c889bfac02609778b8 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 6 Feb 2023 17:01:34 +0700 Subject: no message --- src/pages/shop/checkout.js | 339 ------------------------------------- src/pages/shop/checkout/finish.js | 47 +++++ src/pages/shop/checkout/index.js | 319 ++++++++++++++++++++++++++++++++++ src/pages/shop/quotation/finish.js | 2 +- 4 files changed, 367 insertions(+), 340 deletions(-) delete mode 100644 src/pages/shop/checkout.js create mode 100644 src/pages/shop/checkout/finish.js create mode 100644 src/pages/shop/checkout/index.js (limited to 'src') diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js deleted file mode 100644 index 8a52486c..00000000 --- a/src/pages/shop/checkout.js +++ /dev/null @@ -1,339 +0,0 @@ -import { ExclamationCircleIcon } from "@heroicons/react/24/solid"; -import { useEffect, useState } from "react"; -import Alert from "@/components/elements/Alert"; -import AppBar from "@/components/layouts/AppBar"; -import Layout from "@/components/layouts/Layout"; -import LineDivider from "@/components/elements/LineDivider"; -import Link from "@/components/elements/Link"; -import ProgressBar from "@/components/elements/ProgressBar"; -import Spinner from "@/components/elements/Spinner"; -import apiOdoo from "@/core/utils/apiOdoo"; -import { useAuth } from "@/core/utils/auth"; -import { deleteItemCart, getCart } from "@/core/utils/cart"; -import currencyFormat from "@/core/utils/currencyFormat"; -import { getItemAddress } from "@/core/utils/address"; -import { useRouter } from "next/router"; -import WithAuth from "@/components/auth/WithAuth"; -import { toast } from "react-hot-toast"; -import getFileBase64 from "@/core/utils/getFileBase64"; -import VariantCard from "@/components/variants/VariantCard"; - -export default function Checkout() { - const router = useRouter(); - const { product_id, qty } = router.query; - const [ auth ] = useAuth(); - const [ addresses, setAddresses ] = useState(null); - const [ poNumber, setPoNumber ] = useState(''); - const [ poFile, setPoFile ] = useState(''); - const [ selectedAddress, setSelectedAddress ] = useState({ - shipping: null, - invoicing: null - }); - const [ selectedPayment, setSelectedPayment ] = useState(null); - const [ products, setProducts ] = useState(null); - const [ totalAmount, setTotalAmount ] = useState(0); - const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0); - const [ finishCheckout, setFinishCheckout ] = useState(null); - - const payments = [ - { name: 'BCA', number: '8870-4000-81' }, - { name: 'MANDIRI', number: '155-0067-6869-75' }, - ]; - - useEffect(() => { - const getAddresses = async () => { - if (auth) { - const dataAddresses = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`); - setAddresses(dataAddresses); - } - }; - getAddresses(); - }, [auth]); - - useEffect(() => { - const getProducts = async () => { - let cart = getCart(); - let productIds = []; - if (product_id) { - productIds = [parseInt(product_id)]; - } else { - productIds = Object - .values(cart) - .filter((itemCart) => itemCart.selected == true) - .map((itemCart) => itemCart.product_id); - } - if (productIds.length > 0) { - productIds = productIds.join(','); - let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`); - dataProducts = dataProducts.map((product) => { - if (product_id) { - product.quantity = 1; - if (qty) product.quantity = parseInt(qty); - } else { - product.quantity = cart[product.id].quantity; - } - return product; - }); - setProducts(dataProducts); - } else { - if (auth) router.push('/shop/cart'); - } - }; - getProducts(); - }, [router, auth, product_id, qty]); - - useEffect(() => { - if (addresses) { - const matchAddress = (key) => { - const addressToMatch = getItemAddress(key); - let 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]); - - useEffect(() => { - if (products) { - let calculateTotalAmount = 0; - let calculateTotalDiscountAmount = 0; - products.forEach(product => { - calculateTotalAmount += product.price.price * product.quantity; - calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity; - }); - setTotalAmount(calculateTotalAmount); - setTotalDiscountAmount(calculateTotalDiscountAmount); - } - }, [products]); - - const submit = async () => { - if (!selectedPayment) { - toast.error('Mohon pilih metode pembayaran', { - position: 'bottom-center' - }); - return; - } - if (poFile && poFile.size > 5000000) { - toast.error('Maksimal ukuran file adalah 5MB', { - position: 'bottom-center' - }); - return; - } - let 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) data.po_number = poNumber; - if (poFile) data.po_file = await getFileBase64(poFile); - - const checkoutToOdoo = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/checkout`, data); - for (const product of products) { - deleteItemCart(product.id); - } - setFinishCheckout(checkoutToOdoo); - } - - return ( - - - - - { finishCheckout ? ( -
-
-

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.

-

{ finishCheckout.name }

-

No. Transaksi

-
-
- Mohon konfirmasi pembelian Anda disini -
-
- ) : ( - <> - { !products && !addresses && ( -
- -
- ) } - - { products && addresses && ( - <> - - - - -
- -
- -
- Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini - -
- - - -
-
-

Alamat Pengiriman

- Pilih Alamat Lain -
- - { selectedAddress.shipping && ( -
-
{ selectedAddress.shipping.type.charAt(0).toUpperCase() + selectedAddress.shipping.type.slice(1) + ' Address' }
-

{ selectedAddress.shipping.name }

-

{ selectedAddress.shipping.mobile }

-

{ selectedAddress.shipping.street }, { selectedAddress.shipping?.city?.name }

-
- ) } -
- - - -
- {products.map((product, index) => ( - - ))} -
- - - -
-
-

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 -

-
- - - -
-
-

Alamat Penagihan

- Pilih Alamat Lain -
- - { selectedAddress.invoicing && ( -
-
{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }
-

{ selectedAddress.invoicing.name }

-

{ selectedAddress.invoicing.mobile }

-

{ selectedAddress.invoicing.street } { selectedAddress.invoicing.street2 }

-
- ) } -
- - - -
-

Metode Pembayaran (Wajib dipilih)

-
- { payments.map((payment, index) => ( - - )) } -
-
- - - -
-

Purchase Order

- -
-
- - setPoFile(e.target.files[0])} - /> -
-
- - setPoNumber(e.target.value)} - /> -
-
-

Ukuran dokumen PO Maksimal 5MB

-
- - - -
- -
- - ) } - - ) } - - - ) -} \ No newline at end of file diff --git a/src/pages/shop/checkout/finish.js b/src/pages/shop/checkout/finish.js new file mode 100644 index 00000000..df284f8a --- /dev/null +++ b/src/pages/shop/checkout/finish.js @@ -0,0 +1,47 @@ +import WithAuth from "@/components/auth/WithAuth"; +import Link from "@/components/elements/Link"; +import AppBar from "@/components/layouts/AppBar"; +import Header from "@/components/layouts/Header"; +import Layout from "@/components/layouts/Layout"; +import apiOdoo from "@/core/utils/apiOdoo"; +import { useAuth } from "@/core/utils/auth"; +import { EnvelopeIcon } from "@heroicons/react/24/outline"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; + +export default function FinishCheckout() { + const router = useRouter(); + const { id } = router.query; + const [ auth ] = useAuth(); + const [ transaction, setTransactions ] = useState(null); + + useEffect(() => { + const loadTransaction = async () => { + if (auth && id) { + const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order/${id}`); + setTransactions(dataTransaction); + } + }; + loadTransaction(); + }); + + 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?.name }

+

No. Transaksi

+
+ + Lihat detail pembelian Anda disini + +
+ + + ); +} \ No newline at end of file diff --git a/src/pages/shop/checkout/index.js b/src/pages/shop/checkout/index.js new file mode 100644 index 00000000..57fe5d3a --- /dev/null +++ b/src/pages/shop/checkout/index.js @@ -0,0 +1,319 @@ +import { ExclamationCircleIcon } from "@heroicons/react/24/solid"; +import { useEffect, useState } from "react"; +import Alert from "@/components/elements/Alert"; +import AppBar from "@/components/layouts/AppBar"; +import Layout from "@/components/layouts/Layout"; +import LineDivider from "@/components/elements/LineDivider"; +import Link from "@/components/elements/Link"; +import ProgressBar from "@/components/elements/ProgressBar"; +import Spinner from "@/components/elements/Spinner"; +import apiOdoo from "@/core/utils/apiOdoo"; +import { useAuth } from "@/core/utils/auth"; +import { deleteItemCart, getCart } from "@/core/utils/cart"; +import currencyFormat from "@/core/utils/currencyFormat"; +import { getItemAddress } from "@/core/utils/address"; +import { useRouter } from "next/router"; +import WithAuth from "@/components/auth/WithAuth"; +import { toast } from "react-hot-toast"; +import getFileBase64 from "@/core/utils/getFileBase64"; +import VariantCard from "@/components/variants/VariantCard"; + +export default function Checkout() { + const router = useRouter(); + const { product_id, qty } = router.query; + const [ auth ] = useAuth(); + const [ addresses, setAddresses ] = useState(null); + const [ poNumber, setPoNumber ] = useState(''); + const [ poFile, setPoFile ] = useState(''); + const [ selectedAddress, setSelectedAddress ] = useState({ + shipping: null, + invoicing: null + }); + const [ selectedPayment, setSelectedPayment ] = useState(null); + const [ products, setProducts ] = useState(null); + const [ totalAmount, setTotalAmount ] = useState(0); + const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0); + + const payments = [ + { name: 'BCA', number: '8870-4000-81' }, + { name: 'MANDIRI', number: '155-0067-6869-75' }, + ]; + + useEffect(() => { + const getAddresses = async () => { + if (auth) { + const dataAddresses = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`); + setAddresses(dataAddresses); + } + }; + getAddresses(); + }, [auth]); + + useEffect(() => { + const getProducts = async () => { + let cart = getCart(); + let productIds = []; + if (product_id) { + productIds = [parseInt(product_id)]; + } else { + productIds = Object + .values(cart) + .filter((itemCart) => itemCart.selected == true) + .map((itemCart) => itemCart.product_id); + } + if (productIds.length > 0) { + productIds = productIds.join(','); + let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`); + dataProducts = dataProducts.map((product) => { + if (product_id) { + product.quantity = 1; + if (qty) product.quantity = parseInt(qty); + } else { + product.quantity = cart[product.id].quantity; + } + return product; + }); + setProducts(dataProducts); + } + }; + getProducts(); + }, [router, auth, product_id, qty]); + + useEffect(() => { + if (addresses) { + const matchAddress = (key) => { + const addressToMatch = getItemAddress(key); + let 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]); + + useEffect(() => { + if (products) { + let calculateTotalAmount = 0; + let calculateTotalDiscountAmount = 0; + products.forEach(product => { + calculateTotalAmount += product.price.price * product.quantity; + calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity; + }); + setTotalAmount(calculateTotalAmount); + setTotalDiscountAmount(calculateTotalDiscountAmount); + } + }, [products]); + + const submit = async () => { + if (!selectedPayment) { + toast.error('Mohon pilih metode pembayaran', { + position: 'bottom-center' + }); + return; + } + if (poFile && poFile.size > 5000000) { + toast.error('Maksimal ukuran file adalah 5MB', { + position: 'bottom-center' + }); + return; + } + let 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) data.po_number = poNumber; + if (poFile) data.po_file = await getFileBase64(poFile); + + const checkoutToOdoo = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/checkout`, data); + for (const product of products) { + deleteItemCart(product.id); + } + router.push(`/shop/checkout/finish?id=${checkoutToOdoo.id}`); + } + + return ( + + + + { !products && !addresses && ( +
+ +
+ ) } + + { products && addresses && ( + <> + + + + +
+ +
+ +
+ Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini + +
+ + + +
+
+

Alamat Pengiriman

+ Pilih Alamat Lain +
+ + { selectedAddress.shipping && ( +
+
{ selectedAddress.shipping.type.charAt(0).toUpperCase() + selectedAddress.shipping.type.slice(1) + ' Address' }
+

{ selectedAddress.shipping.name }

+

{ selectedAddress.shipping.mobile }

+

{ selectedAddress.shipping.street }, { selectedAddress.shipping?.city?.name }

+
+ ) } +
+ + + +
+ {products.map((product, index) => ( + + ))} +
+ + + +
+
+

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 +

+
+ + + +
+
+

Alamat Penagihan

+ Pilih Alamat Lain +
+ + { selectedAddress.invoicing && ( +
+
{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }
+

{ selectedAddress.invoicing.name }

+

{ selectedAddress.invoicing.mobile }

+

{ selectedAddress.invoicing.street } { selectedAddress.invoicing.street2 }

+
+ ) } +
+ + + +
+

Metode Pembayaran (Wajib dipilih)

+
+ { payments.map((payment, index) => ( + + )) } +
+
+ + + +
+

Purchase Order

+ +
+
+ + setPoFile(e.target.files[0])} + /> +
+
+ + setPoNumber(e.target.value)} + /> +
+
+

Ukuran dokumen PO Maksimal 5MB

+
+ + + +
+ +
+ + ) } + + + ) +} \ No newline at end of file diff --git a/src/pages/shop/quotation/finish.js b/src/pages/shop/quotation/finish.js index b1f092d3..f7983fef 100644 --- a/src/pages/shop/quotation/finish.js +++ b/src/pages/shop/quotation/finish.js @@ -31,7 +31,7 @@ export default function FinishQuotation() { { id && ( Lihat Penawaran )} - Ke Halaman Utama + Ke Halaman Utama -- cgit v1.2.3