From 9aeb019257787b355f7b51f401d7f417899252f5 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 12 Jan 2023 17:12:31 +0700 Subject: form validation, fix cart, fix checkout, create address --- src/pages/my/address/create.js | 178 +++++++++++++++++++++++++++++------------ 1 file changed, 129 insertions(+), 49 deletions(-) (limited to 'src/pages/my/address') diff --git a/src/pages/my/address/create.js b/src/pages/my/address/create.js index 128da491..d68d1f76 100644 --- a/src/pages/my/address/create.js +++ b/src/pages/my/address/create.js @@ -4,23 +4,57 @@ import WithAuth from "../../../components/WithAuth"; import apiOdoo from "../../../helpers/apiOdoo"; import ReactSelect from "react-select"; import { useEffect, useState } from "react"; +import { useAuth } from "../../../helpers/auth"; +import useFormValidation from "../../../helpers/formValidation"; +import { toast } from "react-hot-toast"; +import { useRouter } from "next/router"; + +const initialFormValue = { + type: null, + name: '', + email: '', + mobile: '', + street: '', + city: null, + district: null, + subDistrict: null, + zip: '' +} + +const validationScheme = { + type: ['label:Label Alamat', 'required'], + name: ['label:Nama', 'required'], + email: ['label:Email', 'required', 'email'], + mobile: ['label:No. Handphone', 'required', 'maxLength:16'], + street: ['label:Alamat', 'required'], + city: ['label:Kota', 'required'], + zip: ['label:Kode Pos', 'required'] +}; export default function CreateAddress() { + const [auth] = useAuth(); + const router = useRouter(); + // Master Data const [cities, setCities] = useState([]); const [districts, setDistricts] = useState([]); const [subDistricts, setSubDistricts] = useState([]); // Input Data - const [city, setCity] = useState(null); - const [district, setDistrict] = useState(null); - const [subDistrict, setSubDistrict] = useState(null); - const [formValue, setFormValue] = useState({}); + const { + formInputs, + formErrors, + handleInputChange, + handleSelectChange, + handleFormSubmit, + handleFormReset + } = useFormValidation({ validationScheme, initialFormValue }); useEffect(() => { if (cities.length == 0) { const loadCities = async () => { let dataCities = await apiOdoo('GET', '/api/v1/city'); + dataCities = dataCities.map((city) => ({ value: city.id, label: city.name })); setCities(dataCities); }; loadCities(); @@ -28,122 +62,168 @@ export default function CreateAddress() { }, [cities]); useEffect(() => { - setDistrict(null); - if (city) { + handleSelectChange('district', null); + if (formInputs.city) { const loadDistricts = async () => { - let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${city.id}`); + let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${formInputs.city.value}`); + dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name })); setDistricts(dataDistricts); }; loadDistricts(); } - }, [city]); + }, [ formInputs.city, handleSelectChange ]); useEffect(() => { - setSubDistrict(null); - if (district) { + handleSelectChange('subDistrict', null); + if (formInputs.district) { const loadSubDistricts = async () => { - let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${district.id}`); - console.log(dataSubDistricts); + let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${formInputs.district.value}`); + dataSubDistricts = dataSubDistricts.map((subDistrict) => ({ value: subDistrict.id, label: subDistrict.name })); setSubDistricts(dataSubDistricts); }; loadSubDistricts(); } - }, [district]); - - const handleChange = (e) => { - setFormValue({ - ...formValue, - [e.target.name]: e.target.value - }); - }; + }, [ formInputs.district, handleSelectChange ]); + + const addressTypes = [ + { value: 'contact', label: 'Contact Address' }, + { value: 'invoice', label: 'Invoice Address' }, + { value: 'delivery', label: 'Delivery Address' }, + { value: 'other', label: 'Other Address' }, + ]; + + const onSubmit = async () => { + const parameters = { + ...formInputs, + city_id: formInputs.city?.value, + district_id: formInputs.district?.value, + sub_district_id: formInputs.subDistrict?.value, + type: formInputs.type?.value, + user_id: auth.id, + partner_id: auth.partner_id, + }; + + const address = await apiOdoo('POST', '/api/v1/partner', parameters); + if (address?.id) { + handleFormReset(); + toast.success('Berhasil menambahkan alamat'); + router.push('/my/address'); + } + } return ( -
+ handleFormSubmit(e, onSubmit)}> - handleSelectChange('type', value)} + value={formInputs?.type} /> +
{formErrors?.type}
+ - +
{formErrors?.name}
+ + +
{formErrors?.email}
+ +
{formErrors?.mobile}
+ +
{formErrors?.street}
+ state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }} options={cities} - getOptionLabel={e => e.name} - getOptionValue={e => e.id} - onChange={(value) => setCity(value)} - value={city} + value={formInputs.city} + onChange={(value) => handleSelectChange('city', value)} /> +
{formErrors?.city}
+ state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }} options={districts} - getOptionLabel={e => e.name} - getOptionValue={e => e.id} - onChange={(value) => setDistrict(value)} - value={district} - isDisabled={!city} + value={formInputs.district} + onChange={(value) => handleSelectChange('district', value)} + isDisabled={!formInputs.city} /> + state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }} options={subDistricts} - getOptionLabel={e => e.name} - getOptionValue={e => e.id} - onChange={(value) => setSubDistrict(value)} - value={subDistrict} - isDisabled={!district} + onChange={(value) => handleSelectChange('subDistrict', value)} + value={formInputs.subDistrict} + isDisabled={!formInputs.district} /> + +
{formErrors?.zip}
-- cgit v1.2.3