<hafid> off site merchant

10 files changed, 4592 insertions, 4592 deletions

diff --git a/src/lib/merchant/api/createMerchantApi.js b/src/lib/merchant/api/createMerchantApi.js
index 4c4f96ba..878ab7c0 100644
--- a/src/lib/merchant/api/createMerchantApi.js
+++ b/src/lib/merchant/api/createMerchantApi.js
@@ -1,14 +1,14 @@
-import odooApi from '@/core/api/odooApi';
-import { getAuth } from '@/core/utils/auth';
+// import odooApi from '@/core/api/odooApi';
+// import { getAuth } from '@/core/utils/auth';
 
-const createMerchantApi = async ({ data }) => {
-  const auth = getAuth();
-  const lead = await odooApi(
-    'POST',
-    `/api/v1/merchant/${auth.partnerId}`,
-    data
-  );
-  return lead;
-};
+// const createMerchantApi = async ({ data }) => {
+//   const auth = getAuth();
+//   const lead = await odooApi(
+//     'POST',
+//     `/api/v1/merchant/${auth.partnerId}`,
+//     data
+//   );
+//   return lead;
+// };
 
-export default createMerchantApi;
+// export default createMerchantApi;
diff --git a/src/lib/merchant/api/getMerchantApi.js b/src/lib/merchant/api/getMerchantApi.js
index a1a4f877..be27e947 100644
--- a/src/lib/merchant/api/getMerchantApi.js
+++ b/src/lib/merchant/api/getMerchantApi.js
@@ -1,13 +1,13 @@
-import odooApi from '@/core/api/odooApi';
-import { getAuth } from '@/core/utils/auth';
+// import odooApi from '@/core/api/odooApi';
+// import { getAuth } from '@/core/utils/auth';
 
-const createMerchantApi = async () => {
-  const auth = getAuth();
-  const lead = await odooApi(
-    'GET',
-    `/api/v1/detail-merchant/${auth.partnerId}`
-  );
-  return lead;
-};
+// const createMerchantApi = async () => {
+//   const auth = getAuth();
+//   const lead = await odooApi(
+//     'GET',
+//     `/api/v1/detail-merchant/${auth.partnerId}`
+//   );
+//   return lead;
+// };
 
-export default createMerchantApi;
+// export default createMerchantApi;
diff --git a/src/lib/merchant/api/getMerchantProgresApi.js b/src/lib/merchant/api/getMerchantProgresApi.js
index d356ad78..3bec15fe 100644
--- a/src/lib/merchant/api/getMerchantProgresApi.js
+++ b/src/lib/merchant/api/getMerchantProgresApi.js
@@ -1,10 +1,10 @@
-import odooApi from '@/core/api/odooApi';
-import { getAuth } from '@/core/utils/auth';
+// import odooApi from '@/core/api/odooApi';
+// import { getAuth } from '@/core/utils/auth';
 
-const createMerchantApi = async () => {
-  const auth = getAuth();
-  const lead = await odooApi('GET', `/api/v1/check-merchant/${auth.partnerId}`);
-  return lead;
-};
+// const createMerchantApi = async () => {
+//   const auth = getAuth();
+//   const lead = await odooApi('GET', `/api/v1/check-merchant/${auth.partnerId}`);
+//   return lead;
+// };
 
-export default createMerchantApi;
+// export default createMerchantApi;
diff --git a/src/lib/merchant/components/AccountSwitch.jsx b/src/lib/merchant/components/AccountSwitch.jsx
index b9bf34b1..abbdcc92 100644
--- a/src/lib/merchant/components/AccountSwitch.jsx
+++ b/src/lib/merchant/components/AccountSwitch.jsx
@@ -1,60 +1,60 @@
-import Link from 'next/link';
-import Image from '~/components/ui/image';
-import whatsappUrl from '@/core/utils/whatsappUrl';
-import { useEffect, useState } from 'react';
-import odooApi from '@/core/api/odooApi';
-import useDevice from '@/core/hooks/useDevice';
-import useAuth from '@/core/hooks/useAuth';
-import axios from 'axios';
-import { toast } from 'react-hot-toast';
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+// import Link from 'next/link';
+// import Image from '~/components/ui/image';
+// import whatsappUrl from '@/core/utils/whatsappUrl';
+// import { useEffect, useState } from 'react';
+// import odooApi from '@/core/api/odooApi';
+// import useDevice from '@/core/hooks/useDevice';
+// import useAuth from '@/core/hooks/useAuth';
+// import axios from 'axios';
+// import { toast } from 'react-hot-toast';
+// import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
 
-const FinishTempo = ({ query }) => {
-  const [data, setData] = useState();
-  const [transactionData, setTransactionData] = useState();
-  const { isDesktop, isMobile } = useDevice();
-  const auth = useAuth();
+// const FinishTempo = ({ query }) => {
+//   const [data, setData] = useState();
+//   const [transactionData, setTransactionData] = useState();
+//   const { isDesktop, isMobile } = useDevice();
+//   const auth = useAuth();
 
-  return (
-    <div className='container flex flex-col items-center gap-4'>
-      <div
-        className={`flex ${
-          isMobile ? 'w-full' : 'w-2/3'
-        } justify-center items-center`}
-      >
-        <h1
-          className={`text-red-500 text-center py-4 font-semibold ${
-            isMobile ? 'text-lg' : 'text-3xl'
-          }`}
-        >
-          Form Merchant Kamu Gagal Dilakukan
-        </h1>
-      </div>
-      <Image
-        src='/images/ICON_TEMPO.png'
-        alt='Registrasi Tempo'
-        width={isMobile ? 300 : 550}
-        height={isMobile ? 300 : 550}
-      />
+//   return (
+//     <div className='container flex flex-col items-center gap-4'>
+//       <div
+//         className={`flex ${
+//           isMobile ? 'w-full' : 'w-2/3'
+//         } justify-center items-center`}
+//       >
+//         <h1
+//           className={`text-red-500 text-center py-4 font-semibold ${
+//             isMobile ? 'text-lg' : 'text-3xl'
+//           }`}
+//         >
+//           Form Merchant Kamu Gagal Dilakukan
+//         </h1>
+//       </div>
+//       <Image
+//         src='/images/ICON_TEMPO.png'
+//         alt='Registrasi Tempo'
+//         width={isMobile ? 300 : 550}
+//         height={isMobile ? 300 : 550}
+//       />
 
-      <div
-        className={`mt-2 text-center opacity-75 leading-6  p-4 md:p-0 ${
-          isMobile ? 'w-full text-sm' : 'w-4/5 text-base'
-        }`}
-      >
-        Terima kasih atas minat anda untuk mendaftar merchant, namun sayangnya
-        akun anda bukan merupakan akun bisnis. Segera ubah akun anda menjadi
-        Bisnis untuk menggunakan fitur ini
-      </div>
-      <Link
-        href={'/my/profile'}
-        className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center'
-      >
-        Ubah Akun
-        <ChevronRightIcon className='w-5' />
-      </Link>
-    </div>
-  );
-};
+//       <div
+//         className={`mt-2 text-center opacity-75 leading-6  p-4 md:p-0 ${
+//           isMobile ? 'w-full text-sm' : 'w-4/5 text-base'
+//         }`}
+//       >
+//         Terima kasih atas minat anda untuk mendaftar merchant, namun sayangnya
+//         akun anda bukan merupakan akun bisnis. Segera ubah akun anda menjadi
+//         Bisnis untuk menggunakan fitur ini
+//       </div>
+//       <Link
+//         href={'/my/profile'}
+//         className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center'
+//       >
+//         Ubah Akun
+//         <ChevronRightIcon className='w-5' />
+//       </Link>
+//     </div>
+//   );
+// };
 
-export default FinishTempo;
+// export default FinishTempo;
diff --git a/src/lib/merchant/components/Dokumen.jsx b/src/lib/merchant/components/Dokumen.jsx
index c13353e5..42a9426b 100644
--- a/src/lib/merchant/components/Dokumen.jsx
+++ b/src/lib/merchant/components/Dokumen.jsx
@@ -1,1252 +1,1252 @@
-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, 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 Dokumen = forwardRef(
-  ({ handleIsError, isKonfirmasi, buttonSubmitClick }, 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,
-    });
+// 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, 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 Dokumen = forwardRef(
+//   ({ handleIsError, isKonfirmasi, buttonSubmitClick }, 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 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 [fileNames, setFileNames] = useState({});
-    const [DeatailFile, setDetailFile] = useState({});
-    const [isExample, setIsExample] = useState(false);
-    const [isPkp, setIsPkp] = useState(false);
+//     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 [fileNames, setFileNames] = useState({});
+//     const [DeatailFile, setDetailFile] = useState({});
+//     const [isExample, setIsExample] = useState(false);
+//     const [isPkp, setIsPkp] = useState(false);
 
-    const npwpRef = useRef(null);
-    const sppkpRef = useRef(null);
-    const ktpDirutRef = useRef(null);
-    const kartuNamaRef = useRef(null);
-    const suratPernyataanRef = useRef(null);
-    const fotoKantorRef = useRef(null);
-    const dataProdukRef = useRef(null);
-    const pricelistRef = useRef(null);
-    const router = useRouter();
+//     const npwpRef = useRef(null);
+//     const sppkpRef = useRef(null);
+//     const ktpDirutRef = useRef(null);
+//     const kartuNamaRef = useRef(null);
+//     const suratPernyataanRef = useRef(null);
+//     const fotoKantorRef = useRef(null);
+//     const dataProdukRef = useRef(null);
+//     const pricelistRef = useRef(null);
+//     const router = useRouter();
 
-    const auth = useAuth();
-    if (auth == false) {
-      router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
-    }
-    useEffect(() => {
-      const loadData = async () => {
-        try {
-          const data = await getMerchantApi();
-          if (data) {
-            setFileNames((prev) => ({
-              ...prev,
-              ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
-              ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
-              ['dokumenKtpDirut']: data.fileDokumenKtpDirut
-                ? data.fileDokumenKtpDirut.name
-                : '',
-              ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
-              ['suratPernyataan']: data.fileSuratPernyataan
-                ? data.fileSuratPernyataan.name
-                : '',
-              ['fotoKantor']: data.fileFotoKantor
-                ? data.fileFotoKantor.name
-                : '',
-              ['dataProduk']: data.fileDataProduk
-                ? data.fileDataProduk.name
-                : '',
-              ['pricelist']: data.filePricelist ? data.filePricelist.name : '',
-            }));
-          }
-        } catch (error) {
-          console.error('Error loading profile:', error);
-          handleIsError(true); // Jika ada error, panggil fungsi error handler
-        }
-      };
+//     const auth = useAuth();
+//     if (auth == false) {
+//       router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//     }
+//     useEffect(() => {
+//       const loadData = async () => {
+//         try {
+//           const data = await getMerchantApi();
+//           if (data) {
+//             setFileNames((prev) => ({
+//               ...prev,
+//               ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
+//               ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
+//               ['dokumenKtpDirut']: data.fileDokumenKtpDirut
+//                 ? data.fileDokumenKtpDirut.name
+//                 : '',
+//               ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
+//               ['suratPernyataan']: data.fileSuratPernyataan
+//                 ? data.fileSuratPernyataan.name
+//                 : '',
+//               ['fotoKantor']: data.fileFotoKantor
+//                 ? data.fileFotoKantor.name
+//                 : '',
+//               ['dataProduk']: data.fileDataProduk
+//                 ? data.fileDataProduk.name
+//                 : '',
+//               ['pricelist']: data.filePricelist ? data.filePricelist.name : '',
+//             }));
+//           }
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//           handleIsError(true); // Jika ada error, panggil fungsi error handler
+//         }
+//       };
 
-      loadData();
-    }, [reset, handleIsError]);
+//       loadData();
+//     }, [reset, handleIsError]);
 
-    useEffect(() => {
-      if (!isKonfirmasi) {
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth',
-        });
-      }
-    }, []);
-    useImperativeHandle(ref, () => () => {
-      handleSubmit(onSubmitHandler)();
-    });
-    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);
-        }
-      };
+//     useEffect(() => {
+//       if (!isKonfirmasi) {
+//         window.scrollTo({
+//           top: 0,
+//           behavior: 'smooth',
+//         });
+//       }
+//     }, []);
+//     useImperativeHandle(ref, () => () => {
+//       handleSubmit(onSubmitHandler)();
+//     });
+//     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]);
+//       loadProfile();
+//     }, [auth?.parentId]);
 
-    const onSubmitHandler = async (values) => {
-      const options = {
-        behavior: 'smooth',
-        block: 'center',
-      };
-      const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
-      const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
-      const dokumenKtpDirut = {
-        name: fileNames.dokumenKtpDirut,
-        format: DeatailFile.dokumenKtpDirut,
-      };
-      const kartuNama = {
-        name: fileNames.kartuNama,
-        format: DeatailFile.kartuNama,
-      };
-      const suratPernyataan = {
-        name: fileNames.suratPernyataan,
-        format: DeatailFile.suratPernyataan,
-      };
-      const fotoKantor = {
-        name: fileNames.fotoKantor,
-        format: DeatailFile.fotoKantor,
-      };
-      const dataProduk = {
-        name: fileNames.dataProduk,
-        format: DeatailFile.dataProduk,
-      };
-      const pricelist = {
-        name: fileNames.pricelist,
-        format: DeatailFile.pricelist,
-      };
+//     const onSubmitHandler = async (values) => {
+//       const options = {
+//         behavior: 'smooth',
+//         block: 'center',
+//       };
+//       const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
+//       const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
+//       const dokumenKtpDirut = {
+//         name: fileNames.dokumenKtpDirut,
+//         format: DeatailFile.dokumenKtpDirut,
+//       };
+//       const kartuNama = {
+//         name: fileNames.kartuNama,
+//         format: DeatailFile.kartuNama,
+//       };
+//       const suratPernyataan = {
+//         name: fileNames.suratPernyataan,
+//         format: DeatailFile.suratPernyataan,
+//       };
+//       const fotoKantor = {
+//         name: fileNames.fotoKantor,
+//         format: DeatailFile.fotoKantor,
+//       };
+//       const dataProduk = {
+//         name: fileNames.dataProduk,
+//         format: DeatailFile.dataProduk,
+//       };
+//       const pricelist = {
+//         name: fileNames.pricelist,
+//         format: DeatailFile.pricelist,
+//       };
 
-      if (!npwp.name && isPkp) {
-        if (npwpRef?.current) {
-          npwpRef.current.scrollIntoView(options);
-        }
-        toast.error('NPWP wajib di tambahkan');
-        return;
-      }
-      if (!sppkp.name && isPkp) {
-        toast.error('SPPKP wajib di tambahkan');
-        if (sppkpRef?.current) {
-          sppkpRef.current.scrollIntoView(options);
-        }
-        return;
-      }
-      if (!dokumenKtpDirut.name && !isPkp) {
-        toast.error('KTP Dirut/Direktur wajib di tambahkan');
-        if (ktpDirutRef?.current) {
-          ktpDirutRef.current.scrollIntoView(options);
-        }
-        return;
-      }
-      if (!fotoKantor.name) {
-        toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
-        if (fotoKantorRef?.current) {
-          fotoKantorRef.current.scrollIntoView(options);
-        }
-        return;
-      }
-      if (!pricelist.name) {
-        toast.error('Pricelist wajib di tambahkan');
-        if (pricelistRef?.current) {
-          pricelistRef.current.scrollIntoView(options);
-        }
-        return;
-      }
-      const toastId = toast.loading('Mengirimkan formulir merchant...');
-      const dokumen = {
-        file_npwp: { details: npwp.format ? npwp : '' },
-        file_sppkp: { details: sppkp.format ? sppkp : '' },
-        file_dokumenKtpDirut: {
-          details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
-        },
-        file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
-        file_suratPernyataan: {
-          details: suratPernyataan.format ? suratPernyataan : '',
-        },
-        file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
-        file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
-        file_pricelist: { details: pricelist.format ? pricelist : '' },
-      };
-      let data = {
-        file_dokumen: JSON.stringify(dokumen),
-      };
-      const create_leads = await createMerchantApi({ data });
-      if (create_leads) {
-        toast.dismiss(toastId);
-        toast.success('Berhasil menambahkan data');
-        isError(false);
-        reset();
-      } else {
-        toast.dismiss(toastId);
-        toast.error('Gagal menambahkan data');
-      }
-    };
+//       if (!npwp.name && isPkp) {
+//         if (npwpRef?.current) {
+//           npwpRef.current.scrollIntoView(options);
+//         }
+//         toast.error('NPWP wajib di tambahkan');
+//         return;
+//       }
+//       if (!sppkp.name && isPkp) {
+//         toast.error('SPPKP wajib di tambahkan');
+//         if (sppkpRef?.current) {
+//           sppkpRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       if (!dokumenKtpDirut.name && !isPkp) {
+//         toast.error('KTP Dirut/Direktur wajib di tambahkan');
+//         if (ktpDirutRef?.current) {
+//           ktpDirutRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       if (!fotoKantor.name) {
+//         toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
+//         if (fotoKantorRef?.current) {
+//           fotoKantorRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       if (!pricelist.name) {
+//         toast.error('Pricelist wajib di tambahkan');
+//         if (pricelistRef?.current) {
+//           pricelistRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       const toastId = toast.loading('Mengirimkan formulir merchant...');
+//       const dokumen = {
+//         file_npwp: { details: npwp.format ? npwp : '' },
+//         file_sppkp: { details: sppkp.format ? sppkp : '' },
+//         file_dokumenKtpDirut: {
+//           details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
+//         },
+//         file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
+//         file_suratPernyataan: {
+//           details: suratPernyataan.format ? suratPernyataan : '',
+//         },
+//         file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
+//         file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
+//         file_pricelist: { details: pricelist.format ? pricelist : '' },
+//       };
+//       let data = {
+//         file_dokumen: JSON.stringify(dokumen),
+//       };
+//       const create_leads = await createMerchantApi({ data });
+//       if (create_leads) {
+//         toast.dismiss(toastId);
+//         toast.success('Berhasil menambahkan data');
+//         isError(false);
+//         reset();
+//       } else {
+//         toast.dismiss(toastId);
+//         toast.error('Gagal menambahkan data');
+//       }
+//     };
 
