Fixing

5 files changed, 105 insertions, 78 deletions

diff --git a/src/pages/index.js b/src/pages/index.js
index dd81e817..65999ff6 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -18,6 +18,15 @@ import Footer from "@/components/layouts/Footer";
 import Image from "@/components/elements/Image";
 import ProductCategories from "@/components/products/ProductCategories";
 
+const swiperBanner = {
+  pagination: { dynamicBullets: true },
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay]
+}
+
 export async function getServerSideProps() {
   const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
 
@@ -48,12 +57,9 @@ export default function Home({ heroBanners }) {
       <Layout>
         <Swiper 
           slidesPerView={1} 
-          pagination={{dynamicBullets: true}} 
-          modules={[Pagination, Autoplay]}
-          autoplay={{
-            delay: 6000,
-            disableOnInteraction: false
-          }}
+          pagination={swiperBanner.pagination} 
+          modules={swiperBanner.modules}
+          autoplay={swiperBanner.autoplay}
         >
           {
             heroBanners?.map((banner, index) => (
@@ -79,7 +85,7 @@ export default function Home({ heroBanners }) {
             }
           </Swiper>
         </div>
-        <div className="my-6 p-4 pt-0">
+        <div className="my-6 p-4 py-0">
           <h2 className="mb-4">Produk Populer</h2>
           <ProductSlider products={popularProducts} simpleProductTitleLine />
         </div>
diff --git a/src/pages/my/address/index.js b/src/pages/my/address/index.js
index 7026d5ea..5cad4410 100644
--- a/src/pages/my/address/index.js
+++ b/src/pages/my/address/index.js
@@ -56,7 +56,7 @@ export default function Address() {
           return (
             <div 
               key={index} 
-              className={"p-4 rounded-md border " + (selectedAdress && selectedAdress == address.id ? "border-yellow_r-7 bg-yellow_r-8" : "border-gray_r-7") } 
+              className={"p-4 rounded-md border " + (selectedAdress && selectedAdress == address.id ? "bg-gray_r-4" : "border-gray_r-7") } 
             >
               <div onClick={() => changeSelectedAddress(address.id)}>
                 <div className="flex gap-x-2" >
@@ -73,7 +73,7 @@ export default function Address() {
                   { address.street }
                 </p>
               </div>
-              <Link href={`/my/address/${address.id}/edit`} className="btn-light mt-3 w-full text-gray_r-11">Ubah Alamat</Link>
+              <Link href={`/my/address/${address.id}/edit`} className="btn-light bg-white mt-3 w-full text-gray_r-11">Ubah Alamat</Link>
             </div>
           );
         }) }
diff --git a/src/pages/my/invoices.js b/src/pages/my/invoices.js
index ed9ba660..9b2e77dc 100644
--- a/src/pages/my/invoices.js
+++ b/src/pages/my/invoices.js
@@ -1,71 +1,71 @@
-import WithAuth from "@/components/auth/WithAuth";
-import Alert from "@/components/elements/Alert";
-import Link from "@/components/elements/Link";
-import AppBar from "@/components/layouts/AppBar";
-import Layout from "@/components/layouts/Layout";
-import apiOdoo from "@/core/utils/apiOdoo";
-import { useAuth } from "@/core/utils/auth";
-import currencyFormat from "@/core/utils/currencyFormat";
-import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
-import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { useRouter } from "next/router";
-import { useEffect, useRef, useState } from "react";
+import WithAuth from "@/components/auth/WithAuth"
+import Alert from "@/components/elements/Alert"
+import Link from "@/components/elements/Link"
+import Pagination from "@/components/elements/Pagination"
+import AppBar from "@/components/layouts/AppBar"
+import Layout from "@/components/layouts/Layout"
+import apiOdoo from "@/core/utils/apiOdoo"
+import { useAuth } from "@/core/utils/auth"
+import currencyFormat from "@/core/utils/currencyFormat"
+import useBottomPopup from "@/lib/elements/hooks/useBottomPopup"
+import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
+import { useRouter } from "next/router"
+import { useEffect, useRef, useState } from "react"
 
 export default function Invoices() {
-  const [ auth ] = useAuth();
-  const router = useRouter();
+  const [ auth ] = useAuth()
+  const router = useRouter()
   const { 
     q, 
     page = 1 
-  } = router.query;
+  } = router.query
 
-  const [ invoices, setInvoices ] = useState([]);
-  const [ activePopupId, setActivePopupId ] = useState(null);
+  const [ invoices, setInvoices ] = useState([])
 
-  const [ pageCount, setPageCount ] = useState(0);
-  const [ isLoading, setIsLoading ] = useState(true);
+  const [ pageCount, setPageCount ] = useState(0)
+  const [ isLoading, setIsLoading ] = useState(true)
 
-  const searchQueryRef = useRef();
+  const searchQueryRef = useRef()
 
   useEffect(() => {
     const loadInvoices = async () => {
       if (auth) {
-        const limit = 10;
-        let offset = (page - 1) * 10;
-        let queryParams = [`limit=${limit}`, `offset=${offset}`];
-        if (q) queryParams.push(`name=${q}`);
-        queryParams = queryParams.join('&');
-        queryParams = queryParams ? '?' + queryParams : '';
+        const limit = 10
+        let offset = (page - 1) * 10
+        let queryParams = [`limit=${limit}`, `offset=${offset}`]
+        if (q) queryParams.push(`name=${q}`)
+        queryParams = queryParams.join('&')
+        queryParams = queryParams ? '?' + queryParams : ''
 
-        const dataInvoices = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/invoice${queryParams}`);
-        setInvoices(dataInvoices);
-        setPageCount(Math.ceil(dataInvoices.sale_order_total / limit));
-        setIsLoading(false);
-      };
-    };
-    loadInvoices();
-  }, [ auth, q, page ]);
+        const dataInvoices = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/invoice${queryParams}`)
+        setInvoices(dataInvoices)
+        setPageCount(Math.ceil(dataInvoices.sale_order_total / limit))
+        setIsLoading(false)
+      }
+    }
+    loadInvoices()
+  }, [ auth, q, page ])
 
   const actionSearch = (e) => {
-    e.preventDefault();
-    let queryParams = [];
-    if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`);
-    queryParams = queryParams.join('&');
-    queryParams = queryParams ? `?${queryParams}` : '';
-    router.push(`/my/invoices${queryParams}`);
-  };
+    e.preventDefault()
+    let queryParams = []
+    if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`)
+    queryParams = queryParams.join('&')
+    queryParams = queryParams ? `?${queryParams}` : ''
+    router.push(`/my/invoices${queryParams}`)
+  }
 
   const downloadInvoice = (data) => {
-    const url = `${process.env.ODOO_HOST}/api/v1/download/invoice/${data.id}/${data.token}`;
-    window.open(url, 'download');
-    closePopup();
-  };
+    const url = `${process.env.ODOO_HOST}/api/v1/download/invoice/${data.id}/${data.token}`
+    window.open(url, 'download')
+    closePopup()
+  }
   
   const downloadTaxInvoice = (data) => {
-    const url = `${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${data.id}/${data.token}`;
-    window.open(url, 'download');
-    closePopup();
-  };
+    const url = `${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${data.id}/${data.token}`
+    window.open(url, 'download')
+    closePopup()
+  }
 
   const childrenPopup = (data) => (
     <div className="flex flex-col gap-y-6">
@@ -83,7 +83,7 @@ export default function Invoices() {
         Download Faktur Pajak
       </button>
     </div>
-  );
+  )
 
   const {
     closePopup,
@@ -92,7 +92,7 @@ export default function Invoices() {
   } = useBottomPopup({
     title: 'Lainnya',
     children: childrenPopup
-  });
+  })
 
   return (
     <WithAuth>
@@ -169,8 +169,12 @@ export default function Invoices() {
             </div>
           )) }
         </div>
