diff options
Diffstat (limited to 'src/lib/address/components/CreateAddress.jsx')
| -rw-r--r-- | src/lib/address/components/CreateAddress.jsx | 407 |
1 files changed, 256 insertions, 151 deletions
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index 97db7ed8..963a19aa 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -1,18 +1,24 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import useAuth from '@/core/hooks/useAuth'; +import Menu from '@/lib/auth/components/Menu'; +import { yupResolver } from '@hookform/resolvers/yup'; import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; import * as Yup from 'yup'; import cityApi from '../api/cityApi'; +import createAddressApi from '../api/createAddressApi'; import districtApi from '../api/districtApi'; +import stateApi from '../api/stateApi'; import subDistrictApi from '../api/subDistrictApi'; -import { useEffect, useState } from 'react'; -import createAddressApi from '../api/createAddressApi'; -import { toast } from 'react-hot-toast'; -import { yupResolver } from '@hookform/resolvers/yup'; -import Menu from '@/lib/auth/components/Menu'; import useAddresses from '../hooks/useAddresses'; -import stateApi from '../api/stateApi'; + +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import { Button } from '@chakra-ui/react'; +import { MapPinIcon } from 'lucide-react'; +import PinPointMap from '../../maps/components/PinPointMap'; +import { useMaps } from '../../maps/stores/useMaps'; const CreateAddress = () => { const auth = useAuth(); @@ -34,6 +40,27 @@ const CreateAddress = () => { const [districts, setDistricts] = useState([]); const [subDistricts, setSubDistricts] = useState([]); const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types + const { + addressMaps, + selectedPosition, + detailAddress, + setAddressMaps, + pinedMaps, + setPinedMaps + } = useMaps(); + useEffect(() => { + if (detailAddress) { + 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 loadState = async () => { @@ -45,6 +72,7 @@ const CreateAddress = () => { setState(dataState); }; loadState(); + setAddressMaps(''); }, []); const watchState = watch('state'); @@ -64,6 +92,20 @@ const CreateAddress = () => { }, [watchState, setValue]); useEffect(() => { + if (detailAddress && 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]); + + useEffect(() => { if (addresses) { let hasContactAddress = false; @@ -97,6 +139,21 @@ const CreateAddress = () => { } }, [watchCity, setValue]); + useEffect(() => { + if (detailAddress && 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(() => { setValue('subDistrict', ''); @@ -115,6 +172,22 @@ const CreateAddress = () => { } }, [watchDistrict, setValue]); + useEffect(() => { + if (detailAddress && 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]); + const onSubmitHandler = async (values) => { const data = { ...values, @@ -123,8 +196,10 @@ const CreateAddress = () => { district_id: values.district, sub_district_id: values.subDistrict, parent_id: auth.partnerId, + latitude: selectedPosition?.lat, + longtitude: selectedPosition?.lng, + address_map: addressMaps, }; - const address = await createAddressApi({ data }); if (address?.id) { toast.success('Berhasil menambahkan alamat'); @@ -133,171 +208,201 @@ const CreateAddress = () => { }; 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'> - <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={filteredTypes} - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.type?.message} - </div> + <> + <BottomPopup + className=' !h-[75%]' + title='Pin Koordinat Address' + active={pinedMaps} + close={() => setPinedMaps(false)} + > + <div className='flex mt-4'> + <PinPointMap /> + </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 /> + </div> + <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'> + <form onSubmit={handleSubmit(onSubmitHandler)}> + <div className='mb-4 items-start'> + <label className='form-label mb-2'>Koordinat Alamat</label> + {addressMaps ? ( + <div className='flex items-center'> + <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition"> + <MapPinIcon class='h-6 w-6' onClick={() => setPinedMaps(true)} />{' '} + </button> + <span> {addressMaps} </span> + </div> + ) : ( + <Button variant='plain' style={{ padding: 0 }} onClick={() => setPinedMaps(true)}> + <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 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> + <Controller + name='type' + control={control} + render={(props) => ( + <HookFormSelect + {...props} + isSearchable={false} + options={filteredTypes} + /> + )} + /> + <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> + <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='contoh@email.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='contoh@email.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'>Provinsi</label> - <Controller - name='state' - control={control} - render={(props) => ( - <HookFormSelect {...props} options={states} /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.state?.message} + <div> + <label className='form-label mb-2'>Provinsi</label> + <Controller + name='state' + control={control} + render={(props) => ( + <HookFormSelect {...props} options={states} /> + )} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.state?.message} + </div> </div> - </div> - <div> - <label className='form-label mb-2'>Kota</label> - <Controller - name='city' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={cities} - disabled={!watchState} - /> - )} - /> - <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} + disabled={!watchState} + /> + )} + /> + <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> + </> ); }; |