import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import cityApi from '@/lib/address/api/cityApi'; import stateApi from '@/lib/address/api/stateApi.js'; import districtApi from '@/lib/address/api/districtApi'; import subDistrictApi from '@/lib/address/api/subDistrictApi'; import { yupResolver } from '@hookform/resolvers/yup'; import React, { useEffect, useRef, useState } from 'react'; import ReCAPTCHA from 'react-google-recaptcha'; import { Controller, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import * as Yup from 'yup'; import createMerchantApi from '../../form/api/createMerchantApi'; import addressApi from '@/lib/address/api/addressApi'; import PageContent from '@/lib/content/components/PageContent'; import { useRouter } from 'next/router'; import useAuth from '@/core/hooks/useAuth'; import { Radio, RadioGroup, Stack, Checkbox, Button } from '@chakra-ui/react'; import { EyeIcon } from '@heroicons/react/24/outline'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; import Image from 'next/image'; import ImageBanner from '~/components/ui/image'; import { ChevronRightIcon } from '@heroicons/react/24/outline'; import MobileView from '@/core/components/views/MobileView'; import DesktopView from '@/core/components/views/DesktopView'; import getFileBase64 from '@/core/utils/getFileBase64'; import odooApi from '~/libs/odooApi'; const SyaratDagang = () => { const { register, handleSubmit, formState: { errors }, control, reset, watch, setValue, getValues, } = useForm({ resolver: yupResolver(validationSchema), defaultValues, }); const list_unit = [ { value: 'Manufacturing', label: 'Manufacturing', }, { value: 'Hospitality', label: 'Hospitality', }, { value: 'Automotive', label: 'Automotive', }, { value: 'Retail', label: 'Retail', }, { value: 'Maining', label: 'Maining', }, { value: 'Lain - Lain', label: 'Lain - Lain', }, ]; const [state, setState] = useState([]); const [cities, setCities] = useState([]); const [districts, setDistricts] = useState([]); const [fileNames, setFileNames] = useState({}); const [DeatailFile, setDetailFile] = useState({}); const [subDistricts, setSubDistricts] = useState([]); const [zips, setZips] = useState([]); const [isExample, setIsExample] = useState(false); const [BannerMerchant, setBannerMerchant] = useState(); const [isPkp, setIsPkp] = useState(false); const recaptchaRef = useRef(null); const router = useRouter(); const auth = useAuth(); 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 dataTempo = [ { value: 24, label: 'Tempo 14 Hari' }, { value: 25, label: 'Tempo 30 Hari' }, { value: 28, label: 'Tempo 60 Hari' }, { 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: 1, name: 'TKDN' }, { id: 2, name: 'SNI' }, { id: 3, name: 'K3L' }, { id: 4, name: '' }, ]; const firstColumn = category_produk; const [selectedIds, setSelectedIds] = useState( watch('categoryProduk') ? watch('categoryProduk').split(',').map(Number) : [] // form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka // [] // Parse string menjadi array angka ); const handleCheckboxChange = (id) => { const updatedSelected = selectedIds.includes(id) ? selectedIds.filter((selectedId) => selectedId !== id) : [...selectedIds, id]; setSelectedIds(updatedSelected); // Mengubah array kembali menjadi string yang dipisahkan oleh koma setValue('categoryProduk', updatedSelected.join(',')); }; const isChecked = (id) => selectedIds.includes(id); const handleCheckboxReturChange = (value) => { setValue('isKembaliBarang', `${value}`); }; 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 npwp = DeatailFile.npwp; const sppkp = DeatailFile.sppkp; const dokumenKtpDirut = DeatailFile.dokumenKtpDirut; const kartuNama = DeatailFile.kartuNama; const suratPernyataan = DeatailFile.suratPernyataan; const fotoKantor = DeatailFile.fotoKantor; const dataProduk = DeatailFile.dataProduk; const pricelist = DeatailFile.pricelist; if (!npwp && isPkp) { toast.error('NPWP wajib di tambahkan'); return; } if (!sppkp && isPkp) { toast.error('SPPKP wajib di tambahkan'); return; } if (!dokumenKtpDirut && !isPkp) { toast.error('KTP Dirut/Direktur wajib di tambahkan'); return; } if (!fotoKantor) { toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan'); return; } if (!pricelist) { toast.error('Pricelist wajib di tambahkan'); return; } const toastId = toast.loading('Mengirimkan formulir merchant...'); const data = { ...values, name_merchant: 'Form Merchant - ' + values.company, pic_merchant: values.PICName, partner_id: auth.partnerId, address: values.address, state: values.state, city: values.city, district: values.district, subDistrict: values.subDistrict, zip: values.zip, bank_name: values.bank, rekening_name: values.rekening, account_number: values.accountNumber, email_company: values.email, email_sales: values.emailSales, email_finance: values.emailFinance, phone: values.phone, mobile: values.mobile, harga_tayang: values.hargaTayang, description: 'Nama Perusahaan : ' + values.company + ' \r\n Alamat : ' + values.address + ' \r\n Kota : ' + values.city + ' \r\n Telepon: ' + values.phone + ' \r\n Email : ' + values.email + ' \r\n No Hp : ' + values.mobile, file_dokumenKtpDirut: dokumenKtpDirut ? dokumenKtpDirut : '', file_kartuNama: kartuNama ? kartuNama : '', file_npwp: npwp ? npwp : '', file_sppkp: sppkp ? sppkp : '', file_suratPernyataan: suratPernyataan ? suratPernyataan : '', file_fotoKantor: fotoKantor ? fotoKantor : '', file_dataProduk: dataProduk ? dataProduk : '', file_pricelist: pricelist ? pricelist : '', }; // const formData = new FormData(); // formData.append('npwp', values.npwp[0]); const create_leads = await createMerchantApi({ data }); if (create_leads) { toast.dismiss(toastId); toast.success('Berhasil menambahkan data'); reset(); router.push('/'); } else { toast.dismiss(toastId); toast.error('Gagal menambahkan data'); } }; // const DownLoadSurat = () => { // download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx // }; if (!auth) { return; } // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook const handleFileChange = async (event) => { let fileBase64 = ''; const file = event.target.files[0]; if (file.size > 500000) { try { const toastId = toast.loading('mencoba mengompresi file...'); // Compress image file const options = { maxSizeMB: 0.5, // Target size in MB maxWidthOrHeight: 1920, // Adjust as needed useWebWorker: true, }; const compressedFile = await imageCompression(file, options); toast.success('berhasil mengompresi file', { duration: 4000 }); // Convert compressed file to Base64 fileBase64 = await getFileBase64(compressedFile); } catch (error) { toast.error('Gagal mengompresi file', { duration: 4000 }); } } else { // Convert file to Base64 fileBase64 = await getFileBase64(file); } const fieldName = event.target.name; // Nama input file setDetailFile((prev) => ({ ...prev, [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state })); setFileNames((prev) => ({ ...prev, [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state })); }; return ( <> setIsExample(false)} >
Contoh SPPKP

Syarat Perdagangan

Ya, dapat diretur {watch('isKembaliBarang') == 'ya' && (