From 7d5f7d239231cdfc439a57930e315586b206a0e5 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 17 Sep 2024 15:53:06 +0700
Subject: <iman> update new register

---
 src/lib/address/components/Addresses.jsx   | 135 +++++++++----
 src/lib/address/components/EditAddress.jsx | 311 ++++++++++++++++-------------
 src/lib/auth/components/CompanyProfile.jsx |   2 -
 3 files changed, 275 insertions(+), 173 deletions(-)

(limited to 'src')

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index a610d371..a8879607 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -1,34 +1,72 @@
-import Link from '@/core/components/elements/Link/Link'
-import Spinner from '@/core/components/elements/Spinner/Spinner'
-import useAuth from '@/core/hooks/useAuth'
-import { getItemAddress, updateItemAddress } from '@/core/utils/address'
-import { useRouter } from 'next/router'
-import useAddresses from '../hooks/useAddresses'
-import MobileView from '@/core/components/views/MobileView'
-import DesktopView from '@/core/components/views/DesktopView'
-import Menu from '@/lib/auth/components/Menu'
+import { useState } from 'react';
+import Link from '@/core/components/elements/Link/Link';
+import Spinner from '@/core/components/elements/Spinner/Spinner';
+import useAuth from '@/core/hooks/useAuth';
+import { getItemAddress, updateItemAddress } from '@/core/utils/address';
+import { useRouter } from 'next/router';
+import useAddresses from '../hooks/useAddresses';
+import MobileView from '@/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import Menu from '@/lib/auth/components/Menu';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 
 const Addresses = () => {
-  const router = useRouter()
-  const { select = null } = router.query
-  const { addresses } = useAddresses()
-  const selectedAddress = getItemAddress(select || '')
+  const router = useRouter();
+  const { select = null } = router.query;
+  const { addresses } = useAddresses();
+  const selectedAddress = getItemAddress(select || '');
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
+  const [selectedForChange, setSelectedForChange] = useState(null); // State baru untuk simpan alamat yang akan diubah
+
   const changeSelectedAddress = (id) => {
-    if (!select) return
-    updateItemAddress(select, id)
-    router.back()
-  }
+    if (!select) return;
+    updateItemAddress(select, id);
+    router.back();
+  };
+
+  const handleConfirmSubmit = () => {
+    setChangeConfirmation(false);
+    if (selectedForChange) {
+      router.push(`/my/address/${selectedForChange}/edit`);
+    }
+  };
 
   if (addresses.isLoading) {
     return (
       <div className='flex justify-center my-6'>
         <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
       </div>
-    )
+    );
   }
 
   return (
     <>
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => setChangeConfirmation(false)} // Menutup popup
+        title='Ubah alamat Bisnis'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Anda akan mengubah alamat utama 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={handleConfirmSubmit}
+          >
+            Yakin
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setChangeConfirmation(false)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+
       <MobileView>
         <div className='p-4'>
           <div className='text-right'>
@@ -37,7 +75,10 @@ const Addresses = () => {
 
           <div className='grid gap-y-4 mt-4'>
             {addresses.data?.map((address, index) => {
-              const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+              const type =
+                address.type.charAt(0).toUpperCase() +
+                address.type.slice(1) +
+                ' Address';
               return (
                 <AddressCard
                   key={index}
@@ -45,9 +86,11 @@ const Addresses = () => {
                   type={type}
                   changeSelectedAddress={changeSelectedAddress}
                   selectedAddress={selectedAddress}
+                  setChangeConfirmation={setChangeConfirmation} // Memanggil popup
+                  setSelectedForChange={setSelectedForChange} // Simpan id address yang akan diubah
                   select={select}
                 />
-              )
+              );
             })}
           </div>
         </div>
@@ -72,7 +115,9 @@ const Addresses = () => {
             <div className='grid grid-cols-2 gap-4'>
               {addresses.data?.map((address, index) => {
                 const type =
-                  address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+                  address.type.charAt(0).toUpperCase() +
+                  address.type.slice(1) +
+                  ' Address';
                 return (
                   <AddressCard
                     key={index}
@@ -80,20 +125,30 @@ const Addresses = () => {
                     type={type}
                     changeSelectedAddress={changeSelectedAddress}
                     selectedAddress={selectedAddress}
+                    setChangeConfirmation={setChangeConfirmation}
+                    setSelectedForChange={setSelectedForChange}
                     select={select}
                   />
-                )
+                );
               })}
             </div>
           </div>
         </div>
       </DesktopView>
     </>
-  )
-}
+  );
+};
 
