From 6b8427b18ab3cb5bcc83bceaf43cc7b712a83fa6 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 5 Dec 2023 15:09:52 +0700 Subject: add page content di formulir --- src/lib/form/components/Merchant.jsx | 360 +++++++++++++++++++---------------- 1 file changed, 199 insertions(+), 161 deletions(-) (limited to 'src/lib/form/components/Merchant.jsx') diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx index 24b58a7c..6c1af231 100644 --- a/src/lib/form/components/Merchant.jsx +++ b/src/lib/form/components/Merchant.jsx @@ -1,12 +1,13 @@ -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 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'; const CreateMerchant = () => { const { @@ -14,56 +15,59 @@ const CreateMerchant = () => { handleSubmit, formState: { errors }, control, - reset + reset, } = useForm({ resolver: yupResolver(validationSchema), - defaultValues - }) + defaultValues, + }); const list_unit = [ { value: 'Manufacturing', - label: 'Manufacturing' + label: 'Manufacturing', }, { value: 'Hospitality', - label: 'Hospitality' + label: 'Hospitality', }, { value: 'Automotive', - label: 'Automotive' + label: 'Automotive', }, { value: 'Retail', - label: 'Retail' + label: 'Retail', }, { value: 'Maining', - label: 'Maining' + label: 'Maining', }, { value: 'Lain - Lain', - label: 'Lain - Lain' - } - ] - const [cities, setCities] = useState([]) - const [company_unit, setCompany_unit] = useState(list_unit) + label: 'Lain - Lain', + }, + ]; + const [cities, setCities] = useState([]); + const [company_unit, setCompany_unit] = useState(list_unit); - const recaptchaRef = useRef(null) + const recaptchaRef = useRef(null); useEffect(() => { const loadCities = async () => { - let dataCities = await cityApi() - dataCities = dataCities.map((city) => ({ value: city.id, label: city.name })) - setCities(dataCities) - } - loadCities() - }, []) + let dataCities = await cityApi(); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + }, []); 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, @@ -89,166 +93,200 @@ const CreateMerchant = () => { ' \r\n No Hp : ' + values.mobile + 'Keterangan : ' + - values.description - } - const create_leads = await createLeadApi({ data }) + values.description, + }; + const create_leads = await createLeadApi({ data }); if (create_leads) { - toast.success('Berhasil menambahkan data') - reset() - recaptchaRef.current.reset() + toast.success('Berhasil menambahkan data'); + reset(); + recaptchaRef.current.reset(); } - } + }; return (
-

Form Merchant

+

+ Form Merchant +

- Penjualan online adalah hal yang HARUS dilakukan mulai sekarang. Perubahan dalam banyak - industri dan pola pembelian. Gabung dengan platform kami dan mulai penjualan lansung di - ribuan perusahaan d seluruh Indonesia.{' '} + Penjualan online adalah hal yang HARUS dilakukan mulai sekarang. + Perubahan dalam banyak industri dan pola pembelian. Gabung dengan + platform kami dan mulai penjualan lansung di ribuan perusahaan d + seluruh Indonesia.{' '}

-
-
-
- - -
{errors.company?.message}
+
+ +
+
+ + +
+ {errors.company?.message} +
+
-
-
-
- - -
{errors.address?.message}
+
+
+ + +
+ {errors.address?.message} +
+
-
-
-
- - -
{errors.phone?.message}
+
+
+ + +
+ {errors.phone?.message} +
+
-
-
-
- - } - /> -
{errors.city?.message}
+
+
+ + ( + + )} + /> +
+ {errors.city?.message} +
+
-
-
-
- - } - /> -
- {errors.company_unit?.message} +
+
+ + ( + + )} + /> +
+ {errors.company_unit?.message} +
-
-
-
- - -
{errors.website?.message}
+
+
+ + +
+ {errors.website?.message} +
+
-
-
-
- - -
{errors.cp?.message}
+
+
+ + +
+ {errors.cp?.message} +
+
-
-
-
- - -
{errors.mobile?.message}
+
+
+ + +
+ {errors.mobile?.message} +
+
-
-
-
- - -
{errors.email?.message}
+
+
+ + +
+ {errors.email?.message} +
+
-
-
-
- +
+
+ +
-
-
-
- +
+
+ +
-
- + + +
- ) -} + ); +}; const validationSchema = Yup.object().shape({ company: Yup.string().required('Harus di-isi'), - email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'), + email: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), phone: Yup.string().required('Harus di-isi'), cp: Yup.string().required('Harus di-isi'), city: Yup.string().required('Harus di-isi'), company_unit: Yup.string().required('Harus di-isi'), address: Yup.string().required('Harus di-isi'), website: Yup.string().required('Harus di-isi'), - mobile: Yup.string().required('Harus di-isi') -}) + mobile: Yup.string().required('Harus di-isi'), +}); const defaultValues = { company: '', email: '', @@ -258,7 +296,7 @@ const defaultValues = { cp: '', address: '', website: '', - mobile: '' -} + mobile: '', +}; -export default CreateMerchant +export default CreateMerchant; -- cgit v1.2.3