Merge branch 'release' into CR/product_detail

# Conflicts:
#	src-migrate/modules/product-detail/components/ProductDetail.tsx

1 files changed, 139 insertions, 0 deletions

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