summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorRafi Zadanly <rafizadanly@gmail.com>2022-12-29 15:23:30 +0700
committerRafi Zadanly <rafizadanly@gmail.com>2022-12-29 15:23:30 +0700
commit737a880ee01bfe5c05c39ec03185a680a51cbce3 (patch)
tree60539cbd88a2aa2da91350114bf58543a629e78a /src
parentec9e0f90c3d8111d77cc4bfc3c5f56f473428786 (diff)
Checkout detail
Diffstat (limited to 'src')
-rw-r--r--src/components/AppBar.js4
-rw-r--r--src/pages/shop/cart.js11
-rw-r--r--src/pages/shop/checkout.js144
3 files changed, 140 insertions, 19 deletions
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 }) => {
<Head>
<title>{ title } - Indoteknik</title>
</Head>
- <div className="flex justify-between pr-4 py-1 border-b border-gray_r-6 bg-gray_r-1">
+ <div className="flex justify-between pr-4 border-b border-gray_r-6 bg-gray_r-1">
{/* --- Start Title */}
<div className="flex items-center">
- <button type="button" onClick={() => router.back()} className="text-gray_r-12 p-4">
+ <button type="button" onClick={() => router.back()} className="text-gray_r-12 px-4 py-5">
<ArrowLeftIcon className="w-6 stroke-2"/>
</button>
<h1 className="text-h-md">{ title }</h1>
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() {
<LineDivider/>
- <div className="p-4">
- {/* [Start] Product List */}
- <div className="flex flex-col gap-y-6">
+ <div className="p-4 flex flex-col gap-y-6">
{products.map((product, index) => (
<div className="flex gap-x-3" key={index}>
<div className="w-4/12 flex items-center gap-x-2">
@@ -223,13 +221,12 @@ export default function Cart() {
</p>
<div className="flex flex-wrap gap-x-1 items-center mb-2 mt-auto">
<p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
- {product.price.discount_percentage > 0 ? (
+ {product.price.discount_percentage > 0 && (
<>
<span className="badge-red">{product.price.discount_percentage}%</span>
<p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
</>
- ) : ''}
-
+ )}
</div>
<div className="flex items-center">
<p className="mr-auto text-caption-2 text-gray_r-12 font-bold">{currencyFormat(product.quantity * product.price.price_discount)}</p>
@@ -262,8 +259,6 @@ export default function Cart() {
</div>
</div>
))}
- </div>
- {/* [End] Product List */}
</div>
<LineDivider/>
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 (
<Layout>
<AppBar title="Checkout" />
@@ -88,13 +124,103 @@ export default function Checkout() {
</div>
<LineDivider/>
+
+ <div className="p-4 flex flex-col gap-y-4">
+ {products && products.map((product, index) => (
+ <div className="flex gap-x-3" key={index}>
+ <div className="w-4/12 flex items-center gap-x-2">
+ <Image
+ src={product.parent.image}
+ alt={product.parent.name}
+ className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
+ />
+ </div>
+ <div className="w-8/12 flex flex-col">
+ <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
+ {product.parent.name}
+ </Link>
+ <p className="text-caption-2 text-gray_r-11 mt-1">
+ {product.code || '-'}
+ {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''}
+ </p>
+ <p className="text-caption-2 text-gray_r-11 mt-1">
+ {currencyFormat(product.price.price_discount)} × {product.quantity} Barang
+ </p>
+ <p className="text-caption-2 text-gray_r-12 font-bold mt-2">
+ {currencyFormat(product.quantity * product.price.price_discount)}
+ </p>
+ </div>
+ </div>
+ ))}
+ </div>
+
+ <LineDivider/>
+
+ {products && (
+ <div className="p-4">
+ <div className="flex justify-between items-center">
+ <h2>Ringkasan Pesanan</h2>
+ <p className="text-gray_r-11 text-caption-1">{products.length} Barang</p>
+ </div>
+ <hr className="my-4 border-gray_r-6"/>
+ <div className="flex flex-col gap-y-4">
+ <div className="flex gap-x-2 justify-between">
+ <p>Subtotal</p>
+ <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
+ </div>
+ <div className="flex gap-x-2 justify-between">
+ <p>PPN 11%</p>
+ <p className="font-medium">{currencyFormat(totalTaxAmount)}</p>
+ </div>
+ <div className="flex gap-x-2 justify-between">
+ <p>Total Diskon</p>
+ <p className="font-medium text-red_r-11">- {currencyFormat(totalDiscountAmount)}</p>
+ </div>
+ </div>
+ <hr className="my-4 border-gray_r-6"/>
+ <div className="flex gap-x-2 justify-between mb-4">
+ <p>Grand Total</p>
+ <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
+ </div>
+ <p className="text-caption-2 text-gray_r-10 mb-2">*) Belum termasuk biaya pengiriman</p>
+ <p className="text-caption-2 text-gray_r-10 leading-5">
+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
+ </p>
+ </div>
+ )}
+
+ <LineDivider/>
+
+ <div className="p-4">
+ <h2>Pilih Metode Pembayaran</h2>
+ <div className="grid gap-y-3 mt-4">
+ { payments.map((payment, index) => (
+ <button
+ type="button"
+ className={"text-left border border-gray_r-6 rounded-md p-3 " + (selectedPayment == payment.name && 'border-yellow_r-10 bg-yellow_r-3')}
+ onClick={() => setSelectedPayment(payment.name)}
+ key={index}
+ >
+ <div className="flex gap-x-2">
+ <p>{payment.name} - {payment.number}</p>
+ <DocumentDuplicateIcon className="w-4" onClick={() => copyToClipboard(payment.number)}/>
+ </div>
+ <p className="mt-1 text-gray_r-11">PT. Indoteknik Dotcom Gemilang</p>
+ </button>
+ )) }
+ </div>
+ </div>
+
+ <LineDivider/>
+
+ <div className="flex gap-x-3 p-4">
+ <button
+ className="flex-1 btn-yellow"
+ onClick={() => router.push('/shop/checkout')}
+ >
+ Bayar
+ </button>
+ </div>
</Layout>
)
-}
-// odoo = 1677721600
-// from = 3026531840
-// to = 3355443200
-
-// odoo = 629145600
-// from = 2355443200
-// to = 1258291200 \ No newline at end of file
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:12:44 +0000