[GREEN] implement handleSubmit and onSumbit for Form IUMK 3

src/components/FormIUMK/FormIUMK3.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import {getEmail, getPhoneNumber} from '../../store/auth/authSlice'
 import {useSelector} from 'react-redux'
 
-const FormIUMK3 = ({data}) => {
+const FormIUMK3 = ({data, onSubmit, handleSubmit}) => {
   const email = useSelector(getEmail)
   const phoneNumber = useSelector(getPhoneNumber)
   const urutan = [
@@ -45,54 +45,67 @@ const FormIUMK3 = ({data}) => {
   data = {...data, ...konstan}
 
   return (
-    <form className="px-4" data-testid="form-iumk-3">
-      {urutan.map((value, index) => (
-        <div
-          className="grid lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3"
-          key={index}
-        >
-          <div className="flex justify-start grid lg:col-span-2 xl:col-span-2 2xl:col-span-2 lg:pb-3 xl:pb-3 2xl:pb-3">
-            <p className="md\:font-Lato">{label[index]}</p>
+    <div>
+      <form
+        className="px-4"
+        data-testid="form-iumk-3"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        {urutan.map((value, index) => (
+          <div
+            className="grid lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3"
+            key={index}
+          >
+            <div className="flex justify-start grid lg:col-span-2 xl:col-span-2 2xl:col-span-2 lg:pb-3 xl:pb-3 2xl:pb-3">
+              <p className="md\:font-Lato">{label[index]}</p>
+              {urutan[index] == 'catatan' ? (
+                <p
+                  className="md\:font-Lato"
+                  data-testid={`form-iumk-3-input-${value}`}
+                >
+                  {data[value] && data[value] != null ? data[value] : '-'}
+                </p>
+              ) : (
+                ''
+              )}
+            </div>
+
             {urutan[index] == 'catatan' ? (
-              <p
-                className="md\:font-Lato"
-                data-testid={`form-iumk-3-input-${value}`}
-              >
-                {data[value] && data[value] != null ? data[value] : '-'}
-              </p>
-            ) : (
               ''
+            ) : (
+              <div className="flex justify-start lg:justify-end xl:justify-end 2xl:justify-end text-left lg:text-right xl:text-right 2xl:text-right pb-3">
+                <p
+                  className="heading-3"
+                  data-testid={`form-iumk-3-input-${value}`}
+                >
+                  {data[value] &&
+                  data[value] != null &&
+                  urutan[index] == 'no_telepon'
+                    ? '+62 ' + data[value]
+                    : data[value]}
+                  {data[value] && data[value] != null ? '' : '-'}
+                </p>
+              </div>
             )}
           </div>
-
-          {urutan[index] == 'catatan' ? (
-            ''
-          ) : (
-            <div className="flex justify-start lg:justify-end xl:justify-end 2xl:justify-end text-left lg:text-right xl:text-right 2xl:text-right pb-3">
-              <p
-                className="heading-3"
-                data-testid={`form-iumk-3-input-${value}`}
-              >
-                {data[value] && data[value] != null ? data[value] : '-'}
-              </p>
-            </div>
-          )}
+        ))}
+        <div className="pt-4">
+          <button
+            className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
+            data-testid="submit-button"
+          >
+            Submit
+          </button>
         </div>
-      ))}
-      <div className="pt-4">
-        <button
-          className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
-          data-testid="submit-button"
-        >
-          Submit
-        </button>
-      </div>
-    </form>
+      </form>
+    </div>
   )
 }
 
 FormIUMK3.propTypes = {
   data: PropTypes.object,
+  handleSubmit: PropTypes.func,
+  onSubmit: PropTypes.func,
 }
 
 export default FormIUMK3