summaryrefslogtreecommitdiff
path: root/src/lib/merchant/components/Dokumen.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/merchant/components/Dokumen.jsx')
-rw-r--r--src/lib/merchant/components/Dokumen.jsx1252
1 files changed, 1252 insertions, 0 deletions
diff --git a/src/lib/merchant/components/Dokumen.jsx b/src/lib/merchant/components/Dokumen.jsx
new file mode 100644
index 00000000..c13353e5
--- /dev/null
+++ b/src/lib/merchant/components/Dokumen.jsx
@@ -0,0 +1,1252 @@
+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,
+ forwardRef,
+ useImperativeHandle,
+} 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 getMerchantApi from '../api/getMerchantApi';
+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 Dokumen = forwardRef(
+ ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
+ const isError = (value) => {
+ // Logika menentukan error
+ const result = value ? true : false;
+ handleIsError(result); // Panggil handleIsError dari Merchant
+ return result;
+ };
+ 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 [fileNames, setFileNames] = useState({});
+ const [DeatailFile, setDetailFile] = useState({});
+ const [isExample, setIsExample] = useState(false);
+ const [isPkp, setIsPkp] = useState(false);
+
+ const npwpRef = useRef(null);
+ const sppkpRef = useRef(null);
+ const ktpDirutRef = useRef(null);
+ const kartuNamaRef = useRef(null);
+ const suratPernyataanRef = useRef(null);
+ const fotoKantorRef = useRef(null);
+ const dataProdukRef = useRef(null);
+ const pricelistRef = useRef(null);
+ const router = useRouter();
+
+ const auth = useAuth();
+ if (auth == false) {
+ router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+ }
+ useEffect(() => {
+ const loadData = async () => {
+ try {
+ const data = await getMerchantApi();
+ if (data) {
+ setFileNames((prev) => ({
+ ...prev,
+ ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
+ ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
+ ['dokumenKtpDirut']: data.fileDokumenKtpDirut
+ ? data.fileDokumenKtpDirut.name
+ : '',
+ ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
+ ['suratPernyataan']: data.fileSuratPernyataan
+ ? data.fileSuratPernyataan.name
+ : '',
+ ['fotoKantor']: data.fileFotoKantor
+ ? data.fileFotoKantor.name
+ : '',
+ ['dataProduk']: data.fileDataProduk
+ ? data.fileDataProduk.name
+ : '',
+ ['pricelist']: data.filePricelist ? data.filePricelist.name : '',
+ }));
+ }
+ } catch (error) {
+ console.error('Error loading profile:', error);
+ handleIsError(true); // Jika ada error, panggil fungsi error handler
+ }
+ };
+
+ loadData();
+ }, [reset, handleIsError]);
+
+ useEffect(() => {
+ if (!isKonfirmasi) {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ }
+ }, []);
+ useImperativeHandle(ref, () => () => {
+ handleSubmit(onSubmitHandler)();
+ });
+ 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]);
+
+ const onSubmitHandler = async (values) => {
+ const options = {
+ behavior: 'smooth',
+ block: 'center',
+ };
+ const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
+ const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
+ const dokumenKtpDirut = {
+ name: fileNames.dokumenKtpDirut,
+ format: DeatailFile.dokumenKtpDirut,
+ };
+ const kartuNama = {
+ name: fileNames.kartuNama,
+ format: DeatailFile.kartuNama,
+ };
+ const suratPernyataan = {
+ name: fileNames.suratPernyataan,
+ format: DeatailFile.suratPernyataan,
+ };
+ const fotoKantor = {
+ name: fileNames.fotoKantor,
+ format: DeatailFile.fotoKantor,
+ };
+ const dataProduk = {
+ name: fileNames.dataProduk,
+ format: DeatailFile.dataProduk,
+ };
+ const pricelist = {
+ name: fileNames.pricelist,
+ format: DeatailFile.pricelist,
+ };
+
+ if (!npwp.name && isPkp) {
+ if (npwpRef?.current) {
+ npwpRef.current.scrollIntoView(options);
+ }
+ toast.error('NPWP wajib di tambahkan');
+ return;
+ }
+ if (!sppkp.name && isPkp) {
+ toast.error('SPPKP wajib di tambahkan');
+ if (sppkpRef?.current) {
+ sppkpRef.current.scrollIntoView(options);
+ }
+ return;
+ }
+ if (!dokumenKtpDirut.name && !isPkp) {
+ toast.error('KTP Dirut/Direktur wajib di tambahkan');
+ if (ktpDirutRef?.current) {
+ ktpDirutRef.current.scrollIntoView(options);
+ }
+ return;
+ }
+ if (!fotoKantor.name) {
+ toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
+ if (fotoKantorRef?.current) {
+ fotoKantorRef.current.scrollIntoView(options);
+ }
+ return;
+ }
+ if (!pricelist.name) {
+ toast.error('Pricelist wajib di tambahkan');
+ if (pricelistRef?.current) {
+ pricelistRef.current.scrollIntoView(options);
+ }
+ return;
+ }
+ const toastId = toast.loading('Mengirimkan formulir merchant...');
+ const dokumen = {
+ file_npwp: { details: npwp.format ? npwp : '' },
+ file_sppkp: { details: sppkp.format ? sppkp : '' },
+ file_dokumenKtpDirut: {
+ details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
+ },
+ file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
+ file_suratPernyataan: {
+ details: suratPernyataan.format ? suratPernyataan : '',
+ },
+ file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
+ file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
+ file_pricelist: { details: pricelist.format ? pricelist : '' },
+ };
+ let data = {
+ file_dokumen: JSON.stringify(dokumen),
+ };
+ const create_leads = await createMerchantApi({ data });
+ if (create_leads) {
+ toast.dismiss(toastId);
+ toast.success('Berhasil menambahkan data');
+ isError(false);
+ reset();
+ } else {
+ toast.dismiss(toastId);
+ toast.error('Gagal menambahkan data');
+ }
+ };
+
+ if (!auth) {
+ return;
+ }
+
+ const handleFileChange = async (event) => {
+ let fileBase64 = '';
+ const file = event.target.files[0];
+
+ if (file.size > 2000000) {
+ // 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 });
+ // }
+ toast.error('Maks file size 2MB', { 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 '>
+ <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+ Dokumen
+ </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'>
+ NPWP{' '}
+ {!isPkp && (
+ <span className=' opacity-60'>(Opsional)</span>
+ )}
+ </label>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ ref={npwpRef}
+ >
+ <div
+ className={`flex flex-row items-start gap-2 w-full ${
+ isKonfirmasi ? 'justify-end' : 'justify-start'
+ }`}
+ >
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.npwp}
+ </span>
+ )}
+ <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}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.npwp}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi && 'gap-2'
+ } `}
+ >
+ <div className='w-2/5 flex flex-row justify-between items-center '>
+ <div>
+ <label className='form-label text-nowrap' ref={sppkpRef}>
+ SPPKP{' '}
+ {!isPkp && (
+ <span className=' opacity-60'>(Opsional)</span>
+ )}
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ Pastikan dokumen yang anda upload sudah benar
+ </span>
+ )}
+ </div>
+ <div
+ onClick={() => setIsExample(!isExample)}
+ className={`h-fit ${
+ !isKonfirmasi && 'mr-8'
+ } rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
+ >
+ <EyeIcon
+ className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
+ />
+ {!isKonfirmasi && (
+ <p className='font-light text-xs '>Lihat Contoh</p>
+ )}
+ </div>
+ </div>
+ <div
+ className={`w-3/5 flex flex-col justify-between ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2 '>
+ {fileNames.sppkp}
+ </span>
+ )}
+ <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}
+ />
+ </div>
+ {!isKonfirmasi && (
+ <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>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ ref={ktpDirutRef}
+ >
+ <div
+ className={`flex flex-row items-start ${
+ isKonfirmasi ? 'justify-end' : 'justify-start'
+ } gap-2 w-full`}
+ >
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.dokumenKtpDirut}
+ </span>
+ )}
+ <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}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.dokumenKtpDirut}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <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'
+ ref={kartuNamaRef}
+ >
+ Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.kartuNama}
+ </span>
+ )}
+ <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}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.kartuNama}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'text-wrap' : ' text-nowrap'
+ }`}
+ ref={suratPernyataanRef}
+ >
+ Surat Pernyataan Nomor Rekening{' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.suratPernyataan}
+ </span>
+ )}
+ <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}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.suratPernyataan}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+ }`}
+ ref={fotoKantorRef}
+ >
+ Foto Gudang / Kantor Bagian Depan
+ </label>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.fotoKantor}
+ </span>
+ )}
+ <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}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.fotoKantor}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+ }`}
+ ref={dataProdukRef}
+ >
+ Data Produk (Item Name, Gambar, Deskripsi){' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.dataProduk}
+ </span>
+ )}
+ <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}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.dataProduk}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <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.dataProduk?.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'
+ ref={pricelistRef}
+ >
+ Pricelist
+ </label>
+ {!isKonfirmasi && (
+ <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 ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.pricelist}
+ </span>
+ )}
+ <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}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.pricelist}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <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-end'>
+ {/* <Button
+ colorScheme='red'
+ className='w-full md:w-fit'
+ type='submit'
+ >
+ Daftar Merchant{' '}
+ {<ChevronRightIcon className='w-5' color='white' />}
+ </Button> */}
+ {!isKonfirmasi && (
+ <div>
+ <span className='text-xs opacity-60'>
+ *Pastikan data yang anda masukan sudah benar dan sesuai
+ </span>
+ <button
+ type='submit'
+ className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+ >
+ <span className={` `}>Langkah Selanjutnya</span>
+ {<ChevronRightIcon className='w-5' />}
+ </button>
+ </div>
+ )}
+ </div>
+ </form>
+ <PageContent path='/daftar-merchant' />
+ </div>
+ </div>
+ </DesktopView>
+ <MobileView>
+ <div className='container flex flex-col items-star py-4'>
+ {!isKonfirmasi && (
+ <h2 className='font-semibold mb-6 text-xl'>Dokumen</h2>
+ )}
+
+ <div className='w-full mt-4'>
+ <form
+ onSubmit={handleSubmit(onSubmitHandler)}
+ className='flex flex-col gap-4'
+ >
+ <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-center 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-center 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-center 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-center 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-center 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-center 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=' 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-wrap'>
+ Data Produk (Item Name, Gambar, Deskripsi){' '}
+ <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ <div className='flex flex-row items-center 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=' 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-center 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=' 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-center w-full '>
+ {/* <Button
+ colorScheme='red'
+ className='w-full md:w-fit'
+ type='submit'
+ >
+ Daftar Merchant{' '}
+ {<ChevronRightIcon className='w-5' color='white' />}
+ </Button> */}
+ {!isKonfirmasi && (
+ <div className='w-full'>
+ <span className='text-xs opacity-60'>
+ *Pastikan data yang anda masukan sudah benar dan sesuai
+ </span>
+ <button
+ type='submit'
+ className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+ >
+ <span className={` `}>Langkah Selanjutnya</span>
+ {<ChevronRightIcon className='w-5' />}
+ </button>
+ </div>
+ )}
+ </div>
+ </form>
+ <PageContent path='/daftar-merchant' />
+ </div>
+ </div>
+ </MobileView>
+ </>
+ );
+ }
+);
+const validationSchema = Yup.object().shape({
+ npwp: Yup.mixed().required('File is required'),
+ pricelist: Yup.mixed().required('File is required'),
+});
+const defaultValues = {
+ company: '',
+ pejabatName: '',
+ PICName: '',
+ PICPosition: '',
+ email: '',
+ emailSales: '',
+ emailFinance: '',
+ phone: '',
+ state: '',
+ city: '',
+ district: '',
+ subDistrict: '',
+ zip: '',
+ bank: '',
+ rekening: '',
+ accountNumber: '',
+ address: '',
+ mobile: '',
+};
+
+export default Dokumen;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-23 16:13:39 +0000