summaryrefslogtreecommitdiff
path: root/src/lib/merchant/components/InformasiVendor.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/merchant/components/InformasiVendor.jsx')
-rw-r--r--src/lib/merchant/components/InformasiVendor.jsx748
1 files changed, 748 insertions, 0 deletions
diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx
new file mode 100644
index 00000000..d00f27ed
--- /dev/null
+++ b/src/lib/merchant/components/InformasiVendor.jsx
@@ -0,0 +1,748 @@
+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 (
+ <>
+ <BottomPopup
+ className=''
+ title='Contoh SPPKP'
+ active={isExample}
+ close={() => setIsExample(false)}
+ >
+ <div className='flex p-2'>
+ <Image
+ src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+ alt='Contoh SPPKP'
+ className='w-full h-full '
+ width={800}
+ height={800}
+ quality={85}
+ />
+ </div>
+ </BottomPopup>
+ <DesktopView>
+ <div className='container flex flex-col items-star py-4 '>
+ <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+ Informasi Vendor
+ </h2>
+
+ <div className='w-full mt-4'>
+ <form
+ onSubmit={handleSubmit(onSubmitHandler)}
+ className='flex flex-col gap-4'
+ >
+ <div className='w-full flex flex-row'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Harga Tayang (HET){' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ </div>
+ <div className='w-3/5'>
+ <textarea
+ {...register('hargaTayang')}
+ placeholder='Jelaskan detail HET yang anda miliki'
+ type='textarea'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.hargaTayang?.message}
+ </div>
+ </div>
+ </div>
+
+ <div className={`flex flex-row justify-between items-start`}>
+ <div className='w-2/5 text-nowrap'>
+ <label
+ className={`form-label ${isKonfirmasi && 'text-wrap'}`}
+ >
+ Tipe Kategori Produk yang Digunakan
+ </label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih kategori produk bisa lebih dari 1
+ </span>
+ )}
+ </div>
+ <div className='w-3/5 flex flex-col'>
+ <div className='flex flex-row justify-between gap-2'>
+ <div
+ className='flex flex-col gap-2'
+ // ref={categoryProdukRef}
+ >
+ {firstColumn.map((item) => (
+ <Checkbox
+ colorScheme='red'
+ key={item.id}
+ onChange={() => handleCheckboxChange(item.id)}
+ isChecked={isChecked(item.id)}
+ >
+ {item.name}
+ </Checkbox>
+ ))}
+ </div>
+ <div className='flex flex-col gap-2 '>
+ {secondColumn.map((item) => (
+ <Checkbox
+ colorScheme='red'
+ key={item.id}
+ isChecked={isChecked(item.id)}
+ onChange={() => handleCheckboxChange(item.id)}
+ >
+ {item.name}
+ </Checkbox>
+ ))}
+ </div>
+ </div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.categoryProduk?.message}
+ </div>
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>Merk Dagang</label>
+ </div>
+ <div className='w-3/5'>
+ <input
+ {...register('merkDagang')}
+ placeholder='Merk 1, Merk 2, Merk 3'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.merkDagang?.message}
+ </div>
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-between items-start'>
+ <div className='w-2/5'>
+ <label className='form-label text-wrap '>
+ Apakah anda memiliki Form Pengajuan Tempo?
+ </label>
+ </div>
+ <div className='w-3/5 flex flex-col justify-start'>
+ <div className='flex gap-x-4'>
+ <RadioGroup
+ onChange={handleCheckboxPortalChange}
+ value={watch('isPengajuanTempo')}
+ >
+ <Stack direction='row'>
+ <Radio colorScheme='red' value='ada'>
+ Ya, ada
+ </Radio>
+ <Radio colorScheme='red' value='tidak'>
+ Tidak ada
+ </Radio>
+ </Stack>
+ </RadioGroup>
+ </div>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.isPengajuanTempo?.message}
+ </div>
+ </div>
+ </div>
+
+ <div className='flex flex-row justify-between items-center'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>Durasi Tempo</label>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih durasi tempo yang anda inginkan
+ </span>
+ )}
+ </div>
+ <div className='w-3/5 flex flex-col '>
+ <div className='flex flex-row items-center gap-3'>
+ <div className={`${!isKonfirmasi && 'w-[25%]'}`}>
+ <Controller
+ name='tempoDuration'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataTempo}
+ placeholder={'Pilih Durasi Tempo'}
+ />
+ )}
+ />
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.tempoDuration?.message}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Jumlah Kredit Limit
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ isi dengan kredit limit perusahaan anda
+ </span>
+ )}
+ </div>
+ <div className='w-3/5'>
+ <input
+ value={kreditLimitFormat}
+ onChange={handleKreditLimitChange}
+ placeholder='Masukkan jumlah kredit limit'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.kreditLimit?.message}
+ </div>
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ Waktu Pengiriman
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ isi dengan waktu pengiriman anda
+ </span>
+ )}
+ </div>
+ <div className='w-3/5 flex flex-row gap-2'>
+ <div className='w-1/3'>
+ <input
+ {...register('waktuPengiriman')}
+ placeholder='Masukkan waktu pengiriman'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.waktuPengiriman?.message}
+ </div>
+ </div>
+ <div className='w-2/3 '>
+ <div className='flex flex-row items-center gap-2'>
+ <label className=' text-nowrap text-sm opacity-70 italic'>
+ terhitung sejak
+ </label>
+
+ <Controller
+ name='terhitungSejak'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataTerhitungSejak}
+ placeholder={'waktu pengiriman'}
+ />
+ )}
+ />
+ </div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.terhitungSejak?.message}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div className=''>
+ {/* <div>
+ <ReCAPTCHA
+ ref={recaptchaRef}
+ sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+ />
+ </div> */}
+ </div>
+ <div className='flex justify-end'>
+ {/* <Button
+ colorScheme='red'
+ className='w-full md:w-fit'
+ type='submit'
+ >
+ Daftar Merchant{' '}
+ {<ChevronRightIcon className='w-5' color='white' />}
+ </Button> */}
+ {!isKonfirmasi && (
+ <div>
+ <span className='text-xs opacity-60'>
+ *Pastikan data yang anda masukan sudah benar dan sesuai
+ </span>
+ <button
+ type='submit'
+ className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+ >
+ <span className={` `}>Langkah Selanjutnya</span>
+ {<ChevronRightIcon className='w-5' />}
+ </button>
+ </div>
+ )}
+ </div>
+ </form>
+ <PageContent path='/daftar-merchant' />
+ </div>
+ </div>
+ </DesktopView>
+ <MobileView>
+ <div className='container flex flex-col items-star py-4'>
+ {!isKonfirmasi && (
+ <h2 className='font-semibold mb-6 text-xl'>Informasi Vendor</h2>
+ )}
+
+ <div className='w-full mt-4'>
+ <form
+ onSubmit={handleSubmit(onSubmitHandler)}
+ className='flex flex-col gap-4'
+ >
+ <div className='w-full flex flex-col'>
+ <div className='w-full'>
+ <label className='form-label text-nowrap'>
+ Harga Tayang (HET){' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <input
+ {...register('hargaTayang')}
+ placeholder='Jelaskan detail HET yang anda miliki'
+ type='textarea'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.hargaTayang?.message}
+ </div>
+ </div>
+ </div>
+ <div
+ className={`flex flex-col gap-2 justify-between ${
+ isKonfirmasi ? 'items-start' : 'items-start'
+ }`}
+ >
+ <label className='form-label '>
+ Tipe Kategori Produk yang Digunakan
+ </label>
+ <div className='flex flex-col justify-between gap-2 '>
+ <div className='flex flex-col gap-2'>
+ {firstColumn.map((item) => (
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key={item.id}
+ onChange={() => handleCheckboxChange(item.id)}
+ isChecked={isChecked(item.id)}
+ >
+ {item.name}
+ </Checkbox>
+ ))}
+ </div>
+ <div className='flex flex-col gap-2'>
+ {secondColumn.map((item) => (
+ <Checkbox
+ size='sm'
+ colorScheme='red'
+ key={item.id}
+ isChecked={isChecked(item.id)}
+ onChange={() => handleCheckboxChange(item.id)}
+ >
+ {item.name}
+ </Checkbox>
+ ))}
+ </div>
+ </div>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.categoryProduk?.message}
+ </div>
+ </div>
+ <div className='w-full flex flex-col'>
+ <div className='w-full'>
+ <label className='form-label text-nowrap'>Merk Dagang</label>
+ <input
+ {...register('merkDagang')}
+ placeholder='Merk 1, Merk 2, Merk 3'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.merkDagang?.message}
+ </div>
+ </div>
+ </div>
+ <div className='w-full flex flex-col'>
+ <label className='form-label text-nowrap'>
+ Apakah anda memiliki Form Pengajuan Tempo?
+ </label>
+ <div className='flex gap-x-4'>
+ <RadioGroup
+ onChange={handleCheckboxPortalChange}
+ value={watch('isPengajuanTempo')}
+ >
+ <Stack direction='row'>
+ <Radio colorScheme='red' value='ada'>
+ Ya, ada
+ </Radio>
+ <Radio colorScheme='red' value='tidak'>
+ Tidak ada
+ </Radio>
+ </Stack>
+ </RadioGroup>
+ </div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.isPengajuanTempo?.message}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-col'>
+ <label className='form-label text-nowrap'>Durasi Tempo</label>
+ <Controller
+ name='tempoDuration'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataTempo}
+ placeholder={'Pilih Durasi Tempo'}
+ />
+ )}
+ />
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.tempoDuration?.message}
+ </div>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60'>
+ Pilih durasi tempo yang anda inginkan
+ </span>
+ )}
+ </div>
+ <div className='w-full flex flex-col'>
+ <label className='form-label text-nowrap'>
+ Jumlah Kredit Limit
+ </label>
+ <input
+ value={kreditLimitFormat}
+ onChange={handleKreditLimitChange}
+ placeholder='Masukkan jumlah kredit limit'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.kreditLimit?.message}
+ </div>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ isi dengan kredit limit perusahaan anda
+ </span>
+ )}
+ </div>
+ <div className='w-full flex flex-col'>
+ <label className='form-label text-nowrap'>
+ {' '}
+ Waktu Pengiriman
+ </label>
+ <div className='w-full flex flex-row gap-2'>
+ <div className='w-1/3'>
+ <input
+ {...register('waktuPengiriman')}
+ placeholder='Masukkan waktu pengiriman'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.waktuPengiriman?.message}
+ </div>
+ </div>
+ <div className='w-2/3 '>
+ <div className='flex flex-row items-center gap-2'>
+ <label className=' text-nowrap text-sm opacity-70 italic'>
+ terhitung sejak
+ </label>
+
+ <Controller
+ name='terhitungSejak'
+ control={control}
+ render={(props) => (
+ <HookFormSelect
+ {...props}
+ options={dataTerhitungSejak}
+ placeholder={'waktu pengiriman'}
+ />
+ )}
+ />
+ </div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.terhitungSejak?.message}
+ </div>
+ </div>
+ </div>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ isi dengan waktu pengiriman anda
+ </span>
+ )}
+ </div>
+
+ <div className=''>
+ {/* <div>
+ <ReCAPTCHA
+ ref={recaptchaRef}
+ sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+ />
+ </div> */}
+ </div>
+ <div className='flex justify-center w-full '>
+ {/* <Button
+ colorScheme='red'
+ className='w-full md:w-fit'
+ type='submit'
+ >
+ Daftar Merchant{' '}
+ {<ChevronRightIcon className='w-5' color='white' />}
+ </Button> */}
+ {!isKonfirmasi && (
+ <div className='w-full'>
+ <span className='text-xs opacity-60'>
+ *Pastikan data yang anda masukan sudah benar dan sesuai
+ </span>
+ <button
+ type='submit'
+ className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+ >
+ <span className={` `}>Langkah Selanjutnya</span>
+ {<ChevronRightIcon className='w-5' />}
+ </button>
+ </div>
+ )}
+ </div>
+ </form>
+ <PageContent path='/daftar-merchant' />
+ </div>
+ </div>
+ </MobileView>
+ </>
+ );
+});
+const validationSchema = Yup.object().shape({
+ categoryProduk: Yup.string().required('Harus di-pilih'),
+ merkDagang: Yup.string().required('Harus di-isi'),
+ isPengajuanTempo: Yup.string().required('Harus di-pilih'),
+ tempoDuration: Yup.string().required('Harus di-pilih'),
+ kreditLimit: Yup.string().required('Harus di-isi'),
+ waktuPengiriman: Yup.string().required('Harus di-isi'),
+ terhitungSejak: Yup.string().required('Harus di-pilih'),
+});
+const defaultValues = {
+ categoryProduk: '',
+ merkDagang: '',
+ isPengajuanTempo: '',
+ tempoDuration: '',
+ kreditLimit: '',
+ waktuPengiriman: '',
+ terhitungSejak: '',
+};
+
+export default InformasiVendor;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-24 14:03:05 +0000