-    if (!auth) {
-      return;
-    }
+//     if (!auth) {
+//       return;
+//     }
 
-    const handleFileChange = async (event) => {
-      let fileBase64 = '';
-      const file = event.target.files[0];
+//     const handleFileChange = async (event) => {
+//       let fileBase64 = '';
+//       const file = event.target.files[0];
 
-      if (file.size > 2000000) {
-        // 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 });
-        // }
-        toast.error('Maks file size 2MB', { 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 (
-      <>
-        <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'>
-              Dokumen
-            </h2>
+//       if (file.size > 2000000) {
+//         // 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 });
+//         // }
+//         toast.error('Maks file size 2MB', { 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 (
+//       <>
+//         <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'>
+//               Dokumen
+//             </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'>
-                      NPWP{' '}
-                      {!isPkp && (
-                        <span className=' opacity-60'>(Opsional)</span>
-                      )}
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Pastikan dokumen yang anda upload sudah benar
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                    ref={npwpRef}
-                  >
-                    <div
-                      className={`flex flex-row items-start gap-2 w-full ${
-                        isKonfirmasi ? 'justify-end' : 'justify-start'
-                      }`}
-                    >
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.npwp}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='npwp'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('npwp')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='npwp'
-                        onChange={(e) => {
-                          handleFileChange(e); // Untuk update UI (opsional)
-                        }}
-                        aria-invalid={errors.npwp?.message}
-                      />
-                      {!isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.npwp}
-                        </span>
-                      )}
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
+//             <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'>
+//                       NPWP{' '}
+//                       {!isPkp && (
+//                         <span className=' opacity-60'>(Opsional)</span>
+//                       )}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                     ref={npwpRef}
+//                   >
+//                     <div
+//                       className={`flex flex-row items-start gap-2 w-full ${
+//                         isKonfirmasi ? 'justify-end' : 'justify-start'
+//                       }`}
+//                     >
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.npwp}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='npwp'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('npwp')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='npwp'
+//                         onChange={(e) => {
+//                           handleFileChange(e); // Untuk update UI (opsional)
+//                         }}
+//                         aria-invalid={errors.npwp?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.npwp}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
 
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.npwp?.message}
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className={`w-full flex flex-row items-start ${
-                    isKonfirmasi && 'gap-2'
-                  } `}
-                >
-                  <div className='w-2/5 flex flex-row justify-between items-center '>
-                    <div>
-                      <label className='form-label  text-nowrap' ref={sppkpRef}>
-                        SPPKP{' '}
-                        {!isPkp && (
-                          <span className=' opacity-60'>(Opsional)</span>
-                        )}
-                      </label>
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Pastikan dokumen yang anda upload sudah benar
-                        </span>
-                      )}
-                    </div>
-                    <div
-                      onClick={() => setIsExample(!isExample)}
-                      className={`h-fit ${
-                        !isKonfirmasi && 'mr-8'
-                      }  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
-                    >
-                      <EyeIcon
-                        className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
-                      />
-                      {!isKonfirmasi && (
-                        <p className='font-light text-xs '>Lihat Contoh</p>
-                      )}
-                    </div>
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                  >
-                    <div className='flex flex-row items-start justify-start gap-2'>
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2 '>
-                          {fileNames.sppkp}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='sppkp'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('sppkp')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='sppkp'
-                        onChange={handleFileChange}
-                        aria-invalid={errors.sppkp?.message}
-                      />
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.npwp?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div
+//                   className={`w-full flex flex-row items-start ${
+//                     isKonfirmasi && 'gap-2'
+//                   } `}
+//                 >
+//                   <div className='w-2/5 flex flex-row justify-between items-center '>
+//                     <div>
+//                       <label className='form-label  text-nowrap' ref={sppkpRef}>
+//                         SPPKP{' '}
+//                         {!isPkp && (
+//                           <span className=' opacity-60'>(Opsional)</span>
+//                         )}
+//                       </label>
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Pastikan dokumen yang anda upload sudah benar
+//                         </span>
+//                       )}
+//                     </div>
+//                     <div
+//                       onClick={() => setIsExample(!isExample)}
+//                       className={`h-fit ${
+//                         !isKonfirmasi && 'mr-8'
+//                       }  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
+//                     >
+//                       <EyeIcon
+//                         className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <p className='font-light text-xs '>Lihat Contoh</p>
+//                       )}
+//                     </div>
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2 '>
+//                           {fileNames.sppkp}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='sppkp'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('sppkp')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='sppkp'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.sppkp?.message}
+//                       />
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
 
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.sppkp?.message}
-                    </div>
-                  </div>
-                </div>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.sppkp?.message}
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      KTP Dirut/Direktur{' '}
-                      {isPkp && <span className=' opacity-60'>(Opsional)</span>}
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Pastikan dokumen yang anda upload sudah benar
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                    ref={ktpDirutRef}
-                  >
-                    <div
-                      className={`flex flex-row items-start ${
-                        isKonfirmasi ? 'justify-end' : 'justify-start'
-                      } gap-2 w-full`}
-                    >
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.dokumenKtpDirut}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='dokumenKtpDirut'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.dokumenKtpDirut
-                          ? 'Ubah Dokumen'
-                          : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('dokumenKtpDirut')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='dokumenKtpDirut'
-                        onChange={handleFileChange}
-                        aria-invalid={errors.dokumenKtpDirut?.message}
-                      />
-                      {!isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.dokumenKtpDirut}
-                        </span>
-                      )}
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       KTP Dirut/Direktur{' '}
+//                       {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                     ref={ktpDirutRef}
+//                   >
+//                     <div
+//                       className={`flex flex-row items-start ${
+//                         isKonfirmasi ? 'justify-end' : 'justify-start'
+//                       } gap-2 w-full`}
+//                     >
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dokumenKtpDirut}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='dokumenKtpDirut'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.dokumenKtpDirut
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('dokumenKtpDirut')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='dokumenKtpDirut'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.dokumenKtpDirut?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dokumenKtpDirut}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
 
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.dokumenKtpDirut?.message}
-                    </div>
-                  </div>
-                </div>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.dokumenKtpDirut?.message}
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label
-                      className='form-label  text-nowrap'
-                      ref={kartuNamaRef}
-                    >
-                      Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Pastikan dokumen yang anda upload sudah benar
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                  >
-                    <div className='flex flex-row items-start justify-start gap-2'>
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.kartuNama}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='kartuNama'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.kartuNama
-                          ? 'Ubah Dokumen'
-                          : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('kartuNama')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='kartuNama'
-                        onChange={handleFileChange}
-                        aria-invalid={errors.kartuNama?.message}
-                      />
-                      {!isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.kartuNama}
-                        </span>
-                      )}
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label
+//                       className='form-label  text-nowrap'
+//                       ref={kartuNamaRef}
+//                     >
+//                       Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.kartuNama}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='kartuNama'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.kartuNama
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('kartuNama')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='kartuNama'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.kartuNama?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.kartuNama}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
 
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.kartuNama?.message}
-                    </div>
-                  </div>
-                </div>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.kartuNama?.message}
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-row items-start '>
-                  <div className='w-2/5 flex flex-row justify-between items-center '>
-                    <div>
-                      <label
-                        className={`form-label  ${
-                          isKonfirmasi ? 'text-wrap' : ' text-nowrap'
-                        }`}
-                        ref={suratPernyataanRef}
-                      >
-                        Surat Pernyataan Nomor Rekening{' '}
-                        <span className=' opacity-60'>(Opsional)</span>
-                      </label>
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Wajib diisi jika nomor rekening berbeda dengan nama
-                          perusahaan
-                        </span>
-                      )}
-                    </div>
-                    <a
-                      href='/file/Surat Pernyataan Nomor Rekening.docx'
-                      download='Surat Pernyataan Nomor Rekening.docx'
-                      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'
-                    >
-                      <p className='font-light text-xs'>Download Template</p>
-                    </a>
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                  >
-                    <div className='flex flex-row items-start justify-start gap-2'>
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.suratPernyataan}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='suratPernyataan'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.suratPernyataan
-                          ? 'Ubah Dokumen'
-                          : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('suratPernyataan')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='suratPernyataan'
-                        onChange={handleFileChange}
-                        aria-invalid={errors.suratPernyataan?.message}
-                      />
-                      {!isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.suratPernyataan}
-                        </span>
-                      )}
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-row justify-between items-center '>
+//                     <div>
+//                       <label
+//                         className={`form-label  ${
+//                           isKonfirmasi ? 'text-wrap' : ' text-nowrap'
+//                         }`}
+//                         ref={suratPernyataanRef}
+//                       >
+//                         Surat Pernyataan Nomor Rekening{' '}
+//                         <span className=' opacity-60'>(Opsional)</span>
+//                       </label>
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Wajib diisi jika nomor rekening berbeda dengan nama
+//                           perusahaan
+//                         </span>
+//                       )}
+//                     </div>
+//                     <a
+//                       href='/file/Surat Pernyataan Nomor Rekening.docx'
+//                       download='Surat Pernyataan Nomor Rekening.docx'
+//                       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'
+//                     >
+//                       <p className='font-light text-xs'>Download Template</p>
+//                     </a>
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.suratPernyataan}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='suratPernyataan'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.suratPernyataan
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('suratPernyataan')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='suratPernyataan'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.suratPernyataan?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.suratPernyataan}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
 
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.suratPernyataan?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row items-start '>
-                  <div className='w-2/5 flex flex-col justify-start items-start '>
-                    <label
-                      className={`form-label   ${
-                        isKonfirmasi ? 'text-wrap' : 'text-nowrap'
-                      }`}
-                      ref={fotoKantorRef}
-                    >
-                      Foto Gudang / Kantor Bagian Depan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Pastikan dokumen yang anda upload sudah benar
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                  >
-                    <div className='flex flex-row items-start justify-start gap-2'>
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.fotoKantor}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='fotoKantor'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.fotoKantor
-                          ? 'Ubah Dokumen'
-                          : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('fotoKantor')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='fotoKantor'
-                        onChange={handleFileChange}
-                        aria-invalid={errors.fotoKantor?.message}
-                      />
-                      {!isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.fotoKantor}
-                        </span>
-                      )}
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.fotoKantor?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row items-start '>
-                  <div className='w-2/5 flex flex-col justify-start items-start '>
-                    <label
-                      className={`form-label   ${
-                        isKonfirmasi ? 'text-wrap' : 'text-nowrap'
-                      }`}
-                      ref={dataProdukRef}
-                    >
-                      Data Produk (Item Name, Gambar, Deskripsi){' '}
-                      <span className=' opacity-60'>(Opsional)</span>{' '}
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Pastikan dokumen yang anda upload sudah benar
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                  >
-                    <div className='flex flex-row items-start justify-start gap-2'>
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.dataProduk}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='dataProduk'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.dataProduk
-                          ? 'Ubah Dokumen'
-                          : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('dataProduk')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='dataProduk'
-                        onChange={handleFileChange}
-                        aria-invalid={errors.dataProduk?.message}
-                      />
-                      {!isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.dataProduk}
-                        </span>
-                      )}
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.suratPernyataan?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-col justify-start items-start '>
+//                     <label
+//                       className={`form-label   ${
+//                         isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+//                       }`}
+//                       ref={fotoKantorRef}
+//                     >
+//                       Foto Gudang / Kantor Bagian Depan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.fotoKantor}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='fotoKantor'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.fotoKantor
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('fotoKantor')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='fotoKantor'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.fotoKantor?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.fotoKantor}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.fotoKantor?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-col justify-start items-start '>
+//                     <label
+//                       className={`form-label   ${
+//                         isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+//                       }`}
+//                       ref={dataProdukRef}
+//                     >
+//                       Data Produk (Item Name, Gambar, Deskripsi){' '}
+//                       <span className=' opacity-60'>(Opsional)</span>{' '}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dataProduk}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='dataProduk'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.dataProduk
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('dataProduk')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='dataProduk'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.dataProduk?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dataProduk}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
 
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.dataProduk?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row items-start '>
-                  <div className='w-2/5 flex flex-col justify-start items-start '>
-                    <label
-                      className='form-label  text-nowrap'
-                      ref={pricelistRef}
-                    >
-                      Pricelist
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Pastikan dokumen yang anda upload sudah benar
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    className={`w-3/5 flex flex-col justify-between ${
-                      isKonfirmasi ? 'items-end' : 'items-start'
-                    }`}
-                  >
-                    <div className='flex flex-row items-start justify-start gap-2'>
-                      {isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.pricelist}
-                        </span>
-                      )}
-                      <label
-                        htmlFor='pricelist'
-                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                      >
-                        {fileNames.pricelist
-                          ? 'Ubah Dokumen'
-                          : 'Upload Dokumen'}
-                      </label>
-                      <input
-                        {...register('pricelist')}
-                        type='file'
-                        className='form-input hidden'
-                        accept='.pdf,.png,.jpg,.jpeg'
-                        id='pricelist'
-                        onChange={handleFileChange}
-                        aria-invalid={errors.pricelist?.message}
-                      />
-                      {!isKonfirmasi && (
-                        <span className='mt-2 text-gray-600 line-clamp-2'>
-                          {fileNames.pricelist}
-                        </span>
-                      )}
-                    </div>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60 text-red-500'>
-                        Format: pdf, jpeg, jpg, png. max file size 2MB
-                      </span>
-                    )}
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.pricelist?.message}
-                    </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'>Dokumen</h2>
-            )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.dataProduk?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-col justify-start items-start '>
+//                     <label
+//                       className='form-label  text-nowrap'
+//                       ref={pricelistRef}
+//                     >
+//                       Pricelist
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.pricelist}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='pricelist'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.pricelist
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('pricelist')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='pricelist'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.pricelist?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.pricelist}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pricelist?.message}
+//                     </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'>Dokumen</h2>
+//             )}
 
