From 016cbe790dd698ee258f17c8218ef6fdc667ad0d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 27 Sep 2024 17:00:00 +0700
Subject: <iman> update switch account

---
 src/lib/auth/components/CompanyProfile.jsx  |   2 +-
 src/lib/auth/components/Menu.jsx            | 187 ++++++++++++++++++----------
 src/lib/auth/components/PersonalProfile.jsx | 106 +++++++---------
 src/lib/auth/components/SwitchAccount.jsx   | 114 ++++++++++-------
 4 files changed, 241 insertions(+), 168 deletions(-)

(limited to 'src/lib/auth')

diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 6065efde..cd55072c 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -296,7 +296,7 @@ const CompanyProfile = () => {
           </button>
         </form>
       )}
-      {isOpen && <SwitchAccount />}
+      {isOpen && <SwitchAccount company_type={company_type} />}
     </>
   );
 };
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index f475db1f..ddbb0760 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,76 +1,137 @@
-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 Link from '@/core/components/elements/Link/Link';
+import { useRouter } from 'next/router';
+import ImageNext from 'next/image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import useAuth from '@/core/hooks/useAuth';
+import Divider from '@/core/components/elements/Divider/Divider';
 
 const Menu = () => {
-  const router = useRouter()
-
-  const routeStartWith = (route) => router.pathname.startsWith(route)
-
+  const router = useRouter();
+  const auth = useAuth();
+  const routeStartWith = (route) => router.pathname.startsWith(route);
   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>
-      <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 className='flex justify-between py-4'>
+        <div className='font-semibold text-gray_r-12'>Akun Saya</div>
+        {auth?.company && (
+          <div className='badge-solid-red mt-1 p-2'>Akun Bisnis</div>
+        )}
+        {!auth?.company && (
+          <div className='badge-gray mt-1 p-2'>Akun Individu</div>
+        )}
+      </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>
+        <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 href={whatsappUrl('', '', '')} rel='noopener noreferrer' target='_blank'>
+      <LinkItem
+        href={whatsappUrl('', '', '')}
+        rel='noopener noreferrer'
+        target='_blank'
+      >
         <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+          <ImageNext
+            src='/images/icon/icon_layanan_pelanggan.svg'
+            width={18}
+            height={20}
+          />
           <p>Layanan Pelanggan</p>
         </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' 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'>
+          <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>
-  )
-}
+  );
+};
 
 const LinkItem = ({ children, ...props }) => (
   <Link
@@ -81,6 +142,6 @@ const LinkItem = ({ children, ...props }) => (
   >
     {children}
   </Link>
-)
+);
 
