From 4b9cb6312d313cb76d1d9db03f29b59d2279b2c1 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 27 Dec 2024 11:44:54 +0700 Subject: update merchant --- src/lib/form/api/createMerchantApi.js | 8 + src/lib/form/components/Merchant.jsx | 1478 +++++++++++++++++++++++++++++---- 2 files changed, 1335 insertions(+), 151 deletions(-) create mode 100644 src/lib/form/api/createMerchantApi.js (limited to 'src/lib') diff --git a/src/lib/form/api/createMerchantApi.js b/src/lib/form/api/createMerchantApi.js new file mode 100644 index 00000000..8fd79857 --- /dev/null +++ b/src/lib/form/api/createMerchantApi.js @@ -0,0 +1,8 @@ +import odooApi from '@/core/api/odooApi'; + +const createMerchantApi = async ({ data }) => { + const lead = await odooApi('POST', '/api/v1/merchant', data); + return lead; +}; + +export default createMerchantApi; diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx index ee7d177d..db5f5ddd 100644 --- a/src/lib/form/components/Merchant.jsx +++ b/src/lib/form/components/Merchant.jsx @@ -1,6 +1,8 @@ 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'; @@ -8,10 +10,17 @@ import { Controller, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import * as Yup from 'yup'; import createLeadApi from '../api/createLeadApi'; +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 { ChevronRightIcon } from '@heroicons/react/24/outline'; +import MobileView from '@/core/components/views/MobileView'; +import DesktopView from '@/core/components/views/DesktopView'; const CreateMerchant = () => { const { register, @@ -21,6 +30,7 @@ const CreateMerchant = () => { reset, watch, setValue, + getValues, } = useForm({ resolver: yupResolver(validationSchema), defaultValues, @@ -51,8 +61,13 @@ const CreateMerchant = () => { label: 'Lain - Lain', }, ]; - const [cities, setCities] = useState([]); const [state, setState] = useState([]); + const [cities, setCities] = useState([]); + const [districts, setDistricts] = useState([]); + const [fileNames, setFileNames] = useState({}); + const [subDistricts, setSubDistricts] = useState([]); + const [zips, setZips] = useState([]); + const [isExample, setIsExample] = useState(false); const [company_unit, setCompany_unit] = useState(list_unit); const recaptchaRef = useRef(null); @@ -63,6 +78,28 @@ const CreateMerchant = () => { router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`); } + useEffect(() => { + const loadProfile = async () => { + try { + const dataProfile = await addressApi({ id: auth.parentId }); + console.log('dataProfile', dataProfile); + 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); + } + }; + + if (auth?.parentId) { + loadProfile(); + } + }, [auth?.parentId, setValue]); + useEffect(() => { const loadState = async () => { let dataState = await stateApi(); @@ -92,18 +129,134 @@ const CreateMerchant = () => { loadCities(); }, [auth, watchState, setValue]); + const watchCity = watch('city'); + + useEffect(() => { + setValue('district', ''); + if (watchCity) { + const loadDistricts = async () => { + let dataDistricts = await districtApi({ cityId: watchCity }); + dataDistricts = dataDistricts.map((district) => ({ + value: district.id, + label: district.name, + })); + setDistricts(dataDistricts); + }; + loadDistricts(); + } + }, [watchCity, setValue]); + + const watchDistrict = watch('district'); + useEffect(() => { + setValue('subDistrict', ''); + if (watchDistrict) { + const loadSubDistricts = async () => { + let dataSubDistricts = await subDistrictApi({ + districtId: watchDistrict, + }); + dataSubDistricts = dataSubDistricts.map((district) => ({ + value: district.id, + label: district.name, + })); + setSubDistricts(dataSubDistricts); + }; + loadSubDistricts(); + } + }, [watchDistrict, setValue]); + + const watchsubDistrict = watch('subDistrict'); + + useEffect(() => { + setValue('zip', ''); + let kelurahan = ''; + let kecamatan = ''; + + if (watchDistrict) { + 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, setValue, subDistricts]); + const onSubmitHandler = async (values) => { - const recaptchaValue = recaptchaRef.current.getValue(); - if (!recaptchaValue) { - toast.error('Catcha harus diisi'); + const dokumenKtpDirut = document.getElementById('dokumenKtpDirut').files[0]; + const kartuNama = document.getElementById('kartuNama').files[0]; + const sppkp = document.getElementById('sppkp').files[0]; + const npwp = document.getElementById('npwp').files[0]; + const suratPernyataan = document.getElementById('suratPernyataan').files[0]; + const fotoKantor = document.getElementById('fotoKantor').files[0]; + if (!npwp) { + toast.error('NPWP wajib di tambahkan'); + return; + } + if (!suratPernyataan) { + toast.error('Surat Pernyataan Nomor Rekening wajib di tambahkan'); return; } + if (!fotoKantor) { + toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan'); + return; + } + console.log('Submitted Values:', values); + console.log('values.npwp[0]:', values.npwp[0]); + console.log('npwp:', npwp); const data = { ...values, name: 'Form Merchant - ' + values.company, - contact_name: values.cp, - email_from: values.email, + 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_finnance: values.emailFinance, phone: values.phone, + mobile: values.mobile, description: 'Nama Perusahaan : ' + values.company + @@ -123,200 +276,1201 @@ const CreateMerchant = () => { values.mobile + 'Keterangan : ' + values.description, + file_dokumenKtpDirut: dokumenKtpDirut + ? await getFileBase64(dokumenKtpDirut) + : '', + file_kartuNama: kartuNama ? await getFileBase64(kartuNama) : '', + file_npwp: npwp ? await getFileBase64(npwp) : '', + file_sppkp: sppkp ? await getFileBase64(sppkp) : '', + file_suratPernyataan: suratPernyataan + ? await getFileBase64(suratPernyataan) + : '', + file_fotoKantor: fotoKantor ? await getFileBase64(fotoKantor) : '', }; - const create_leads = await createLeadApi({ data }); - if (create_leads) { - toast.success('Berhasil menambahkan data'); - reset(); - recaptchaRef.current.reset(); - } + // const formData = new FormData(); + // formData.append('npwp', values.npwp[0]); + // const create_leads = await createLeadApi({ formData }); + // if (create_leads) { + // toast.success('Berhasil menambahkan data'); + // reset(); + // } }; + + // 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 = (event) => { + const file = event.target.files[0]; + if (file.size > 2000000) { + toast.error('Maksimal ukuran file adalah 2MB'); + event.target.value = ''; + return; + } + const fieldName = event.target.name; // Nama input file + setFileNames((prev) => ({ + ...prev, + [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state + })); + }; + + console.log('errors', errors); return ( -
-

- Form Merchant -

-
-
-

- Penjualan online adalah hal yang HARUS dilakukan mulai sekarang. - Perubahan dalam banyak industri dan pola pembelian. Gabung dengan - platform kami dan mulai penjualan lansung di ribuan perusahaan d - seluruh Indonesia.{' '} -

+ <> + setIsExample(false)} + > +
+ Contoh SPPKP
-
-
-
-
- - -
- {errors.company?.message} + + +
+

