From b3be7e6d5c320764ef3ca38df196218abf9be25b Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 10 Dec 2024 10:05:47 +0700 Subject: move formulis & add state field --- src/lib/form/components/KunjunganService.jsx | 361 ++++++++++++++++----------- 1 file changed, 217 insertions(+), 144 deletions(-) (limited to 'src/lib/form/components/KunjunganService.jsx') diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx index 5720d14e..e3c83f78 100644 --- a/src/lib/form/components/KunjunganService.jsx +++ b/src/lib/form/components/KunjunganService.jsx @@ -1,16 +1,17 @@ -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import cityApi from '@/lib/address/api/cityApi' -import { yupResolver } from '@hookform/resolvers/yup' -import React, { useEffect, useRef, useState } from 'react' -import ReCAPTCHA from 'react-google-recaptcha' -import { Controller, useForm } from 'react-hook-form' -import { toast } from 'react-hot-toast' -import * as Yup from 'yup' -import createLeadApi from '../api/createLeadApi' -import PageContent from '@/lib/content/components/PageContent' -import { useRouter } from 'next/router' +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import cityApi from '@/lib/address/api/cityApi'; +import stateApi from '@/lib/address/api/stateApi.js'; +import { yupResolver } from '@hookform/resolvers/yup'; +import React, { useEffect, useRef, useState } from 'react'; +import ReCAPTCHA from 'react-google-recaptcha'; +import { Controller, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import * as Yup from 'yup'; +import createLeadApi from '../api/createLeadApi'; +import PageContent from '@/lib/content/components/PageContent'; +import { useRouter } from 'next/router'; -import useAuth from '@/core/hooks/useAuth' +import useAuth from '@/core/hooks/useAuth'; const CreateKunjunganService = () => { const { @@ -18,37 +19,61 @@ const CreateKunjunganService = () => { handleSubmit, formState: { errors }, control, - reset + reset, + watch, + setValue, } = useForm({ resolver: yupResolver(validationSchema), - defaultValues - }) - const [cities, setCities] = useState([]) - const [company_unit, setCompany_unit] = useState([]) - - const router = useRouter() + defaultValues, + }); + const [cities, setCities] = useState([]); + const [state, setState] = useState([]); + const [company_unit, setCompany_unit] = useState([]); - const auth = useAuth() + const router = useRouter(); - const recaptchaRef = useRef(null) + const auth = useAuth(); + if (auth == false) { + router.push(`/login?next=${encodeURIComponent('/kunjungan-service')}`); + } + + const recaptchaRef = useRef(null); + + 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(() => { - if(auth == false) { - router.push('/login') + if (auth == false) { + return; } const loadCities = async () => { - let dataCities = await cityApi() - dataCities = dataCities.map((city) => ({ value: city.id, label: city.name })) - setCities(dataCities) - } - loadCities() - }, [auth]) + setValue('city', ''); + let dataCities = await cityApi({ stateId: watchState }); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + }, [auth, watchState, setValue]); const onSubmitHandler = async (values) => { - const recaptchaValue = recaptchaRef.current.getValue() + const recaptchaValue = recaptchaRef.current.getValue(); if (!recaptchaValue) { - toast.error('Catcha harus diisi') - return + toast.error('Catcha harus diisi'); + return; } const data = { ...values, @@ -70,164 +95,212 @@ const CreateKunjunganService = () => { ' \r\n Email : ' + values.email + ' \r\n Keterangan : ' + - values.description - } + values.description, + }; - const create_leads = await createLeadApi({ data }) + const create_leads = await createLeadApi({ data }); if (create_leads) { - toast.success('Berhasil menambahkan alamat') - reset() - recaptchaRef.current.reset() + toast.success('Berhasil menambahkan alamat'); + reset(); + recaptchaRef.current.reset(); } + }; + if (!auth) { + return; } return (
-

Kunjungan Service

+

+ Kunjungan Service +

- Tidak punya waktu untuk melakukan service atau perawatan rutin? Silahkan hubungi teknisi - kami untuk melakukan kunjungan ke tempat Anda di Jabodetabek. + Tidak punya waktu untuk melakukan service atau perawatan rutin? + Silahkan hubungi teknisi kami untuk melakukan kunjungan ke tempat + Anda di Jabodetabek.

- -
-
-
- - -
{errors.company?.message}
+ +
+
+ + +
+ {errors.company?.message} +
+
-
-
-
- - -
{errors.phone?.message}
+
+
+ + +
+ {errors.phone?.message} +
+
-
-
-
- - -
{errors.address?.message}
+
+
+ + +
+ {errors.address?.message} +
+
-
-
- + } + render={(props) => ( + + )} /> -
{errors.city?.message}
+
+ {errors.state?.message} +
-
-
-
- - -
{errors.cp?.message}
+
+
+ + ( + + )} + /> +
+ {errors.city?.message} +
+
-
-
-
- - -
{errors.mobile?.message}
+
+
+ + +
+ {errors.cp?.message} +
+
-
-
-
- - -
{errors.email?.message}
+
+
+ + +
+ {errors.mobile?.message} +
+
-
-
-
- -