1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
import { useEffect, useState } from "react";
import Alert from "../../components/Alert";
import AppBar from "../../components/AppBar";
import Layout from "../../components/Layout";
import LineDivider from "../../components/LineDivider";
import Link from "../../components/Link";
import ProgressBar from "../../components/ProgressBar";
import apiOdoo from "../../helpers/apiOdoo";
import { useAuth } from "../../helpers/auth";
import { getCart } from "../../helpers/cart";
export default function Checkout() {
const [auth, setAuth] = useAuth();
const [address, setAddress] = useState(null);
const [selectedAddress, setSelectedAddress] = useState(null);
const [products, setProducts] = useState(null);
useEffect(() => {
const getAddress = async () => {
if (auth?.id) {
const dataAddress = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`);
setAddress(dataAddress);
}
};
getAddress();
}, [auth]);
useEffect(() => {
const getProducts = async () => {
let cart = getCart();
let productIds = Object
.values(cart)
.filter((itemCart) => itemCart.to_process == 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) => ({
...product,
quantity: cart[product.id].quantity,
to_process: cart[product.id].to_process,
}));
setProducts(dataProducts);
}
};
getProducts();
}, []);
useEffect(() => {
if (address) setSelectedAddress(address[0]);
}, [address]);
return (
<Layout>
<AppBar title="Checkout" />
<ProgressBar
current={2}
labels={['Keranjang', 'Pembayaran', 'Selesai']}
/>
<LineDivider/>
<Alert type="info" className="text-caption-2 flex gap-x-3 items-center my-2">
<div>
<ExclamationCircleIcon className="w-6 text-blue-700"/>
</div>
<span>Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini</span>
</Alert>
<LineDivider/>
<div className="p-4">
<div className="flex justify-between items-center">
<h2>Alamat Pengiriman</h2>
<Link className="text-caption-1" href="/">Ubah Alamat</Link>
</div>
{ selectedAddress && (
<div className="mt-4 text-caption-1">
<p className="font-medium">{ selectedAddress.name }</p>
<p className="mt-2 text-gray_r-11">{ selectedAddress.mobile }</p>
<p className="mt-1 text-gray_r-11">{ selectedAddress.street } { selectedAddress.street2 }</p>
</div>
) }
</div>
<LineDivider/>
</Layout>
)
}
// odoo = 1677721600
// from = 3026531840
// to = 3355443200
// odoo = 629145600
// from = 2355443200
// to = 1258291200
|
