diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-06 17:01:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-06 17:01:34 +0700 |
| commit | ada443445767679dd2d2b2c889bfac02609778b8 (patch) | |
| tree | b12b6cc287dcecb4d89ed70df0c7f25a2780d6b4 /src/pages/shop/checkout.js | |
| parent | fca30ebbb935b38fc1244b43f4d40184ce0745bd (diff) | |
no message
Diffstat (limited to 'src/pages/shop/checkout.js')
| -rw-r--r-- | src/pages/shop/checkout.js | 339 |
1 files changed, 0 insertions, 339 deletions
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js deleted file mode 100644 index 8a52486c..00000000 --- a/src/pages/shop/checkout.js +++ /dev/null @@ -1,339 +0,0 @@ -import { ExclamationCircleIcon } from "@heroicons/react/24/solid"; -import { useEffect, useState } from "react"; -import Alert from "@/components/elements/Alert"; -import AppBar from "@/components/layouts/AppBar"; -import Layout from "@/components/layouts/Layout"; -import LineDivider from "@/components/elements/LineDivider"; -import Link from "@/components/elements/Link"; -import ProgressBar from "@/components/elements/ProgressBar"; -import Spinner from "@/components/elements/Spinner"; -import apiOdoo from "@/core/utils/apiOdoo"; -import { useAuth } from "@/core/utils/auth"; -import { deleteItemCart, getCart } from "@/core/utils/cart"; -import currencyFormat from "@/core/utils/currencyFormat"; -import { getItemAddress } from "@/core/utils/address"; -import { useRouter } from "next/router"; -import WithAuth from "@/components/auth/WithAuth"; -import { toast } from "react-hot-toast"; -import getFileBase64 from "@/core/utils/getFileBase64"; -import VariantCard from "@/components/variants/VariantCard"; - -export default function Checkout() { - const router = useRouter(); - const { product_id, qty } = router.query; - const [ auth ] = useAuth(); - const [ addresses, setAddresses ] = useState(null); - const [ poNumber, setPoNumber ] = useState(''); - const [ poFile, setPoFile ] = useState(''); - const [ selectedAddress, setSelectedAddress ] = useState({ - shipping: null, - invoicing: null - }); - const [ selectedPayment, setSelectedPayment ] = useState(null); - const [ products, setProducts ] = useState(null); - const [ totalAmount, setTotalAmount ] = useState(0); - const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0); - const [ finishCheckout, setFinishCheckout ] = useState(null); - - const payments = [ - { name: 'BCA', number: '8870-4000-81' }, - { name: 'MANDIRI', number: '155-0067-6869-75' }, - ]; - - useEffect(() => { - const getAddresses = async () => { - if (auth) { - const dataAddresses = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`); - setAddresses(dataAddresses); - } - }; - getAddresses(); - }, [auth]); - - useEffect(() => { - const getProducts = async () => { - let cart = getCart(); - let productIds = []; - if (product_id) { - productIds = [parseInt(product_id)]; - } else { - productIds = Object - .values(cart) - .filter((itemCart) => itemCart.selected == 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) => { - if (product_id) { - product.quantity = 1; - if (qty) product.quantity = parseInt(qty); - } else { - product.quantity = cart[product.id].quantity; - } - return product; - }); - setProducts(dataProducts); - } else { - if (auth) router.push('/shop/cart'); - } - }; - getProducts(); - }, [router, auth, product_id, qty]); - - useEffect(() => { - 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) { - let calculateTotalAmount = 0; - let calculateTotalDiscountAmount = 0; - products.forEach(product => { - calculateTotalAmount += product.price.price * product.quantity; - calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity; - }); - setTotalAmount(calculateTotalAmount); - setTotalDiscountAmount(calculateTotalDiscountAmount); - } - }, [products]); - - const submit = async () => { - if (!selectedPayment) { - toast.error('Mohon pilih metode pembayaran', { - position: 'bottom-center' - }); - return; - } - if (poFile && poFile.size > 5000000) { - toast.error('Maksimal ukuran file adalah 5MB', { - position: 'bottom-center' - }); - return; - } - let productOrder = products.map((product) => ({ 'product_id': product.id, 'quantity': product.quantity })); - let data = { - 'partner_shipping_id': selectedAddress.shipping.id, - 'partner_invoice_id': selectedAddress.invoicing.id, - 'order_line': JSON.stringify(productOrder), - 'type': 'sale_order' - }; - if (poNumber) data.po_number = poNumber; - if (poFile) data.po_file = await getFileBase64(poFile); - - const checkoutToOdoo = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/checkout`, data); - for (const product of products) { - deleteItemCart(product.id); - } - setFinishCheckout(checkoutToOdoo); - } - - return ( - <WithAuth> - <Layout> - <AppBar title={finishCheckout ? "Pembelian Berhasil" : "Checkout"} /> - - { finishCheckout ? ( - <div className="m-4 rounded-xl bg-yellow_r-4 text-center border border-yellow_r-7"> - <div className="px-4 py-6"> - <p className="h2 mb-2">Terima Kasih atas Pembelian Anda</p> - <p className="text-gray_r-11 mb-4 leading-6">Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak menerima email anda dapat menghubungi kami disini.</p> - <p className="mb-2 font-medium">{ finishCheckout.name }</p> - <p className="text-caption-2 text-gray_r-11">No. Transaksi</p> - </div> - <div className="bg-yellow_r-6 rounded-b-xl py-4"> - Mohon konfirmasi pembelian Anda disini - </div> - </div> - ) : ( - <> - { !products && !addresses && ( - <div className="flex justify-center items-center gap-x-3 mt-14"> - <Spinner className="w-10 text-gray_r-8 fill-gray_r-12" /> - </div> - ) } - - { products && addresses && ( - <> - <ProgressBar - current={2} - labels={['Keranjang', 'Pembayaran', 'Selesai']} - /> - - <LineDivider/> - - <div className="p-4"> - <Alert type="info" className="text-caption-2 flex gap-x-3 items-center"> - <div> - <ExclamationCircleIcon className="w-6 text-blue-700"/> - </div> - <span>Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini</span> - </Alert> - </div> - - <LineDivider/> - - <div className="p-4"> - <div className="flex justify-between items-center"> - <h2>Alamat Pengiriman</h2> - <Link className="text-caption-1" href="/my/address?select=shipping">Pilih Alamat Lain</Link> - </div> - - { selectedAddress.shipping && ( - <div className="mt-4 text-caption-1"> - <div className="badge-red mb-2">{ selectedAddress.shipping.type.charAt(0).toUpperCase() + selectedAddress.shipping.type.slice(1) + ' Address' }</div> - <p className="font-medium">{ selectedAddress.shipping.name }</p> - <p className="mt-2 text-gray_r-11">{ selectedAddress.shipping.mobile }</p> - <p className="mt-1 text-gray_r-11">{ selectedAddress.shipping.street }, { selectedAddress.shipping?.city?.name }</p> - </div> - ) } - </div> - - <LineDivider/> - - <div className="p-4 flex flex-col gap-y-4"> - {products.map((product, index) => ( - <VariantCard - data={product} - openOnClick={false} - key={index} - /> - ))} - </div> - - <LineDivider/> - - <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>Total Belanja</p> - <p className="font-medium">{currencyFormat(totalAmount)}</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 className="flex gap-x-2 justify-between"> - <p>Subtotal</p> - <p className="font-medium">{currencyFormat(totalAmount - totalDiscountAmount)}</p> - </div> - <div className="flex gap-x-2 justify-between"> - <p>PPN 11% (Incl.)</p> - <p className="font-medium">{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</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(totalAmount - 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"> - <div className="flex justify-between items-center"> - <h2>Alamat Penagihan</h2> - <Link className="text-caption-1" href="/my/address?select=invoicing">Pilih Alamat Lain</Link> - </div> - - { selectedAddress.invoicing && ( - <div className="mt-4 text-caption-1"> - <div className="badge-red mb-2">{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }</div> - <p className="font-medium">{ selectedAddress.invoicing.name }</p> - <p className="mt-2 text-gray_r-11">{ selectedAddress.invoicing.mobile }</p> - <p className="mt-1 text-gray_r-11">{ selectedAddress.invoicing.street } { selectedAddress.invoicing.street2 }</p> - </div> - ) } - </div> - - <LineDivider/> - - <div className="p-4"> - <h2>Metode Pembayaran <span className="font-normal text-gray_r-11">(Wajib dipilih)</span></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} - > - <p>{payment.name} - {payment.number}</p> - <p className="mt-1 text-gray_r-11">PT. Indoteknik Dotcom Gemilang</p> - </button> - )) } - </div> - </div> - - <LineDivider/> - - <div className="p-4"> - <h2>Purchase Order</h2> - - <div className="mt-4 flex gap-x-3"> - <div className="w-6/12"> - <label className="form-label font-normal"> - Dokumen PO - </label> - <input - type="file" - className="form-input mt-2 h-12" - accept="image/*,application/pdf" - onChange={(e) => setPoFile(e.target.files[0])} - /> - </div> - <div className="w-6/12"> - <label className="form-label font-normal">Nomor PO</label> - <input - type="text" - className="form-input mt-2 h-12" - value={poNumber} - onChange={(e) => setPoNumber(e.target.value)} - /> - </div> - </div> - <p className="text-caption-2 text-gray_r-11 mt-2">Ukuran dokumen PO Maksimal 5MB</p> - </div> - - <LineDivider/> - - <div className="flex gap-x-3 p-4"> - <button - className="flex-1 btn-yellow" - onClick={submit} - > - Bayar - </button> - </div> - </> - ) } - </> - ) } - </Layout> - </WithAuth> - ) -}
\ No newline at end of file |
