surat dukungan

1 files changed, 78 insertions, 60 deletions

diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
index 22452b3c..2823cf73 100644
--- a/src/lib/form/components/SuratDukungan.jsx
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -41,18 +41,34 @@ const CreateSuratDukungan = () => {
     }
     const data = {
       ...values,
-      name : 'Pengajuan Kunjungan Service - ' + values.company,
-      contact_name : values.cp,
-      email_from : values.email,
-      phone : values.mobile,
-      description :  "\r\n Nama Perusahaan : " + values.company + " \r\n  Alamat  : " + values.address + " \r\n  Propinsi  : " + values.city + " \r\n  Telepon: " + values.phone + " \r\n  Handphone : " + values.mobile +" \r\n  Email  : " + values.email + " \r\n Keterangan  : " + values.description ,
+      name: 'Permintaan Surat Dukungan - ' + values.company,
+      contact_name: values.company,
+      email_from: values.email,
+      phone: values.phone,
+      description:
+        'Nama Perusahaan : ' +
+        values.company +
+        ' \r\n  Alamat  : ' +
+        values.address +
+        ' \r\n  Npwp  : ' +
+        values.npwp +
+        ' \r\n  Telepon: ' +
+        values.phone +
+        ' \r\n  Email  : ' +
+        values.email +
+        ' \r\n  Pengadaan : ' +
+        values.pengadaan +
+        ' \r\n  Alamat 2 : ' +
+        values.address2 +
+        'Keterangan  : ' +
+        values.description
     }
 
     const create_leads = await createLeadsApi({ data })
     if (create_leads) {
       toast.success('Berhasil menambahkan alamat')
       reset()
-     recaptchaRef.current.reset()
+      recaptchaRef.current.reset()
     }
   }
   return (
@@ -63,9 +79,10 @@ const CreateSuratDukungan = () => {
           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>
-          Lengkapi form berikut untuk melakukan konfirmasi pembayaran.
-          </p>
+          <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'>
@@ -82,18 +99,6 @@ const CreateSuratDukungan = () => {
           </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')}
@@ -106,39 +111,26 @@ const CreateSuratDukungan = () => {
           </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'>Contact Person*</label>
+              <label className='form-label mb-2'>No. Telp *</label>
               <input
-                {...register('cp')}
-                placeholder='Jhone doe'
+                {...register('phone')}
+                placeholder='021-XXXX'
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.cp?.message}
-              </div>
+              <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'>No HP *</label>
+              <label className='form-label mb-2'>NPWP *</label>
               <input
-                {...register('mobile')}
-                placeholder='628XXXXXXX'
+                {...register('npwp')}
+                placeholder='npwp number'
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+              <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'>
@@ -153,10 +145,36 @@ const CreateSuratDukungan = () => {
               <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='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>
+
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
             <div>
-              <label className='form-label mb-2'>Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan</label>
-              <textarea {...register('description')} type='text' className='form-input' />
+              <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>
@@ -180,24 +198,24 @@ const CreateSuratDukungan = () => {
   )
 }
 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'),
-    phone: Yup.string().required('Harus di-isi'),
-    city: Yup.string().required('Harus di-isi'),
-    cp: Yup.string().required('Harus di-isi'),
-    mobile: Yup.string().required('Harus di-isi'),
-    email: Yup.string().required('Harus di-isi'),
-    address: Yup.string().required('Harus di-isi')
+  company: Yup.string().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')
 })
 const defaultValues = {
-    company:'',
-    email: '',
-    phone: '',
-    city: '',
-    cp: '',
-    mobile: '',
-    email: '',
-    address: ''
+  company: '',
+  email: '',
+  phone: '',
+  pengadaan: '',
+  npwp: '',
+  email: '',
+  address: '',
+  address2: '',
 }
 
 export default CreateSuratDukungan