Add lazy load on stock product

1 files changed, 81 insertions, 0 deletions

diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx
new file mode 100644
index 00000000..33da703a
--- /dev/null
+++ b/src/lib/product/components/Product/ColumnsSLA.jsx
@@ -0,0 +1,81 @@
+import odooApi from '@/core/api/odooApi'
+import { createSlug } from '@/core/utils/slug'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { Button, Spinner } from 'flowbite-react'
+import { memo, useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
+
+const ColumnSLA = ({ variant, product }) => {
+  const fetchSLA = async () => await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+  const dataSLA = useQuery(`VariantSLA-${variant.id}`, fetchSLA, { refetchOnWindowFocus: false })
+
+  return (
+    <>
+      <td>
+        {dataSLA.isFetching ? (
+          <div className='text-center'>
+            <Spinner aria-label='Center-aligned spinner example' />
+          </div>
+        ) : dataSLA?.data?.qty > 0 ? (
+          dataSLA?.data?.qty
+        ) : (
+          <a
+            href={whatsappUrl('product', {
+              name: variant.name,
+              manufacture: product.manufacture?.name,
+              url: createSlug('/shop/product/', product.name, product.id, true)
+            })}
+            className='text-danger-500 font-medium'
+            target='_blank'
+            rel='noreferrer noopener'
+          >
+            Tanya Admin
+          </a>
+        )}
+      </td>
+      <td className='flex justify-center'>
+        {dataSLA.isFetching ? (
+          <Button color='gray'>
+            <Spinner aria-label='Alternate spinner button example' />
+            <span className='pl-3'>Loading...</span>
+          </Button>
+        ) : dataSLA?.data?.slaDate != '-' ? (
+          <button
+            type='button'
+            title={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}
+            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
+              dataSLA?.data?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
+            }`}
+          >
+            <div
+              className={`flex-1 text-caption-1  ${
+                dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''
+              }`}
+            >
+              {dataSLA?.data?.slaDate}
+            </div>
+            <div className='flex-end'>
+              <svg
+                aria-hidden='true'
+                fill='none'
+                stroke='currentColor'
+                stroke-width='1.5'
+                className={`w-7 h-7 ${dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''}`}
+              >
+                <path
+                  d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
+                  stroke-linecap='round'
+                  stroke-linejoin='round'
+                ></path>
+              </svg>
+            </div>
+          </button>
+        ) : (
+          '-'
+        )}
+      </td>
+    </>
+  )
+}
+
+export default memo(ColumnSLA)