summaryrefslogtreecommitdiff
path: root/src/lib/form
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/form')
-rw-r--r--src/lib/form/components/AccountSwitch.jsx60
-rw-r--r--src/lib/form/components/Merchant.jsx1814
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;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 09:29:11 +0000