diff options
Diffstat (limited to 'src2/pages/shop/quotation')
| -rw-r--r-- | src2/pages/shop/quotation/finish.js | 39 | ||||
| -rw-r--r-- | src2/pages/shop/quotation/index.js | 140 |
2 files changed, 179 insertions, 0 deletions
diff --git a/src2/pages/shop/quotation/finish.js b/src2/pages/shop/quotation/finish.js new file mode 100644 index 00000000..f7983fef --- /dev/null +++ b/src2/pages/shop/quotation/finish.js @@ -0,0 +1,39 @@ +import WithAuth from "@/components/auth/WithAuth"; +import Link from "@/components/elements/Link"; +import Header from "@/components/layouts/Header"; +import Layout from "@/components/layouts/Layout"; +import { useAuth } from "@/core/utils/auth"; +import { EnvelopeIcon } from "@heroicons/react/24/outline"; +import { useRouter } from "next/router"; + +export default function FinishQuotation() { + const router = useRouter(); + const { id } = router.query; + const [ auth ] = useAuth(); + + return ( + <WithAuth> + <Layout> + <Header title="Penawaran Harga" /> + + <div className="m-4 px-4 py-6 shadow-md border border-gray_r-3"> + <div className="flex"> + <span className="p-3 mx-auto bg-yellow_r-3 border border-yellow_r-6 rounded"> + <EnvelopeIcon className="w-8 text-yellow_r-11" /> + </span> + </div> + <p className="h2 text-center mt-6"> + Terima Kasih { auth?.name } + </p> + <p className="text-center mt-3 leading-6 text-gray_r-11"> + Penawaran harga kamu di Indoteknik.com berhasil dikirimkan, tim kami akan segera menghubungi anda. + </p> + { id && ( + <Link href={`/my/transaction/${id}`} className="btn-yellow text-gray_r-12 mt-6 w-full">Lihat Penawaran</Link> + )} + <Link href="/" className="btn-light text-gray_r-12 mt-2 w-full">Ke Halaman Utama</Link> + </div> + </Layout> + </WithAuth> + ); +}
\ No newline at end of file diff --git a/src2/pages/shop/quotation/index.js b/src2/pages/shop/quotation/index.js new file mode 100644 index 00000000..e1c196db --- /dev/null +++ b/src2/pages/shop/quotation/index.js @@ -0,0 +1,140 @@ +import WithAuth from "@/components/auth/WithAuth"; +import LineDivider from "@/components/elements/LineDivider"; +import Link from "@/components/elements/Link"; +import AppBar from "@/components/layouts/AppBar"; +import Layout from "@/components/layouts/Layout"; +import VariantCard from "@/components/variants/VariantCard"; +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 { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import { toast } from "react-hot-toast"; + +export default function Quotation() { + const router = useRouter(); + const [ auth ] = useAuth(); + const [ products, setProducts ] = useState([]); + const [ totalAmount, setTotalAmount ] = useState(0); + const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0); + + useEffect(() => { + const getProducts = async () => { + let cart = getCart(); + let 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) => ({ + ...product, + quantity: cart[product.id].quantity, + selected: cart[product.id].selected, + })); + setProducts(dataProducts); + } + }; + getProducts(); + }, [ router, auth ]); + + 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 submitQuotation = async () => { + let productOrder = products.map((product) => ({ 'product_id': product.id, 'quantity': product.quantity })); + let data = { + 'partner_shipping_id': auth.partner_id, + 'partner_invoice_id': auth.partner_id, + 'order_line': JSON.stringify(productOrder) + }; + const quotation = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/checkout`, data); + for (const product of products) { + deleteItemCart(product.id); + } + if (quotation?.id) { + router.push(`/shop/quotation/finish?id=${quotation.id}`); + return; + }; + toast.error('Terdapat kesalahan internal, hubungi kami'); + } + return ( + <WithAuth> + <Layout> + <AppBar title="Penawaran Harga" /> + + <div className="p-4 flex flex-col gap-y-4"> + <p className="h2">Produk</p> + {products.map((product, index) => ( + <VariantCard + data={product} + openOnClick={false} + key={index} + /> + ))} + </div> + + <LineDivider /> + + <div className="p-4"> + <div className="flex justify-between items-center"> + <p className="h2">Ringkasan Penawaran</p> + <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"> + <button + type="button" + className="btn-yellow w-full" + onClick={submitQuotation} + > + Kirim Penawaran + </button> + </div> + </Layout> + </WithAuth> + ) +}
\ No newline at end of file |