-            <div className='w-full mt-4'>
-              <form
-                onSubmit={handleSubmit(onSubmitHandler)}
-                className='flex flex-col gap-4'
-              >
-                <div className='w-full flex flex-col gap-2'>
-                  <label className='form-label  text-nowrap'>
-                    NPWP{' '}
-                    {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
-                  </label>
-                  <div className='flex flex-row items-center justify-start gap-2'>
-                    <label
-                      htmlFor='npwp'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('npwp')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='npwp'
-                      onChange={(e) => {
-                        handleFileChange(e); // Untuk update UI (opsional)
-                      }}
-                      aria-invalid={errors.npwp?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.npwp}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//             <div className='w-full mt-4'>
+//               <form
+//                 onSubmit={handleSubmit(onSubmitHandler)}
+//                 className='flex flex-col gap-4'
+//               >
+//                 <div className='w-full flex flex-col gap-2'>
+//                   <label className='form-label  text-nowrap'>
+//                     NPWP{' '}
+//                     {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='npwp'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('npwp')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='npwp'
+//                       onChange={(e) => {
+//                         handleFileChange(e); // Untuk update UI (opsional)
+//                       }}
+//                       aria-invalid={errors.npwp?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.npwp}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.npwp?.message}
-                  </div>
-                </div>
-                <div className='w-full flex flex-col gap-2 items-start '>
-                  <div className='flex flex-row w-full justify-between items-center '>
-                    <label className='form-label  text-nowrap'>
-                      SPPKP{' '}
-                      {!isPkp && (
-                        <span className=' opacity-60'>(Opsional)</span>
-                      )}
-                    </label>
-                    <div
-                      onClick={() => 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'
-                    >
-                      <EyeIcon className={`w-4 mr-2 `} />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.npwp?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <div className='flex flex-row w-full justify-between items-center '>
+//                     <label className='form-label  text-nowrap'>
+//                       SPPKP{' '}
+//                       {!isPkp && (
+//                         <span className=' opacity-60'>(Opsional)</span>
+//                       )}
+//                     </label>
+//                     <div
+//                       onClick={() => 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'
+//                     >
+//                       <EyeIcon className={`w-4 mr-2 `} />
 
-                      <p className='font-light text-xs '>Lihat Contoh</p>
-                    </div>
-                  </div>
-                  <div className='flex flex-row items-center justify-start gap-2'>
-                    <label
-                      htmlFor='sppkp'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('sppkp')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='sppkp'
-                      onChange={handleFileChange}
-                      aria-invalid={errors.sppkp?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.sppkp}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//                       <p className='font-light text-xs '>Lihat Contoh</p>
+//                     </div>
+//                   </div>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='sppkp'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('sppkp')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='sppkp'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.sppkp?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.sppkp}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.sppkp?.message}
-                  </div>
-                </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.sppkp?.message}
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-col gap-2'>
-                  <label className='form-label  text-nowrap'>
-                    KTP Dirut/Direktur{' '}
-                    {isPkp && <span className=' opacity-60'>(Opsional)</span>}
-                  </label>
-                  <div className='flex flex-row items-center justify-start gap-2 '>
-                    <label
-                      htmlFor='dokumenKtpDirut'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.dokumenKtpDirut
-                        ? 'Ubah Dokumen'
-                        : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('dokumenKtpDirut')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='dokumenKtpDirut'
-                      onChange={handleFileChange}
-                      aria-invalid={errors.dokumenKtpDirut?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.dokumenKtpDirut}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//                 <div className='w-full flex flex-col gap-2'>
+//                   <label className='form-label  text-nowrap'>
+//                     KTP Dirut/Direktur{' '}
+//                     {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2 '>
+//                     <label
+//                       htmlFor='dokumenKtpDirut'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.dokumenKtpDirut
+//                         ? 'Ubah Dokumen'
+//                         : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('dokumenKtpDirut')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='dokumenKtpDirut'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.dokumenKtpDirut?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.dokumenKtpDirut}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.dokumenKtpDirut?.message}
-                  </div>
-                </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.dokumenKtpDirut?.message}
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-col gap-2'>
-                  <label className='form-label  text-nowrap'>
-                    Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
-                  </label>
-                  <div className='flex flex-row items-center justify-start gap-2'>
-                    <label
-                      htmlFor='kartuNama'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('kartuNama')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='kartuNama'
-                      onChange={handleFileChange}
-                      aria-invalid={errors.kartuNama?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.kartuNama}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//                 <div className='w-full flex flex-col gap-2'>
+//                   <label className='form-label  text-nowrap'>
+//                     Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='kartuNama'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('kartuNama')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='kartuNama'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.kartuNama?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.kartuNama}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.kartuNama?.message}
-                  </div>
-                </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.kartuNama?.message}
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-col gap-2 items-start '>
-                  <div className='flex flex-row w-full justify-between items-center'>
-                    <label className='form-label  text-wrap'>
-                      Surat Pernyataan Nomor Rekening{' '}
-                      <span className=' opacity-60'>(Opsional)</span>
-                    </label>
-                    <a
-                      href='/file/Surat Pernyataan Nomor Rekening.docx'
-                      download='Surat Pernyataan Nomor Rekening.docx'
-                      className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                    >
-                      <p className='font-light text-xs text-nowrap'>
-                        Download Template
-                      </p>
-                    </a>
-                  </div>
-                  <div className='flex flex-row items-center justify-start gap-2'>
-                    <label
-                      htmlFor='suratPernyataan'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.suratPernyataan
-                        ? 'Ubah Dokumen'
-                        : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('suratPernyataan')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='suratPernyataan'
-                      onChange={handleFileChange}
-                      aria-invalid={errors.suratPernyataan?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.suratPernyataan}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <div className='flex flex-row w-full justify-between items-center'>
+//                     <label className='form-label  text-wrap'>
+//                       Surat Pernyataan Nomor Rekening{' '}
+//                       <span className=' opacity-60'>(Opsional)</span>
+//                     </label>
+//                     <a
+//                       href='/file/Surat Pernyataan Nomor Rekening.docx'
+//                       download='Surat Pernyataan Nomor Rekening.docx'
+//                       className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+//                     >
+//                       <p className='font-light text-xs text-nowrap'>
+//                         Download Template
+//                       </p>
+//                     </a>
+//                   </div>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='suratPernyataan'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.suratPernyataan
+//                         ? 'Ubah Dokumen'
+//                         : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('suratPernyataan')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='suratPernyataan'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.suratPernyataan?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.suratPernyataan}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.suratPernyataan?.message}
-                  </div>
-                </div>
-                <div className='w-full flex flex-col gap-2 items-start '>
-                  <label className='form-label  text-nowrap'>
-                    Foto Gudang / Kantor Bagian Depan
-                  </label>
-                  <div className='flex flex-row items-center justify-start gap-2 '>
-                    <label
-                      htmlFor='fotoKantor'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('fotoKantor')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='fotoKantor'
-                      onChange={handleFileChange}
-                      aria-invalid={errors.fotoKantor?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.fotoKantor}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.suratPernyataan?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <label className='form-label  text-nowrap'>
+//                     Foto Gudang / Kantor Bagian Depan
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2 '>
+//                     <label
+//                       htmlFor='fotoKantor'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('fotoKantor')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='fotoKantor'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.fotoKantor?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.fotoKantor}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.fotoKantor?.message}
-                  </div>
-                </div>
-                <div className='w-full flex flex-col gap-2 items-start '>
-                  <label className='form-label  text-wrap'>
-                    Data Produk (Item Name, Gambar, Deskripsi){' '}
-                    <span className=' opacity-60'>(Opsional)</span>{' '}
-                  </label>
-                  <div className='flex flex-row items-center justify-start gap-2'>
-                    <label
-                      htmlFor='dataProduk'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('dataProduk')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='dataProduk'
-                      onChange={handleFileChange}
-                      aria-invalid={errors.dataProduk?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.dataProduk}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.fotoKantor?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <label className='form-label  text-wrap'>
+//                     Data Produk (Item Name, Gambar, Deskripsi){' '}
+//                     <span className=' opacity-60'>(Opsional)</span>{' '}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='dataProduk'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('dataProduk')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='dataProduk'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.dataProduk?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.dataProduk}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.fotoKantor?.message}
-                  </div>
-                </div>
-                <div className='w-full flex flex-col gap-2 items-start '>
-                  <label className='form-label  text-nowrap'>Pricelist</label>
-                  <div className='flex flex-row items-center justify-start gap-2'>
-                    <label
-                      htmlFor='pricelist'
-                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                    >
-                      {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                    </label>
-                    <input
-                      {...register('pricelist')}
-                      type='file'
-                      className='form-input hidden'
-                      accept='.pdf,.png,.jpg,.jpeg'
-                      id='pricelist'
-                      onChange={handleFileChange}
-                      aria-invalid={errors.pricelist?.message}
-                    />
-                    <span className=' text-gray-600 line-clamp-2'>
-                      {fileNames.pricelist}
-                    </span>
-                  </div>
-                  <span className='text-xs opacity-60 text-red-500'>
-                    Format: pdf, jpeg, jpg, png. max file size 2MB
-                  </span>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.fotoKantor?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <label className='form-label  text-nowrap'>Pricelist</label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='pricelist'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('pricelist')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='pricelist'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.pricelist?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.pricelist}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
 
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.pricelist?.message}
-                  </div>
-                </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({
-  npwp: Yup.mixed().required('File is required'),
-  pricelist: Yup.mixed().required('File is required'),
-});
-const defaultValues = {
-  company: '',
-  pejabatName: '',
-  PICName: '',
-  PICPosition: '',
-  email: '',
-  emailSales: '',
-  emailFinance: '',
-  phone: '',
-  state: '',
-  city: '',
-  district: '',
-  subDistrict: '',
-  zip: '',
-  bank: '',
-  rekening: '',
-  accountNumber: '',
-  address: '',
-  mobile: '',
-};
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.pricelist?.message}
+//                   </div>
+//                 </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({
+//   npwp: Yup.mixed().required('File is required'),
+//   pricelist: Yup.mixed().required('File is required'),
+// });
+// const defaultValues = {
+//   company: '',
+//   pejabatName: '',
+//   PICName: '',
+//   PICPosition: '',
+//   email: '',
+//   emailSales: '',
+//   emailFinance: '',
+//   phone: '',
+//   state: '',
+//   city: '',
+//   district: '',
+//   subDistrict: '',
+//   zip: '',
+//   bank: '',
+//   rekening: '',
+//   accountNumber: '',
+//   address: '',
+//   mobile: '',
+// };
 
-export default Dokumen;
+// export default Dokumen;
diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index ee5560a9..e9486214 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -1,1399 +1,1399 @@
-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, 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, ChevronLeftIcon } 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 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, 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, ChevronLeftIcon } 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 = forwardRef(
-  ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
-    const isError = (value) => {
-      // Logika menentukan error
-      const result = value ? true : false;
-      handleIsError(result); // Panggil handleIsError dari Merchant
-      return result;
-    };
-    // React.useEffect(() => {
-    //   handleIsError(isError());
-    // }, [handleIsError]);
-    const {
-      register,
-      handleSubmit,
-      formState: { errors },
-      control,
-      reset,
-      watch,
-      setValue,
-      getValues,
-    } = useForm({
-      resolver: yupResolver(validationSchema),
-      defaultValues,
-    });
-    const [state, setState] = useState([]);
-    const [cities, setCities] = useState([]);
-    const [districts, setDistricts] = useState([]);
-    const [subDistricts, setSubDistricts] = useState([]);
-    const [zips, setZips] = useState([]);
-    const [isExample, setIsExample] = useState(false);
-    const [isPkp, setIsPkp] = useState(false);
+// const CreateMerchant = forwardRef(
+//   ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
+//     const isError = (value) => {
+//       // Logika menentukan error
+//       const result = value ? true : false;
+//       handleIsError(result); // Panggil handleIsError dari Merchant
+//       return result;
+//     };
+//     // React.useEffect(() => {
+//     //   handleIsError(isError());
+//     // }, [handleIsError]);
+//     const {
+//       register,
+//       handleSubmit,
+//       formState: { errors },
+//       control,
+//       reset,
+//       watch,
+//       setValue,
+//       getValues,
+//     } = useForm({
+//       resolver: yupResolver(validationSchema),
+//       defaultValues,
+//     });
+//     const [state, setState] = useState([]);
+//     const [cities, setCities] = useState([]);
+//     const [districts, setDistricts] = useState([]);
+//     const [subDistricts, setSubDistricts] = useState([]);
+//     const [zips, setZips] = useState([]);
+//     const [isExample, setIsExample] = useState(false);
+//     const [isPkp, setIsPkp] = useState(false);
 
-    useEffect(() => {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }, []);
+//     useEffect(() => {
+//       window.scrollTo({
+//         top: 0,
+//         behavior: 'smooth',
+//       });
+//     }, []);
 
 
-    useImperativeHandle(ref, () => () => {
-      handleSubmit(onSubmitHandler)();
-    });
+//     useImperativeHandle(ref, () => () => {
+//       handleSubmit(onSubmitHandler)();
+//     });
 
-    const recaptchaRef = useRef(null);
-    const router = useRouter();
+//     const recaptchaRef = useRef(null);
+//     const router = useRouter();
 
-    const auth = useAuth();
-    if (auth == false) {
-      router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
-    }
-    const dataBisnisType = [
-      { value: 1, label: 'PT' },
-      { value: 2, label: 'CV' },
-      { value: 3, label: 'Perorangan' },
-    ];
-    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 auth = useAuth();
+//     if (auth == false) {
+//       router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//     }
+//     const dataBisnisType = [
+//       { value: 1, label: 'PT' },
+//       { value: 2, label: 'CV' },
+//       { value: 3, label: 'Perorangan' },
+//     ];
+//     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)' },
+//     ];
 
-    useEffect(() => {
-      const loadData = async () => {
-        try {
-          const data = await getMerchantApi();
-          if (data) {
-            reset({
-              pejabatName: data.pejabatName ? data.pejabatName : '',
-              PICName: data.picMerchant || '',
-              PICPosition: data.picPosition || '',
-              address: data.address ? data.address : '',
-              state: data.state ? data.state : '',
-              city: data.city || '',
-              district: data.district || '',
-              subDistrict: data.subDistrict || '',
-              zip: parseInt(data.zip) || '',
-              email: data.emailCompany || '',
-              emailSales: data.emailSales || '',
-              emailFinance: data.emailFinance || '',
-              bank: data.bankName || '',
-              rekening: data.rekeningName || '',
-              accountNumber: data.accountNumber || '',
-              phone: data.phone || '',
-              mobile: data.mobile || '',
-              bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
-              categoryPerusahaan: data.categoryPerusahaan
-                ? parseInt(data.categoryPerusahaan)
-                : null,
-              website: data.website || '',
-            });
-          }
-        } catch (error) {
-          console.error('Error loading profile:', error);
-          handleIsError(true); // Jika ada error, panggil fungsi error handler
-        }
-      };
+//     useEffect(() => {
+//       const loadData = async () => {
+//         try {
+//           const data = await getMerchantApi();
+//           if (data) {
+//             reset({
+//               pejabatName: data.pejabatName ? data.pejabatName : '',
+//               PICName: data.picMerchant || '',
+//               PICPosition: data.picPosition || '',
+//               address: data.address ? data.address : '',
+//               state: data.state ? data.state : '',
+//               city: data.city || '',
+//               district: data.district || '',
+//               subDistrict: data.subDistrict || '',
+//               zip: parseInt(data.zip) || '',
+//               email: data.emailCompany || '',
+//               emailSales: data.emailSales || '',
+//               emailFinance: data.emailFinance || '',
+//               bank: data.bankName || '',
+//               rekening: data.rekeningName || '',
+//               accountNumber: data.accountNumber || '',
+//               phone: data.phone || '',
+//               mobile: data.mobile || '',
+//               bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
+//               categoryPerusahaan: data.categoryPerusahaan
+//                 ? parseInt(data.categoryPerusahaan)
+//                 : null,
+//               website: data.website || '',
+//             });
+//           }
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//           handleIsError(true); // Jika ada error, panggil fungsi error handler
+//         }
+//       };
 
-      loadData();
-    }, [reset, handleIsError]);
+//       loadData();
+//     }, [reset, handleIsError]);
 
-    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);
-        }
-      };
+//     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]);
+//       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();
-    }, []);
+//     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 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 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 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');
+//     const watchsubDistrict = watch('subDistrict');
 
