fix

9 files changed, 185 insertions, 170 deletions

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index c4855f8f..3ac06b6c 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -40,7 +40,7 @@ const Addresses = () => {
               className={
                 'p-4 rounded-md border ' +
                 (selectedAdress && selectedAdress == address.id
-                  ? 'border-gray_r-7 bg-gray_r-2'
+                  ? 'border-gray_r-7 bg-gray_r-4'
                   : 'border-gray_r-7')
               }
             >
@@ -51,15 +51,7 @@ const Addresses = () => {
                 </div>
                 <p className='font-medium mt-2'>{address.name}</p>
                 {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
-                <p
-                  className={`mt-1 leading-6 ${
-                    selectedAdress && selectedAdress == address.id
-                      ? 'text-gray_r-12'
-                      : 'text-gray_r-11'
-                  }`}
-                >
-                  {address.street}
-                </p>
+                <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
               </div>
               <Link
                 href={`/my/address/${address.id}/edit`}
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index df74bed6..2d94ac0b 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -10,6 +10,7 @@ import { useRouter } from 'next/router'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { toast } from 'react-hot-toast'
 import Spinner from '@/core/components/elements/Spinner/Spinner'
+import Alert from '@/core/components/elements/Alert/Alert'
 
 const Cart = () => {
   const router = useRouter()
@@ -126,6 +127,13 @@ const Cart = () => {
             <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
           </div>
         )}
+
+        {!cart.isLoading && !products && (
+          <Alert className='text-center my-2' type='info'>
+            Keranjang belanja anda masih kosong
+          </Alert>
+        )}
+
         {products?.map((product) => (
           <div key={product?.id} className='flex'>
             <button
diff --git a/src/lib/checkout/api/checkoutApi.js b/src/lib/checkout/api/checkoutApi.js
new file mode 100644
index 00000000..b76c9b7f
--- /dev/null
+++ b/src/lib/checkout/api/checkoutApi.js
@@ -0,0 +1,14 @@
+import odooApi from '@/core/api/odooApi'
+import { getAuth } from '@/core/utils/auth'
+
+const checkoutApi = async ({ data }) => {
+  const auth = getAuth()
+  const dataCheckout = await odooApi(
+    'POST',
+    `/api/v1/partner/${auth.partnerId}/sale_order/checkout`,
+    data
+  )
+  return dataCheckout
+}
+
+export default checkoutApi
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 0a3949c3..8416cd9e 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -9,11 +9,15 @@ import VariantCard from '@/lib/variant/components/VariantCard'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 import { useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
-import { getCart, getItemCart } from '@/core/utils/cart'
+import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { toast } from 'react-hot-toast'
+import getFileBase64 from '@/core/utils/getFileBase64'
+import checkoutApi from '../api/checkoutApi'
+import { useRouter } from 'next/router'
 
 const Checkout = () => {
+  const router = useRouter()
   const auth = useAuth()
   const [selectedAddress, setSelectedAddress] = useState({
     shipping: null,
@@ -96,6 +100,33 @@ const Checkout = () => {
       toast.error('Pilih metode pembayaran', { position: 'bottom-center' })
       return
     }
+    const file = poFile.current.files[0]
+    if (typeof file !== 'undefined' && file.size > 5000000) {
+      toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
+      return
+    }
+    setIsLoading(true)
+    const 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.current.value) data.po_number = poNumber.current.value
+    if (typeof file !== 'undefined') data.po_file = await getFileBase64(file)
+
+    const isCheckouted = await checkoutApi({ data })
+    setIsLoading(false)
+    if (isCheckouted?.id) {
+      for (const product of products) deleteItemCart({ productId: product.id })
+      router.push(`/shop/checkout/finish?id=${isCheckouted.id}`)
+      return
+    }
+    toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
   }
 
   return (
@@ -232,8 +263,7 @@ const Checkout = () => {
 
       <div className='flex gap-x-3 p-4'>
         <button className='flex-1 btn-yellow' onClick={checkout} disabled={isLoading}>
-          {isLoading && 'Loading...'}
-          {!isLoading && 'Bayar'}
+          {isLoading ? 'Loading...' : 'Bayar'}
         </button>
       </div>
     </>
diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx
new file mode 100644
index 00000000..f0aaba4e
--- /dev/null
+++ b/src/lib/checkout/components/FinishCheckout.jsx
@@ -0,0 +1,30 @@
+import Link from "@/core/components/elements/Link/Link"
+import useTransaction from "@/lib/transaction/hooks/useTransaction"
+
+const FinishCheckout = ({ id }) => {
+  const { transaction } = useTransaction({ id })
+
+  return (
+    <div className="p-4">
+      <div className='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='font-semibold 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.data?.name}</p>
+            <p className='text-caption-2 text-yellow_r-11'>No. Transaksi</p>
+          </div>
+          <Link
+            href={transaction.data?.id ? `/my/transaction/${transaction.data.id}` : '/'}
+            className='bg-yellow_r-6 text-yellow_r-12 rounded-b-xl py-4 block'
+          >
+            Lihat detail pembelian Anda disini
+          </Link>
+        </div>
+    </div>
+  )
+}
+
+export default FinishCheckout
\ No newline at end of file
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 8a2f1d7f..0fe75c56 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -6,7 +6,7 @@ import { createSlug } from '@/core/utils/slug'
 const ProductCard = ({ product, simpleTitle }) => {
   return (
     <>
-      <div className='rounded shadow-sm border border-gray_r-4'>
+      <div className='rounded shadow-sm border border-gray_r-4 h-full'>
         <Link
           href={createSlug('/shop/product/', product?.name, product?.id)}
           className='border-b border-gray_r-4 relative'
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 2220f3be..17eacd45 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -288,7 +288,7 @@ const SectionButton = ({ label, active, toggle }) => (
 const SectionContent = ({ address }) => {
   let fullAddress = []
   if (address?.street) fullAddress.push(address.street)
-  if (address?.subDistrict?.name) fullAddress.push(address.sub_district.name)
+  if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.name)
   if (address?.district?.name) fullAddress.push(address.district.name)
   if (address?.city?.name) fullAddress.push(address.city.name)
   fullAddress = fullAddress.join(', ')
diff --git a/src/pages/shop/checkout/finish.jsx b/src/pages/shop/checkout/finish.jsx
new file mode 100644
index 00000000..7a1aa05d
--- /dev/null
+++ b/src/pages/shop/checkout/finish.jsx
@@ -0,0 +1,13 @@
+import BasicLayout from "@/core/components/layouts/BasicLayout";
+import FinishCheckoutComponent from "@/lib/checkout/components/FinishCheckout";
+import { useRouter } from "next/router";
+
+export default function Finish() {
+  const router = useRouter()
+
+  return (
+    <BasicLayout>
+      <FinishCheckoutComponent id={router.query.id || 0} />
+    </BasicLayout>
+  )
+}
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f4c726e8..5ba9e902 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -8,14 +8,13 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-html, body {
-    @apply 
-        w-screen
+html,
+body {
+    @apply w-screen
         text-body-2
         text-gray_r-12
         bg-gray_r-1
-        overflow-x-clip
-    ;
+        overflow-x-clip;
 }
 
 button {
@@ -23,14 +22,14 @@ button {
 }
 
 @layer base {
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }
 
-    input[type=number] {
-        -moz-appearance:textfield;
+    input[type='number'] {
+        -moz-appearance: textfield;
     }
 }
 
@@ -42,94 +41,73 @@ button {
     .badge-blue,
     .badge-green,
     .badge-solid-green {
-        @apply
-            text-[11px]
+        @apply text-[11px]
             leading-none
             font-medium
             px-1
             py-1
             rounded
-            w-fit
-        ;
+            w-fit;
     }
 
     .badge-red {
-        @apply
-            bg-red_r-5
-            text-red_r-10
-        ;
+        @apply bg-red_r-5
+            text-red_r-10;
     }
 
     .badge-solid-red {
-        @apply
-            bg-red_r-10
-            text-white
-        ;
+        @apply bg-red_r-10
+            text-white;
     }
 
     .badge-gray {
-        @apply
-            bg-gray_r-5
-            text-gray_r-10
-        ;
+        @apply bg-gray_r-5
+            text-gray_r-10;
     }
 
     .badge-yellow {
-        @apply
-            bg-yellow_r-3
-            text-yellow_r-11
-        ;
+        @apply bg-yellow_r-3
+            text-yellow_r-11;
     }
 
     .badge-blue {
-        @apply
-            bg-blue-200
-            text-blue-600
-        ;
+        @apply bg-blue-200
+            text-blue-600;
     }
 
     .badge-green {
-        @apply
-            bg-green_r-5
-            text-green_r-10
-        ;
+        @apply bg-green_r-5
+            text-green_r-10;
     }
-    
+
     .badge-solid-green {
-        @apply
-            bg-green_r-10
-            text-white
-        ;
+        @apply bg-green_r-10
+            text-white;
     }
 
     .form-label {
-        @apply
-            font-medium
-            block
-        ;
+        @apply font-medium
+            block;
     }
 
     .form-input {
-        @apply 
-            p-3
+        @apply p-3
             rounded
             border
             text-gray_r-12
             border-gray_r-7
+            bg-white
             bg-transparent
             w-full
             leading-none
             focus:outline-none
             focus:border-yellow_r-9
-            disabled:bg-gray_r-5
-        ;
+            disabled:bg-gray_r-5;
     }
 
     .form-input[aria-invalid] {
-        @apply
-            border-red_r-10
-            focus:border-red_r-10
-        ;
+        @apply border-red_r-10
+            focus:border-red_r-10;
     }
 
     .btn-yellow,
@@ -137,8 +115,7 @@ button {
     .btn-red,
     .btn-solid-red,
     .btn-green {
-        @apply
-            block
+        @apply block
             w-fit
             py-3
             px-6
@@ -147,63 +124,51 @@ button {
             text-center
             font-medium
             ease-linear
-            duration-150
-        ;
+            duration-150;
     }
 
     .btn-yellow {
-        @apply 
-            bg-yellow_r-9
+        @apply bg-yellow_r-9
             border-yellow_r-9
             disabled:text-gray_r-10
             disabled:bg-yellow_r-7
-            disabled:border-yellow_r-7
-        ;
+            disabled:border-yellow_r-7;
     }
 
     .btn-red {
-        @apply 
-            bg-red_r-3
+        @apply bg-red_r-3
             border-red_r-6
             text-red_r-11
             disabled:text-red_r-10
-            disabled:bg-red_r-6
-        ;
+            disabled:bg-red_r-6;
     }
 
     .btn-solid-red {
-        @apply 
-            bg-red_r-11
+        @apply bg-red_r-11
             border-red_r-11
             text-gray_r-1
             disabled:text-gray_r-1
             disabled:bg-red_r-8
-            disabled:border-red_r-8
-        ;
+            disabled:border-red_r-8;
     }
 
     .btn-green {
-        @apply 
-            bg-green_r-3
+        @apply bg-green_r-3
             border-green_r-6
             text-green_r-11
             disabled:text-green_r-10
-            disabled:bg-green_r-6
-        ;
+            disabled:bg-green_r-6;
     }
 
     .btn-light {
-        @apply 
-            bg-gray_r-3
+        @apply bg-gray_r-3
             border-gray_r-6
             disabled:text-gray_r-10
-            disabled:bg-gray_r-6
-        ;
+            disabled:bg-gray_r-6;
     }
 
     .product-card {
-        @apply
-            w-full
+        @apply w-full
             h-full
             border
             border-gray_r-3
@@ -212,43 +177,34 @@ button {
             rounded
             relative
             flex
-            flex-col
-        ;
+            flex-col;
     }
 
     .product-card__image {
-        @apply
-            w-full
+        @apply w-full
             h-[160px]
             object-contain
             object-center
             border-b
-            border-gray_r-6
-        ;
+            border-gray_r-6;
     }
 
     .product-card__content {
-        @apply
-            p-2
+        @apply p-2
             pb-3
-            flex-1
-        ;
+            flex-1;
     }
 
     .product-card__title {
-        @apply
-            text-caption-1
+        @apply text-caption-1
             text-gray_r-12
-            leading-5
-        ;
+            leading-5;
     }
 
     .product-card__brand {
-        @apply 
-            text-caption-1
+        @apply text-caption-1
             mb-1
-            block
-        ;
+            block;
     }
 }
 
@@ -269,15 +225,14 @@ button {
     .wrap-line-ellipsis-2 {
         -webkit-line-clamp: 2;
     }
-    
+
     .wrap-line-ellipsis-3 {
         -webkit-line-clamp: 3;
     }
 }
 
 .menu-wrapper {
-    @apply
-        fixed
+    @apply fixed
         top-0
         left-0
         bg-white
@@ -287,29 +242,25 @@ button {
         overflow-y-auto
         translate-x-[-100%]
         ease-linear
-        duration-150
-    ;
+        duration-150;
 }
 
-.menu-wrapper.active{
+.menu-wrapper.active {
     @apply translate-x-0;
 }
 
 .overlay {
-    @apply
-        fixed
+    @apply fixed
         top-0
         left-0
         w-full
         h-full
         z-[55]
-        bg-gray_r-12/40
-    ;
+        bg-gray_r-12/40;
 }
 
 .sticky-header {
-    @apply
-        px-4
+    @apply px-4
         py-3
         bg-gray_r-1/90
         backdrop-blur-lg
@@ -317,20 +268,16 @@ button {
         top-0
         border-b
         border-gray_r-7
-        z-50
-    ;
+        z-50;
 }
 
 .content-container {
-    @apply 
-        max-w-full
-        overflow-x-hidden
-    ;
+    @apply max-w-full
+        overflow-x-hidden;
 }
 
 #indoteknik_toast {
-    @apply
-        fixed
+    @apply fixed
         bottom-4
         translate-y-[200%]
         left-[50%]
@@ -348,8 +295,7 @@ button {
         rounded-lg
         shadow
         ease-linear
-        duration-300
-    ;
+        duration-300;
 }
 
 #indoteknik_toast.active {
@@ -365,10 +311,8 @@ button {
 }
 
 .lazy-load-image-background {
-    @apply 
-        !block
-        w-full
-    ;
+    @apply !block
+        w-full;
 }
 
 .swiper-pagination-bullet-active {
@@ -376,16 +320,13 @@ button {
 }
 
 .pagination {
-    @apply
-        flex
+    @apply flex
         justify-center
-        gap-x-1
-    ;
+        gap-x-1;
 }
 
 .pagination-item {
-    @apply 
-        p-1
+    @apply p-1
         flex
         justify-center
         items-center
@@ -397,20 +338,16 @@ button {
         border-gray_r-6
         bg-gray_r-3
         hover:bg-gray_r-5 
-        text-gray_r-12
-    ;
+        text-gray_r-12;
 }
 
 .pagination-item--active {
-    @apply 
-        border-yellow_r-9
-        bg-yellow_r-9
-    ;
+    @apply border-yellow_r-9
+        bg-yellow_r-9;
 }
 
 .pagination-dots {
-    @apply
-        p-1
+    @apply p-1
         flex
         justify-center
         items-end
@@ -418,33 +355,24 @@ button {
         rounded 
         ease-linear 
         bg-gray_r-3
-        text-caption-2
-    ;
+        text-caption-2;
 }
 
 .idt-transition {
-    @apply
-        transition-all
+    @apply transition-all
         ease-out
-        duration-200
-    ;
+        duration-200;
 }
 
 .form-select__placeholder {
-    @apply
-        !text-gray_r-9
-    ;
+    @apply !text-gray_r-9;
 }
 
 .form-select__control {
-    @apply
-        !shadow-none
-        !border-gray_r-7
-    ;
+    @apply !shadow-none
+        !border-gray_r-7;
 }
 
 .form-select__control--menu-is-open {
-    @apply
-        !border-yellow_r-9
-    ;
-}
\ No newline at end of file
+    @apply !border-yellow_r-9;
+}