From bd1e930f875e942ee8a60718a3c1268a62598266 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 9 Jan 2023 12:08:27 +0700 Subject: checkout to odoo, select address --- src/pages/my/address/index.js | 28 +++- src/pages/shop/cart.js | 14 +- src/pages/shop/checkout.js | 362 ++++++++++++++++++++++++++---------------- 3 files changed, 254 insertions(+), 150 deletions(-) (limited to 'src/pages') diff --git a/src/pages/my/address/index.js b/src/pages/my/address/index.js index cac6e8f6..b97e21e7 100644 --- a/src/pages/my/address/index.js +++ b/src/pages/my/address/index.js @@ -5,10 +5,15 @@ import Link from "../../../components/Link"; import WithAuth from "../../../components/WithAuth"; import apiOdoo from "../../../helpers/apiOdoo"; import { useAuth } from "../../../helpers/auth"; +import { useRouter } from "next/router"; +import { createOrUpdateItemAddress, getItemAddress } from "../../../helpers/address"; export default function Address() { - const [auth] = useAuth(); - const [addresses, setAddresses] = useState(null); + const router = useRouter(); + const { select } = router.query; + const [ auth ] = useAuth(); + const [ addresses, setAddresses ] = useState(null); + const [ selectedAdress, setSelectedAdress ] = useState(null); useEffect(() => { const getAddress = async () => { @@ -20,6 +25,19 @@ export default function Address() { getAddress(); }, [auth]); + useEffect(() => { + if (select) { + setSelectedAdress(getItemAddress(select)); + } + }, [select]); + + const changeSelectedAddress = (id) => { + if (select) { + createOrUpdateItemAddress(select, id); + router.back(); + } + }; + return ( @@ -31,7 +49,11 @@ export default function Address() {
{ addresses && addresses.map((address, index) => ( -
+
changeSelectedAddress(address.id)} + >

{ address.name }

{ address.mobile }

{ address.street } { address.street2 }

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index eb295c1f..e480d117 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -187,12 +187,14 @@ export default function Cart() { {/* --- Start Alert */} - -
- -
- Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami. - +
+ +
+ +
+ Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami. + +
{/* ---- End Alert */} diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js index 54b9d598..a72b8976 100644 --- a/src/pages/shop/checkout.js +++ b/src/pages/shop/checkout.js @@ -1,6 +1,5 @@ import { ExclamationCircleIcon } from "@heroicons/react/24/solid"; import { useEffect, useState } from "react"; -import { toast } from "react-hot-toast"; import Alert from "../../components/Alert"; import AppBar from "../../components/AppBar"; import Image from "../../components/Image"; @@ -11,21 +10,28 @@ import ProgressBar from "../../components/ProgressBar"; import Spinner from "../../components/Spinner"; import apiOdoo from "../../helpers/apiOdoo"; import { useAuth } from "../../helpers/auth"; -import { getCart } from "../../helpers/cart"; +import { deleteItemCart, getCart } from "../../helpers/cart"; import currencyFormat from "../../helpers/currencyFormat"; -import { createSlug } from "../../helpers/slug"; - +import { getItemAddress } from "../../helpers/address"; +import { useRouter } from "next/router"; +import WithAuth from "../../components/WithAuth"; +import { toast } from "react-hot-toast"; export default function Checkout() { + const router = useRouter(); const [auth] = useAuth(); - const [address, setAddress] = useState(null); - const [selectedAddress, setSelectedAddress] = useState(null); + const [addresses, setAddresses] = useState(null); + const [selectedAddress, setSelectedAddress] = useState({ + shipping: null, + invoicing: null + }); const [selectedPayment, setSelectedPayment] = useState(null); const [products, setProducts] = useState(null); const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0); const [totalTaxAmount, setTotalTaxAmount] = useState(0); const [totalDiscountAmount, setTotalDiscountAmount] = useState(0); const [isLoading, setIsLoading] = useState(true); + const [finishCheckout, setFinishCheckout] = useState(null); const payments = [ { name: 'BCA', number: '8870-4000-81' }, @@ -33,13 +39,13 @@ export default function Checkout() { ]; useEffect(() => { - const getAddress = async () => { + const getAddresses = async () => { if (auth) { - const dataAddress = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`); - setAddress(dataAddress); + const dataAddresses = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`); + setAddresses(dataAddresses); } }; - getAddress(); + getAddresses(); }, [auth]); useEffect(() => { @@ -58,14 +64,29 @@ export default function Checkout() { selected: cart[product.id].selected, })); setProducts(dataProducts); + } else { + if (auth) router.push('/shop/cart'); } }; getProducts(); - }, []); + }, [router, auth]); useEffect(() => { - if (address) setSelectedAddress(address[0]); - }, [address]); + 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) { @@ -86,147 +107,206 @@ export default function Checkout() { }, [products]); useEffect(() => { - if (address && products) setIsLoading(false); - }, [address, products]); + if (addresses && products) setIsLoading(false); + }, [addresses, products]); + + const submit = async () => { + if (!selectedPayment) { + toast.error('Mohon pilih metode pembayaran terlebih dahulu', { + position: 'bottom-center' + }); + return; + } + let productOrder = products.map((product) => ({ 'product_id': product.id, 'quantity': product.quantity })); + let data = { + 'user_id': auth.id, + 'partner_id': auth.partner_id, + 'partner_shipping_id': selectedAddress.shipping.id, + 'partner_invoice_id': selectedAddress.invoicing.id, + 'order_line': JSON.stringify(productOrder) + } + const checkoutToOdoo = await apiOdoo('POST', '/api/v1/sale_order/checkout', data); + for (const product of products) { + deleteItemCart(product.id); + } + setFinishCheckout(checkoutToOdoo); + } return ( - - - - {isLoading && ( -
- -
- )} - - { products && address && ( - <> - - - - - -
- + + + + + { finishCheckout ? ( +
+
+

Terima Kasih atas Pembelian Anda

+

Details pembelian sudah kami kirimkan melalui email anda. Mohon dicek kembali. jika tidak menerima email anda dapat menghubungi kami disini.

+

{ finishCheckout.name }

+

No. Transaksi

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

Alamat Pengiriman

- Ubah Alamat -
+ - { selectedAddress && ( -
-

{ selectedAddress.name }

-

{ selectedAddress.mobile }

-

{ selectedAddress.street } { selectedAddress.street2 }

-
- ) } -
+
+ +
+ +
+ Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini + +
+ + - - -
- {products.map((product, index) => ( -
-
- {product.parent.name} +
+
+

Alamat Pengiriman

+ Pilih Alamat Lain +
+ + { selectedAddress.shipping && ( +
+

{ selectedAddress.shipping.name }

+

{ selectedAddress.shipping.mobile }

+

{ selectedAddress.shipping.street } { selectedAddress.shipping.street2 }

+
+ ) }
-
-

- {product.parent.name} -

-

- {product.code || '-'} - {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''} -

-

- {currencyFormat(product.price.price_discount)} × {product.quantity} Barang -

-

- {currencyFormat(product.quantity * product.price.price_discount)} + + + +

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

+ {product.parent.name} +

+

+ {product.code || '-'} + {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''} +

+

+ {currencyFormat(product.price.price_discount)} × {product.quantity} Barang +

+

+ {currencyFormat(product.quantity * product.price.price_discount)} +

+
+
+ ))} +
+ + + +
+
+

Ringkasan Pesanan

+

{products.length} Barang

+
+
+
+
+

Subtotal

+

{currencyFormat(totalPriceBeforeTax)}

+
+
+

PPN 11%

+

{currencyFormat(totalTaxAmount)}

+
+
+

Total Diskon

+

- {currencyFormat(totalDiscountAmount)}

+
+
+
+
+

Grand Total

+

{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}

+
+

*) Belum termasuk biaya pengiriman

+

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

-
- ))} -
- - -
-
-

Ringkasan Pesanan

-

{products.length} Barang

-
-
-
-
-

Subtotal

-

{currencyFormat(totalPriceBeforeTax)}

-
-
-

PPN 11%

-

{currencyFormat(totalTaxAmount)}

-
-
-

Total Diskon

-

- {currencyFormat(totalDiscountAmount)}

-
-
-
-
-

Grand Total

-

{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}

-
-

*) Belum termasuk biaya pengiriman

-

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

-
+ - - -
-

Pilih Metode Pembayaran

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

Alamat Penagihan

+ Pilih Alamat Lain +
- + { selectedAddress.invoicing && ( +
+

{ selectedAddress.invoicing.name }

+

{ selectedAddress.invoicing.mobile }

+

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

+
+ ) } +
-
- -
- - ) } - + + +
+

Pilih Metode Pembayaran

+
+ { payments.map((payment, index) => ( + + )) } +
+
+ + + +
+ +
+ + ) } + + ) } + + ) } \ No newline at end of file -- cgit v1.2.3