+ 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 +

+ +
+ +
+
+ + + isi detail perusahaan sesuai dengan nama yang terdaftar{' '} + +
+
+ + + Format: PT. INDOTEKNIK DOTCOM GEMILANG + +
+ {errors.company?.message} +
-
-
-
- - -
- {errors.address?.message} +
+
+ + + alamat sesuai dengan alamat perusahaan + +
+
+
+ +
+ {errors.address?.message} +
+
+
+
+ ( + + )} + /> +
+ {errors.state?.message} +
+
+
+ ( + + )} + /> +
+ {errors.city?.message} +
+
+
+ ( + + )} + /> +
+ {errors.district?.message} +
+
+
+ ( + + )} + /> +
+ {errors.subDistrict?.message} +
+
+
+ ( + <> + {/* Jika zips tidak kosong, tampilkan dropdown */} + {zips.length > 0 ? ( + + ) : ( + // Jika zips kosong, tampilkan input manual + + )} + + )} + /> +
+ {errors.zip?.message} +
+
+
+
+
+
+
+ + + Isi detail data bank perusahaan anda + +
+
+
+ + + Format: BCA, Mandiri, CIMB, BNI dll + +
+ {errors.bank?.message} +
+
+
+ + Format: John Doe +
+ {errors.rekening?.message} +
+
+
+ + + Format: 01234567896 + +
+ {errors.accountNumber?.message} +
+
+
+
+
+
+ +
+
+ +
+ {errors.email?.message} +
+
+
+
+
+ +
+
+ +
+ {errors.emailSales?.message} +
+
+
+
+
+ +
+
+ +
+ {errors.emailFinance?.message} +
+
+
+
+
+ + + isi no telepon perusahaan yang sesuai + +
+
+ +
+ {errors.phone?.message} +
+
+
+
+
+ + + isi no handphone perusahaan yang sesuai + +
+
+ +
+ {errors.mobile?.message} +
-
-
-
- + +
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+
+ + + + {fileNames.dokumenKtpDirut} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.dokumenKtpDirut?.message} +
+
+
+ +
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+
+ + + + {fileNames.kartuNama} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.kartuNama?.message} +
+
+
+ +
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+
+ + { + handleFileChange(e); // Untuk update UI (opsional) + }} + aria-invalid={errors.npwp?.message} + /> + + {fileNames.npwp} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.npwp?.message} +
+
+
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
setIsExample(!isExample)} + className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400' + > + + +

Lihat Contoh

+
+
+
+
+ + + + {fileNames.sppkp} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.sppkp?.message} +
+
+
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+ +

