<hafid> off site merchant

1 files changed, 822 insertions, 822 deletions

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;