-    useEffect(() => {
-      let kelurahan = '';
-      let kecamatan = '';
+//     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 (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}`
-          );
+//       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
+//           let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
 
-          const result = await response.json();
+//           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,
-            }));
+//           // 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
-        };
+//           setZips(dataZips); // Set hasil ke state
+//         };
 
-        loadZip();
-      }
-    }, [watchsubDistrict, subDistricts]);
-    const onSubmitHandler = async (values) => {
-      const toastId = toast.loading('Mengirimkan formulir merchant...');
-      const data = {
-        name_merchant: 'Form Merchant - ' + values.company,
-        pejabat_name: values.pejabatName,
-        pic_merchant: values.PICName,
-        pic_position: values.PICPosition,
-        address: values.address,
-        state: parseInt(values.state),
-        city: parseInt(values.city),
-        district: parseInt(values.district),
-        subDistrict: parseInt(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,
-        bisnis_type: values.bisnisType,
-        category_perusahaan: values.categoryPerusahaan,
-        website: values.website,
-        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,
-      };
-      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');
-      }
-    };
+//         loadZip();
+//       }
+//     }, [watchsubDistrict, subDistricts]);
+//     const onSubmitHandler = async (values) => {
+//       const toastId = toast.loading('Mengirimkan formulir merchant...');
+//       const data = {
+//         name_merchant: 'Form Merchant - ' + values.company,
+//         pejabat_name: values.pejabatName,
+//         pic_merchant: values.PICName,
+//         pic_position: values.PICPosition,
+//         address: values.address,
+//         state: parseInt(values.state),
+//         city: parseInt(values.city),
+//         district: parseInt(values.district),
+//         subDistrict: parseInt(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,
+//         bisnis_type: values.bisnisType,
+//         category_perusahaan: values.categoryPerusahaan,
+//         website: values.website,
+//         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,
+//       };
+//       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
-    // };
+//     // 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
+//     if (!auth) {
+//       return;
+//     }
+//     // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
 
     
 
-    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 Perusahaan
-            </h2>
+//     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 Perusahaan
+//             </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'>
-                      Nama Perusahaan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('company')}
-                      placeholder='Masukkan nama perusahaan'
-                      type='text'
-                      className='form-input'
-                    />
-                    <span className='opacity-65 text-xs'>
-                      Format: PT. INDOTEKNIK DOTCOM GEMILANG
-                    </span>
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.company?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Pejabat Berwenang
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan nama pejabat yang berwewenang di perusahaan
-                        anda
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('pejabatName')}
-                      placeholder='Masukkan nama pejabat berwenang'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.pejabatName?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>Nama PIC</label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan nama sales / penanggung jawab
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('PICName')}
-                      placeholder='Masukkan nama PIC'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICName?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Jabatan PIC
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan jabatan sales / penanggung jawab
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('PICPosition')}
-                      placeholder='Masukkan jabatan PIC'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICPosition?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label text-nowrap'>
-                      Alamat Perusahaan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Alamat sesuai dengan alamat perusahaan
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5 flex flex-col'>
-                    <div>
-                      <input
-                        {...register('address')}
-                        placeholder='Masukkan alamat lengkap perusahaan'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.address?.message}
-                      </div>
-                    </div>
-                    <div
-                      className={` sub-alamat flex ${
-                        isKonfirmasi ? 'flex-col' : 'flex-row'
-                      } w-full gap-3`}
-                    >
-                      <div
-                        className={`flex  ${
-                          isKonfirmasi
-                            ? ' flex-row gap-3 w-full'
-                            : 'flex-row gap-3 w-2/5'
-                        }`}
-                      >
-                        <div className='provinsi w-full'>
-                          <Controller
-                            name='state'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={state}
-                                placeholder='Provinsi'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.state?.message}
-                          </div>
-                        </div>
-                        <div className='kab w-full'>
-                          <Controller
-                            name='city'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={cities}
-                                disabled={!watchState}
-                                placeholder='Kab/Kota'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.city?.message}
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className={`flex-row flex gap-2 justify-between  ${
-                          isKonfirmasi ? 'w-full' : 'w-3/5'
-                        }`}
-                      >
-                        <div className='kec w-full'>
-                          <Controller
-                            name='district'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={districts}
-                                disabled={!watchState || !watchCity}
-                                placeholder='Kecamatan'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.district?.message}
-                          </div>
-                        </div>
-                        <div className='kel w-full'>
-                          <Controller
-                            name='subDistrict'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={subDistricts}
-                                disabled={!watchDistrict}
-                                placeholder='Kelurahan'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.subDistrict?.message}
-                          </div>
-                        </div>
-                        <div className='zip  w-full'>
-                          <Controller
-                            name='zip'
-                            control={control}
-                            render={(props) => (
-                              <>
-                                {/* Jika zips tidak kosong, tampilkan dropdown */}
-                                {zips.length < 0 ? (
-                                  // Jika zips kosong, tampilkan input manual
-                                  <input
-                                    {...register('zip')}
-                                    placeholder='Kode Pos'
-                                    type='number'
-                                    className='form-input'
-                                    disabled={!watchsubDistrict}
-                                  />
-                                ) : (
-                                  <HookFormSelect
-                                    {...props}
-                                    options={zips}
-                                    disabled={!watchsubDistrict}
-                                    placeholder='Zip'
-                                  />
-                                )}
-                              </>
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.zip?.message}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>Data Bank</label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi detail data bank perusahaan anda
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5 flex flex-row gap-2'>
-                    <div>
-                      <input
-                        {...register('bank')}
-                        placeholder='Nama bank'
-                        type='text'
-                        className='form-input'
-                      />
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Format: BCA, Mandiri, CIMB, BNI dll
-                        </span>
-                      )}
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.bank?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('rekening')}
-                        placeholder='Nama Rekening'
-                        type='text'
-                        className='form-input'
-                      />
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Format: John Doe
-                        </span>
-                      )}
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.rekening?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('accountNumber')}
-                        placeholder='Nomor Rekening Bank'
-                        type='number'
-                        className='form-input'
-                      />
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Format: 01234567896
-                        </span>
-                      )}
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.accountNumber?.message}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Email Perusahaan
-                    </label>
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('email')}
-                      placeholder='contoh@email.com'
-                      type='email'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.email?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Email Sales
-                    </label>
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('emailSales')}
-                      placeholder='contoh@email.com'
-                      type='email'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.emailSales?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Email Finance
-                    </label>
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('emailFinance')}
-                      placeholder='contoh@email.com'
-                      type='email'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.emailFinance?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      No. Telepon Perusahaan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi no telepon perusahaan yang sesuai
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('phone', {
-                        required: 'Nomor telepon wajib diisi.',
-                        pattern: {
-                          value: /^\+?[0-9]{10,15}$/,
-                          message: 'Nomor telepon tidak valid.',
-                        },
-                      })}
-                      placeholder='Masukkan nomor telepon perusahaan'
-                      type='tel'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.phone?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      No. Handphone
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi no handphone perusahaan yang sesuai
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('mobile')}
-                      placeholder='Masukkan nomor handphone'
-                      type='tel'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.mobile?.message}
-                    </div>
-                  </div>
-                </div>
+//             <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'>
+//                       Nama Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('company')}
+//                       placeholder='Masukkan nama perusahaan'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <span className='opacity-65 text-xs'>
+//                       Format: PT. INDOTEKNIK DOTCOM GEMILANG
+//                     </span>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.company?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Pejabat Berwenang
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan nama pejabat yang berwewenang di perusahaan
+//                         anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('pejabatName')}
+//                       placeholder='Masukkan nama pejabat berwenang'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pejabatName?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Nama PIC</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan nama sales / penanggung jawab
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('PICName')}
+//                       placeholder='Masukkan nama PIC'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICName?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Jabatan PIC
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan jabatan sales / penanggung jawab
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('PICPosition')}
+//                       placeholder='Masukkan jabatan PIC'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICPosition?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label text-nowrap'>
+//                       Alamat Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Alamat sesuai dengan alamat perusahaan
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-col'>
+//                     <div>
+//                       <input
+//                         {...register('address')}
+//                         placeholder='Masukkan alamat lengkap perusahaan'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.address?.message}
+//                       </div>
+//                     </div>
+//                     <div
+//                       className={` sub-alamat flex ${
+//                         isKonfirmasi ? 'flex-col' : 'flex-row'
+//                       } w-full gap-3`}
+//                     >
+//                       <div
+//                         className={`flex  ${
+//                           isKonfirmasi
+//                             ? ' flex-row gap-3 w-full'
+//                             : 'flex-row gap-3 w-2/5'
+//                         }`}
+//                       >
+//                         <div className='provinsi w-full'>
+//                           <Controller
+//                             name='state'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={state}
+//                                 placeholder='Provinsi'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.state?.message}
+//                           </div>
+//                         </div>
+//                         <div className='kab w-full'>
+//                           <Controller
+//                             name='city'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={cities}
+//                                 disabled={!watchState}
+//                                 placeholder='Kab/Kota'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.city?.message}
+//                           </div>
+//                         </div>
+//                       </div>
+//                       <div
+//                         className={`flex-row flex gap-2 justify-between  ${
+//                           isKonfirmasi ? 'w-full' : 'w-3/5'
+//                         }`}
+//                       >
+//                         <div className='kec w-full'>
+//                           <Controller
+//                             name='district'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={districts}
+//                                 disabled={!watchState || !watchCity}
+//                                 placeholder='Kecamatan'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.district?.message}
+//                           </div>
+//                         </div>
+//                         <div className='kel w-full'>
+//                           <Controller
+//                             name='subDistrict'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={subDistricts}
+//                                 disabled={!watchDistrict}
+//                                 placeholder='Kelurahan'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.subDistrict?.message}
+//                           </div>
+//                         </div>
+//                         <div className='zip  w-full'>
+//                           <Controller
+//                             name='zip'
+//                             control={control}
+//                             render={(props) => (
+//                               <>
+//                                 {/* Jika zips tidak kosong, tampilkan dropdown */}
+//                                 {zips.length < 0 ? (
+//                                   // Jika zips kosong, tampilkan input manual
+//                                   <input
+//                                     {...register('zip')}
+//                                     placeholder='Kode Pos'
+//                                     type='number'
+//                                     className='form-input'
+//                                     disabled={!watchsubDistrict}
+//                                   />
+//                                 ) : (
+//                                   <HookFormSelect
+//                                     {...props}
+//                                     options={zips}
+//                                     disabled={!watchsubDistrict}
+//                                     placeholder='Zip'
+//                                   />
+//                                 )}
+//                               </>
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.zip?.message}
+//                           </div>
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Data Bank</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi detail data bank perusahaan anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-row gap-2'>
+//                     <div>
+//                       <input
+//                         {...register('bank')}
+//                         placeholder='Nama bank'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: BCA, Mandiri, CIMB, BNI dll
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.bank?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('rekening')}
+//                         placeholder='Nama Rekening'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: John Doe
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.rekening?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('accountNumber')}
+//                         placeholder='Nomor Rekening Bank'
+//                         type='number'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: 01234567896
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.accountNumber?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Perusahaan
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('email')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.email?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Sales
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('emailSales')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.emailSales?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Finance
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('emailFinance')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.emailFinance?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       No. Telepon Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi no telepon perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('phone', {
+//                         required: 'Nomor telepon wajib diisi.',
+//                         pattern: {
+//                           value: /^\+?[0-9]{10,15}$/,
+//                           message: 'Nomor telepon tidak valid.',
+//                         },
+//                       })}
+//                       placeholder='Masukkan nomor telepon perusahaan'
+//                       type='tel'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.phone?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       No. Handphone
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi no handphone perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('mobile')}
+//                       placeholder='Masukkan nomor handphone'
+//                       type='tel'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.mobile?.message}
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className='flex flex-row  justify-between items-center'>
-                  <div className='w-2/5'>
-                    <label className='form-label text-nowrap'>
-                      Tipe Bisnis
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60'>
-                        Pilih tipe bisnis yang sesuai
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5 flex flex-col '>
-                    <div className='flex flex-row items-center gap-3'>
-                      <div
-                      //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
-                      //   ref={tempoDurationRef}
-                      >
-                        <Controller
-                          name='bisnisType'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={dataBisnisType}
-                              placeholder={'Pilih tipe bisnis'}
-                            />
-                          )}
-                        />
+//                 <div className='flex flex-row  justify-between items-center'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label text-nowrap'>
+//                       Tipe Bisnis
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih tipe bisnis yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-col '>
+//                     <div className='flex flex-row items-center gap-3'>
+//                       <div
+//                       //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+//                       //   ref={tempoDurationRef}
+//                       >
+//                         <Controller
+//                           name='bisnisType'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={dataBisnisType}
+//                               placeholder={'Pilih tipe bisnis'}
+//                             />
+//                           )}
+//                         />
 
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.bisnisType?.message}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className='flex flex-row  justify-between items-center'>
-                  <div className='w-2/5'>
-                    <label className='form-label text-nowrap'>
-                      Kategori Perusahaan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60'>
-                        Pilih kategori perusahaan yang sesuai
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5 flex flex-col '>
-                    <div className='flex flex-row items-center gap-3'>
-                      <div
-                        //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
-                        className='w-[55%]'
-                        //   ref={tempoDurationRef}
-                      >
-                        <Controller
-                          name='categoryPerusahaan'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={dataCategoryPerusahaan}
-                              placeholder={'Pilih category perusahaan'}
-                            />
-                          )}
-                        />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.bisnisType?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='flex flex-row  justify-between items-center'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label text-nowrap'>
+//                       Kategori Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih kategori perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-col '>
+//                     <div className='flex flex-row items-center gap-3'>
+//                       <div
+//                         //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+//                         className='w-[55%]'
+//                         //   ref={tempoDurationRef}
+//                       >
+//                         <Controller
+//                           name='categoryPerusahaan'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={dataCategoryPerusahaan}
+//                               placeholder={'Pilih category perusahaan'}
+//                             />
+//                           )}
+//                         />
 
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.categoryPerusahaan?.message}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.categoryPerusahaan?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>Website</label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan website perusahaan anda
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('website')}
-                      placeholder='Masukkan website'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.website?.message}
-                    </div>
-                  </div>
-                </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Website</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan website perusahaan anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('website')}
+//                       placeholder='Masukkan website'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.website?.message}
+//                     </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 Perusahaan
-              </h2>
-            )}
+//                 <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 Perusahaan
+//               </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'>
-                      Nama Perusahaan
-                    </label>
-                    <input
-                      {...register('company')}
-                      placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.company?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>
-                      Pejabat Berwenang
-                    </label>
-                    <input
-                      {...register('pejabatName')}
-                      placeholder='Masukkan nama pejabat berwenang'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.pejabatName?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      isi dengan nama pejabat yang berwewenang di perusahaan
-                      anda{' '}
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>Nama PIC</label>
-                    <input
-                      {...register('PICName')}
-                      placeholder='Masukkan Nama PIC '
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICName?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      Isi dengan nama sales / penanggung jawab
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>
-                      Jabatan PIC
-                    </label>
-                    <input
-                      {...register('PICPosition')}
-                      placeholder='Masukkan jabatan PIC '
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICPosition?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      isi dengan jabatan sales / penanggung jawab
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label text-nowrap'>
-                      Alamat Perusahaan
-                    </label>
-                    <input
-                      {...register('address')}
-                      placeholder='Masukkan alamat lengkap perusahaan'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.address?.message}
-                    </div>
-                    <div className='flex flex-row w-full justify-between gap-2'>
-                      <div className='provinsi w-full'>
-                        <Controller
-                          name='state'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={state}
-                              placeholder='Provinsi'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.state?.message}
-                        </div>
-                      </div>
-                      <div className='kab w-full'>
-                        <Controller
-                          name='city'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={cities}
-                              disabled={!watchState}
-                              placeholder='Kab/Kota'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.city?.message}
-                        </div>
-                      </div>
-                    </div>
-                    <div className='flex flex-row w-full justify-between gap-2'>
-                      <div className='kec w-full'>
-                        <Controller
-                          name='district'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={districts}
-                              disabled={!watchState || !watchCity}
-                              placeholder='Kecamatan'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.district?.message}
-                        </div>
-                      </div>
-                      <div className='kel w-full'>
-                        <Controller
-                          name='subDistrict'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={subDistricts}
-                              disabled={!watchDistrict}
-                              placeholder='Kelurahan'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.subDistrict?.message}
-                        </div>
-                      </div>
-                      <div className='zip  w-full'>
-                        <Controller
-                          name='zip'
-                          control={control}
-                          render={(props) => (
-                            <>
-                              {zips.length > 0 ? (
-                                <HookFormSelect
-                                  {...props}
-                                  options={zips}
-                                  disabled={!watchsubDistrict}
-                                  placeholder='Zip'
-                                />
-                              ) : (
-                                <input
-                                  {...register('zip')}
-                                  placeholder='Kode Pos'
-                                  type='number'
-                                  className='form-input'
-                                  disabled={!watchsubDistrict}
-                                />
-                              )}
-                            </>
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.zip?.message}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Alamat sesuai dengan alamat perusahaan
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Data Bank</label>
-                  <div className='w-full flex flex-row gap-2'>
-                    <div>
-                      <input
-                        {...register('bank')}
-                        placeholder='Nama bank'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.bank?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('rekening')}
-                        placeholder='Nama Rekening'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.rekening?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('accountNumber')}
-                        placeholder='Nomor Rekening Bank'
-                        type='number'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.accountNumber?.message}
-                      </div>
-                    </div>
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail data bank perusahaan anda
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    Email Perusahaan
-                  </label>
-                  <input
-                    {...register('email')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.email?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Email Sales</label>
-                  <input
-                    {...register('emailSales')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.emailSales?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    Email Finance
-                  </label>
-                  <input
-                    {...register('emailFinance')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.emailFinance?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    No. Telepon Perusahaan
-                  </label>
-                  <input
-                    {...register('phone')}
-                    placeholder='Format: 08123456789 / (021) 123 4567'
-                    type='tel'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.phone?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    No. Handphone
-                  </label>
-                  <input
-                    {...register('mobile')}
-                    placeholder='Masukkan nomor handphone'
-                    type='tel'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.mobile?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='flex flex-col'>
-                  <label className='form-label text-nowrap'>Tipe Bisnis</label>
-                  <div className='flex flex-col '>
-                    <Controller
-                      name='bisnisType'
-                      control={control}
-                      render={(props) => (
-                        <HookFormSelect
-                          {...props}
-                          options={dataBisnisType}
-                          placeholder={'Pilih tipe bisnis'}
-                        />
-                      )}
-                    />
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60'>
-                        Pilih tipe bisnis yang sesuai
-                      </span>
-                    )}
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.bisnisType?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='flex flex-col'>
-                  <label className='form-label text-nowrap'>
-                    Kategori Perusahaan
-                  </label>
-                  <div className='flex flex-col '>
-                    <Controller
-                      name='categoryPerusahaan'
-                      control={control}
-                      render={(props) => (
-                        <HookFormSelect
-                          {...props}
-                          options={dataCategoryPerusahaan}
-                          placeholder={'Pilih category perusahaan'}
-                        />
-                      )}
-                    />
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60'>
-                        Pilih kategori perusahaan yang sesuai
-                      </span>
-                    )}
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.categoryPerusahaan?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Website</label>
-                  <input
-                    {...register('website')}
-                    placeholder='Masukkan website'
-                    type='text'
-                    className='form-input'
-                  />
-                  {!isKonfirmasi && (
-                    <span className='opacity-65 text-xs'>
-                      isi dengan website perusahaan anda
-                    </span>
-                  )}
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.website?.message}
-                  </div>
-                </div>
+//             <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'>
+//                       Nama Perusahaan
+//                     </label>
+//                     <input
+//                       {...register('company')}
+//                       placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.company?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Pejabat Berwenang
+//                     </label>
+//                     <input
+//                       {...register('pejabatName')}
+//                       placeholder='Masukkan nama pejabat berwenang'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pejabatName?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan nama pejabat yang berwewenang di perusahaan
+//                       anda{' '}
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>Nama PIC</label>
+//                     <input
+//                       {...register('PICName')}
+//                       placeholder='Masukkan Nama PIC '
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICName?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       Isi dengan nama sales / penanggung jawab
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Jabatan PIC
+//                     </label>
+//                     <input
+//                       {...register('PICPosition')}
+//                       placeholder='Masukkan jabatan PIC '
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICPosition?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan jabatan sales / penanggung jawab
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label text-nowrap'>
+//                       Alamat Perusahaan
+//                     </label>
+//                     <input
+//                       {...register('address')}
+//                       placeholder='Masukkan alamat lengkap perusahaan'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.address?.message}
+//                     </div>
+//                     <div className='flex flex-row w-full justify-between gap-2'>
+//                       <div className='provinsi w-full'>
+//                         <Controller
+//                           name='state'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={state}
+//                               placeholder='Provinsi'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.state?.message}
+//                         </div>
+//                       </div>
+//                       <div className='kab w-full'>
+//                         <Controller
+//                           name='city'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={cities}
+//                               disabled={!watchState}
+//                               placeholder='Kab/Kota'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.city?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                     <div className='flex flex-row w-full justify-between gap-2'>
+//                       <div className='kec w-full'>
+//                         <Controller
+//                           name='district'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={districts}
+//                               disabled={!watchState || !watchCity}
+//                               placeholder='Kecamatan'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.district?.message}
+//                         </div>
+//                       </div>
+//                       <div className='kel w-full'>
+//                         <Controller
+//                           name='subDistrict'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={subDistricts}
+//                               disabled={!watchDistrict}
+//                               placeholder='Kelurahan'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.subDistrict?.message}
+//                         </div>
+//                       </div>
+//                       <div className='zip  w-full'>
+//                         <Controller
+//                           name='zip'
+//                           control={control}
+//                           render={(props) => (
+//                             <>
+//                               {zips.length > 0 ? (
+//                                 <HookFormSelect
+//                                   {...props}
+//                                   options={zips}
+//                                   disabled={!watchsubDistrict}
+//                                   placeholder='Zip'
+//                                 />
+//                               ) : (
+//                                 <input
+//                                   {...register('zip')}
+//                                   placeholder='Kode Pos'
+//                                   type='number'
+//                                   className='form-input'
+//                                   disabled={!watchsubDistrict}
+//                                 />
+//                               )}
+//                             </>
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.zip?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Alamat sesuai dengan alamat perusahaan
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Data Bank</label>
+//                   <div className='w-full flex flex-row gap-2'>
+//                     <div>
+//                       <input
+//                         {...register('bank')}
+//                         placeholder='Nama bank'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.bank?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('rekening')}
+//                         placeholder='Nama Rekening'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.rekening?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('accountNumber')}
+//                         placeholder='Nomor Rekening Bank'
+//                         type='number'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.accountNumber?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail data bank perusahaan anda
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     Email Perusahaan
+//                   </label>
+//                   <input
+//                     {...register('email')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.email?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Email Sales</label>
+//                   <input
+//                     {...register('emailSales')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.emailSales?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     Email Finance
+//                   </label>
+//                   <input
+//                     {...register('emailFinance')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.emailFinance?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     No. Telepon Perusahaan
+//                   </label>
+//                   <input
+//                     {...register('phone')}
+//                     placeholder='Format: 08123456789 / (021) 123 4567'
+//                     type='tel'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.phone?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     No. Handphone
+//                   </label>
+//                   <input
+//                     {...register('mobile')}
+//                     placeholder='Masukkan nomor handphone'
+//                     type='tel'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.mobile?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='flex flex-col'>
+//                   <label className='form-label text-nowrap'>Tipe Bisnis</label>
+//                   <div className='flex flex-col '>
+//                     <Controller
+//                       name='bisnisType'
+//                       control={control}
+//                       render={(props) => (
+//                         <HookFormSelect
+//                           {...props}
+//                           options={dataBisnisType}
+//                           placeholder={'Pilih tipe bisnis'}
+//                         />
+//                       )}
+//                     />
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih tipe bisnis yang sesuai
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.bisnisType?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='flex flex-col'>
+//                   <label className='form-label text-nowrap'>
+//                     Kategori Perusahaan
+//                   </label>
+//                   <div className='flex flex-col '>
+//                     <Controller
+//                       name='categoryPerusahaan'
+//                       control={control}
+//                       render={(props) => (
+//                         <HookFormSelect
+//                           {...props}
+//                           options={dataCategoryPerusahaan}
+//                           placeholder={'Pilih category perusahaan'}
+//                         />
+//                       )}
+//                     />
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih kategori perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.categoryPerusahaan?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Website</label>
+//                   <input
+//                     {...register('website')}
+//                     placeholder='Masukkan website'
+//                     type='text'
+//                     className='form-input'
+//                   />
+//                   {!isKonfirmasi && (
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan website perusahaan anda
+//                     </span>
+//                   )}
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.website?.message}
+//                   </div>
+//                 </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>
-      </>
-    );
-  }
-);
+//                 <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({
-  company: Yup.string().required('Harus di-isi'),
-  pejabatName: Yup.string().required('Harus di-isi'),
-  PICName: Yup.string().required('Harus di-isi'),
-  PICPosition: Yup.string().required('Harus di-isi'),
-  address: Yup.string().required('Harus di-isi'),
-  state: Yup.string().required('Harus dipilih'),
-  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'),
-  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'),
-  mobile: Yup.string().required('Harus di-isi'),
-  bisnisType: Yup.string().required('Harus dipilih'),
-  categoryPerusahaan: Yup.string().required('Harus dipilih'),
-});
-const defaultValues = {
-  company: '',
-  pejabatName: '',
-  PICName: '',
-  PICPosition: '',
-  address: '',
-  state: '',
-  city: '',
-  district: '',
-  subDistrict: '',
-  zip: '',
-  email: '',
-  emailSales: '',
-  emailFinance: '',
-  bank: '',
-  rekening: '',
-  accountNumber: '',
-  phone: '',
-  mobile: '',
-};
+// const validationSchema = Yup.object().shape({
+//   company: Yup.string().required('Harus di-isi'),
+//   pejabatName: Yup.string().required('Harus di-isi'),
+//   PICName: Yup.string().required('Harus di-isi'),
+//   PICPosition: Yup.string().required('Harus di-isi'),
+//   address: Yup.string().required('Harus di-isi'),
+//   state: Yup.string().required('Harus dipilih'),
+//   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'),
+//   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'),
+//   mobile: Yup.string().required('Harus di-isi'),
+//   bisnisType: Yup.string().required('Harus dipilih'),
+//   categoryPerusahaan: Yup.string().required('Harus dipilih'),
+// });
+// const defaultValues = {
+//   company: '',
+//   pejabatName: '',
+//   PICName: '',
+//   PICPosition: '',
+//   address: '',
+//   state: '',
+//   city: '',
+//   district: '',
+//   subDistrict: '',
+//   zip: '',
+//   email: '',
+//   emailSales: '',
+//   emailFinance: '',
+//   bank: '',
+//   rekening: '',
+//   accountNumber: '',
+//   phone: '',
+//   mobile: '',
+// };
 
