diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-17 17:07:50 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-17 17:07:50 +0700 |
| commit | f99e0aba70efad0deb907d8e27f09fc9f527c8a4 (patch) | |
| tree | f0ac96e4e736a1d385e32553f0e641ee27e11fd3 /src/pages/shop/checkout | |
| parent | 90e1edab9b6a8ccc09a49fed3addbec2cbc4e4c3 (diff) | |
Refactor
Diffstat (limited to 'src/pages/shop/checkout')
| -rw-r--r-- | src/pages/shop/checkout/finish.js | 47 | ||||
| -rw-r--r-- | src/pages/shop/checkout/index.js | 325 |
2 files changed, 0 insertions, 372 deletions
diff --git a/src/pages/shop/checkout/finish.js b/src/pages/shop/checkout/finish.js deleted file mode 100644 index df284f8a..00000000 --- a/src/pages/shop/checkout/finish.js +++ /dev/null @@ -1,47 +0,0 @@ -import WithAuth from "@/components/auth/WithAuth"; -import Link from "@/components/elements/Link"; -import AppBar from "@/components/layouts/AppBar"; -import Header from "@/components/layouts/Header"; -import Layout from "@/components/layouts/Layout"; -import apiOdoo from "@/core/utils/apiOdoo"; -import { useAuth } from "@/core/utils/auth"; -import { EnvelopeIcon } from "@heroicons/react/24/outline"; -import { useRouter } from "next/router"; -import { useEffect, useState } from "react"; - -export default function FinishCheckout() { - const router = useRouter(); - const { id } = router.query; - const [ auth ] = useAuth(); - const [ transaction, setTransactions ] = useState(null); - - useEffect(() => { - const loadTransaction = async () => { - if (auth && id) { - const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order/${id}`); - setTransactions(dataTransaction); - } - }; - loadTransaction(); - }); - - return ( - <WithAuth> - <Layout> - <AppBar title="Pembelian Berhasil" /> - - <div className="m-4 rounded-xl bg-yellow_r-4 text-center border border-yellow_r-7"> - <div className="px-4 py-6 text-yellow_r-12"> - <p className="h2 mb-2">Terima Kasih atas Pembelian Anda</p> - <p className="text-yellow_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">{ transaction?.name }</p> - <p className="text-caption-2 text-yellow_r-11">No. Transaksi</p> - </div> - <Link href={transaction?.id ? `/my/transaction/${transaction.id}` : '/'} className="bg-yellow_r-6 text-yellow_r-12 rounded-b-xl py-4 block"> - Lihat detail pembelian Anda disini - </Link> - </div> - </Layout> - </WithAuth> - ); -}
\ No newline at end of file diff --git a/src/pages/shop/checkout/index.js b/src/pages/shop/checkout/index.js deleted file mode 100644 index 0a77ebed..00000000 --- a/src/pages/shop/checkout/index.js +++ /dev/null @@ -1,325 +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 [ isLoading, setIsLoading ] = useState(false) - - 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) - } - } - 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 checkout = 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 - } - setIsLoading(true) - 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) - } - router.push(`/shop/checkout/finish?id=${checkoutToOdoo.id}`) - setIsLoading(false) - } - - return ( - <WithAuth> - <Layout> - <AppBar title={"Checkout"} /> - { !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={checkout} - disabled={isLoading} - > - { isLoading && 'Loading...' } - { !isLoading && 'Bayar' } - </button> - </div> - </> - ) } - </Layout> - </WithAuth> - ) -}
\ No newline at end of file |
