From 737a880ee01bfe5c05c39ec03185a680a51cbce3 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 29 Dec 2022 15:23:30 +0700 Subject: Checkout detail --- src/components/AppBar.js | 4 +- src/pages/shop/cart.js | 11 +--- src/pages/shop/checkout.js | 144 ++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 140 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 10a35580..55af9f1a 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -11,10 +11,10 @@ const AppBar = ({ title }) => { { title } - Indoteknik -
+
{/* --- Start Title */}
-

{ title }

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index 6fe079b3..2ab0aaf5 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -197,9 +197,7 @@ export default function Cart() { -
- {/* [Start] Product List */} -
+
{products.map((product, index) => (
@@ -223,13 +221,12 @@ export default function Cart() {

{currencyFormat(product.price.price_discount)}

- {product.price.discount_percentage > 0 ? ( + {product.price.discount_percentage > 0 && ( <> {product.price.discount_percentage}%

{currencyFormat(product.price.price)}

- ) : ''} - + )}

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

@@ -262,8 +259,6 @@ export default function Cart() {
))} -
- {/* [End] Product List */}
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js index b1704cbc..00e68296 100644 --- a/src/pages/shop/checkout.js +++ b/src/pages/shop/checkout.js @@ -1,7 +1,9 @@ -import { ExclamationCircleIcon } from "@heroicons/react/24/solid"; +import { DocumentDuplicateIcon, 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"; import Layout from "../../components/Layout"; import LineDivider from "../../components/LineDivider"; import Link from "../../components/Link"; @@ -9,13 +11,29 @@ import ProgressBar from "../../components/ProgressBar"; import apiOdoo from "../../helpers/apiOdoo"; import { useAuth } from "../../helpers/auth"; import { getCart } from "../../helpers/cart"; +import currencyFormat from "../../helpers/currencyFormat"; +import { createSlug } from "../../helpers/slug"; export default function Checkout() { const [auth, setAuth] = useAuth(); const [address, setAddress] = useState(null); const [selectedAddress, setSelectedAddress] = useState(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 payments = [ + { name: 'BCA', number: '8870-4000-81' }, + { name: 'MANDIRI', number: '155-0067-6869-75' }, + ]; + + const copyToClipboard = (text) => { + navigator.clipboard.writeText(text); + toast.success('Berhasil copy ke clipboard', { position: 'bottom-center', duration: 1500 }); + }; useEffect(() => { const getAddress = async () => { @@ -52,6 +70,24 @@ export default function Checkout() { if (address) setSelectedAddress(address[0]); }, [address]); + useEffect(() => { + if (products) { + const productsToProcess = products.filter((product) => product.to_process == true); + let calculateTotalPriceBeforeTax = 0; + let calculateTotalTaxAmount = 0; + let calculateTotalDiscountAmount = 0; + productsToProcess.forEach(product => { + let priceBeforeTax = product.price.price / 1.11; + calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity; + calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity; + calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity; + }); + setTotalPriceBeforeTax(calculateTotalPriceBeforeTax); + setTotalTaxAmount(calculateTotalTaxAmount); + setTotalDiscountAmount(calculateTotalDiscountAmount); + } + }, [products]); + return ( @@ -88,13 +124,103 @@ export default function Checkout() {
+ +
+ {products && 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)} +

+
+
+ ))} +
+ + + + {products && ( +
+
+

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) => ( + + )) } +
+
+ + + +
+ +
) -} -// odoo = 1677721600 -// from = 3026531840 -// to = 3355443200 - -// odoo = 629145600 -// from = 2355443200 -// to = 1258291200 \ No newline at end of file +} \ No newline at end of file -- cgit v1.2.3