<iman> update merchant

1 files changed, 69 insertions, 42 deletions

diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx
index d47d22ee..f86cf3c9 100644
--- a/src/lib/merchant/components/InformasiVendor.jsx
+++ b/src/lib/merchant/components/InformasiVendor.jsx
@@ -4,7 +4,13 @@ import stateApi from '@/lib/address/api/stateApi.js';
 import districtApi from '@/lib/address/api/districtApi';
 import subDistrictApi from '@/lib/address/api/subDistrictApi';
 import { yupResolver } from '@hookform/resolvers/yup';
-import React, { useEffect, useRef, useState } from 'react';
+import 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';
@@ -26,7 +32,7 @@ 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 = ({ handleIsError }) => {
+const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
   const isError = (value) => {
     // Logika menentukan error
     const result = value ? true : false;
@@ -139,24 +145,30 @@ const InformasiVendor = ({ handleIsError }) => {
   useEffect(() => {
     const loadData = async () => {
       const data = await getMerchantApi();
-      console.log('data vendor', 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));
+      if (data) {
+        console.log('data vendor', 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) => {
     console.log('e', e);
     let value = e.target?.value ? e.target.value : e;
@@ -375,7 +387,6 @@ const InformasiVendor = ({ handleIsError }) => {
   const onSubmitHandler = async (values) => {
     const toastId = toast.loading('Mengirimkan formulir merchant...');
     const data = {
-      ...values,
       harga_tayang: values.hargaTayang,
       categoryProduk: values.categoryProduk,
       merk_dagang: values.merkDagang,
@@ -495,15 +506,19 @@ const InformasiVendor = ({ handleIsError }) => {
 
               <div className={`flex flex-row  justify-between items-start`}>
                 <div className='w-2/5 text-nowrap'>
-                  <label className='form-label '>
+                  <label
+                    className={`form-label ${isKonfirmasi && 'text-wrap'}`}
+                  >
                     Tipe Kategori Produk yang Digunakan
                   </label>
-                  <span className='text-xs opacity-60'>
-                    Pilih kategori produk bisa lebih dari 1
-                  </span>
+                  {!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'>
+                  <div className='flex flex-row justify-between gap-2'>
                     <div
                       className='flex flex-col gap-2'
                       //   ref={categoryProdukRef}
@@ -519,7 +534,7 @@ const InformasiVendor = ({ handleIsError }) => {
                         </Checkbox>
                       ))}
                     </div>
-                    <div className='flex flex-col gap-2'>
+                    <div className='flex flex-col gap-2 '>
                       {secondColumn.map((item) => (
                         <Checkbox
                           colorScheme='red'
@@ -587,13 +602,15 @@ const InformasiVendor = ({ handleIsError }) => {
               <div className='flex flex-row  justify-between items-center'>
                 <div className='w-2/5'>
                   <label className='form-label text-nowrap'>Durasi Tempo</label>
-                  <span className='text-xs opacity-60'>
-                    Pilih durasi tempo yang anda inginkan
-                  </span>
+                  {!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={`w-[25%]`}>
+                    <div className={`${!isKonfirmasi && 'w-[25%]'}`}>
                       <Controller
                         name='tempoDuration'
                         control={control}
@@ -619,9 +636,11 @@ const InformasiVendor = ({ handleIsError }) => {
                   <label className='form-label  text-nowrap'>
                     Jumlah Kredit Limit
                   </label>
-                  <span className='opacity-65 text-xs'>
-                    isi dengan kredit limit perusahaan anda
-                  </span>
+                  {!isKonfirmasi && (
+                    <span className='opacity-65 text-xs'>
+                      isi dengan kredit limit perusahaan anda
+                    </span>
+                  )}
                 </div>
                 <div className='w-3/5'>
                   <input
@@ -642,9 +661,11 @@ const InformasiVendor = ({ handleIsError }) => {
                   <label className='form-label  text-nowrap'>
                     Waktu Pengiriman
                   </label>
-                  <span className='opacity-65 text-xs'>
-                    isi dengan waktu pengiriman anda
-                  </span>
+                  {!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'>
@@ -691,7 +712,7 @@ const InformasiVendor = ({ handleIsError }) => {
                   />
                 </div> */}
               </div>
-              <div className='flex justify-start'>
+              <div className='flex justify-end'>
                 {/* <Button
                   colorScheme='red'
                   className='w-full md:w-fit'
@@ -700,14 +721,20 @@ const InformasiVendor = ({ handleIsError }) => {
                   Daftar Merchant{' '}
                   {<ChevronRightIcon className='w-5' color='white' />}
                 </Button> */}
-                <div>
-                  <button
-                    type='submit'
-                    className='btn-light bg-red-500 rounded-lg text-white w-full md:w-fit mt-6 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
-                  >
-                    <span>Daftar Merchant </span>
-                  </button>
-                </div>
+                {!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' />
@@ -1354,7 +1381,7 @@ const InformasiVendor = ({ handleIsError }) => {
       </MobileView>
     </>
   );
-};
+});
 const validationSchema = Yup.object().shape({
   categoryProduk: Yup.string().required('Harus di-pilih'),
   merkDagang: Yup.string().required('Harus di-isi'),