Download Template

+ +
+
+
+ + + + {fileNames.suratPernyataan} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.suratPernyataan?.message} +
+
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+
+ + + + {fileNames.fotoKantor} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.fotoKantor?.message} +
+
+
+
+
+ +
+
+
+ +
+ {/* */} +
+
+ + +
+
+ + +
+

+ 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

+ +
+
+
+
+ + +
+ {errors.company?.message} +
+ + isi detail perusahaan sesuai dengan nama yang terdaftar{' '} + +
+
+
+
+ + +
+ {errors.address?.message} +
+
+
+ ( + + )} + /> +
+ {errors.state?.message} +
+
+
+ ( + + )} + /> +
+ {errors.city?.message} +
+
+
+
+
+ ( + + )} + /> +
+ {errors.district?.message} +
+
+
+ ( + + )} + /> +
+ {errors.subDistrict?.message} +
+
+
+ ( + <> + {zips.length > 0 ? ( + + ) : ( + + )} + + )} + /> +
+ {errors.zip?.message} +
+
+
+
+ + alamat sesuai dengan alamat perusahaan + +
+
+ +
+
+ +
+ {errors.bank?.message} +
+
+
+ +
+ {errors.rekening?.message} +
+
+
+ +
+ {errors.accountNumber?.message} +
+
+
+ + Isi detail data bank perusahaan anda + +
+
+
- {errors.phone?.message} + {errors.email?.message}
+ + isi detail perusahaan sesuai dengan data yang terdaftar +
-
-
- - ( - - )} - /> -
- {errors.state?.message} -
-
-
-
- - ( - - )} - /> -
- {errors.city?.message} -
-
-
-
-
- - ( - - )} +
+ +
- {errors.company_unit?.message} + {errors.emailSales?.message}
+ + isi detail perusahaan sesuai dengan data yang terdaftar +
-
-
-
- +
+
- {errors.website?.message} + {errors.emailFinance?.message}
+ + isi detail perusahaan sesuai dengan data yang terdaftar +
-
-
-
- +
+
- {errors.cp?.message} + {errors.phone?.message}
+ + isi detail perusahaan sesuai dengan data yang terdaftar +
-
-
-
- +
+
{errors.mobile?.message}
+ + isi detail perusahaan sesuai dengan data yang terdaftar +
-
-
-
- - + +
+ +
+ + + + {fileNames.dokumenKtpDirut} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + +
- {errors.email?.message} + {errors.dokumenKtpDirut?.message}
-
-
-
- + +
+ +
+ + + + {fileNames.kartuNama} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.kartuNama?.message} +
+
+ +
+ +
+ + { + handleFileChange(e); // Untuk update UI (opsional) + }} + aria-invalid={errors.npwp?.message} + /> + + {fileNames.npwp} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.npwp?.message} +
+
+
+
+ +
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' + > + + +

Lihat Contoh

+
+
+
+ + + + {fileNames.sppkp} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.sppkp?.message} +
+
+
+
+ + +

+ Download Template +

+ +
+
+ + + + {fileNames.suratPernyataan} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.suratPernyataan?.message} +
+
+
+ +
+ + + + {fileNames.fotoKantor} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.fotoKantor?.message} +
+
+
+
+ +
-
-
-
- +
+ {/* + */} +
-
- - + + +
-
-
+ + ); }; const validationSchema = Yup.object().shape({ @@ -324,21 +1478,43 @@ const validationSchema = Yup.object().shape({ email: Yup.string() .email('Format harus seperti contoh@email.com') .required('Harus di-isi'), + emailSales: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), + emailFinance: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), phone: Yup.string().required('Harus di-isi'), cp: Yup.string().required('Harus di-isi'), state: Yup.string().required('Harus dipilih'), - city: Yup.string().required('Harus di-isi'), + city: Yup.string().required('Harus dipilih'), + district: Yup.string().required('Harus dipilih'), + subDistrict: Yup.string().required('Harus dipilih'), + zip: Yup.string().required('Harus di-isi'), + bank: Yup.string().required('Harus di-isi'), + rekening: Yup.string().required('Harus di-isi'), + accountNumber: Yup.string().required('Harus di-isi'), company_unit: Yup.string().required('Harus di-isi'), address: Yup.string().required('Harus di-isi'), website: Yup.string().required('Harus di-isi'), mobile: Yup.string().required('Harus di-isi'), + npwp: Yup.mixed().required('File is required'), + suratPernyataan: Yup.mixed().required('File is required'), }); const defaultValues = { company: '', email: '', + emailSales: '', + emailFinance: '', phone: '', state: '', city: '', + district: '', + subDistrict: '', + zip: '', + bank: '', + rekening: '', + accountNumber: '', company_unit: '', cp: '', address: '', -- cgit v1.2.3