diff options
Diffstat (limited to 'src/lib/address/components/EditAddress.jsx')
| -rw-r--r-- | src/lib/address/components/EditAddress.jsx | 238 |
1 files changed, 201 insertions, 37 deletions
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index ba6bd25b..deaa8a3e 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -8,12 +8,20 @@ import districtApi from '../api/districtApi'; import subDistrictApi from '../api/subDistrictApi'; import addressApi from '@/lib/address/api/addressApi'; import editAddressApi from '../api/editAddressApi'; +import editPartnerApi from '../api/editPartnerApi'; 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'; import stateApi from '../api/stateApi'; +import { MapPinIcon } from 'lucide-react'; +import { Button } from '@chakra-ui/react'; +import { useMaps } from '../../maps/stores/useMaps'; + +import PinPointMap from '../../maps/components/PinPointMap'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import { data } from 'autoprefixer'; const EditAddress = ({ id, defaultValues }) => { const auth = useAuth(); @@ -35,7 +43,36 @@ const EditAddress = ({ id, defaultValues }) => { const [cities, setCities] = useState([]); const [districts, setDistricts] = useState([]); const [subDistricts, setSubDistricts] = useState([]); + const [tempAddress, setTempAddress] = useState(getValues('addressMap')); + const { addressMaps, + selectedPosition, + detailAddress, + pinedMaps, + setPinedMaps } = useMaps(); + + useEffect(() => { + if (addressMaps) { + setTempAddress(addressMaps); + setValue('addressMap', addressMaps); + setValue('longtitude', selectedPosition.lng); + setValue('latitude', selectedPosition.lat); + } + }, [addressMaps, selectedPosition, setValue]); + + useEffect(() => { + if (Object.keys(detailAddress).length > 0) { + setValue('zip', detailAddress.postalCode); + const selectedState = states.find( + (state) => + detailAddress?.province.includes(state.label) || + state.label.includes(detailAddress?.province) + ); + setValue('state', selectedState?.value); + setValue('street', detailAddress?.street); + } + }, [detailAddress, setValue]); + useEffect(() => { const loadProfile = async () => { const dataProfile = await addressApi({ id: auth.partnerId }); @@ -52,7 +89,7 @@ const EditAddress = ({ id, defaultValues }) => { }; if (auth) loadProfile(); }, [auth?.parentId]); - + useEffect(() => { const loadStates = async () => { let dataStates = await stateApi({ tempo: false }); @@ -64,11 +101,11 @@ const EditAddress = ({ id, defaultValues }) => { }; loadStates(); }, []); - + const watchState = watch('state'); useEffect(() => { + setValue('city', ''); if (watchState) { - setValue('city', ''); const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -85,16 +122,30 @@ const EditAddress = ({ id, defaultValues }) => { loadCities(); } }, [watchState, setValue, getValues]); - - const watchCity = watch('city'); + useEffect(() => { - if (watchCity) { - // setValue('district', ''); - const loadDistricts = async () => { - let dataDistricts = await districtApi({ cityId: watchCity }); - dataDistricts = dataDistricts.map((district) => ({ - value: district.id, - label: district.name, + if (Object.keys(detailAddress).length > 0) { + const selectedCities = cities.find( + (city) => + city.label.toLowerCase() === detailAddress?.district.toLowerCase() + ) || cities.find( + (city) => + detailAddress?.district.toLowerCase().includes(city.label.toLowerCase()) || + city.label.toLowerCase().includes(detailAddress?.district.toLowerCase()) + ); + setValue('city', selectedCities?.value); + } + }, [cities, detailAddress, setValue]); + + const watchCity = watch('city'); + useEffect(() => { + if (watchCity) { + // setValue('district', ''); + const loadDistricts = async () => { + let dataDistricts = await districtApi({ cityId: watchCity }); + dataDistricts = dataDistricts.map((district) => ({ + value: district.id, + label: district.name, })); setDistricts(dataDistricts); let oldDistrict = getValues('oldDistrict'); @@ -106,7 +157,24 @@ const EditAddress = ({ id, defaultValues }) => { loadDistricts(); } }, [watchCity, setValue, getValues]); - + + useEffect(() => { + if (Object.keys(detailAddress).length > 0) { + const selectedDistrict = districts.find( + (district) => + detailAddress.subDistrict + .toLowerCase() + .includes(district.label.toLowerCase()) || + district.label + .toLowerCase() + .includes(detailAddress.subDistrict.toLowerCase()) + ); + setValue('district', selectedDistrict?.value); + } + }, [districts, detailAddress, setValue]); + + + const watchDistrict = watch('district'); useEffect(() => { if (watchDistrict) { @@ -130,48 +198,126 @@ const EditAddress = ({ id, defaultValues }) => { loadSubDistricts(); } }, [watchDistrict, setValue, getValues]); + + + useEffect(() => { + if (Object.keys(detailAddress).length > 0) { + const selectedSubDistrict = subDistricts.find( + (district) => + detailAddress.village + .toLowerCase() + .includes(district.label.toLowerCase()) || + district.label + .toLowerCase() + .includes(detailAddress.village.toLowerCase()) + ); + + setValue('subDistrict', selectedSubDistrict?.value); + } + }, [subDistricts, detailAddress, setValue]); + + useEffect(() => { + if (id) { + setValue('id', id); + } + }, [id, setValue]); + const onSubmitHandler = async (values) => { const data = { ...values, phone: values.mobile, - state_id: values.state, - city_id: values.city, - district_id: values.district, - sub_district_id: values.subDistrict, + state_id: parseInt(values.state, 10), + city_id: parseInt(values.city, 10), + district_id: parseInt(values.district, 10), + sub_district_id: parseInt(values.subDistrict, 10), + longtitude: selectedPosition?.lng, + latitude: selectedPosition?.lat, + address_map: addressMaps, }; if (!auth.company) { data.alamat_lengkap_text = values.street; } - const address = await editAddressApi({ id, data }); - let dataAlamat; - let isUpdated = true; - if (auth.company) { - if (auth?.partnerId == id) { - dataAlamat = { - id_user: auth.partnerId, - alamat_lengkap_text: values.alamat_wajib_pajak, + try { + const address = await editAddressApi({ id, data }); + console.log('Response address:', address); + + let isUpdated = null; + + // Jika company dan partnerId sama dengan id, maka update data alamat wajib pajak + const isCompanyEditingSelf = auth.company && auth.partnerId == id; + + if (isCompanyEditingSelf) { + const dataProfile = await addressApi({ id: auth.partnerId }); + const dataAlamat = { + id_user: auth.id, + company_type_id: dataProfile.companyTypeId, + industry_id: dataProfile.industryId, + tax_name: values.taxName, + npwp: values.npwp, + alamat_lengkap_text: values.alamat_wajib_pajak || values.street, street: values.street, + email: values.email, + mobile: values.mobile, }; - isUpdated = await odooApi( - 'PUT', - `/api/v1/partner/${auth.parentId}`, - dataAlamat - ); + + const isUpdated = await editPartnerApi({ + id: auth.partnerId, + data: dataAlamat, + }); + + console.log('Response isUpdated:', isUpdated); } + + // Validasi kondisi sukses + const isSuccess = !!address?.id; + + if (isSuccess) { + toast.success('Berhasil mengubah alamat'); + router.back(); + } else { + const errorMsg = + address?.message || + isUpdated?.message || + 'Gagal memperbarui alamat, silakan coba lagi.'; + toast.error(errorMsg); + } + } catch (error) { + console.error('Catch error:', error); + toast.error(error?.message || 'Terjadi kesalahan tidak terduga.'); } + + const dataProfile = await addressApi({ id: auth.partnerId }); + console.log('ini adalah', dataProfile); + + // if (isUpdated?.id) { - if (address?.id && (auth.company && auth?.partnerId == id ? isUpdated?.id : true)) { - toast.success('Berhasil mengubah alamat'); - router.back(); - } else { - toast.error('Terjadi kesalahan internal'); - router.back(); - } + // if (address?.id && auth.company ? isUpdated?.id : true) { + // toast.success('Berhasil mengubah alamat'); + // router.back(); + // } else { + // toast.error('Terjadi kesalahan internal'); + // router.back(); + // } }; return ( <> + <BottomPopup + className=' !h-[75%]' + title='Pin Maps Address' + active={pinedMaps} + close={() => setPinedMaps(false)} + > + <div className='flex mt-4'> + <PinPointMap + initialLatitude={selectedPosition?.lat} + initialLongitude={selectedPosition?.lng} + initialAddress={tempAddress} + /> + + </div> + </BottomPopup> <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 /> @@ -184,6 +330,24 @@ const EditAddress = ({ id, defaultValues }) => { {auth?.partnerId == id && <div className='badge-green'>Utama</div>} </div> <form onSubmit={handleSubmit(onSubmitHandler)}> + <div className='mb-4 items-start'> + <label className='form-label mb-2'>Koordinat Alamat</label> + {tempAddress ? ( + <div className='flex gap-x-2 items-center'> + <button type='button' className="flex items-center justify-center me-3 p-2 badge-solid-red text-white rounded-full hover:bg-red-500 transition"> + <MapPinIcon class='h-6 w-6' onClick={() => setPinedMaps(true)} />{' '} + </button> + <span> {tempAddress} </span> + </div> + ) : ( + <Button variant='plain' style={{ padding: 0 }} onClick={() => setPinedMaps(true)}> + <button type='button' className="flex items-center justify-center me-3 p-2 badge-solid-red text-white rounded-full hover:bg-red-500 transition"> + <MapPinIcon className="h-6 w-6" /> + </button> + Pin Koordinat Alamat + </Button> + )} + </div> <div className='grid grid-cols-1 md:grid-cols-2 gap-4'> <div> <label className='form-label mb-2'>Label Alamat</label> |