Merged in Feature/switch-account (pull request #402)

Feature/switch account

1 files changed, 176 insertions, 106 deletions

diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index d99917d0..4682dbab 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -2,11 +2,24 @@ import Link from '@/core/components/elements/Link/Link';
 import { useRouter } from 'next/router';
 import ImageNext from 'next/image';
 import whatsappUrl from '@/core/utils/whatsappUrl';
-import { deleteAuth } from '@/core/utils/auth';
 import useAuth from '@/core/hooks/useAuth';
+import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';
+import { useState, useEffect } from 'react';
+import { InfoIcon } from 'lucide-react';
+import { deleteAuth } from '@/core/utils/auth';
 const Menu = () => {
   const router = useRouter();
   const auth = useAuth();
+  const [ubahAkun, setUbahAkun] = useState();
+  useEffect(() => {
+    const loadProgres = async () => {
+      const progresSwitchAccount = await switchAccountProgresApi();
+      if (progresSwitchAccount) {
+        setUbahAkun(progresSwitchAccount.status);
+      }
+    };
+    loadProgres();
+  }, []);
 
   const routeStartWith = (route) => router.pathname.startsWith(route);
 
@@ -15,78 +28,134 @@ const Menu = () => {
       router.push('/login');
     });
   };
-
   return (
     <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
-      <div className='mt-4 mb-1 font-medium'>Menu</div>
-      <LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_daftar_quotation.svg'
-            width={18}
-            height={20}
-          />
-          <p>Daftar Quotation</p>
-        </div>
-      </LinkItem>
-      <LinkItem
-        href='/my/transactions'
-        active={routeStartWith('/my/transactions')}
-      >
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_daftar_transaksi.svg'
-            width={18}
-            height={20}
-          />
-          <p>Daftar Transaksi</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_pengiriman.svg'
-            width={18}
-            height={20}
-          />
-          <p>Daftar Pengiriman</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_invoice.svg'
-            width={18}
-            height={20}
-          />
-          <p>Invoice & Faktur Pajak</p>
-        </div>
-      </LinkItem>
-      {auth &&
-        auth.partnerTempo &&
-        (auth.partnerTempo ||
-          auth.tempoProgres === 'review') && (
-          <LinkItem href='/my/tempo' active={routeStartWith('/my/tempo')}>
-            <div className='flex gap-x-3 items-center'>
-              <ImageNext
-                src='/images/icon/icon_tempo.svg'
-                width={18}
-                height={20}
-              />
-              <p>Pembayaran Tempo</p>
-            </div>
-          </LinkItem>
-        )}
-      <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_wishlist.svg'
-            width={18}
-            height={20}
-          />
-          <p>Wishlist</p>
+      <div className='flex justify-between py-4'>
+        <div className='font-semibold text-gray_r-12'>Akun Saya</div>
+        <div className='relative group'>
+          {auth?.company && !(ubahAkun === 'pending') && (
+            <>
+              <Link
+                href='/my/profile'
+                className='badge-solid-red mt-1 p-2 flex flex-row items-center gap-x-2'
+              >
+                <p className='text-white'>Akun Bisnis</p>{' '}
+                <InfoIcon size={14} color='white' />
+              </Link>
+              <div className='absolute bottom-full transform -translate-x-1/2 mb-2 hidden  group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2 w-72 text-justify left-36'>
+                Anda terdaftar sebagai akun bisnis, segala bentuk transaksi anda
+                untuk perusahaan yang sudah anda daftarkan di Indoteknik.com
+              </div>
+            </>
+          )}
+          {ubahAkun === 'pending' && (
+            <>
+              <Link
+                href='/my/profile'
+                className='badge-yellow mt-1 p-2 flex flex-row items-center gap-x-2'
+              >
+                <p className='text-warning-900'>Review</p>
+                <InfoIcon size={14} className='text-warning-900' />
+              </Link>
+              <div className='absolute bottom-full transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2 w-72 text-justify left-36'>
+                Proses perubahan akun anda sedang kami review, mohon menunggu
+                hingga 2x24 jam.
+              </div>
+            </>
+          )}
+          {!auth?.company && !(ubahAkun === 'pending') && (
+            <>
+              <Link
+                href='/my/profile'
+                className='badge-gray mt-1 p-2 flex flex-row items-center gap-x-2'
+              >
+                <p className='text-gray_r-10'>Akun Individu</p>
+                <InfoIcon size={14} className='text-gray_r-10' />
+              </Link>
+              <div className='absolute bottom-full left-36 transform -translate-x-1/2 mb-3 w-72 text-justify hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2'>
+                <p className='whitespace-pre-wrap break-words'>
+                  Anda terdaftar sebagai akun individu, Segala bentuk transaksi
+                  anda untuk Pribadi/Individu.
+                </p>
+              </div>
+            </>
+          )}
         </div>
-      </LinkItem>
+      </div>
+      <div className='mt-2 mb-1 font-medium'>Menu</div>
+      <div className='flex flex-col gap-y-2'>
+        <LinkItem
+          href='/my/quotations'
+          active={routeStartWith('/my/quotations')}
+          className=''
+        >
+          <div className='flex gap-x-3  items-center'>
+            <ImageNext
+              src='/images/icon/icon_daftar_quotation.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Quotation</p>
+          </div>
+        </LinkItem>
+        <LinkItem
+          href='/my/transactions'
+          active={routeStartWith('/my/transactions')}
+        >
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_daftar_transaksi.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Transaksi</p>
+          </div>
+        </LinkItem>
+        <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_pengiriman.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Pengiriman</p>
+          </div>
+        </LinkItem>
+        <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_invoice.svg'
+              width={18}
+              height={20}
+            />
+            <p>Invoice & Faktur Pajak</p>
+          </div>
+        </LinkItem>
+        {auth &&
+          auth.partnerTempo &&
+          (auth.partnerTempo || auth.tempoProgres === 'review') && (
+            <LinkItem href='/my/tempo' active={routeStartWith('/my/tempo')}>
+              <div className='flex gap-x-3 items-center'>
+                <ImageNext
+                  src='/images/icon/icon_tempo.svg'
+                  width={18}
+                  height={20}
+                />
+                <p>Pembayaran Tempo</p>
+              </div>
+            </LinkItem>
+          )}
+        <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_wishlist.svg'
+              width={18}
+              height={20}
+            />
+            <p>Wishlist</p>
+          </div>
+        </LinkItem>
+      </div>
       <div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
 
       <LinkItem
@@ -104,40 +173,41 @@ const Menu = () => {
         </div>
       </LinkItem>
       <div className='mt-4 mb-1 font-medium'>Pengaturan Akun</div>
-      <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_daftar_alamat.svg'
-            width={18}
-            height={20}
-          />
-          <p>Daftar Alamat</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_profile.svg'
-            width={18}
-            height={20}
-          />
-          <p>Profil Saya</p>
-        </div>
-      </LinkItem>
-      <button
-        type='button'
-        onClick={logout}
-        className='text-gray_r-12/80 p-2 text-left'
-      >
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext
-            src='/images/icon/icon_logout.svg'
-            width={18}
-            height={20}
-          />
-          <p>Keluar Akun</p>
-        </div>
-      </button>
+      <div className='flex flex-col gap-y-2'>
+        <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_daftar_alamat.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Alamat</p>
+          </div>
+        </LinkItem>
+        <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_profile.svg'
+              width={18}
+              height={20}
+            />
+            <p>Profil Saya</p>
+          </div>
+        </LinkItem>
+        <button
+          type='button'
+          className='text-gray_r-12/80 p-2 text-left hover:bg-gray_r-5 '
+        >
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_logout.svg'
+              width={18}
+              height={20}
+            />
+            <p>Keluar Akun</p>
+          </div>
+        </button>
+      </div>
     </div>
   );
 };
@@ -145,8 +215,8 @@ const Menu = () => {
 const LinkItem = ({ children, ...props }) => (
   <Link
     {...props}
-    className={`!text-gray_r-12/80 !font-normal p-2 rounded ${
-      props.active == true ? 'bg-gray_r-3' : ''
+    className={`!text-gray_r-12/80 !font-normal p-2 rounded transition-colors duration-200 ${
+      props.active ? 'bg-gray_r-3' : 'hover:bg-gray_r-5 '
     }`}
   >
     {children}