-const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
-  const auth = useAuth()
+const AddressCard = ({
+  address,
+  selectedAddress,
+  changeSelectedAddress,
+  type,
+  select,
+  setChangeConfirmation,
+  setSelectedForChange,
+}) => {
+  const auth = useAuth();
 
   return (
     <div
@@ -106,23 +161,33 @@ const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, se
           (select && 'cursor-pointer hover:bg-gray_r-4 transition')
         }`}
     >
-      <div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}>
+      <div
+        onClick={() => changeSelectedAddress(address.id)}
+        className={select && 'cursor-pointer'}
+      >
         <div className='flex gap-x-2'>
           <div className='badge-red'>{type}</div>
-          {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
+          {auth?.partnerId == address.id && (
+            <div className='badge-green'>Utama</div>
+          )}
         </div>
         <p className='font-medium mt-2'>{address.name}</p>
-        {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
+        {address.mobile && (
+          <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
+        )}
         <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
       </div>
-      <Link
-        href={`/my/address/${address.id}/edit`}
+      <button
+        onClick={() => {
+          setSelectedForChange(address.id); // Set alamat yang dipilih
+          setChangeConfirmation(true); // Tampilkan popup konfirmasi
+        }}
         className='btn-light bg-white mt-3 w-full !text-gray_r-11'
       >
         Ubah Alamat
-      </Link>
+      </button>
     </div>
-  )
-}
+  );
+};
 
-export default Addresses
+export default Addresses;
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 7a30a3d8..626709db 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -6,13 +6,16 @@ import cityApi from '../api/cityApi';
 import { Controller, useForm } from 'react-hook-form';
 import districtApi from '../api/districtApi';
 import subDistrictApi from '../api/subDistrictApi';
+import addressApi from '@/lib/address/api/addressApi';
 import editAddressApi from '../api/editAddressApi';
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
 import { toast } from 'react-hot-toast';
 import Menu from '@/lib/auth/components/Menu';
+import useAuth from '@/core/hooks/useAuth';
+import odooApi from '@/core/api/odooApi';
 
 const EditAddress = ({ id, defaultValues }) => {
-  console.log('defaultValues', defaultValues);
+  const auth = useAuth();
   const router = useRouter();
   const {
     register,
@@ -31,6 +34,20 @@ const EditAddress = ({ id, defaultValues }) => {
   const [districts, setDistricts] = useState([]);
   const [subDistricts, setSubDistricts] = useState([]);
 
+  useEffect(() => {
+    const loadProfile = async () => {
+      const dataProfile = await addressApi({ id: auth.parentId });
+      setValue('name', dataProfile.name);
+      setValue('industry', dataProfile.industryId);
+      setValue('companyType', dataProfile.companyTypeId);
+      setValue('taxName', dataProfile.taxName);
+      setValue('npwp', dataProfile.npwp);
+      setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak);
+      setValue('alamat_bisnis', dataProfile.alamatBisnis);
+    };
+    if (auth) loadProfile();
+  }, [auth, setValue]);
+
   useEffect(() => {
     const loadCities = async () => {
       let dataCities = await cityApi();
@@ -92,170 +109,192 @@ const EditAddress = ({ id, defaultValues }) => {
     const data = {
       ...values,
       phone: values.mobile,
-      street: values.street,
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
     };
-    console.log('data', data);
+    const dataAlamat = {
+      ...values,
+      id_user: auth.partnerId,
+      company_type_id: values.companyType,
+      industry_id: values.industry,
+      tax_name: values.taxName,
+      alamat_lengkap_text: values.alamat_wajib_pajak,
+      street: values.street,
+    };
+
+    // const address = await editAddressApi({ id, data });
+    const isUpdated = await odooApi(
+      'PUT',
+      `/api/v1/partner/${auth.parentId}`,
+      dataAlamat
+    );
 
-    const address = await editAddressApi({ id, data });
-    if (address?.id) {
+    if (isUpdated?.id) {
+      // if (address?.id && isUpdated?.id) {
       toast.success('Berhasil mengubah alamat');
       router.back();
+    } else {
+      toast.error('Terjadi kesalahan internal');
+      router.back();
     }
   };
 
   return (
-    <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
-      <div className='hidden md:block w-3/12 pr-4'>
-        <Menu />
-      </div>
-      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
-        <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>
-          Ubah Alamat
-        </h1>
-        <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-            <div>
-              <label className='form-label mb-2'>Label Alamat</label>
-              <Controller
-                name='type'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    isSearchable={false}
-                    options={types}
-                  />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.type?.message}
+    <>
+      <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+        <div className='hidden md:block w-3/12 pr-4'>
+          <Menu />
+        </div>
+        <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+          <div className='flex justify-start items-center mb-6'>
+            <h1 className='text-title-sm font-semibold hidden md:block mr-2'>
+              Ubah Alamat
+            </h1>
+            {auth?.partnerId == id && <div className='badge-green'>Utama</div>}
+          </div>
+          <form onSubmit={handleSubmit(onSubmitHandler)}>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+              <div>
+                <label className='form-label mb-2'>Label Alamat</label>
+                <Controller
+                  name='type'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      isSearchable={false}
+                      options={types}
+                    />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.type?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Nama</label>
-              <input
-                {...register('name')}
-                placeholder='John Doe'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.name?.message}
+              <div>
+                <label className='form-label mb-2'>Nama</label>
+                <input
+                  {...register('name')}
+                  placeholder='John Doe'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.name?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Email</label>
-              <input
-                {...register('email')}
-                placeholder='johndoe@example.com'
-                type='email'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.email?.message}
+              <div>
+                <label className='form-label mb-2'>Email</label>
+                <input
+                  {...register('email')}
+                  placeholder='johndoe@example.com'
+                  type='email'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.email?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Mobile</label>
-              <input
-                {...register('mobile')}
-                placeholder='08xxxxxxxx'
-                type='tel'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.mobile?.message}
+              <div>
+                <label className='form-label mb-2'>Mobile</label>
+                <input
+                  {...register('mobile')}
+                  placeholder='08xxxxxxxx'
+                  type='tel'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.mobile?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Alamat</label>
-              <input
-                {...register('street')}
-                placeholder='Jl. Bandengan Utara 85A'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.street?.message}
+              <div>
+                <label className='form-label mb-2'>Alamat</label>
+                <input
+                  {...register('street')}
+                  placeholder='Jl. Bandengan Utara 85A'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.street?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kode Pos</label>
-              <input
-                {...register('zip')}
-                placeholder='10100'
-                type='number'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.zip?.message}
+              <div>
+                <label className='form-label mb-2'>Kode Pos</label>
+                <input
+                  {...register('zip')}
+                  placeholder='10100'
+                  type='number'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.zip?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kota</label>
-              <Controller
-                name='city'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect {...props} options={cities} />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.city?.message}
+              <div>
+                <label className='form-label mb-2'>Kota</label>
+                <Controller
+                  name='city'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={cities} />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.city?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kecamatan</label>
-              <Controller
-                name='district'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={districts}
-                    disabled={!watchCity}
-                  />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.district?.message}
+              <div>
+                <label className='form-label mb-2'>Kecamatan</label>
+                <Controller
+                  name='district'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      options={districts}
+                      disabled={!watchCity}
+                    />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.district?.message}
+                </div>
               </div>
-            </div>
 
-            <div>
-              <label className='form-label mb-2'>Kelurahan</label>
-              <Controller
-                name='subDistrict'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={subDistricts}
-                    disabled={!watchDistrict}
-                  />
-                )}
-              />
+              <div>
+                <label className='form-label mb-2'>Kelurahan</label>
+                <Controller
+                  name='subDistrict'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      options={subDistricts}
+                      disabled={!watchDistrict}
+                    />
+                  )}
+                />
+              </div>
             </div>
-          </div>
-          <button
-            type='submit'
-            className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
-          >
-            Simpan
-          </button>
-        </form>
+            <button
+              type='submit'
+              className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+            >
+              Simpan
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index f1577ca1..d4cf8657 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -24,7 +24,6 @@ const CompanyProfile = () => {
       alamat_bisnis: '',
     },
   });
-  console.log('auth', auth);
   const [industries, setIndustries] = useState([]);
   useEffect(() => {
     const loadIndustries = async () => {
@@ -75,7 +74,6 @@ const CompanyProfile = () => {
         alamat_lengkap_text: values.alamat_wajib_pajak,
         street: values.alamat_bisnis,
       };
-      console.log('data', data);
       const isUpdated = await odooApi(
         'PUT',
         `/api/v1/partner/${auth.parentId}`,
-- 
cgit v1.2.3