1 files changed, 155 insertions, 0 deletions
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