form-merchant & quotation tampilan

1 files changed, 28 insertions, 18 deletions

diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index 1e8704ac..8e4f9c56 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -56,6 +56,7 @@ const CreateMerchant = forwardRef(
       resolver: yupResolver(validationSchema),
       defaultValues,
     });
+    const [bisnisType, setBisnisType] = useState([]);
     const [state, setState] = useState([]);
     const [cities, setCities] = useState([]);
     const [districts, setDistricts] = useState([]);
@@ -71,6 +72,7 @@ const CreateMerchant = forwardRef(
     const kartuNamaRef = useRef(null);
     const suratPernyataanRef = useRef(null);
     const fotoKantorRef = useRef(null);
+    const bisnisTypeRef = useRef(null);
 
      const handleConfirmSubmit = (format, base64) => {
         if (format == 'pdf') {
@@ -228,7 +230,7 @@ const CreateMerchant = forwardRef(
               accountNumber: data.accountNumber || '',
               phone: data.phone || '',
               mobile: data.mobile || '',
-              bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
+              bisnisType: data.bisnisType || '',
               categoryPerusahaan: data.categoryPerusahaan
                 ? parseInt(data.categoryPerusahaan)
                 : null,
@@ -263,6 +265,12 @@ const CreateMerchant = forwardRef(
     }, [reset, handleIsError]);
 
     useEffect(() => {
+      if (errors.bisnisType && bisnisTypeRef.current) {
+        bisnisTypeRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }, [errors.bisnisType]);
+
+    useEffect(() => {
       const loadProfile = async () => {
         try {
           const dataProfile = await addressApi({
@@ -530,7 +538,6 @@ const CreateMerchant = forwardRef(
         }
         return;
       }
-        
       const create_leads = await createMerchantApi({ data });
       if (create_leads) {
         toast.dismiss(toastId);
@@ -593,9 +600,11 @@ const CreateMerchant = forwardRef(
                   name="bisnisType"
                   control={control}
                   render={({ field }) => (
-                    <div className="space-y-2">
+                    <div ref={bisnisTypeRef} className="space-y-2 w-full flex flex-row">
+                      <div className="w-2/5">
                       <label className="font-semibold text-gray-800">Tipe Bisnis</label>
-                      <div className="flex items-center space-x-6">
+                      </div>
+                      <div className="flex items-center space-x-6 .w-3/5">
                         {dataBisnisType.map((option) => (
                           <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
                             <input
@@ -605,20 +614,20 @@ const CreateMerchant = forwardRef(
                               onChange={() => field.onChange(option.value)}
                               className="sr-only peer"
                             />
-                            <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
+                             <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
                peer-checked:border-[5px] peer-checked:border-red-500 
                peer-focus:outline peer-focus:outline-red-100">
                               <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
                             </div>
-                            <span className="text-sm text-gray-800">{option.label}</span>
+                            <span className=" text-gray-800">{option.label}</span>
                           </label>
+                          
                         ))}
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.bisnisType?.message}
+                </div>
                       </div>
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                      { errors.bisnisType?.message}
-                       </div>
                     </div>
-                    
                   )}
                 />
                 <div className='w-full flex flex-row'>
@@ -640,7 +649,7 @@ const CreateMerchant = forwardRef(
                       className='form-input'
                     />
                     <span className='opacity-65 text-xs'>
-                      Format: PT. INDOTEKNIK DOTCOM GEMILANG
+                      Format: PT. INDOTEKNIK DOTCOM GEMILANG{''}
                     </span>
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errors.name?.message}
@@ -722,7 +731,7 @@ const CreateMerchant = forwardRef(
                     </label>
                     {!isKonfirmasi && (
                       <span className='opacity-65 text-xs'>
-                        Alamat sesuai dengan alamat perusahaan
+                        Alamat sesuai dengan alamat perusahaan{''}
                       </span>
                     )}
                   </div>
@@ -1551,7 +1560,7 @@ const CreateMerchant = forwardRef(
                   name="bisnisType"
                   control={control}
                   render={({ field }) => (
-                    <div className="space-y-2">
+                    <div ref={bisnisTypeRef} className="space-y-2">
                       <label className="font-semibold text-gray-800">Tipe Bisnis</label>
                       <div className="flex items-center space-x-6">
                         {dataBisnisType.map((option) => (
@@ -1570,15 +1579,15 @@ const CreateMerchant = forwardRef(
                             </div>
                             <span className="text-sm text-gray-800">{option.label}</span>
                           </label>
+                          
                         ))}
                       </div>
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.bisnisType?.message}
-                        </div>
                     </div>
                   )}
                 />
-
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.bisnisType?.message}
+                </div>
             <div className='w-full mt-4'>
               <form
                 onSubmit={handleSubmit(onSubmitHandler)}
@@ -2231,6 +2240,7 @@ const CreateMerchant = forwardRef(
 );
 
 const validationSchema = Yup.object().shape({
+  bisnisType: Yup.string().required('Harus dipilih'),
   name: Yup.string().required('Harus di-isi'),
   address: Yup.string().required('Harus di-isi'),
   state: Yup.string().required('Harus dipilih'),
@@ -2252,7 +2262,6 @@ const validationSchema = Yup.object().shape({
     .required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   mobile: Yup.string().required('Harus di-isi'),
-  bisnisType: Yup.string().required('Harus dipilih'),
 });
 const defaultValues = {
   name: '',
@@ -2270,6 +2279,7 @@ const defaultValues = {
   accountNumber: '',
   phone: '',
   mobile: '',
+  bisnisType: '',
 };
 
 export default CreateMerchant;