<hafid> merging new release

3 files changed, 210 insertions, 30 deletions

diff --git a/src/lib/treckingAwb/api/getManifest.js b/src/lib/treckingAwb/api/getManifest.js
index 7d78a5f2..5523a164 100644
--- a/src/lib/treckingAwb/api/getManifest.js
+++ b/src/lib/treckingAwb/api/getManifest.js
@@ -1,9 +1,12 @@
-const { default: odooApi } = require("@/core/api/odooApi")
-const { getAuth } = require("@/core/utils/auth")
+const { default: odooApi } = require('@/core/api/odooApi');
+const { getAuth } = require('@/core/utils/auth');
 
-export const getManifest = async ({id}) => {
-    const auth = getAuth() 
-    const manifest = await odooApi('GET', `/api/v1/partner/${auth.partnerId}/stock-picking/${id}/tracking`)
+export const getManifest = async ({ id }) => {
+  const auth = getAuth();
+  const manifest = await odooApi(
+    'GET',
+    `/api/v1/partner/${auth.partnerId}/stock-picking/${id}/tracking`
+  );
 
-    return manifest
-}
\ No newline at end of file
+  return manifest;
+};
diff --git a/src/lib/treckingAwb/component/InformationSection.jsx b/src/lib/treckingAwb/component/InformationSection.jsx
new file mode 100644
index 00000000..a2297af3
--- /dev/null
+++ b/src/lib/treckingAwb/component/InformationSection.jsx
@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const InformationSection = ({ manifests }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = () => {
+    const textToCopy = manifests?.waybillNumber;
+    navigator.clipboard.writeText(textToCopy);
+    setCopied(true);
+    toast.success('No Resi Berhasil di Copy');
+    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+  };
+
+  return (
+    <div className=''>
+      <div className='grid gap-y-4 p-4'>
+        <div className='grid grid-cols-[150px_auto] mb-4'>
+          <span className='font-semibold '>Nomor Resi</span>
+          <div className='flex gap-x-3'>
+            <span className='font-semibold'>: {manifests?.waybillNumber} </span>
+            <button
+              className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
+              onClick={() => handleCopyClick()}
+            >
+              <svg
+                aria-hidden='true'
+                fill='none'
+                stroke='currentColor'
+                stroke-width='1.5'
+                viewBox='0 0 24 24'
+                className='w-5 h-6'
+              >
+                <path
+                  d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
+                  stroke-linecap='round'
+                  stroke-linejoin='round'
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+        {/*<div className='grid grid-cols-[150px_auto]'>*/}
+        {/*  <span>Barang</span>*/}
+        {/*  <span className='font-semibold'>: {manifests?.products}</span>*/}
+        {/*</div>*/}
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Kurir</span>
+          <span className='font-semibold'>
+            {' '}
+            : {manifests?.deliveryOrder?.carrier}
+          </span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Jenis Service</span>
+          <span className='font-semibold'>
+            {' '}
+            : {manifests?.deliveryOrder?.service}
+          </span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Tanggal Dikirim</span>
+          <span className='font-semibold'> : {manifests?.deliveredDate}</span>
+        </div>
+        <div className='grid grid-cols-[150px_auto]'>
+          <span>Estimasi Tiba</span>
+          <span className='font-semibold'>
+            :{' '}
+            <span className='text-red-600 font-semibold'>{manifests?.eta}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InformationSection;
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index 109bc832..5b456ccf 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -6,6 +6,32 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import ImageNext from 'next/image';
 import { list } from 'postcss';
+import InformationSection from './InformationSection';
+import Link from 'next/link';
+
+function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function capitalizeWords(str) {
+  return str
+    .split(' ')
+    .map((word) => capitalizeFirstLetter(word))
+    .join(' ');
+}
+
+function mappingLiveTracking(kurir, resi){
+  let url = null
+  switch (kurir){
+    case('grab'):
+      url = 'https://express.grab.com/track/orders?ids='+resi
+      break;
+    default:
+      url = false
+  }
+
+  return url
+}
 
 const Manifest = ({ idAWB, closePopup }) => {
   const [manifests, setManifests] = useState(null);
@@ -60,15 +86,7 @@ const Manifest = ({ idAWB, closePopup }) => {
     }
   }, [idAWB]);
 
-  const [copied, setCopied] = useState(false);
-
-  const handleCopyClick = () => {
-    const textToCopy = manifests?.waybillNumber;
-    navigator.clipboard.writeText(textToCopy);
-    setCopied(true);
-    toast.success('No Resi Berhasil di Copy');
-    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
-  };
+  const isLiveTracking = mappingLiveTracking(manifests?.deliveryOrder?.carrier.toLowerCase(), manifests?.waybillNumber)
 
   return (
     <>
@@ -85,7 +103,7 @@ const Manifest = ({ idAWB, closePopup }) => {
       {!isLoading && (
         <BottomPopup
           key={manifests?.waybillNumber}
-          title='Detail Pengiriman'
+          title='Lacak Pengiriman'
           active={idAWB}
           close={closePopup}
         >
@@ -101,12 +119,23 @@ const Manifest = ({ idAWB, closePopup }) => {
                 <p className='text-yellow-600 text-sm'>Sedang Dikirim</p>
               </div>
             )}
+            {manifests?.status === 'cancelled' && (
+              <div className='bg-red-800 p-2 rounded '>
+                <p className='text-white text-sm'>Di Batalkan</p>
+              </div>
+            )}
+            {manifests?.status === 'on_hold' && (
+              <div className='bg-red-800 p-2 rounded '>
+                <p className='text-white text-sm'>Ditunda Sementara </p>
+              </div>
+            )}
             {manifests?.status === 'pending' && (
               <div className='bg-red-100 p-2 rounded '>
                 <p className='text-red-600 text-sm'>Pending</p>
               </div>
             )}
           </div>
+<<<<<<< HEAD
           <div className=''>
             <h1 className='text-body-1'>
               Estimasi tiba pada{' '}
@@ -180,25 +209,96 @@ const Manifest = ({ idAWB, closePopup }) => {
                         } `}
                       />
                     )}
+=======
+>>>>>>> new-release
+
+          <InformationSection manifests={manifests} />
+
+          <hr className='mt-4' />
+          {manifests?.isDelay && (
+            <div
+              class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50'
+              role='alert'
+            >
+              <svg
+                class='flex-shrink-0 inline w-4 h-4 mr-3'
+                aria-hidden='true'
+                fill='currentColor'
+                viewBox='0 0 20 20'
+              >
+                <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+              </svg>
+              <div>Pesanan anda mungkin mengalami keterlambatan tiba</div>
+            </div>
+          )}
+          <div className='pt-4'>
+            <ol className='relative'>
+              {manifests?.manifests?.map((manifest, index) => {
+                const isFirst = index === 0;
+                const isDelivered = manifests.delivered === true;
+                const isBiteship = manifests.isBiteship === true;
+                const statusTitle =
+                  isDelivered && isFirst && !isBiteship
+                    ? 'Pesanan sampai'
+                    : isBiteship
+                    ? capitalizeWords(manifest.status)
+                    : '';
 
-                    <time class='text-sm leading-none text-gray-400'>
+                return (
+                  <li
+                    className='grid grid-cols-[80px_20px_1fr] gap-2 mb-6 items-start'
+                    key={index}
+                  >
+                    {/* Kolom 1: Tanggal + Jam */}
+                    <div className='text-sm text-gray-400 whitespace-nowrap'>
                       {formatCustomDate(manifest.datetime)}
-                    </time>
-                    {manifests.delivered == true && index == 0 && (
-                      <p
-                        class={`leading-6 font-semibold text-sm text-green-600 `}
-                      >
-                        Sudah Sampai
+                    </div>
+
+                    {/* Kolom 2: Bullet/Poin */}
+                    <div className='relative flex items-start justify-center pt-1'>
+                      <div
+                        className={`w-3 h-3 rounded-full border ${
+                          index === 0 && manifests.delivered
+                            ? 'bg-green-600 border-green-600'
+                            : 'bg-gray-400 border-white'
+                        }`}
+                      />
+                    </div>
+
+                    {/* Kolom 3: Status dan Deskripsi */}
+                    <div>
+                      <p className='text-sm font-semibold text-green-600'>
+                        {manifests?.deliveryOrder.carrier != 'Self Pick Up'
+                          ? capitalizeWords(manifest.status)
+                          : ''}
                       </p>
-                    )}
-                    <p class={`leading-6 text-[12px] text-gray_r-11`}>
-                      {manifest.description}
-                    </p>
+                      <p
+                        className='text-xs text-gray-600'
+                        dangerouslySetInnerHTML={{
+                          __html: manifest.description,
+                        }}
+                      />
+                    </div>
                   </li>
-                </>
-              ))}
+                );
+              })}
             </ol>
           </div>
+          <div className='pt-2'>
+            {
+              isLiveTracking &&
+                manifests?.status === 'shipment' && (
+                  <Link
+                    href={isLiveTracking}
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="inline-block px-4 py-2 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
+                  >
+                    Live Tracking
+                  </Link>
+                )
+            }
+          </div>
         </BottomPopup>
       )}
     </>