import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import cityApi from '@/lib/address/api/cityApi'; import stateApi from '@/lib/address/api/stateApi.js'; import districtApi from '@/lib/address/api/districtApi'; import subDistrictApi from '@/lib/address/api/subDistrictApi'; import { yupResolver } from '@hookform/resolvers/yup'; import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle, } from 'react'; import ReCAPTCHA from 'react-google-recaptcha'; import { Controller, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import * as Yup from 'yup'; import createMerchantApi from '../api/createMerchantApi'; import getMerchantApi from '../api/getMerchantApi'; import addressApi from '@/lib/address/api/addressApi'; import PageContent from '@/lib/content/components/PageContent'; import { useRouter } from 'next/router'; import useAuth from '@/core/hooks/useAuth'; import { Radio, RadioGroup, Stack, 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'; import { formatValue } from 'react-currency-input-field'; const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { const isError = (value) => { // Logika menentukan error const result = value ? true : false; handleIsError(result); // Panggil handleIsError dari Merchant return result; }; const { register, handleSubmit, formState: { errors }, control, reset, watch, setValue, getValues, } = useForm({ resolver: yupResolver(validationSchema), defaultValues, }); const [categoryProduk, setCategoryProduk] = useState([]); const [isExample, setIsExample] = useState(false); 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 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 midIndex = Math.ceil(categoryProduk.length / 2); const firstColumn = categoryProduk.slice(0, midIndex); const secondColumn = categoryProduk.slice(midIndex); const [kreditLimitFormat, setKreditLimitFormat] = useState(); useEffect(() => { const loadData = async () => { const data = await getMerchantApi(); if (data) { reset({ hargaTayang: data.hargaTayang || '', categoryProduk: data.categoryProduk || '', merkDagang: data.merkDagang || '', isPengajuanTempo: data.isPengajuanTempo || '', tempoDuration: parseInt(data.tempoDuration) || '', // kreditLimit: parseInt(data.kreditLimit) || '', waktuPengiriman: data.waktuPengiriman || '', terhitungSejak: parseInt(data.terhitungSejak) || '', }); handleKreditLimitChange(data.kreditLimit || ''); setSelectedIds(watch('categoryProduk').split(',').map(Number)); } }; loadData(); }, []); useImperativeHandle(ref, () => () => { handleSubmit(onSubmitHandler)(); }); const handleKreditLimitChange = (e) => { let value = e.target?.value ? e.target.value : e; // Hapus semua karakter non-numeric value = value.replace(/[^\d]/g, ''); // Format angka sebagai Rupiah tanpa mengubah nilai sebenarnya const formattedValue1 = formatValue({ value: value, groupSeparator: '.', decimalSeparator: ',', prefix: 'Rp ', }); setKreditLimitFormat(formattedValue1); setValue('kreditLimit', formattedValue1); }; 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 handleCheckboxPortalChange = (value) => { setValue('isPengajuanTempo', `${value}`); }; useEffect(() => { if (!isKonfirmasi) { window.scrollTo({ top: 0, behavior: 'smooth', }); } }, []); useEffect(() => { const loadCategories = async () => { let dataCategories = await odooApi('GET', '/api/v1/category/tree'); const formattedCategories = dataCategories.map((category) => ({ id: category.id, name: category.name, })); // Simpan hasil ke state setCategoryProduk(formattedCategories); }; loadCategories(); }, []); const onSubmitHandler = async (values) => { const toastId = toast.loading('Mengirimkan formulir merchant...'); const data = { harga_tayang: values.hargaTayang, categoryProduk: values.categoryProduk, merk_dagang: values.merkDagang, is_pengajuan_tempo: values.isPengajuanTempo, tempo_duration: values.tempoDuration, kredit_limit: values.kreditLimit, waktu_pengiriman: values.waktuPengiriman, terhitung_sejak: values.terhitungSejak, }; const create_leads = await createMerchantApi({ data }); if (create_leads) { toast.dismiss(toastId); isError(false); 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; } return ( <> setIsExample(false)} >
Contoh SPPKP

Informasi Vendor