-export default CreateMerchant;
+// export default CreateMerchant;
diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx
index d00f27ed..90763029 100644
--- a/src/lib/merchant/components/InformasiVendor.jsx
+++ b/src/lib/merchant/components/InformasiVendor.jsx
@@ -1,748 +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;
+// 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;
diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx
index 9556c88a..f7d552ac 100644
--- a/src/lib/merchant/components/Konfirmasi.jsx
+++ b/src/lib/merchant/components/Konfirmasi.jsx
@@ -1,224 +1,224 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { Controller, set, useForm } from 'react-hook-form';
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
-// import ProgressBar from '@ramonak/react-progress-bar';
-import {
-  Button,
-  Checkbox,
-  Spinner,
-  Tooltip,
-  UseToastOptions,
-} from '@chakra-ui/react';
-import odooApi from '~/libs/odooApi';
-import { toast } from 'react-hot-toast';
-import getFileBase64 from '@/core/utils/getFileBase64';
-import { CheckCircleIcon } from '@heroicons/react/24/outline';
-import InformasiPerusahaan from './InformasiPerusahaan';
-import InformasiVendor from './InformasiVendor';
-import SyaratDagang from './SyaratDagang';
-import Dokumen from './Dokumen';
-import createMerchantApi from '../api/createMerchantApi';
-import useDevice from '@/core/hooks/useDevice';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
-import { useRouter } from 'next/router';
-const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
-  const { control, watch, setValue, getValues, reset } = useForm();
-  const { isDesktop, isMobile } = useDevice();
-  const [isOpenInformasi, setIsOpenInformasi] = useState(true);
-  const [isOpenKontak, setIsOpenKontak] = useState(false);
-  const [isOpenPengiriman, setIsOpenPengiriman] = useState(false);
-  const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false);
-  const formRef = useRef(null);
-  const router = useRouter();
-  const handleDaftarMerchant = () => {
-    if (formRef.current) {
-      formRef.current(); // Memicu submit form di InformasiPerusahaan
-    }
-  };
-  const handleIsError = async (value) => {
-    if (!value) {
-      // goToNextStep();
-      const toastId = toast.loading('Mengirimkan formulir merchant...');
-      const data = {
-        merchant_request: true,
-      };
-      const create_leads = await createMerchantApi({ data });
-      if (create_leads) {
-        toast.dismiss(toastId);
-        toast.success('Berhasil medaftarkan merchant');
-        reset();
-        // router.push('/+');
-      } else {
-        toast.dismiss(toastId);
-        toast.error('Gagal menambahkan data');
-      }
-    }
-    reset();
-    router.push('/');
-  };
+// import React, { useState, useEffect, useMemo, useRef } from 'react';
+// import { Controller, set, useForm } from 'react-hook-form';
+// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+// // import ProgressBar from '@ramonak/react-progress-bar';
+// import {
+//   Button,
+//   Checkbox,
+//   Spinner,
+//   Tooltip,
+//   UseToastOptions,
+// } from '@chakra-ui/react';
+// import odooApi from '~/libs/odooApi';
+// import { toast } from 'react-hot-toast';
+// import getFileBase64 from '@/core/utils/getFileBase64';
+// import { CheckCircleIcon } from '@heroicons/react/24/outline';
+// import InformasiPerusahaan from './InformasiPerusahaan';
+// import InformasiVendor from './InformasiVendor';
+// import SyaratDagang from './SyaratDagang';
+// import Dokumen from './Dokumen';
+// import createMerchantApi from '../api/createMerchantApi';
+// import useDevice from '@/core/hooks/useDevice';
+// import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+// import { useRouter } from 'next/router';
+// const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
+//   const { control, watch, setValue, getValues, reset } = useForm();
+//   const { isDesktop, isMobile } = useDevice();
+//   const [isOpenInformasi, setIsOpenInformasi] = useState(true);
+//   const [isOpenKontak, setIsOpenKontak] = useState(false);
+//   const [isOpenPengiriman, setIsOpenPengiriman] = useState(false);
+//   const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false);
+//   const formRef = useRef(null);
+//   const router = useRouter();
+//   const handleDaftarMerchant = () => {
+//     if (formRef.current) {
+//       formRef.current(); // Memicu submit form di InformasiPerusahaan
+//     }
+//   };
+//   const handleIsError = async (value) => {
+//     if (!value) {
+//       // goToNextStep();
+//       const toastId = toast.loading('Mengirimkan formulir merchant...');
+//       const data = {
+//         merchant_request: true,
+//       };
+//       const create_leads = await createMerchantApi({ data });
+//       if (create_leads) {
+//         toast.dismiss(toastId);
+//         toast.success('Berhasil medaftarkan merchant');
+//         reset();
+//         // router.push('/+');
+//       } else {
+//         toast.dismiss(toastId);
+//         toast.error('Gagal menambahkan data');
+//       }
+//     }
+//     reset();
+//     router.push('/');
+//   };
 