-export default Menu
+export default Menu;
diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx
index ce27c650..3053255d 100644
--- a/src/lib/auth/components/PersonalProfile.jsx
+++ b/src/lib/auth/components/PersonalProfile.jsx
@@ -48,11 +48,7 @@ const PersonalProfile = () => {
 
   return (
     <>
-      <button
-        type='button'
-        onClick={toggle}
-        className='p-4 flex items-center text-left w-full'
-      >
+      <div type='button' className='p-4 flex items-center text-left w-full'>
         <div>
           <div className='font-semibold mb-2'>Informasi Akun</div>
           <div className='text-gray_r-11'>
@@ -60,61 +56,55 @@ const PersonalProfile = () => {
             diri anda
           </div>
         </div>
-        <div className='ml-auto p-2 bg-gray_r-3 rounded'>
-          {!isOpen && <ChevronDownIcon className='w-6' />}
-          {isOpen && <ChevronUpIcon className='w-6' />}
-        </div>
-      </button>
+      </div>
 
-      {isOpen && (
-        <form
-          className='p-4 border-t border-gray_r-6'
-          onSubmit={handleSubmit(onSubmitHandler)}
-        >
-          <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
-            <div>
-              <label>Email</label>
-              <input
-                {...register('email')}
-                type='text'
-                disabled
-                className='form-input mt-3'
-              />
-            </div>
-            <div>
-              <label>Nama Lengkap</label>
-              <input
-                {...register('name')}
-                type='text'
-                className='form-input mt-3'
-              />
-            </div>
-            <div>
-              <label>No. Handphone</label>
-              <input
-                {...register('mobile')}
-                type='tel'
-                className='form-input mt-3'
-              />
-            </div>
-            <div>
-              <label>Kata Sandi</label>
-              <input
-                {...register('password')}
-                type='password'
-                className='form-input mt-3'
-                placeholder='Isi jika ingin mengubah kata sandi'
-              />
-            </div>
+      <form
+        className='p-4 border-t border-gray_r-6'
+        onSubmit={handleSubmit(onSubmitHandler)}
+      >
+        <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+          <div>
+            <label>Email</label>
+            <input
+              {...register('email')}
+              type='text'
+              disabled
+              className='form-input mt-3'
+            />
+          </div>
+          <div>
+            <label>Nama Lengkap</label>
+            <input
+              {...register('name')}
+              type='text'
+              className='form-input mt-3'
+            />
           </div>
-          <button
-            type='submit'
-            className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6 max-w-28'
-          >
-            Simpan
-          </button>
-        </form>
-      )}
+          <div>
+            <label>No. Handphone</label>
+            <input
+              {...register('mobile')}
+              type='tel'
+              className='form-input mt-3'
+            />
+          </div>
+          <div>
+            <label>Kata Sandi</label>
+            <input
+              {...register('password')}
+              type='password'
+              className='form-input mt-3'
+              placeholder='Isi jika ingin mengubah kata sandi'
+            />
+          </div>
+        </div>
+        <button
+          type='submit'
+          className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6 max-w-28'
+        >
+          Simpan
+        </button>
+      </form>
     </>
   );
 };
diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx
index fa1d3924..d76d1f0e 100644
--- a/src/lib/auth/components/SwitchAccount.jsx
+++ b/src/lib/auth/components/SwitchAccount.jsx
@@ -14,7 +14,8 @@ import { registerUser } from '~/services/auth';
 import { useMutation } from 'react-query';
 import { isValid } from 'zod';
 import useDevice from '@/core/hooks/useDevice';
-const SwitchAccount = () => {
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+const SwitchAccount = ({ company_type }) => {
   const { isDesktop, isMobile } = useDevice();
   const auth = useAuth();
   const [isOpen, setIsOpen] = useState(true);
@@ -25,6 +26,7 @@ const SwitchAccount = () => {
   const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
   const [selectedValue, setSelectedValue] = useState('PKP');
   const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
   const { register, setValue, handleSubmit } = useForm({
     defaultValues: {
       email: '',
@@ -74,7 +76,6 @@ const SwitchAccount = () => {
       const dataProfile = await addressApi({
         id: auth.parentId ? auth.parentId : auth.parent_id,
       });
-      console.log('dataProfile', dataProfile);
       if (dataProfile?.companyType === 'nonpkp') {
         setSelectedValue('PKP');
       }
@@ -120,6 +121,7 @@ const SwitchAccount = () => {
     }
   };
   const onSubmitHandler = async (values) => {
+    setChangeConfirmation(false);
     // let data = { ...form, id: `${auth.partnerId}` };
     const data = form;
     if (!isFormValid) {
@@ -151,11 +153,32 @@ const SwitchAccount = () => {
 
   return (
     <>
-      <button
-        type='button'
-        onClick={toggle}
-        className='p-4 flex items-center text-left w-full'
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => setChangeConfirmation(false)}
+        title='Ubah profil Bisnis'
       >
+        <div className='leading-7 text-gray_r-12/80'>
+          Apakah anda yakin mengubah data bisnis?
+        </div>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={onSubmitHandler}
+          >
+            Ya, Ubah
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setChangeConfirmation(false)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+      <div type='button' className='p-4 flex items-center text-left w-full'>
         <div
           className={`flex ${
             isDesktop ? 'flex-row' : 'flex-col gap-y-2'
@@ -166,32 +189,25 @@ const SwitchAccount = () => {
             *Perubahan akun tidak dapat diubah kembali
           </div>
         </div>
-        <div className='ml-auto p-2 bg-gray_r-3 rounded'>
-          {!isOpen && <ChevronDownIcon className='w-6' />}
-          {isOpen && <ChevronUpIcon className='w-6' />}
-        </div>
-      </button>
+      </div>
 
-      {isOpen && (
-        <div className='p-4'>
-          <div>
-            <p className='text-black font-bold mb-2'>
-              Bisnis Terdaftar di Indoteknik?
-            </p>
-            <RadioGroup
-              onChange={handleChangeBisnis}
-              value={selectedValueBisnis}
-            >
-              <Stack direction='row'>
-                <Radio colorScheme='red' value='true'>
-                  Sudah Terdaftar
-                </Radio>
-                <Radio colorScheme='red' value='false' className='ml-2'>
-                  Belum Terdaftar
-                </Radio>
-              </Stack>
-            </RadioGroup>
-          </div>
+      <div className='p-4 '>
+        <div>
+          <p className='text-black font-bold mb-2'>
+            Bisnis Terdaftar di Indoteknik?
+          </p>
+          <RadioGroup onChange={handleChangeBisnis} value={selectedValueBisnis}>
+            <Stack direction='row'>
+              <Radio colorScheme='red' value='true'>
+                Sudah Terdaftar
+              </Radio>
+              <Radio colorScheme='red' value='false' className='ml-2'>
+                Belum Terdaftar
+              </Radio>
+            </Stack>
+          </RadioGroup>
+        </div>
+        {!isTerdaftar && (
           <div className='mt-4'>
             <p className='text-black font-bold mb-2'>Tipe Bisnis</p>
             <RadioGroup onChange={handleChange} value={selectedValue}>
@@ -199,37 +215,43 @@ const SwitchAccount = () => {
                 <Radio colorScheme='red' value='PKP'>
                   PKP
                 </Radio>
-                <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
-                  Non-PKP
-                </Radio>
+                {!(company_type === 'nonpkp') && (
+                  <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
+                    Non-PKP
+                  </Radio>
+                )}
               </Stack>
             </RadioGroup>
           </div>
-          <FormBisnis
-            type={isDesktop ? 'profil' : 'bisnis'}
-            required={isTerdaftar}
-            isPKP={isPKP}
-            chekValid={notValid}
-            buttonSubmitClick={buttonSubmitClick}
-          />
-          <div className='flex justify-end mb-4 mr-4'>
+        )}
+        <FormBisnis
+          type={isDesktop ? 'profil' : 'bisnis'}
+          required={isTerdaftar}
+          isPKP={isPKP}
+          chekValid={notValid}
+          buttonSubmitClick={buttonSubmitClick}
+        />
+        <div className='flex flex-row justify-end mt-4 '>
+          <div>
             <button
               type='submit'
-              onClick={onSubmitHandler}
-              className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'
+              onClick={() => setChangeConfirmation(true)}
+              className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6 mr-2'
             >
               {mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'}
             </button>
+          </div>
+          <div>
             <button
               type='submit'
               onClick={onSubmitHandlerCancel}
-              className='btn-red w-full sm:w-fit sm:ml-auto mt-6'
+              className='btn-solid-red w-full sm:w-fit sm:ml-auto mt-6'
             >
               {mutation.isLoading ? 'Loading...' : 'Batal'}
             </button>
           </div>
         </div>
-      )}
+      </div>
     </>
   );
 };
-- 
cgit v1.2.3