Merged in Feature/tracking-order (pull request #276)

Feature/tracking order

Approved-by: trisusilo

5 files changed, 192 insertions, 5 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 4beea604..8f024d86 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -175,7 +175,7 @@ const CustomerGuide = () => (
   <div>
     <div className={headerClassName}>Bantuan & Panduan</div>
     <ul className='flex flex-col gap-y-3'>
-      <li>
+      <li >
         <InternalItemLink href='/metode-pembayaran'>
           Metode Pembayaran
         </InternalItemLink>
@@ -210,6 +210,11 @@ const CustomerGuide = () => (
           Panduan Pick Up Service
         </InternalItemLink>
       </li>
+      <li>
+        <InternalItemLink href='/tracking-order'>
+          Tracking Order
+        </InternalItemLink>
+      </li>
     </ul>
   </div>
 );
diff --git a/src/lib/tracking-order/api/trackingOrder.js b/src/lib/tracking-order/api/trackingOrder.js
new file mode 100644
index 00000000..cc48c40c
--- /dev/null
+++ b/src/lib/tracking-order/api/trackingOrder.js
@@ -0,0 +1,8 @@
+import odooApi from "@/core/api/odooApi";
+
+export const trackingOrder = async ({query}) => {
+    const params = new URLSearchParams(query).toString();
+    const list = await odooApi('GET', `/api/v1/tracking_order?${params}`)
+
+    return list;
+}
diff --git a/src/lib/tracking-order/component/TrackingOrder.jsx b/src/lib/tracking-order/component/TrackingOrder.jsx
new file mode 100644
index 00000000..394979c1
--- /dev/null
+++ b/src/lib/tracking-order/component/TrackingOrder.jsx
@@ -0,0 +1,139 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import React, { useEffect, useState } from 'react' 
+import { useForm } from 'react-hook-form'
+import * as Yup from 'yup'
+import Manifest from '@/lib/treckingAwb/component/Manifest'
+import { trackingOrder } from '../api/trackingOrder'
+import { useQuery } from 'react-query'
+import { Spinner } from '@chakra-ui/react';
+import { Search } from 'lucide-react';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import Link from 'next/link'
+
+const TrackingOrder = () => {
+    const [idAWB, setIdAWB] = useState(null)
+    const [inputQuery, setInputQuery] = useState(null)
+    const [buttonClick, setButtonClick] = useState(false)
+    const [apiError, setApiError] = useState(null) // State to store API error message
+    
+    const closePopup = () => {
+        setIdAWB(null)
+        setButtonClick(false)
+        setInputQuery(null)
+        setApiError(null) // Reset error message on close
+    }
+    
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        control,
+        reset
+    } = useForm({
+        resolver: yupResolver(validationSchema),
+        defaultValues
+    })
+    
+    const query = {
+        email: inputQuery?.email,
+        so: inputQuery?.id
+    }
+    
+    const { data: tracking, isLoading, isError, error } = useQuery(
+        ['tracking', query],
+        () => trackingOrder({ query: query }),
+        {
+            enabled: !!query.email && !!query.so,
+            onSuccess: (data) => {
+                if (buttonClick) {
+                    if (data?.code === 403 || data?.code === 400 || data?.code === 404) {
+                        setApiError(data?.description);
+                    } else if (data?.pickings?.length > 0) {
+                        setIdAWB(data.pickings[0]?.id);
+                    } else {
+                        setApiError('No pickings data available');
+                    }
+                    setButtonClick(false);
+                    setInputQuery(null);
+                }
+            },
+        }
+    );
+
+    const onSubmitHandler = async (values) => {
+        setInputQuery(values)
+        setButtonClick(true)
+    }
+
+    return (
+        <div className='container mx-auto flex py-10 flex-col'>
+            <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Tracking Order</h1>
+            <div className='flex justify-start items-start'>
+            <span className='text-base w-full'>
+                {`Untuk melacak pesanan Anda, masukkan Nomor Transaksi di kotak bawah ini dan masukkan Email login anda lalu tekan tombol "Lacak". Nomor Transaksi ini dapat Anda lihat dalam menu `}
+                <Link href='/my/transactions' className='text-red-500'>
+                    Daftar Transaksi
+                </Link>
+                {`. Jika mengalami kesulitan `}
+                <Link href='https://wa.me/6281717181922' target='_blank' rel='noreferrer' className='text-red-500'>
+                    hubungi kami
+                </Link>
+                {`.`}
+            </span>
+            </div>
+            <div>
+                <form onSubmit={handleSubmit(onSubmitHandler)} className='flex mt-4 flex-row w-full '>
+                    <div className='w-[90%] grid grid-cols-2 gap-4'>
+                        <div className='flex flex-col '>
+                            <label className='form-label mb-2'>ID Pesanan*</label>
+                            <input
+                                {...register('id')}
+                                placeholder='dapat dilihat pada email konfirmasi anda'
+                                type='text'
+                                className='form-input mb-2'
+                                aria-invalid={errors.id?.message}
+                            />
+                            <div className='text-caption-2 text-danger-500 mt-1'>{errors.id?.message}</div>
+                        </div>
+                        <div className='flex flex-col '>
+                            <label className='form-label mb-2'>Email Penagihan*</label>
+                            <input
+                                {...register('email')}
+                                placeholder='Email yang anda gunakan saat pembayaran'
+                                type='text'
+                                className='form-input'
+                                aria-invalid={errors.email?.message}
+                            />
+                            <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+                        </div>
+                    </div>
+                    <div className={` ${errors.id?.message ? 'mt-2' : 'mt-5'} flex items-center ml-4`}>
+                        <button
+                            type='submit'
+                            className='bg-red-600 border border-red-600 rounded-md text-sm text-white w-24 h-11 mb-1 content-center flex flex-row justify-center items-center'
+                        >
+                            {isLoading && <Spinner size='xs' className='mr-2'/>}
+                            {!isLoading && <Search size={16} strokeWidth={1} className='mr-2'/>} 
+                            <p>Lacak</p>
+                        </button>
+                    </div>
+                </form>
+                {/* Display the API error message */}
+                {apiError && <div className='text-danger-500 mt-4'>{apiError}</div>}
+                <Manifest idAWB={idAWB} closePopup={closePopup} />
+            </div>
+        </div>
+    )
+}
+
+const validationSchema = Yup.object().shape({
+    email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+    id: Yup.string().required('Harus di-isi'),
+})
+
+const defaultValues = {
+    email: '',
+    id: ''
+}
+
+export default TrackingOrder
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index cf2fa4ed..fbc95702 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -40,10 +40,18 @@ const Manifest = ({ idAWB, closePopup }) => {
   const getManifest = async () => {
     setIsLoading(true)
     const auth = getAuth()
-    const list = await odooApi(
-      'GET',
-      `/api/v1/partner/${auth.partnerId}/stock-picking/${idAWB}/tracking`
-    )
+    let list
+    if(auth){
+      list = await odooApi(
+        'GET',
+        `/api/v1/partner/${auth.partnerId}/stock-picking/${idAWB}/tracking`
+      )
+    }else{
+      list = await odooApi(
+        'GET',
+        `/api/v1/stock-picking/${idAWB}/tracking`
+      )
+    }
     setManifests(list)
     setIsLoading(false)
   }
diff --git a/src/pages/tracking-order.jsx b/src/pages/tracking-order.jsx
new file mode 100644
index 00000000..002acd42
--- /dev/null
+++ b/src/pages/tracking-order.jsx
@@ -0,0 +1,27 @@
+import Seo from '@/core/components/Seo'
+import dynamic from 'next/dynamic'
+import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter';
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+const PageTrackingOrder = dynamic(() => import('@/lib/tracking-order/component/TrackingOrder'))
+
+export default function TrackingOrder() {
+  return (
+    <>
+      <Seo title='Tracking Order - Indoteknik.com' />
+
+      <DesktopView>
+        <BasicLayout>
+          <PageTrackingOrder/>
+        </BasicLayout>
+      </DesktopView>
+
+      <MobileView>
+        <BasicLayout>
+          <PageTrackingOrder/>
+        </BasicLayout>
+      </MobileView>
+    </>
+  );
+}