diff options
Diffstat (limited to 'src/lib/form/components/SuratDukungan.jsx')
| -rw-r--r-- | src/lib/form/components/SuratDukungan.jsx | 339 |
1 files changed, 191 insertions, 148 deletions
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx index 360dd838..d73c3fab 100644 --- a/src/lib/form/components/SuratDukungan.jsx +++ b/src/lib/form/components/SuratDukungan.jsx @@ -1,12 +1,14 @@ -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 createLeadsApi 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 createLeadsApi from '../api/createLeadApi'; + +import PageContent from '@/lib/content/components/PageContent'; const CreateSuratDukungan = () => { const { @@ -14,30 +16,33 @@ const CreateSuratDukungan = () => { handleSubmit, formState: { errors }, control, - reset + reset, } = useForm({ resolver: yupResolver(validationSchema), - defaultValues - }) - const [cities, setCities] = useState([]) - const [company_unit, setCompany_unit] = useState([]) + defaultValues, + }); + const [cities, setCities] = useState([]); + const [company_unit, setCompany_unit] = useState([]); - 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, @@ -61,19 +66,21 @@ const CreateSuratDukungan = () => { ' \r\n Alamat 2 : ' + values.address2 + 'Keterangan : ' + - values.description - } + values.description, + }; - const create_leads = await createLeadsApi({ data }) + const create_leads = await createLeadsApi({ data }); if (create_leads) { - toast.success('Berhasil menambahkan alamat') - reset() - recaptchaRef.current.reset() + toast.success('Berhasil menambahkan alamat'); + reset(); + recaptchaRef.current.reset(); } - } + }; return ( <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'> - <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Form Surat Dukungan</h1> + <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'> + Form Surat Dukungan + </h1> <div className='w-full p-4 bg-white border border-gray_r-6 rounded'> <div className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4' @@ -81,132 +88,168 @@ const CreateSuratDukungan = () => { > <p>Lengkapi form berikut untuk melakukan konfirmasi pembayaran.</p> </div> - <div className=' w-full md:w-[50%] p-4 bg-gray-50 border border-gray_r-6 rounded text-center'> - <h1>Data Peserta</h1> - </div> - <form onSubmit={handleSubmit(onSubmitHandler)}> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>Nama Perusahan *</label> - <input - {...register('company')} - placeholder='PT.Indoteknik' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>Alamat*</label> - <input - {...register('address')} - placeholder='jl. Bandengan no.31 ' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>No. Telp *</label> - <input - {...register('phone')} - placeholder='021-XXXX' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>NPWP *</label> - <input - {...register('npwp')} - placeholder='npwp number' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.npwp?.message}</div> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>Alamat Email *</label> - <input - {...register('email')} - placeholder='contoh@email.com' - type='email' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div> + <div className=' w-full grid grid-cols-2 gap-x-2'> + <div className='group'> + <div className=' w-full md:w-[50%] p-4 bg-gray-50 border border-gray_r-6 rounded text-center'> + <h1>Data Peserta</h1> </div> - </div> - <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'> - <h1>Data Peserta</h1> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>Pengadaan *</label> - <input {...register('pengadaan')} placeholder='' type='text' className='form-input' /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.pengadaan?.message}</div> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>Alamat *</label> - <textarea - {...register('address2')} - placeholder='' - type='text' - className='form-input h-[120px]' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.address2?.message}</div> - </div> - </div> - <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'> - <h1>Data Produk</h1> - </div> + <form onSubmit={handleSubmit(onSubmitHandler)}> + <div className=''> + <div> + <label className='form-label mb-2'>Nama Perusahan *</label> + <input + {...register('company')} + placeholder='PT.Indoteknik' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.company?.message} + </div> + </div> + </div> + <div className=''> + <div> + <label className='form-label mb-2'>Alamat*</label> + <input + {...register('address')} + placeholder='jl. Bandengan no.31 ' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.address?.message} + </div> + </div> + </div> + <div className=''> + <div> + <label className='form-label mb-2'>No. Telp *</label> + <input + {...register('phone')} + placeholder='021-XXXX' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.phone?.message} + </div> + </div> + </div> + <div className=''> + <div> + <label className='form-label mb-2'>NPWP *</label> + <input + {...register('npwp')} + placeholder='npwp number' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.npwp?.message} + </div> + </div> + </div> + <div className=''> + <div> + <label className='form-label mb-2'>Alamat Email *</label> + <input + {...register('email')} + placeholder='contoh@email.com' + type='email' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.email?.message} + </div> + </div> + </div> + <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'> + <h1>Data Peserta</h1> + </div> + <div className=''> + <div> + <label className='form-label mb-2'>Pengadaan *</label> + <input + {...register('pengadaan')} + placeholder='' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.pengadaan?.message} + </div> + </div> + </div> + <div className=''> + <div> + <label className='form-label mb-2'>Alamat *</label> + <textarea + {...register('address2')} + placeholder='' + type='text' + className='form-input h-[120px]' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.address2?.message} + </div> + </div> + </div> + <div className='mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'> + <h1>Data Produk</h1> + </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>Produk</label> - <textarea {...register('description')} type='text' className='form-input h-[120px]' /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.description?.message} + <div className=''> + <div> + <label className='form-label mb-2'>Produk</label> + <textarea + {...register('description')} + type='text' + className='form-input h-[120px]' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.description?.message} + </div> + </div> </div> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} /> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'> - Simpan - </button> - </div> + <div className=''> + <div> + <ReCAPTCHA + ref={recaptchaRef} + sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} + /> + </div> + </div> + <div className=''> + <div> + <button + type='submit' + className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto' + > + Simpan + </button> + </div> + </div> + </form> </div> - </form> + <PageContent path='/surat-dukungan'/> + </div> </div> </div> - ) -} + ); +}; 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'), npwp: Yup.string().required('Harus di-isi'), pengadaan: Yup.string().required('Harus di-isi'), email: Yup.string().required('Harus di-isi'), address: Yup.string().required('Harus di-isi'), - address2: Yup.string().required('Harus di-isi') -}) + address2: Yup.string().required('Harus di-isi'), +}); const defaultValues = { company: '', email: '', @@ -215,7 +258,7 @@ const defaultValues = { npwp: '', email: '', address: '', - address2: '' -} + address2: '', +}; -export default CreateSuratDukungan +export default CreateSuratDukungan; |