From 548e2b48b1c2f6521037765f96083a8d79f611d6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 18 Oct 2024 17:08:55 +0700 Subject: add pengiriman section --- .../register/stores/usePengajuanTempoStore.ts | 71 ++- src-migrate/types/tempo.ts | 13 +- src-migrate/validations/tempo.ts | 9 + .../pengajuan-tempo/component/KontakPerusahaan.jsx | 4 + .../pengajuan-tempo/component/PengajuanTempo.jsx | 6 +- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 604 +++++++++++++++++++++ 6 files changed, 701 insertions(+), 6 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/Pengiriman.jsx diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts index 7f1bcbb0..0d397c78 100644 --- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -1,6 +1,14 @@ import { create } from 'zustand'; -import { TempoProps, TempoPropsKontakPerson } from '~/types/tempo'; -import { TempoSchema, TempoSchemaKontakPerson } from '~/validations/tempo'; +import { + TempoProps, + TempoPropsKontakPerson, + TempoPropsPengiriman, +} from '~/types/tempo'; +import { + TempoSchema, + TempoSchemaKontakPerson, + TempoSchemaPengiriman, +} from '~/validations/tempo'; import { boolean, ZodError } from 'zod'; type State = { @@ -156,3 +164,62 @@ export const usePengajuanTempoStoreKontakPerson = create< }, }), })); + +type StatePengiriman = { + formPengiriman: TempoPropsPengiriman; + errorsPengiriman: { + [key in keyof TempoPropsPengiriman]?: string; + }; +}; +type ActionPengiriman = { + updateFormPengiriman: (name: string, value: string) => void; + + validatePengiriman: () => void; + resetFormPengiriman: () => void; +}; +export const usePengajuanTempoStorePengiriman = create< + StatePengiriman & ActionPengiriman +>((set, get) => ({ + formPengiriman: { + PICName: '', + streetPengiriman: '', + statePengiriman: '', + cityPengiriman: '', + zip: '', + invoicePic: '', + }, + updateFormPengiriman: (name, value) => + set((state) => ({ + formPengiriman: { ...state.formPengiriman, [name]: value }, + })), + + errorsPengiriman: {}, + validatePengiriman: () => { + try { + TempoSchemaPengiriman.parse(get().formPengiriman); + set({ errorsPengiriman: {} }); + } catch (error) { + if (error instanceof ZodError) { + const errorsPengiriman: StatePengiriman['errorsPengiriman'] = {}; + error.errors.forEach( + (e) => + (errorsPengiriman[e.path[0] as keyof TempoPropsPengiriman] = + e.message) + ); + set({ errorsPengiriman }); + } + } + }, + + resetFormPengiriman: () => + set({ + formPengiriman: { + PICName: '', + streetPengiriman: '', + statePengiriman: '', + cityPengiriman: '', + zip: '', + invoicePic: '', + }, + }), +})); diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts index 85680cba..6e3f2502 100644 --- a/src-migrate/types/tempo.ts +++ b/src-migrate/types/tempo.ts @@ -1,4 +1,8 @@ -import { TempoSchema, TempoSchemaKontakPerson } from '~/validations/tempo'; +import { + TempoSchema, + TempoSchemaKontakPerson, + TempoSchemaPengiriman, +} from '~/validations/tempo'; import { OdooApiRes } from './odoo'; import { z } from 'zod'; @@ -29,11 +33,18 @@ export type tempoPropsKontakPerson = { financeName: string; purchasingMobile: string; }; +export type tempoPropsPengiriman = { + PICName: string; + streetPengiriman: string; + statePengiriman: string; + cityPengiriman: string; +}; export type TempoApiProps = OdooApiRes; export type TempoProps = z.infer; export type TempoPropsKontakPerson = z.infer; +export type TempoPropsPengiriman = z.infer; export type TempoResApiProps = { Tempo: boolean; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts index 756bb722..7adfa780 100644 --- a/src-migrate/validations/tempo.ts +++ b/src-migrate/validations/tempo.ts @@ -26,6 +26,7 @@ export const TempoSchema = z.object({ .string() .min(1, { message: 'Category produk harus dipilih' }), }); + export const TempoSchemaKontakPerson = z.object({ direkturName: z.string().min(1, { message: 'Nama harus diisi' }), financeName: z.string().min(1, { message: 'Nama harus diisi' }), @@ -61,3 +62,11 @@ export const TempoSchemaKontakPerson = z.object({ .email({ message: 'Email harus menggunakan format example@mail.com' }), purchasingName: z.string().min(1, { message: 'Nama harus diisi' }), }); +export const TempoSchemaPengiriman = z.object({ + PICName: z.string().min(1, { message: 'Nama harus diisi' }), + streetPengiriman: z.string().min(1, { message: 'Alamat harus diisi' }), + statePengiriman: z.string().min(1, { message: 'Provinsi harus dipilih' }), + cityPengiriman: z.string().min(1, { message: 'Kota harus dipilih' }), + zip: z.string().min(1, { message: 'Kode pos harus diisi' }), + invoicePic: z.string().min(1, { message: 'Nama pic invoice harus diisi' }), +}); diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index 861a75ba..c09aaf57 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -86,6 +86,10 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { }; loadIndustries(); }, [buttonSubmitClick, chekValid]); + + useEffect(() => { + validateKontakPerson(); + }, [buttonSubmitClick]); return ( <>
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 14ea1805..257648ca 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -3,6 +3,7 @@ import { useMemo, useState, useEffect, useRef } from 'react'; import Stepper from './Stepper'; import InformasiPerusahaan from './informasiPerusahaan'; import KontakPerusahaan from './KontakPerusahaan'; +import Pengiriman from './Pengiriman'; import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore, @@ -31,8 +32,7 @@ const PengajuanTempo = () => { chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />, -
Kontak Person
, -
Pengiriman
, + ,
Referensi
,
Dokumen
,
Konfirmasi
, @@ -85,7 +85,7 @@ const PengajuanTempo = () => { top: 0, behavior: 'smooth', }); - }, [currentStep]); + }, [currentStep, buttonSubmitClick]); useEffect(() => { const cachedData = getFromLocalStorage(stepLabels[currentStep]); diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx new file mode 100644 index 00000000..91772c7f --- /dev/null +++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx @@ -0,0 +1,604 @@ +import React, { useState, useEffect, useMemo, useRef } from 'react'; +import { Controller, set, useForm } from 'react-hook-form'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import odooApi from '~/libs/odooApi'; +import stateApi from '@/lib/address/api/stateApi.js'; +import cityApi from '@/lib/address/api/cityApi'; +import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; +import { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +const Pengiriman = ({ chekValid, buttonSubmitClick }) => { + const { control, watch } = useForm(); + const { + formPengiriman, + errorsPengiriman, + validatePengiriman, + updateFormPengiriman, + } = usePengajuanTempoStorePengiriman(); + const [states, setState] = useState([]); + const [cities, setCities] = useState([]); + const [sameAddress, setSameAddress] = useState(false); + + useEffect(() => { + const loadState = async () => { + let dataState = await stateApi(); + dataState = dataState.map((state) => ({ + value: state.id, + label: state.name, + })); + setState(dataState); + }; + loadState(); + }, []); + + const watchState = watch('state'); + useEffect(() => { + updateFormPengiriman('city', ''); + if (watchState) { + updateFormPengiriman('state', `${watchState}`); + validate(); + const loadCities = async () => { + let dataCities = await cityApi({ stateId: watchState }); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + } + }, [watchState]); + + const handleInputChange = (event) => { + const { name, value } = event.target; + updateFormPengiriman(name, value); + validatePengiriman(); + }; + + const isFormValid = useMemo( + () => Object.keys(errorsPengiriman).length === 0, + [errorsPengiriman] + ); + + const PICNameRef = useRef(null); + const streetPengirimanRef = useRef(null); + const statePengirimanRef = useRef(null); + const cityPengirimanRef = useRef(null); + const zipRef = useRef(null); + const invoicePicRef = useRef(null); + + const direkturEmailRef = useRef(null); + const purchasingNameRef = useRef(null); + const purchasingEmailRef = useRef(null); + const purchasingMobileRef = useRef(null); + const financeNameRef = useRef(null); + const financeMobileRef = useRef(null); + const financeEmailRef = useRef(null); + + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options = { + behavior: 'smooth', + block: 'center', + }; + if (errorsPengiriman.PICName && PICNameRef.current) { + PICNameRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.streetPengiriman && streetPengirimanRef.current) { + streetPengirimanRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.statePengiriman && statePengirimanRef.current) { + statePengirimanRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.cityPengiriman && cityPengirimanRef.current) { + cityPengirimanRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.zip && zipRef.current) { + zipRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.invoicePic && invoicePicRef.current) { + invoicePicRef.current.scrollIntoView(options); + return; + } + + if (errorsPengiriman.direkturEmail && direkturEmailRef.current) { + direkturEmailRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.purchasingName && purchasingNameRef.current) { + purchasingNameRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.purchasingMobile && purchasingMobileRef.current) { + purchasingMobileRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.purchasingEmail && purchasingEmailRef.current) { + purchasingEmailRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.financeName && financeNameRef.current) { + financeNameRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.financeMobile && financeMobileRef.current) { + financeMobileRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.financeEmail && financeEmailRef.current) { + financeEmailRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); + + useEffect(() => { + validatePengiriman(); + }, [buttonSubmitClick]); + useEffect(() => { + if (sameAddress) { + updateFormPengiriman('streetPengiriman', formPengiriman.streetPengiriman); + updateFormPengiriman('statePengiriman', formPengiriman.statePengiriman); + updateFormPengiriman('cityPengiriman', formPengiriman.cityPengiriman); + updateFormPengiriman('zip', formPengiriman.zip); + } + }, [sameAddress]); + return ( + <> +
+

Pengiriman

+
+
+
+
+
+ +
+
+ + {chekValid && ( +
+ {errorsPengiriman.PICName} +
+ )} +
+
+ +
+
+ + + pastikan alamat yang anda isi sesuai dengan alamat kirim barang + +
+
+
+ + {chekValid && ( +
+ {errorsPengiriman.streetPengiriman} +
+ )} +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.statePengiriman} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.cityPengiriman} +
+ )} +
+
+ + {chekValid && ( +
+ {errorsPengiriman.zip} +
+ )} +
+
+
+
+ +
+
+ +
+
+ + {chekValid && ( +
+ {errorsPengiriman.invoicePic} +
+ )} +
+
+ +
+
+ + + Pastikan alamat yang anda isi sesuai dengan alamat kirim invoice + +
+
+
+ setSameAddress(!sameAddress)} + > + Alamat invoice sama dengan alamat pengiriman + +
+ {!sameAddress && ( + <> +
+ + {chekValid && ( +
+ {errorsPengiriman.streetPengiriman} +
+ )} +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.statePengiriman} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.cityPengiriman} +
+ )} +
+
+ + {chekValid && ( +
+ {errorsPengiriman.zip} +
+ )} +
+
+ + )} +
+
+ +
+
+ + + isi email Direktur yang sesuai + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.direkturEmail} +
+ )} +
+
+ +
+
+ + + isi nama purchasing yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.purchasingName} +
+ )} +
+
+ +
+
+ + + isi nomor purchasing yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.purchasingMobile} +
+ )} +
+
+ +
+
+ + + isi email purchasing benar + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.purchasingEmail} +
+ )} +
+
+ +
+
+ + + isi nama finance yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.financeName} +
+ )} +
+
+
+
+ + + isi nomor finance yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.financeMobile} +
+ )} +
+
+ +
+
+ + + isi email finance dengan benar + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.financeEmail} +
+ )} +
+
+
+
+ + ); +}; + +export default Pengiriman; -- cgit v1.2.3