-  return (
-    <>
-      {isDesktop && (
-        <>
-          <form className='flex mt-4 flex-col w-full '>
-            <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
-              <div className='w-full flex flex-col gap-5 '>
-                <div className=''>
-                  <InformasiPerusahaan
-                    isKonfirmasi={true}
-                    ref={formRef}
-                    handleIsError={handleIsError}
-                  />
-                </div>
-                <div className='h-px bg-gray-300'></div>
-                <div className=''>
-                  <SyaratDagang
-                    isKonfirmasi={true}
-                    ref={formRef}
-                    handleIsError={handleIsError}
-                  />
-                </div>
-              </div>
+//   return (
+//     <>
+//       {isDesktop && (
+//         <>
+//           <form className='flex mt-4 flex-col w-full '>
+//             <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
+//               <div className='w-full flex flex-col gap-5 '>
+//                 <div className=''>
+//                   <InformasiPerusahaan
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//                 <div className='h-px bg-gray-300'></div>
+//                 <div className=''>
+//                   <SyaratDagang
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//               </div>
 
-              <div className='w-px bg-gray-300'></div>
-              <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
-                <div className=''>
-                  <InformasiVendor
-                    isKonfirmasi={true}
-                    ref={formRef}
-                    handleIsError={handleIsError}
-                  />
-                </div>
-                <div className='h-px   bg-gray-300'></div>
-                <div>
-                  <Dokumen
-                    isKonfirmasi={true}
-                    ref={formRef}
-                    handleIsError={handleIsError}
-                  />
-                </div>
-              </div>
-            </div>
-          </form>
+//               <div className='w-px bg-gray-300'></div>
+//               <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
+//                 <div className=''>
+//                   <InformasiVendor
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//                 <div className='h-px   bg-gray-300'></div>
+//                 <div>
+//                   <Dokumen
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//               </div>
+//             </div>
+//           </form>
 
-          <div className='flex flex-col items-end justify-end gap-2'>
-            <span className='text-xs opacity-60'>
-              *Pastikan data yang anda masukan sudah benar dan sesuai
-            </span>
-            <Button
-              colorScheme='red'
-              w='36'
-              onClick={handleDaftarMerchant} // Memicu form submit
-            >
-              Daftar Merchant
-            </Button>
-          </div>
-        </>
-      )}
-      {isMobile && (
-        <form className='flex mt-8 py-4 flex-col w-full gap-4'>
-          <div className='flex flex-col gap-4'>
-            <div className='flex flex-row justify-between items-center'>
-              <div className='flex flex-col justify-center items-start'>
-                <p className='font-semibold text-lg'>Informasi Perusahaan</p>
-                {/* <span className='text-xs opacity-70'>
-                  Pastikan informasi usaha yang anda masukkan sudah sesuai
-                  dengan data perusahaan anda
-                </span> */}
-              </div>
-              <div className='p-2 bg-gray-200'>
-                {isOpenInformasi ? (
-                  <ChevronUpIcon
-                    className='w-4'
-                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
-                  />
-                ) : (
-                  <ChevronDownIcon
-                    className='w-4'
-                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
-                  />
-                )}
-              </div>
-            </div>
-            {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />}
-            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
-          </div>
-          <div className='flex flex-col gap-4'>
-            <div className='flex flex-row justify-between'>
-              <p className='font-semibold text-lg'>Informasi Vendor</p>
-              <div className='p-2 bg-gray-200'>
-                {isOpenKontak ? (
-                  <ChevronUpIcon
-                    className='w-4'
-                    onClick={() => setIsOpenKontak(!isOpenKontak)}
-                  />
-                ) : (
-                  <ChevronDownIcon
-                    className='w-4'
-                    onClick={() => setIsOpenKontak(!isOpenKontak)}
-                  />
-                )}
-              </div>
-            </div>
-            {isOpenKontak && <InformasiVendor isKonfirmasi={true} />}
-            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
-          </div>
-          <div className='flex flex-col gap-4'>
-            <div className='flex flex-row justify-between'>
-              <p className='font-semibold text-lg'>Syarat Perdagangan</p>
-              <div className='p-2 bg-gray-200'>
-                {isOpenPengiriman ? (
-                  <ChevronUpIcon
-                    className='w-4'
-                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
-                  />
-                ) : (
-                  <ChevronDownIcon
-                    className='w-4'
-                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
-                  />
-                )}
-              </div>
-            </div>
-            {isOpenPengiriman && <SyaratDagang isKonfirmasi={true} />}
-            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
-          </div>
-          <div className='flex flex-col gap-4'>
-            <div className='flex flex-row justify-between'>
-              <p className='font-semibold text-lg'>Dokumen</p>
-              <div className='p-2 bg-gray-200'>
-                {isOpenKonfirmasi ? (
-                  <ChevronUpIcon
-                    className='w-4'
-                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
-                  />
-                ) : (
-                  <ChevronDownIcon
-                    className='w-4'
-                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
-                  />
-                )}
-              </div>
-            </div>
-            {isOpenKonfirmasi && <Dokumen isKonfirmasi={true} />}
-          </div>
-          <div className='flex flex-col items-end justify-end gap-2'>
-            <span className='text-xs opacity-60'>
-              *Pastikan data yang anda masukan sudah benar dan sesuai
-            </span>
-            <Button
-              colorScheme='red'
-              w='full'
-              onClick={handleDaftarMerchant} // Memicu form submit
-            >
-              Daftar Merchant
-            </Button>
-          </div>
-        </form>
-      )}
-    </>
-  );
-};
+//           <div className='flex flex-col items-end justify-end gap-2'>
+//             <span className='text-xs opacity-60'>
+//               *Pastikan data yang anda masukan sudah benar dan sesuai
+//             </span>
+//             <Button
+//               colorScheme='red'
+//               w='36'
+//               onClick={handleDaftarMerchant} // Memicu form submit
+//             >
+//               Daftar Merchant
+//             </Button>
+//           </div>
+//         </>
+//       )}
+//       {isMobile && (
+//         <form className='flex mt-8 py-4 flex-col w-full gap-4'>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between items-center'>
+//               <div className='flex flex-col justify-center items-start'>
+//                 <p className='font-semibold text-lg'>Informasi Perusahaan</p>
+//                 {/* <span className='text-xs opacity-70'>
+//                   Pastikan informasi usaha yang anda masukkan sudah sesuai
+//                   dengan data perusahaan anda
+//                 </span> */}
+//               </div>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenInformasi ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />}
+//             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//           </div>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between'>
+//               <p className='font-semibold text-lg'>Informasi Vendor</p>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenKontak ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKontak(!isOpenKontak)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKontak(!isOpenKontak)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenKontak && <InformasiVendor isKonfirmasi={true} />}
+//             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//           </div>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between'>
+//               <p className='font-semibold text-lg'>Syarat Perdagangan</p>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenPengiriman ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenPengiriman && <SyaratDagang isKonfirmasi={true} />}
+//             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//           </div>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between'>
+//               <p className='font-semibold text-lg'>Dokumen</p>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenKonfirmasi ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenKonfirmasi && <Dokumen isKonfirmasi={true} />}
+//           </div>
+//           <div className='flex flex-col items-end justify-end gap-2'>
+//             <span className='text-xs opacity-60'>
+//               *Pastikan data yang anda masukan sudah benar dan sesuai
+//             </span>
+//             <Button
+//               colorScheme='red'
+//               w='full'
+//               onClick={handleDaftarMerchant} // Memicu form submit
+//             >
+//               Daftar Merchant
+//             </Button>
+//           </div>
+//         </form>
+//       )}
+//     </>
+//   );
+// };
 
-export default Konfirmasi;
+// export default Konfirmasi;
diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx
index 3c16e3ba..382db064 100644
--- a/src/lib/merchant/components/Merchant.jsx
+++ b/src/lib/merchant/components/Merchant.jsx
@@ -1,147 +1,147 @@
-import React from 'react';
-import { useMemo, useState, useEffect, useRef } from 'react';
-import Image from '~/components/ui/image';
-import InformasiPerusahaan from './InformasiPerusahaan';
-import InformasiVendor from './InformasiVendor';
-import SyaratDagang from './SyaratDagang';
-import Dokumen from './Dokumen';
-import Konfirmasi from './Konfirmasi';
-import { getAuth } from '~/libs/auth';
-import { setAuth } from '@/core/utils/auth';
-import useAuth from '@/core/hooks/useAuth';
-import { useRouter } from 'next/router';
-import { Controller, useForm } from 'react-hook-form';
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
-import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
-import clsxm from '~/libs/clsxm';
-import { toast } from 'react-hot-toast';
-import useDevice from '@/core/hooks/useDevice';
-import odooApi from '~/libs/odooApi';
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
-import PageContent from '@/lib/content/components/PageContent';
-const Merchant = () => {
-  const { isDesktop, isMobile } = useDevice();
-  const [currentStep, setCurrentStep] = React.useState(0);
-  const NUMBER_OF_STEPS = 5;
-  const [isLoading, setIsLoading] = useState(false);
-  const [bigData, setBigData] = useState();
-  const [idTempo, setIdTempo] = useState(0);
-  const { control, watch, setValue } = useForm();
-  const auth = useAuth();
-  const router = useRouter();
-  const [BannerTempo, setBannerTempo] = useState();
-  const [notValid, setNotValid] = useState(false);
-  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
+// import React from 'react';
+// import { useMemo, useState, useEffect, useRef } from 'react';
+// import Image from '~/components/ui/image';
+// import InformasiPerusahaan from './InformasiPerusahaan';
+// import InformasiVendor from './InformasiVendor';
+// import SyaratDagang from './SyaratDagang';
+// import Dokumen from './Dokumen';
+// import Konfirmasi from './Konfirmasi';
+// import { getAuth } from '~/libs/auth';
+// import { setAuth } from '@/core/utils/auth';
+// import useAuth from '@/core/hooks/useAuth';
+// import { useRouter } from 'next/router';
+// import { Controller, useForm } from 'react-hook-form';
+// import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+// import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
+// import clsxm from '~/libs/clsxm';
+// import { toast } from 'react-hot-toast';
+// import useDevice from '@/core/hooks/useDevice';
+// import odooApi from '~/libs/odooApi';
+// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+// import PageContent from '@/lib/content/components/PageContent';
+// const Merchant = () => {
+//   const { isDesktop, isMobile } = useDevice();
+//   const [currentStep, setCurrentStep] = React.useState(0);
+//   const NUMBER_OF_STEPS = 5;
+//   const [isLoading, setIsLoading] = useState(false);
+//   const [bigData, setBigData] = useState();
+//   const [idTempo, setIdTempo] = useState(0);
+//   const { control, watch, setValue } = useForm();
+//   const auth = useAuth();
+//   const router = useRouter();
+//   const [BannerTempo, setBannerTempo] = useState();
+//   const [notValid, setNotValid] = useState(false);
+//   const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
 
-  const [error, setError] = useState(false);
+//   const [error, setError] = useState(false);
 
-  const handleIsError = (value) => {
-    if (!value) {
-      goToNextStep();
-    }
-    setError(value); // Memperbarui state berdasarkan isError
-  };
-  const stepDivs = [
-    <InformasiPerusahaan
-      handleIsError={handleIsError}
-      buttonSubmitClick={buttonSubmitClick}
-    />,
-    <InformasiVendor
-      handleIsError={handleIsError}
-      buttonSubmitClick={buttonSubmitClick}
-    />,
-    <SyaratDagang
-      handleIsError={handleIsError}
-      buttonSubmitClick={buttonSubmitClick}
-    />,
-    <Dokumen
-      handleIsError={handleIsError}
-      buttonSubmitClick={buttonSubmitClick}
-    />,
-    <Konfirmasi handleIsError={handleIsError} />,
-  ];
+//   const handleIsError = (value) => {
+//     if (!value) {
+//       goToNextStep();
+//     }
+//     setError(value); // Memperbarui state berdasarkan isError
+//   };
+//   const stepDivs = [
+//     <InformasiPerusahaan
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <InformasiVendor
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <SyaratDagang
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <Dokumen
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <Konfirmasi handleIsError={handleIsError} />,
+//   ];
 
-  const stepLabels = [
-    'informasi_perusahaan',
-    'kontak_person',
-    'Pengiriman',
-    'Referensi',
-    'Dokumen',
-    'Konfirmasi',
-  ];
+//   const stepLabels = [
+//     'informasi_perusahaan',
+//     'kontak_person',
+//     'Pengiriman',
+//     'Referensi',
+//     'Dokumen',
+//     'Konfirmasi',
+//   ];
 
-  useEffect(() => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    });
-  }, [currentStep]);
+//   useEffect(() => {
+//     window.scrollTo({
+//       top: 0,
+//       behavior: 'smooth',
+//     });
+//   }, [currentStep]);
 
-  useEffect(() => {
-    <InformasiPerusahaan buttonSubmitClick={buttonSubmitClick} />;
-  }, [buttonSubmitClick]);
+//   useEffect(() => {
+//     <InformasiPerusahaan buttonSubmitClick={buttonSubmitClick} />;
+//   }, [buttonSubmitClick]);
 
-  const goToNextStep = () => {
-    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
-  };
+//   const goToNextStep = () => {
+//     setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
+//   };
 
-  const goPrevStep = () => {
-    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev - 1));
-  };
+//   const goPrevStep = () => {
+//     setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev - 1));
+//   };
 
-  useEffect(() => {
-    const getBanner = async () => {
-      const get = await odooApi('GET', '/api/v1/banner?type=banner-form-tempo');
-      // setBannerTempo(get[0].image);
-      setBannerTempo(
-        'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431'
-      );
-    };
-    getBanner();
-  }, []);
-  return (
-    <>
-      <div className='container flex flex-col items-center '>
-        {BannerTempo && (
-          <Image
-            src={BannerTempo}
-            alt='FORM Tempo'
-            width={500}
-            height={160}
-            className='w-full mt-6'
-          />
-        )}
-        <h1 className=' font-semibold text-center mb-6'>Form Merchant</h1>
-        <p
-          className={`text-center  ${
-            isMobile ? 'w-full text-sm' : 'w-3/4 mb-4'
-          }`}
-        >
-          Pembayaran tempo adalah layanan pembayaran berjangka yang difasilitasi
-          indoteknik.com untuk konsumen akun bisnis yang terdaftar dengan waktu
-          pembayaran mulai dari 7, 14, 21 hingga 30 Hari.
-        </p>
-      </div>
-      <div
-        className={`h-[2px] w-full ${isMobile ? 'mt-4' : 'mb-4'}  bg-gray_r-3`}
-      />
+//   useEffect(() => {
+//     const getBanner = async () => {
+//       const get = await odooApi('GET', '/api/v1/banner?type=banner-form-tempo');
+//       // setBannerTempo(get[0].image);
+//       setBannerTempo(
+//         'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431'
+//       );
+//     };
+//     getBanner();
+//   }, []);
+//   return (
+//     <>
+//       <div className='container flex flex-col items-center '>
+//         {BannerTempo && (
+//           <Image
+//             src={BannerTempo}
+//             alt='FORM Tempo'
+//             width={500}
+//             height={160}
+//             className='w-full mt-6'
+//           />
+//         )}
+//         <h1 className=' font-semibold text-center mb-6'>Form Merchant</h1>
+//         <p
+//           className={`text-center  ${
+//             isMobile ? 'w-full text-sm' : 'w-3/4 mb-4'
+//           }`}
+//         >
+//           Pembayaran tempo adalah layanan pembayaran berjangka yang difasilitasi
+//           indoteknik.com untuk konsumen akun bisnis yang terdaftar dengan waktu
+//           pembayaran mulai dari 7, 14, 21 hingga 30 Hari.
+//         </p>
+//       </div>
+//       <div
+//         className={`h-[2px] w-full ${isMobile ? 'mt-4' : 'mb-4'}  bg-gray_r-3`}
+//       />
 
-      <div className={`container ${isMobile ? 'mt-4' : ''} flex flex-col`}>
-        <div>{stepDivs[currentStep]}</div>
-        {isDesktop && <section className='flex gap-10 mt-10'></section>}
-        {isMobile && (
-          <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
-        )}
-        <div
-          className={`flex ${
-            isMobile
-              ? 'flex-col justify-start items-start'
-              : 'flex-col justify-end items-end'
-          }    mb-8 gap-2`}
-        ></div>
-      </div>
-    </>
-  );
-};
+//       <div className={`container ${isMobile ? 'mt-4' : ''} flex flex-col`}>
+//         <div>{stepDivs[currentStep]}</div>
+//         {isDesktop && <section className='flex gap-10 mt-10'></section>}
+//         {isMobile && (
+//           <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//         )}
+//         <div
+//           className={`flex ${
+//             isMobile
+//               ? 'flex-col justify-start items-start'
+//               : 'flex-col justify-end items-end'
+//           }    mb-8 gap-2`}
+//         ></div>
+//       </div>
+//     </>
+//   );
+// };
 
