diff options
Diffstat (limited to 'src/lib/form')
| -rw-r--r-- | src/lib/form/components/RequestForQuotation.jsx | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/src/lib/form/components/RequestForQuotation.jsx b/src/lib/form/components/RequestForQuotation.jsx new file mode 100644 index 00000000..cd8fbfd6 --- /dev/null +++ b/src/lib/form/components/RequestForQuotation.jsx @@ -0,0 +1,203 @@ +import odooApi from '@/core/api/odooApi' +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 getFileBase64 from '@/core/utils/getFileBase64' + +const RequestForQuotation = () => { + const { + register, + handleSubmit, + formState: { errors }, + control, + reset + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues + }) + const [cities, setCities] = useState([]) + + const quotationFileRef = useRef(null) + const recaptchaRef = useRef(null) + + useEffect(() => { + const loadCities = async () => { + let dataCities = await cityApi() + dataCities = dataCities.map((obj) => ({ value: obj.name, label: obj.name })) + setCities(dataCities) + } + loadCities() + }, []) + + const onSubmitHandler = async (values) => { + const recaptchaValue = recaptchaRef.current.getValue() + if (!recaptchaValue) { + toast.error('Recaptcha harus diisi') + return + } + + const file = quotationFileRef.current.files[0] + let fileBase64 = null + if (typeof file !== 'undefined') { + if (file.size > 5000000) { + toast.error('Maksimal ukuran file adalah 5MB') + return + } + fileBase64 = await getFileBase64(file) + } + + const data = { + name: `Request For Quotation - ${values.company}`, + email_from: values.email, + phone: values.phone, + description: [ + `Nama Perusahaan: ${values.company}`, + `No. Telepon: ${values.phone}`, + `Kota: ${values.city}`, + `No. Handphone: ${values.mobile}`, + `Alamat Email: ${values.email}`, + `Keterangan: ${values.description}` + ].join('\n') + } + + if (fileBase64) data.file_quotation = fileBase64 + + const createLead = await createLeadApi({ data }) + if (createLead) { + toast.success('Berhasil mengirimkan formulir request for quotation') + 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'>Kunjungan Sales</h1> + + <div className='w-full grid grid-cols-1 md:grid-cols-2'> + <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'> + <div + className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6' + role='alert' + > + Halaman untuk pengajuan penawaran harga, lengkapi data di bawah ini dengan jelas untuk + mempermudah tim support kami melayani kebutuhan Anda. Tim kami akan sesegera mungkin + untuk membuatkan penawaran harga terbaik, hubungi kami melalui telpon jika ada + keterlambatan pelayanan. + </div> + <div> + <label className='form-label mb-2'>Nama Perusahan*</label> + <input + {...register('company')} + placeholder='PT. Indoteknik Dotcom Gemilang' + type='text' + className='form-input' + aria-invalid={errors.company?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div> + </div> + + <div> + <label className='form-label mb-2'>No. Telepon*</label> + <input + {...register('phone')} + placeholder='021XXXXXXX' + type='text' + className='form-input' + aria-invalid={errors.phone?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div> + </div> + + <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> + <label className='form-label mb-2'>Contact Person*</label> + <input + {...register('contactPerson')} + placeholder='John Doe' + type='text' + className='form-input' + aria-invalid={errors.contactPerson?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.contactPerson?.message}</div> + </div> + + <div> + <label className='form-label mb-2'>No. Handphone*</label> + <input + {...register('mobile')} + placeholder='628XXXXXXX' + type='text' + className='form-input' + aria-invalid={errors.mobile?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div> + </div> + + <div> + <label className='form-label mb-2'>Alamat Email*</label> + <input + {...register('email')} + placeholder='contoh@email.com' + type='email' + className='form-input' + aria-invalid={errors.email?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div> + </div> + + <div> + <label className='form-label mb-2'>Keterangan</label> + <textarea {...register('description')} type='text' className='form-input' /> + </div> + + <div> + <label className='form-label mb-2'>File Daftar Produk</label> + <input type="file" name="quotationFile" className='form-input' ref={quotationFileRef} /> + </div> + + <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} /> + + <button type='submit' className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'> + Simpan + </button> + </form> + </div> + </div> + ) +} + +const validationSchema = Yup.object().shape({ + email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'), + company: Yup.string().required('Harus di-isi'), + phone: Yup.string().required('Harus di-isi'), + mobile: Yup.string().required('Harus di-isi'), + city: Yup.string().required('Harus dipilih'), + contactPerson: Yup.string().required('Harus dipilih'), +}) + +const defaultValues = { + email: '', + company: '', + phone: '', + mobile: '', + address: '', + city: '', + description: '' +} + +export default RequestForQuotation |