Merged in development_tri/feedback_UAT (pull request #6)

Development tri/feedback UAT

4 files changed, 440 insertions, 0 deletions

diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx
new file mode 100644
index 00000000..dfe5873e
--- /dev/null
+++ b/src/lib/form/components/KunjunganService.jsx
@@ -0,0 +1,204 @@
+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 createLeadsApi from '../api/createLeadsApi'
+
+const CreateKunjunganService = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+    reset
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues
+  })
+  const [cities, setCities] = useState([])
+  const [company_unit, setCompany_unit] = useState([])
+
+  const recaptchaRef = useRef(null)
+
+  useEffect(() => {
+    const loadCities = async () => {
+      let dataCities = await cityApi()
+      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
+      setCities(dataCities)
+    }
+    loadCities()
+  }, [])
+
+  const onSubmitHandler = async (values) => {
+    const recaptchaValue = recaptchaRef.current.getValue()
+    if (!recaptchaValue) {
+      toast.error('Catcha harus diisi')
+      return
+    }
+    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 ,
+    }
+
+    const create_leads = await createLeadsApi({ data })
+    if (create_leads) {
+      toast.success('Berhasil menambahkan alamat')
+      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 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'
+          role='alert'
+        >
+          <p>
+            Tidak punya waktu untuk melakukan service atau perawatan rutin? Silahkan hubungi teknisi
+            kami untuk melakukan kunjungan ke tempat Anda di Jabodetabek.
+          </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>
+          <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>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Contact Person*</label>
+              <input
+                {...register('cp')}
+                placeholder='Jhone doe'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.cp?.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>
+              <input
+                {...register('mobile')}
+                placeholder='628XXXXXXX'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.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 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'>Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan</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>
+          <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({
+    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')
+})
+const defaultValues = {
+    company:'',
+    email: '',
+    phone: '',
+    city: '',
+    cp: '',
+    mobile: '',
+    email: '',
+    address: ''
+}
+
+export default CreateKunjunganService
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
new file mode 100644
index 00000000..22452b3c
--- /dev/null
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -0,0 +1,203 @@
+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 createLeadsApi from '../api/createLeadsApi'
+
+const CreateSuratDukungan = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+    reset
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues
+  })
+  const [cities, setCities] = useState([])
+  const [company_unit, setCompany_unit] = useState([])
+
+  const recaptchaRef = useRef(null)
+
+  useEffect(() => {
+    const loadCities = async () => {
+      let dataCities = await cityApi()
+      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
+      setCities(dataCities)
+    }
+    loadCities()
+  }, [])
+
+  const onSubmitHandler = async (values) => {
+    const recaptchaValue = recaptchaRef.current.getValue()
+    if (!recaptchaValue) {
+      toast.error('Catcha harus diisi')
+      return
+    }
+    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 ,
+    }
+
+    const create_leads = await createLeadsApi({ data })
+    if (create_leads) {
+      toast.success('Berhasil menambahkan alamat')
+      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'>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'
+          role='alert'
+        >
+          <p>
+          Lengkapi form berikut untuk melakukan konfirmasi pembayaran.
+          </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>
+          <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>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+            <div>
+              <label className='form-label mb-2'>Contact Person*</label>
+              <input
+                {...register('cp')}
+                placeholder='Jhone doe'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.cp?.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>
+              <input
+                {...register('mobile')}
+                placeholder='628XXXXXXX'
+                type='text'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.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 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'>Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan</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>
+          <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({
+    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')
+})
+const defaultValues = {
+    company:'',
+    email: '',
+    phone: '',
+    city: '',
+    cp: '',
+    mobile: '',
+    email: '',
+    address: ''
+}
+
+export default CreateSuratDukungan
diff --git a/src/pages/my/kunjungan-service.jsx b/src/pages/my/kunjungan-service.jsx
new file mode 100644
index 00000000..80d1ecbc
--- /dev/null
+++ b/src/pages/my/kunjungan-service.jsx
@@ -0,0 +1,16 @@
+import Seo from '@/core/components/Seo'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import CreateKunjunganService from '@/lib/form/components/KunjunganService'
+
+export default function pembayaran_tempo() {
+ 
+  return (
+    <>
+      <Seo title='Kunjungan Service - Indoteknik.com' />
+
+      <BasicLayout>
+        <CreateKunjunganService></CreateKunjunganService>
+      </BasicLayout>
+    </>
+  )
+}
diff --git a/src/pages/my/surat-dukungan.jsx b/src/pages/my/surat-dukungan.jsx
new file mode 100644
index 00000000..8c469d02
--- /dev/null
+++ b/src/pages/my/surat-dukungan.jsx
@@ -0,0 +1,17 @@
+import Seo from '@/core/components/Seo'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import CreateKunjunganService from '@/lib/form/components/KunjunganService'
+import CreateSuratDukungan from '@/lib/form/components/SuratDukungan'
+
+export default function pembayaran_tempo() {
+ 
+  return (
+    <>
+      <Seo title='Surat Dukungan - Indoteknik.com' />
+
+      <BasicLayout>
+        <CreateSuratDukungan></CreateSuratDukungan>
+      </BasicLayout>
+    </>
+  )
+}