From 4ab6c248604b56708e1530e426533624beb27cda Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 17 Feb 2025 13:06:34 +0700
Subject: <iman> update code minus kredit limit & add banner

---
 src/lib/tracking-order/component/TrackingOrder.jsx | 35 ++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

(limited to 'src/lib/tracking-order/component/TrackingOrder.jsx')

diff --git a/src/lib/tracking-order/component/TrackingOrder.jsx b/src/lib/tracking-order/component/TrackingOrder.jsx
index 8a7b2579..31ebd012 100644
--- a/src/lib/tracking-order/component/TrackingOrder.jsx
+++ b/src/lib/tracking-order/component/TrackingOrder.jsx
@@ -8,12 +8,17 @@ import { useQuery } from 'react-query';
 import { Spinner } from '@chakra-ui/react';
 import { Search } from 'lucide-react';
 import Link from 'next/link';
+import odooApi from '~/libs/odooApi';
+import Image from '~/components/ui/image';
+import useDevice from '@/core/hooks/useDevice';
 
 const TrackingOrder = () => {
   const [idAWB, setIdAWB] = useState(null);
+  const { isDesktop, isMobile } = useDevice();
   const [inputQuery, setInputQuery] = useState(null);
   const [buttonClick, setButtonClick] = useState(false);
   const [apiError, setApiError] = useState(null); // State to store API error message
+  const [BannerTracking, setBannerTracking] = useState();
 
   const closePopup = () => {
     setIdAWB(null);
@@ -65,13 +70,35 @@ const TrackingOrder = () => {
     setButtonClick(true);
   };
 
+  useEffect(() => {
+    const getBanner = async () => {
+      const get = await odooApi(
+        'GET',
+        '/api/v1/banner?type=tracking-order-banner'
+      );
+      setBannerTracking(get[0].image);
+    };
+    getBanner();
+  }, []);
+
   return (
     <div className='container mx-auto flex py-10 flex-col'>
+      <div className={`${isDesktop && 'min-h-96'}  min-w-full`}>
+        {BannerTracking && (
+          <Image
+            src={BannerTracking}
+            alt='Tracking Order'
+            width={500}
+            height={160}
+            className='w-full mt-6'
+          />
+        )}
+      </div>
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
         Tracking Order
       </h1>
       <div className='flex justify-start items-start'>
-        <p className='text-base w-full'>
+        <p className={`${isMobile ? 'text-sm' : 'text-base'} w-full text-pretty `}>
           {`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
@@ -93,7 +120,11 @@ const TrackingOrder = () => {
           onSubmit={handleSubmit(onSubmitHandler)}
           className='flex mt-4 flex-row w-full '
         >
-          <div className='w-[90%] grid grid-cols-2 gap-4'>
+          <div
+            className={`w-[90%] grid ${
+              isMobile ? 'grid-rows-3' : 'grid-cols-2'
+            } gap-4`}
+          >
             <div className='flex flex-col '>
               <label className='form-label mb-2'>ID Pesanan*</label>
               <input
-- 
cgit v1.2.3

