From 689ee880bde0fae548e55316789e8bae852fe7d7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 11:40:32 +0700 Subject: update mobile view --- .../modules/register/components/FormBisnis.tsx | 79 ++++++++++++++-------- 1 file changed, 52 insertions(+), 27 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 2080ae75..bc3e1405 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -292,7 +292,14 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { /> -
+
-
+
-
-
+
+
= ({ type, required, isPKP, chekValid }) => { )}
-
+
= ({ type, required, isPKP, chekValid }) => {
-
+
- ( - - )} - /> +
+ ( + + )} + /> +
{selectedCategory && ( Kategori : {selectedCategory} @@ -404,7 +415,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { name='alamat_bisnis' placeholder='Masukan alamat bisnis anda' value={!required ? form.alamat_bisnis : ''} - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input mt-3 max-h-11 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -431,7 +444,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { name='nama_wajib_pajak' placeholder='Masukan nama lengkap anda' value={!required ? form.nama_wajib_pajak : ''} - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input mt-3 max-h-11 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -483,7 +498,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { : form.alamat_wajib_pajak : '' } - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={isChekBox || required} contentEditable={required} readOnly={required} @@ -510,7 +527,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='tel' id='npwp' name='npwp' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -567,7 +586,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='tel' id='sppkp' name='sppkp' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -594,7 +615,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='file' id='npwp_document' name='npwp_document' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} readOnly={required} @@ -619,7 +642,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='file' id='sppkp_document' name='sppkp_document' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} readOnly={required} -- cgit v1.2.3 From 62ad06bf66519e0491355edd4171cff71992500d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 11:54:44 +0700 Subject: update mobile view --- src-migrate/modules/register/components/FormBisnis.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index bc3e1405..6631cb3b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -296,7 +296,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { className={` ${ type === 'bisnis' ? 'mt-6 grid grid-cols-1 gap-y-4' - : 'mt-6 grid grid-rows-5 grid-flow-col gap-x-4 gap-y-2' + : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2' }`} onSubmit={handleSubmit} > @@ -380,7 +380,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { -
+
Date: Thu, 12 Sep 2024 15:12:42 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 66 +++++++- src/lib/auth/components/CompanyProfile.jsx | 179 +++++++++++++-------- tsconfig.json | 18 +-- 3 files changed, 183 insertions(+), 80 deletions(-) diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 6631cb3b..dd9cd72f 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useEffect, useMemo, useState } from 'react'; +import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'; import { useMutation } from 'react-query'; import { useRegisterStore } from '../stores/useRegisterStore'; import { RegisterProps } from '~/types/auth'; @@ -56,6 +56,16 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { const router = useRouter(); const toast = useToast(); + const emailRef = useRef(null); + const businessNameRef = useRef(null); + const comppanyTypeRef = useRef(null); + const industryRef = useRef(null); + const addressRef = useRef(null); + const namaWajibPajakRef = useRef(null); + const alamatWajibPajakRef = useRef(null); + const npwpRef = useRef(null); + const sppkpRef = useRef(null); + useEffect(() => { const loadCompanyTypes = async () => { const dataCompanyTypes = await odooApi( @@ -227,6 +237,49 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { mutationFn: (data: RegisterProps) => registerUser(data), }); + useEffect(() => { + const loadIndustries = async () => { + const response = await mutation.mutateAsync(form); + if (!response?.register) { + // Logic to focus on first invalid input + if (errors.email_partner && emailRef.current) { + emailRef.current.focus(); + return; + } + if (errors.company_type_id && businessNameRef.current) { + businessNameRef.current.focus(); + return; + } + + if (errors.business_name && businessNameRef.current) { + businessNameRef.current.focus(); + return; + } + + if (errors.industry_id && industryRef.current) { + industryRef.current.scrollIntoView(); + return; + } + + if (errors.alamat_bisnis && addressRef.current) { + addressRef.current.focus(); + return; + } + + if (errors.npwp && npwpRef.current) { + npwpRef.current.focus(); + return; + } + + if (errors.sppkp && sppkpRef.current) { + sppkpRef.current.focus(); + return; + } + } + }; + loadIndustries(); + }, [chekValid, form, errors]); + const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -322,6 +375,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { readOnly={required} onChange={handleInputChange} autoComplete='username' + ref={emailRef} aria-invalid={ chekValid && !required && isPKP && !!errors.email_partner } @@ -337,7 +391,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { Nama Bisnis
-
+
= ({ type, required, isPKP, chekValid }) => { placeholder='Nama Perusahaan' autoCapitalize='true' value={form.business_name} + ref={businessNameRef} aria-invalid={chekValid && !!errors.business_name} onChange={handleInputChange} /> @@ -380,7 +435,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { -
+
= ({ type, required, isPKP, chekValid }) => { disabled={required} contentEditable={required} readOnly={required} + ref={addressRef} onChange={handleInputChange} aria-invalid={chekValid && !required && !!errors.alamat_bisnis} /> @@ -451,6 +507,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { contentEditable={required} readOnly={required} onChange={handleInputChange} + ref={namaWajibPajakRef} aria-invalid={ chekValid && isPKP && !required && !!errors.nama_wajib_pajak } @@ -505,6 +562,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { contentEditable={required} readOnly={required} onChange={handleInputChange} + ref={alamatWajibPajakRef} aria-invalid={ chekValid && isPKP && !required && !!errors.alamat_wajib_pajak } @@ -533,6 +591,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { disabled={required} contentEditable={required} readOnly={required} + ref={npwpRef} placeholder='000.000.000.0-000.000' value={!required ? formattedNpwp : ''} maxLength={21} // Set maximum length to 16 characters @@ -592,6 +651,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { disabled={required} contentEditable={required} readOnly={required} + ref={sppkpRef} placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX' onChange={handleInputChange} value={!required ? form.sppkp : ''} diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index e37decc9..fc3d149b 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -1,18 +1,18 @@ -import odooApi from '@/core/api/odooApi' -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import useAuth from '@/core/hooks/useAuth' -import addressApi from '@/lib/address/api/addressApi' -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { Controller, useForm } from 'react-hook-form' -import { toast } from 'react-hot-toast' -import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import odooApi from '@/core/api/odooApi'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import useAuth from '@/core/hooks/useAuth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { Controller, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; const CompanyProfile = () => { - const [changeConfirmation, setChangeConfirmation] = useState(false) - const auth = useAuth() - const [isOpen, setIsOpen] = useState(false) - const toggle = () => setIsOpen(!isOpen) + const [changeConfirmation, setChangeConfirmation] = useState(false); + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(false); + const toggle = () => setIsOpen(!isOpen); const { register, setValue, control, handleSubmit } = useForm({ defaultValues: { industry: '', @@ -20,64 +20,78 @@ const CompanyProfile = () => { name: '', taxName: '', npwp: '', - alamat_wajib_pajak:'', - } - }) + alamat_wajib_pajak: '', + }, + }); - const [industries, setIndustries] = useState([]) + const [industries, setIndustries] = useState([]); useEffect(() => { const loadIndustries = async () => { - const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') - setIndustries(dataIndustries?.map((o) => ({ value: o.id, label: o.name }))) - } - loadIndustries() - }, []) + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries( + dataIndustries?.map((o) => ({ value: o.id, label: o.name })) + ); + }; + loadIndustries(); + }, []); - const [companyTypes, setCompanyTypes] = useState([]) + const [companyTypes, setCompanyTypes] = useState([]); useEffect(() => { const loadCompanyTypes = async () => { - const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') - setCompanyTypes(dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name }))) - } - loadCompanyTypes() - }, []) + const dataCompanyTypes = await odooApi( + 'GET', + '/api/v1/partner/company_type' + ); + setCompanyTypes( + dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name })) + ); + }; + loadCompanyTypes(); + }, []); useEffect(() => { const loadProfile = async () => { - const dataProfile = await addressApi({ id: auth.parentId }) - setValue('name', dataProfile.name) - setValue('industry', dataProfile.industryId) - setValue('companyType', dataProfile.companyTypeId) - setValue('taxName', dataProfile.taxName) - setValue('npwp', dataProfile.npwp) - setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak) - } - if (auth) loadProfile() - }, [auth, setValue]) + const dataProfile = await addressApi({ id: auth.parentId }); + console.log('dataProfile', dataProfile); + setValue('name', dataProfile.name); + setValue('industry', dataProfile.industryId); + setValue('companyType', dataProfile.companyTypeId); + setValue('taxName', dataProfile.taxName); + setValue('npwp', dataProfile.npwp); + setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); + setValue('alamat_bisnis', dataProfile.alamatBisnis); + }; + if (auth) loadProfile(); + }, [auth, setValue]); const onSubmitHandler = async (values) => { - if(changeConfirmation){ + if (changeConfirmation) { const data = { ...values, - id_user:auth.partnerId, + id_user: auth.partnerId, company_type_id: values.companyType, industry_id: values.industry, tax_name: values.taxName, - alamat_lengkap_text:values.alamat_wajib_pajak - } - const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data) + alamat_lengkap_text: values.alamat_wajib_pajak, + street: values.alamat_bisnis, + }; + const isUpdated = await odooApi( + 'PUT', + `/api/v1/partner/${auth.parentId}`, + data + ); if (isUpdated?.id) { - toast.success('Berhasil mengubah profil', { duration: 1500 }) - return + toast.success('Berhasil mengubah profil', { duration: 1500 }); + return; } - toast.error('Terjadi kesalahan internal') + toast.error('Terjadi kesalahan internal'); } - } + }; const handleConfirmSubmit = () => { - setChangeConfirmation(false) - handleSubmit(onSubmitHandler)() - } + setChangeConfirmation(false); + handleSubmit(onSubmitHandler)(); + }; return ( <> @@ -106,11 +120,16 @@ const CompanyProfile = () => {
- {isOpen && ( - { - e.preventDefault() - setChangeConfirmation(true) - }}> + { + e.preventDefault(); + setChangeConfirmation(true); + }} + >
} + render={(props) => ( + + )} />
@@ -139,7 +163,9 @@ const CompanyProfile = () => { } + render={(props) => ( + + )} />
@@ -153,14 +179,35 @@ const CompanyProfile = () => {
- +
- - -
- + +
+
+ + +
+
+ +
)} @@ -177,6 +182,7 @@ const RegistrasiBisnis: React.FC = ({ chekValid }) => { required={isTerdaftar} isPKP={isPKP} chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} />
)} diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx index 3997e767..84049065 100644 --- a/src-migrate/modules/register/components/RegistrasiIndividu.tsx +++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx @@ -3,8 +3,12 @@ import { useRegisterStore } from '../stores/useRegisterStore'; import { useEffect } from 'react'; interface FormProps { chekValid: boolean; + buttonSubmitClick: boolean; } -const RegistrasiIndividu: React.FC = ({ chekValid }) => { +const RegistrasiIndividu: React.FC = ({ + chekValid, + buttonSubmitClick, +}) => { const { form, errors, updateForm, validate } = useRegisterStore(); useEffect(() => { @@ -21,6 +25,7 @@ const RegistrasiIndividu: React.FC = ({ chekValid }) => { required={false} isBisnisRegist={false} chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} /> ); diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index d91af9e3..08d7f893 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -22,6 +22,7 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); const [notValid, setNotValid] = useState(false); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const [isBisnisClicked, setIsBisnisClicked] = useState(false); const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } = useRegisterStore(); @@ -49,8 +50,10 @@ const Register = () => { const handleSubmit = async () => { if (!isFormValid) { setNotValid(true); + setButtonSubmitClick(!buttonSubmitClick); return; } else { + setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } const response = await mutation.mutateAsync(form); @@ -142,12 +145,18 @@ const Register = () => {
{isIndividuClicked && (
- +
)} {isBisnisClicked && (
- +
)}
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index fc3d149b..70713bdf 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -52,7 +52,6 @@ const CompanyProfile = () => { useEffect(() => { const loadProfile = async () => { const dataProfile = await addressApi({ id: auth.parentId }); - console.log('dataProfile', dataProfile); setValue('name', dataProfile.name); setValue('industry', dataProfile.industryId); setValue('companyType', dataProfile.companyTypeId); -- cgit v1.2.3 From aa44cff228f73d2546466abb6344f249881f94be Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Sep 2024 13:53:52 +0700 Subject: { - const router = useRouter() + console.log('defaultValues', defaultValues); + const router = useRouter(); const { register, formState: { errors }, @@ -20,87 +21,90 @@ const EditAddress = ({ id, defaultValues }) => { watch, setValue, getValues, - control + control, } = useForm({ resolver: yupResolver(validationSchema), - defaultValues - }) + defaultValues, + }); - const [cities, setCities] = useState([]) - const [districts, setDistricts] = useState([]) - const [subDistricts, setSubDistricts] = useState([]) + const [cities, setCities] = useState([]); + const [districts, setDistricts] = useState([]); + const [subDistricts, setSubDistricts] = useState([]); useEffect(() => { const loadCities = async () => { - let dataCities = await cityApi() + let dataCities = await cityApi(); dataCities = dataCities.map((city) => ({ value: city.id, - label: city.name - })) - setCities(dataCities) - } - loadCities() - }, []) + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + }, []); - const watchCity = watch('city') + const watchCity = watch('city'); useEffect(() => { - setValue('district', '') + setValue('district', ''); if (watchCity) { const loadDistricts = async () => { - let dataDistricts = await districtApi({ cityId: watchCity }) + let dataDistricts = await districtApi({ cityId: watchCity }); dataDistricts = dataDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setDistricts(dataDistricts) - let oldDistrict = getValues('oldDistrict') + label: district.name, + })); + setDistricts(dataDistricts); + let oldDistrict = getValues('oldDistrict'); if (oldDistrict) { - setValue('district', oldDistrict) - setValue('oldDistrict', '') + setValue('district', oldDistrict); + setValue('oldDistrict', ''); } - } - loadDistricts() + }; + loadDistricts(); } - }, [watchCity, setValue, getValues]) + }, [watchCity, setValue, getValues]); - const watchDistrict = watch('district') + const watchDistrict = watch('district'); useEffect(() => { - setValue('subDistrict', '') + setValue('subDistrict', ''); if (watchDistrict) { const loadSubDistricts = async () => { let dataSubDistricts = await subDistrictApi({ - districtId: watchDistrict - }) + districtId: watchDistrict, + }); dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setSubDistricts(dataSubDistricts) - let oldSubDistrict = getValues('oldSubDistrict') + label: district.name, + })); + setSubDistricts(dataSubDistricts); + let oldSubDistrict = getValues('oldSubDistrict'); if (oldSubDistrict) { - setValue('subDistrict', oldSubDistrict) - setValue('oldSubDistrict', '') + setValue('subDistrict', oldSubDistrict); + setValue('oldSubDistrict', ''); } - } - loadSubDistricts() + }; + loadSubDistricts(); } - }, [watchDistrict, setValue, getValues]) + }, [watchDistrict, setValue, getValues]); const onSubmitHandler = async (values) => { const data = { ...values, + phone: values.mobile, + street: values.street, city_id: values.city, district_id: values.district, - sub_district_id: values.subDistrict - } + sub_district_id: values.subDistrict, + }; + console.log('data', data); - const address = await editAddressApi({ id, data }) + const address = await editAddressApi({ id, data }); if (address?.id) { - toast.success('Berhasil mengubah alamat') - router.back() + toast.success('Berhasil mengubah alamat'); + router.back(); } - } + }; return (
@@ -108,7 +112,9 @@ const EditAddress = ({ id, defaultValues }) => {
-

Ubah Alamat

+

+ Ubah Alamat +

@@ -117,10 +123,16 @@ const EditAddress = ({ id, defaultValues }) => { name='type' control={control} render={(props) => ( - + )} /> -
{errors.type?.message}
+
+ {errors.type?.message} +
@@ -131,7 +143,9 @@ const EditAddress = ({ id, defaultValues }) => { type='text' className='form-input' /> -
{errors.name?.message}
+
+ {errors.name?.message} +
@@ -142,7 +156,9 @@ const EditAddress = ({ id, defaultValues }) => { type='email' className='form-input' /> -
{errors.email?.message}
+
+ {errors.email?.message} +
@@ -153,7 +169,9 @@ const EditAddress = ({ id, defaultValues }) => { type='tel' className='form-input' /> -
{errors.mobile?.message}
+
+ {errors.mobile?.message} +
@@ -164,7 +182,9 @@ const EditAddress = ({ id, defaultValues }) => { type='text' className='form-input' /> -
{errors.street?.message}
+
+ {errors.street?.message} +
@@ -175,7 +195,9 @@ const EditAddress = ({ id, defaultValues }) => { type='number' className='form-input' /> -
{errors.zip?.message}
+
+ {errors.zip?.message} +
@@ -183,9 +205,13 @@ const EditAddress = ({ id, defaultValues }) => { } + render={(props) => ( + + )} /> -
{errors.city?.message}
+
+ {errors.city?.message} +
@@ -194,10 +220,16 @@ const EditAddress = ({ id, defaultValues }) => { name='district' control={control} render={(props) => ( - + )} /> -
{errors.district?.message}
+
+ {errors.district?.message} +
@@ -206,19 +238,26 @@ const EditAddress = ({ id, defaultValues }) => { name='subDistrict' control={control} render={(props) => ( - + )} />
-
- ) -} + ); +}; const validationSchema = Yup.object().shape({ type: Yup.string().required('Harus di-pilih'), @@ -228,14 +267,14 @@ const validationSchema = Yup.object().shape({ street: Yup.string().required('Harus di-isi'), zip: Yup.string().required('Harus di-isi'), city: Yup.string().required('Harus di-pilih'), - district: Yup.string().required('Harus di-pilih') -}) + district: Yup.string().required('Harus di-pilih'), +}); const types = [ { value: 'contact', label: 'Contact Address' }, { value: 'invoice', label: 'Invoice Address' }, { value: 'delivery', label: 'Delivery Address' }, - { value: 'other', label: 'Other Address' } -] + { value: 'other', label: 'Other Address' }, +]; -export default EditAddress +export default EditAddress; diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index 70713bdf..f1577ca1 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -21,9 +21,10 @@ const CompanyProfile = () => { taxName: '', npwp: '', alamat_wajib_pajak: '', + alamat_bisnis: '', }, }); - + console.log('auth', auth); const [industries, setIndustries] = useState([]); useEffect(() => { const loadIndustries = async () => { @@ -74,6 +75,7 @@ const CompanyProfile = () => { alamat_lengkap_text: values.alamat_wajib_pajak, street: values.alamat_bisnis, }; + console.log('data', data); const isUpdated = await odooApi( 'PUT', `/api/v1/partner/${auth.parentId}`, diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx index bd680b90..732ec9fc 100644 --- a/src/pages/my/address/[id]/edit.jsx +++ b/src/pages/my/address/[id]/edit.jsx @@ -1,11 +1,11 @@ -import Seo from '@/core/components/Seo' -import AppLayout from '@/core/components/layouts/AppLayout' -import BasicLayout from '@/core/components/layouts/BasicLayout' -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import addressApi from '@/lib/address/api/addressApi' -import EditAddressComponent from '@/lib/address/components/EditAddress' -import IsAuth from '@/lib/auth/components/IsAuth' +import Seo from '@/core/components/Seo'; +import AppLayout from '@/core/components/layouts/AppLayout'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import addressApi from '@/lib/address/api/addressApi'; +import EditAddressComponent from '@/lib/address/components/EditAddress'; +import IsAuth from '@/lib/auth/components/IsAuth'; export default function EditAddress({ id, defaultValues }) { return ( @@ -24,12 +24,12 @@ export default function EditAddress({ id, defaultValues }) { - ) + ); } export async function getServerSideProps(context) { - const { id } = context.query - const address = await addressApi({ id }) + const { id } = context.query; + const address = await addressApi({ id }); const defaultValues = { type: address.type, name: address.name, @@ -41,7 +41,7 @@ export async function getServerSideProps(context) { oldDistrict: address.district?.id || '', district: '', oldSubDistrict: address.subDistrict?.id || '', - subDistrict: '' - } - return { props: { id, defaultValues } } + subDistrict: '', + }; + return { props: { id, defaultValues } }; } -- cgit v1.2.3 From 7d5f7d239231cdfc439a57930e315586b206a0e5 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Sep 2024 15:53:06 +0700 Subject: update new register --- src/lib/address/components/Addresses.jsx | 135 +++++++++---- src/lib/address/components/EditAddress.jsx | 311 ++++++++++++++++------------- src/lib/auth/components/CompanyProfile.jsx | 2 - 3 files changed, 275 insertions(+), 173 deletions(-) diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx index a610d371..a8879607 100644 --- a/src/lib/address/components/Addresses.jsx +++ b/src/lib/address/components/Addresses.jsx @@ -1,34 +1,72 @@ -import Link from '@/core/components/elements/Link/Link' -import Spinner from '@/core/components/elements/Spinner/Spinner' -import useAuth from '@/core/hooks/useAuth' -import { getItemAddress, updateItemAddress } from '@/core/utils/address' -import { useRouter } from 'next/router' -import useAddresses from '../hooks/useAddresses' -import MobileView from '@/core/components/views/MobileView' -import DesktopView from '@/core/components/views/DesktopView' -import Menu from '@/lib/auth/components/Menu' +import { useState } from 'react'; +import Link from '@/core/components/elements/Link/Link'; +import Spinner from '@/core/components/elements/Spinner/Spinner'; +import useAuth from '@/core/hooks/useAuth'; +import { getItemAddress, updateItemAddress } from '@/core/utils/address'; +import { useRouter } from 'next/router'; +import useAddresses from '../hooks/useAddresses'; +import MobileView from '@/core/components/views/MobileView'; +import DesktopView from '@/core/components/views/DesktopView'; +import Menu from '@/lib/auth/components/Menu'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; const Addresses = () => { - const router = useRouter() - const { select = null } = router.query - const { addresses } = useAddresses() - const selectedAddress = getItemAddress(select || '') + const router = useRouter(); + const { select = null } = router.query; + const { addresses } = useAddresses(); + const selectedAddress = getItemAddress(select || ''); + const [changeConfirmation, setChangeConfirmation] = useState(false); + const [selectedForChange, setSelectedForChange] = useState(null); // State baru untuk simpan alamat yang akan diubah + const changeSelectedAddress = (id) => { - if (!select) return - updateItemAddress(select, id) - router.back() - } + if (!select) return; + updateItemAddress(select, id); + router.back(); + }; + + const handleConfirmSubmit = () => { + setChangeConfirmation(false); + if (selectedForChange) { + router.push(`/my/address/${selectedForChange}/edit`); + } + }; if (addresses.isLoading) { return (
- ) + ); } return ( <> + setChangeConfirmation(false)} // Menutup popup + title='Ubah alamat Bisnis' + > +
+ Anda akan mengubah alamat utama bisnis? +
+
+ + +
+ +
@@ -37,7 +75,10 @@ const Addresses = () => {
{addresses.data?.map((address, index) => { - const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' + const type = + address.type.charAt(0).toUpperCase() + + address.type.slice(1) + + ' Address'; return ( { type={type} changeSelectedAddress={changeSelectedAddress} selectedAddress={selectedAddress} + setChangeConfirmation={setChangeConfirmation} // Memanggil popup + setSelectedForChange={setSelectedForChange} // Simpan id address yang akan diubah select={select} /> - ) + ); })}
@@ -72,7 +115,9 @@ const Addresses = () => {
{addresses.data?.map((address, index) => { const type = - address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' + address.type.charAt(0).toUpperCase() + + address.type.slice(1) + + ' Address'; return ( { type={type} changeSelectedAddress={changeSelectedAddress} selectedAddress={selectedAddress} + setChangeConfirmation={setChangeConfirmation} + setSelectedForChange={setSelectedForChange} select={select} /> - ) + ); })}
- ) -} + ); +}; -const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => { - const auth = useAuth() +const AddressCard = ({ + address, + selectedAddress, + changeSelectedAddress, + type, + select, + setChangeConfirmation, + setSelectedForChange, +}) => { + const auth = useAuth(); return (
-
changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}> +
changeSelectedAddress(address.id)} + className={select && 'cursor-pointer'} + >
{type}
- {auth?.partnerId == address.id &&
Utama
} + {auth?.partnerId == address.id && ( +
Utama
+ )}

{address.name}

- {address.mobile &&

{address.mobile}

} + {address.mobile && ( +

{address.mobile}

+ )}

{address.street}

- { + setSelectedForChange(address.id); // Set alamat yang dipilih + setChangeConfirmation(true); // Tampilkan popup konfirmasi + }} className='btn-light bg-white mt-3 w-full !text-gray_r-11' > Ubah Alamat - +
- ) -} + ); +}; -export default Addresses +export default Addresses; diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index 7a30a3d8..626709db 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -6,13 +6,16 @@ import cityApi from '../api/cityApi'; import { Controller, useForm } from 'react-hook-form'; import districtApi from '../api/districtApi'; import subDistrictApi from '../api/subDistrictApi'; +import addressApi from '@/lib/address/api/addressApi'; import editAddressApi from '../api/editAddressApi'; 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'; const EditAddress = ({ id, defaultValues }) => { - console.log('defaultValues', defaultValues); + const auth = useAuth(); const router = useRouter(); const { register, @@ -31,6 +34,20 @@ const EditAddress = ({ id, defaultValues }) => { const [districts, setDistricts] = useState([]); const [subDistricts, setSubDistricts] = useState([]); + useEffect(() => { + const loadProfile = async () => { + const dataProfile = await addressApi({ id: auth.parentId }); + setValue('name', dataProfile.name); + setValue('industry', dataProfile.industryId); + setValue('companyType', dataProfile.companyTypeId); + setValue('taxName', dataProfile.taxName); + setValue('npwp', dataProfile.npwp); + setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); + setValue('alamat_bisnis', dataProfile.alamatBisnis); + }; + if (auth) loadProfile(); + }, [auth, setValue]); + useEffect(() => { const loadCities = async () => { let dataCities = await cityApi(); @@ -92,170 +109,192 @@ const EditAddress = ({ id, defaultValues }) => { const data = { ...values, phone: values.mobile, - street: values.street, city_id: values.city, district_id: values.district, sub_district_id: values.subDistrict, }; - console.log('data', data); + const dataAlamat = { + ...values, + id_user: auth.partnerId, + company_type_id: values.companyType, + industry_id: values.industry, + tax_name: values.taxName, + alamat_lengkap_text: values.alamat_wajib_pajak, + street: values.street, + }; + + // const address = await editAddressApi({ id, data }); + const isUpdated = await odooApi( + 'PUT', + `/api/v1/partner/${auth.parentId}`, + dataAlamat + ); - const address = await editAddressApi({ id, data }); - if (address?.id) { + if (isUpdated?.id) { + // if (address?.id && isUpdated?.id) { toast.success('Berhasil mengubah alamat'); router.back(); + } else { + toast.error('Terjadi kesalahan internal'); + router.back(); } }; return ( -
-
- -
-
-

- Ubah Alamat -

-
-
-
- - ( - - )} - /> -
- {errors.type?.message} + <> +
+
+ +
+
+
+

+ Ubah Alamat +

+ {auth?.partnerId == id &&
Utama
} +
+ +
+
+ + ( + + )} + /> +
+ {errors.type?.message} +
-
-
- - -
- {errors.name?.message} +
+ + +
+ {errors.name?.message} +
-
-
- - -
- {errors.email?.message} +
+ + +
+ {errors.email?.message} +
-
-
- - -
- {errors.mobile?.message} +
+ + +
+ {errors.mobile?.message} +
-
-
- - -
- {errors.street?.message} +
+ + +
+ {errors.street?.message} +
-
-
- - -
- {errors.zip?.message} +
+ + +
+ {errors.zip?.message} +
-
-
- - ( - - )} - /> -
- {errors.city?.message} +
+ + ( + + )} + /> +
+ {errors.city?.message} +
-
-
- - ( - - )} - /> -
- {errors.district?.message} +
+ + ( + + )} + /> +
+ {errors.district?.message} +
-
-
- - ( - - )} - /> +
+ + ( + + )} + /> +
-
- - + + +
-
+ ); }; diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index f1577ca1..d4cf8657 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -24,7 +24,6 @@ const CompanyProfile = () => { alamat_bisnis: '', }, }); - console.log('auth', auth); const [industries, setIndustries] = useState([]); useEffect(() => { const loadIndustries = async () => { @@ -75,7 +74,6 @@ const CompanyProfile = () => { alamat_lengkap_text: values.alamat_wajib_pajak, street: values.alamat_bisnis, }; - console.log('data', data); const isUpdated = await odooApi( 'PUT', `/api/v1/partner/${auth.parentId}`, -- cgit v1.2.3 From dc3f5a3196a41c676f328aa0804af516d39e69f9 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Sep 2024 16:23:41 +0700 Subject: update new register ubah alamat --- src/lib/address/components/Addresses.jsx | 9 +++++-- src/lib/address/components/EditAddress.jsx | 40 ++++++++++++++++-------------- 2 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx index a8879607..9ca617ae 100644 --- a/src/lib/address/components/Addresses.jsx +++ b/src/lib/address/components/Addresses.jsx @@ -149,6 +149,7 @@ const AddressCard = ({ setSelectedForChange, }) => { const auth = useAuth(); + const router = useRouter(); return (