+
+        <div className="pb-6 pt-2">
+          <Pagination currentPage={page} pageCount={pageCount} url={`/my/invoices${q ? `?q=${q}` : ''}`} />
+        </div>
         { BottomPopup }
       </Layout>
     </WithAuth>
-  );
+  )
 }
\ No newline at end of file
diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js
index 51004839..fb806aa4 100644
--- a/src/pages/my/transaction/[id].js
+++ b/src/pages/my/transaction/[id].js
@@ -6,7 +6,6 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import apiOdoo from "@/core/utils/apiOdoo";
 import { useRouter } from "next/router";
 import { useAuth } from "@/core/utils/auth";
-import VariantCard from "@/components/variants/VariantCard";
 import currencyFormat from "@/core/utils/currencyFormat";
 import DescriptionRow from "@/components/elements/DescriptionRow";
 import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
@@ -19,6 +18,7 @@ import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
 import { toast } from "react-hot-toast";
 import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
 import getFileBase64 from "@/core/utils/getFileBase64";
+import VariantGroupCard from "@/components/variants/VariantGroupCard";
 
 export default function DetailTransaction() {
   const router = useRouter();
@@ -116,6 +116,16 @@ export default function DetailTransaction() {
     window.open(url, 'download')
   };
 
+  const checkout = async () => {
+    if (!transaction.purchase_order_file) {
+      toast.error('Mohon upload dokumen PO anda sebelum melanjutkan pesanan')
+      return
+    }
+    await apiOdoo('POST', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}/checkout`)
+    toast.success('Berhasil melanjutkan pesanan')
+    loadTransaction()
+  }
+
   return (
     <WithAuth>
       <Layout className="pb-4">
@@ -166,13 +176,10 @@ export default function DetailTransaction() {
             <p className="h2 p-4">Detail Produk</p>
 
             <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
-              { transaction?.products?.map((product, index) => (
-                <VariantCard
-                  key={index}
-                  data={product}
-                  buyMore
-                />
-              )) }
+              <VariantGroupCard 
+                variants={transaction?.products} 
+                buyMore 
+              />
               <div className="flex justify-between mt-3 font-medium">
                 <p>Total Belanja</p>
                 <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
@@ -219,6 +226,14 @@ export default function DetailTransaction() {
             <LineDivider />
             
             <div className="px-4">
+              { transaction?.status == 'draft' && (
+                <button 
+                  className="btn-yellow w-full mt-4" 
+                  onClick={checkout}
+                >
+                  Lanjutkan Transaksi
+                </button>
+              ) }
               <button 
                 className="btn-light w-full mt-4" 
                 disabled={transaction?.status != 'draft'}
@@ -226,13 +241,15 @@ export default function DetailTransaction() {
               >
                 Download Quotation
               </button>
-              <button 
-                className="btn-light w-full mt-4" 
-                disabled={transaction?.status != 'waiting'}
-                onClick={() => openConfirmAlert(transaction)}
-              >
-                Batalkan Transaksi
-              </button>
+              { transaction?.status != 'draft' && (
+                <button 
+                  className="btn-light w-full mt-4" 
+                  disabled={transaction?.status != 'waiting'}
+                  onClick={() => openConfirmAlert(transaction)}
+                >
+                  Batalkan Transaksi
+                </button>
+              ) }
             </div>
           </>
         ) : (
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index ef62bb23..1178781b 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -207,13 +207,13 @@ export default function Cart() {
                       {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''}
                     </p>
                     <div className="flex flex-wrap gap-x-1 items-center mb-2 mt-auto">
-                      <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
                       {product.price.discount_percentage > 0 && (
                         <>
-                          <span className="badge-red">{product.price.discount_percentage}%</span>
                           <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
+                          <span className="badge-red">{product.price.discount_percentage}%</span>
                         </>
                       )}
+                      <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
                     </div>
                     <div className="flex items-center">
                       <p className="mr-auto text-caption-2 text-gray_r-12 font-bold">{currencyFormat(product.quantity * product.price.price_discount)}</p>