diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2025-01-09 17:09:17 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2025-01-09 17:09:17 +0700 |
| commit | e1ecdbe5dd1857d1aa2f3317c0d763241ebaa6e5 (patch) | |
| tree | 0a33ef0d6db61b1ac102f40b3abd8a6c65c929cc /src/lib/form/components | |
| parent | aa6d766e6dc3d033cbcb864762d77377121d446a (diff) | |
<iman> update code
Diffstat (limited to 'src/lib/form/components')
| -rw-r--r-- | src/lib/form/components/AccountSwitch.jsx | 60 | ||||
| -rw-r--r-- | src/lib/form/components/Merchant.jsx | 1814 |
2 files changed, 0 insertions, 1874 deletions
diff --git a/src/lib/form/components/AccountSwitch.jsx b/src/lib/form/components/AccountSwitch.jsx deleted file mode 100644 index b9bf34b1..00000000 --- a/src/lib/form/components/AccountSwitch.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import Link from 'next/link'; -import Image from '~/components/ui/image'; -import whatsappUrl from '@/core/utils/whatsappUrl'; -import { useEffect, useState } from 'react'; -import odooApi from '@/core/api/odooApi'; -import useDevice from '@/core/hooks/useDevice'; -import useAuth from '@/core/hooks/useAuth'; -import axios from 'axios'; -import { toast } from 'react-hot-toast'; -import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'; - -const FinishTempo = ({ query }) => { - const [data, setData] = useState(); - const [transactionData, setTransactionData] = useState(); - const { isDesktop, isMobile } = useDevice(); - const auth = useAuth(); - - return ( - <div className='container flex flex-col items-center gap-4'> - <div - className={`flex ${ - isMobile ? 'w-full' : 'w-2/3' - } justify-center items-center`} - > - <h1 - className={`text-red-500 text-center py-4 font-semibold ${ - isMobile ? 'text-lg' : 'text-3xl' - }`} - > - Form Merchant Kamu Gagal Dilakukan - </h1> - </div> - <Image - src='/images/ICON_TEMPO.png' - alt='Registrasi Tempo' - width={isMobile ? 300 : 550} - height={isMobile ? 300 : 550} - /> - - <div - className={`mt-2 text-center opacity-75 leading-6 p-4 md:p-0 ${ - isMobile ? 'w-full text-sm' : 'w-4/5 text-base' - }`} - > - Terima kasih atas minat anda untuk mendaftar merchant, namun sayangnya - akun anda bukan merupakan akun bisnis. Segera ubah akun anda menjadi - Bisnis untuk menggunakan fitur ini - </div> - <Link - href={'/my/profile'} - className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center' - > - Ubah Akun - <ChevronRightIcon className='w-5' /> - </Link> - </div> - ); -}; - -export default FinishTempo; diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx deleted file mode 100644 index 95317dfb..00000000 --- a/src/lib/form/components/Merchant.jsx +++ /dev/null @@ -1,1814 +0,0 @@ -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; -import cityApi from '@/lib/address/api/cityApi'; -import stateApi from '@/lib/address/api/stateApi.js'; -import districtApi from '@/lib/address/api/districtApi'; -import subDistrictApi from '@/lib/address/api/subDistrictApi'; -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 createMerchantApi from '../api/createMerchantApi'; -import addressApi from '@/lib/address/api/addressApi'; -import PageContent from '@/lib/content/components/PageContent'; -import { useRouter } from 'next/router'; -import useAuth from '@/core/hooks/useAuth'; -import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'; -import { EyeIcon } from '@heroicons/react/24/outline'; -import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; -import Image from 'next/image'; -import ImageBanner from '~/components/ui/image'; -import { ChevronRightIcon } from '@heroicons/react/24/outline'; -import MobileView from '@/core/components/views/MobileView'; -import DesktopView from '@/core/components/views/DesktopView'; -import getFileBase64 from '@/core/utils/getFileBase64'; -import odooApi from '~/libs/odooApi'; -const CreateMerchant = () => { - const { - register, - handleSubmit, - formState: { errors }, - control, - reset, - watch, - setValue, - getValues, - } = useForm({ - resolver: yupResolver(validationSchema), - defaultValues, - }); - const list_unit = [ - { - value: 'Manufacturing', - label: 'Manufacturing', - }, - { - value: 'Hospitality', - label: 'Hospitality', - }, - { - value: 'Automotive', - label: 'Automotive', - }, - { - value: 'Retail', - label: 'Retail', - }, - { - value: 'Maining', - label: 'Maining', - }, - { - value: 'Lain - Lain', - label: 'Lain - Lain', - }, - ]; - const [state, setState] = useState([]); - const [cities, setCities] = useState([]); - const [districts, setDistricts] = useState([]); - const [fileNames, setFileNames] = useState({}); - const [DeatailFile, setDetailFile] = useState({}); - const [subDistricts, setSubDistricts] = useState([]); - const [zips, setZips] = useState([]); - const [isExample, setIsExample] = useState(false); - const [BannerMerchant, setBannerMerchant] = useState(); - const [isPkp, setIsPkp] = useState(false); - - const recaptchaRef = useRef(null); - const router = useRouter(); - - useEffect(() => { - const getBanner = async () => { - const get = await odooApi( - 'GET', - '/api/v1/banner?type=banner-form-merchant' - ); - // setBannerMerchant(get[0].image); - setBannerMerchant( - 'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431' - ); - }; - getBanner(); - }, []); - - const auth = useAuth(); - if (auth == false) { - router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`); - } - - useEffect(() => { - const loadProfile = async () => { - try { - const dataProfile = await addressApi({ - id: auth.parentId ? auth.parentId : auth.partnerId, - }); - if (dataProfile.companyType == 'pkp') { - setIsPkp(true); - } - setValue('company', dataProfile?.name); - setValue('address', dataProfile?.alamatBisnis); - setValue('state', parseInt(dataProfile.stateId.id)); - setValue('city', parseInt(dataProfile.city.id)); - setValue('district', parseInt(dataProfile.district.id)); - setValue('subDistrict', parseInt(dataProfile.subDistrict.id)); - setValue('zip', parseInt(dataProfile.zip)); - } catch (error) { - console.error('Error loading profile:', error); - } - }; - - loadProfile(); - }, [auth?.parentId]); - - useEffect(() => { - const loadState = async () => { - let dataState = await stateApi({ tempo: false }); - dataState = dataState.map((state) => ({ - value: state.id, - label: state.name, - })); - setState(dataState); - }; - loadState(); - }, []); - - const watchState = watch('state'); - useEffect(() => { - if (auth == false) { - return; - } - if (watchState) { - // setValue('city', ''); - const loadCities = async () => { - let dataCities = await cityApi({ stateId: watchState }); - dataCities = dataCities?.map((city) => ({ - value: city.id, - label: city.name, - })); - setCities(dataCities); - }; - loadCities(); - } - }, [auth, watchState]); - - const watchCity = watch('city'); - - useEffect(() => { - if (watchCity) { - setValue('district', ''); - const loadDistricts = async () => { - let dataDistricts = await districtApi({ cityId: watchCity }); - dataDistricts = dataDistricts.map((district) => ({ - value: district.id, - label: district.name, - })); - setDistricts(dataDistricts); - }; - loadDistricts(); - } - }, [watchCity]); - - const watchDistrict = watch('district'); - useEffect(() => { - if (watchDistrict) { - setValue('subDistrict', ''); - const loadSubDistricts = async () => { - let dataSubDistricts = await subDistrictApi({ - districtId: watchDistrict, - }); - dataSubDistricts = dataSubDistricts.map((district) => ({ - value: district.id, - label: district.name, - })); - setSubDistricts(dataSubDistricts); - }; - loadSubDistricts(); - } - }, [watchDistrict]); - - const watchsubDistrict = watch('subDistrict'); - - useEffect(() => { - let kelurahan = ''; - let kecamatan = ''; - - if (watchDistrict) { - setValue('zip', ''); - for (const data in districts) { - if (districts[data].value == watchDistrict) { - kecamatan = districts[data].label.toLowerCase(); - } - } - } - - if (watchsubDistrict) { - for (const data in subDistricts) { - if (subDistricts[data].value == watchsubDistrict) { - kelurahan = subDistricts[data].label.toLowerCase(); - } - } - const loadZip = async () => { - const response = await fetch( - `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}` - ); - - let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses - - const result = await response.json(); - - // Filter dan map data - const dataZips = result.result - .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan - .filter((zip) => { - // Pastikan zip.kodepos belum ada di dataMasuk - if (dataMasuk.includes(zip.kodepos)) { - return false; // Jika sudah ada, maka skip (tidak akan ditambahkan) - } else { - dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk - return true; // Tambahkan zip ke hasil - } - }) - .map((zip) => ({ - value: parseInt(zip.kodepos), - label: zip.kodepos, - })); - - setZips(dataZips); // Set hasil ke state - }; - - loadZip(); - } - }, [watchsubDistrict, subDistricts]); - const onSubmitHandler = async (values) => { - const npwp = DeatailFile.npwp; - const sppkp = DeatailFile.sppkp; - const dokumenKtpDirut = DeatailFile.dokumenKtpDirut; - const kartuNama = DeatailFile.kartuNama; - const suratPernyataan = DeatailFile.suratPernyataan; - const fotoKantor = DeatailFile.fotoKantor; - const dataProduk = DeatailFile.dataProduk; - const pricelist = DeatailFile.pricelist; - if (!npwp && isPkp) { - toast.error('NPWP wajib di tambahkan'); - return; - } - if (!sppkp && isPkp) { - toast.error('SPPKP wajib di tambahkan'); - return; - } - if (!dokumenKtpDirut && !isPkp) { - toast.error('KTP Dirut/Direktur wajib di tambahkan'); - return; - } - if (!fotoKantor) { - toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan'); - return; - } - if (!pricelist) { - toast.error('Pricelist wajib di tambahkan'); - return; - } - const toastId = toast.loading('Mengirimkan formulir merchant...'); - const data = { - ...values, - name_merchant: 'Form Merchant - ' + values.company, - pic_merchant: values.PICName, - partner_id: auth.partnerId, - address: values.address, - state: values.state, - city: values.city, - district: values.district, - subDistrict: values.subDistrict, - zip: values.zip, - bank_name: values.bank, - rekening_name: values.rekening, - account_number: values.accountNumber, - email_company: values.email, - email_sales: values.emailSales, - email_finance: values.emailFinance, - phone: values.phone, - mobile: values.mobile, - harga_tayang: values.hargaTayang, - description: - 'Nama Perusahaan : ' + - values.company + - ' \r\n Alamat : ' + - values.address + - ' \r\n Kota : ' + - values.city + - ' \r\n Telepon: ' + - values.phone + - ' \r\n Email : ' + - values.email + - ' \r\n No Hp : ' + - values.mobile, - file_dokumenKtpDirut: dokumenKtpDirut ? dokumenKtpDirut : '', - file_kartuNama: kartuNama ? kartuNama : '', - file_npwp: npwp ? npwp : '', - file_sppkp: sppkp ? sppkp : '', - file_suratPernyataan: suratPernyataan ? suratPernyataan : '', - file_fotoKantor: fotoKantor ? fotoKantor : '', - file_dataProduk: dataProduk ? dataProduk : '', - file_pricelist: pricelist ? pricelist : '', - }; - // const formData = new FormData(); - // formData.append('npwp', values.npwp[0]); - const create_leads = await createMerchantApi({ data }); - if (create_leads) { - toast.dismiss(toastId); - toast.success('Berhasil menambahkan data'); - reset(); - router.push('/'); - } else { - toast.dismiss(toastId); - toast.error('Gagal menambahkan data'); - } - }; - - // const DownLoadSurat = () => { - // download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx - // }; - - if (!auth) { - return; - } - // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook - - const handleFileChange = async (event) => { - let fileBase64 = ''; - const file = event.target.files[0]; - - if (file.size > 500000) { - try { - const toastId = toast.loading('mencoba mengompresi file...'); - // Compress image file - const options = { - maxSizeMB: 0.5, // Target size in MB - maxWidthOrHeight: 1920, // Adjust as needed - useWebWorker: true, - }; - const compressedFile = await imageCompression(file, options); - toast.success('berhasil mengompresi file', { duration: 4000 }); - // Convert compressed file to Base64 - fileBase64 = await getFileBase64(compressedFile); - } catch (error) { - toast.error('Gagal mengompresi file', { duration: 4000 }); - } - } else { - // Convert file to Base64 - fileBase64 = await getFileBase64(file); - } - const fieldName = event.target.name; // Nama input file - setDetailFile((prev) => ({ - ...prev, - [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state - })); - setFileNames((prev) => ({ - ...prev, - [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state - })); - }; - return ( - <> - <BottomPopup - className='' - title='Contoh SPPKP' - active={isExample} - close={() => setIsExample(false)} - > - <div className='flex p-2'> - <Image - src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg' - alt='Contoh SPPKP' - className='w-full h-full ' - width={800} - height={800} - quality={85} - /> - </div> - </BottomPopup> - <DesktopView> - <div className='container flex flex-col items-star py-4'> - {BannerMerchant && ( - <ImageBanner - src={BannerMerchant} - alt='FORM MERCHANT' - width={1000} - height={160} - className='w-full mt-6' - /> - )} - <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'> - Form Merchant - </h1> - <div className='text-center mb-6'> - Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim - magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin - ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam - suspendisse. - </div> - <h2 className='text-xs md:text-title-sm font-semibold mb-6'> - Informasi Perusahaan - </h2> - - <div className='w-full mt-4'> - <form - onSubmit={handleSubmit(onSubmitHandler)} - className='flex flex-col gap-4' - > - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Nama Perusahaan - </label> - <span className='opacity-65 text-xs'> - Isi detail perusahaan sesuai dengan nama yang terdaftar{' '} - </span> - </div> - <div className='w-3/5'> - <input - {...register('company')} - placeholder='Masukkan nama perusahaan' - type='text' - className='form-input' - /> - <span className='opacity-65 text-xs'> - Format: PT. INDOTEKNIK DOTCOM GEMILANG - </span> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.company?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'>Nama PIC</label> - <span className='opacity-65 text-xs'> - isi dengan nama sales / penanggung jawab - </span> - </div> - <div className='w-3/5'> - <input - {...register('PICName')} - placeholder='Masukkan nama PIC' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.PICName?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Alamat Perusahaan - </label> - <span className='opacity-65 text-xs'> - Alamat sesuai dengan alamat perusahaan - </span> - </div> - <div className='w-3/5 flex flex-col'> - <div> - <input - {...register('address')} - placeholder='Masukkan alamat lengkap perusahaan' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.address?.message} - </div> - </div> - <div className='flex flex-row w-full justify-between gap-2'> - <div className='provinsi w-full'> - <Controller - name='state' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={state} - placeholder='Provinsi' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.state?.message} - </div> - </div> - <div className='kab w-full'> - <Controller - name='city' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={cities} - disabled={!watchState} - placeholder='Kab/Kota' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.city?.message} - </div> - </div> - <div className='kec w-full'> - <Controller - name='district' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={districts} - disabled={!watchState || !watchCity} - placeholder='Kecamatan' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.district?.message} - </div> - </div> - <div className='kel w-full'> - <Controller - name='subDistrict' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={subDistricts} - disabled={!watchDistrict} - placeholder='Kelurahan' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.subDistrict?.message} - </div> - </div> - <div className='zip w-full'> - <Controller - name='zip' - control={control} - render={(props) => ( - <> - {/* Jika zips tidak kosong, tampilkan dropdown */} - {zips.length > 0 ? ( - <HookFormSelect - {...props} - options={zips} - disabled={!watchsubDistrict} - placeholder='Zip' - /> - ) : ( - // Jika zips kosong, tampilkan input manual - <input - {...register('zip')} - placeholder='Kode Pos' - type='number' - className='form-input' - disabled={!watchsubDistrict} - /> - )} - </> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.zip?.message} - </div> - </div> - </div> - </div> - </div> - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'>Data Bank</label> - <span className='opacity-65 text-xs'> - Isi detail data bank perusahaan anda - </span> - </div> - <div className='w-3/5 flex flex-row gap-2'> - <div> - <input - {...register('bank')} - placeholder='Nama bank' - type='text' - className='form-input' - /> - <span className='opacity-65 text-xs'> - Format: BCA, Mandiri, CIMB, BNI dll - </span> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.bank?.message} - </div> - </div> - <div> - <input - {...register('rekening')} - placeholder='Nama Rekening' - type='text' - className='form-input' - /> - <span className='opacity-65 text-xs'>Format: John Doe</span> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.rekening?.message} - </div> - </div> - <div> - <input - {...register('accountNumber')} - placeholder='Nomor Rekening Bank' - type='number' - className='form-input' - /> - <span className='opacity-65 text-xs'> - Format: 01234567896 - </span> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.accountNumber?.message} - </div> - </div> - </div> - </div> - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Email Perusahaan - </label> - </div> - <div className='w-3/5'> - <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-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'>Email Sales</label> - </div> - <div className='w-3/5'> - <input - {...register('emailSales')} - placeholder='contoh@email.com' - type='email' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.emailSales?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Email Finance - </label> - </div> - <div className='w-3/5'> - <input - {...register('emailFinance')} - placeholder='contoh@email.com' - type='email' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.emailFinance?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - No. Telepon Perusahaan - </label> - <span className='opacity-65 text-xs'> - Isi no telepon perusahaan yang sesuai - </span> - </div> - <div className='w-3/5'> - <input - {...register('phone')} - placeholder='Masukkan nomor telepon perusahaan' - type='tel' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.phone?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - No. Handphone - </label> - <span className='opacity-65 text-xs'> - Isi no handphone perusahaan yang sesuai - </span> - </div> - <div className='w-3/5'> - <input - {...register('mobile')} - placeholder='Masukkan nomor handphone' - type='tel' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.mobile?.message} - </div> - </div> - </div> - - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Harga Tayang (HET){' '} - <span className=' opacity-60'>(Opsional)</span> - </label> - </div> - <div className='w-3/5'> - <input - {...register('hargaTayang')} - placeholder='Masukkan Harga Tayang (HET)' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.hargaTayang?.message} - </div> - </div> - </div> - - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - NPWP{' '} - {!isPkp && <span className=' opacity-60'>(Opsional)</span>} - </label> - <span className='opacity-65 text-xs'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className='w-3/5 flex flex-col justify-start items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='npwp' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('npwp')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='npwp' - onChange={(e) => { - handleFileChange(e); // Untuk update UI (opsional) - }} - aria-invalid={errors.npwp?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.npwp} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.npwp?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row items-start'> - <div className='w-2/5 flex flex-row justify-between items-center'> - <div> - <label className='form-label text-nowrap'> - SPPKP{' '} - {!isPkp && ( - <span className=' opacity-60'>(Opsional)</span> - )} - </label> - <span className='opacity-65 text-xs'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div - onClick={() => setIsExample(!isExample)} - className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400' - > - <EyeIcon className={`w-4 mr-2 `} /> - - <p className='font-light text-xs '>Lihat Contoh</p> - </div> - </div> - <div className='w-3/5 flex flex-col justify-between items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='sppkp' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('sppkp')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='sppkp' - onChange={handleFileChange} - aria-invalid={errors.sppkp?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.sppkp} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.sppkp?.message} - </div> - </div> - </div> - - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - KTP Dirut/Direktur{' '} - {isPkp && <span className=' opacity-60'>(Opsional)</span>} - </label> - <span className='opacity-65 text-xs'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className='w-3/5 flex flex-col justify-start items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='dokumenKtpDirut' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.dokumenKtpDirut - ? 'Ubah Dokumen' - : 'Upload Dokumen'} - </label> - <input - {...register('dokumenKtpDirut')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='dokumenKtpDirut' - onChange={handleFileChange} - aria-invalid={errors.dokumenKtpDirut?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.dokumenKtpDirut} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.dokumenKtpDirut?.message} - </div> - </div> - </div> - - <div className='w-full flex flex-row'> - <div className='w-2/5'> - <label className='form-label text-nowrap'> - Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '} - </label> - <span className='opacity-65 text-xs'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className='w-3/5 flex flex-col justify-start items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='kartuNama' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('kartuNama')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='kartuNama' - onChange={handleFileChange} - aria-invalid={errors.kartuNama?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.kartuNama} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.kartuNama?.message} - </div> - </div> - </div> - - <div className='w-full flex flex-row items-start '> - <div className='w-2/5 flex flex-row justify-between items-center '> - <div> - <label className='form-label text-nowrap'> - Surat Pernyataan Nomor Rekening{' '} - <span className=' opacity-60'>(Opsional)</span> - </label> - <span className='opacity-65 text-xs'> - Wajib diisi jika nomor rekening berbeda dengan nama - perusahaan - </span> - </div> - <a - href='/file/Surat Pernyataan Nomor Rekening.docx' - download='Surat Pernyataan Nomor Rekening.docx' - className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400' - > - <p className='font-light text-xs'>Download Template</p> - </a> - </div> - <div className='w-3/5 flex flex-col justify-between items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='suratPernyataan' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.suratPernyataan - ? 'Ubah Dokumen' - : 'Upload Dokumen'} - </label> - <input - {...register('suratPernyataan')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='suratPernyataan' - onChange={handleFileChange} - aria-invalid={errors.suratPernyataan?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.suratPernyataan} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.suratPernyataan?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row items-start '> - <div className='w-2/5 flex flex-col justify-start items-start '> - <label className='form-label text-nowrap'> - Foto Gudang / Kantor Bagian Depan - </label> - <span className='opacity-65 text-xs'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className='w-3/5 flex flex-col justify-between items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='fotoKantor' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('fotoKantor')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='fotoKantor' - onChange={handleFileChange} - aria-invalid={errors.fotoKantor?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.fotoKantor} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.fotoKantor?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row items-start '> - <div className='w-2/5 flex flex-col justify-start items-start '> - <label className='form-label text-nowrap'> - Data Produk (Item Name, Gambar, Deskripsi){' '} - <span className=' opacity-60'>(Opsional)</span>{' '} - </label> - <span className='opacity-65 text-xs'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className='w-3/5 flex flex-col justify-between items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='dataProduk' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('dataProduk')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='dataProduk' - onChange={handleFileChange} - aria-invalid={errors.dataProduk?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.dataProduk} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.fotoKantor?.message} - </div> - </div> - </div> - <div className='w-full flex flex-row items-start '> - <div className='w-2/5 flex flex-col justify-start items-start '> - <label className='form-label text-nowrap'>Pricelist</label> - <span className='opacity-65 text-xs'> - Pastikan dokumen yang anda upload sudah benar - </span> - </div> - <div className='w-3/5 flex flex-col justify-between items-start'> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='pricelist' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('pricelist')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='pricelist' - onChange={handleFileChange} - aria-invalid={errors.pricelist?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.pricelist} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.pricelist?.message} - </div> - </div> - </div> - <div className=''> - {/* <div> - <ReCAPTCHA - ref={recaptchaRef} - sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} - /> - </div> */} - </div> - <div className='flex justify-start'> - {/* <Button - colorScheme='red' - className='w-full md:w-fit' - type='submit' - > - Daftar Merchant{' '} - {<ChevronRightIcon className='w-5' color='white' />} - </Button> */} - <div> - <button - type='submit' - className='btn-light bg-red-500 rounded-lg text-white w-full md:w-fit mt-6 ml-0 md:ml-auto flex justify-between hover:bg-red-400' - > - <span>Daftar Merchant </span> - </button> - </div> - </div> - </form> - <PageContent path='/daftar-merchant' /> - </div> - </div> - </DesktopView> - <MobileView> - <div className='container flex flex-col items-star py-4'> - {BannerMerchant && ( - <ImageBanner - src={BannerMerchant} - alt='FORM MERCHANT' - width={1000} - height={160} - className='w-full mt-6' - /> - )} - <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'> - Form Merchant - </h1> - <div className='text-center mb-6'> - Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim - magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin - ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam - suspendisse. - </div> - <h2 className='font-semibold mb-6'>Informasi Perusahaan</h2> - - <div className='w-full mt-4'> - <form - onSubmit={handleSubmit(onSubmitHandler)} - className='flex flex-col gap-4' - > - <div className='w-full flex flex-col'> - <div className='w-full'> - <label className='form-label text-nowrap'> - Nama Perusahaan - </label> - <input - {...register('company')} - placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.company?.message} - </div> - <span className='opacity-65 text-xs'> - Isi detail perusahaan sesuai dengan nama yang terdaftar{' '} - </span> - </div> - </div> - <div className='w-full flex flex-col'> - <div className='w-full'> - <label className='form-label text-nowrap'>Nama PIC</label> - <input - {...register('PICName')} - placeholder='Masukkan Nama PIC ' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.PICName?.message} - </div> - <span className='opacity-65 text-xs'> - Isi dengan nama sales / penanggung jawab - </span> - </div> - </div> - <div className='w-full flex flex-col'> - <div className='w-full'> - <label className='form-label text-nowrap'> - Alamat Perusahaan - </label> - <input - {...register('address')} - placeholder='Masukkan alamat lengkap perusahaan' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.address?.message} - </div> - <div className='flex flex-row w-full justify-between gap-2'> - <div className='provinsi w-full'> - <Controller - name='state' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={state} - placeholder='Provinsi' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.state?.message} - </div> - </div> - <div className='kab w-full'> - <Controller - name='city' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={cities} - disabled={!watchState} - placeholder='Kab/Kota' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.city?.message} - </div> - </div> - </div> - <div className='flex flex-row w-full justify-between gap-2'> - <div className='kec w-full'> - <Controller - name='district' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={districts} - disabled={!watchState || !watchCity} - placeholder='Kecamatan' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.district?.message} - </div> - </div> - <div className='kel w-full'> - <Controller - name='subDistrict' - control={control} - render={(props) => ( - <HookFormSelect - {...props} - options={subDistricts} - disabled={!watchDistrict} - placeholder='Kelurahan' - /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.subDistrict?.message} - </div> - </div> - <div className='zip w-full'> - <Controller - name='zip' - control={control} - render={(props) => ( - <> - {zips.length > 0 ? ( - <HookFormSelect - {...props} - options={zips} - disabled={!watchsubDistrict} - placeholder='Zip' - /> - ) : ( - <input - {...register('zip')} - placeholder='Kode Pos' - type='number' - className='form-input' - disabled={!watchsubDistrict} - /> - )} - </> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.zip?.message} - </div> - </div> - </div> - </div> - <span className='opacity-65 text-xs'> - Alamat sesuai dengan alamat perusahaan - </span> - </div> - <div className='w-full flex flex-col'> - <label className='form-label text-nowrap'>Data Bank</label> - <div className='w-full flex flex-row gap-2'> - <div> - <input - {...register('bank')} - placeholder='Nama bank' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.bank?.message} - </div> - </div> - <div> - <input - {...register('rekening')} - placeholder='Nama Rekening' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.rekening?.message} - </div> - </div> - <div> - <input - {...register('accountNumber')} - placeholder='Nomor Rekening Bank' - type='number' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.accountNumber?.message} - </div> - </div> - </div> - <span className='opacity-65 text-xs'> - Isi detail data bank perusahaan anda - </span> - </div> - <div className='w-full flex flex-col'> - <label className='form-label text-nowrap'> - Email Perusahaan - </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> - <span className='opacity-65 text-xs'> - Isi detail perusahaan sesuai dengan data yang terdaftar - </span> - </div> - <div className='w-full flex flex-col'> - <label className='form-label text-nowrap'>Email Sales</label> - <input - {...register('emailSales')} - placeholder='contoh@email.com' - type='email' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.emailSales?.message} - </div> - <span className='opacity-65 text-xs'> - Isi detail perusahaan sesuai dengan data yang terdaftar - </span> - </div> - <div className='w-full flex flex-col'> - <label className='form-label text-nowrap'>Email Finance</label> - <input - {...register('emailFinance')} - placeholder='contoh@email.com' - type='email' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.emailFinance?.message} - </div> - <span className='opacity-65 text-xs'> - Isi detail perusahaan sesuai dengan data yang terdaftar - </span> - </div> - <div className='w-full flex flex-col'> - <label className='form-label text-nowrap'> - No. Telepon Perusahaan - </label> - <input - {...register('phone')} - placeholder='Format: 08123456789 / (021) 123 4567' - type='tel' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.phone?.message} - </div> - <span className='opacity-65 text-xs'> - Isi detail perusahaan sesuai dengan data yang terdaftar - </span> - </div> - <div className='w-full flex flex-col'> - <label className='form-label text-nowrap'>No. Handphone</label> - <input - {...register('mobile')} - placeholder='Masukkan nomor handphone' - type='tel' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.mobile?.message} - </div> - <span className='opacity-65 text-xs'> - Isi detail perusahaan sesuai dengan data yang terdaftar - </span> - </div> - <div className='w-full flex flex-col'> - <label className='form-label text-nowrap'> - Harga Tayang (HET){' '} - <span className=' opacity-60'>(Opsional)</span> - </label> - <input - {...register('hargaTayang')} - placeholder='Masukkan Harga Tayang (HET)' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.hargaTayang?.message} - </div> - </div> - - <div className='w-full flex flex-col gap-2'> - <label className='form-label text-nowrap'> - NPWP{' '} - {!isPkp && <span className=' opacity-60'>(Opsional)</span>} - </label> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='npwp' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('npwp')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='npwp' - onChange={(e) => { - handleFileChange(e); // Untuk update UI (opsional) - }} - aria-invalid={errors.npwp?.message} - /> - <span className=' text-gray-600 line-clamp-2'> - {fileNames.npwp} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.npwp?.message} - </div> - </div> - <div className='w-full flex flex-col gap-2 items-start '> - <div className='flex flex-row w-full justify-between items-center '> - <label className='form-label text-nowrap'> - SPPKP{' '} - {!isPkp && <span className=' opacity-60'>(Opsional)</span>} - </label> - <div - onClick={() => setIsExample(!isExample)} - className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400' - > - <EyeIcon className={`w-4 mr-2 `} /> - - <p className='font-light text-xs '>Lihat Contoh</p> - </div> - </div> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='sppkp' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('sppkp')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='sppkp' - onChange={handleFileChange} - aria-invalid={errors.sppkp?.message} - /> - <span className=' text-gray-600 line-clamp-2'> - {fileNames.sppkp} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.sppkp?.message} - </div> - </div> - - <div className='w-full flex flex-col gap-2'> - <label className='form-label text-nowrap'> - KTP Dirut/Direktur{' '} - {isPkp && <span className=' opacity-60'>(Opsional)</span>} - </label> - <div className='flex flex-row items-start justify-start gap-2 '> - <label - htmlFor='dokumenKtpDirut' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.dokumenKtpDirut - ? 'Ubah Dokumen' - : 'Upload Dokumen'} - </label> - <input - {...register('dokumenKtpDirut')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='dokumenKtpDirut' - onChange={handleFileChange} - aria-invalid={errors.dokumenKtpDirut?.message} - /> - <span className=' text-gray-600 line-clamp-2'> - {fileNames.dokumenKtpDirut} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.dokumenKtpDirut?.message} - </div> - </div> - - <div className='w-full flex flex-col gap-2'> - <label className='form-label text-nowrap'> - Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '} - </label> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='kartuNama' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('kartuNama')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='kartuNama' - onChange={handleFileChange} - aria-invalid={errors.kartuNama?.message} - /> - <span className=' text-gray-600 line-clamp-2'> - {fileNames.kartuNama} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.kartuNama?.message} - </div> - </div> - - <div className='w-full flex flex-col gap-2 items-start '> - <div className='flex flex-row w-full justify-between items-center'> - <label className='form-label text-wrap'> - Surat Pernyataan Nomor Rekening{' '} - <span className=' opacity-60'>(Opsional)</span> - </label> - <a - href='/file/Surat Pernyataan Nomor Rekening.docx' - download='Surat Pernyataan Nomor Rekening.docx' - className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400' - > - <p className='font-light text-xs text-nowrap'> - Download Template - </p> - </a> - </div> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='suratPernyataan' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.suratPernyataan - ? 'Ubah Dokumen' - : 'Upload Dokumen'} - </label> - <input - {...register('suratPernyataan')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='suratPernyataan' - onChange={handleFileChange} - aria-invalid={errors.suratPernyataan?.message} - /> - <span className=' text-gray-600 line-clamp-2'> - {fileNames.suratPernyataan} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.suratPernyataan?.message} - </div> - </div> - <div className='w-full flex flex-col gap-2 items-start '> - <label className='form-label text-nowrap'> - Foto Gudang / Kantor Bagian Depan - </label> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='fotoKantor' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('fotoKantor')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='fotoKantor' - onChange={handleFileChange} - aria-invalid={errors.fotoKantor?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.fotoKantor} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.fotoKantor?.message} - </div> - </div> - <div className='w-full flex flex-col gap-2 items-start '> - <label className='form-label text-nowrap'> - Data Produk (Item Name, Gambar, Deskripsi){' '} - <span className=' opacity-60'>(Opsional)</span>{' '} - </label> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='dataProduk' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('dataProduk')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='dataProduk' - onChange={handleFileChange} - aria-invalid={errors.dataProduk?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.dataProduk} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.fotoKantor?.message} - </div> - </div> - <div className='w-full flex flex-col gap-2 items-start '> - <label className='form-label text-nowrap'>Pricelist</label> - <div className='flex flex-row items-start justify-start gap-2'> - <label - htmlFor='pricelist' - className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded' - > - {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'} - </label> - <input - {...register('pricelist')} - type='file' - className='form-input hidden' - accept='.pdf,.png,.jpg,.jpeg' - id='pricelist' - onChange={handleFileChange} - aria-invalid={errors.pricelist?.message} - /> - <span className='mt-2 text-gray-600 line-clamp-2'> - {fileNames.pricelist} - </span> - </div> - <span className='text-xs opacity-60 text-red-500'> - Format: pdf, jpeg, jpg, png. max file size 2MB - </span> - - <div className='text-caption-2 text-danger-500 mt-1'> - {errors.pricelist?.message} - </div> - </div> - <div className=''> - {/* <div> - <ReCAPTCHA - ref={recaptchaRef} - sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} - /> - </div> */} - </div> - <div className='flex justify-end mb-4'> - <Button - colorScheme='red' - className='w-full md:w-fit' - type='submit' - > - Daftar Merchant{' '} - {/* {<ChevronRightIcon className='w-5' color='white' />} */} - </Button> - <div> - {/* <button - type='submit' - className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto' - > - Simpan - </button> */} - </div> - </div> - </form> - <PageContent path='/daftar-merchant' /> - </div> - </div> - </MobileView> - </> - ); -}; -const validationSchema = Yup.object().shape({ - company: Yup.string().required('Harus di-isi'), - PICName: Yup.string().required('Harus di-isi'), - email: Yup.string() - .email('Format harus seperti contoh@email.com') - .required('Harus di-isi'), - emailSales: Yup.string() - .email('Format harus seperti contoh@email.com') - .required('Harus di-isi'), - emailFinance: Yup.string() - .email('Format harus seperti contoh@email.com') - .required('Harus di-isi'), - phone: Yup.string().required('Harus di-isi'), - state: Yup.string().required('Harus dipilih'), - city: Yup.string().required('Harus dipilih'), - district: Yup.string().required('Harus dipilih'), - subDistrict: Yup.string().required('Harus dipilih'), - zip: Yup.string().required('Harus di-isi'), - bank: Yup.string().required('Harus di-isi'), - rekening: Yup.string().required('Harus di-isi'), - accountNumber: Yup.string().required('Harus di-isi'), - address: Yup.string().required('Harus di-isi'), - mobile: Yup.string().required('Harus di-isi'), - npwp: Yup.mixed().required('File is required'), - pricelist: Yup.mixed().required('File is required'), -}); -const defaultValues = { - company: '', - PICName: '', - email: '', - emailSales: '', - emailFinance: '', - phone: '', - state: '', - city: '', - district: '', - subDistrict: '', - zip: '', - bank: '', - rekening: '', - accountNumber: '', - address: '', - mobile: '', -}; - -export default CreateMerchant; |
