diff options
Diffstat (limited to 'src/lib/form/components')
| -rw-r--r-- | src/lib/form/components/CreatePembayaranTempo.jsx | 131 | ||||
| -rw-r--r-- | src/lib/form/components/KunjunganSales.jsx | 260 | ||||
| -rw-r--r-- | src/lib/form/components/PembayaranTempo.jsx | 155 |
3 files changed, 292 insertions, 254 deletions
diff --git a/src/lib/form/components/CreatePembayaranTempo.jsx b/src/lib/form/components/CreatePembayaranTempo.jsx deleted file mode 100644 index 63a013aa..00000000 --- a/src/lib/form/components/CreatePembayaranTempo.jsx +++ /dev/null @@ -1,131 +0,0 @@ -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import getFileBase64 from '@/core/utils/getFileBase64' -import { yupResolver } from '@hookform/resolvers/yup' -import React, { useRef } 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 CreatePembayaranTempo = () => { - const { - register, - handleSubmit, - formState: { errors } - } = useForm({ - resolver: yupResolver(validationSchema), - defaultValues - }) - - const recaptchaRef = useRef(null) - const npwp = useRef(null) - - const onSubmitHandler = async (values) => { - const recaptchaValue = recaptchaRef.current.getValue() - if (!recaptchaValue) { - toast.error('Catcha harus diisi') - return - } - const data = { - ...values, - name : 'Pengajuan Pembayaran Tempo - ' + values.name, - file_npwp : values.npwp.length > 0 ? await getFileBase64(values.npwp) : '' - } - - console.log('ini adalah data', data) - - // const address = await createLeadsApi({ 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'>Pembayaran Tempo</h1> - <div className='w-full p-4 bg-white border border-gray_r-6 rounded'> - <form onSubmit={handleSubmit(onSubmitHandler)}> - <div className='grid grid-cols-1 md:grid-cols-2 gap-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'>Nama Lengkap *</label> - <input - {...register('name')} - placeholder='Jhon Doe' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.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'>Nomor Pokok Wajib Pajak (NPWP) *</label> - <input {...register('npwp')} type='file' 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'>Nomor Induk Berusaha (NIB) atau</label> - <input {...register('nib')} type='file' className='form-input' /> - </div> - </div> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'> - <div> - <label className='form-label mb-2'>Tanda Daftar Perusahaan (TDP) atau</label> - <input {...register('tdp')} type='file' className='form-input' /> - {/* <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.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'>Surat Izin Usaha Perdagangan (SIUP) atau</label> - <input {...register('siup')} type='file' className='form-input' /> - {/* <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.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 CreatePembayaranTempo diff --git a/src/lib/form/components/KunjunganSales.jsx b/src/lib/form/components/KunjunganSales.jsx index b96fddb5..38a07345 100644 --- a/src/lib/form/components/KunjunganSales.jsx +++ b/src/lib/form/components/KunjunganSales.jsx @@ -1,3 +1,4 @@ +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' @@ -6,183 +7,196 @@ 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' -const CreateKunjunganSales = () => { +const KunjunganSales = () => { const { register, handleSubmit, formState: { errors }, - control + control, + reset } = useForm({ resolver: yupResolver(validationSchema), defaultValues }) const [cities, setCities] = useState([]) - const [company_unit, setCompany_unit] = useState([]) + const [companyTypes, setCompanyTypes] = useState([]) const recaptchaRef = useRef(null) useEffect(() => { const loadCities = async () => { let dataCities = await cityApi() - dataCities = dataCities.map((city) => ({ value: city.id, label: city.name })) + dataCities = dataCities.map((obj) => ({ value: obj.name, label: obj.name })) setCities(dataCities) } + const loadCompanyTypes = async () => { + const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') + setCompanyTypes(dataCompanyTypes?.map((obj) => ({ value: obj.name, label: obj.name }))) + } + + loadCompanyTypes() loadCities() }, []) const onSubmitHandler = async (values) => { const recaptchaValue = recaptchaRef.current.getValue() if (!recaptchaValue) { - toast.error('Catcha harus diisi') + toast.error('Recaptcha harus diisi') return } + const data = { - ...values + name: `Pengajuan Kunjungan Sales - ${values.company}`, + email_from: values.email, + phone: values.phone, + description: [ + `Nama Perusahaan: ${values.company}`, + `No. Telepon: ${values.phone}`, + `Alamat Lengkap: ${values.address}`, + `Kota: ${values.city}`, + `Unit Perusahaan: ${values.companyType}`, + `No. Handphone: ${values.mobile}`, + `Alamat Email: ${values.email}`, + `Keterangan: ${values.description}` + ].join('\n') } - const address = await createAddressApi({ data }) - if (address?.id) { - toast.success('Berhasil menambahkan alamat') - router.back() + const createLead = await createLeadApi({ data }) + if (createLead) { + toast.success('Berhasil mengirimkan formulir kunjungan sales') + 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 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> + + <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 + class='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6' + role='alert' + > 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> + <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 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> + <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 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> + <label className='form-label mb-2'>Alamat Lengkap*</label> + <input + {...register('address')} + placeholder='Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara' + type='text' + className='form-input' + aria-invalid={errors.address?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</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> + <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 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> + <label className='form-label mb-2'>Unit Perusahaan</label> + <Controller + name='companyType' + control={control} + render={(props) => <HookFormSelect {...props} options={companyTypes} />} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.companyType?.message}</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> + <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 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> + <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 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> + <label className='form-label mb-2'>Keterangan</label> + <textarea {...register('description')} type='text' className='form-input' /> </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({ - 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') + company: Yup.string().required('Harus di-isi'), + phone: Yup.string().required('Harus di-isi'), + mobile: Yup.string().required('Harus di-isi'), + address: Yup.string().required('Harus di-isi'), + city: Yup.string().required('Harus dipilih') }) + const defaultValues = { - name: '', email: '', - npwp: '', - siup: '', - tdp: '', - nib: '' + company: '', + phone: '', + mobile: '', + address: '', + city: '', + companyType: '', + description: '' } -export default CreateKunjunganSales +export default KunjunganSales diff --git a/src/lib/form/components/PembayaranTempo.jsx b/src/lib/form/components/PembayaranTempo.jsx new file mode 100644 index 00000000..5f32753e --- /dev/null +++ b/src/lib/form/components/PembayaranTempo.jsx @@ -0,0 +1,155 @@ +import getFileBase64 from '@/core/utils/getFileBase64' +import { yupResolver } from '@hookform/resolvers/yup' +import React, { useRef } from 'react' +import ReCAPTCHA from 'react-google-recaptcha' +import { useForm } from 'react-hook-form' +import { toast } from 'react-hot-toast' +import * as Yup from 'yup' +import createLeadApi from '../api/createLeadApi' + +const PembayaranTempo = () => { + const { + register, + handleSubmit, + reset, + formState: { errors } + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues + }) + + const recaptchaRef = useRef(null) + + const onSubmitHandler = async (values) => { + const recaptchaValue = recaptchaRef.current.getValue() + if (!recaptchaValue) { + toast.error('Recaptcha harus diisi') + return + } + + const npwp = document.getElementById('npwp').files[0] + const nib = document.getElementById('nib').files[0] + const tdp = document.getElementById('tdp').files[0] + const siup = document.getElementById('siup').files[0] + + const data = { + name: 'Pengajuan Pembayaran Tempo - ' + values.name, + contact_name: values.name, + email_from: values.email, + file_npwp: npwp ? await getFileBase64(npwp) : '', + file_nib: nib ? await getFileBase64(nib) : '', + file_tdp: tdp ? await getFileBase64(tdp) : '', + file_siup: siup ? await getFileBase64(siup) : '' + } + + const createLead = await createLeadApi({ data }) + if (createLead) { + toast.success('Berhasil melakukan pengajuan pembayaran tempo') + 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'>Pembayaran Tempo</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> + <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'>Nama Lengkap*</label> + <input + {...register('name')} + placeholder='Jhon Doe' + type='text' + className='form-input' + aria-invalid={errors.name?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div> + </div> + + <div> + <label className='form-label mb-2'>Nomor Pokok Wajib Pajak (NPWP)*</label> + <input + {...register('npwp')} + type='file' + className='form-input' + accept='application/pdf' + id='npwp' + aria-invalid={errors.npwp?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'>{errors.npwp?.message}</div> + </div> + + <div> + <label className='form-label mb-2'>Nomor Induk Berusaha (NIB) atau</label> + <input + {...register('nib')} + type='file' + className='form-input' + accept='application/pdf' + id='nib' + placeholder='Hello' + /> + </div> + + <div> + <label className='form-label mb-2'>Tanda Daftar Perusahaan (TDP) atau</label> + <input + {...register('tdp')} + type='file' + className='form-input' + accept='application/pdf' + id='tdp' + /> + </div> + + <div> + <label className='form-label mb-2'>Surat Izin Usaha Perdagangan (SIUP)</label> + <input + {...register('siup')} + type='file' + className='form-input' + accept='application/pdf' + id='siup' + /> + </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> + + <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 PembayaranTempo |