Merge branch 'master' into development_tri/implementasi_raja_ongkir

5 files changed, 207 insertions, 4 deletions

diff --git a/src/lib/form/components/KunjunganSales.jsx b/src/lib/form/components/KunjunganSales.jsx
index 38a07345..7064f807 100644
--- a/src/lib/form/components/KunjunganSales.jsx
+++ b/src/lib/form/components/KunjunganSales.jsx
@@ -77,7 +77,7 @@ const KunjunganSales = () => {
       <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'
+            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'
           >
             Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan berbagai kelebihannya
diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx
index 076f6814..965fbc89 100644
--- a/src/lib/form/components/KunjunganService.jsx
+++ b/src/lib/form/components/KunjunganService.jsx
@@ -74,7 +74,7 @@ const CreateKunjunganService = () => {
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kunjungan Service</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'
+          className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
           role='alert'
         >
           <p>
diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
index 75b4e132..24b58a7c 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/form/components/Merchant.jsx
@@ -103,7 +103,7 @@ const CreateMerchant = () => {
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Form Merchant</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'
+          className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
           role='alert'
         >
           <p>
diff --git a/src/lib/form/components/RequestForQuotation.jsx b/src/lib/form/components/RequestForQuotation.jsx
new file mode 100644
index 00000000..31efb5d6
--- /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'>Request for Quotation</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
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
index 0eab84a4..360dd838 100644
--- a/src/lib/form/components/SuratDukungan.jsx
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -76,7 +76,7 @@ const CreateSuratDukungan = () => {
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Form Surat Dukungan</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'
+          className='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>