diff options
Diffstat (limited to 'src/lib/form/components/KunjunganSales.jsx')
| -rw-r--r-- | src/lib/form/components/KunjunganSales.jsx | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/src/lib/form/components/KunjunganSales.jsx b/src/lib/form/components/KunjunganSales.jsx new file mode 100644 index 00000000..b96fddb5 --- /dev/null +++ b/src/lib/form/components/KunjunganSales.jsx @@ -0,0 +1,188 @@ +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' + +const CreateKunjunganSales = () => { + const { + register, + handleSubmit, + formState: { errors }, + control + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues + }) + const [cities, setCities] = useState([]) + const [company_unit, setCompany_unit] = useState([]) + + 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() + }, []) + + const onSubmitHandler = async (values) => { + const recaptchaValue = recaptchaRef.current.getValue() + if (!recaptchaValue) { + toast.error('Catcha harus diisi') + return + } + const data = { + ...values + } + + const address = await createAddressApi({ data }) + if (address?.id) { + toast.success('Berhasil menambahkan alamat') + router.back() + } + } + 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'>Kunjungan Sales</h1> + <div className='w-full p-4 bg-white border border-gray_r-6 rounded'> + <div + class='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4' + role='alert' + > + <p> + Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan berbagai kelebihannya + dengan menjadi pelanggan korporat kami. + </p> + </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'>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'>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'>Kota*</label> + <Controller + name='city' + control={control} + render={(props) => <HookFormSelect {...props} options={cities} />} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.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'>Unit Perusahaan</label> + <Controller + name='company_unit' + control={control} + render={(props) => <HookFormSelect {...props} options={company_unit} />} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.company_unit?.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 HP *</label> + <input + {...register('email')} + placeholder='628XXXXXXX' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.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> + </div> + <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> + <div> + <label className='form-label mb-2'>Keterangan</label> + <textarea + {...register('description')} + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.description?.message}</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> + </form> + </div> + </div> + ) +} +const validationSchema = Yup.object().shape({ + name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'), + email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'), + npwp: Yup.string().required('Harus di-isi') +}) +const defaultValues = { + name: '', + email: '', + npwp: '', + siup: '', + tdp: '', + nib: '' +} + +export default CreateKunjunganSales |