-export default Merchant;
+// export default Merchant;
diff --git a/src/lib/merchant/components/SyaratDagang.jsx b/src/lib/merchant/components/SyaratDagang.jsx
index 96681064..a3060e23 100644
--- a/src/lib/merchant/components/SyaratDagang.jsx
+++ b/src/lib/merchant/components/SyaratDagang.jsx
@@ -1,822 +1,822 @@
-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';
-const SyaratDagang = 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 [bigData, setbigData] = useState([]);
-  const [isExample, setIsExample] = useState(false);
-
-  const recaptchaRef = useRef(null);
-  const router = useRouter();
-
-  useEffect(() => {
-    const loadData = async () => {
-      const data = await getMerchantApi();
-      setbigData(data);
-      if (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 ? data.tenggatWaktu : '';
-            return '';
-          })(),
-          sertifikatProduk: data.sertifikatProduk || '',
-          customSertifikatProduk: data.customSertifikatProduk || '',
-          tempoGaransi: parseInt(data.tempoGaransi) || '',
-          explainGaransi: data.explainGaransi || '',
-          minimumPembelian:
-            data.isOrderQuantity == 'tidak' ? '' : data.minimumPembelian || '',
-          isOrderQuantity: data.isOrderQuantity || '',
-        });
-        // handleKreditLimitChange(data.kreditLimit);
-        if (watch('sertifikatProduk') != false) {
-          setSelectedIds(watch('sertifikatProduk').split(',').map(Number));
-        }
-        if (watch('customSertifikatProduk')) {
-          // setSelectedIds([...selectedIds, 4]);
-        }
-      }
-    };
-
-    loadData();
-  }, []);
-  useEffect(() => {
-    if (!isKonfirmasi) {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-  }, []);
-  useImperativeHandle(ref, () => () => {
-    handleSubmit(onSubmitHandler)();
-  });
-  const auth = useAuth();
-  if (auth == false) {
-    router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
-  }
-
-  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 category_produk = [
-    { id: 0, name: 'TKDN' },
-    { id: 1, name: 'SNI' },
-    { id: 2, name: 'K3L' },
-    { id: 3, name: '' },
-  ];
-
-  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
-  );
-  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, 3];
-
-    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}`);
-  };
-
-  const onSubmitHandler = async (values) => {
-    const toastId = toast.loading('Mengirimkan formulir merchant...');
-    const data = {
-      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
-
-  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 h-fit items-start ${
-            !isKonfirmasi && 'py-4'
-          }`}
-        >
-          <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
-            Syarat Perdagangan
-          </h2>
-
-          <div className='w-full mt-4 '>
-            <form
-              onSubmit={handleSubmit(onSubmitHandler)}
-              className='flex flex-col gap-4'
-            >
-              <div className='flex flex-row justify-between items-start'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-wrap '>
-                    Syarat Pengembalian Barang
-                  </label>
-                </div>
-                <div className='w-3/5 flex flex-row justify-start'>
-                  <div className='flex gap-x-4 flex-col w-full'>
-                    <RadioGroup
-                      onChange={handleCheckboxReturChange}
-                      value={watch('isKembaliBarang')}
-                    >
-                      <Stack direction='column'>
-                        <div className='flex flex-row text-nowrap gap-2'>
-                          <Radio colorScheme='red' value='ya'>
-                            Ya, dapat diretur
-                          </Radio>
-                          {watch('isKembaliBarang') == 'ya' && (
-                            <textarea
-                              {...register('textReturn')}
-                              placeholder='jelaskan syarat pengembalian'
-                              type='textarea'
-                              className='form-input w-full'
-                            />
-                          )}
-                        </div>
-                        <Radio colorScheme='red' value='tidak'>
-                          Tidak dapat diretur
-                        </Radio>
-                      </Stack>
-                    </RadioGroup>
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.isKembaliBarang?.message}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className='flex flex-row justify-between items-start'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-wrap '>
-                    Tenggat Waktu Perubahan Harga
-                  </label>
-                </div>
-                <div className='w-3/5 flex flex-row justify-start'>
-                  <div className='flex gap-x-4 flex-col w-full'>
-                    <RadioGroup
-                      onChange={handleCheckboxTenggatWaktuChange}
-                      value={watch('tenggatWaktu')}
-                    >
-                      <Stack direction='column'>
-                        <Radio
-                          colorScheme='red'
-                          value='14'
-                          onChange={() => setValue('customTenggatWaktu', ' ')}
-                        >
-                          14 hari sejak data dikirimkan
-                        </Radio>
-                        <Radio
-                          colorScheme='red'
-                          value='30'
-                          onChange={() => setValue('customTenggatWaktu', ' ')}
-                        >
-                          30 hari sejak data dikirimkan
-                        </Radio>
-                        <div className='flex flex-row gap-2'>
-                          <Radio colorScheme='red' value='custom'></Radio>
-                          <input
-                            {...register('customTenggatWaktu')}
-                            placeholder='Masukkan jumlah hari untuk tenggat waktu'
-                            type='text'
-                            onFocus={() => setValue('tenggatWaktu', 'custom')}
-                            className='form-input mt-2'
-                          />
-                        </div>
-                      </Stack>
-                    </RadioGroup>
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.tenggatWaktu?.message}
-                    </div>
-                  </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'}`}
-                  >
-                    Dokumen/Sertifikat yang Dimiliki Oleh Brand
-                  </label>
-                  {!isKonfirmasi && (
-                    <span className='text-xs opacity-60'>
-                      Pilih dokumen/sertifikat bisa lebih dari 1
-                    </span>
-                  )}
-                </div>
-                <div className='w-3/5 flex flex-col'>
-                  <div className='flex flex-row justify-between w-full'>
-                    <div
-                      className='flex flex-col gap-2 w-full'
-                      //   ref={categoryProdukRef}
-                    >
-                      <Checkbox
-                        colorScheme='red'
-                        key={0}
-                        onChange={() => handleCheckboxChange(0)}
-                        isChecked={isChecked(0)}
-                      >
-                        TKDN
-                      </Checkbox>
-                      <Checkbox
-                        colorScheme='red'
-                        key={1}
-                        onChange={() => handleCheckboxChange(1)}
-                        isChecked={isChecked(1)}
-                      >
-                        SNI
-                      </Checkbox>
-                      <Checkbox
-                        colorScheme='red'
-                        key={2}
-                        onChange={() => handleCheckboxChange(2)}
-                        isChecked={isChecked(2)}
-                      >
-                        K3L
-                      </Checkbox>
-                      <div className='flex flex-row gap-2 w-full'>
-                        <Checkbox
-                          colorScheme='red'
-                          key={3}
-                          onChange={() => handleCheckboxChange(3)}
-                          isChecked={isChecked(3)}
-                        ></Checkbox>
-                        <input
-                          {...register('customSertifikatProduk')}
-                          placeholder='Masukkan Dokumen/Sertifikat yang dimiliki oleh brand'
-                          type='text'
-                          onFocus={() => {
-                            custom_sertifikat_produk_handle();
-                          }}
-                          // onFocus={() => handleCheckboxChange(4)}
-                          className='form-input mt-2'
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.sertifikatProduk?.message}
-                  </div>
-                </div>
-              </div>
-
-              <div className='flex flex-row  justify-between items-center'>
-                <div className='w-2/5'>
-                  <label className='form-label text-nowrap'>Garansi</label>
-                  {!isKonfirmasi && (
-                    <span className='text-xs opacity-60'>
-                      Pilih waktu garansi yang diberikan
-                    </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='tempoGaransi'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={dataGaransi}
-                            placeholder={'Pilih durasi garansi'}
-                          />
-                        )}
-                      />
-
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.tempoGaransi?.message}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-nowrap'>
-                    Jelaskan Garansi yang dimaksud!
-                  </label>
-                </div>
-                <div className='w-3/5'>
-                  <textarea
-                    {...register('explainGaransi')}
-                    placeholder='Jelaskan bagian apa yang termasuk garansi'
-                    type='textarea'
-                    className='form-input'
-                    rows={4}
-                    cols={40}
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.explainGaransi?.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 Memiliki Minimum Order Quantity (MOQ)
-                  </label>
-                </div>
-                <div className='w-3/5 flex flex-row justify-start'>
-                  <div className='flex gap-x-4 flex-col w-full'>
-                    <RadioGroup
-                      onChange={handleCheckboxOrderQuantityChange}
-                      value={
-                        watch('minimumPembelian')
-                          ? 'ya'
-                          : watch('isOrderQuantity')
-                      }
-                    >
-                      <Stack direction='column'>
-                        <div className='flex flex-row text-nowrap gap-2'>
-                          <Radio
-                            colorScheme='red'
-                            value='ya'
-                            onChange={() => setValue('isOrderQuantity', 'ya')}
-                          >
-                            Ya
-                          </Radio>
-
-                          <Controller
-                            name='minimumPembelian'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={dataMinimumOrderQuantity}
-                                placeholder={
-                                  'Pilih jenis minimum order quantity'
-                                }
-                                onFocus={() =>
-                                  setValue('isOrderQuantity', 'ya')
-                                }
-                              />
-                            )}
-                          />
-                        </div>
-                        <Radio
-                          colorScheme='red'
-                          value='tidak'
-                          onChange={() => setValue('minimumPembelian', '')}
-                        >
-                          Tidak Ada
-                        </Radio>
-                      </Stack>
-                    </RadioGroup>
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.isOrderQuantity?.message}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {!isKonfirmasi && (
-                <div className='flex justify-end'>
-                  <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>
-          </div>
-        </div>
-      </DesktopView>
-      <MobileView>
-        <div className='container flex flex-col items-star py-4'>
-          {!isKonfirmasi && (
-            <h2 className='font-semibold mb-6 text-xl'>Syarat Perdagangan</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'>
-                    Syarat Pengembalian Barang
-                  </label>
-                  <div className='flex gap-x-4 flex-col w-full'>
-                    <RadioGroup
-                      onChange={handleCheckboxReturChange}
-                      value={watch('isKembaliBarang')}
-                    >
-                      <Stack direction='column'>
-                        <div className='flex flex-row text-nowrap gap-2'>
-                          <Radio colorScheme='red' value='ya'>
-                            Ya, dapat diretur
-                          </Radio>
-                          {watch('isKembaliBarang') == 'ya' && (
-                            <textarea
-                              {...register('textReturn')}
-                              placeholder='jelaskan syarat pengembalian'
-                              type='textarea'
-                              className='form-input w-full'
-                            />
-                          )}
-                        </div>
-                        <Radio colorScheme='red' value='tidak'>
-                          Tidak dapat diretur
-                        </Radio>
-                      </Stack>
-                    </RadioGroup>
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.isKembaliBarang?.message}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='w-full flex flex-col'>
-                <div className='w-full'>
-                  <label className='form-label  text-nowrap'>
-                    Tenggat Waktu Perubahan Harga
-                  </label>
-                  <div className='flex gap-x-4 flex-col w-full'>
-                    <RadioGroup
-                      onChange={handleCheckboxTenggatWaktuChange}
-                      value={watch('tenggatWaktu')}
-                    >
-                      <Stack direction='column'>
-                        <Radio
-                          colorScheme='red'
-                          value='14'
-                          onChange={() => setValue('customTenggatWaktu', ' ')}
-                        >
-                          14 hari sejak data dikirimkan
-                        </Radio>
-                        <Radio
-                          colorScheme='red'
-                          value='30'
-                          onChange={() => setValue('customTenggatWaktu', ' ')}
-                        >
-                          30 hari sejak data dikirimkan
-                        </Radio>
-                        <div className='flex flex-row gap-2'>
-                          <Radio colorScheme='red' value='custom'></Radio>
-                          <input
-                            {...register('customTenggatWaktu')}
-                            placeholder='Masukkan jumlah hari untuk tenggat waktu'
-                            type='text'
-                            onFocus={() => setValue('tenggatWaktu', 'custom')}
-                            className='form-input mt-2'
-                          />
-                        </div>
-                      </Stack>
-                    </RadioGroup>
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.tenggatWaktu?.message}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='w-full flex flex-col'>
-                <div className='w-full'>
-                  <label className='form-label  text-nowrap'>
-                    Dokumen/Sertifikat yang Dimiliki Oleh Brand
-                  </label>
-                  <div
-                    className='flex flex-col gap-2 w-full'
-                    //   ref={categoryProdukRef}
-                  >
-                    <Checkbox
-                      colorScheme='red'
-                      key={0}
-                      onChange={() => handleCheckboxChange(0)}
-                      isChecked={isChecked(0)}
-                    >
-                      TKDN
-                    </Checkbox>
-                    <Checkbox
-                      colorScheme='red'
-                      key={1}
-                      onChange={() => handleCheckboxChange(1)}
-                      isChecked={isChecked(1)}
-                    >
-                      SNI
-                    </Checkbox>
-                    <Checkbox
-                      colorScheme='red'
-                      key={2}
-                      onChange={() => handleCheckboxChange(2)}
-                      isChecked={isChecked(2)}
-                    >
-                      K3L
-                    </Checkbox>
-                    <div className='flex flex-row gap-2 w-full'>
-                      <Checkbox
-                        colorScheme='red'
-                        key={3}
-                        onChange={() => handleCheckboxChange(3)}
-                        isChecked={isChecked(3)}
-                      ></Checkbox>
-                      <input
-                        {...register('customSertifikatProduk')}
-                        placeholder='Masukkan Dokumen/Sertifikat yang dimiliki oleh brand'
-                        type='text'
-                        onFocus={() => {
-                          custom_sertifikat_produk_handle();
-                        }}
-                        // onFocus={() => handleCheckboxChange(4)}
-                        className='form-input mt-2'
-                      />
-                    </div>
-                  </div>
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.sertifikatProduk?.message}
-                  </div>
-                </div>
-              </div>
-
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>Garansi</label>
-                <div className='w-full flex flex-row gap-2'>
-                  <Controller
-                    name='tempoGaransi'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={dataGaransi}
-                        placeholder={'Pilih durasi garansi'}
-                      />
-                    )}
-                  />
-
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.tempoGaransi?.message}
-                  </div>
-                </div>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>
-                  Jelaskan Garansi yang dimaksud!
-                </label>
-                <textarea
-                  {...register('explainGaransi')}
-                  placeholder='Jelaskan bagian apa yang termasuk garansi'
-                  type='textarea'
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.explainGaransi?.message}
-                </div>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>
-                  Apakah Memiliki Minimum Order Quantity (MOQ)
-                </label>
-                <div className='flex gap-x-4 flex-col w-full'>
-                  <RadioGroup
-                    onChange={handleCheckboxOrderQuantityChange}
-                    value={
-                      watch('minimumPembelian')
-                        ? 'ya'
-                        : watch('isOrderQuantity')
-                    }
-                  >
-                    <Stack direction='column'>
-                      <div className='flex flex-row text-nowrap gap-2'>
-                        <Radio
-                          colorScheme='red'
-                          value='ya'
-                          onChange={() => setValue('isOrderQuantity', 'ya')}
-                        >
-                          Ya
-                        </Radio>
-
-                        <Controller
-                          name='minimumPembelian'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={dataMinimumOrderQuantity}
-                              placeholder={'Pilih jenis minimum order quantity'}
-                              onFocus={() => setValue('isOrderQuantity', 'ya')}
-                            />
-                          )}
-                        />
-                      </div>
-                      <Radio
-                        colorScheme='red'
-                        value='tidak'
-                        onChange={() => setValue('minimumPembelian', '')}
-                      >
-                        Tidak Ada
-                      </Radio>
-                    </Stack>
-                  </RadioGroup>
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.isOrderQuantity?.message}
-                  </div>
-                </div>
-              </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({
-  isKembaliBarang: Yup.string().required('Harus di-pilih'),
-  tenggatWaktu: Yup.string().required('Harus di-pilih'),
-  sertifikatProduk: Yup.string().required('Harus di-pilih'),
-  tempoGaransi: Yup.string().required('Harus di-pilih'),
-  explainGaransi: Yup.string().required('Harus di-isi'),
-  isOrderQuantity: Yup.string().required('Harus di-isi'),
-});
-const defaultValues = {
-  isKembaliBarang: '',
-  tenggatWaktu: '',
-  sertifikatProduk: '',
-  explainGaransi: '',
-  isOrderQuantity: '',
-};
-
-export default SyaratDagang;
+// 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';
+// const SyaratDagang = 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 [bigData, setbigData] = useState([]);
+//   const [isExample, setIsExample] = useState(false);
+
+//   const recaptchaRef = useRef(null);
+//   const router = useRouter();
+
+//   useEffect(() => {
+//     const loadData = async () => {
+//       const data = await getMerchantApi();
+//       setbigData(data);
+//       if (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 ? data.tenggatWaktu : '';
+//             return '';
+//           })(),
+//           sertifikatProduk: data.sertifikatProduk || '',
+//           customSertifikatProduk: data.customSertifikatProduk || '',
+//           tempoGaransi: parseInt(data.tempoGaransi) || '',
+//           explainGaransi: data.explainGaransi || '',
+//           minimumPembelian:
+//             data.isOrderQuantity == 'tidak' ? '' : data.minimumPembelian || '',
+//           isOrderQuantity: data.isOrderQuantity || '',
+//         });
+//         // handleKreditLimitChange(data.kreditLimit);
+//         if (watch('sertifikatProduk') != false) {
+//           setSelectedIds(watch('sertifikatProduk').split(',').map(Number));
+//         }
+//         if (watch('customSertifikatProduk')) {
+//           // setSelectedIds([...selectedIds, 4]);
+//         }
+//       }
+//     };
+
+//     loadData();
+//   }, []);
+//   useEffect(() => {
+//     if (!isKonfirmasi) {
+//       window.scrollTo({
+//         top: 0,
+//         behavior: 'smooth',
+//       });
+//     }
+//   }, []);
+//   useImperativeHandle(ref, () => () => {
+//     handleSubmit(onSubmitHandler)();
+//   });
+//   const auth = useAuth();
+//   if (auth == false) {
+//     router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//   }
+
+//   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 category_produk = [
+//     { id: 0, name: 'TKDN' },
+//     { id: 1, name: 'SNI' },
+//     { id: 2, name: 'K3L' },
+//     { id: 3, name: '' },
+//   ];
+
+//   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
+//   );
+//   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, 3];
+
+//     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}`);
+//   };
+
+//   const onSubmitHandler = async (values) => {
+//     const toastId = toast.loading('Mengirimkan formulir merchant...');
+//     const data = {
+//       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
+
+//   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 h-fit items-start ${
+//             !isKonfirmasi && 'py-4'
+//           }`}
+//         >
+//           <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+//             Syarat Perdagangan
+//           </h2>
+
+//           <div className='w-full mt-4 '>
+//             <form
+//               onSubmit={handleSubmit(onSubmitHandler)}
+//               className='flex flex-col gap-4'
+//             >
+//               <div className='flex flex-row justify-between items-start'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-wrap '>
+//                     Syarat Pengembalian Barang
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5 flex flex-row justify-start'>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxReturChange}
+//                       value={watch('isKembaliBarang')}
+//                     >
+//                       <Stack direction='column'>
+//                         <div className='flex flex-row text-nowrap gap-2'>
+//                           <Radio colorScheme='red' value='ya'>
+//                             Ya, dapat diretur
+//                           </Radio>
+//                           {watch('isKembaliBarang') == 'ya' && (
+//                             <textarea
+//                               {...register('textReturn')}
+//                               placeholder='jelaskan syarat pengembalian'
+//                               type='textarea'
+//                               className='form-input w-full'
+//                             />
+//                           )}
+//                         </div>
+//                         <Radio colorScheme='red' value='tidak'>
+//                           Tidak dapat diretur
+//                         </Radio>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.isKembaliBarang?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='flex flex-row justify-between items-start'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-wrap '>
+//                     Tenggat Waktu Perubahan Harga
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5 flex flex-row justify-start'>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxTenggatWaktuChange}
+//                       value={watch('tenggatWaktu')}
+//                     >
+//                       <Stack direction='column'>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='14'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           14 hari sejak data dikirimkan
+//                         </Radio>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='30'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           30 hari sejak data dikirimkan
+//                         </Radio>
+//                         <div className='flex flex-row gap-2'>
+//                           <Radio colorScheme='red' value='custom'></Radio>
+//                           <input
+//                             {...register('customTenggatWaktu')}
+//                             placeholder='Masukkan jumlah hari untuk tenggat waktu'
+//                             type='text'
+//                             onFocus={() => setValue('tenggatWaktu', 'custom')}
+//                             className='form-input mt-2'
+//                           />
+//                         </div>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.tenggatWaktu?.message}
+//                     </div>
+//                   </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'}`}
+//                   >
+//                     Dokumen/Sertifikat yang Dimiliki Oleh Brand
+//                   </label>
+//                   {!isKonfirmasi && (
+//                     <span className='text-xs opacity-60'>
+//                       Pilih dokumen/sertifikat bisa lebih dari 1
+//                     </span>
+//                   )}
+//                 </div>
+//                 <div className='w-3/5 flex flex-col'>
+//                   <div className='flex flex-row justify-between w-full'>
+//                     <div
+//                       className='flex flex-col gap-2 w-full'
+//                       //   ref={categoryProdukRef}
+//                     >
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={0}
+//                         onChange={() => handleCheckboxChange(0)}
+//                         isChecked={isChecked(0)}
+//                       >
+//                         TKDN
+//                       </Checkbox>
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={1}
+//                         onChange={() => handleCheckboxChange(1)}
+//                         isChecked={isChecked(1)}
+//                       >
+//                         SNI
+//                       </Checkbox>
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={2}
+//                         onChange={() => handleCheckboxChange(2)}
+//                         isChecked={isChecked(2)}
+//                       >
+//                         K3L
+//                       </Checkbox>
+//                       <div className='flex flex-row gap-2 w-full'>
+//                         <Checkbox
+//                           colorScheme='red'
+//                           key={3}
+//                           onChange={() => handleCheckboxChange(3)}
+//                           isChecked={isChecked(3)}
+//                         ></Checkbox>
+//                         <input
+//                           {...register('customSertifikatProduk')}
+//                           placeholder='Masukkan Dokumen/Sertifikat yang dimiliki oleh brand'
+//                           type='text'
+//                           onFocus={() => {
+//                             custom_sertifikat_produk_handle();
+//                           }}
+//                           // onFocus={() => handleCheckboxChange(4)}
+//                           className='form-input mt-2'
+//                         />
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.sertifikatProduk?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='flex flex-row  justify-between items-center'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label text-nowrap'>Garansi</label>
+//                   {!isKonfirmasi && (
+//                     <span className='text-xs opacity-60'>
+//                       Pilih waktu garansi yang diberikan
+//                     </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='tempoGaransi'
+//                         control={control}
+//                         render={(props) => (
+//                           <HookFormSelect
+//                             {...props}
+//                             options={dataGaransi}
+//                             placeholder={'Pilih durasi garansi'}
+//                           />
+//                         )}
+//                       />
+
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.tempoGaransi?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-row'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-nowrap'>
+//                     Jelaskan Garansi yang dimaksud!
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5'>
+//                   <textarea
+//                     {...register('explainGaransi')}
+//                     placeholder='Jelaskan bagian apa yang termasuk garansi'
+//                     type='textarea'
+//                     className='form-input'
+//                     rows={4}
+//                     cols={40}
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.explainGaransi?.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 Memiliki Minimum Order Quantity (MOQ)
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5 flex flex-row justify-start'>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxOrderQuantityChange}
+//                       value={
+//                         watch('minimumPembelian')
+//                           ? 'ya'
+//                           : watch('isOrderQuantity')
+//                       }
+//                     >
+//                       <Stack direction='column'>
+//                         <div className='flex flex-row text-nowrap gap-2'>
+//                           <Radio
+//                             colorScheme='red'
+//                             value='ya'
+//                             onChange={() => setValue('isOrderQuantity', 'ya')}
+//                           >
+//                             Ya
+//                           </Radio>
+
+//                           <Controller
+//                             name='minimumPembelian'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={dataMinimumOrderQuantity}
+//                                 placeholder={
+//                                   'Pilih jenis minimum order quantity'
+//                                 }
+//                                 onFocus={() =>
+//                                   setValue('isOrderQuantity', 'ya')
+//                                 }
+//                               />
+//                             )}
+//                           />
+//                         </div>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='tidak'
+//                           onChange={() => setValue('minimumPembelian', '')}
+//                         >
+//                           Tidak Ada
+//                         </Radio>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.isOrderQuantity?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               {!isKonfirmasi && (
+//                 <div className='flex justify-end'>
+//                   <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>
+//           </div>
+//         </div>
+//       </DesktopView>
+//       <MobileView>
+//         <div className='container flex flex-col items-star py-4'>
+//           {!isKonfirmasi && (
+//             <h2 className='font-semibold mb-6 text-xl'>Syarat Perdagangan</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'>
+//                     Syarat Pengembalian Barang
+//                   </label>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxReturChange}
+//                       value={watch('isKembaliBarang')}
+//                     >
+//                       <Stack direction='column'>
+//                         <div className='flex flex-row text-nowrap gap-2'>
+//                           <Radio colorScheme='red' value='ya'>
+//                             Ya, dapat diretur
+//                           </Radio>
+//                           {watch('isKembaliBarang') == 'ya' && (
+//                             <textarea
+//                               {...register('textReturn')}
+//                               placeholder='jelaskan syarat pengembalian'
+//                               type='textarea'
+//                               className='form-input w-full'
+//                             />
+//                           )}
+//                         </div>
+//                         <Radio colorScheme='red' value='tidak'>
+//                           Tidak dapat diretur
+//                         </Radio>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.isKembaliBarang?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <div className='w-full'>
+//                   <label className='form-label  text-nowrap'>
+//                     Tenggat Waktu Perubahan Harga
+//                   </label>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxTenggatWaktuChange}
+//                       value={watch('tenggatWaktu')}
+//                     >
+//                       <Stack direction='column'>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='14'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           14 hari sejak data dikirimkan
+//                         </Radio>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='30'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           30 hari sejak data dikirimkan
+//                         </Radio>
+//                         <div className='flex flex-row gap-2'>
+//                           <Radio colorScheme='red' value='custom'></Radio>
+//                           <input
+//                             {...register('customTenggatWaktu')}
+//                             placeholder='Masukkan jumlah hari untuk tenggat waktu'
+//                             type='text'
+//                             onFocus={() => setValue('tenggatWaktu', 'custom')}
+//                             className='form-input mt-2'
+//                           />
+//                         </div>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.tenggatWaktu?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <div className='w-full'>
+//                   <label className='form-label  text-nowrap'>
+//                     Dokumen/Sertifikat yang Dimiliki Oleh Brand
+//                   </label>
+//                   <div
+//                     className='flex flex-col gap-2 w-full'
+//                     //   ref={categoryProdukRef}
+//                   >
+//                     <Checkbox
+//                       colorScheme='red'
+//                       key={0}
+//                       onChange={() => handleCheckboxChange(0)}
+//                       isChecked={isChecked(0)}
+//                     >
+//                       TKDN
+//                     </Checkbox>
+//                     <Checkbox
+//                       colorScheme='red'
+//                       key={1}
+//                       onChange={() => handleCheckboxChange(1)}
+//                       isChecked={isChecked(1)}
+//                     >
+//                       SNI
+//                     </Checkbox>
+//                     <Checkbox
+//                       colorScheme='red'
+//                       key={2}
+//                       onChange={() => handleCheckboxChange(2)}
+//                       isChecked={isChecked(2)}
+//                     >
+//                       K3L
+//                     </Checkbox>
+//                     <div className='flex flex-row gap-2 w-full'>
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={3}
+//                         onChange={() => handleCheckboxChange(3)}
+//                         isChecked={isChecked(3)}
+//                       ></Checkbox>
+//                       <input
+//                         {...register('customSertifikatProduk')}
+//                         placeholder='Masukkan Dokumen/Sertifikat yang dimiliki oleh brand'
+//                         type='text'
+//                         onFocus={() => {
+//                           custom_sertifikat_produk_handle();
+//                         }}
+//                         // onFocus={() => handleCheckboxChange(4)}
+//                         className='form-input mt-2'
+//                       />
+//                     </div>
+//                   </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.sertifikatProduk?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>Garansi</label>
+//                 <div className='w-full flex flex-row gap-2'>
+//                   <Controller
+//                     name='tempoGaransi'
+//                     control={control}
+//                     render={(props) => (
+//                       <HookFormSelect
+//                         {...props}
+//                         options={dataGaransi}
+//                         placeholder={'Pilih durasi garansi'}
+//                       />
+//                     )}
+//                   />
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.tempoGaransi?.message}
+//                   </div>
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>
+//                   Jelaskan Garansi yang dimaksud!
+//                 </label>
+//                 <textarea
+//                   {...register('explainGaransi')}
+//                   placeholder='Jelaskan bagian apa yang termasuk garansi'
+//                   type='textarea'
+//                   className='form-input'
+//                   rows={4}
+//                   cols={40}
+//                 />
+//                 <div className='text-caption-2 text-danger-500 mt-1'>
+//                   {errors.explainGaransi?.message}
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>
+//                   Apakah Memiliki Minimum Order Quantity (MOQ)
+//                 </label>
+//                 <div className='flex gap-x-4 flex-col w-full'>
+//                   <RadioGroup
+//                     onChange={handleCheckboxOrderQuantityChange}
+//                     value={
+//                       watch('minimumPembelian')
+//                         ? 'ya'
+//                         : watch('isOrderQuantity')
+//                     }
+//                   >
+//                     <Stack direction='column'>
+//                       <div className='flex flex-row text-nowrap gap-2'>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='ya'
+//                           onChange={() => setValue('isOrderQuantity', 'ya')}
+//                         >
+//                           Ya
+//                         </Radio>
+
+//                         <Controller
+//                           name='minimumPembelian'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={dataMinimumOrderQuantity}
+//                               placeholder={'Pilih jenis minimum order quantity'}
+//                               onFocus={() => setValue('isOrderQuantity', 'ya')}
+//                             />
+//                           )}
+//                         />
+//                       </div>
+//                       <Radio
+//                         colorScheme='red'
+//                         value='tidak'
+//                         onChange={() => setValue('minimumPembelian', '')}
+//                       >
+//                         Tidak Ada
+//                       </Radio>
+//                     </Stack>
+//                   </RadioGroup>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.isOrderQuantity?.message}
+//                   </div>
+//                 </div>
+//               </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({
+//   isKembaliBarang: Yup.string().required('Harus di-pilih'),
+//   tenggatWaktu: Yup.string().required('Harus di-pilih'),
+//   sertifikatProduk: Yup.string().required('Harus di-pilih'),
+//   tempoGaransi: Yup.string().required('Harus di-pilih'),
+//   explainGaransi: Yup.string().required('Harus di-isi'),
+//   isOrderQuantity: Yup.string().required('Harus di-isi'),
+// });
+// const defaultValues = {
+//   isKembaliBarang: '',
+//   tenggatWaktu: '',
+//   sertifikatProduk: '',
+//   explainGaransi: '',
+//   isOrderQuantity: '',
+// };
+
+// export default SyaratDagang;