<iman> add pop up yakin ubah type akun

1 files changed, 109 insertions, 72 deletions

diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx
index b87aa69a..f6063ff2 100644
--- a/src/pages/my/profile.jsx
+++ b/src/pages/my/profile.jsx
@@ -10,16 +10,22 @@ import IsAuth from '@/lib/auth/components/IsAuth';
 import Menu from '@/lib/auth/components/Menu';
 import PersonalProfile from '@/lib/auth/components/PersonalProfile';
 import StatusSwitchAccount from '@/lib/auth/components/StatusSwitchAccount';
-import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
+import { Checkbox } from '@chakra-ui/react';
 import { useState, useEffect } from 'react';
 import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 export default function Profile() {
   const auth = useAuth();
   const [isChecked, setIsChecked] = useState(false);
   const [ubahAkun, setUbahAkun] = useState(false);
   const [isAprove, setIsAprove] = useState('unknown');
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
   const handleChange = async () => {
-    setIsChecked(!isChecked);
+    if (isChecked) {
+      setIsChecked(!isChecked);
+    } else {
+      setChangeConfirmation(true);
+    }
   };
   useEffect(() => {
     const loadPromo = async () => {
@@ -31,78 +37,109 @@ export default function Profile() {
     };
     loadPromo();
   }, []);
+  const handleConfirmSubmit = () => {
+    setChangeConfirmation(false);
+    setIsChecked(true);
+  };
   return (
-    <IsAuth>
-      <MobileView>
-        <AppLayout title='Akun Saya'>
-          {!auth?.parentId && ubahAkun && (
-            <div className='text-sm p-4 flex items-center'>
-              <Checkbox
-                borderColor='gray.600'
-                colorScheme='red'
-                size='lg'
-                isChecked={isChecked}
-                onChange={handleChange}
-              />
-              <p className='ml-2'>Ubah ke akun bisnis</p>
-            </div>
-          )}
-          {isChecked && (
-            <div>
-              <SwitchAccount />
-              <Divider />
-            </div>
-          )}
-          {!auth?.parentId
-            ? auth?.parentId
-            : auth?.parent_id &&
-              isAprove != 'unknown' && (
-                <StatusSwitchAccount status={isAprove} />
-              )}
-          <PersonalProfile />
-          <Divider />
-          {auth?.parentId && <CompanyProfile />}
-        </AppLayout>
-      </MobileView>
+    <>
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => setChangeConfirmation(false)} // Menutup popup
+        title='Ubah type akun'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Anda akan mengubah type akun anda?
+        </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={handleConfirmSubmit}
+          >
+            Yakin
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setChangeConfirmation(false)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+      <IsAuth>
+        <MobileView>
+          <AppLayout title='Akun Saya'>
+            {!auth?.parentId && ubahAkun && (
+              <div className='text-sm p-4 flex items-center'>
+                <Checkbox
+                  borderColor='gray.600'
+                  colorScheme='red'
+                  size='lg'
+                  isChecked={isChecked}
+                  onChange={handleChange}
+                />
+                <p className='ml-2'>Ubah ke akun bisnis</p>
+              </div>
+            )}
+            {isChecked && (
+              <div>
+                <SwitchAccount />
+                <Divider />
+              </div>
+            )}
+            {!auth?.parentId
+              ? auth?.parentId
+              : auth?.parent_id &&
+                isAprove != 'unknown' && (
+                  <StatusSwitchAccount status={isAprove} />
+                )}
+            <PersonalProfile />
+            <Divider />
+            {auth?.parentId && <CompanyProfile />}
+          </AppLayout>
+        </MobileView>
 
-      <DesktopView>
-        <BasicLayout>
-          <div className='container mx-auto flex py-10'>
-            <div className='w-3/12 pr-4'>
-              <Menu />
-            </div>
-            <div className='w-9/12 bg-white border border-gray_r-6 rounded'>
-              {!auth?.parentId && ubahAkun && (
-                <div className='text-sm p-4 flex items-center'>
-                  <Checkbox
-                    borderColor='gray.600'
-                    colorScheme='red'
-                    size='lg'
-                    isChecked={isChecked}
-                    onChange={handleChange}
-                  />
-                  <p className='ml-2'>Ubah ke akun bisnis</p>
-                </div>
-              )}
-              {isChecked && (
-                <div>
-                  <SwitchAccount />
-                  <Divider />
-                </div>
-              )}
-              {!auth?.parentId
-                ? auth?.parentId
-                : auth?.parent_id &&
-                  isAprove != 'unknown' && (
-                    <StatusSwitchAccount status={isAprove} />
-                  )}
-              <PersonalProfile />
-              <Divider />
-              {auth?.parentId && <CompanyProfile />}
+        <DesktopView>
+          <BasicLayout>
+            <div className='container mx-auto flex py-10'>
+              <div className='w-3/12 pr-4'>
+                <Menu />
+              </div>
+              <div className='w-9/12 bg-white border border-gray_r-6 rounded'>
+                {!auth?.parentId && ubahAkun && (
+                  <div className='text-sm p-4 flex items-center'>
+                    <Checkbox
+                      borderColor='gray.600'
+                      colorScheme='red'
+                      size='lg'
+                      isChecked={isChecked}
+                      onChange={handleChange}
+                    />
+                    <p className='ml-2'>Ubah ke akun bisnis</p>
+                  </div>
+                )}
+                {isChecked && (
+                  <div>
+                    <SwitchAccount />
+                    <Divider />
+                  </div>
+                )}
+                {!auth?.parentId
+                  ? auth?.parentId
+                  : auth?.parent_id &&
+                    isAprove != 'unknown' && (
+                      <StatusSwitchAccount status={isAprove} />
+                    )}
+                <PersonalProfile />
+                <Divider />
+                {auth?.parentId && <CompanyProfile />}
+              </div>
             </div>
-          </div>
-        </BasicLayout>
-      </DesktopView>
-    </IsAuth>
+          </BasicLayout>
+        </DesktopView>
+      </IsAuth>
+    </>
   );
 }