diff options
Diffstat (limited to 'src/pages/my/address/create.js')
| -rw-r--r-- | src/pages/my/address/create.js | 234 |
1 files changed, 0 insertions, 234 deletions
diff --git a/src/pages/my/address/create.js b/src/pages/my/address/create.js deleted file mode 100644 index 42cd117c..00000000 --- a/src/pages/my/address/create.js +++ /dev/null @@ -1,234 +0,0 @@ -import { Controller, useForm } from "react-hook-form" -import WithAuth from "@/components/auth/WithAuth"; -import Layout from "@/components/layouts/Layout"; -import AppBar from "@/components/layouts/AppBar"; -import { yupResolver } from "@hookform/resolvers/yup"; -import * as Yup from "yup"; -import { Select } from "@/components/elements/Fields"; -import { useEffect, useState } from "react"; -import apiOdoo from "@/core/utils/apiOdoo"; -import { useAuth } from "@/core/utils/auth"; -import { toast } from "react-hot-toast"; -import { useRouter } from "next/router"; - -const validationSchema = Yup.object().shape({ - type: Yup.string().required('Harus di-pilih'), - name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'), - email: Yup.string().email('Format harus seperti johndoe@example.com').required('Harus di-isi'), - mobile: Yup.string().required('Harus di-isi'), - street: Yup.string().required('Harus di-isi'), - zip: Yup.string().required('Harus di-isi'), - city: Yup.string().required('Harus di-pilih'), -}); - -const defaultValues = { - type: '', - name: '', - email: '', - mobile: '', - street: '', - city: '', - district: '', - subDistrict: '', - zip: '', -}; - -const types = [ - { value: 'contact', label: 'Contact Address' }, - { value: 'invoice', label: 'Invoice Address' }, - { value: 'delivery', label: 'Delivery Address' }, - { value: 'other', label: 'Other Address' }, -]; - -export default function CreateAddress() { - const [ auth ] = useAuth(); - const router = useRouter(); - const { - register, - formState: { errors }, - handleSubmit, - watch, - setValue, - control, - } = useForm({ - resolver: yupResolver(validationSchema), - defaultValues - }); - - const [ cities, setCities ] = useState([]); - const [ districts, setDistricts ] = useState([]); - const [ subDistricts, setSubDistricts ] = useState([]); - - useEffect(() => { - const loadCities = async () => { - let dataCities = await apiOdoo('GET', '/api/v1/city'); - dataCities = dataCities.map((city) => ({ value: city.id, label: city.name })); - setCities(dataCities); - }; - loadCities(); - }, []); - - const watchCity = watch('city'); - useEffect(() => { - setValue('district', ''); - if (watchCity) { - const loadDistricts = async () => { - let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${watchCity}`); - dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name })); - setDistricts(dataDistricts); - }; - loadDistricts(); - } - }, [ watchCity, setValue ]); - - const watchDistrict = watch('district'); - useEffect(() => { - setValue('subDistrict', ''); - if (watchDistrict) { - const loadSubDistricts = async () => { - let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${watchDistrict}`); - dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name })); - setSubDistricts(dataSubDistricts); - }; - loadSubDistricts(); - } - }, [ watchDistrict, setValue ]) - - const onSubmitHandler = async (values) => { - const parameters = { - ...values, - city_id: values.city, - district_id: values.district, - sub_district_id: values.subDistrict, - parent_id: auth.partner_id - }; - - const address = await apiOdoo('POST', '/api/v1/partner/address', parameters); - if (address?.id) { - toast.success('Berhasil menambahkan alamat'); - router.back(); - } - }; - - return ( - <WithAuth> - <Layout> - <AppBar title="Tambah Alamat" /> - - <form className="p-4 flex flex-col gap-y-4" onSubmit={handleSubmit(onSubmitHandler)}> - <div> - <label className="form-label mb-2">Label Alamat</label> - <Controller - name="type" - control={control} - render={props => <Select {...props} isSearchable={false} options={types} />} - /> - <div className="text-caption-2 text-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 mt-1">{ errors.zip?.message }</div> - </div> - - <div> - <label className="form-label mb-2">Kota</label> - <Controller - name="city" - control={control} - render={props => <Select {...props} options={cities} />} - /> - <div className="text-caption-2 text-red_r-11 mt-1">{ errors.city?.message }</div> - </div> - - <div> - <label className="form-label mb-2">Kecamatan</label> - <Controller - name="district" - control={control} - render={props => ( - <Select - {...props} - options={districts} - disabled={!watchCity} - /> - )} - /> - </div> - - <div> - <label className="form-label mb-2">Kelurahan</label> - <Controller - name="subDistrict" - control={control} - render={props => ( - <Select - {...props} - options={subDistricts} - disabled={!watchDistrict} - /> - )} - /> - </div> - - <button - type="submit" - className="btn-yellow mt-2 w-full" - > - Simpan - </button> - </form> - </Layout> - </WithAuth> - ) -}
\ No newline at end of file |