summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src-migrate/common/components/elements/Modal.tsx4
-rw-r--r--src-migrate/modules/popup-information/index.tsx6
-rw-r--r--src/lib/form/components/KunjunganSales.jsx4
-rw-r--r--src/lib/form/components/KunjunganService.jsx25
-rw-r--r--src/lib/form/components/Merchant.jsx360
-rw-r--r--src/lib/form/components/PembayaranTempo.jsx3
-rw-r--r--src/lib/form/components/RequestForQuotation.jsx4
-rw-r--r--src/lib/form/components/SuratDukungan.jsx339
8 files changed, 420 insertions, 325 deletions
diff --git a/src-migrate/common/components/elements/Modal.tsx b/src-migrate/common/components/elements/Modal.tsx
index 8e488a3a..9c5c73ce 100644
--- a/src-migrate/common/components/elements/Modal.tsx
+++ b/src-migrate/common/components/elements/Modal.tsx
@@ -67,12 +67,12 @@ const Modal = ({
{...variant}
className={modalClassNames}
>
- <div className='flex justify-between py-5 sticky top-0 bg-white'>
+ <div className='flex justify-between py-5 sticky top-0 '>
<div className='font-semibold text-h-sm md:text-title-sm'>
{title}
</div>
{close && (
- <button type='button' onClick={close}>
+ <button className="rounded-full h-10 w-10 flex justify-center bg-white" type='button' onClick={close}>
<XMarkIcon className='w-5 stroke-2' />
</button>
)}
diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index 0d48a92a..78e9dcf2 100644
--- a/src-migrate/modules/popup-information/index.tsx
+++ b/src-migrate/modules/popup-information/index.tsx
@@ -20,12 +20,14 @@ const PagePopupInformation = () => {
<div className='group'>
<Modal
active={active}
- className='w-10/12 md:w-fit'
+ className='!w-fit !bg-transparent !border-none'
close={() => setActive(false)}
mode='desktop'
>
<div>
- <PageContent path='/onbording-popup' />
+ <Link href={'/register'}>
+ <PageContent path='/onbording-popup' />
+ </Link>
<Link href={'/register'} className='btn-yellow w-full mt-2'>
Daftar Sekarang
</Link>
diff --git a/src/lib/form/components/KunjunganSales.jsx b/src/lib/form/components/KunjunganSales.jsx
index 7064f807..7470395a 100644
--- a/src/lib/form/components/KunjunganSales.jsx
+++ b/src/lib/form/components/KunjunganSales.jsx
@@ -8,6 +8,7 @@ import { Controller, useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'
import * as Yup from 'yup'
import createLeadApi from '../api/createLeadApi'
+import PageContent from '@/lib/content/components/PageContent'
const KunjunganSales = () => {
const {
@@ -74,7 +75,7 @@ const KunjunganSales = () => {
<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 grid grid-cols-1 md:grid-cols-2'>
+ <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-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'
@@ -174,6 +175,7 @@ const KunjunganSales = () => {
Simpan
</button>
</form>
+ <PageContent path='/kunjungan-sales' />
</div>
</div>
)
diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx
index 965fbc89..1cb0b446 100644
--- a/src/lib/form/components/KunjunganService.jsx
+++ b/src/lib/form/components/KunjunganService.jsx
@@ -7,6 +7,7 @@ import { Controller, useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'
import * as Yup from 'yup'
import createLeadApi from '../api/createLeadApi'
+import PageContent from '@/lib/content/components/PageContent'
const CreateKunjunganService = () => {
const {
@@ -82,8 +83,10 @@ const CreateKunjunganService = () => {
kami untuk melakukan kunjungan ke tempat Anda di Jabodetabek.
</p>
</div>
+ <div className='w-full grid grid-cols-2 gap-x-2'>
+
<form onSubmit={handleSubmit(onSubmitHandler)}>
- <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+ <div className=''>
<div>
<label className='form-label mb-2'>Nama Perusahan *</label>
<input
@@ -95,7 +98,7 @@ const CreateKunjunganService = () => {
<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 className=''>
<div>
<label className='form-label mb-2'>No. Telp *</label>
<input
@@ -107,7 +110,7 @@ const CreateKunjunganService = () => {
<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 className=''>
<div>
<label className='form-label mb-2'>Alamat*</label>
<input
@@ -119,7 +122,7 @@ const CreateKunjunganService = () => {
<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 className=''>
<div>
<label className='form-label mb-2'>Kota*</label>
<Controller
@@ -130,7 +133,7 @@ const CreateKunjunganService = () => {
<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 className=''>
<div>
<label className='form-label mb-2'>Contact Person*</label>
<input
@@ -142,7 +145,7 @@ const CreateKunjunganService = () => {
<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 className=''>
<div>
<label className='form-label mb-2'>No HP *</label>
<input
@@ -154,7 +157,7 @@ const CreateKunjunganService = () => {
<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 className=''>
<div>
<label className='form-label mb-2'>Alamat Email *</label>
<input
@@ -166,7 +169,7 @@ const CreateKunjunganService = () => {
<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 className=''>
<div>
<label className='form-label mb-2'>
Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan
@@ -177,12 +180,12 @@ const CreateKunjunganService = () => {
</div>
</div>
</div>
- <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+ <div className=''>
<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 className=''>
<div>
<button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
Simpan
@@ -190,6 +193,8 @@ const CreateKunjunganService = () => {
</div>
</div>
</form>
+ <PageContent path='/kunjungan-service' />
+ </div>
</div>
</div>
)
diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
index 24b58a7c..6c1af231 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/form/components/Merchant.jsx
@@ -1,12 +1,13 @@
-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 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 PageContent from '@/lib/content/components/PageContent';
const CreateMerchant = () => {
const {
@@ -14,56 +15,59 @@ const CreateMerchant = () => {
handleSubmit,
formState: { errors },
control,
- reset
+ reset,
} = useForm({
resolver: yupResolver(validationSchema),
- defaultValues
- })
+ defaultValues,
+ });
const list_unit = [
{
value: 'Manufacturing',
- label: 'Manufacturing'
+ label: 'Manufacturing',
},
{
value: 'Hospitality',
- label: 'Hospitality'
+ label: 'Hospitality',
},
{
value: 'Automotive',
- label: 'Automotive'
+ label: 'Automotive',
},
{
value: 'Retail',
- label: 'Retail'
+ label: 'Retail',
},
{
value: 'Maining',
- label: 'Maining'
+ label: 'Maining',
},
{
value: 'Lain - Lain',
- label: 'Lain - Lain'
- }
- ]
- const [cities, setCities] = useState([])
- const [company_unit, setCompany_unit] = useState(list_unit)
+ label: 'Lain - Lain',
+ },
+ ];
+ const [cities, setCities] = useState([]);
+ const [company_unit, setCompany_unit] = useState(list_unit);
- const recaptchaRef = useRef(null)
+ 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()
- }, [])
+ 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()
+ const recaptchaValue = recaptchaRef.current.getValue();
if (!recaptchaValue) {
- toast.error('Catcha harus diisi')
- return
+ toast.error('Catcha harus diisi');
+ return;
}
const data = {
...values,
@@ -89,166 +93,200 @@ const CreateMerchant = () => {
' \r\n No Hp : ' +
values.mobile +
'Keterangan : ' +
- values.description
- }
- const create_leads = await createLeadApi({ data })
+ values.description,
+ };
+ const create_leads = await createLeadApi({ data });
if (create_leads) {
- toast.success('Berhasil menambahkan data')
- reset()
- recaptchaRef.current.reset()
+ toast.success('Berhasil menambahkan data');
+ 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 Merchant</h1>
+ <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
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>
- Penjualan online adalah hal yang HARUS dilakukan mulai sekarang. Perubahan dalam banyak
- industri dan pola pembelian. Gabung dengan platform kami dan mulai penjualan lansung di
- ribuan perusahaan d seluruh Indonesia.{' '}
+ Penjualan online adalah hal yang HARUS dilakukan mulai sekarang.
+ Perubahan dalam banyak industri dan pola pembelian. Gabung dengan
+ platform kami dan mulai penjualan lansung di ribuan perusahaan d
+ seluruh Indonesia.{' '}
</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 className='w-full grid grid-cols-2 gap-x-2'>
+ <form onSubmit={handleSubmit(onSubmitHandler)}>
+ <div className=''>
+ <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>
- <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 className=''>
+ <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>
- <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 className=''>
+ <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>
- <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 className=''>
+ <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>
- <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 className=''>
+ <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>
- </div>
- <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
- <div>
- <label className='form-label mb-2'>Website *</label>
- <input
- {...register('website')}
- placeholder='https://indoteknik.com'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.website?.message}</div>
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>Website *</label>
+ <input
+ {...register('website')}
+ placeholder='https://indoteknik.com'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.website?.message}
+ </div>
+ </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 className=''>
+ <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>
- <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 className=''>
+ <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>
- <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 className=''>
+ <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>
- <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 className=''>
+ <div>
+ <ReCAPTCHA
+ ref={recaptchaRef}
+ sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+ />
+ </div>
</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 className=''>
+ <div>
+ <button
+ type='submit'
+ className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+ >
+ Simpan
+ </button>
+ </div>
</div>
- </div>
- </form>
+ </form>
+ <PageContent path='/daftar-merchant' />
+ </div>
</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'),
+ email: Yup.string()
+ .email('Format harus seperti contoh@email.com')
+ .required('Harus di-isi'),
phone: Yup.string().required('Harus di-isi'),
cp: Yup.string().required('Harus di-isi'),
city: Yup.string().required('Harus di-isi'),
company_unit: Yup.string().required('Harus di-isi'),
address: Yup.string().required('Harus di-isi'),
website: Yup.string().required('Harus di-isi'),
- mobile: Yup.string().required('Harus di-isi')
-})
+ mobile: Yup.string().required('Harus di-isi'),
+});
const defaultValues = {
company: '',
email: '',
@@ -258,7 +296,7 @@ const defaultValues = {
cp: '',
address: '',
website: '',
- mobile: ''
-}
+ mobile: '',
+};
-export default CreateMerchant
+export default CreateMerchant;
diff --git a/src/lib/form/components/PembayaranTempo.jsx b/src/lib/form/components/PembayaranTempo.jsx
index ffdb0961..8c624fe2 100644
--- a/src/lib/form/components/PembayaranTempo.jsx
+++ b/src/lib/form/components/PembayaranTempo.jsx
@@ -6,6 +6,8 @@ import { useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'
import * as Yup from 'yup'
import createLeadApi from '../api/createLeadApi'
+import PageContent from '@/lib/content/components/PageContent'
+
const PembayaranTempo = () => {
const {
@@ -134,6 +136,7 @@ const PembayaranTempo = () => {
<div></div>
</form>
+ <PageContent path='/pembayaran-tempo' />
</div>
</div>
)
diff --git a/src/lib/form/components/RequestForQuotation.jsx b/src/lib/form/components/RequestForQuotation.jsx
index 31efb5d6..fa526d5f 100644
--- a/src/lib/form/components/RequestForQuotation.jsx
+++ b/src/lib/form/components/RequestForQuotation.jsx
@@ -9,6 +9,7 @@ import { toast } from 'react-hot-toast'
import * as Yup from 'yup'
import createLeadApi from '../api/createLeadApi'
import getFileBase64 from '@/core/utils/getFileBase64'
+import PageContent from '@/lib/content/components/PageContent'
const RequestForQuotation = () => {
const {
@@ -79,7 +80,7 @@ const RequestForQuotation = () => {
<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'>
+ <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-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'
@@ -176,6 +177,7 @@ const RequestForQuotation = () => {
Simpan
</button>
</form>
+ <PageContent path='/request-for-quotation' />
</div>
</div>
)
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
index 360dd838..d73c3fab 100644
--- a/src/lib/form/components/SuratDukungan.jsx
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -1,12 +1,14 @@
-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/createLeadApi'
+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/createLeadApi';
+
+import PageContent from '@/lib/content/components/PageContent';
const CreateSuratDukungan = () => {
const {
@@ -14,30 +16,33 @@ const CreateSuratDukungan = () => {
handleSubmit,
formState: { errors },
control,
- reset
+ reset,
} = useForm({
resolver: yupResolver(validationSchema),
- defaultValues
- })
- const [cities, setCities] = useState([])
- const [company_unit, setCompany_unit] = useState([])
+ defaultValues,
+ });
+ const [cities, setCities] = useState([]);
+ const [company_unit, setCompany_unit] = useState([]);
- const recaptchaRef = useRef(null)
+ 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()
- }, [])
+ 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()
+ const recaptchaValue = recaptchaRef.current.getValue();
if (!recaptchaValue) {
- toast.error('Catcha harus diisi')
- return
+ toast.error('Catcha harus diisi');
+ return;
}
const data = {
...values,
@@ -61,19 +66,21 @@ const CreateSuratDukungan = () => {
' \r\n Alamat 2 : ' +
values.address2 +
'Keterangan : ' +
- values.description
- }
+ values.description,
+ };
- const create_leads = await createLeadsApi({ data })
+ const create_leads = await createLeadsApi({ data });
if (create_leads) {
- toast.success('Berhasil menambahkan alamat')
- reset()
- recaptchaRef.current.reset()
+ 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>
+ <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
className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
@@ -81,132 +88,168 @@ const CreateSuratDukungan = () => {
>
<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'>
- <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'>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'>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'>NPWP *</label>
- <input
- {...register('npwp')}
- placeholder='npwp number'
- type='text'
- 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'>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 className=' w-full grid grid-cols-2 gap-x-2'>
+ <div className='group'>
+ <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>
- </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>
+ <form onSubmit={handleSubmit(onSubmitHandler)}>
+ <div className=''>
+ <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=''>
+ <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=''>
+ <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=''>
+ <div>
+ <label className='form-label mb-2'>NPWP *</label>
+ <input
+ {...register('npwp')}
+ placeholder='npwp number'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.npwp?.message}
+ </div>
+ </div>
+ </div>
+ <div className=''>
+ <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='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
+ <h1>Data Peserta</h1>
+ </div>
+ <div className=''>
+ <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=''>
+ <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='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'>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 className=''>
+ <div>
+ <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>
+ </div>
</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 className=''>
+ <div>
+ <ReCAPTCHA
+ ref={recaptchaRef}
+ sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+ />
+ </div>
+ </div>
+ <div className=''>
+ <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>
- </form>
+ <PageContent path='/surat-dukungan'/>
+ </div>
</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'),
+ 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')
-})
+ address2: Yup.string().required('Harus di-isi'),
+});
const defaultValues = {
company: '',
email: '',
@@ -215,7 +258,7 @@ const defaultValues = {
npwp: '',
email: '',
address: '',
- address2: ''
-}
+ address2: '',
+};
-export default CreateSuratDukungan
+export default CreateSuratDukungan;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 22:28:51 +0000