diff options
Diffstat (limited to 'src/lib/address/components/EditAddress.jsx')
| -rw-r--r-- | src/lib/address/components/EditAddress.jsx | 420 |
1 files changed, 251 insertions, 169 deletions
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index 520bba51..ff6b1f12 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -1,18 +1,22 @@ -import { yupResolver } from '@hookform/resolvers/yup' -import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' -import * as Yup from 'yup' -import cityApi from '../api/cityApi' -import { Controller, useForm } from 'react-hook-form' -import districtApi from '../api/districtApi' -import subDistrictApi from '../api/subDistrictApi' -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 { yupResolver } from '@hookform/resolvers/yup'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import * as Yup from 'yup'; +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 }) => { - const router = useRouter() + const auth = useAuth(); + const router = useRouter(); const { register, formState: { errors }, @@ -20,205 +24,283 @@ const EditAddress = ({ id, defaultValues }) => { watch, setValue, getValues, - control + control, } = useForm({ resolver: yupResolver(validationSchema), - defaultValues - }) + defaultValues, + }); + const [cities, setCities] = useState([]); + const [districts, setDistricts] = useState([]); + const [subDistricts, setSubDistricts] = useState([]); - const [cities, setCities] = useState([]) - const [districts, setDistricts] = useState([]) - const [subDistricts, setSubDistricts] = useState([]) + useEffect(() => { + const loadProfile = async () => { + const dataProfile = await addressApi({ id: auth.parentId }); + 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); + setValue('business_name', dataProfile.name); + }; + if (auth) loadProfile(); + }, [auth, setValue]); useEffect(() => { const loadCities = async () => { - let dataCities = await cityApi() + let dataCities = await cityApi(); dataCities = dataCities.map((city) => ({ value: city.id, - label: city.name - })) - setCities(dataCities) - } - loadCities() - }, []) + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + }, []); - const watchCity = watch('city') + const watchCity = watch('city'); useEffect(() => { - setValue('district', '') + setValue('district', ''); if (watchCity) { const loadDistricts = async () => { - let dataDistricts = await districtApi({ cityId: watchCity }) + let dataDistricts = await districtApi({ cityId: watchCity }); dataDistricts = dataDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setDistricts(dataDistricts) - let oldDistrict = getValues('oldDistrict') + label: district.name, + })); + setDistricts(dataDistricts); + let oldDistrict = getValues('oldDistrict'); if (oldDistrict) { - setValue('district', oldDistrict) - setValue('oldDistrict', '') + setValue('district', oldDistrict); + setValue('oldDistrict', ''); } - } - loadDistricts() + }; + loadDistricts(); } - }, [watchCity, setValue, getValues]) + }, [watchCity, setValue, getValues]); - const watchDistrict = watch('district') + const watchDistrict = watch('district'); useEffect(() => { - setValue('subDistrict', '') + setValue('subDistrict', ''); if (watchDistrict) { const loadSubDistricts = async () => { let dataSubDistricts = await subDistrictApi({ - districtId: watchDistrict - }) + districtId: watchDistrict, + }); dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setSubDistricts(dataSubDistricts) - let oldSubDistrict = getValues('oldSubDistrict') + label: district.name, + })); + setSubDistricts(dataSubDistricts); + let oldSubDistrict = getValues('oldSubDistrict'); if (oldSubDistrict) { - setValue('subDistrict', oldSubDistrict) - setValue('oldSubDistrict', '') + setValue('subDistrict', oldSubDistrict); + setValue('oldSubDistrict', ''); } - } - loadSubDistricts() + }; + loadSubDistricts(); } - }, [watchDistrict, setValue, getValues]) - + }, [watchDistrict, setValue, getValues]); const onSubmitHandler = async (values) => { const data = { ...values, + phone: values.mobile, city_id: values.city, district_id: values.district, - sub_district_id: values.subDistrict + sub_district_id: values.subDistrict, + }; + const address = await editAddressApi({ id, data }); + let dataAlamat; + let isUpdated = true; + if (auth?.partnerId == id) { + dataAlamat = { + 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, + business_name: values.business_name, + name: values.business_name, + npwp: values.npwp, + }; + isUpdated = await odooApi( + 'PUT', + `/api/v1/partner/${auth.parentId}`, + dataAlamat + ); } - const address = await editAddressApi({ id, data }) - if (address?.id) { - toast.success('Berhasil mengubah alamat') - router.back() + // 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> - </div> + <> + <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> - <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> + <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> - <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> + <label className='form-label mb-2'>Email</label> + <input + {...register('email')} + placeholder='johndoe@example.com' + type='email' + className='form-input' + disabled={auth?.partnerId == id && true} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.email?.message} + </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> - </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> + </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> - </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> + </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> - </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> + </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> - </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> + </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> - </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> + </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> - ) -} + </> + ); +}; const validationSchema = Yup.object().shape({ type: Yup.string().required('Harus di-pilih'), @@ -228,14 +310,14 @@ const validationSchema = Yup.object().shape({ street: Yup.string().required('Harus di-isi'), zip: Yup.string().required('Harus di-isi'), city: Yup.string().required('Harus di-pilih'), - district: Yup.string().required('Harus di-pilih') -}) + district: Yup.string().required('Harus di-pilih'), +}); const types = [ { value: 'contact', label: 'Contact Address' }, { value: 'invoice', label: 'Invoice Address' }, { value: 'delivery', label: 'Delivery Address' }, - { value: 'other', label: 'Other Address' } -] + { value: 'other', label: 'Other Address' }, +]; -export default EditAddress +export default EditAddress; |