import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import cityApi from '@/lib/address/api/cityApi'; import stateApi from '@/lib/address/api/stateApi.js'; import districtApi from '@/lib/address/api/districtApi'; import subDistrictApi from '@/lib/address/api/subDistrictApi'; import { yupResolver } from '@hookform/resolvers/yup'; import React, { useEffect, useRef, useState } from 'react'; import ReCAPTCHA from 'react-google-recaptcha'; import { Controller, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import * as Yup from 'yup'; import createMerchantApi from '../api/createMerchantApi'; import getMerchantApi from '../api/getMerchantApi'; import addressApi from '@/lib/address/api/addressApi'; import PageContent from '@/lib/content/components/PageContent'; import { useRouter } from 'next/router'; import useAuth from '@/core/hooks/useAuth'; import { Radio, RadioGroup, Stack, 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 = ({ handleIsError }) => { const isError = (value) => { // Logika menentukan error const result = value ? true : false; handleIsError(result); // Panggil handleIsError dari Merchant return result; }; const { register, handleSubmit, formState: { errors }, control, reset, watch, setValue, getValues, } = useForm({ resolver: yupResolver(validationSchema), defaultValues, }); const list_unit = [ { value: 'Manufacturing', label: 'Manufacturing', }, { value: 'Hospitality', label: 'Hospitality', }, { value: 'Automotive', label: 'Automotive', }, { value: 'Retail', label: 'Retail', }, { value: 'Maining', label: 'Maining', }, { value: 'Lain - Lain', label: 'Lain - Lain', }, ]; const [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(); useEffect(() => { const loadData = async () => { const data = await getMerchantApi(); setbigData(data); console.log('data vendor', data); reset({ isKembaliBarang: data.isKembaliBarang || '', textReturn: data.textReturn || '', tenggatWaktu: (() => { const waktu = data.tenggatWaktu ? data.tenggatWaktu.split(' ')[0] : ''; if (waktu === '14') return '14'; if (waktu === '30') return '30'; return 'custom'; })(), customTenggatWaktu: (() => { if (watch('tenggatWaktu') === 'custom') return data.tenggatWaktu; return ''; })(), sertifikatProduk: data.sertifikatProduk || '', customSertifikatProduk: data.customSertifikatProduk || '', tempoGaransi: parseInt(data.tempoGaransi) || '', explainGaransi: data.explainGaransi || '', minimumPembelian: data.minimumPembelian || '', isOrderQuantity: data.isOrderQuantity || '', }); // handleKreditLimitChange(data.kreditLimit); setSelectedIds(watch('sertifikatProduk').split(',').map(Number)); if (watch('customSertifikatProduk')) { // setSelectedIds([...selectedIds, 4]); } }; loadData(); }, []); console.log('sertifikatProduk', watch('sertifikatProduk')); useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth', }); }, []); 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 dataGaransi = [ { value: 1, label: '6 Bulan Garansi' }, { value: 2, label: '1 Tahun Garansi' }, { value: 3, label: '2 Tahun Garansi' }, ]; const dataMinimumOrderQuantity = [ { value: 'dus', label: 'Dus' }, { value: 'lusin', label: 'Lusin' }, { 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: 1, name: 'TKDN' }, { id: 2, name: 'SNI' }, { id: 3, name: 'K3L' }, { id: 4, name: '' }, ]; const firstColumn = category_produk; const [selectedIds, setSelectedIds] = useState( watch('sertifikatProduk') ? watch('sertifikatProduk').split(',').map(Number) : [] // 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) : [...selectedIds, id]; setSelectedIds(updatedSelected); // Mengubah array kembali menjadi string yang dipisahkan oleh koma setValue('sertifikatProduk', updatedSelected.join(',')); }; const custom_sertifikat_produk_handle = () => { const updatedSelected = [...selectedIds, 4]; setSelectedIds(updatedSelected); // Mengubah array kembali menjadi string yang dipisahkan oleh koma setValue('sertifikatProduk', updatedSelected.join(',')); }; const isChecked = (id) => selectedIds.includes(id); const handleCheckboxReturChange = (value) => { setValue('isKembaliBarang', `${value}`); }; const handleCheckboxOrderQuantityChange = (value) => { setValue('isOrderQuantity', `${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 toastId = toast.loading('Mengirimkan formulir merchant...'); const data = { ...values, is_kembali_barang: values.isKembaliBarang, text_return: values.textReturn, tenggat_waktu: values.tenggatWaktu, custom_tenggat_waktu: values.customTenggatWaktu, sertifikat_produk: values.sertifikatProduk, custom_sertifikat_produk: values.customSertifikatProduk == '' ? false : values.customSertifikatProduk, tempo_garansi: values.tempoGaransi, explain_garansi: values.explainGaransi, is_order_quantity: values.isOrderQuantity, minimum_pembelian: values.minimumPembelian, }; const create_leads = await createMerchantApi({ data }); if (create_leads) { toast.dismiss(toastId); toast.success('Berhasil menambahkan data'); isError(false); 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' && (