form validation, fix cart, fix checkout, create address

1 files changed, 129 insertions, 49 deletions

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 (
     <WithAuth>
       <Layout>
         <AppBar title="Tambah Alamat" />
 
-        <form className="px-4">
+        <form className="px-4 pb-4" onSubmit={(e) => handleFormSubmit(e, onSubmit)}>
           <label className="form-label mt-4 mb-2">Label Alamat</label>
-          <input 
-            type="text"
-            className="form-input" 
-            placeholder="Invoice Address"
-            name="name"
+          <ReactSelect
+            placeholder="Pilih label alamat..."
+            classNamePrefix="form-select"
+            options={addressTypes}
+            name="type"
+            onChange={(value) => handleSelectChange('type', value)}
+            value={formInputs?.type}
           />
+          <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.type}</div>
+
           <label className="form-label mt-4 mb-2">Nama Kontak</label>
           <input 
             type="text"
-            className="form-input" 
+            className='form-input' 
             placeholder="John Doe"
             name="name"
+            onChange={handleInputChange}
+            value={formInputs.name}
+            aria-invalid={formErrors?.name}
           />
-          <label className="form-label mt-4 mb-2">Email <span className="text-gray_r-11">(opsional)</span></label>
+          <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.name}</div>
+          
+          <label className="form-label mt-4 mb-2">Email</label>
           <input 
             type="text"
-            className="form-input" 
+            className='form-input'  
             placeholder="johndoe@gmail.com"
-            name="name"
+            name="email"
+            value={formInputs.email}
+            onChange={handleInputChange}
+            aria-invalid={formErrors?.email}
           />
+          <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.email}</div>
+
           <label className="form-label mt-4 mb-2">No. Handphone</label>
           <input 
             type="tel"
-            className="form-input" 
+            className='form-input'  
             placeholder="08xxxxxxxx"
             name="mobile"
+            value={formInputs.mobile}
+            onChange={handleInputChange}
+            aria-invalid={formErrors?.mobile}
           />
+          <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.mobile}</div>
+
           <label className="form-label mt-4 mb-2">Alamat</label>
           <input 
             type="text"
-            className="form-input" 
+            className='form-input'  
             placeholder="Jl. Bandengan Utara"
             name="street"
+            value={formInputs.street}
+            onChange={handleInputChange}
+            aria-invalid={formErrors?.street}
           />
+          <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.street}</div>
+
           <label className="form-label mt-4 mb-2">Kota</label>
           <ReactSelect
             placeholder="Pilih kota..."
             classNamePrefix="form-select"
             classNames={{ control: (state) => 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)}
           />
+          <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.city}</div>
+
           <label className="form-label mt-4 mb-2">Kecamatan <span className="text-gray_r-11">(opsional)</span></label>
           <ReactSelect
             placeholder="Pilih Kecamatan..."
             classNamePrefix="form-select"
             classNames={{ control: (state) => 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}
           />
+
           <label className="form-label mt-4 mb-2">Kelurahan <span className="text-gray_r-11">(opsional)</span></label>
           <ReactSelect
             placeholder="Pilih Kelurahan..."
             classNamePrefix="form-select"
             classNames={{ control: (state) => 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}
           />
+
           <label className="form-label mt-4 mb-2">Kode Pos</label>
           <input 
             type="number"
-            className="form-input" 
+            className='form-input'
             placeholder="10100"
             name="zip"
+            value={formInputs.zip}
+            onChange={handleInputChange}
+            aria-invalid={formErrors?.zip}
           />
+          <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.zip}</div>
 
           <button 
-            type="button" 
-            className="btn-yellow float-right mt-6 w-full"
+            type="submit" 
+            className="btn-yellow mt-6 w-full"
           >
             Simpan
           </button>