import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import cityApi from '@/lib/address/api/cityApi';
import stateApi from '@/lib/address/api/stateApi.js';
import districtApi from '@/lib/address/api/districtApi';
import subDistrictApi from '@/lib/address/api/subDistrictApi';
import { yupResolver } from '@hookform/resolvers/yup';
import React, { useEffect, useRef, useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import { Controller, useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast';
import * as Yup from 'yup';
import createMerchantApi from '../api/createMerchantApi';
import addressApi from '@/lib/address/api/addressApi';
import PageContent from '@/lib/content/components/PageContent';
import { useRouter } from 'next/router';
import useAuth from '@/core/hooks/useAuth';
import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
import { EyeIcon } from '@heroicons/react/24/outline';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import Image from 'next/image';
import ImageBanner from '~/components/ui/image';
import { ChevronRightIcon } from '@heroicons/react/24/outline';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import getFileBase64 from '@/core/utils/getFileBase64';
import odooApi from '~/libs/odooApi';
const CreateMerchant = () => {
const {
register,
handleSubmit,
formState: { errors },
control,
reset,
watch,
setValue,
getValues,
} = useForm({
resolver: yupResolver(validationSchema),
defaultValues,
});
const list_unit = [
{
value: 'Manufacturing',
label: 'Manufacturing',
},
{
value: 'Hospitality',
label: 'Hospitality',
},
{
value: 'Automotive',
label: 'Automotive',
},
{
value: 'Retail',
label: 'Retail',
},
{
value: 'Maining',
label: 'Maining',
},
{
value: 'Lain - Lain',
label: 'Lain - Lain',
},
];
const [state, setState] = useState([]);
const [cities, setCities] = useState([]);
const [districts, setDistricts] = useState([]);
const [fileNames, setFileNames] = useState({});
const [DeatailFile, setDetailFile] = useState({});
const [subDistricts, setSubDistricts] = useState([]);
const [zips, setZips] = useState([]);
const [isExample, setIsExample] = useState(false);
const [BannerMerchant, setBannerMerchant] = useState();
const [isPkp, setIsPkp] = useState(false);
const recaptchaRef = useRef(null);
const router = useRouter();
useEffect(() => {
const getBanner = async () => {
const get = await odooApi(
'GET',
'/api/v1/banner?type=banner-form-merchant'
);
// setBannerMerchant(get[0].image);
setBannerMerchant(
'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431'
);
};
getBanner();
}, []);
const auth = useAuth();
if (auth == false) {
router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
}
useEffect(() => {
const loadProfile = async () => {
try {
const dataProfile = await addressApi({
id: auth.parentId ? auth.parentId : auth.partnerId,
});
if (dataProfile.companyType == 'pkp') {
setIsPkp(true);
}
setValue('company', dataProfile?.name);
setValue('address', dataProfile?.alamatBisnis);
setValue('state', parseInt(dataProfile.stateId.id));
setValue('city', parseInt(dataProfile.city.id));
setValue('district', parseInt(dataProfile.district.id));
setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
setValue('zip', parseInt(dataProfile.zip));
} catch (error) {
console.error('Error loading profile:', error);
}
};
loadProfile();
}, [auth?.parentId]);
useEffect(() => {
const loadState = async () => {
let dataState = await stateApi({ tempo: false });
dataState = dataState.map((state) => ({
value: state.id,
label: state.name,
}));
setState(dataState);
};
loadState();
}, []);
const watchState = watch('state');
useEffect(() => {
if (auth == false) {
return;
}
if (watchState) {
// setValue('city', '');
const loadCities = async () => {
let dataCities = await cityApi({ stateId: watchState });
dataCities = dataCities?.map((city) => ({
value: city.id,
label: city.name,
}));
setCities(dataCities);
};
loadCities();
}
}, [auth, watchState]);
const watchCity = watch('city');
useEffect(() => {
if (watchCity) {
setValue('district', '');
const loadDistricts = async () => {
let dataDistricts = await districtApi({ cityId: watchCity });
dataDistricts = dataDistricts.map((district) => ({
value: district.id,
label: district.name,
}));
setDistricts(dataDistricts);
};
loadDistricts();
}
}, [watchCity]);
const watchDistrict = watch('district');
useEffect(() => {
if (watchDistrict) {
setValue('subDistrict', '');
const loadSubDistricts = async () => {
let dataSubDistricts = await subDistrictApi({
districtId: watchDistrict,
});
dataSubDistricts = dataSubDistricts.map((district) => ({
value: district.id,
label: district.name,
}));
setSubDistricts(dataSubDistricts);
};
loadSubDistricts();
}
}, [watchDistrict]);
const watchsubDistrict = watch('subDistrict');
useEffect(() => {
let kelurahan = '';
let kecamatan = '';
if (watchDistrict) {
setValue('zip', '');
for (const data in districts) {
if (districts[data].value == watchDistrict) {
kecamatan = districts[data].label.toLowerCase();
}
}
}
if (watchsubDistrict) {
for (const data in subDistricts) {
if (subDistricts[data].value == watchsubDistrict) {
kelurahan = subDistricts[data].label.toLowerCase();
}
}
const loadZip = async () => {
const response = await fetch(
`https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
);
let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
const result = await response.json();
// Filter dan map data
const dataZips = result.result
.filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan
.filter((zip) => {
// Pastikan zip.kodepos belum ada di dataMasuk
if (dataMasuk.includes(zip.kodepos)) {
return false; // Jika sudah ada, maka skip (tidak akan ditambahkan)
} else {
dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk
return true; // Tambahkan zip ke hasil
}
})
.map((zip) => ({
value: parseInt(zip.kodepos),
label: zip.kodepos,
}));
setZips(dataZips); // Set hasil ke state
};
loadZip();
}
}, [watchsubDistrict, subDistricts]);
const onSubmitHandler = async (values) => {
const npwp = DeatailFile.npwp;
const sppkp = DeatailFile.sppkp;
const dokumenKtpDirut = DeatailFile.dokumenKtpDirut;
const kartuNama = DeatailFile.kartuNama;
const suratPernyataan = DeatailFile.suratPernyataan;
const fotoKantor = DeatailFile.fotoKantor;
const dataProduk = DeatailFile.dataProduk;
const pricelist = DeatailFile.pricelist;
if (!npwp && isPkp) {
toast.error('NPWP wajib di tambahkan');
return;
}
if (!sppkp && isPkp) {
toast.error('SPPKP wajib di tambahkan');
return;
}
if (!dokumenKtpDirut && !isPkp) {
toast.error('KTP Dirut/Direktur wajib di tambahkan');
return;
}
if (!fotoKantor) {
toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
return;
}
if (!pricelist) {
toast.error('Pricelist wajib di tambahkan');
return;
}
const toastId = toast.loading('Mengirimkan formulir merchant...');
const data = {
...values,
name_merchant: 'Form Merchant - ' + values.company,
pic_merchant: values.PICName,
partner_id: auth.partnerId,
address: values.address,
state: values.state,
city: values.city,
district: values.district,
subDistrict: values.subDistrict,
zip: values.zip,
bank_name: values.bank,
rekening_name: values.rekening,
account_number: values.accountNumber,
email_company: values.email,
email_sales: values.emailSales,
email_finance: values.emailFinance,
phone: values.phone,
mobile: values.mobile,
harga_tayang: values.hargaTayang,
description:
'Nama Perusahaan : ' +
values.company +
' \r\n Alamat : ' +
values.address +
' \r\n Kota : ' +
values.city +
' \r\n Telepon: ' +
values.phone +
' \r\n Email : ' +
values.email +
' \r\n No Hp : ' +
values.mobile,
file_dokumenKtpDirut: dokumenKtpDirut ? dokumenKtpDirut : '',
file_kartuNama: kartuNama ? kartuNama : '',
file_npwp: npwp ? npwp : '',
file_sppkp: sppkp ? sppkp : '',
file_suratPernyataan: suratPernyataan ? suratPernyataan : '',
file_fotoKantor: fotoKantor ? fotoKantor : '',
file_dataProduk: dataProduk ? dataProduk : '',
file_pricelist: pricelist ? pricelist : '',
};
// const formData = new FormData();
// formData.append('npwp', values.npwp[0]);
const create_leads = await createMerchantApi({ data });
if (create_leads) {
toast.dismiss(toastId);
toast.success('Berhasil menambahkan data');
reset();
router.push('/');
} else {
toast.dismiss(toastId);
toast.error('Gagal menambahkan data');
}
};
// const DownLoadSurat = () => {
// download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
// };
if (!auth) {
return;
}
// Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
const handleFileChange = async (event) => {
let fileBase64 = '';
const file = event.target.files[0];
if (file.size > 500000) {
try {
const toastId = toast.loading('mencoba mengompresi file...');
// Compress image file
const options = {
maxSizeMB: 0.5, // Target size in MB
maxWidthOrHeight: 1920, // Adjust as needed
useWebWorker: true,
};
const compressedFile = await imageCompression(file, options);
toast.success('berhasil mengompresi file', { duration: 4000 });
// Convert compressed file to Base64
fileBase64 = await getFileBase64(compressedFile);
} catch (error) {
toast.error('Gagal mengompresi file', { duration: 4000 });
}
} else {
// Convert file to Base64
fileBase64 = await getFileBase64(file);
}
const fieldName = event.target.name; // Nama input file
setDetailFile((prev) => ({
...prev,
[fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state
}));
setFileNames((prev) => ({
...prev,
[fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state
}));
};
return (
<>
setIsExample(false)}
>
{BannerMerchant && (
)}
Form Merchant
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.
Informasi Perusahaan
{BannerMerchant && (
)}
Form Merchant
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.