summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/merchant/components/Dokumen.jsx535
-rw-r--r--src/lib/merchant/components/InformasiPerusahaan.jsx520
-rw-r--r--src/lib/merchant/components/InformasiVendor.jsx984
-rw-r--r--src/lib/merchant/components/Konfirmasi.jsx31
-rw-r--r--src/lib/merchant/components/Merchant.jsx2
-rw-r--r--src/lib/merchant/components/SyaratDagang.jsx1022
6 files changed, 560 insertions, 2534 deletions
diff --git a/src/lib/merchant/components/Dokumen.jsx b/src/lib/merchant/components/Dokumen.jsx
index 87c5839c..c13353e5 100644
--- a/src/lib/merchant/components/Dokumen.jsx
+++ b/src/lib/merchant/components/Dokumen.jsx
@@ -79,18 +79,11 @@ const Dokumen = forwardRef(
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 npwpRef = useRef(null);
const sppkpRef = useRef(null);
const ktpDirutRef = useRef(null);
@@ -105,24 +98,10 @@ const Dokumen = forwardRef(
if (auth == false) {
router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
}
- const dataBisnisType = [
- { value: 1, label: 'PT' },
- { value: 2, label: 'CV' },
- { value: 3, label: 'Perorangan' },
- ];
- const dataCategoryPerusahaan = [
- { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
- { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
- { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
- { value: 4, label: 'Importer (Pengimpor Barang)' },
- { value: 5, label: 'Wholesaler (Pedagang Besar)' },
- ];
- console.log('fileNames', fileNames);
useEffect(() => {
const loadData = async () => {
try {
const data = await getMerchantApi();
- console.log('data', data);
if (data) {
setFileNames((prev) => ({
...prev,
@@ -154,10 +133,12 @@ const Dokumen = forwardRef(
}, [reset, handleIsError]);
useEffect(() => {
- window.scrollTo({
- top: 0,
- behavior: 'smooth',
- });
+ if (!isKonfirmasi) {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ }
}, []);
useImperativeHandle(ref, () => () => {
handleSubmit(onSubmitHandler)();
@@ -186,126 +167,6 @@ const Dokumen = forwardRef(
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 options = {
behavior: 'smooth',
@@ -403,14 +264,9 @@ const Dokumen = forwardRef(
}
};
- // 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 = '';
@@ -1027,332 +883,21 @@ const Dokumen = forwardRef(
</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'
- />
+ {!isKonfirmasi && (
+ <h2 className='font-semibold mb-6 text-xl'>Dokumen</h2>
)}
- <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'>
+ <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'
@@ -1399,7 +944,7 @@ const Dokumen = forwardRef(
<p className='font-light text-xs '>Lihat Contoh</p>
</div>
</div>
- <div className='flex flex-row items-start justify-start gap-2'>
+ <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'
@@ -1433,7 +978,7 @@ const Dokumen = forwardRef(
KTP Dirut/Direktur{' '}
{isPkp && <span className=' opacity-60'>(Opsional)</span>}
</label>
- <div className='flex flex-row items-start justify-start gap-2 '>
+ <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'
@@ -1468,7 +1013,7 @@ const Dokumen = forwardRef(
<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'>
+ <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'
@@ -1513,7 +1058,7 @@ const Dokumen = forwardRef(
</p>
</a>
</div>
- <div className='flex flex-row items-start justify-start gap-2'>
+ <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'
@@ -1547,7 +1092,7 @@ const Dokumen = forwardRef(
<label className='form-label text-nowrap'>
Foto Gudang / Kantor Bagian Depan
</label>
- <div className='flex flex-row items-start justify-start gap-2'>
+ <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'
@@ -1563,7 +1108,7 @@ const Dokumen = forwardRef(
onChange={handleFileChange}
aria-invalid={errors.fotoKantor?.message}
/>
- <span className='mt-2 text-gray-600 line-clamp-2'>
+ <span className=' text-gray-600 line-clamp-2'>
{fileNames.fotoKantor}
</span>
</div>
@@ -1576,11 +1121,11 @@ const Dokumen = forwardRef(
</div>
</div>
<div className='w-full flex flex-col gap-2 items-start '>
- <label className='form-label text-nowrap'>
+ <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-start justify-start gap-2'>
+ <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'
@@ -1596,7 +1141,7 @@ const Dokumen = forwardRef(
onChange={handleFileChange}
aria-invalid={errors.dataProduk?.message}
/>
- <span className='mt-2 text-gray-600 line-clamp-2'>
+ <span className=' text-gray-600 line-clamp-2'>
{fileNames.dataProduk}
</span>
</div>
@@ -1610,7 +1155,7 @@ const Dokumen = forwardRef(
</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'>
+ <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'
@@ -1626,7 +1171,7 @@ const Dokumen = forwardRef(
onChange={handleFileChange}
aria-invalid={errors.pricelist?.message}
/>
- <span className='mt-2 text-gray-600 line-clamp-2'>
+ <span className=' text-gray-600 line-clamp-2'>
{fileNames.pricelist}
</span>
</div>
@@ -1646,23 +1191,29 @@ const Dokumen = forwardRef(
/>
</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 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' />
diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index a93f72c3..ee5560a9 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -56,43 +56,12 @@ const CreateMerchant = forwardRef(
resolver: yupResolver(validationSchema),
defaultValues,
});
- console.log('errors', errors);
- console.log('errors length', errors.length);
- 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);
useEffect(() => {
@@ -102,10 +71,6 @@ const CreateMerchant = forwardRef(
});
}, []);
- // useEffect(() => {
- // console.log('MASUK SINI IMANUEL');
- // handleSubmit(onSubmitHandler); // Jalankan handler saat buttonSubmitClick berubah
- // }, [buttonSubmitClick]);
useImperativeHandle(ref, () => () => {
handleSubmit(onSubmitHandler)();
@@ -135,7 +100,6 @@ const CreateMerchant = forwardRef(
const loadData = async () => {
try {
const data = await getMerchantApi();
- console.log('data', data);
if (data) {
reset({
pejabatName: data.pejabatName ? data.pejabatName : '',
@@ -227,7 +191,6 @@ const CreateMerchant = forwardRef(
}, [auth, watchState]);
const watchCity = watch('city');
- console.log('watchCity', watchCity);
useEffect(() => {
if (watchCity) {
// setValue('district', '');
@@ -315,8 +278,6 @@ const CreateMerchant = forwardRef(
}
}, [watchsubDistrict, subDistricts]);
const onSubmitHandler = async (values) => {
- console.log('apakah ada error', errors);
- console.log('data yang mau dikirim IMANUEL', values);
const toastId = toast.loading('Mengirimkan formulir merchant...');
const data = {
name_merchant: 'Form Merchant - ' + values.company,
@@ -376,40 +337,7 @@ const CreateMerchant = forwardRef(
}
// 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 (
<>
@@ -980,25 +908,11 @@ const CreateMerchant = forwardRef(
</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'
- />
+ {!isKonfirmasi && (
+ <h2 className='font-semibold mb-6 text-xl'>
+ Informasi Perusahaan
+ </h2>
)}
- <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
@@ -1026,6 +940,26 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-full flex flex-col'>
<div className='w-full'>
+ <label className='form-label text-nowrap'>
+ Pejabat Berwenang
+ </label>
+ <input
+ {...register('pejabatName')}
+ placeholder='Masukkan nama pejabat berwenang'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.pejabatName?.message}
+ </div>
+ <span className='opacity-65 text-xs'>
+ isi dengan nama pejabat yang berwewenang di perusahaan
+ anda{' '}
+ </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')}
@@ -1043,6 +977,25 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-full flex flex-col'>
<div className='w-full'>
+ <label className='form-label text-nowrap'>
+ Jabatan PIC
+ </label>
+ <input
+ {...register('PICPosition')}
+ placeholder='Masukkan jabatan PIC '
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.PICPosition?.message}
+ </div>
+ <span className='opacity-65 text-xs'>
+ isi dengan jabatan 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>
@@ -1284,313 +1237,74 @@ const CreateMerchant = forwardRef(
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>
+ <div className='flex flex-col'>
+ <label className='form-label text-nowrap'>Tipe Bisnis</label>
+ <div className='flex flex-col '>
+ <Controller
+ name='bisnisType'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataBisnisType}
+ placeholder={'Pilih tipe bisnis'}
+ />
)}
- </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}
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih tipe bisnis yang sesuai
+ </span>
+ )}
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.bisnisType?.message}
+ </div>
</div>
</div>
- <div className='w-full flex flex-col gap-2 items-start '>
- <label className='form-label text-nowrap'>
- Foto Gudang / Kantor Bagian Depan
+ <div className='flex flex-col'>
+ <label className='form-label text-nowrap'>
+ Kategori Perusahaan
</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}
+ <div className='flex flex-col '>
+ <Controller
+ name='categoryPerusahaan'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataCategoryPerusahaan}
+ placeholder={'Pilih category perusahaan'}
+ />
+ )}
/>
- <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}
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih kategori perusahaan yang sesuai
+ </span>
+ )}
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.categoryPerusahaan?.message}
+ </div>
</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}
+ <div className='w-full flex flex-col'>
+ <label className='form-label text-nowrap'>Website</label>
+ <input
+ {...register('website')}
+ placeholder='Masukkan website'
+ type='text'
+ className='form-input'
+ />
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ isi dengan website perusahaan anda
</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}
+ {errors.website?.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
@@ -1599,23 +1313,29 @@ const CreateMerchant = forwardRef(
/>
</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
+ <div className='flex justify-center w-full '>
+ {/* <Button
+ colorScheme='red'
+ className='w-full md:w-fit'
type='submit'
- className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
>
- Simpan
- </button> */}
- </div>
+ 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' />
diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx
index f86cf3c9..d00f27ed 100644
--- a/src/lib/merchant/components/InformasiVendor.jsx
+++ b/src/lib/merchant/components/InformasiVendor.jsx
@@ -52,45 +52,9 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
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 [categoryProduk, setCategoryProduk] = 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();
const auth = useAuth();
@@ -102,11 +66,7 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
{ value: 2, label: 'Barang Dikirimkan' },
{ value: 3, label: 'Tukar Faktur' },
];
- const dataBisnisType = [
- { value: 1, label: 'PT' },
- { value: 2, label: 'CV' },
- { value: 3, label: 'Perorangan' },
- ];
+
const dataTempo = [
{ value: 24, label: 'Tempo 14 Hari' },
{ value: 25, label: 'Tempo 30 Hari' },
@@ -114,29 +74,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
{ value: 31, label: 'Tempo 90 Hari' },
];
- const dataCategoryPerusahaan = [
- { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
- { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
- { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
- { value: 4, label: 'Importer (Pengimpor Barang)' },
- { value: 5, label: 'Wholesaler (Pedagang Besar)' },
- ];
-
- const category_produk = [
- { id: 2040, name: 'Pengaman, Kesehatan & Keamanan' },
- { id: 2097, name: 'Perkakas Tangan, Listrik & Pneumatic' },
- { id: 2161, name: 'Mesin Industrial' },
- { id: 2222, name: 'Mesin Pertanian & Perkebunan' },
- { id: 2246, name: 'Mesin Pembersih & Janitorial' },
- { id: 2273, name: 'Cairan Berbahan Kimia' },
- { id: 2315, name: 'Perlengkapan Pengukuran & Pengujian' },
- { id: 2354, name: 'Peralatan Listrik & Elektronik' },
- { id: 2394, name: 'Perlengkapan Logistik & Gudang' },
- { id: 2420, name: 'Peralatan Kantor & Stationery' },
- { id: 2445, name: 'Komponen & Aksesoris' },
- { id: 2477, name: 'Peralatan Horeca & Food Service' },
- ];
-
const midIndex = Math.ceil(categoryProduk.length / 2);
const firstColumn = categoryProduk.slice(0, midIndex);
const secondColumn = categoryProduk.slice(midIndex);
@@ -146,7 +83,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
const loadData = async () => {
const data = await getMerchantApi();
if (data) {
- console.log('data vendor', data);
reset({
hargaTayang: data.hargaTayang || '',
categoryProduk: data.categoryProduk || '',
@@ -170,7 +106,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
});
const handleKreditLimitChange = (e) => {
- console.log('e', e);
let value = e.target?.value ? e.target.value : e;
// Hapus semua karakter non-numeric
@@ -195,17 +130,11 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
// form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka
// [] // Parse string menjadi array angka
);
- console.log(
- 'kategori produk',
- watch('categoryProduk').split(',').map(Number)
- );
- console.log('selectedIds', selectedIds);
const handleCheckboxChange = (id) => {
const updatedSelected = selectedIds.includes(id)
? selectedIds.filter((selectedId) => selectedId !== id)
: [...selectedIds, id];
- console.log('updatedSelected', updatedSelected);
setSelectedIds(updatedSelected);
// Mengubah array kembali menjadi string yang dipisahkan oleh koma
@@ -219,13 +148,14 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
};
useEffect(() => {
- window.scrollTo({
- top: 0,
- behavior: 'smooth',
- });
+ if (!isKonfirmasi) {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ }
}, []);
- console.log('categoryProduk', categoryProduk);
useEffect(() => {
const loadCategories = async () => {
let dataCategories = await odooApi('GET', '/api/v1/category/tree');
@@ -233,157 +163,12 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
id: category.id,
name: category.name,
}));
- console.log('formattedCategories', formattedCategories);
// Simpan hasil ke state
setCategoryProduk(formattedCategories);
};
loadCategories();
}, []);
- 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]);
- console.log('errors', errors);
const onSubmitHandler = async (values) => {
const toastId = toast.loading('Mengirimkan formulir merchant...');
const data = {
@@ -416,43 +201,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
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
- }));
- };
- console.log("watch('isPengajuanTempo')", watch('kreditLimit'));
return (
<>
@@ -743,25 +491,9 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
</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'
- />
+ {!isKonfirmasi && (
+ <h2 className='font-semibold mb-6 text-xl'>Informasi Vendor</h2>
)}
- <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
@@ -771,583 +503,189 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
<div className='w-full flex flex-col'>
<div className='w-full'>
<label className='form-label text-nowrap'>
- Nama Perusahaan
+ Harga Tayang (HET){' '}
+ <span className=' opacity-60'>(Opsional)</span>
</label>
<input
- {...register('company')}
- placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
- type='text'
+ {...register('hargaTayang')}
+ placeholder='Jelaskan detail HET yang anda miliki'
+ type='textarea'
className='form-input'
/>
<div className='text-caption-2 text-danger-500 mt-1'>
- {errors.company?.message}
+ {errors.hargaTayang?.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
+ className={`flex flex-col gap-2 justify-between ${
+ isKonfirmasi ? 'items-start' : 'items-start'
+ }`}
+ >
+ <label className='form-label '>
+ Tipe Kategori Produk yang Digunakan
+ </label>
+ <div className='flex flex-col justify-between gap-2 '>
+ <div className='flex flex-col gap-2'>
+ {firstColumn.map((item) => (
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key={item.id}
+ onChange={() => handleCheckboxChange(item.id)}
+ isChecked={isChecked(item.id)}
+ >
+ {item.name}
+ </Checkbox>
+ ))}
+ </div>
+ <div className='flex flex-col gap-2'>
+ {secondColumn.map((item) => (
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key={item.id}
+ isChecked={isChecked(item.id)}
+ onChange={() => handleCheckboxChange(item.id)}
+ >
+ {item.name}
+ </Checkbox>
+ ))}
</div>
- <span className='opacity-65 text-xs'>
- Isi dengan nama sales / penanggung jawab
- </span>
+ </div>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.categoryProduk?.message}
</div>
</div>
<div className='w-full flex flex-col'>
<div className='w-full'>
- <label className='form-label text-nowrap'>
- Alamat Perusahaan
- </label>
+ <label className='form-label text-nowrap'>Merk Dagang</label>
<input
- {...register('address')}
- placeholder='Masukkan alamat lengkap perusahaan'
+ {...register('merkDagang')}
+ placeholder='Merk 1, Merk 2, Merk 3'
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>
+ {errors.merkDagang?.message}
</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
+ Apakah anda memiliki Form Pengajuan Tempo?
</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 className='flex gap-x-4'>
+ <RadioGroup
+ onChange={handleCheckboxPortalChange}
+ value={watch('isPengajuanTempo')}
+ >
+ <Stack direction='row'>
+ <Radio colorScheme='red' value='ada'>
+ Ya, ada
+ </Radio>
+ <Radio colorScheme='red' value='tidak'>
+ Tidak ada
+ </Radio>
+ </Stack>
+ </RadioGroup>
</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}
+ {errors.isPengajuanTempo?.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'
+ <label className='form-label text-nowrap'>Durasi Tempo</label>
+ <Controller
+ name='tempoDuration'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataTempo}
+ placeholder={'Pilih Durasi Tempo'}
+ />
+ )}
/>
+
<div className='text-caption-2 text-danger-500 mt-1'>
- {errors.mobile?.message}
+ {errors.tempoDuration?.message}
</div>
- <span className='opacity-65 text-xs'>
- Isi detail perusahaan sesuai dengan data yang terdaftar
- </span>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih durasi tempo yang anda inginkan
+ </span>
+ )}
</div>
<div className='w-full flex flex-col'>
<label className='form-label text-nowrap'>
- Harga Tayang (HET){' '}
- <span className=' opacity-60'>(Opsional)</span>
+ Jumlah Kredit Limit
</label>
<input
- {...register('hargaTayang')}
- placeholder='Masukkan Harga Tayang (HET)'
+ value={kreditLimitFormat}
+ onChange={handleKreditLimitChange}
+ placeholder='Masukkan jumlah kredit limit'
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>
+ {errors.kreditLimit?.message}
</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}
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ isi dengan kredit limit perusahaan anda
</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 '>
+ <div className='w-full flex flex-col'>
<label className='form-label text-nowrap'>
- Foto Gudang / Kantor Bagian Depan
+ {' '}
+ Waktu Pengiriman
</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='w-full flex flex-row gap-2'>
+ <div className='w-1/3'>
+ <input
+ {...register('waktuPengiriman')}
+ placeholder='Masukkan waktu pengiriman'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.waktuPengiriman?.message}
+ </div>
+ </div>
+ <div className='w-2/3 '>
+ <div className='flex flex-row items-center gap-2'>
+ <label className=' text-nowrap text-sm opacity-70 italic'>
+ terhitung sejak
+ </label>
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errors.fotoKantor?.message}
+ <Controller
+ name='terhitungSejak'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataTerhitungSejak}
+ placeholder={'waktu pengiriman'}
+ />
+ )}
+ />
+ </div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.terhitungSejak?.message}
+ </div>
+ </div>
</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}
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ isi dengan waktu pengiriman anda
</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
@@ -1356,23 +694,29 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
/>
</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 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' />
diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx
index 6deabe05..9556c88a 100644
--- a/src/lib/merchant/components/Konfirmasi.jsx
+++ b/src/lib/merchant/components/Konfirmasi.jsx
@@ -36,7 +36,6 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
}
};
const handleIsError = async (value) => {
- console.log('LAHKAH SELANJUTNYA', value);
if (!value) {
// goToNextStep();
const toastId = toast.loading('Mengirimkan formulir merchant...');
@@ -117,16 +116,16 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
</div>
</>
)}
- {/* {isMobile && (
+ {isMobile && (
<form className='flex mt-8 py-4 flex-col w-full gap-4'>
<div className='flex flex-col gap-4'>
<div className='flex flex-row justify-between items-center'>
<div className='flex flex-col justify-center items-start'>
<p className='font-semibold text-lg'>Informasi Perusahaan</p>
- <span className='text-xs opacity-70'>
+ {/* <span className='text-xs opacity-70'>
Pastikan informasi usaha yang anda masukkan sudah sesuai
dengan data perusahaan anda
- </span>
+ </span> */}
</div>
<div className='p-2 bg-gray-200'>
{isOpenInformasi ? (
@@ -147,7 +146,7 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
</div>
<div className='flex flex-col gap-4'>
<div className='flex flex-row justify-between'>
- <p className='font-semibold text-lg'>Kontak Person</p>
+ <p className='font-semibold text-lg'>Informasi Vendor</p>
<div className='p-2 bg-gray-200'>
{isOpenKontak ? (
<ChevronUpIcon
@@ -162,12 +161,12 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
)}
</div>
</div>
- {isOpenKontak && <KontakPerusahaan isKonfirmasi={true} />}
+ {isOpenKontak && <InformasiVendor isKonfirmasi={true} />}
<div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
</div>
<div className='flex flex-col gap-4'>
<div className='flex flex-row justify-between'>
- <p className='font-semibold text-lg'>Pengiriman</p>
+ <p className='font-semibold text-lg'>Syarat Perdagangan</p>
<div className='p-2 bg-gray-200'>
{isOpenPengiriman ? (
<ChevronUpIcon
@@ -182,7 +181,7 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
)}
</div>
</div>
- {isOpenPengiriman && <Pengiriman isKonfirmasi={true} />}
+ {isOpenPengiriman && <SyaratDagang isKonfirmasi={true} />}
<div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
</div>
<div className='flex flex-col gap-4'>
@@ -202,10 +201,22 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
)}
</div>
</div>
- {isOpenKonfirmasi && <KonfirmasiDokumen isKonfirmasi={true} />}
+ {isOpenKonfirmasi && <Dokumen isKonfirmasi={true} />}
+ </div>
+ <div className='flex flex-col items-end justify-end gap-2'>
+ <span className='text-xs opacity-60'>
+ *Pastikan data yang anda masukan sudah benar dan sesuai
+ </span>
+ <Button
+ colorScheme='red'
+ w='full'
+ onClick={handleDaftarMerchant} // Memicu form submit
+ >
+ Daftar Merchant
+ </Button>
</div>
</form>
- )} */}
+ )}
</>
);
};
diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx
index 28244be6..a92619b6 100644
--- a/src/lib/merchant/components/Merchant.jsx
+++ b/src/lib/merchant/components/Merchant.jsx
@@ -36,7 +36,6 @@ const Merchant = () => {
const [error, setError] = useState(false);
const handleIsError = (value) => {
- console.log('LAHKAH SELANJUTNYA', value);
if (!value) {
goToNextStep();
}
@@ -80,7 +79,6 @@ const Merchant = () => {
useEffect(() => {
<InformasiPerusahaan buttonSubmitClick={buttonSubmitClick} />;
- console.log('MASUK SINI');
}, [buttonSubmitClick]);
// useEffect(() => {
diff --git a/src/lib/merchant/components/SyaratDagang.jsx b/src/lib/merchant/components/SyaratDagang.jsx
index 3451fa96..96681064 100644
--- a/src/lib/merchant/components/SyaratDagang.jsx
+++ b/src/lib/merchant/components/SyaratDagang.jsx
@@ -51,43 +51,8 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
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 [bigData, setbigData] = 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();
@@ -96,7 +61,6 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
const loadData = async () => {
const data = await getMerchantApi();
setbigData(data);
- console.log('data vendor', data);
if (data) {
reset({
isKembaliBarang: data.isKembaliBarang || '',
@@ -134,12 +98,13 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
loadData();
}, []);
- console.log('sertifikatProduk', watch('sertifikatProduk'));
useEffect(() => {
- window.scrollTo({
- top: 0,
- behavior: 'smooth',
- });
+ if (!isKonfirmasi) {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ }
}, []);
useImperativeHandle(ref, () => () => {
handleSubmit(onSubmitHandler)();
@@ -148,16 +113,7 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
if (auth == false) {
router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
}
- const dataTerhitungSejak = [
- { value: 1, label: 'Terima PO' },
- { value: 2, label: 'Barang Dikirimkan' },
- { value: 3, label: 'Tukar Faktur' },
- ];
- const dataBisnisType = [
- { value: 1, label: 'PT' },
- { value: 2, label: 'CV' },
- { value: 3, label: 'Perorangan' },
- ];
+
const dataGaransi = [
{ value: 1, label: '6 Bulan Garansi' },
{ value: 2, label: '1 Tahun Garansi' },
@@ -169,14 +125,6 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
{ value: 'minimum pembelian', label: 'Minimum pembelian' },
];
- const dataCategoryPerusahaan = [
- { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
- { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
- { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
- { value: 4, label: 'Importer (Pengimpor Barang)' },
- { value: 5, label: 'Wholesaler (Pedagang Besar)' },
- ];
-
const category_produk = [
{ id: 0, name: 'TKDN' },
{ id: 1, name: 'SNI' },
@@ -184,8 +132,6 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
{ id: 3, name: '' },
];
- const firstColumn = category_produk;
-
const [selectedIds, setSelectedIds] = useState(
watch('sertifikatProduk')
? watch('sertifikatProduk').split(',').map(Number)
@@ -193,7 +139,6 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
// form.sertifikatProduk ? form.sertifikatProduk.split(',').map(Number) : [] // Parse string menjadi array angka
// [] // Parse string menjadi array angka
);
- console.log('selectedIds', selectedIds);
const handleCheckboxChange = (id) => {
const updatedSelected = selectedIds.includes(id)
? selectedIds.filter((selectedId) => selectedId !== id)
@@ -225,149 +170,7 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
const handleCheckboxTenggatWaktuChange = (value) => {
setValue('tenggatWaktu', `${value}`);
};
- 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 toastId = toast.loading('Mengirimkan formulir merchant...');
const data = {
@@ -407,40 +210,6 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
}
// 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
@@ -762,25 +531,9 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
</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'
- />
+ {!isKonfirmasi && (
+ <h2 className='font-semibold mb-6 text-xl'>Syarat Perdagangan</h2>
)}
- <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
@@ -790,583 +543,226 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
<div className='w-full flex flex-col'>
<div className='w-full'>
<label className='form-label text-nowrap'>
- Nama Perusahaan
+ Syarat Pengembalian Barang
</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 className='flex gap-x-4 flex-col w-full'>
+ <RadioGroup
+ onChange={handleCheckboxReturChange}
+ value={watch('isKembaliBarang')}
+ >
+ <Stack direction='column'>
+ <div className='flex flex-row text-nowrap gap-2'>
+ <Radio colorScheme='red' value='ya'>
+ Ya, dapat diretur
+ </Radio>
+ {watch('isKembaliBarang') == 'ya' && (
+ <textarea
+ {...register('textReturn')}
+ placeholder='jelaskan syarat pengembalian'
+ type='textarea'
+ className='form-input w-full'
+ />
+ )}
+ </div>
+ <Radio colorScheme='red' value='tidak'>
+ Tidak dapat diretur
+ </Radio>
+ </Stack>
+ </RadioGroup>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.isKembaliBarang?.message}
+ </div>
</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}
+ <label className='form-label text-nowrap'>
+ Tenggat Waktu Perubahan Harga
+ </label>
+ <div className='flex gap-x-4 flex-col w-full'>
+ <RadioGroup
+ onChange={handleCheckboxTenggatWaktuChange}
+ value={watch('tenggatWaktu')}
+ >
+ <Stack direction='column'>
+ <Radio
+ colorScheme='red'
+ value='14'
+ onChange={() => setValue('customTenggatWaktu', ' ')}
+ >
+ 14 hari sejak data dikirimkan
+ </Radio>
+ <Radio
+ colorScheme='red'
+ value='30'
+ onChange={() => setValue('customTenggatWaktu', ' ')}
+ >
+ 30 hari sejak data dikirimkan
+ </Radio>
+ <div className='flex flex-row gap-2'>
+ <Radio colorScheme='red' value='custom'></Radio>
+ <input
+ {...register('customTenggatWaktu')}
+ placeholder='Masukkan jumlah hari untuk tenggat waktu'
+ type='text'
+ onFocus={() => setValue('tenggatWaktu', 'custom')}
+ className='form-input mt-2'
+ />
+ </div>
+ </Stack>
+ </RadioGroup>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.tenggatWaktu?.message}
+ </div>
</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 className='form-label text-nowrap'>
+ Dokumen/Sertifikat yang Dimiliki Oleh Brand
</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='flex flex-col gap-2 w-full'
+ // ref={categoryProdukRef}
+ >
+ <Checkbox
+ colorScheme='red'
+ key={0}
+ onChange={() => handleCheckboxChange(0)}
+ isChecked={isChecked(0)}
+ >
+ TKDN
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key={1}
+ onChange={() => handleCheckboxChange(1)}
+ isChecked={isChecked(1)}
+ >
+ SNI
+ </Checkbox>
+ <Checkbox
+ colorScheme='red'
+ key={2}
+ onChange={() => handleCheckboxChange(2)}
+ isChecked={isChecked(2)}
+ >
+ K3L
+ </Checkbox>
+ <div className='flex flex-row gap-2 w-full'>
+ <Checkbox
+ colorScheme='red'
+ key={3}
+ onChange={() => handleCheckboxChange(3)}
+ isChecked={isChecked(3)}
+ ></Checkbox>
+ <input
+ {...register('customSertifikatProduk')}
+ placeholder='Masukkan Dokumen/Sertifikat yang dimiliki oleh brand'
+ type='text'
+ onFocus={() => {
+ custom_sertifikat_produk_handle();
+ }}
+ // onFocus={() => handleCheckboxChange(4)}
+ className='form-input mt-2'
/>
- <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 className='text-caption-2 text-danger-500 mt-1'>
+ {errors.sertifikatProduk?.message}
</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>
+ <label className='form-label text-nowrap'>Garansi</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>
+ <Controller
+ name='tempoGaransi'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataGaransi}
+ placeholder={'Pilih durasi garansi'}
+ />
+ )}
+ />
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.tempoGaransi?.message}
</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
+ Jelaskan Garansi yang dimaksud!
</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'
+ <textarea
+ {...register('explainGaransi')}
+ placeholder='Jelaskan bagian apa yang termasuk garansi'
+ type='textarea'
className='form-input'
+ rows={4}
+ cols={40}
/>
<div className='text-caption-2 text-danger-500 mt-1'>
- {errors.mobile?.message}
+ {errors.explainGaransi?.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>}
+ Apakah Memiliki Minimum Order Quantity (MOQ)
</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'
+ <div className='flex gap-x-4 flex-col w-full'>
+ <RadioGroup
+ onChange={handleCheckboxOrderQuantityChange}
+ value={
+ watch('minimumPembelian')
+ ? 'ya'
+ : watch('isOrderQuantity')
+ }
>
- <EyeIcon className={`w-4 mr-2 `} />
+ <Stack direction='column'>
+ <div className='flex flex-row text-nowrap gap-2'>
+ <Radio
+ colorScheme='red'
+ value='ya'
+ onChange={() => setValue('isOrderQuantity', 'ya')}
+ >
+ Ya
+ </Radio>
- <p className='font-light text-xs '>Lihat Contoh</p>
+ <Controller
+ name='minimumPembelian'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataMinimumOrderQuantity}
+ placeholder={'Pilih jenis minimum order quantity'}
+ onFocus={() => setValue('isOrderQuantity', 'ya')}
+ />
+ )}
+ />
+ </div>
+ <Radio
+ colorScheme='red'
+ value='tidak'
+ onChange={() => setValue('minimumPembelian', '')}
+ >
+ Tidak Ada
+ </Radio>
+ </Stack>
+ </RadioGroup>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.isOrderQuantity?.message}
</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
@@ -1375,23 +771,29 @@ const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
/>
</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 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' />
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:42:24 +0000