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/components/Alert.js | 8 +- src/components/Header.js | 32 ++-- src/helpers/address.js | 27 ++++ src/helpers/cart.js | 2 +- src/helpers/slug.js | 5 +- src/pages/my/address/index.js | 28 +++- src/pages/shop/cart.js | 14 +- src/pages/shop/checkout.js | 362 ++++++++++++++++++++++++++---------------- 8 files changed, 304 insertions(+), 174 deletions(-) create mode 100644 src/helpers/address.js (limited to 'src') diff --git a/src/components/Alert.js b/src/components/Alert.js index 64268e05..914d1590 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -2,17 +2,17 @@ const Alert = ({ children, className, type }) => { let typeClass = ''; switch (type) { case 'info': - typeClass = ' bg-blue-100 text-blue-900 ' + typeClass = ' bg-blue-100 text-blue-900 border-blue-400 ' break; case 'success': - typeClass = ' bg-green-100 text-green-900 ' + typeClass = ' bg-green-100 text-green-900 border-green-400 ' break; case 'warning': - typeClass = ' bg-yellow-100 text-yellow-900 ' + typeClass = ' bg-yellow-100 text-yellow-900 border-yellow-400 ' break; } return ( -
{children}
+
{children}
); } diff --git a/src/components/Header.js b/src/components/Header.js index 7f08c2c3..71f8fd58 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -19,6 +19,12 @@ import Link from "./Link"; import Logo from "../images/logo.png"; import greeting from "../helpers/greeting"; +const menus = [ + { name: 'Semua Brand', href: '/shop/brands' }, + { name: 'Blog Indoteknik', href: '/' }, + { name: 'Kategori', href: '/' }, +]; + export default function Header({ title }) { const router = useRouter(); const { q = '' } = router.query; @@ -93,24 +99,14 @@ export default function Header({ title }) { ) }
- - Semua Brand -
- -
- - - Blog Indoteknik -
- -
- - + { menus.map((menu, index) => ( + + { menu.name } +
+ +
+ + )) }
diff --git a/src/helpers/address.js b/src/helpers/address.js new file mode 100644 index 00000000..c4a19af5 --- /dev/null +++ b/src/helpers/address.js @@ -0,0 +1,27 @@ +const getAddress = () => { + const address = localStorage.getItem('address'); + if (address) return JSON.parse(address); + return {}; +} + +const setAddress = (address) => { + localStorage.setItem('address', JSON.stringify(address)); + return true; +} + +const getItemAddress = (key) => { + let address = getAddress(); + return address[key]; +} + +const createOrUpdateItemAddress = (key, value) => { + let address = getAddress(); + address[key] = value; + setAddress(address); + return true; +} + +export { + getItemAddress, + createOrUpdateItemAddress +}; \ No newline at end of file diff --git a/src/helpers/cart.js b/src/helpers/cart.js index a3b43e96..66efcbf2 100644 --- a/src/helpers/cart.js +++ b/src/helpers/cart.js @@ -23,7 +23,7 @@ const createOrUpdateItemCart = (product_id, quantity, selected = false) => { const deleteItemCart = (product_id) => { let cart = getCart(); - delete cart[product_id] + delete cart[product_id]; setCart(cart); return true; } diff --git a/src/helpers/slug.js b/src/helpers/slug.js index b1e67cdf..0a7d30fc 100644 --- a/src/helpers/slug.js +++ b/src/helpers/slug.js @@ -1,7 +1,10 @@ import toTitleCase from './toTitleCase'; const createSlug = (name, id) => { - return name?.trim().replace(new RegExp(/[^A-Za-z0-9]/, 'g'), '-').toLowerCase() + '-' + id; + let slug = name?.trim().replace(new RegExp(/[^A-Za-z0-9]/, 'g'), '-').toLowerCase() + '-' + id; + let splitSlug = slug.split('-'); + let filterSlugFromEmptyChar = splitSlug.filter(x => x != ''); + return filterSlugFromEmptyChar.join('-'); } const getIdFromSlug = (slug) => { 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