quotation and categories

9 files changed, 211 insertions, 9 deletions

diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js
index 4c33c97a..a508ef77 100644
--- a/src/pages/my/transaction/[id].js
+++ b/src/pages/my/transaction/[id].js
@@ -15,6 +15,7 @@ import { SkeletonList } from "@/components/elements/Skeleton";
 import Link from "@/components/elements/Link";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import Alert from "@/components/elements/Alert";
+import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
 
 export default function DetailTransaction() {
   const router = useRouter();
@@ -41,7 +42,9 @@ export default function DetailTransaction() {
           <>
             <div className="p-4 flex flex-col gap-y-4">
               <DescriptionRow label="Status Transaksi">
-                <span className="badge-green">Pending Quotation</span>
+                <div className="flex justify-end">
+                  <TransactionStatusBadge status={transaction?.status} />
+                </div>
               </DescriptionRow>
               <DescriptionRow label="No Transaksi">
                 { transaction?.name }
diff --git a/src/pages/my/transactions.js b/src/pages/my/transactions.js
index 85f0935f..221859f9 100644
--- a/src/pages/my/transactions.js
+++ b/src/pages/my/transactions.js
@@ -11,6 +11,7 @@ import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/o
 import Link from "@/components/elements/Link";
 import Pagination from "@/components/elements/Pagination";
 import Alert from "@/components/elements/Alert";
+import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
 
 export default function Transactions() {
   const [ auth ] = useAuth();
@@ -40,7 +41,8 @@ export default function Transactions() {
 
         const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`);
         setTransactions(dataTransactions);
-        setPageCount(Math.ceil(dataTransactions.sale_order_total / limit));
+        console.log(dataTransactions);
+        setPageCount(Math.ceil(dataTransactions?.sale_order_total / limit));
         setIsLoading(false);
       };
     }
@@ -88,7 +90,7 @@ export default function Transactions() {
                   <h2 className="text-red_r-11 mt-1">{ transaction.name }</h2>
                 </Link>
                 <div className="flex gap-x-1 justify-end">
-                  <div className="badge-green h-fit">Pending</div>
+                  <TransactionStatusBadge status={transaction.status} />
                   <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setActivePopupId(transaction.id)} />
                 </div>
               </div>
diff --git a/src/pages/my/wishlist.js b/src/pages/my/wishlist.js
index 175bfa08..9683c785 100644
--- a/src/pages/my/wishlist.js
+++ b/src/pages/my/wishlist.js
@@ -1,24 +1,33 @@
 import WithAuth from "@/components/auth/WithAuth";
+import Pagination from "@/components/elements/Pagination";
+import Spinner from "@/components/elements/Spinner";
 import AppBar from "@/components/layouts/AppBar";
 import Layout from "@/components/layouts/Layout";
 import ProductCard from "@/components/products/ProductCard";
 import apiOdoo from "@/core/utils/apiOdoo";
 import { useAuth } from "@/core/utils/auth";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 export default function Wishlist() {
   const [ auth ] = useAuth();
+  const router = useRouter();
+  const { page = 1 } = router.query;
   const [ wishlists, setWishlists ] = useState(null);
+  const [ pageCount, setPageCount ] = useState(0);
 
   useEffect(() => {
     const loadWishlist = async () => {
+      const limit = 10;
+      const offset = (page - 1) * limit;
       if (auth) {
-        const dataWishlist = await apiOdoo('GET', `/api/v1/user/${auth.id}/wishlist`);
+        const dataWishlist = await apiOdoo('GET', `/api/v1/user/${auth.id}/wishlist?limit=${limit}&offset=${offset}`);
         setWishlists(dataWishlist);
+        setPageCount(Math.ceil(dataWishlist.product_total / limit));
       }
     }
     loadWishlist();
-  }, [ auth ]);
+  }, [ auth, page ]);
 
   return (
     <WithAuth>
@@ -26,11 +35,18 @@ export default function Wishlist() {
         <AppBar title='Wishlist' />
 
         <div className="px-4 py-6">
+          { !wishlists && (
+            <Spinner className="w-6 h-6 text-gray-600 fill-gray-900 mx-auto" />
+          ) }
           <div className="grid grid-cols-2 gap-3">
             {wishlists?.products.map((product) => (
               <ProductCard key={product.id} data={product} />
             ))}
           </div>
+
+          <div className="mt-6">
+            <Pagination currentPage={page} pageCount={pageCount} url={`/my/wishlist`} />
+          </div>
         </div>
       </Layout>
     </WithAuth>
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 53d5e648..aaf67e1f 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -276,6 +276,7 @@ export default function Cart() {
                 <button 
                   className="flex-1 btn-light"
                   disabled={getProductsSelected().length == 0}
+                  onClick={() => router.push('/shop/quotation')}
                 >
                   Quotation {getProductsSelected().length > 0 && `(${getProductsSelected().length})`}
                 </button>
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index 49d1a848..f55b200f 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -2,7 +2,6 @@ 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 Image from "@/components/elements/Image";
 import Layout from "@/components/layouts/Layout";
 import LineDivider from "@/components/elements/LineDivider";
 import Link from "@/components/elements/Link";
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index dd097bbe..bcfb12ba 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -149,7 +149,7 @@ export default function ProductDetail({ product }) {
         />
 
         <div className="p-4">
-        <div className="flex justify-between">
+        <div className="flex justify-between gap-x-3">
           <div>
             <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
               {product.manufacture.name ?? '-'}
diff --git a/src/pages/shop/quotation/finish.js b/src/pages/shop/quotation/finish.js
new file mode 100644
index 00000000..b1f092d3
--- /dev/null
+++ b/src/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-4 w-full">Ke Halaman Utama</Link>
+        </div>
+      </Layout>
+    </WithAuth>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/shop/quotation/index.js b/src/pages/shop/quotation/index.js
new file mode 100644
index 00000000..cf2b956d
--- /dev/null
+++ b/src/pages/shop/quotation/index.js
@@ -0,0 +1,142 @@
+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 [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0);
+  const [ totalTaxAmount, setTotalTaxAmount ] = 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) {
+      const productsSelected = products.filter((product) => product.selected == true);
+      let calculateTotalPriceBeforeTax = 0;
+      let calculateTotalTaxAmount = 0;
+      let calculateTotalDiscountAmount = 0;
+      productsSelected.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]);
+
+  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>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">
+          <button 
+            type="button" 
+            className="btn-yellow w-full" 
+            onClick={submitQuotation}
+          >
+            Kirim Penawaran
+          </button>
+        </div>
+      </Layout>
+    </WithAuth>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index 2521c7a2..4152bd43 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -10,7 +10,7 @@ import Footer from "@/components/layouts/Footer";
 
 export async function getServerSideProps(context) {
   const { 
-    q, 
+    q = '*', 
     page = 1, 
     brand = '', 
     category = '',
@@ -100,7 +100,7 @@ export default function ShopSearch({
                   </>
                 ) : ''}
                 {searchResults.response.numFound}
-                &nbsp;produk untuk pencarian <span className="font-semibold">{q}</span>
+                &nbsp;produk { q != '*' && (<>untuk pencarian <span className="font-semibold">{q}</span></>) }
               </>
             ) : 'Mungkin yang anda cari'}
           </div>