From f0548068badf0f561f2652bfb7bb282770607a63 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 12:52:40 +0700
Subject: [PATCH 01/43] add button mainapp

---
 src/App/Container/Assets/Css/main.css         | 12 ++++
 src/App/Container/Components/MainApp/View.tsx | 56 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/App/Container/Assets/Css/main.css b/src/App/Container/Assets/Css/main.css
index ef6823f..351e8f3 100644
--- a/src/App/Container/Assets/Css/main.css
+++ b/src/App/Container/Assets/Css/main.css
@@ -1050,10 +1050,22 @@ video {
   background-color: #162f42;
 }
 
+.bg-bluepindad-300 {
+  background-color: #0078a9
+}
+
 .bg-yellowpindad-100 {
   background-color: #D4AF37;
 }
 
+.bg-orangepindad-100 {
+  background-color: #EC971F
+}
+
+.bg-greenpindad-100 {
+  background-color: #449D44
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index c980623..97bf038 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -1,13 +1,63 @@
 import React from "react";
 
-export const MainApp = ({ title, children }) => {
+export const MainApp = ({
+  title,
+  children,
+  textDone = "",
+  textNew = "",
+  classNameDone = "bg-white hover:bg-gray-300 border border-gray-400 text-gray-800",
+  classNameNew = "focus:outline-none bg-blue-600 hover:bg-blue-800 text-white",
+  onActionOne = () => {},
+  onActionTwo = () => {},
+}) => {
   return (
     <div className="w-full h-full">
       <table className="w-full">
         <thead className="w-full border-b-2 bg-gray-200">
           <tr>
-            <td className="text-left py-2 pl-6 text-gray-600 text-sm font-semibold">
-              {title}
+            <td className="flex flex-row whitespace-no-wrap justify-between text-left pl-6 text-gray-600 text-sm font-bold">
+              <div className="my-2">
+                <span>{title}</span>
+              </div>
+              <div className="text-xs my-1 mr-6 flex flex-row items-center">
+                <div>
+                  <button className="my-0 mr-6">
+                    <svg
+                      className="fill-current h-3 w-3"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 512 512"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+                      ></path>
+                    </svg>
+                  </button>
+                </div>
+                <button className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500">
+                  <svg
+                    className="fill-current h-3 w-3 mr-2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 18 18"
+                  >
+                    <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
+                  </svg>
+                  <span>Set Primary Data</span>
+                </button>
+                <button className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-gray-700">
+                  Selesai
+                </button>
+                <button className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600">
+                  <svg
+                    className="fill-current w-3 mr-2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 5 5"
+                  >
+                    <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
+                  </svg>
+                  <span>Buat Entri Baru</span>
+                </button>
+              </div>
             </td>
           </tr>
         </thead>

From 3261e461634e51f215d990be1a79b029c2e5c315 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 13:07:30 +0700
Subject: [PATCH 02/43] add reusable 4 button main app

---
 src/App/Container/Components/MainApp/View.tsx | 87 +++++++++++--------
 .../VendorProfile/Component/General/View.tsx  |  7 +-
 2 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 97bf038..8c96a67 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -3,12 +3,10 @@ import React from "react";
 export const MainApp = ({
   title,
   children,
-  textDone = "",
-  textNew = "",
-  classNameDone = "bg-white hover:bg-gray-300 border border-gray-400 text-gray-800",
-  classNameNew = "focus:outline-none bg-blue-600 hover:bg-blue-800 text-white",
-  onActionOne = () => {},
-  onActionTwo = () => {},
+  onActionRefresh = () => {},
+  onActionDone = () => {},
+  onActionNew = () => {},
+  onActionPrimary = () => {},
 }) => {
   return (
     <div className="w-full h-full">
@@ -20,43 +18,60 @@ export const MainApp = ({
                 <span>{title}</span>
               </div>
               <div className="text-xs my-1 mr-6 flex flex-row items-center">
-                <div>
-                  <button className="my-0 mr-6">
+                {onActionRefresh.toString() !== "() => {}" && (
+                  <div onClick={onActionRefresh}>
+                    <button className="my-0 mr-6">
+                      <svg
+                        className="fill-current h-3 w-3 text-blue-800"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </div>
+                )}
+                {onActionPrimary.toString() !== "() => {}" && (
+                  <button
+                    className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500"
+                    onClick={onActionPrimary}
+                  >
                     <svg
-                      className="fill-current h-3 w-3"
+                      className="fill-current h-3 w-3 mr-2"
                       xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
+                      viewBox="0 0 18 18"
                     >
-                      <path
-                        fill="currentColor"
-                        d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
-                      ></path>
+                      <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
                     </svg>
+                    <span>Set Primary Data</span>
                   </button>
-                </div>
-                <button className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500">
-                  <svg
-                    className="fill-current h-3 w-3 mr-2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 18 18"
+                )}
+                {onActionDone.toString() !== "() => {}" && (
+                  <button
+                    className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-blue-800"
+                    onClick={onActionDone}
                   >
-                    <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
-                  </svg>
-                  <span>Set Primary Data</span>
-                </button>
-                <button className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-gray-700">
-                  Selesai
-                </button>
-                <button className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600">
-                  <svg
-                    className="fill-current w-3 mr-2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 5 5"
+                    Selesai
+                  </button>
+                )}
+                {onActionNew.toString() !== "() => {}" && (
+                  <button
+                    className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600"
+                    onClick={onActionNew}
                   >
-                    <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
-                  </svg>
-                  <span>Buat Entri Baru</span>
-                </button>
+                    <svg
+                      className="fill-current w-3 mr-2"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 5 5"
+                    >
+                      <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
+                    </svg>
+                    <span>Buat Entri Baru</span>
+                  </button>
+                )}
               </div>
             </td>
           </tr>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index 47a1713..f755564 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -4,7 +4,12 @@ import GeneralComponent from "./Component/General";
 
 const General = () => {
   return (
-    <MainApp title="PROFIL PERUSAHAAN">
+    <MainApp
+      title="PROFIL PERUSAHAAN"
+      onActionRefresh={() => alert("Ok")}
+      onActionDone={() => alert("Done")}
+      onActionNew={() => alert("New")}
+    >
       <GeneralComponent />
     </MainApp>
   );

From 28f31ed2287e2397d73a232ef354fbd270b7a565 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 14:13:03 +0700
Subject: [PATCH 03/43] add modal

---
 .../Component/General/Component/General.tsx   |  52 +-
 .../Component/General/Component/Modal.tsx     | 517 ++++++++++++++++++
 .../Component/General/Controller.tsx          | 213 ++++++++
 .../VendorProfile/Component/General/View.tsx  |  11 +-
 4 files changed, 773 insertions(+), 20 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 3b5f13a..9653fe6 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -1,21 +1,49 @@
-import React from "react";
+import React, { useContext } from "react";
 import Table from "./Table";
+import { Modal } from "../../../../../../Components";
+import { GeneralContext } from "../Controller";
+import { MainApp } from "../../../../../../Components";
+import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
+  const { open, setOpen } = useContext(GeneralContext);
+
   return (
-    <div className="flex flex-col">
-      <div className="w-full flex flex-col w-4/5 bg-white text-sm">
-        <div className="flex flex-row py-6">
-          <label className="w-1/5 text-right px-4 font-bold">
-            Nama Perusahaan
-          </label>
-          <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
-        </div>
-        <div>
-          <Table />
+    <MainApp
+      title="PROFIL PERUSAHAAN"
+      onActionRefresh={() => alert("Ok")}
+      onActionDone={() => alert("Done")}
+      onActionNew={() => setOpen(true)}
+    >
+      <div className="flex flex-col">
+        <div className="w-full flex flex-col w-4/5 bg-white text-sm">
+          <div className="flex flex-row py-6">
+            <label className="w-1/5 text-right px-4 font-bold">
+              Nama Perusahaan
+            </label>
+            <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
+          </div>
+          <div>
+            <Table />
+          </div>
         </div>
+        <Modal
+          title="Perusahaan"
+          open={open}
+          width="w-3/5"
+          onClose={() => {
+            setOpen(false);
+          }}
+          onActionOne={() => {
+            setOpen(false);
+          }}
+          textOne="Batal"
+          textTwo="Simpan"
+        >
+          <ModalComponent />
+        </Modal>
       </div>
-    </div>
+    </MainApp>
   );
 };
 
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
new file mode 100644
index 0000000..8b412cb
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -0,0 +1,517 @@
+import React, { useContext } from "react";
+import { ErrorMessage } from "react-hook-form";
+import Select from "react-select";
+import { GeneralContext } from "../Controller";
+
+const ModalComponent = () => {
+  const {
+    customStyles,
+    register,
+    errors,
+    setBranchName,
+    setAddress,
+    country,
+    setCountry,
+    province,
+    setProvince,
+    city,
+    setCity,
+    setSubDistrict,
+    setPostalCode,
+    setPhoneNumber,
+    setPhoneNumberExt,
+    setFaxNumber,
+    setFaxNumberExt,
+    setCompanyEmail,
+    optionsCompanyType,
+    Indonesia,
+    Yogya,
+    Sleman,
+  } = useContext(GeneralContext);
+
+  return (
+    <div className="bg-white">
+      <div className="block text-xs">
+        <div className="py-1 px-4 mt-6">
+          <span className="text-gray-900 text-2xl">Use as Branch Office</span>
+        </div>
+        <form>
+          <div className="w-full">
+            <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nama Cabang/Lokasi Cabang</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="branchName"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setBranchName(val.target.value)}
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Nama Cabang/Lokasi Cabang"
+                    />
+                    <ErrorMessage errors={errors} name="branchName">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Alamat</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <textarea
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Alamat"
+                      name="address"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setAddress(val.target.value)}
+                    />
+                    <ErrorMessage errors={errors} name="address">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Negara</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="country"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setCountry(val.value) : setCountry("")
+                      }
+                      options={optionsCompanyType}
+                      placeholder="Negara"
+                    />
+                    <ErrorMessage errors={errors} name="country">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Provinsi</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="province"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setProvince(val.value) : setProvince("")
+                      }
+                      options={country === "Indonesia" ? Indonesia : null}
+                      placeholder="Provinsi"
+                      isDisabled={country ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="province">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kota/Kabupaten</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="city"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      // value={Yogya.find((val) => val.value === city)}
+                      onChange={(val) =>
+                        val ? setCity(val.value) : setCity("")
+                      }
+                      options={Yogya}
+                      placeholder="Kota/Kabupaten"
+                      isDisabled={country && province ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="city">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kecamatan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="subDistrict"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setSubDistrict(val.value) : setSubDistrict("")
+                      }
+                      options={city === "Sleman" ? Sleman : null}
+                      placeholder="Kecamatan"
+                      isDisabled={country && province && city ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="subDistrict">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Kode Pos</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="number"
+                      name="postalCode"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setPostalCode(val.target.value)}
+                      className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Kode Pos"
+                    />
+                    <ErrorMessage errors={errors} name="postalCode">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+              </div>
+              {/* Right */}
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        name="phoneNumber"
+                        ref={register({
+                          required: "This is required",
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                          pattern: /^\+{1}[62]{2}[0-9]{1,20}$/i,
+                        })}
+                        onChange={(val) => setPhoneNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="+62xx-xxxxxxxxxxxx"
+                      />
+                      <ErrorMessage errors={errors} name="phoneNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                      <ErrorMessage errors={errors} name="phoneNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Faksimile</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        type="number"
+                        name="faxNumber"
+                        ref={register({
+                          required: "This is required",
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Nomor Faksimile"
+                      />
+                      <ErrorMessage errors={errors} name="faxNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        type="number"
+                        name="faxNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                      <ErrorMessage errors={errors} name="faxNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>E-mail Perusahaan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="companyEmail"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setCompanyEmail(val.target.value)}
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="me@example.com"
+                    />
+                    <ErrorMessage errors={errors} name="companyEmail">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ModalComponent;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
new file mode 100644
index 0000000..b3bce41
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -0,0 +1,213 @@
+import React, { createContext, useState } from "react";
+import { useForm } from "react-hook-form";
+import { getToken } from "../../../../../../Misc/Cookies";
+
+interface InitialState {
+  customStyles: object;
+  _isLogin: string | null;
+  open: boolean;
+  setOpen: Function;
+  register: Function;
+  handleSubmit: Function;
+  errors: object;
+  _onSubmit: Function;
+  optionsCompanyType: Array<object>;
+  Indonesia: Array<object>;
+  Yogya: Array<object>;
+  Sleman: Array<object>;
+  columns: Array<object>;
+  branchName: string;
+  address: string;
+  country: string;
+  province: string;
+  city: string;
+  subDistrict: string;
+  postalCode: string;
+  phoneNumber: string;
+  phoneNumberExt: string;
+  faxNumber: string;
+  faxNumberExt: string;
+  companyEmail: string;
+  setBranchName: Function;
+  setAddress: Function;
+  setCountry: Function;
+  setProvince: Function;
+  setCity: Function;
+  setSubDistrict: Function;
+  setPostalCode: Function;
+  setPhoneNumber: Function;
+  setPhoneNumberExt: Function;
+  setFaxNumber: Function;
+  setFaxNumberExt: Function;
+  setCompanyEmail: Function;
+}
+
+const initialState = {
+  customStyles: {},
+  _isLogin: null,
+  open: false,
+  setOpen: () => {},
+  register: () => {},
+  handleSubmit: () => {},
+  errors: {},
+  _onSubmit: () => {},
+  optionsCompanyType: [{}],
+  Indonesia: [{}],
+  Yogya: [{}],
+  Sleman: [{}],
+  columns: [{}],
+  branchName: "",
+  setBranchName: () => {},
+  address: "",
+  setAddress: () => {},
+  country: "",
+  setCountry: () => {},
+  province: "",
+  setProvince: () => {},
+  city: "",
+  setCity: () => {},
+  subDistrict: "",
+  setSubDistrict: () => {},
+  postalCode: "",
+  setPostalCode: () => {},
+  phoneNumber: "",
+  setPhoneNumber: () => {},
+  phoneNumberExt: "",
+  setPhoneNumberExt: () => {},
+  faxNumber: "",
+  setFaxNumber: () => {},
+  faxNumberExt: "",
+  setFaxNumberExt: () => {},
+  companyEmail: "",
+  setCompanyEmail: () => {},
+};
+
+export const GeneralContext = createContext<InitialState>(initialState);
+
+export const {
+  Provider: GeneralProvider,
+  Consumer: GeneralConsumer,
+} = GeneralContext;
+
+export const GeneralController = ({ children }) => {
+  const _isLogin = getToken();
+  const [open, setOpen] = useState(false);
+  const { register, handleSubmit, errors } = useForm({
+    validateCriteriaMode: "all",
+    mode: "onChange",
+  });
+  const [branchName, setBranchName] = useState("");
+  const [address, setAddress] = useState("");
+  const [country, setCountry] = useState("");
+  const [province, setProvince] = useState("");
+  const [city, setCity] = useState("");
+  const [subDistrict, setSubDistrict] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [phoneNumberExt, setPhoneNumberExt] = useState("");
+  const [faxNumber, setFaxNumber] = useState("");
+  const [faxNumberExt, setFaxNumberExt] = useState("");
+  const [companyEmail, setCompanyEmail] = useState("");
+  const _onSubmit = (value) => console.log("Validate", value);
+  const optionsCompanyType = [
+    {
+      label: "10 dari 255 (harap ketik untuk memfilter)",
+      isDisabled: true,
+    },
+    { value: "Indonesia", label: "Indonesia" },
+  ];
+  const Indonesia = [{ value: "Yogyakarta", label: "Yogyakarta" }];
+  const Yogya = [{ value: "Sleman", label: "Sleman" }];
+  const Sleman = [{ value: "Ngaglik", label: "Ngaglik" }];
+  const customStyles = {
+    control: (base) => ({
+      ...base,
+      height: 32,
+      minHeight: 32,
+    }),
+  };
+  const columns = [
+    {
+      label: "No",
+      accessor: "no",
+      width: "w-auto",
+      align: "text-center",
+    },
+    {
+      label: "Detail",
+      accessor: "detail",
+      width: "w-2/5",
+      align: "text-left",
+    },
+    {
+      label: "Data Saat Ini",
+      accessor: "oldData",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Data Baru",
+      accessor: "newData",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Status",
+      accessor: "status",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Aksi",
+      accessor: "aksi",
+      width: "w-auto",
+      align: "text-left",
+    },
+  ];
+
+  return (
+    <GeneralProvider
+      value={{
+        customStyles,
+        _isLogin,
+        open,
+        setOpen,
+        register,
+        handleSubmit,
+        errors,
+        _onSubmit,
+        optionsCompanyType,
+        Indonesia,
+        Yogya,
+        Sleman,
+        columns,
+        branchName,
+        address,
+        country,
+        province,
+        city,
+        subDistrict,
+        postalCode,
+        phoneNumber,
+        phoneNumberExt,
+        faxNumber,
+        faxNumberExt,
+        companyEmail,
+        setBranchName,
+        setAddress,
+        setCountry,
+        setProvince,
+        setCity,
+        setSubDistrict,
+        setPostalCode,
+        setPhoneNumber,
+        setPhoneNumberExt,
+        setFaxNumber,
+        setFaxNumberExt,
+        setCompanyEmail,
+      }}
+    >
+      {children}
+    </GeneralProvider>
+  );
+};
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index f755564..c7c1e5b 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -1,17 +1,12 @@
 import React from "react";
-import { MainApp } from "../../../../../Components";
 import GeneralComponent from "./Component/General";
+import { GeneralController } from "./Controller";
 
 const General = () => {
   return (
-    <MainApp
-      title="PROFIL PERUSAHAAN"
-      onActionRefresh={() => alert("Ok")}
-      onActionDone={() => alert("Done")}
-      onActionNew={() => alert("New")}
-    >
+    <GeneralController>
       <GeneralComponent />
-    </MainApp>
+    </GeneralController>
   );
 };
 

From 432cd210ebf8587422698b776a54e8a13387d25f Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 15:25:40 +0700
Subject: [PATCH 04/43] validate select

---
 .../Component/General/Component/General.tsx   |  10 +-
 .../Component/General/Component/Modal.tsx     | 271 +++++++++++------
 .../Component/General/Controller.tsx          | 285 ++++++++++++------
 .../Registration/Component/Registration.tsx   |   8 +-
 4 files changed, 370 insertions(+), 204 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 9653fe6..67e9f94 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -6,7 +6,9 @@ import { MainApp } from "../../../../../../Components";
 import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
-  const { open, setOpen } = useContext(GeneralContext);
+  const { open, setOpen, _handleOnSubmitSelect, handleSubmit } = useContext(
+    GeneralContext
+  );
 
   return (
     <MainApp
@@ -30,13 +32,17 @@ const GeneralComponent = () => {
         <Modal
           title="Perusahaan"
           open={open}
-          width="w-3/5"
+          width="w-3/4"
           onClose={() => {
             setOpen(false);
           }}
           onActionOne={() => {
             setOpen(false);
           }}
+          onActionTwo={async () => {
+            _handleOnSubmitSelect();
+            handleSubmit();
+          }}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 8b412cb..099ae54 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,13 +1,11 @@
 import React, { useContext } from "react";
-import { ErrorMessage } from "react-hook-form";
+import { ErrorMessage, useFormContext } from "react-hook-form";
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
 const ModalComponent = () => {
   const {
     customStyles,
-    register,
-    errors,
     setBranchName,
     setAddress,
     country,
@@ -16,7 +14,7 @@ const ModalComponent = () => {
     setProvince,
     city,
     setCity,
-    setSubDistrict,
+    setDistrict,
     setPostalCode,
     setPhoneNumber,
     setPhoneNumberExt,
@@ -27,7 +25,12 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
+    _onValidate,
+    register,
+    handleSubmit,
+    errors,
   } = useContext(GeneralContext);
+  const { errors: errorsSelect } = useFormContext();
 
   return (
     <div className="bg-white">
@@ -35,7 +38,7 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form>
+        <form onSubmit={handleSubmit(_onValidate())}>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">
@@ -62,6 +65,11 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="branchName">
                       {({ messages }) => {
                         return (
@@ -98,6 +106,11 @@ const ModalComponent = () => {
                       })}
                       onChange={(val) => setAddress(val.target.value)}
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="address">
                       {({ messages }) => {
                         return (
@@ -119,37 +132,25 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="country"
                       name="country"
                       isClearable
-                      ref={register({
-                        required: "This is required",
-                        minLength: {
-                          value: 8,
-                          message: "This inpus is less than 8 characters",
-                        },
-                        maxLength: {
-                          value: 30,
-                          message: "This inpus is more than 30 characters",
-                        },
-                      })}
                       onChange={(val) =>
                         val ? setCountry(val.value) : setCountry("")
                       }
                       options={optionsCompanyType}
                       placeholder="Negara"
                     />
-                    <ErrorMessage errors={errors} name="country">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -159,6 +160,7 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="province"
                       name="province"
                       isClearable
                       ref={register({
@@ -179,18 +181,16 @@ const ModalComponent = () => {
                       placeholder="Provinsi"
                       isDisabled={country ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="province">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -200,6 +200,7 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="city"
                       name="city"
                       isClearable
                       ref={register({
@@ -221,18 +222,16 @@ const ModalComponent = () => {
                       placeholder="Kota/Kabupaten"
                       isDisabled={country && province ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="city">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -242,7 +241,8 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
-                      name="subDistrict"
+                      className="district"
+                      name="district"
                       isClearable
                       ref={register({
                         required: "This is required",
@@ -256,24 +256,22 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) =>
-                        val ? setSubDistrict(val.value) : setSubDistrict("")
+                        val ? setDistrict(val.value) : setDistrict("")
                       }
                       options={city === "Sleman" ? Sleman : null}
                       placeholder="Kecamatan"
                       isDisabled={country && province && city ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="subDistrict">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -287,18 +285,27 @@ const ModalComponent = () => {
                       ref={register({
                         required: "This is required",
                         minLength: {
-                          value: 8,
-                          message: "This inpus is less than 8 characters",
+                          value: 5,
+                          message: "This input is less than 5 characters",
                         },
                         maxLength: {
-                          value: 30,
-                          message: "This inpus is more than 30 characters",
+                          value: 5,
+                          message: "This input is more than 5 characters",
+                        },
+                        pattern: {
+                          value: /^\d+$/,
+                          message: "This input is number 0-9",
                         },
                       })}
                       onChange={(val) => setPostalCode(val.target.value)}
                       className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="Kode Pos"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="postalCode">
                       {({ messages }) => {
                         return (
@@ -327,19 +334,53 @@ const ModalComponent = () => {
                         ref={register({
                           required: "This is required",
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g,
+                            message: "This input is number 0-9",
                           },
-                          pattern: /^\+{1}[62]{2}[0-9]{1,20}$/i,
                         })}
                         onChange={(val) => setPhoneNumber(val.target.value)}
                         className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
                       <ErrorMessage errors={errors} name="phoneNumber">
                         {({ messages }) => {
                           return (
@@ -357,22 +398,6 @@ const ModalComponent = () => {
                       </ErrorMessage>
                     </div>
                     <div className="w-2/5 flex-col">
-                      <input
-                        name="phoneNumberExt"
-                        ref={register({
-                          minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
-                          },
-                          maxLength: {
-                            value: 30,
-                            message: "This inpus is more than 30 characters",
-                          },
-                        })}
-                        onChange={(val) => setPhoneNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
-                        placeholder="Ext."
-                      />
                       <ErrorMessage errors={errors} name="phoneNumberExt">
                         {({ messages }) => {
                           return (
@@ -401,14 +426,17 @@ const ModalComponent = () => {
                         type="number"
                         name="faxNumber"
                         ref={register({
-                          required: "This is required",
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
@@ -437,12 +465,16 @@ const ModalComponent = () => {
                         name="faxNumberExt"
                         ref={register({
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
@@ -467,6 +499,45 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <ErrorMessage errors={errors} name="faxNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <ErrorMessage errors={errors} name="faxNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
@@ -490,6 +561,11 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="me@example.com"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="companyEmail">
                       {({ messages }) => {
                         return (
@@ -507,7 +583,6 @@ const ModalComponent = () => {
               </div>
             </div>
           </div>
-          <hr />
         </form>
       </div>
     </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index b3bce41..f460419 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useState } from "react";
-import { useForm } from "react-hook-form";
+import React, { createContext, useState, useEffect } from "react";
+import { useForm, FormContext } from "react-hook-form";
 import { getToken } from "../../../../../../Misc/Cookies";
 
 interface InitialState {
@@ -7,21 +7,18 @@ interface InitialState {
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  register: Function;
-  handleSubmit: Function;
-  errors: object;
+  registerSelect: Function;
   _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
   Yogya: Array<object>;
   Sleman: Array<object>;
-  columns: Array<object>;
   branchName: string;
   address: string;
   country: string;
   province: string;
   city: string;
-  subDistrict: string;
+  district: string;
   postalCode: string;
   phoneNumber: string;
   phoneNumberExt: string;
@@ -33,13 +30,22 @@ interface InitialState {
   setCountry: Function;
   setProvince: Function;
   setCity: Function;
-  setSubDistrict: Function;
+  setDistrict: Function;
   setPostalCode: Function;
   setPhoneNumber: Function;
   setPhoneNumberExt: Function;
   setFaxNumber: Function;
   setFaxNumberExt: Function;
   setCompanyEmail: Function;
+  _handleCountry: Function;
+  _handleProvince: Function;
+  _handleCity: Function;
+  _onValidate: Function;
+  _handleDistrict: Function;
+  _handleOnSubmitSelect: Function;
+  register: Function;
+  handleSubmit: Function;
+  errors: object;
 }
 
 const initialState = {
@@ -47,15 +53,12 @@ const initialState = {
   _isLogin: null,
   open: false,
   setOpen: () => {},
-  register: () => {},
-  handleSubmit: () => {},
-  errors: {},
+  registerSelect: () => {},
   _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
   Yogya: [{}],
   Sleman: [{}],
-  columns: [{}],
   branchName: "",
   setBranchName: () => {},
   address: "",
@@ -66,8 +69,8 @@ const initialState = {
   setProvince: () => {},
   city: "",
   setCity: () => {},
-  subDistrict: "",
-  setSubDistrict: () => {},
+  district: "",
+  setDistrict: () => {},
   postalCode: "",
   setPostalCode: () => {},
   phoneNumber: "",
@@ -80,6 +83,15 @@ const initialState = {
   setFaxNumberExt: () => {},
   companyEmail: "",
   setCompanyEmail: () => {},
+  _handleCountry: () => {},
+  _handleProvince: () => {},
+  _handleCity: () => {},
+  _handleDistrict: () => {},
+  _onValidate: () => {},
+  _handleOnSubmitSelect: () => {},
+  register: () => {},
+  handleSubmit: () => {},
+  errors: {},
 };
 
 export const GeneralContext = createContext<InitialState>(initialState);
@@ -92,22 +104,19 @@ export const {
 export const GeneralController = ({ children }) => {
   const _isLogin = getToken();
   const [open, setOpen] = useState(false);
-  const { register, handleSubmit, errors } = useForm({
-    validateCriteriaMode: "all",
-    mode: "onChange",
-  });
   const [branchName, setBranchName] = useState("");
   const [address, setAddress] = useState("");
   const [country, setCountry] = useState("");
   const [province, setProvince] = useState("");
   const [city, setCity] = useState("");
-  const [subDistrict, setSubDistrict] = useState("");
+  const [district, setDistrict] = useState("");
   const [postalCode, setPostalCode] = useState("");
   const [phoneNumber, setPhoneNumber] = useState("");
   const [phoneNumberExt, setPhoneNumberExt] = useState("");
   const [faxNumber, setFaxNumber] = useState("");
   const [faxNumberExt, setFaxNumberExt] = useState("");
   const [companyEmail, setCompanyEmail] = useState("");
+
   const _onSubmit = (value) => console.log("Validate", value);
   const optionsCompanyType = [
     {
@@ -126,88 +135,164 @@ export const GeneralController = ({ children }) => {
       minHeight: 32,
     }),
   };
-  const columns = [
-    {
-      label: "No",
-      accessor: "no",
-      width: "w-auto",
-      align: "text-center",
-    },
-    {
-      label: "Detail",
-      accessor: "detail",
-      width: "w-2/5",
-      align: "text-left",
-    },
-    {
-      label: "Data Saat Ini",
-      accessor: "oldData",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Data Baru",
-      accessor: "newData",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Status",
-      accessor: "status",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Aksi",
-      accessor: "aksi",
-      width: "w-auto",
-      align: "text-left",
-    },
-  ];
+
+  const { register, handleSubmit, errors } = useForm({
+    validateCriteriaMode: "all",
+    mode: "onChange",
+  });
+  // FormContext
+  const methods = useForm({
+    mode: "onChange",
+  });
+  const { register: registerSelect, setValue, triggerValidation } = methods;
+
+  useEffect(() => {
+    registerSelect(
+      { name: "business_type" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "country" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "province" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "city" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "district" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  const _handleCountry = (e: any) => {
+    setCountry(e && e.value);
+    setValue("country", e && e.value);
+    triggerValidation("country");
+  };
+
+  const _handleProvince = (e: any) => {
+    setProvince(e && e.value);
+    setValue("province", e && e.value);
+    triggerValidation("province");
+  };
+
+  const _handleCity = (e: any) => {
+    setCity(e && e.value);
+    setValue("city", e && e.value);
+    triggerValidation("city");
+  };
+
+  const _handleDistrict = (e: any) => {
+    setDistrict(e && e.value);
+    setValue("district", e && e.value);
+    triggerValidation("district");
+  };
+
+  const val = ["business_type", "country", "province", "city", "district"];
+
+  const _handleOnSubmitSelect = async () => {
+    if (await triggerValidation(val)) {
+      console.log("Sukses");
+    } else {
+      console.log("Gagal");
+    }
+  };
+
+  const _onValidate = async () => console.log("validation");
 
   return (
-    <GeneralProvider
-      value={{
-        customStyles,
-        _isLogin,
-        open,
-        setOpen,
-        register,
-        handleSubmit,
-        errors,
-        _onSubmit,
-        optionsCompanyType,
-        Indonesia,
-        Yogya,
-        Sleman,
-        columns,
-        branchName,
-        address,
-        country,
-        province,
-        city,
-        subDistrict,
-        postalCode,
-        phoneNumber,
-        phoneNumberExt,
-        faxNumber,
-        faxNumberExt,
-        companyEmail,
-        setBranchName,
-        setAddress,
-        setCountry,
-        setProvince,
-        setCity,
-        setSubDistrict,
-        setPostalCode,
-        setPhoneNumber,
-        setPhoneNumberExt,
-        setFaxNumber,
-        setFaxNumberExt,
-        setCompanyEmail,
-      }}
-    >
-      {children}
-    </GeneralProvider>
+    <FormContext {...methods}>
+      <GeneralProvider
+        value={{
+          customStyles,
+          _isLogin,
+          open,
+          setOpen,
+          registerSelect,
+          _onSubmit,
+          optionsCompanyType,
+          Indonesia,
+          Yogya,
+          Sleman,
+          branchName,
+          address,
+          country,
+          province,
+          city,
+          district,
+          postalCode,
+          phoneNumber,
+          phoneNumberExt,
+          faxNumber,
+          faxNumberExt,
+          companyEmail,
+          setBranchName,
+          setAddress,
+          setCountry,
+          setProvince,
+          setCity,
+          setDistrict,
+          setPostalCode,
+          setPhoneNumber,
+          setPhoneNumberExt,
+          setFaxNumber,
+          setFaxNumberExt,
+          setCompanyEmail,
+          _handleCountry,
+          _handleProvince,
+          _handleCity,
+          _handleDistrict,
+          _onValidate,
+          _handleOnSubmitSelect,
+          register,
+          handleSubmit,
+          errors,
+        }}
+      >
+        {children}
+      </GeneralProvider>
+    </FormContext>
   );
 };
diff --git a/src/App/Container/Views/Public/Registration/Component/Registration.tsx b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
index d8675f7..97a98a6 100644
--- a/src/App/Container/Views/Public/Registration/Component/Registration.tsx
+++ b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
@@ -553,12 +553,12 @@ const RegistrationComponent = () => {
                     ref={register({
                       required: "This is required",
                       minLength: {
-                        value: 4,
-                        message: "This input is less than 4 characters",
+                        value: 5,
+                        message: "This input is less than 5 characters",
                       },
                       maxLength: {
-                        value: 30,
-                        message: "This input is more than 30 characters",
+                        value: 5,
+                        message: "This input is more than 5 characters",
                       },
                       pattern: {
                         value: /^\d+$/,

From 0a5f1b72a4e3df8e04374a678f2c97883b525b8d Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 16:15:22 +0700
Subject: [PATCH 05/43] validation form

---
 .../Component/General/Component/General.tsx   |  11 +-
 .../Component/General/Component/Modal.tsx     | 123 ++++++++----------
 .../Component/General/Controller.tsx          |   4 +-
 3 files changed, 61 insertions(+), 77 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 67e9f94..924007e 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -32,17 +32,18 @@ const GeneralComponent = () => {
         <Modal
           title="Perusahaan"
           open={open}
-          width="w-3/4"
+          width="w-4/5"
           onClose={() => {
             setOpen(false);
           }}
           onActionOne={() => {
             setOpen(false);
           }}
-          onActionTwo={async () => {
-            _handleOnSubmitSelect();
-            handleSubmit();
-          }}
+          // onActionTwo={async () => {
+          //   _handleOnSubmitSelect();
+          //   // handleSubmit();
+          // }}
+          onActionTwo={handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 099ae54..c1bbb93 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -29,6 +29,7 @@ const ModalComponent = () => {
     register,
     handleSubmit,
     errors,
+    _handleOnSubmitSelect,
   } = useContext(GeneralContext);
   const { errors: errorsSelect } = useFormContext();
 
@@ -38,12 +39,12 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form onSubmit={handleSubmit(_onValidate())}>
+        <form>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full leading-none sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nama Cabang/Lokasi Cabang</label>
                   </div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
@@ -62,12 +63,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setBranchName(val.target.value)}
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="branchName">
@@ -75,7 +76,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -84,13 +88,13 @@ const ModalComponent = () => {
                     </ErrorMessage>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Alamat</label>
                   </div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <textarea
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
                       ref={register({
@@ -108,7 +112,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="address">
@@ -116,7 +120,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -125,7 +132,7 @@ const ModalComponent = () => {
                     </ErrorMessage>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Negara</label>
                   </div>
@@ -143,7 +150,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -153,7 +160,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Provinsi</label>
                   </div>
@@ -183,7 +190,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -193,7 +200,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Kota/Kabupaten</label>
                   </div>
@@ -224,7 +231,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -234,7 +241,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Kecamatan</label>
                   </div>
@@ -264,7 +271,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -274,7 +281,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Kode Pos</label>
                   </div>
@@ -298,12 +305,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setPostalCode(val.target.value)}
-                      className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full rounded bg-white border border-gray-400 hover:border-gray-500 py-1 px-2 no-arrow"
                       placeholder="Kode Pos"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="postalCode">
@@ -311,7 +318,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -323,7 +333,7 @@ const ModalComponent = () => {
               </div>
               {/* Right */}
               <div className="w-full py-4">
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nomor Telepon</label>
                   </div>
@@ -347,7 +357,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setPhoneNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
                     </div>
@@ -369,16 +379,14 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setPhoneNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
-                    <label>Nomor Telepon</label>
-                  </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
                       <ErrorMessage errors={errors} name="phoneNumber">
@@ -388,7 +396,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -405,7 +413,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -416,7 +424,7 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nomor Faksimile</label>
                   </div>
@@ -440,24 +448,9 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Nomor Faksimile"
                       />
-                      <ErrorMessage errors={errors} name="faxNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
                     </div>
                     <div className="w-2/5 flex-col">
                       <input
@@ -478,28 +471,13 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
-                      <ErrorMessage errors={errors} name="faxNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
@@ -510,7 +488,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -527,7 +505,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -538,7 +516,7 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
                   </div>
@@ -558,12 +536,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setCompanyEmail(val.target.value)}
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="me@example.com"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="companyEmail">
@@ -571,7 +549,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index f460419..a04dfef 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -240,7 +240,9 @@ export const GeneralController = ({ children }) => {
     }
   };
 
-  const _onValidate = async () => console.log("validation");
+  const _onValidate = async () => {
+    console.log("validation");
+  };
 
   return (
     <FormContext {...methods}>

From 8590840dab978be7e3819453adbb9a58e11d45b4 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 17:26:30 +0700
Subject: [PATCH 06/43] validation all

---
 .../Component/General/Component/General.tsx   |  10 +-
 .../Component/General/Component/Modal.tsx     | 201 ++++++------------
 .../Component/General/Component/Query.tsx     |   7 +
 .../Component/General/Controller.tsx          |  15 +-
 4 files changed, 86 insertions(+), 147 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 924007e..d74b6bf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -39,11 +39,11 @@ const GeneralComponent = () => {
           onActionOne={() => {
             setOpen(false);
           }}
-          // onActionTwo={async () => {
-          //   _handleOnSubmitSelect();
-          //   // handleSubmit();
-          // }}
-          onActionTwo={handleSubmit()}
+          onActionTwo={async () => {
+            _handleOnSubmitSelect();
+            // handleSubmit();
+          }}
+          // onActionTwo={handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index c1bbb93..f96d2e8 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -25,13 +25,11 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
-    _onValidate,
-    register,
-    handleSubmit,
-    errors,
-    _handleOnSubmitSelect,
+    registerSelect,
+    // errors,
   } = useContext(GeneralContext);
-  const { errors: errorsSelect } = useFormContext();
+  // const { errors: errorsSelect } = useFormContext();
+  const { errors } = useFormContext();
 
   return (
     <div className="bg-white">
@@ -51,7 +49,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -71,21 +69,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="branchName">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.branchName && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.branchName && errors.branchName.message}
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
@@ -97,7 +85,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -115,21 +103,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="address">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.address && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.address && errors.address.message}
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
@@ -153,7 +131,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -170,7 +148,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -193,7 +171,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -210,7 +188,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -234,7 +212,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -251,7 +229,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -274,7 +252,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -289,7 +267,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -313,21 +291,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="postalCode">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.postalCode && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.postalCode && errors.postalCode.message}
+                      </p>
+                    )}
                   </div>
                 </div>
               </div>
@@ -341,7 +309,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={register({
+                        ref={registerSelect({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -364,7 +332,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -389,38 +357,19 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="phoneNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.phoneNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumber && errors.phoneNumber.message}
+                        </p>
+                      )}
                     </div>
                     <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="phoneNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.phoneNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumberExt &&
+                            errors.phoneNumberExt.message}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -433,7 +382,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -456,7 +405,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -481,38 +430,18 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="faxNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.faxNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumber && errors.faxNumber.message}
+                        </p>
+                      )}
                     </div>
                     <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="faxNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.faxNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumberExt && errors.faxNumberExt.message}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -524,7 +453,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -544,21 +473,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="companyEmail">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.companyEmail && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.companyEmail && errors.companyEmail.message}
+                      </p>
+                    )}
                   </div>
                 </div>
               </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
new file mode 100644
index 0000000..4015911
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Query = () => {
+  return <div>Isi Query</div>;
+};
+
+export default Query;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index a04dfef..0e65268 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -230,7 +230,20 @@ export const GeneralController = ({ children }) => {
     triggerValidation("district");
   };
 
-  const val = ["business_type", "country", "province", "city", "district"];
+  const val = [
+    "branchName",
+    "address",
+    "postalCode",
+    "country",
+    "province",
+    "city",
+    "district",
+    "phoneNumber",
+    "phoneNumberExt",
+    "faxNumber",
+    "faxNumberExt",
+    "companyEmail",
+  ];
 
   const _handleOnSubmitSelect = async () => {
     if (await triggerValidation(val)) {

From 9e12567aea41e597a61d74894607ac7d5e8e7212 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 17:32:36 +0700
Subject: [PATCH 07/43] validation fix

---
 .../Component/General/Component/General.tsx   | 10 +----
 .../Component/General/Component/Modal.tsx     | 30 ++++++-------
 .../Component/General/Controller.tsx          | 45 +++++++------------
 3 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index d74b6bf..c7d506a 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -6,9 +6,7 @@ import { MainApp } from "../../../../../../Components";
 import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
-  const { open, setOpen, _handleOnSubmitSelect, handleSubmit } = useContext(
-    GeneralContext
-  );
+  const { open, setOpen, _handleSubmit } = useContext(GeneralContext);
 
   return (
     <MainApp
@@ -39,11 +37,7 @@ const GeneralComponent = () => {
           onActionOne={() => {
             setOpen(false);
           }}
-          onActionTwo={async () => {
-            _handleOnSubmitSelect();
-            // handleSubmit();
-          }}
-          // onActionTwo={handleSubmit()}
+          onActionTwo={async () => _handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index f96d2e8..c9f9175 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { ErrorMessage, useFormContext } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
@@ -25,7 +25,7 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
-    registerSelect,
+    register,
     // errors,
   } = useContext(GeneralContext);
   // const { errors: errorsSelect } = useFormContext();
@@ -49,7 +49,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -85,7 +85,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -148,7 +148,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -188,7 +188,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -229,7 +229,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -267,7 +267,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -309,7 +309,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={registerSelect({
+                        ref={register({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -332,7 +332,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -382,7 +382,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -397,7 +397,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
                         placeholder="Nomor Faksimile"
                       />
                     </div>
@@ -405,7 +405,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -420,7 +420,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
                         placeholder="Ext."
                       />
                     </div>
@@ -453,7 +453,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index 0e65268..d994aeb 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -7,7 +7,6 @@ interface InitialState {
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  registerSelect: Function;
   _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
@@ -42,10 +41,8 @@ interface InitialState {
   _handleCity: Function;
   _onValidate: Function;
   _handleDistrict: Function;
-  _handleOnSubmitSelect: Function;
+  _handleSubmit: Function;
   register: Function;
-  handleSubmit: Function;
-  errors: object;
 }
 
 const initialState = {
@@ -53,7 +50,7 @@ const initialState = {
   _isLogin: null,
   open: false,
   setOpen: () => {},
-  registerSelect: () => {},
+  register: () => {},
   _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
@@ -88,10 +85,7 @@ const initialState = {
   _handleCity: () => {},
   _handleDistrict: () => {},
   _onValidate: () => {},
-  _handleOnSubmitSelect: () => {},
-  register: () => {},
-  handleSubmit: () => {},
-  errors: {},
+  _handleSubmit: () => {},
 };
 
 export const GeneralContext = createContext<InitialState>(initialState);
@@ -136,18 +130,14 @@ export const GeneralController = ({ children }) => {
     }),
   };
 
-  const { register, handleSubmit, errors } = useForm({
-    validateCriteriaMode: "all",
-    mode: "onChange",
-  });
   // FormContext
   const methods = useForm({
     mode: "onChange",
   });
-  const { register: registerSelect, setValue, triggerValidation } = methods;
+  const { register, setValue, triggerValidation } = methods;
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "business_type" },
       {
         required: true,
@@ -156,10 +146,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "country" },
       {
         required: true,
@@ -168,10 +158,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "province" },
       {
         required: true,
@@ -180,10 +170,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "city" },
       {
         required: true,
@@ -192,10 +182,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "district" },
       {
         required: true,
@@ -204,7 +194,7 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   const _handleCountry = (e: any) => {
     setCountry(e && e.value);
@@ -245,7 +235,7 @@ export const GeneralController = ({ children }) => {
     "companyEmail",
   ];
 
-  const _handleOnSubmitSelect = async () => {
+  const _handleSubmit = async () => {
     if (await triggerValidation(val)) {
       console.log("Sukses");
     } else {
@@ -265,7 +255,6 @@ export const GeneralController = ({ children }) => {
           _isLogin,
           open,
           setOpen,
-          registerSelect,
           _onSubmit,
           optionsCompanyType,
           Indonesia,
@@ -300,10 +289,8 @@ export const GeneralController = ({ children }) => {
           _handleCity,
           _handleDistrict,
           _onValidate,
-          _handleOnSubmitSelect,
+          _handleSubmit,
           register,
-          handleSubmit,
-          errors,
         }}
       >
         {children}

From c12f307d8037f6a2e99d752312b3470c4f7cb888 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:48:57 +0700
Subject: [PATCH 08/43] add modal & validation form new entry

---
 .../Component/General/Component/Modal.tsx     |  38 ++-
 .../Component/General/Component/Query.tsx     |   7 -
 .../Component/General/Component/Table.tsx     | 261 ++++++++++--------
 .../Component/General/Controller.tsx          |  45 ++-
 .../VendorProfile/Component/General/Query.ts  |  49 ++++
 .../Private/VendorProfile/Controller.tsx      |  28 +-
 6 files changed, 288 insertions(+), 140 deletions(-)
 delete mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index c9f9175..edb6faf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -20,15 +20,14 @@ const ModalComponent = () => {
     setPhoneNumberExt,
     setFaxNumber,
     setFaxNumberExt,
+    setWebsite,
     setCompanyEmail,
     optionsCompanyType,
     Indonesia,
     Yogya,
     Sleman,
     register,
-    // errors,
   } = useContext(GeneralContext);
-  // const { errors: errorsSelect } = useFormContext();
   const { errors } = useFormContext();
 
   return (
@@ -445,6 +444,41 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Situs</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="website"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setWebsite(val.target.value)}
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                      placeholder="example.com"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.website && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.website && errors.website.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
deleted file mode 100644
index 4015911..0000000
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const Query = () => {
-  return <div>Isi Query</div>;
-};
-
-export default Query;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
index fa1398c..5ec0db4 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import "../../../../../../Assets/Css/App.css";
+import { HomeContext } from "../../../Controller";
 
 const Table = () => {
+  const { generalList } = useContext(HomeContext);
+  console.log("CEK", generalList);
+
   return (
     <div>
       <table className="w-full">
@@ -27,115 +31,152 @@ const Table = () => {
             </th>
           </tr>
         </thead>
-        <tbody>
-          <tr className="hover:bg-gray-200">
-            <td
-              className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
-              rowSpan={13}
-            >
-              1.
-            </td>
-            <td className="border border-gray-400 py-1 px-4">
-              Nama Perusahaan
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4">Dipersiapkan</td>
-            <td
-              className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
-              rowSpan={13}
-            >
-              <button
-                title="Ubah Perusahaan"
-                // onClick={() => controller.setOpen(true)}
-              >
-                <svg
-                  className="fill-current text-blue-700 w-3 h-3"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 576 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-                  ></path>
-                </svg>
-              </button>
-            </td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              Kategori Lokasi
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Negara</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Provinsi</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kota</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kecamatan</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">alamat</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Nomor Telepon</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              Nomor Faksimile
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Situs</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              E-mail Perusahaan
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <td className="border border-gray-400 py-1 px-4" colSpan={4}></td>
-        </tbody>
+        {generalList && Object.keys(generalList)}
+        {/* <tbody>
+          {generalList &&
+            generalList.map((e: any, i: any) => (
+              <Fragment key={i}>
+                <tr className="hover:bg-gray-200">
+                  <td
+                    className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
+                    rowSpan={13}
+                  >
+                    {i + 1}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nama Perusahaan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.companyName}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    Dipersiapkan
+                  </td>
+                  <td
+                    className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
+                    rowSpan={13}
+                  >
+                    <button
+                      title="Ubah Perusahaan"
+                      // onClick={() => controller.setOpen(true)}
+                    >
+                      <svg
+                        className="fill-current text-blue-700 w-3 h-3"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 576 512"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Kategori Lokasi
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.address}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Negara</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.county}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Provinsi</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.province}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Kota</td>
+                  <td className="border border-gray-400 py-1 px-4">{e.city}</td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Kecamatan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.district}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.postalCode}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">alamat</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.address}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nomor Telepon
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.phoneNumber}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nomor Faksimile
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.faxNumber}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Situs</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.website}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    E-mail Perusahaan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.eMail}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <td
+                  className="border border-gray-400 py-1 px-4"
+                  colSpan={4}
+                ></td>
+              </Fragment>
+            ))}
+        </tbody> */}
       </table>
     </div>
   );
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index d994aeb..9e515a6 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -1,13 +1,14 @@
 import React, { createContext, useState, useEffect } from "react";
 import { useForm, FormContext } from "react-hook-form";
 import { getToken } from "../../../../../../Misc/Cookies";
+import { INSERT_VENDOR_CONTACT } from "./Query";
+import { useMutation } from "react-apollo";
 
 interface InitialState {
   customStyles: object;
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
   Yogya: Array<object>;
@@ -23,6 +24,7 @@ interface InitialState {
   phoneNumberExt: string;
   faxNumber: string;
   faxNumberExt: string;
+  website: string;
   companyEmail: string;
   setBranchName: Function;
   setAddress: Function;
@@ -36,10 +38,10 @@ interface InitialState {
   setFaxNumber: Function;
   setFaxNumberExt: Function;
   setCompanyEmail: Function;
+  setWebsite: Function;
   _handleCountry: Function;
   _handleProvince: Function;
   _handleCity: Function;
-  _onValidate: Function;
   _handleDistrict: Function;
   _handleSubmit: Function;
   register: Function;
@@ -51,7 +53,6 @@ const initialState = {
   open: false,
   setOpen: () => {},
   register: () => {},
-  _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
   Yogya: [{}],
@@ -80,11 +81,12 @@ const initialState = {
   setFaxNumberExt: () => {},
   companyEmail: "",
   setCompanyEmail: () => {},
+  website: "",
+  setWebsite: () => {},
   _handleCountry: () => {},
   _handleProvince: () => {},
   _handleCity: () => {},
   _handleDistrict: () => {},
-  _onValidate: () => {},
   _handleSubmit: () => {},
 };
 
@@ -109,9 +111,9 @@ export const GeneralController = ({ children }) => {
   const [phoneNumberExt, setPhoneNumberExt] = useState("");
   const [faxNumber, setFaxNumber] = useState("");
   const [faxNumberExt, setFaxNumberExt] = useState("");
+  const [website, setWebsite] = useState("");
   const [companyEmail, setCompanyEmail] = useState("");
 
-  const _onSubmit = (value) => console.log("Validate", value);
   const optionsCompanyType = [
     {
       label: "10 dari 255 (harap ketik untuk memfilter)",
@@ -223,30 +225,47 @@ export const GeneralController = ({ children }) => {
   const val = [
     "branchName",
     "address",
-    "postalCode",
     "country",
     "province",
     "city",
     "district",
+    "postalCode",
     "phoneNumber",
     "phoneNumberExt",
     "faxNumber",
     "faxNumberExt",
+    "website",
     "companyEmail",
   ];
 
+  // Add
+  const [submitAdd] = useMutation(INSERT_VENDOR_CONTACT, {
+    errorPolicy: "all",
+  });
+
   const _handleSubmit = async () => {
     if (await triggerValidation(val)) {
-      console.log("Sukses");
+      try {
+        await submitAdd({
+          variables: {
+            company_name: branchName,
+            address,
+            country,
+            province,
+            city,
+            district,
+            postal_code: postalCode,
+            phone_number: phoneNumber,
+            website,
+            e_mail: companyEmail,
+          },
+        });
+      } catch (error) {}
     } else {
       console.log("Gagal");
     }
   };
 
-  const _onValidate = async () => {
-    console.log("validation");
-  };
-
   return (
     <FormContext {...methods}>
       <GeneralProvider
@@ -255,7 +274,6 @@ export const GeneralController = ({ children }) => {
           _isLogin,
           open,
           setOpen,
-          _onSubmit,
           optionsCompanyType,
           Indonesia,
           Yogya,
@@ -271,6 +289,7 @@ export const GeneralController = ({ children }) => {
           phoneNumberExt,
           faxNumber,
           faxNumberExt,
+          website,
           companyEmail,
           setBranchName,
           setAddress,
@@ -284,11 +303,11 @@ export const GeneralController = ({ children }) => {
           setFaxNumber,
           setFaxNumberExt,
           setCompanyEmail,
+          setWebsite,
           _handleCountry,
           _handleProvince,
           _handleCity,
           _handleDistrict,
-          _onValidate,
           _handleSubmit,
           register,
         }}
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
new file mode 100644
index 0000000..e563fb6
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
@@ -0,0 +1,49 @@
+import gql from "graphql-tag";
+
+export const GENERAL_LIST = gql`
+  {
+    GetVendorContacts {
+      id
+      companyName
+      address
+      county
+      province
+      city
+      district
+      phoneNumber
+      faxNumber
+      website
+      eMail
+    }
+  }
+`;
+
+export const INSERT_VENDOR_CONTACT = gql`
+  mutation(
+    $company_name: String
+    $address: String
+    $country: String
+    $province: String
+    $city: String
+    $district: String
+    $postal_code: Int
+    $phone_number: String
+    $website: String
+    $e_mail: String
+  ) {
+    InsertVendorContact(
+      data: {
+        company_name: $company_name
+        address: $address
+        country: $country
+        province: $province
+        city: $city
+        district: $district
+        postal_code: $postal_code
+        phone_number: $phone_number
+        website: $website
+        e_mail: $e_mail
+      }
+    )
+  }
+`;
diff --git a/src/App/Container/Views/Private/VendorProfile/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
index 60bdce9..f809a34 100644
--- a/src/App/Container/Views/Private/VendorProfile/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
@@ -1,9 +1,21 @@
-import React from 'react'
-
-export const HomeController = () => {
-    return (
-        <div>
-            Home Controller
-        </div>
-    )
+import React, { createContext } from "react";
+import { useQuery } from "react-apollo";
+import { GENERAL_LIST } from "../VendorProfile/Component/General/Query";
+
+interface InitialState {
+  generalList: object;
 }
+
+const initialState = {
+  generalList: {},
+};
+
+export const HomeContext = createContext<InitialState>(initialState);
+
+export const { Provider: HomeProvider, Consumer: HomeConsumer } = HomeContext;
+
+export const HomeController = ({ children }) => {
+  const { data: generalList } = useQuery(GENERAL_LIST);
+
+  return <HomeProvider value={{ generalList }}>{children}</HomeProvider>;
+};

From b402d774959d1e0c19626f20fe759a78b8b5d24f Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:53:57 +0700
Subject: [PATCH 09/43] fix

---
 src/App/Container/Assets/Css/main.css         | 12 +++
 src/App/Container/Components/MainApp/View.tsx | 92 ++++++++++++++-----
 2 files changed, 83 insertions(+), 21 deletions(-)

diff --git a/src/App/Container/Assets/Css/main.css b/src/App/Container/Assets/Css/main.css
index ef6823f..351e8f3 100644
--- a/src/App/Container/Assets/Css/main.css
+++ b/src/App/Container/Assets/Css/main.css
@@ -1050,10 +1050,22 @@ video {
   background-color: #162f42;
 }
 
+.bg-bluepindad-300 {
+  background-color: #0078a9
+}
+
 .bg-yellowpindad-100 {
   background-color: #D4AF37;
 }
 
+.bg-orangepindad-100 {
+  background-color: #EC971F
+}
+
+.bg-greenpindad-100 {
+  background-color: #449D44
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 5f097d7..97bf038 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -1,24 +1,74 @@
 import React from "react";
 
-export const MainApp = ({ title, children }) => {
+export const MainApp = ({
+  title,
+  children,
+  textDone = "",
+  textNew = "",
+  classNameDone = "bg-white hover:bg-gray-300 border border-gray-400 text-gray-800",
+  classNameNew = "focus:outline-none bg-blue-600 hover:bg-blue-800 text-white",
+  onActionOne = () => {},
+  onActionTwo = () => {},
+}) => {
   return (
     <div className="w-full h-full">
-      <div className="w-full">
-        <div className="w-full border-b-2 bg-gray-200">
-          <div>
-            <div className="text-left py-2 pl-6 text-gray-600 text-sm font-semibold">
-              {title}
-            </div>
-          </div>
-        </div>
-        <div className="w-full bg-white">
-          <div>
-            <div className="text-left py-3 px-6">{children}</div>
-          </div>
-        </div>
-        <div className="w-full">
-          <div>
-            <div className="text-left py-3 px-6">
+      <table className="w-full">
+        <thead className="w-full border-b-2 bg-gray-200">
+          <tr>
+            <td className="flex flex-row whitespace-no-wrap justify-between text-left pl-6 text-gray-600 text-sm font-bold">
+              <div className="my-2">
+                <span>{title}</span>
+              </div>
+              <div className="text-xs my-1 mr-6 flex flex-row items-center">
+                <div>
+                  <button className="my-0 mr-6">
+                    <svg
+                      className="fill-current h-3 w-3"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 512 512"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+                      ></path>
+                    </svg>
+                  </button>
+                </div>
+                <button className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500">
+                  <svg
+                    className="fill-current h-3 w-3 mr-2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 18 18"
+                  >
+                    <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
+                  </svg>
+                  <span>Set Primary Data</span>
+                </button>
+                <button className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-gray-700">
+                  Selesai
+                </button>
+                <button className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600">
+                  <svg
+                    className="fill-current w-3 mr-2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 5 5"
+                  >
+                    <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
+                  </svg>
+                  <span>Buat Entri Baru</span>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </thead>
+        <tbody className="w-full bg-white">
+          <tr>
+            <td className="text-left py-3 px-6">{children}</td>
+          </tr>
+        </tbody>
+        <tfoot className="w-full">
+          <tr>
+            <td className="text-left py-3 px-6">
               <p className="text-xs text-gray-700 font-semibold">Perhatian :</p>
               <p className="text-xs text-gray-700 text-justify">
                 This program is protected by copyright law and international
@@ -27,10 +77,10 @@ export const MainApp = ({ title, children }) => {
                 penalties, and will be prosecuted to the maximum extent under
                 the law.
               </p>
-            </div>
-          </div>
-        </div>
-      </div>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
     </div>
   );
 };

From 4f97d09fc4fc9ae1fc132023f1c545c5c5466d44 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 13:07:30 +0700
Subject: [PATCH 10/43] add reusable 4 button main app

---
 src/App/Container/Components/MainApp/View.tsx | 87 +++++++++++--------
 .../VendorProfile/Component/General/View.tsx  |  7 +-
 2 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 97bf038..8c96a67 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -3,12 +3,10 @@ import React from "react";
 export const MainApp = ({
   title,
   children,
-  textDone = "",
-  textNew = "",
-  classNameDone = "bg-white hover:bg-gray-300 border border-gray-400 text-gray-800",
-  classNameNew = "focus:outline-none bg-blue-600 hover:bg-blue-800 text-white",
-  onActionOne = () => {},
-  onActionTwo = () => {},
+  onActionRefresh = () => {},
+  onActionDone = () => {},
+  onActionNew = () => {},
+  onActionPrimary = () => {},
 }) => {
   return (
     <div className="w-full h-full">
@@ -20,43 +18,60 @@ export const MainApp = ({
                 <span>{title}</span>
               </div>
               <div className="text-xs my-1 mr-6 flex flex-row items-center">
-                <div>
-                  <button className="my-0 mr-6">
+                {onActionRefresh.toString() !== "() => {}" && (
+                  <div onClick={onActionRefresh}>
+                    <button className="my-0 mr-6">
+                      <svg
+                        className="fill-current h-3 w-3 text-blue-800"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </div>
+                )}
+                {onActionPrimary.toString() !== "() => {}" && (
+                  <button
+                    className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500"
+                    onClick={onActionPrimary}
+                  >
                     <svg
-                      className="fill-current h-3 w-3"
+                      className="fill-current h-3 w-3 mr-2"
                       xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 512 512"
+                      viewBox="0 0 18 18"
                     >
-                      <path
-                        fill="currentColor"
-                        d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
-                      ></path>
+                      <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
                     </svg>
+                    <span>Set Primary Data</span>
                   </button>
-                </div>
-                <button className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500">
-                  <svg
-                    className="fill-current h-3 w-3 mr-2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 18 18"
+                )}
+                {onActionDone.toString() !== "() => {}" && (
+                  <button
+                    className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-blue-800"
+                    onClick={onActionDone}
                   >
-                    <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
-                  </svg>
-                  <span>Set Primary Data</span>
-                </button>
-                <button className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-gray-700">
-                  Selesai
-                </button>
-                <button className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600">
-                  <svg
-                    className="fill-current w-3 mr-2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 5 5"
+                    Selesai
+                  </button>
+                )}
+                {onActionNew.toString() !== "() => {}" && (
+                  <button
+                    className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600"
+                    onClick={onActionNew}
                   >
-                    <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
-                  </svg>
-                  <span>Buat Entri Baru</span>
-                </button>
+                    <svg
+                      className="fill-current w-3 mr-2"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 5 5"
+                    >
+                      <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
+                    </svg>
+                    <span>Buat Entri Baru</span>
+                  </button>
+                )}
               </div>
             </td>
           </tr>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index 47a1713..f755564 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -4,7 +4,12 @@ import GeneralComponent from "./Component/General";
 
 const General = () => {
   return (
-    <MainApp title="PROFIL PERUSAHAAN">
+    <MainApp
+      title="PROFIL PERUSAHAAN"
+      onActionRefresh={() => alert("Ok")}
+      onActionDone={() => alert("Done")}
+      onActionNew={() => alert("New")}
+    >
       <GeneralComponent />
     </MainApp>
   );

From 7ce4a9e881bfad7940d6e368b9ee983dbca82f12 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 14:13:03 +0700
Subject: [PATCH 11/43] add modal

---
 .../Component/General/Component/General.tsx   |  52 +-
 .../Component/General/Component/Modal.tsx     | 517 ++++++++++++++++++
 .../Component/General/Controller.tsx          | 213 ++++++++
 .../VendorProfile/Component/General/View.tsx  |  11 +-
 4 files changed, 773 insertions(+), 20 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 3b5f13a..9653fe6 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -1,21 +1,49 @@
-import React from "react";
+import React, { useContext } from "react";
 import Table from "./Table";
+import { Modal } from "../../../../../../Components";
+import { GeneralContext } from "../Controller";
+import { MainApp } from "../../../../../../Components";
+import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
+  const { open, setOpen } = useContext(GeneralContext);
+
   return (
-    <div className="flex flex-col">
-      <div className="w-full flex flex-col w-4/5 bg-white text-sm">
-        <div className="flex flex-row py-6">
-          <label className="w-1/5 text-right px-4 font-bold">
-            Nama Perusahaan
-          </label>
-          <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
-        </div>
-        <div>
-          <Table />
+    <MainApp
+      title="PROFIL PERUSAHAAN"
+      onActionRefresh={() => alert("Ok")}
+      onActionDone={() => alert("Done")}
+      onActionNew={() => setOpen(true)}
+    >
+      <div className="flex flex-col">
+        <div className="w-full flex flex-col w-4/5 bg-white text-sm">
+          <div className="flex flex-row py-6">
+            <label className="w-1/5 text-right px-4 font-bold">
+              Nama Perusahaan
+            </label>
+            <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
+          </div>
+          <div>
+            <Table />
+          </div>
         </div>
+        <Modal
+          title="Perusahaan"
+          open={open}
+          width="w-3/5"
+          onClose={() => {
+            setOpen(false);
+          }}
+          onActionOne={() => {
+            setOpen(false);
+          }}
+          textOne="Batal"
+          textTwo="Simpan"
+        >
+          <ModalComponent />
+        </Modal>
       </div>
-    </div>
+    </MainApp>
   );
 };
 
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
new file mode 100644
index 0000000..8b412cb
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -0,0 +1,517 @@
+import React, { useContext } from "react";
+import { ErrorMessage } from "react-hook-form";
+import Select from "react-select";
+import { GeneralContext } from "../Controller";
+
+const ModalComponent = () => {
+  const {
+    customStyles,
+    register,
+    errors,
+    setBranchName,
+    setAddress,
+    country,
+    setCountry,
+    province,
+    setProvince,
+    city,
+    setCity,
+    setSubDistrict,
+    setPostalCode,
+    setPhoneNumber,
+    setPhoneNumberExt,
+    setFaxNumber,
+    setFaxNumberExt,
+    setCompanyEmail,
+    optionsCompanyType,
+    Indonesia,
+    Yogya,
+    Sleman,
+  } = useContext(GeneralContext);
+
+  return (
+    <div className="bg-white">
+      <div className="block text-xs">
+        <div className="py-1 px-4 mt-6">
+          <span className="text-gray-900 text-2xl">Use as Branch Office</span>
+        </div>
+        <form>
+          <div className="w-full">
+            <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nama Cabang/Lokasi Cabang</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="branchName"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setBranchName(val.target.value)}
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Nama Cabang/Lokasi Cabang"
+                    />
+                    <ErrorMessage errors={errors} name="branchName">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Alamat</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <textarea
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Alamat"
+                      name="address"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setAddress(val.target.value)}
+                    />
+                    <ErrorMessage errors={errors} name="address">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Negara</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="country"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setCountry(val.value) : setCountry("")
+                      }
+                      options={optionsCompanyType}
+                      placeholder="Negara"
+                    />
+                    <ErrorMessage errors={errors} name="country">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Provinsi</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="province"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setProvince(val.value) : setProvince("")
+                      }
+                      options={country === "Indonesia" ? Indonesia : null}
+                      placeholder="Provinsi"
+                      isDisabled={country ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="province">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kota/Kabupaten</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="city"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      // value={Yogya.find((val) => val.value === city)}
+                      onChange={(val) =>
+                        val ? setCity(val.value) : setCity("")
+                      }
+                      options={Yogya}
+                      placeholder="Kota/Kabupaten"
+                      isDisabled={country && province ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="city">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kecamatan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="subDistrict"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setSubDistrict(val.value) : setSubDistrict("")
+                      }
+                      options={city === "Sleman" ? Sleman : null}
+                      placeholder="Kecamatan"
+                      isDisabled={country && province && city ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="subDistrict">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Kode Pos</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="number"
+                      name="postalCode"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setPostalCode(val.target.value)}
+                      className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Kode Pos"
+                    />
+                    <ErrorMessage errors={errors} name="postalCode">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+              </div>
+              {/* Right */}
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        name="phoneNumber"
+                        ref={register({
+                          required: "This is required",
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                          pattern: /^\+{1}[62]{2}[0-9]{1,20}$/i,
+                        })}
+                        onChange={(val) => setPhoneNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="+62xx-xxxxxxxxxxxx"
+                      />
+                      <ErrorMessage errors={errors} name="phoneNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                      <ErrorMessage errors={errors} name="phoneNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Faksimile</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        type="number"
+                        name="faxNumber"
+                        ref={register({
+                          required: "This is required",
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Nomor Faksimile"
+                      />
+                      <ErrorMessage errors={errors} name="faxNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        type="number"
+                        name="faxNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                      <ErrorMessage errors={errors} name="faxNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>E-mail Perusahaan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="companyEmail"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setCompanyEmail(val.target.value)}
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="me@example.com"
+                    />
+                    <ErrorMessage errors={errors} name="companyEmail">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ModalComponent;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
new file mode 100644
index 0000000..b3bce41
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -0,0 +1,213 @@
+import React, { createContext, useState } from "react";
+import { useForm } from "react-hook-form";
+import { getToken } from "../../../../../../Misc/Cookies";
+
+interface InitialState {
+  customStyles: object;
+  _isLogin: string | null;
+  open: boolean;
+  setOpen: Function;
+  register: Function;
+  handleSubmit: Function;
+  errors: object;
+  _onSubmit: Function;
+  optionsCompanyType: Array<object>;
+  Indonesia: Array<object>;
+  Yogya: Array<object>;
+  Sleman: Array<object>;
+  columns: Array<object>;
+  branchName: string;
+  address: string;
+  country: string;
+  province: string;
+  city: string;
+  subDistrict: string;
+  postalCode: string;
+  phoneNumber: string;
+  phoneNumberExt: string;
+  faxNumber: string;
+  faxNumberExt: string;
+  companyEmail: string;
+  setBranchName: Function;
+  setAddress: Function;
+  setCountry: Function;
+  setProvince: Function;
+  setCity: Function;
+  setSubDistrict: Function;
+  setPostalCode: Function;
+  setPhoneNumber: Function;
+  setPhoneNumberExt: Function;
+  setFaxNumber: Function;
+  setFaxNumberExt: Function;
+  setCompanyEmail: Function;
+}
+
+const initialState = {
+  customStyles: {},
+  _isLogin: null,
+  open: false,
+  setOpen: () => {},
+  register: () => {},
+  handleSubmit: () => {},
+  errors: {},
+  _onSubmit: () => {},
+  optionsCompanyType: [{}],
+  Indonesia: [{}],
+  Yogya: [{}],
+  Sleman: [{}],
+  columns: [{}],
+  branchName: "",
+  setBranchName: () => {},
+  address: "",
+  setAddress: () => {},
+  country: "",
+  setCountry: () => {},
+  province: "",
+  setProvince: () => {},
+  city: "",
+  setCity: () => {},
+  subDistrict: "",
+  setSubDistrict: () => {},
+  postalCode: "",
+  setPostalCode: () => {},
+  phoneNumber: "",
+  setPhoneNumber: () => {},
+  phoneNumberExt: "",
+  setPhoneNumberExt: () => {},
+  faxNumber: "",
+  setFaxNumber: () => {},
+  faxNumberExt: "",
+  setFaxNumberExt: () => {},
+  companyEmail: "",
+  setCompanyEmail: () => {},
+};
+
+export const GeneralContext = createContext<InitialState>(initialState);
+
+export const {
+  Provider: GeneralProvider,
+  Consumer: GeneralConsumer,
+} = GeneralContext;
+
+export const GeneralController = ({ children }) => {
+  const _isLogin = getToken();
+  const [open, setOpen] = useState(false);
+  const { register, handleSubmit, errors } = useForm({
+    validateCriteriaMode: "all",
+    mode: "onChange",
+  });
+  const [branchName, setBranchName] = useState("");
+  const [address, setAddress] = useState("");
+  const [country, setCountry] = useState("");
+  const [province, setProvince] = useState("");
+  const [city, setCity] = useState("");
+  const [subDistrict, setSubDistrict] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [phoneNumberExt, setPhoneNumberExt] = useState("");
+  const [faxNumber, setFaxNumber] = useState("");
+  const [faxNumberExt, setFaxNumberExt] = useState("");
+  const [companyEmail, setCompanyEmail] = useState("");
+  const _onSubmit = (value) => console.log("Validate", value);
+  const optionsCompanyType = [
+    {
+      label: "10 dari 255 (harap ketik untuk memfilter)",
+      isDisabled: true,
+    },
+    { value: "Indonesia", label: "Indonesia" },
+  ];
+  const Indonesia = [{ value: "Yogyakarta", label: "Yogyakarta" }];
+  const Yogya = [{ value: "Sleman", label: "Sleman" }];
+  const Sleman = [{ value: "Ngaglik", label: "Ngaglik" }];
+  const customStyles = {
+    control: (base) => ({
+      ...base,
+      height: 32,
+      minHeight: 32,
+    }),
+  };
+  const columns = [
+    {
+      label: "No",
+      accessor: "no",
+      width: "w-auto",
+      align: "text-center",
+    },
+    {
+      label: "Detail",
+      accessor: "detail",
+      width: "w-2/5",
+      align: "text-left",
+    },
+    {
+      label: "Data Saat Ini",
+      accessor: "oldData",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Data Baru",
+      accessor: "newData",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Status",
+      accessor: "status",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Aksi",
+      accessor: "aksi",
+      width: "w-auto",
+      align: "text-left",
+    },
+  ];
+
+  return (
+    <GeneralProvider
+      value={{
+        customStyles,
+        _isLogin,
+        open,
+        setOpen,
+        register,
+        handleSubmit,
+        errors,
+        _onSubmit,
+        optionsCompanyType,
+        Indonesia,
+        Yogya,
+        Sleman,
+        columns,
+        branchName,
+        address,
+        country,
+        province,
+        city,
+        subDistrict,
+        postalCode,
+        phoneNumber,
+        phoneNumberExt,
+        faxNumber,
+        faxNumberExt,
+        companyEmail,
+        setBranchName,
+        setAddress,
+        setCountry,
+        setProvince,
+        setCity,
+        setSubDistrict,
+        setPostalCode,
+        setPhoneNumber,
+        setPhoneNumberExt,
+        setFaxNumber,
+        setFaxNumberExt,
+        setCompanyEmail,
+      }}
+    >
+      {children}
+    </GeneralProvider>
+  );
+};
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index f755564..c7c1e5b 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -1,17 +1,12 @@
 import React from "react";
-import { MainApp } from "../../../../../Components";
 import GeneralComponent from "./Component/General";
+import { GeneralController } from "./Controller";
 
 const General = () => {
   return (
-    <MainApp
-      title="PROFIL PERUSAHAAN"
-      onActionRefresh={() => alert("Ok")}
-      onActionDone={() => alert("Done")}
-      onActionNew={() => alert("New")}
-    >
+    <GeneralController>
       <GeneralComponent />
-    </MainApp>
+    </GeneralController>
   );
 };
 

From 4c7cafe3b9e5f007376b810fbb1a5cc71fd30256 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 15:25:40 +0700
Subject: [PATCH 12/43] validate select

---
 .../Component/General/Component/General.tsx   |  10 +-
 .../Component/General/Component/Modal.tsx     | 271 +++++++++++------
 .../Component/General/Controller.tsx          | 285 ++++++++++++------
 .../Registration/Component/Registration.tsx   |   8 +-
 4 files changed, 370 insertions(+), 204 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 9653fe6..67e9f94 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -6,7 +6,9 @@ import { MainApp } from "../../../../../../Components";
 import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
-  const { open, setOpen } = useContext(GeneralContext);
+  const { open, setOpen, _handleOnSubmitSelect, handleSubmit } = useContext(
+    GeneralContext
+  );
 
   return (
     <MainApp
@@ -30,13 +32,17 @@ const GeneralComponent = () => {
         <Modal
           title="Perusahaan"
           open={open}
-          width="w-3/5"
+          width="w-3/4"
           onClose={() => {
             setOpen(false);
           }}
           onActionOne={() => {
             setOpen(false);
           }}
+          onActionTwo={async () => {
+            _handleOnSubmitSelect();
+            handleSubmit();
+          }}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 8b412cb..099ae54 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,13 +1,11 @@
 import React, { useContext } from "react";
-import { ErrorMessage } from "react-hook-form";
+import { ErrorMessage, useFormContext } from "react-hook-form";
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
 const ModalComponent = () => {
   const {
     customStyles,
-    register,
-    errors,
     setBranchName,
     setAddress,
     country,
@@ -16,7 +14,7 @@ const ModalComponent = () => {
     setProvince,
     city,
     setCity,
-    setSubDistrict,
+    setDistrict,
     setPostalCode,
     setPhoneNumber,
     setPhoneNumberExt,
@@ -27,7 +25,12 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
+    _onValidate,
+    register,
+    handleSubmit,
+    errors,
   } = useContext(GeneralContext);
+  const { errors: errorsSelect } = useFormContext();
 
   return (
     <div className="bg-white">
@@ -35,7 +38,7 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form>
+        <form onSubmit={handleSubmit(_onValidate())}>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">
@@ -62,6 +65,11 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="branchName">
                       {({ messages }) => {
                         return (
@@ -98,6 +106,11 @@ const ModalComponent = () => {
                       })}
                       onChange={(val) => setAddress(val.target.value)}
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="address">
                       {({ messages }) => {
                         return (
@@ -119,37 +132,25 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="country"
                       name="country"
                       isClearable
-                      ref={register({
-                        required: "This is required",
-                        minLength: {
-                          value: 8,
-                          message: "This inpus is less than 8 characters",
-                        },
-                        maxLength: {
-                          value: 30,
-                          message: "This inpus is more than 30 characters",
-                        },
-                      })}
                       onChange={(val) =>
                         val ? setCountry(val.value) : setCountry("")
                       }
                       options={optionsCompanyType}
                       placeholder="Negara"
                     />
-                    <ErrorMessage errors={errors} name="country">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -159,6 +160,7 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="province"
                       name="province"
                       isClearable
                       ref={register({
@@ -179,18 +181,16 @@ const ModalComponent = () => {
                       placeholder="Provinsi"
                       isDisabled={country ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="province">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -200,6 +200,7 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="city"
                       name="city"
                       isClearable
                       ref={register({
@@ -221,18 +222,16 @@ const ModalComponent = () => {
                       placeholder="Kota/Kabupaten"
                       isDisabled={country && province ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="city">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -242,7 +241,8 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
-                      name="subDistrict"
+                      className="district"
+                      name="district"
                       isClearable
                       ref={register({
                         required: "This is required",
@@ -256,24 +256,22 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) =>
-                        val ? setSubDistrict(val.value) : setSubDistrict("")
+                        val ? setDistrict(val.value) : setDistrict("")
                       }
                       options={city === "Sleman" ? Sleman : null}
                       placeholder="Kecamatan"
                       isDisabled={country && province && city ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="subDistrict">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -287,18 +285,27 @@ const ModalComponent = () => {
                       ref={register({
                         required: "This is required",
                         minLength: {
-                          value: 8,
-                          message: "This inpus is less than 8 characters",
+                          value: 5,
+                          message: "This input is less than 5 characters",
                         },
                         maxLength: {
-                          value: 30,
-                          message: "This inpus is more than 30 characters",
+                          value: 5,
+                          message: "This input is more than 5 characters",
+                        },
+                        pattern: {
+                          value: /^\d+$/,
+                          message: "This input is number 0-9",
                         },
                       })}
                       onChange={(val) => setPostalCode(val.target.value)}
                       className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="Kode Pos"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="postalCode">
                       {({ messages }) => {
                         return (
@@ -327,19 +334,53 @@ const ModalComponent = () => {
                         ref={register({
                           required: "This is required",
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g,
+                            message: "This input is number 0-9",
                           },
-                          pattern: /^\+{1}[62]{2}[0-9]{1,20}$/i,
                         })}
                         onChange={(val) => setPhoneNumber(val.target.value)}
                         className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
                       <ErrorMessage errors={errors} name="phoneNumber">
                         {({ messages }) => {
                           return (
@@ -357,22 +398,6 @@ const ModalComponent = () => {
                       </ErrorMessage>
                     </div>
                     <div className="w-2/5 flex-col">
-                      <input
-                        name="phoneNumberExt"
-                        ref={register({
-                          minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
-                          },
-                          maxLength: {
-                            value: 30,
-                            message: "This inpus is more than 30 characters",
-                          },
-                        })}
-                        onChange={(val) => setPhoneNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
-                        placeholder="Ext."
-                      />
                       <ErrorMessage errors={errors} name="phoneNumberExt">
                         {({ messages }) => {
                           return (
@@ -401,14 +426,17 @@ const ModalComponent = () => {
                         type="number"
                         name="faxNumber"
                         ref={register({
-                          required: "This is required",
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
@@ -437,12 +465,16 @@ const ModalComponent = () => {
                         name="faxNumberExt"
                         ref={register({
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
@@ -467,6 +499,45 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <ErrorMessage errors={errors} name="faxNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <ErrorMessage errors={errors} name="faxNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
@@ -490,6 +561,11 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="me@example.com"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="companyEmail">
                       {({ messages }) => {
                         return (
@@ -507,7 +583,6 @@ const ModalComponent = () => {
               </div>
             </div>
           </div>
-          <hr />
         </form>
       </div>
     </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index b3bce41..f460419 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useState } from "react";
-import { useForm } from "react-hook-form";
+import React, { createContext, useState, useEffect } from "react";
+import { useForm, FormContext } from "react-hook-form";
 import { getToken } from "../../../../../../Misc/Cookies";
 
 interface InitialState {
@@ -7,21 +7,18 @@ interface InitialState {
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  register: Function;
-  handleSubmit: Function;
-  errors: object;
+  registerSelect: Function;
   _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
   Yogya: Array<object>;
   Sleman: Array<object>;
-  columns: Array<object>;
   branchName: string;
   address: string;
   country: string;
   province: string;
   city: string;
-  subDistrict: string;
+  district: string;
   postalCode: string;
   phoneNumber: string;
   phoneNumberExt: string;
@@ -33,13 +30,22 @@ interface InitialState {
   setCountry: Function;
   setProvince: Function;
   setCity: Function;
-  setSubDistrict: Function;
+  setDistrict: Function;
   setPostalCode: Function;
   setPhoneNumber: Function;
   setPhoneNumberExt: Function;
   setFaxNumber: Function;
   setFaxNumberExt: Function;
   setCompanyEmail: Function;
+  _handleCountry: Function;
+  _handleProvince: Function;
+  _handleCity: Function;
+  _onValidate: Function;
+  _handleDistrict: Function;
+  _handleOnSubmitSelect: Function;
+  register: Function;
+  handleSubmit: Function;
+  errors: object;
 }
 
 const initialState = {
@@ -47,15 +53,12 @@ const initialState = {
   _isLogin: null,
   open: false,
   setOpen: () => {},
-  register: () => {},
-  handleSubmit: () => {},
-  errors: {},
+  registerSelect: () => {},
   _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
   Yogya: [{}],
   Sleman: [{}],
-  columns: [{}],
   branchName: "",
   setBranchName: () => {},
   address: "",
@@ -66,8 +69,8 @@ const initialState = {
   setProvince: () => {},
   city: "",
   setCity: () => {},
-  subDistrict: "",
-  setSubDistrict: () => {},
+  district: "",
+  setDistrict: () => {},
   postalCode: "",
   setPostalCode: () => {},
   phoneNumber: "",
@@ -80,6 +83,15 @@ const initialState = {
   setFaxNumberExt: () => {},
   companyEmail: "",
   setCompanyEmail: () => {},
+  _handleCountry: () => {},
+  _handleProvince: () => {},
+  _handleCity: () => {},
+  _handleDistrict: () => {},
+  _onValidate: () => {},
+  _handleOnSubmitSelect: () => {},
+  register: () => {},
+  handleSubmit: () => {},
+  errors: {},
 };
 
 export const GeneralContext = createContext<InitialState>(initialState);
@@ -92,22 +104,19 @@ export const {
 export const GeneralController = ({ children }) => {
   const _isLogin = getToken();
   const [open, setOpen] = useState(false);
-  const { register, handleSubmit, errors } = useForm({
-    validateCriteriaMode: "all",
-    mode: "onChange",
-  });
   const [branchName, setBranchName] = useState("");
   const [address, setAddress] = useState("");
   const [country, setCountry] = useState("");
   const [province, setProvince] = useState("");
   const [city, setCity] = useState("");
-  const [subDistrict, setSubDistrict] = useState("");
+  const [district, setDistrict] = useState("");
   const [postalCode, setPostalCode] = useState("");
   const [phoneNumber, setPhoneNumber] = useState("");
   const [phoneNumberExt, setPhoneNumberExt] = useState("");
   const [faxNumber, setFaxNumber] = useState("");
   const [faxNumberExt, setFaxNumberExt] = useState("");
   const [companyEmail, setCompanyEmail] = useState("");
+
   const _onSubmit = (value) => console.log("Validate", value);
   const optionsCompanyType = [
     {
@@ -126,88 +135,164 @@ export const GeneralController = ({ children }) => {
       minHeight: 32,
     }),
   };
-  const columns = [
-    {
-      label: "No",
-      accessor: "no",
-      width: "w-auto",
-      align: "text-center",
-    },
-    {
-      label: "Detail",
-      accessor: "detail",
-      width: "w-2/5",
-      align: "text-left",
-    },
-    {
-      label: "Data Saat Ini",
-      accessor: "oldData",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Data Baru",
-      accessor: "newData",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Status",
-      accessor: "status",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Aksi",
-      accessor: "aksi",
-      width: "w-auto",
-      align: "text-left",
-    },
-  ];
+
+  const { register, handleSubmit, errors } = useForm({
+    validateCriteriaMode: "all",
+    mode: "onChange",
+  });
+  // FormContext
+  const methods = useForm({
+    mode: "onChange",
+  });
+  const { register: registerSelect, setValue, triggerValidation } = methods;
+
+  useEffect(() => {
+    registerSelect(
+      { name: "business_type" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "country" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "province" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "city" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "district" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  const _handleCountry = (e: any) => {
+    setCountry(e && e.value);
+    setValue("country", e && e.value);
+    triggerValidation("country");
+  };
+
+  const _handleProvince = (e: any) => {
+    setProvince(e && e.value);
+    setValue("province", e && e.value);
+    triggerValidation("province");
+  };
+
+  const _handleCity = (e: any) => {
+    setCity(e && e.value);
+    setValue("city", e && e.value);
+    triggerValidation("city");
+  };
+
+  const _handleDistrict = (e: any) => {
+    setDistrict(e && e.value);
+    setValue("district", e && e.value);
+    triggerValidation("district");
+  };
+
+  const val = ["business_type", "country", "province", "city", "district"];
+
+  const _handleOnSubmitSelect = async () => {
+    if (await triggerValidation(val)) {
+      console.log("Sukses");
+    } else {
+      console.log("Gagal");
+    }
+  };
+
+  const _onValidate = async () => console.log("validation");
 
   return (
-    <GeneralProvider
-      value={{
-        customStyles,
-        _isLogin,
-        open,
-        setOpen,
-        register,
-        handleSubmit,
-        errors,
-        _onSubmit,
-        optionsCompanyType,
-        Indonesia,
-        Yogya,
-        Sleman,
-        columns,
-        branchName,
-        address,
-        country,
-        province,
-        city,
-        subDistrict,
-        postalCode,
-        phoneNumber,
-        phoneNumberExt,
-        faxNumber,
-        faxNumberExt,
-        companyEmail,
-        setBranchName,
-        setAddress,
-        setCountry,
-        setProvince,
-        setCity,
-        setSubDistrict,
-        setPostalCode,
-        setPhoneNumber,
-        setPhoneNumberExt,
-        setFaxNumber,
-        setFaxNumberExt,
-        setCompanyEmail,
-      }}
-    >
-      {children}
-    </GeneralProvider>
+    <FormContext {...methods}>
+      <GeneralProvider
+        value={{
+          customStyles,
+          _isLogin,
+          open,
+          setOpen,
+          registerSelect,
+          _onSubmit,
+          optionsCompanyType,
+          Indonesia,
+          Yogya,
+          Sleman,
+          branchName,
+          address,
+          country,
+          province,
+          city,
+          district,
+          postalCode,
+          phoneNumber,
+          phoneNumberExt,
+          faxNumber,
+          faxNumberExt,
+          companyEmail,
+          setBranchName,
+          setAddress,
+          setCountry,
+          setProvince,
+          setCity,
+          setDistrict,
+          setPostalCode,
+          setPhoneNumber,
+          setPhoneNumberExt,
+          setFaxNumber,
+          setFaxNumberExt,
+          setCompanyEmail,
+          _handleCountry,
+          _handleProvince,
+          _handleCity,
+          _handleDistrict,
+          _onValidate,
+          _handleOnSubmitSelect,
+          register,
+          handleSubmit,
+          errors,
+        }}
+      >
+        {children}
+      </GeneralProvider>
+    </FormContext>
   );
 };
diff --git a/src/App/Container/Views/Public/Registration/Component/Registration.tsx b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
index d8675f7..97a98a6 100644
--- a/src/App/Container/Views/Public/Registration/Component/Registration.tsx
+++ b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
@@ -553,12 +553,12 @@ const RegistrationComponent = () => {
                     ref={register({
                       required: "This is required",
                       minLength: {
-                        value: 4,
-                        message: "This input is less than 4 characters",
+                        value: 5,
+                        message: "This input is less than 5 characters",
                       },
                       maxLength: {
-                        value: 30,
-                        message: "This input is more than 30 characters",
+                        value: 5,
+                        message: "This input is more than 5 characters",
                       },
                       pattern: {
                         value: /^\d+$/,

From c1df791c309d9582e4a341c07a9bac19ebfe8d41 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 16:15:22 +0700
Subject: [PATCH 13/43] validation form

---
 .../Component/General/Component/General.tsx   |  11 +-
 .../Component/General/Component/Modal.tsx     | 123 ++++++++----------
 .../Component/General/Controller.tsx          |   4 +-
 3 files changed, 61 insertions(+), 77 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 67e9f94..924007e 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -32,17 +32,18 @@ const GeneralComponent = () => {
         <Modal
           title="Perusahaan"
           open={open}
-          width="w-3/4"
+          width="w-4/5"
           onClose={() => {
             setOpen(false);
           }}
           onActionOne={() => {
             setOpen(false);
           }}
-          onActionTwo={async () => {
-            _handleOnSubmitSelect();
-            handleSubmit();
-          }}
+          // onActionTwo={async () => {
+          //   _handleOnSubmitSelect();
+          //   // handleSubmit();
+          // }}
+          onActionTwo={handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 099ae54..c1bbb93 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -29,6 +29,7 @@ const ModalComponent = () => {
     register,
     handleSubmit,
     errors,
+    _handleOnSubmitSelect,
   } = useContext(GeneralContext);
   const { errors: errorsSelect } = useFormContext();
 
@@ -38,12 +39,12 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form onSubmit={handleSubmit(_onValidate())}>
+        <form>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full leading-none sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nama Cabang/Lokasi Cabang</label>
                   </div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
@@ -62,12 +63,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setBranchName(val.target.value)}
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="branchName">
@@ -75,7 +76,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -84,13 +88,13 @@ const ModalComponent = () => {
                     </ErrorMessage>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Alamat</label>
                   </div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <textarea
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
                       ref={register({
@@ -108,7 +112,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="address">
@@ -116,7 +120,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -125,7 +132,7 @@ const ModalComponent = () => {
                     </ErrorMessage>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Negara</label>
                   </div>
@@ -143,7 +150,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -153,7 +160,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Provinsi</label>
                   </div>
@@ -183,7 +190,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -193,7 +200,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Kota/Kabupaten</label>
                   </div>
@@ -224,7 +231,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -234,7 +241,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Kecamatan</label>
                   </div>
@@ -264,7 +271,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -274,7 +281,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Kode Pos</label>
                   </div>
@@ -298,12 +305,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setPostalCode(val.target.value)}
-                      className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full rounded bg-white border border-gray-400 hover:border-gray-500 py-1 px-2 no-arrow"
                       placeholder="Kode Pos"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="postalCode">
@@ -311,7 +318,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -323,7 +333,7 @@ const ModalComponent = () => {
               </div>
               {/* Right */}
               <div className="w-full py-4">
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nomor Telepon</label>
                   </div>
@@ -347,7 +357,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setPhoneNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
                     </div>
@@ -369,16 +379,14 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setPhoneNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
-                    <label>Nomor Telepon</label>
-                  </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
                       <ErrorMessage errors={errors} name="phoneNumber">
@@ -388,7 +396,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -405,7 +413,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -416,7 +424,7 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nomor Faksimile</label>
                   </div>
@@ -440,24 +448,9 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Nomor Faksimile"
                       />
-                      <ErrorMessage errors={errors} name="faxNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
                     </div>
                     <div className="w-2/5 flex-col">
                       <input
@@ -478,28 +471,13 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
-                      <ErrorMessage errors={errors} name="faxNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
@@ -510,7 +488,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -527,7 +505,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -538,7 +516,7 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
                   </div>
@@ -558,12 +536,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setCompanyEmail(val.target.value)}
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="me@example.com"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="companyEmail">
@@ -571,7 +549,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index f460419..a04dfef 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -240,7 +240,9 @@ export const GeneralController = ({ children }) => {
     }
   };
 
-  const _onValidate = async () => console.log("validation");
+  const _onValidate = async () => {
+    console.log("validation");
+  };
 
   return (
     <FormContext {...methods}>

From 0ac1c7e48e89f986dcd666314438ba4c29d274db Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 17:26:30 +0700
Subject: [PATCH 14/43] validation all

---
 .../Component/General/Component/General.tsx   |  10 +-
 .../Component/General/Component/Modal.tsx     | 201 ++++++------------
 .../Component/General/Component/Query.tsx     |   7 +
 .../Component/General/Controller.tsx          |  15 +-
 4 files changed, 86 insertions(+), 147 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 924007e..d74b6bf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -39,11 +39,11 @@ const GeneralComponent = () => {
           onActionOne={() => {
             setOpen(false);
           }}
-          // onActionTwo={async () => {
-          //   _handleOnSubmitSelect();
-          //   // handleSubmit();
-          // }}
-          onActionTwo={handleSubmit()}
+          onActionTwo={async () => {
+            _handleOnSubmitSelect();
+            // handleSubmit();
+          }}
+          // onActionTwo={handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index c1bbb93..f96d2e8 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -25,13 +25,11 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
-    _onValidate,
-    register,
-    handleSubmit,
-    errors,
-    _handleOnSubmitSelect,
+    registerSelect,
+    // errors,
   } = useContext(GeneralContext);
-  const { errors: errorsSelect } = useFormContext();
+  // const { errors: errorsSelect } = useFormContext();
+  const { errors } = useFormContext();
 
   return (
     <div className="bg-white">
@@ -51,7 +49,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -71,21 +69,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="branchName">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.branchName && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.branchName && errors.branchName.message}
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
@@ -97,7 +85,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -115,21 +103,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="address">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.address && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.address && errors.address.message}
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
@@ -153,7 +131,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -170,7 +148,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -193,7 +171,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -210,7 +188,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -234,7 +212,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -251,7 +229,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -274,7 +252,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -289,7 +267,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -313,21 +291,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="postalCode">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.postalCode && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.postalCode && errors.postalCode.message}
+                      </p>
+                    )}
                   </div>
                 </div>
               </div>
@@ -341,7 +309,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={register({
+                        ref={registerSelect({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -364,7 +332,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -389,38 +357,19 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="phoneNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.phoneNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumber && errors.phoneNumber.message}
+                        </p>
+                      )}
                     </div>
                     <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="phoneNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.phoneNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumberExt &&
+                            errors.phoneNumberExt.message}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -433,7 +382,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -456,7 +405,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -481,38 +430,18 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="faxNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.faxNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumber && errors.faxNumber.message}
+                        </p>
+                      )}
                     </div>
                     <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="faxNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.faxNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumberExt && errors.faxNumberExt.message}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -524,7 +453,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -544,21 +473,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="companyEmail">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.companyEmail && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.companyEmail && errors.companyEmail.message}
+                      </p>
+                    )}
                   </div>
                 </div>
               </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
new file mode 100644
index 0000000..4015911
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Query = () => {
+  return <div>Isi Query</div>;
+};
+
+export default Query;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index a04dfef..0e65268 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -230,7 +230,20 @@ export const GeneralController = ({ children }) => {
     triggerValidation("district");
   };
 
-  const val = ["business_type", "country", "province", "city", "district"];
+  const val = [
+    "branchName",
+    "address",
+    "postalCode",
+    "country",
+    "province",
+    "city",
+    "district",
+    "phoneNumber",
+    "phoneNumberExt",
+    "faxNumber",
+    "faxNumberExt",
+    "companyEmail",
+  ];
 
   const _handleOnSubmitSelect = async () => {
     if (await triggerValidation(val)) {

From cc0ce27ab94a4ddcf5b3d3a09f5e8381859618d2 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 17:32:36 +0700
Subject: [PATCH 15/43] validation fix

---
 .../Component/General/Component/General.tsx   | 10 +----
 .../Component/General/Component/Modal.tsx     | 30 ++++++-------
 .../Component/General/Controller.tsx          | 45 +++++++------------
 3 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index d74b6bf..c7d506a 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -6,9 +6,7 @@ import { MainApp } from "../../../../../../Components";
 import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
-  const { open, setOpen, _handleOnSubmitSelect, handleSubmit } = useContext(
-    GeneralContext
-  );
+  const { open, setOpen, _handleSubmit } = useContext(GeneralContext);
 
   return (
     <MainApp
@@ -39,11 +37,7 @@ const GeneralComponent = () => {
           onActionOne={() => {
             setOpen(false);
           }}
-          onActionTwo={async () => {
-            _handleOnSubmitSelect();
-            // handleSubmit();
-          }}
-          // onActionTwo={handleSubmit()}
+          onActionTwo={async () => _handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index f96d2e8..c9f9175 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { ErrorMessage, useFormContext } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
@@ -25,7 +25,7 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
-    registerSelect,
+    register,
     // errors,
   } = useContext(GeneralContext);
   // const { errors: errorsSelect } = useFormContext();
@@ -49,7 +49,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -85,7 +85,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -148,7 +148,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -188,7 +188,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -229,7 +229,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -267,7 +267,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -309,7 +309,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={registerSelect({
+                        ref={register({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -332,7 +332,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -382,7 +382,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -397,7 +397,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
                         placeholder="Nomor Faksimile"
                       />
                     </div>
@@ -405,7 +405,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -420,7 +420,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
                         placeholder="Ext."
                       />
                     </div>
@@ -453,7 +453,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index 0e65268..d994aeb 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -7,7 +7,6 @@ interface InitialState {
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  registerSelect: Function;
   _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
@@ -42,10 +41,8 @@ interface InitialState {
   _handleCity: Function;
   _onValidate: Function;
   _handleDistrict: Function;
-  _handleOnSubmitSelect: Function;
+  _handleSubmit: Function;
   register: Function;
-  handleSubmit: Function;
-  errors: object;
 }
 
 const initialState = {
@@ -53,7 +50,7 @@ const initialState = {
   _isLogin: null,
   open: false,
   setOpen: () => {},
-  registerSelect: () => {},
+  register: () => {},
   _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
@@ -88,10 +85,7 @@ const initialState = {
   _handleCity: () => {},
   _handleDistrict: () => {},
   _onValidate: () => {},
-  _handleOnSubmitSelect: () => {},
-  register: () => {},
-  handleSubmit: () => {},
-  errors: {},
+  _handleSubmit: () => {},
 };
 
 export const GeneralContext = createContext<InitialState>(initialState);
@@ -136,18 +130,14 @@ export const GeneralController = ({ children }) => {
     }),
   };
 
-  const { register, handleSubmit, errors } = useForm({
-    validateCriteriaMode: "all",
-    mode: "onChange",
-  });
   // FormContext
   const methods = useForm({
     mode: "onChange",
   });
-  const { register: registerSelect, setValue, triggerValidation } = methods;
+  const { register, setValue, triggerValidation } = methods;
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "business_type" },
       {
         required: true,
@@ -156,10 +146,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "country" },
       {
         required: true,
@@ -168,10 +158,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "province" },
       {
         required: true,
@@ -180,10 +170,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "city" },
       {
         required: true,
@@ -192,10 +182,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "district" },
       {
         required: true,
@@ -204,7 +194,7 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   const _handleCountry = (e: any) => {
     setCountry(e && e.value);
@@ -245,7 +235,7 @@ export const GeneralController = ({ children }) => {
     "companyEmail",
   ];
 
-  const _handleOnSubmitSelect = async () => {
+  const _handleSubmit = async () => {
     if (await triggerValidation(val)) {
       console.log("Sukses");
     } else {
@@ -265,7 +255,6 @@ export const GeneralController = ({ children }) => {
           _isLogin,
           open,
           setOpen,
-          registerSelect,
           _onSubmit,
           optionsCompanyType,
           Indonesia,
@@ -300,10 +289,8 @@ export const GeneralController = ({ children }) => {
           _handleCity,
           _handleDistrict,
           _onValidate,
-          _handleOnSubmitSelect,
+          _handleSubmit,
           register,
-          handleSubmit,
-          errors,
         }}
       >
         {children}

From ef26dc04e57751e52dab60e5221e04867f01ca03 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:48:57 +0700
Subject: [PATCH 16/43] add modal & validation form new entry

---
 .../Component/General/Component/Modal.tsx     |  38 ++-
 .../Component/General/Component/Query.tsx     |   7 -
 .../Component/General/Component/Table.tsx     | 261 ++++++++++--------
 .../Component/General/Controller.tsx          |  45 ++-
 .../VendorProfile/Component/General/Query.ts  |  49 ++++
 .../Private/VendorProfile/Controller.tsx      |  28 +-
 6 files changed, 288 insertions(+), 140 deletions(-)
 delete mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index c9f9175..edb6faf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -20,15 +20,14 @@ const ModalComponent = () => {
     setPhoneNumberExt,
     setFaxNumber,
     setFaxNumberExt,
+    setWebsite,
     setCompanyEmail,
     optionsCompanyType,
     Indonesia,
     Yogya,
     Sleman,
     register,
-    // errors,
   } = useContext(GeneralContext);
-  // const { errors: errorsSelect } = useFormContext();
   const { errors } = useFormContext();
 
   return (
@@ -445,6 +444,41 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Situs</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="website"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setWebsite(val.target.value)}
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                      placeholder="example.com"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.website && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.website && errors.website.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
deleted file mode 100644
index 4015911..0000000
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const Query = () => {
-  return <div>Isi Query</div>;
-};
-
-export default Query;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
index fa1398c..5ec0db4 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import "../../../../../../Assets/Css/App.css";
+import { HomeContext } from "../../../Controller";
 
 const Table = () => {
+  const { generalList } = useContext(HomeContext);
+  console.log("CEK", generalList);
+
   return (
     <div>
       <table className="w-full">
@@ -27,115 +31,152 @@ const Table = () => {
             </th>
           </tr>
         </thead>
-        <tbody>
-          <tr className="hover:bg-gray-200">
-            <td
-              className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
-              rowSpan={13}
-            >
-              1.
-            </td>
-            <td className="border border-gray-400 py-1 px-4">
-              Nama Perusahaan
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4">Dipersiapkan</td>
-            <td
-              className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
-              rowSpan={13}
-            >
-              <button
-                title="Ubah Perusahaan"
-                // onClick={() => controller.setOpen(true)}
-              >
-                <svg
-                  className="fill-current text-blue-700 w-3 h-3"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 576 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-                  ></path>
-                </svg>
-              </button>
-            </td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              Kategori Lokasi
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Negara</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Provinsi</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kota</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kecamatan</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">alamat</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Nomor Telepon</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              Nomor Faksimile
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Situs</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              E-mail Perusahaan
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <td className="border border-gray-400 py-1 px-4" colSpan={4}></td>
-        </tbody>
+        {generalList && Object.keys(generalList)}
+        {/* <tbody>
+          {generalList &&
+            generalList.map((e: any, i: any) => (
+              <Fragment key={i}>
+                <tr className="hover:bg-gray-200">
+                  <td
+                    className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
+                    rowSpan={13}
+                  >
+                    {i + 1}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nama Perusahaan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.companyName}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    Dipersiapkan
+                  </td>
+                  <td
+                    className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
+                    rowSpan={13}
+                  >
+                    <button
+                      title="Ubah Perusahaan"
+                      // onClick={() => controller.setOpen(true)}
+                    >
+                      <svg
+                        className="fill-current text-blue-700 w-3 h-3"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 576 512"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Kategori Lokasi
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.address}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Negara</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.county}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Provinsi</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.province}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Kota</td>
+                  <td className="border border-gray-400 py-1 px-4">{e.city}</td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Kecamatan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.district}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.postalCode}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">alamat</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.address}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nomor Telepon
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.phoneNumber}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nomor Faksimile
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.faxNumber}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Situs</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.website}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    E-mail Perusahaan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.eMail}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <td
+                  className="border border-gray-400 py-1 px-4"
+                  colSpan={4}
+                ></td>
+              </Fragment>
+            ))}
+        </tbody> */}
       </table>
     </div>
   );
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index d994aeb..9e515a6 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -1,13 +1,14 @@
 import React, { createContext, useState, useEffect } from "react";
 import { useForm, FormContext } from "react-hook-form";
 import { getToken } from "../../../../../../Misc/Cookies";
+import { INSERT_VENDOR_CONTACT } from "./Query";
+import { useMutation } from "react-apollo";
 
 interface InitialState {
   customStyles: object;
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
   Yogya: Array<object>;
@@ -23,6 +24,7 @@ interface InitialState {
   phoneNumberExt: string;
   faxNumber: string;
   faxNumberExt: string;
+  website: string;
   companyEmail: string;
   setBranchName: Function;
   setAddress: Function;
@@ -36,10 +38,10 @@ interface InitialState {
   setFaxNumber: Function;
   setFaxNumberExt: Function;
   setCompanyEmail: Function;
+  setWebsite: Function;
   _handleCountry: Function;
   _handleProvince: Function;
   _handleCity: Function;
-  _onValidate: Function;
   _handleDistrict: Function;
   _handleSubmit: Function;
   register: Function;
@@ -51,7 +53,6 @@ const initialState = {
   open: false,
   setOpen: () => {},
   register: () => {},
-  _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
   Yogya: [{}],
@@ -80,11 +81,12 @@ const initialState = {
   setFaxNumberExt: () => {},
   companyEmail: "",
   setCompanyEmail: () => {},
+  website: "",
+  setWebsite: () => {},
   _handleCountry: () => {},
   _handleProvince: () => {},
   _handleCity: () => {},
   _handleDistrict: () => {},
-  _onValidate: () => {},
   _handleSubmit: () => {},
 };
 
@@ -109,9 +111,9 @@ export const GeneralController = ({ children }) => {
   const [phoneNumberExt, setPhoneNumberExt] = useState("");
   const [faxNumber, setFaxNumber] = useState("");
   const [faxNumberExt, setFaxNumberExt] = useState("");
+  const [website, setWebsite] = useState("");
   const [companyEmail, setCompanyEmail] = useState("");
 
-  const _onSubmit = (value) => console.log("Validate", value);
   const optionsCompanyType = [
     {
       label: "10 dari 255 (harap ketik untuk memfilter)",
@@ -223,30 +225,47 @@ export const GeneralController = ({ children }) => {
   const val = [
     "branchName",
     "address",
-    "postalCode",
     "country",
     "province",
     "city",
     "district",
+    "postalCode",
     "phoneNumber",
     "phoneNumberExt",
     "faxNumber",
     "faxNumberExt",
+    "website",
     "companyEmail",
   ];
 
+  // Add
+  const [submitAdd] = useMutation(INSERT_VENDOR_CONTACT, {
+    errorPolicy: "all",
+  });
+
   const _handleSubmit = async () => {
     if (await triggerValidation(val)) {
-      console.log("Sukses");
+      try {
+        await submitAdd({
+          variables: {
+            company_name: branchName,
+            address,
+            country,
+            province,
+            city,
+            district,
+            postal_code: postalCode,
+            phone_number: phoneNumber,
+            website,
+            e_mail: companyEmail,
+          },
+        });
+      } catch (error) {}
     } else {
       console.log("Gagal");
     }
   };
 
-  const _onValidate = async () => {
-    console.log("validation");
-  };
-
   return (
     <FormContext {...methods}>
       <GeneralProvider
@@ -255,7 +274,6 @@ export const GeneralController = ({ children }) => {
           _isLogin,
           open,
           setOpen,
-          _onSubmit,
           optionsCompanyType,
           Indonesia,
           Yogya,
@@ -271,6 +289,7 @@ export const GeneralController = ({ children }) => {
           phoneNumberExt,
           faxNumber,
           faxNumberExt,
+          website,
           companyEmail,
           setBranchName,
           setAddress,
@@ -284,11 +303,11 @@ export const GeneralController = ({ children }) => {
           setFaxNumber,
           setFaxNumberExt,
           setCompanyEmail,
+          setWebsite,
           _handleCountry,
           _handleProvince,
           _handleCity,
           _handleDistrict,
-          _onValidate,
           _handleSubmit,
           register,
         }}
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
new file mode 100644
index 0000000..e563fb6
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
@@ -0,0 +1,49 @@
+import gql from "graphql-tag";
+
+export const GENERAL_LIST = gql`
+  {
+    GetVendorContacts {
+      id
+      companyName
+      address
+      county
+      province
+      city
+      district
+      phoneNumber
+      faxNumber
+      website
+      eMail
+    }
+  }
+`;
+
+export const INSERT_VENDOR_CONTACT = gql`
+  mutation(
+    $company_name: String
+    $address: String
+    $country: String
+    $province: String
+    $city: String
+    $district: String
+    $postal_code: Int
+    $phone_number: String
+    $website: String
+    $e_mail: String
+  ) {
+    InsertVendorContact(
+      data: {
+        company_name: $company_name
+        address: $address
+        country: $country
+        province: $province
+        city: $city
+        district: $district
+        postal_code: $postal_code
+        phone_number: $phone_number
+        website: $website
+        e_mail: $e_mail
+      }
+    )
+  }
+`;
diff --git a/src/App/Container/Views/Private/VendorProfile/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
index 60bdce9..f809a34 100644
--- a/src/App/Container/Views/Private/VendorProfile/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
@@ -1,9 +1,21 @@
-import React from 'react'
-
-export const HomeController = () => {
-    return (
-        <div>
-            Home Controller
-        </div>
-    )
+import React, { createContext } from "react";
+import { useQuery } from "react-apollo";
+import { GENERAL_LIST } from "../VendorProfile/Component/General/Query";
+
+interface InitialState {
+  generalList: object;
 }
+
+const initialState = {
+  generalList: {},
+};
+
+export const HomeContext = createContext<InitialState>(initialState);
+
+export const { Provider: HomeProvider, Consumer: HomeConsumer } = HomeContext;
+
+export const HomeController = ({ children }) => {
+  const { data: generalList } = useQuery(GENERAL_LIST);
+
+  return <HomeProvider value={{ generalList }}>{children}</HomeProvider>;
+};

From 9bb951c431910d2a803596cdada7524f50b23191 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:58:33 +0700
Subject: [PATCH 17/43] fix

---
 .../Private/VendorProfile/Component/General/Component/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index edb6faf..9d23089 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -36,7 +36,7 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form>
+        <form onSubmit={handleSubmit(_onValidate())}>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">

From ab1accb3dbe3889022a85efabdf422753d979c53 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:59:22 +0700
Subject: [PATCH 18/43] fix

---
 .../Private/VendorProfile/Component/General/Component/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 9d23089..edb6faf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -36,7 +36,7 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form onSubmit={handleSubmit(_onValidate())}>
+        <form>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">

From de701bd782213541c58fa384b660f81e2838b420 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:00:43 +0700
Subject: [PATCH 19/43] fix

---
 .../Component/General/Component/Modal.tsx     | 22 +++++++++----------
 .../Component/General/Component/Query.tsx     |  7 ++++++
 2 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index edb6faf..df66bf1 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -48,7 +48,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -84,7 +84,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -147,7 +147,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -187,7 +187,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -228,7 +228,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -266,7 +266,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -308,7 +308,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={register({
+                        ref={registerSelect({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -331,7 +331,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -381,7 +381,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -404,7 +404,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -487,7 +487,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
new file mode 100644
index 0000000..4015911
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Query = () => {
+  return <div>Isi Query</div>;
+};
+
+export default Query;

From 0a44fc2acdebfd38259204960e4f4e1f300403da Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:01:22 +0700
Subject: [PATCH 20/43] fix

---
 .../Component/General/Component/Modal.tsx     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index df66bf1..edb6faf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -48,7 +48,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -84,7 +84,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -147,7 +147,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -187,7 +187,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -228,7 +228,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -266,7 +266,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -308,7 +308,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={registerSelect({
+                        ref={register({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -331,7 +331,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -381,7 +381,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -404,7 +404,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -487,7 +487,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,

From e1a0bae970a2ef283b69c4b7f4d1e08190075d18 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:48:57 +0700
Subject: [PATCH 21/43] add modal & validation form new entry

---
 .../VendorProfile/Component/General/Component/Query.tsx    | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
deleted file mode 100644
index 4015911..0000000
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const Query = () => {
-  return <div>Isi Query</div>;
-};
-
-export default Query;

From 2f638d189b345e0fbc2b56e1cf5d00511be26f07 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:29:03 +0700
Subject: [PATCH 22/43] fix button

---
 src/App/Container/Components/MainApp/View.tsx | 108 ++-----
 .../Component/General/Component/General.tsx   |  54 +++-
 .../Component/General/Component/Table.tsx     | 284 +++++++++---------
 3 files changed, 205 insertions(+), 241 deletions(-)

diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 8c96a67..7892bf1 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -1,89 +1,25 @@
 import React from "react";
 
-export const MainApp = ({
-  title,
-  children,
-  onActionRefresh = () => {},
-  onActionDone = () => {},
-  onActionNew = () => {},
-  onActionPrimary = () => {},
-}) => {
+export const MainApp = ({ title, children, button = {} }) => {
   return (
     <div className="w-full h-full">
-      <table className="w-full">
-        <thead className="w-full border-b-2 bg-gray-200">
-          <tr>
-            <td className="flex flex-row whitespace-no-wrap justify-between text-left pl-6 text-gray-600 text-sm font-bold">
-              <div className="my-2">
-                <span>{title}</span>
-              </div>
-              <div className="text-xs my-1 mr-6 flex flex-row items-center">
-                {onActionRefresh.toString() !== "() => {}" && (
-                  <div onClick={onActionRefresh}>
-                    <button className="my-0 mr-6">
-                      <svg
-                        className="fill-current h-3 w-3 text-blue-800"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 512 512"
-                      >
-                        <path
-                          fill="currentColor"
-                          d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
-                        ></path>
-                      </svg>
-                    </button>
-                  </div>
-                )}
-                {onActionPrimary.toString() !== "() => {}" && (
-                  <button
-                    className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500"
-                    onClick={onActionPrimary}
-                  >
-                    <svg
-                      className="fill-current h-3 w-3 mr-2"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 18 18"
-                    >
-                      <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
-                    </svg>
-                    <span>Set Primary Data</span>
-                  </button>
-                )}
-                {onActionDone.toString() !== "() => {}" && (
-                  <button
-                    className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-blue-800"
-                    onClick={onActionDone}
-                  >
-                    Selesai
-                  </button>
-                )}
-                {onActionNew.toString() !== "() => {}" && (
-                  <button
-                    className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600"
-                    onClick={onActionNew}
-                  >
-                    <svg
-                      className="fill-current w-3 mr-2"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 5 5"
-                    >
-                      <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
-                    </svg>
-                    <span>Buat Entri Baru</span>
-                  </button>
-                )}
-              </div>
-            </td>
-          </tr>
-        </thead>
-        <tbody className="w-full bg-white">
-          <tr>
-            <td className="text-left py-3 px-6">{children}</td>
-          </tr>
-        </tbody>
-        <tfoot className="w-full">
-          <tr>
-            <td className="text-left py-3 px-6">
+      <div className="w-full">
+        <div className="w-full border-b-2 bg-gray-200">
+          <div className="flex flex-row justify-between">
+            <div className="text-left py-2 pl-6 text-gray-600 text-sm font-semibold">
+              {title}
+            </div>
+            {button}
+          </div>
+        </div>
+        <div className="w-full bg-white">
+          <div>
+            <div className="text-left py-3 px-6">{children}</div>
+          </div>
+        </div>
+        <div className="w-full">
+          <div>
+            <div className="text-left py-3 px-6">
               <p className="text-xs text-gray-700 font-semibold">Perhatian :</p>
               <p className="text-xs text-gray-700 text-justify">
                 This program is protected by copyright law and international
@@ -92,10 +28,10 @@ export const MainApp = ({
                 penalties, and will be prosecuted to the maximum extent under
                 the law.
               </p>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index c7d506a..515f966 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -8,13 +8,55 @@ import ModalComponent from "./Modal";
 const GeneralComponent = () => {
   const { open, setOpen, _handleSubmit } = useContext(GeneralContext);
 
+  const ButtonMainApp = () => {
+    return (
+      <div className="text-xs mr-6 flex flex-row items-center">
+        <div>
+          <button className="my-0 mr-6">
+            <svg
+              className="fill-current h-3 w-3 text-blue-800"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+            >
+              <path
+                fill="currentColor"
+                d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        {/* <button className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500">
+          <svg
+            className="fill-current h-3 w-3 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 18 18"
+          >
+            <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
+          </svg>
+          <span>Set Primary Data</span>
+        </button> */}
+        <button className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-blue-800">
+          Selesai
+        </button>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600"
+        >
+          <svg
+            className="fill-current w-3 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 5 5"
+          >
+            <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
+          </svg>
+          <span>Buat Entri Baru</span>
+        </button>
+      </div>
+    );
+  };
+
   return (
-    <MainApp
-      title="PROFIL PERUSAHAAN"
-      onActionRefresh={() => alert("Ok")}
-      onActionDone={() => alert("Done")}
-      onActionNew={() => setOpen(true)}
-    >
+    <MainApp title="PROFIL PERUSAHAAN" button={<ButtonMainApp />}>
       <div className="flex flex-col">
         <div className="w-full flex flex-col w-4/5 bg-white text-sm">
           <div className="flex flex-row py-6">
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
index 5ec0db4..fb8e7b2 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
@@ -1,11 +1,7 @@
 import React, { useContext } from "react";
 import "../../../../../../Assets/Css/App.css";
-import { HomeContext } from "../../../Controller";
 
 const Table = () => {
-  const { generalList } = useContext(HomeContext);
-  console.log("CEK", generalList);
-
   return (
     <div>
       <table className="w-full">
@@ -31,152 +27,142 @@ const Table = () => {
             </th>
           </tr>
         </thead>
-        {generalList && Object.keys(generalList)}
-        {/* <tbody>
-          {generalList &&
+        <tbody>
+          {/* {generalList &&
             generalList.map((e: any, i: any) => (
-              <Fragment key={i}>
-                <tr className="hover:bg-gray-200">
-                  <td
-                    className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
-                    rowSpan={13}
-                  >
-                    {i + 1}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    Nama Perusahaan
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.companyName}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    Dipersiapkan
-                  </td>
-                  <td
-                    className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
-                    rowSpan={13}
-                  >
-                    <button
-                      title="Ubah Perusahaan"
-                      // onClick={() => controller.setOpen(true)}
-                    >
-                      <svg
-                        className="fill-current text-blue-700 w-3 h-3"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 576 512"
-                      >
-                        <path
-                          fill="currentColor"
-                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-                        ></path>
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Kategori Lokasi
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.address}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Negara</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.county}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Provinsi</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.province}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Kota</td>
-                  <td className="border border-gray-400 py-1 px-4">{e.city}</td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Kecamatan
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.district}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.postalCode}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">alamat</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.address}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Nomor Telepon
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.phoneNumber}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Nomor Faksimile
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.faxNumber}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Situs</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.website}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    E-mail Perusahaan
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.eMail}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <td
-                  className="border border-gray-400 py-1 px-4"
-                  colSpan={4}
-                ></td>
-              </Fragment>
-            ))}
-        </tbody> */}
+              <Fragment key={i}> */}
+          <tr className="hover:bg-gray-200">
+            <td
+              className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
+              rowSpan={13}
+            >
+              {/* {i + 1} */}1
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              Nama Perusahaan
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.companyName} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">Dipersiapkan</td>
+            <td
+              className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
+              rowSpan={13}
+            >
+              <button
+                title="Ubah Perusahaan"
+                // onClick={() => controller.setOpen(true)}
+              >
+                <svg
+                  className="fill-current text-blue-700 w-3 h-3"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 576 512"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                  ></path>
+                </svg>
+              </button>
+            </td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">
+              Kategori Lokasi
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.address} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Negara</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.county} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Provinsi</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.province} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Kota</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.city} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Kecamatan</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.district} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.postalCode} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">alamat</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.address} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Nomor Telepon</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.phoneNumber} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">
+              Nomor Faksimile
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.faxNumber} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Situs</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.website} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">
+              E-mail Perusahaan
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.eMail} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <td className="border border-gray-400 py-1 px-4" colSpan={4}></td>
+        </tbody>
       </table>
     </div>
   );

From ac0979fffe307f67f6def6b944e49f97abe25ac2 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:57:37 +0700
Subject: [PATCH 23/43] fix

---
 src/App/Container/Assets/Css/main.css         | 12 ++++++++++++
 src/App/Container/Components/MainApp/View.tsx | 11 ++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/App/Container/Assets/Css/main.css b/src/App/Container/Assets/Css/main.css
index ef6823f..351e8f3 100644
--- a/src/App/Container/Assets/Css/main.css
+++ b/src/App/Container/Assets/Css/main.css
@@ -1050,10 +1050,22 @@ video {
   background-color: #162f42;
 }
 
+.bg-bluepindad-300 {
+  background-color: #0078a9
+}
+
 .bg-yellowpindad-100 {
   background-color: #D4AF37;
 }
 
+.bg-orangepindad-100 {
+  background-color: #EC971F
+}
+
+.bg-greenpindad-100 {
+  background-color: #449D44
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 243cfbb..1ca53a0 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -1,6 +1,15 @@
 import React from "react";
 
-export const MainApp = ({ title, children }) => {
+export const MainApp = ({
+  title,
+  children,
+  textDone = "",
+  textNew = "",
+  classNameDone = "bg-white hover:bg-gray-300 border border-gray-400 text-gray-800",
+  classNameNew = "focus:outline-none bg-blue-600 hover:bg-blue-800 text-white",
+  onActionOne = () => {},
+  onActionTwo = () => {},
+}) => {
   return (
     <div className="w-full h-full overflow-y-auto">
       <div className="w-full border-b-2 bg-gray-200">

From 83e36a329ac6fa2b51937d9124791b5646951f5f Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:57:58 +0700
Subject: [PATCH 24/43] fix

---
 src/App/Container/Components/MainApp/View.tsx          | 10 ++++------
 .../Private/VendorProfile/Component/General/View.tsx   |  7 ++++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 1ca53a0..d7836d9 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -3,12 +3,10 @@ import React from "react";
 export const MainApp = ({
   title,
   children,
-  textDone = "",
-  textNew = "",
-  classNameDone = "bg-white hover:bg-gray-300 border border-gray-400 text-gray-800",
-  classNameNew = "focus:outline-none bg-blue-600 hover:bg-blue-800 text-white",
-  onActionOne = () => {},
-  onActionTwo = () => {},
+  onActionRefresh = () => {},
+  onActionDone = () => {},
+  onActionNew = () => {},
+  onActionPrimary = () => {},
 }) => {
   return (
     <div className="w-full h-full overflow-y-auto">
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index 47a1713..f755564 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -4,7 +4,12 @@ import GeneralComponent from "./Component/General";
 
 const General = () => {
   return (
-    <MainApp title="PROFIL PERUSAHAAN">
+    <MainApp
+      title="PROFIL PERUSAHAAN"
+      onActionRefresh={() => alert("Ok")}
+      onActionDone={() => alert("Done")}
+      onActionNew={() => alert("New")}
+    >
       <GeneralComponent />
     </MainApp>
   );

From c6d517d09ec38f222e48062d0e3cb2e72bb5a476 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 14:13:03 +0700
Subject: [PATCH 25/43] add modal

---
 .../Component/General/Component/General.tsx   |  52 +-
 .../Component/General/Component/Modal.tsx     | 517 ++++++++++++++++++
 .../Component/General/Controller.tsx          | 213 ++++++++
 .../VendorProfile/Component/General/View.tsx  |  11 +-
 4 files changed, 773 insertions(+), 20 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 3b5f13a..9653fe6 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -1,21 +1,49 @@
-import React from "react";
+import React, { useContext } from "react";
 import Table from "./Table";
+import { Modal } from "../../../../../../Components";
+import { GeneralContext } from "../Controller";
+import { MainApp } from "../../../../../../Components";
+import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
+  const { open, setOpen } = useContext(GeneralContext);
+
   return (
-    <div className="flex flex-col">
-      <div className="w-full flex flex-col w-4/5 bg-white text-sm">
-        <div className="flex flex-row py-6">
-          <label className="w-1/5 text-right px-4 font-bold">
-            Nama Perusahaan
-          </label>
-          <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
-        </div>
-        <div>
-          <Table />
+    <MainApp
+      title="PROFIL PERUSAHAAN"
+      onActionRefresh={() => alert("Ok")}
+      onActionDone={() => alert("Done")}
+      onActionNew={() => setOpen(true)}
+    >
+      <div className="flex flex-col">
+        <div className="w-full flex flex-col w-4/5 bg-white text-sm">
+          <div className="flex flex-row py-6">
+            <label className="w-1/5 text-right px-4 font-bold">
+              Nama Perusahaan
+            </label>
+            <label className="w-4/5 text-left px-4">PINDAD JAYA</label>
+          </div>
+          <div>
+            <Table />
+          </div>
         </div>
+        <Modal
+          title="Perusahaan"
+          open={open}
+          width="w-3/5"
+          onClose={() => {
+            setOpen(false);
+          }}
+          onActionOne={() => {
+            setOpen(false);
+          }}
+          textOne="Batal"
+          textTwo="Simpan"
+        >
+          <ModalComponent />
+        </Modal>
       </div>
-    </div>
+    </MainApp>
   );
 };
 
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
new file mode 100644
index 0000000..8b412cb
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -0,0 +1,517 @@
+import React, { useContext } from "react";
+import { ErrorMessage } from "react-hook-form";
+import Select from "react-select";
+import { GeneralContext } from "../Controller";
+
+const ModalComponent = () => {
+  const {
+    customStyles,
+    register,
+    errors,
+    setBranchName,
+    setAddress,
+    country,
+    setCountry,
+    province,
+    setProvince,
+    city,
+    setCity,
+    setSubDistrict,
+    setPostalCode,
+    setPhoneNumber,
+    setPhoneNumberExt,
+    setFaxNumber,
+    setFaxNumberExt,
+    setCompanyEmail,
+    optionsCompanyType,
+    Indonesia,
+    Yogya,
+    Sleman,
+  } = useContext(GeneralContext);
+
+  return (
+    <div className="bg-white">
+      <div className="block text-xs">
+        <div className="py-1 px-4 mt-6">
+          <span className="text-gray-900 text-2xl">Use as Branch Office</span>
+        </div>
+        <form>
+          <div className="w-full">
+            <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nama Cabang/Lokasi Cabang</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="branchName"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setBranchName(val.target.value)}
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Nama Cabang/Lokasi Cabang"
+                    />
+                    <ErrorMessage errors={errors} name="branchName">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Alamat</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <textarea
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Alamat"
+                      name="address"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setAddress(val.target.value)}
+                    />
+                    <ErrorMessage errors={errors} name="address">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Negara</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="country"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setCountry(val.value) : setCountry("")
+                      }
+                      options={optionsCompanyType}
+                      placeholder="Negara"
+                    />
+                    <ErrorMessage errors={errors} name="country">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Provinsi</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="province"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setProvince(val.value) : setProvince("")
+                      }
+                      options={country === "Indonesia" ? Indonesia : null}
+                      placeholder="Provinsi"
+                      isDisabled={country ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="province">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kota/Kabupaten</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="city"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      // value={Yogya.find((val) => val.value === city)}
+                      onChange={(val) =>
+                        val ? setCity(val.value) : setCity("")
+                      }
+                      options={Yogya}
+                      placeholder="Kota/Kabupaten"
+                      isDisabled={country && province ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="city">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label className="w-full">Kecamatan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    <Select
+                      styles={customStyles}
+                      name="subDistrict"
+                      isClearable
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) =>
+                        val ? setSubDistrict(val.value) : setSubDistrict("")
+                      }
+                      options={city === "Sleman" ? Sleman : null}
+                      placeholder="Kecamatan"
+                      isDisabled={country && province && city ? false : true}
+                    />
+                    <ErrorMessage errors={errors} name="subDistrict">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Kode Pos</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="number"
+                      name="postalCode"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setPostalCode(val.target.value)}
+                      className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="Kode Pos"
+                    />
+                    <ErrorMessage errors={errors} name="postalCode">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+              </div>
+              {/* Right */}
+              <div className="w-full py-4">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        name="phoneNumber"
+                        ref={register({
+                          required: "This is required",
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                          pattern: /^\+{1}[62]{2}[0-9]{1,20}$/i,
+                        })}
+                        onChange={(val) => setPhoneNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="+62xx-xxxxxxxxxxxx"
+                      />
+                      <ErrorMessage errors={errors} name="phoneNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                      <ErrorMessage errors={errors} name="phoneNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Faksimile</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <input
+                        type="number"
+                        name="faxNumber"
+                        ref={register({
+                          required: "This is required",
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumber(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Nomor Faksimile"
+                      />
+                      <ErrorMessage errors={errors} name="faxNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        type="number"
+                        name="faxNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 8,
+                            message: "This inpus is less than 8 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This inpus is more than 30 characters",
+                          },
+                        })}
+                        onChange={(val) => setFaxNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                      <ErrorMessage errors={errors} name="faxNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>E-mail Perusahaan</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="companyEmail"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setCompanyEmail(val.target.value)}
+                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      placeholder="me@example.com"
+                    />
+                    <ErrorMessage errors={errors} name="companyEmail">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ModalComponent;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
new file mode 100644
index 0000000..b3bce41
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -0,0 +1,213 @@
+import React, { createContext, useState } from "react";
+import { useForm } from "react-hook-form";
+import { getToken } from "../../../../../../Misc/Cookies";
+
+interface InitialState {
+  customStyles: object;
+  _isLogin: string | null;
+  open: boolean;
+  setOpen: Function;
+  register: Function;
+  handleSubmit: Function;
+  errors: object;
+  _onSubmit: Function;
+  optionsCompanyType: Array<object>;
+  Indonesia: Array<object>;
+  Yogya: Array<object>;
+  Sleman: Array<object>;
+  columns: Array<object>;
+  branchName: string;
+  address: string;
+  country: string;
+  province: string;
+  city: string;
+  subDistrict: string;
+  postalCode: string;
+  phoneNumber: string;
+  phoneNumberExt: string;
+  faxNumber: string;
+  faxNumberExt: string;
+  companyEmail: string;
+  setBranchName: Function;
+  setAddress: Function;
+  setCountry: Function;
+  setProvince: Function;
+  setCity: Function;
+  setSubDistrict: Function;
+  setPostalCode: Function;
+  setPhoneNumber: Function;
+  setPhoneNumberExt: Function;
+  setFaxNumber: Function;
+  setFaxNumberExt: Function;
+  setCompanyEmail: Function;
+}
+
+const initialState = {
+  customStyles: {},
+  _isLogin: null,
+  open: false,
+  setOpen: () => {},
+  register: () => {},
+  handleSubmit: () => {},
+  errors: {},
+  _onSubmit: () => {},
+  optionsCompanyType: [{}],
+  Indonesia: [{}],
+  Yogya: [{}],
+  Sleman: [{}],
+  columns: [{}],
+  branchName: "",
+  setBranchName: () => {},
+  address: "",
+  setAddress: () => {},
+  country: "",
+  setCountry: () => {},
+  province: "",
+  setProvince: () => {},
+  city: "",
+  setCity: () => {},
+  subDistrict: "",
+  setSubDistrict: () => {},
+  postalCode: "",
+  setPostalCode: () => {},
+  phoneNumber: "",
+  setPhoneNumber: () => {},
+  phoneNumberExt: "",
+  setPhoneNumberExt: () => {},
+  faxNumber: "",
+  setFaxNumber: () => {},
+  faxNumberExt: "",
+  setFaxNumberExt: () => {},
+  companyEmail: "",
+  setCompanyEmail: () => {},
+};
+
+export const GeneralContext = createContext<InitialState>(initialState);
+
+export const {
+  Provider: GeneralProvider,
+  Consumer: GeneralConsumer,
+} = GeneralContext;
+
+export const GeneralController = ({ children }) => {
+  const _isLogin = getToken();
+  const [open, setOpen] = useState(false);
+  const { register, handleSubmit, errors } = useForm({
+    validateCriteriaMode: "all",
+    mode: "onChange",
+  });
+  const [branchName, setBranchName] = useState("");
+  const [address, setAddress] = useState("");
+  const [country, setCountry] = useState("");
+  const [province, setProvince] = useState("");
+  const [city, setCity] = useState("");
+  const [subDistrict, setSubDistrict] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [phoneNumberExt, setPhoneNumberExt] = useState("");
+  const [faxNumber, setFaxNumber] = useState("");
+  const [faxNumberExt, setFaxNumberExt] = useState("");
+  const [companyEmail, setCompanyEmail] = useState("");
+  const _onSubmit = (value) => console.log("Validate", value);
+  const optionsCompanyType = [
+    {
+      label: "10 dari 255 (harap ketik untuk memfilter)",
+      isDisabled: true,
+    },
+    { value: "Indonesia", label: "Indonesia" },
+  ];
+  const Indonesia = [{ value: "Yogyakarta", label: "Yogyakarta" }];
+  const Yogya = [{ value: "Sleman", label: "Sleman" }];
+  const Sleman = [{ value: "Ngaglik", label: "Ngaglik" }];
+  const customStyles = {
+    control: (base) => ({
+      ...base,
+      height: 32,
+      minHeight: 32,
+    }),
+  };
+  const columns = [
+    {
+      label: "No",
+      accessor: "no",
+      width: "w-auto",
+      align: "text-center",
+    },
+    {
+      label: "Detail",
+      accessor: "detail",
+      width: "w-2/5",
+      align: "text-left",
+    },
+    {
+      label: "Data Saat Ini",
+      accessor: "oldData",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Data Baru",
+      accessor: "newData",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Status",
+      accessor: "status",
+      width: "w-1/5",
+      align: "text-left",
+    },
+    {
+      label: "Aksi",
+      accessor: "aksi",
+      width: "w-auto",
+      align: "text-left",
+    },
+  ];
+
+  return (
+    <GeneralProvider
+      value={{
+        customStyles,
+        _isLogin,
+        open,
+        setOpen,
+        register,
+        handleSubmit,
+        errors,
+        _onSubmit,
+        optionsCompanyType,
+        Indonesia,
+        Yogya,
+        Sleman,
+        columns,
+        branchName,
+        address,
+        country,
+        province,
+        city,
+        subDistrict,
+        postalCode,
+        phoneNumber,
+        phoneNumberExt,
+        faxNumber,
+        faxNumberExt,
+        companyEmail,
+        setBranchName,
+        setAddress,
+        setCountry,
+        setProvince,
+        setCity,
+        setSubDistrict,
+        setPostalCode,
+        setPhoneNumber,
+        setPhoneNumberExt,
+        setFaxNumber,
+        setFaxNumberExt,
+        setCompanyEmail,
+      }}
+    >
+      {children}
+    </GeneralProvider>
+  );
+};
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index f755564..c7c1e5b 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -1,17 +1,12 @@
 import React from "react";
-import { MainApp } from "../../../../../Components";
 import GeneralComponent from "./Component/General";
+import { GeneralController } from "./Controller";
 
 const General = () => {
   return (
-    <MainApp
-      title="PROFIL PERUSAHAAN"
-      onActionRefresh={() => alert("Ok")}
-      onActionDone={() => alert("Done")}
-      onActionNew={() => alert("New")}
-    >
+    <GeneralController>
       <GeneralComponent />
-    </MainApp>
+    </GeneralController>
   );
 };
 

From a3ee57565e868f429ec8eb3408a22e18338ee27e Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 15:25:40 +0700
Subject: [PATCH 26/43] validate select

---
 .../Component/General/Component/General.tsx   |  10 +-
 .../Component/General/Component/Modal.tsx     | 271 +++++++++++------
 .../Component/General/Controller.tsx          | 285 ++++++++++++------
 .../Registration/Component/Registration.tsx   |   8 +-
 4 files changed, 370 insertions(+), 204 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 9653fe6..67e9f94 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -6,7 +6,9 @@ import { MainApp } from "../../../../../../Components";
 import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
-  const { open, setOpen } = useContext(GeneralContext);
+  const { open, setOpen, _handleOnSubmitSelect, handleSubmit } = useContext(
+    GeneralContext
+  );
 
   return (
     <MainApp
@@ -30,13 +32,17 @@ const GeneralComponent = () => {
         <Modal
           title="Perusahaan"
           open={open}
-          width="w-3/5"
+          width="w-3/4"
           onClose={() => {
             setOpen(false);
           }}
           onActionOne={() => {
             setOpen(false);
           }}
+          onActionTwo={async () => {
+            _handleOnSubmitSelect();
+            handleSubmit();
+          }}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 8b412cb..099ae54 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,13 +1,11 @@
 import React, { useContext } from "react";
-import { ErrorMessage } from "react-hook-form";
+import { ErrorMessage, useFormContext } from "react-hook-form";
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
 const ModalComponent = () => {
   const {
     customStyles,
-    register,
-    errors,
     setBranchName,
     setAddress,
     country,
@@ -16,7 +14,7 @@ const ModalComponent = () => {
     setProvince,
     city,
     setCity,
-    setSubDistrict,
+    setDistrict,
     setPostalCode,
     setPhoneNumber,
     setPhoneNumberExt,
@@ -27,7 +25,12 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
+    _onValidate,
+    register,
+    handleSubmit,
+    errors,
   } = useContext(GeneralContext);
+  const { errors: errorsSelect } = useFormContext();
 
   return (
     <div className="bg-white">
@@ -35,7 +38,7 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form>
+        <form onSubmit={handleSubmit(_onValidate())}>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">
@@ -62,6 +65,11 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="branchName">
                       {({ messages }) => {
                         return (
@@ -98,6 +106,11 @@ const ModalComponent = () => {
                       })}
                       onChange={(val) => setAddress(val.target.value)}
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="address">
                       {({ messages }) => {
                         return (
@@ -119,37 +132,25 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="country"
                       name="country"
                       isClearable
-                      ref={register({
-                        required: "This is required",
-                        minLength: {
-                          value: 8,
-                          message: "This inpus is less than 8 characters",
-                        },
-                        maxLength: {
-                          value: 30,
-                          message: "This inpus is more than 30 characters",
-                        },
-                      })}
                       onChange={(val) =>
                         val ? setCountry(val.value) : setCountry("")
                       }
                       options={optionsCompanyType}
                       placeholder="Negara"
                     />
-                    <ErrorMessage errors={errors} name="country">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -159,6 +160,7 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="province"
                       name="province"
                       isClearable
                       ref={register({
@@ -179,18 +181,16 @@ const ModalComponent = () => {
                       placeholder="Provinsi"
                       isDisabled={country ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="province">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -200,6 +200,7 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
+                      className="city"
                       name="city"
                       isClearable
                       ref={register({
@@ -221,18 +222,16 @@ const ModalComponent = () => {
                       placeholder="Kota/Kabupaten"
                       isDisabled={country && province ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="city">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -242,7 +241,8 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     <Select
                       styles={customStyles}
-                      name="subDistrict"
+                      className="district"
+                      name="district"
                       isClearable
                       ref={register({
                         required: "This is required",
@@ -256,24 +256,22 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) =>
-                        val ? setSubDistrict(val.value) : setSubDistrict("")
+                        val ? setDistrict(val.value) : setDistrict("")
                       }
                       options={city === "Sleman" ? Sleman : null}
                       placeholder="Kecamatan"
                       isDisabled={country && province && city ? false : true}
                     />
-                    <ErrorMessage errors={errors} name="subDistrict">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
@@ -287,18 +285,27 @@ const ModalComponent = () => {
                       ref={register({
                         required: "This is required",
                         minLength: {
-                          value: 8,
-                          message: "This inpus is less than 8 characters",
+                          value: 5,
+                          message: "This input is less than 5 characters",
                         },
                         maxLength: {
-                          value: 30,
-                          message: "This inpus is more than 30 characters",
+                          value: 5,
+                          message: "This input is more than 5 characters",
+                        },
+                        pattern: {
+                          value: /^\d+$/,
+                          message: "This input is number 0-9",
                         },
                       })}
                       onChange={(val) => setPostalCode(val.target.value)}
                       className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="Kode Pos"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="postalCode">
                       {({ messages }) => {
                         return (
@@ -327,19 +334,53 @@ const ModalComponent = () => {
                         ref={register({
                           required: "This is required",
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g,
+                            message: "This input is number 0-9",
                           },
-                          pattern: /^\+{1}[62]{2}[0-9]{1,20}$/i,
                         })}
                         onChange={(val) => setPhoneNumber(val.target.value)}
                         className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
                       <ErrorMessage errors={errors} name="phoneNumber">
                         {({ messages }) => {
                           return (
@@ -357,22 +398,6 @@ const ModalComponent = () => {
                       </ErrorMessage>
                     </div>
                     <div className="w-2/5 flex-col">
-                      <input
-                        name="phoneNumberExt"
-                        ref={register({
-                          minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
-                          },
-                          maxLength: {
-                            value: 30,
-                            message: "This inpus is more than 30 characters",
-                          },
-                        })}
-                        onChange={(val) => setPhoneNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
-                        placeholder="Ext."
-                      />
                       <ErrorMessage errors={errors} name="phoneNumberExt">
                         {({ messages }) => {
                           return (
@@ -401,14 +426,17 @@ const ModalComponent = () => {
                         type="number"
                         name="faxNumber"
                         ref={register({
-                          required: "This is required",
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
@@ -437,12 +465,16 @@ const ModalComponent = () => {
                         name="faxNumberExt"
                         ref={register({
                           minLength: {
-                            value: 8,
-                            message: "This inpus is less than 8 characters",
+                            value: 4,
+                            message: "This input is less than 4 characters",
                           },
                           maxLength: {
                             value: 30,
-                            message: "This inpus is more than 30 characters",
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
@@ -467,6 +499,45 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <ErrorMessage errors={errors} name="faxNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <ErrorMessage errors={errors} name="faxNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
@@ -490,6 +561,11 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
                       placeholder="me@example.com"
                     />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="companyEmail">
                       {({ messages }) => {
                         return (
@@ -507,7 +583,6 @@ const ModalComponent = () => {
               </div>
             </div>
           </div>
-          <hr />
         </form>
       </div>
     </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index b3bce41..f460419 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useState } from "react";
-import { useForm } from "react-hook-form";
+import React, { createContext, useState, useEffect } from "react";
+import { useForm, FormContext } from "react-hook-form";
 import { getToken } from "../../../../../../Misc/Cookies";
 
 interface InitialState {
@@ -7,21 +7,18 @@ interface InitialState {
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  register: Function;
-  handleSubmit: Function;
-  errors: object;
+  registerSelect: Function;
   _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
   Yogya: Array<object>;
   Sleman: Array<object>;
-  columns: Array<object>;
   branchName: string;
   address: string;
   country: string;
   province: string;
   city: string;
-  subDistrict: string;
+  district: string;
   postalCode: string;
   phoneNumber: string;
   phoneNumberExt: string;
@@ -33,13 +30,22 @@ interface InitialState {
   setCountry: Function;
   setProvince: Function;
   setCity: Function;
-  setSubDistrict: Function;
+  setDistrict: Function;
   setPostalCode: Function;
   setPhoneNumber: Function;
   setPhoneNumberExt: Function;
   setFaxNumber: Function;
   setFaxNumberExt: Function;
   setCompanyEmail: Function;
+  _handleCountry: Function;
+  _handleProvince: Function;
+  _handleCity: Function;
+  _onValidate: Function;
+  _handleDistrict: Function;
+  _handleOnSubmitSelect: Function;
+  register: Function;
+  handleSubmit: Function;
+  errors: object;
 }
 
 const initialState = {
@@ -47,15 +53,12 @@ const initialState = {
   _isLogin: null,
   open: false,
   setOpen: () => {},
-  register: () => {},
-  handleSubmit: () => {},
-  errors: {},
+  registerSelect: () => {},
   _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
   Yogya: [{}],
   Sleman: [{}],
-  columns: [{}],
   branchName: "",
   setBranchName: () => {},
   address: "",
@@ -66,8 +69,8 @@ const initialState = {
   setProvince: () => {},
   city: "",
   setCity: () => {},
-  subDistrict: "",
-  setSubDistrict: () => {},
+  district: "",
+  setDistrict: () => {},
   postalCode: "",
   setPostalCode: () => {},
   phoneNumber: "",
@@ -80,6 +83,15 @@ const initialState = {
   setFaxNumberExt: () => {},
   companyEmail: "",
   setCompanyEmail: () => {},
+  _handleCountry: () => {},
+  _handleProvince: () => {},
+  _handleCity: () => {},
+  _handleDistrict: () => {},
+  _onValidate: () => {},
+  _handleOnSubmitSelect: () => {},
+  register: () => {},
+  handleSubmit: () => {},
+  errors: {},
 };
 
 export const GeneralContext = createContext<InitialState>(initialState);
@@ -92,22 +104,19 @@ export const {
 export const GeneralController = ({ children }) => {
   const _isLogin = getToken();
   const [open, setOpen] = useState(false);
-  const { register, handleSubmit, errors } = useForm({
-    validateCriteriaMode: "all",
-    mode: "onChange",
-  });
   const [branchName, setBranchName] = useState("");
   const [address, setAddress] = useState("");
   const [country, setCountry] = useState("");
   const [province, setProvince] = useState("");
   const [city, setCity] = useState("");
-  const [subDistrict, setSubDistrict] = useState("");
+  const [district, setDistrict] = useState("");
   const [postalCode, setPostalCode] = useState("");
   const [phoneNumber, setPhoneNumber] = useState("");
   const [phoneNumberExt, setPhoneNumberExt] = useState("");
   const [faxNumber, setFaxNumber] = useState("");
   const [faxNumberExt, setFaxNumberExt] = useState("");
   const [companyEmail, setCompanyEmail] = useState("");
+
   const _onSubmit = (value) => console.log("Validate", value);
   const optionsCompanyType = [
     {
@@ -126,88 +135,164 @@ export const GeneralController = ({ children }) => {
       minHeight: 32,
     }),
   };
-  const columns = [
-    {
-      label: "No",
-      accessor: "no",
-      width: "w-auto",
-      align: "text-center",
-    },
-    {
-      label: "Detail",
-      accessor: "detail",
-      width: "w-2/5",
-      align: "text-left",
-    },
-    {
-      label: "Data Saat Ini",
-      accessor: "oldData",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Data Baru",
-      accessor: "newData",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Status",
-      accessor: "status",
-      width: "w-1/5",
-      align: "text-left",
-    },
-    {
-      label: "Aksi",
-      accessor: "aksi",
-      width: "w-auto",
-      align: "text-left",
-    },
-  ];
+
+  const { register, handleSubmit, errors } = useForm({
+    validateCriteriaMode: "all",
+    mode: "onChange",
+  });
+  // FormContext
+  const methods = useForm({
+    mode: "onChange",
+  });
+  const { register: registerSelect, setValue, triggerValidation } = methods;
+
+  useEffect(() => {
+    registerSelect(
+      { name: "business_type" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "country" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "province" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "city" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  useEffect(() => {
+    registerSelect(
+      { name: "district" },
+      {
+        required: true,
+        validate: (value) => {
+          return Array.isArray(value) ? value.length > 0 : !!value;
+        },
+      }
+    );
+  }, [registerSelect]);
+
+  const _handleCountry = (e: any) => {
+    setCountry(e && e.value);
+    setValue("country", e && e.value);
+    triggerValidation("country");
+  };
+
+  const _handleProvince = (e: any) => {
+    setProvince(e && e.value);
+    setValue("province", e && e.value);
+    triggerValidation("province");
+  };
+
+  const _handleCity = (e: any) => {
+    setCity(e && e.value);
+    setValue("city", e && e.value);
+    triggerValidation("city");
+  };
+
+  const _handleDistrict = (e: any) => {
+    setDistrict(e && e.value);
+    setValue("district", e && e.value);
+    triggerValidation("district");
+  };
+
+  const val = ["business_type", "country", "province", "city", "district"];
+
+  const _handleOnSubmitSelect = async () => {
+    if (await triggerValidation(val)) {
+      console.log("Sukses");
+    } else {
+      console.log("Gagal");
+    }
+  };
+
+  const _onValidate = async () => console.log("validation");
 
   return (
-    <GeneralProvider
-      value={{
-        customStyles,
-        _isLogin,
-        open,
-        setOpen,
-        register,
-        handleSubmit,
-        errors,
-        _onSubmit,
-        optionsCompanyType,
-        Indonesia,
-        Yogya,
-        Sleman,
-        columns,
-        branchName,
-        address,
-        country,
-        province,
-        city,
-        subDistrict,
-        postalCode,
-        phoneNumber,
-        phoneNumberExt,
-        faxNumber,
-        faxNumberExt,
-        companyEmail,
-        setBranchName,
-        setAddress,
-        setCountry,
-        setProvince,
-        setCity,
-        setSubDistrict,
-        setPostalCode,
-        setPhoneNumber,
-        setPhoneNumberExt,
-        setFaxNumber,
-        setFaxNumberExt,
-        setCompanyEmail,
-      }}
-    >
-      {children}
-    </GeneralProvider>
+    <FormContext {...methods}>
+      <GeneralProvider
+        value={{
+          customStyles,
+          _isLogin,
+          open,
+          setOpen,
+          registerSelect,
+          _onSubmit,
+          optionsCompanyType,
+          Indonesia,
+          Yogya,
+          Sleman,
+          branchName,
+          address,
+          country,
+          province,
+          city,
+          district,
+          postalCode,
+          phoneNumber,
+          phoneNumberExt,
+          faxNumber,
+          faxNumberExt,
+          companyEmail,
+          setBranchName,
+          setAddress,
+          setCountry,
+          setProvince,
+          setCity,
+          setDistrict,
+          setPostalCode,
+          setPhoneNumber,
+          setPhoneNumberExt,
+          setFaxNumber,
+          setFaxNumberExt,
+          setCompanyEmail,
+          _handleCountry,
+          _handleProvince,
+          _handleCity,
+          _handleDistrict,
+          _onValidate,
+          _handleOnSubmitSelect,
+          register,
+          handleSubmit,
+          errors,
+        }}
+      >
+        {children}
+      </GeneralProvider>
+    </FormContext>
   );
 };
diff --git a/src/App/Container/Views/Public/Registration/Component/Registration.tsx b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
index d8675f7..97a98a6 100644
--- a/src/App/Container/Views/Public/Registration/Component/Registration.tsx
+++ b/src/App/Container/Views/Public/Registration/Component/Registration.tsx
@@ -553,12 +553,12 @@ const RegistrationComponent = () => {
                     ref={register({
                       required: "This is required",
                       minLength: {
-                        value: 4,
-                        message: "This input is less than 4 characters",
+                        value: 5,
+                        message: "This input is less than 5 characters",
                       },
                       maxLength: {
-                        value: 30,
-                        message: "This input is more than 30 characters",
+                        value: 5,
+                        message: "This input is more than 5 characters",
                       },
                       pattern: {
                         value: /^\d+$/,

From b8a05e4139efe1732c97c54b208d95d5ff2988d0 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 16:15:22 +0700
Subject: [PATCH 27/43] validation form

---
 .../Component/General/Component/General.tsx   |  11 +-
 .../Component/General/Component/Modal.tsx     | 123 ++++++++----------
 .../Component/General/Controller.tsx          |   4 +-
 3 files changed, 61 insertions(+), 77 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 67e9f94..924007e 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -32,17 +32,18 @@ const GeneralComponent = () => {
         <Modal
           title="Perusahaan"
           open={open}
-          width="w-3/4"
+          width="w-4/5"
           onClose={() => {
             setOpen(false);
           }}
           onActionOne={() => {
             setOpen(false);
           }}
-          onActionTwo={async () => {
-            _handleOnSubmitSelect();
-            handleSubmit();
-          }}
+          // onActionTwo={async () => {
+          //   _handleOnSubmitSelect();
+          //   // handleSubmit();
+          // }}
+          onActionTwo={handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 099ae54..c1bbb93 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -29,6 +29,7 @@ const ModalComponent = () => {
     register,
     handleSubmit,
     errors,
+    _handleOnSubmitSelect,
   } = useContext(GeneralContext);
   const { errors: errorsSelect } = useFormContext();
 
@@ -38,12 +39,12 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form onSubmit={handleSubmit(_onValidate())}>
+        <form>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full leading-none sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nama Cabang/Lokasi Cabang</label>
                   </div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
@@ -62,12 +63,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setBranchName(val.target.value)}
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="branchName">
@@ -75,7 +76,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -84,13 +88,13 @@ const ModalComponent = () => {
                     </ErrorMessage>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Alamat</label>
                   </div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <textarea
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
                       ref={register({
@@ -108,7 +112,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="address">
@@ -116,7 +120,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -125,7 +132,7 @@ const ModalComponent = () => {
                     </ErrorMessage>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Negara</label>
                   </div>
@@ -143,7 +150,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -153,7 +160,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Provinsi</label>
                   </div>
@@ -183,7 +190,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -193,7 +200,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Kota/Kabupaten</label>
                   </div>
@@ -224,7 +231,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -234,7 +241,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label className="w-full">Kecamatan</label>
                   </div>
@@ -264,7 +271,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
                     {errorsSelect.country && (
@@ -274,7 +281,7 @@ const ModalComponent = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Kode Pos</label>
                   </div>
@@ -298,12 +305,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setPostalCode(val.target.value)}
-                      className="w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full rounded bg-white border border-gray-400 hover:border-gray-500 py-1 px-2 no-arrow"
                       placeholder="Kode Pos"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="postalCode">
@@ -311,7 +318,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
@@ -323,7 +333,7 @@ const ModalComponent = () => {
               </div>
               {/* Right */}
               <div className="w-full py-4">
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nomor Telepon</label>
                   </div>
@@ -347,7 +357,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setPhoneNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
                     </div>
@@ -369,16 +379,14 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setPhoneNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
-                    <label>Nomor Telepon</label>
-                  </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
                       <ErrorMessage errors={errors} name="phoneNumber">
@@ -388,7 +396,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -405,7 +413,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -416,7 +424,7 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>Nomor Faksimile</label>
                   </div>
@@ -440,24 +448,9 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Nomor Faksimile"
                       />
-                      <ErrorMessage errors={errors} name="faxNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
                     </div>
                     <div className="w-2/5 flex-col">
                       <input
@@ -478,28 +471,13 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
-                      <ErrorMessage errors={errors} name="faxNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
@@ -510,7 +488,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -527,7 +505,7 @@ const ModalComponent = () => {
                             Object.entries(messages).map(([type, message]) => (
                               <p
                                 key={type}
-                                className="px-2 text-sm text-red-500"
+                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
                               >
                                 {message}
                               </p>
@@ -538,7 +516,7 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
                   </div>
@@ -558,12 +536,12 @@ const ModalComponent = () => {
                         },
                       })}
                       onChange={(val) => setCompanyEmail(val.target.value)}
-                      className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="me@example.com"
                     />
                   </div>
                 </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
                     <ErrorMessage errors={errors} name="companyEmail">
@@ -571,7 +549,10 @@ const ModalComponent = () => {
                         return (
                           messages &&
                           Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
+                            <p
+                              key={type}
+                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
+                            >
                               {message}
                             </p>
                           ))
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index f460419..a04dfef 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -240,7 +240,9 @@ export const GeneralController = ({ children }) => {
     }
   };
 
-  const _onValidate = async () => console.log("validation");
+  const _onValidate = async () => {
+    console.log("validation");
+  };
 
   return (
     <FormContext {...methods}>

From 63a0f3622d882d5a08eb85e36a7ce7fbbc845e92 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 17:26:30 +0700
Subject: [PATCH 28/43] validation all

---
 .../Component/General/Component/General.tsx   |  10 +-
 .../Component/General/Component/Modal.tsx     | 201 ++++++------------
 .../Component/General/Component/Query.tsx     |   7 +
 .../Component/General/Controller.tsx          |  15 +-
 4 files changed, 86 insertions(+), 147 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index 924007e..d74b6bf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -39,11 +39,11 @@ const GeneralComponent = () => {
           onActionOne={() => {
             setOpen(false);
           }}
-          // onActionTwo={async () => {
-          //   _handleOnSubmitSelect();
-          //   // handleSubmit();
-          // }}
-          onActionTwo={handleSubmit()}
+          onActionTwo={async () => {
+            _handleOnSubmitSelect();
+            // handleSubmit();
+          }}
+          // onActionTwo={handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index c1bbb93..f96d2e8 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -25,13 +25,11 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
-    _onValidate,
-    register,
-    handleSubmit,
-    errors,
-    _handleOnSubmitSelect,
+    registerSelect,
+    // errors,
   } = useContext(GeneralContext);
-  const { errors: errorsSelect } = useFormContext();
+  // const { errors: errorsSelect } = useFormContext();
+  const { errors } = useFormContext();
 
   return (
     <div className="bg-white">
@@ -51,7 +49,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -71,21 +69,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="branchName">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.branchName && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.branchName && errors.branchName.message}
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
@@ -97,7 +85,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -115,21 +103,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="address">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.address && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.address && errors.address.message}
+                      </p>
+                    )}
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
@@ -153,7 +131,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -170,7 +148,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -193,7 +171,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -210,7 +188,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -234,7 +212,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -251,7 +229,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -274,7 +252,7 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
+                    {errors.country && (
                       <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
                         This is required
                       </p>
@@ -289,7 +267,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -313,21 +291,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="postalCode">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.postalCode && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.postalCode && errors.postalCode.message}
+                      </p>
+                    )}
                   </div>
                 </div>
               </div>
@@ -341,7 +309,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={register({
+                        ref={registerSelect({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -364,7 +332,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -389,38 +357,19 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="phoneNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.phoneNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumber && errors.phoneNumber.message}
+                        </p>
+                      )}
                     </div>
                     <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="phoneNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.phoneNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.phoneNumberExt &&
+                            errors.phoneNumberExt.message}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -433,7 +382,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -456,7 +405,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -481,38 +430,18 @@ const ModalComponent = () => {
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
                     <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="faxNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.faxNumber && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumber && errors.faxNumber.message}
+                        </p>
+                      )}
                     </div>
                     <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="faxNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
+                      {errors.faxNumberExt && (
+                        <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                          {errors.faxNumberExt && errors.faxNumberExt.message}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -524,7 +453,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -544,21 +473,11 @@ const ModalComponent = () => {
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="companyEmail">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p
-                              key={type}
-                              className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500"
-                            >
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
+                    {errors.companyEmail && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.companyEmail && errors.companyEmail.message}
+                      </p>
+                    )}
                   </div>
                 </div>
               </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
new file mode 100644
index 0000000..4015911
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Query = () => {
+  return <div>Isi Query</div>;
+};
+
+export default Query;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index a04dfef..0e65268 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -230,7 +230,20 @@ export const GeneralController = ({ children }) => {
     triggerValidation("district");
   };
 
-  const val = ["business_type", "country", "province", "city", "district"];
+  const val = [
+    "branchName",
+    "address",
+    "postalCode",
+    "country",
+    "province",
+    "city",
+    "district",
+    "phoneNumber",
+    "phoneNumberExt",
+    "faxNumber",
+    "faxNumberExt",
+    "companyEmail",
+  ];
 
   const _handleOnSubmitSelect = async () => {
     if (await triggerValidation(val)) {

From d0de0bab2c0561bb98f5eac98d1c4fbf8bb2e6ba Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 17:32:36 +0700
Subject: [PATCH 29/43] validation fix

---
 .../Component/General/Component/General.tsx   | 10 +----
 .../Component/General/Component/Modal.tsx     | 30 ++++++-------
 .../Component/General/Controller.tsx          | 45 +++++++------------
 3 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index d74b6bf..c7d506a 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -6,9 +6,7 @@ import { MainApp } from "../../../../../../Components";
 import ModalComponent from "./Modal";
 
 const GeneralComponent = () => {
-  const { open, setOpen, _handleOnSubmitSelect, handleSubmit } = useContext(
-    GeneralContext
-  );
+  const { open, setOpen, _handleSubmit } = useContext(GeneralContext);
 
   return (
     <MainApp
@@ -39,11 +37,7 @@ const GeneralComponent = () => {
           onActionOne={() => {
             setOpen(false);
           }}
-          onActionTwo={async () => {
-            _handleOnSubmitSelect();
-            // handleSubmit();
-          }}
-          // onActionTwo={handleSubmit()}
+          onActionTwo={async () => _handleSubmit()}
           textOne="Batal"
           textTwo="Simpan"
         >
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index f96d2e8..c9f9175 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { ErrorMessage, useFormContext } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
@@ -25,7 +25,7 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
-    registerSelect,
+    register,
     // errors,
   } = useContext(GeneralContext);
   // const { errors: errorsSelect } = useFormContext();
@@ -49,7 +49,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -85,7 +85,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -148,7 +148,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -188,7 +188,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -229,7 +229,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -267,7 +267,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -309,7 +309,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={registerSelect({
+                        ref={register({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -332,7 +332,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -382,7 +382,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -397,7 +397,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumber(val.target.value)}
-                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
                         placeholder="Nomor Faksimile"
                       />
                     </div>
@@ -405,7 +405,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -420,7 +420,7 @@ const ModalComponent = () => {
                           },
                         })}
                         onChange={(val) => setFaxNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                        className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2 no-arrow"
                         placeholder="Ext."
                       />
                     </div>
@@ -453,7 +453,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index 0e65268..d994aeb 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -7,7 +7,6 @@ interface InitialState {
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  registerSelect: Function;
   _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
@@ -42,10 +41,8 @@ interface InitialState {
   _handleCity: Function;
   _onValidate: Function;
   _handleDistrict: Function;
-  _handleOnSubmitSelect: Function;
+  _handleSubmit: Function;
   register: Function;
-  handleSubmit: Function;
-  errors: object;
 }
 
 const initialState = {
@@ -53,7 +50,7 @@ const initialState = {
   _isLogin: null,
   open: false,
   setOpen: () => {},
-  registerSelect: () => {},
+  register: () => {},
   _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
@@ -88,10 +85,7 @@ const initialState = {
   _handleCity: () => {},
   _handleDistrict: () => {},
   _onValidate: () => {},
-  _handleOnSubmitSelect: () => {},
-  register: () => {},
-  handleSubmit: () => {},
-  errors: {},
+  _handleSubmit: () => {},
 };
 
 export const GeneralContext = createContext<InitialState>(initialState);
@@ -136,18 +130,14 @@ export const GeneralController = ({ children }) => {
     }),
   };
 
-  const { register, handleSubmit, errors } = useForm({
-    validateCriteriaMode: "all",
-    mode: "onChange",
-  });
   // FormContext
   const methods = useForm({
     mode: "onChange",
   });
-  const { register: registerSelect, setValue, triggerValidation } = methods;
+  const { register, setValue, triggerValidation } = methods;
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "business_type" },
       {
         required: true,
@@ -156,10 +146,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "country" },
       {
         required: true,
@@ -168,10 +158,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "province" },
       {
         required: true,
@@ -180,10 +170,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "city" },
       {
         required: true,
@@ -192,10 +182,10 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   useEffect(() => {
-    registerSelect(
+    register(
       { name: "district" },
       {
         required: true,
@@ -204,7 +194,7 @@ export const GeneralController = ({ children }) => {
         },
       }
     );
-  }, [registerSelect]);
+  }, [register]);
 
   const _handleCountry = (e: any) => {
     setCountry(e && e.value);
@@ -245,7 +235,7 @@ export const GeneralController = ({ children }) => {
     "companyEmail",
   ];
 
-  const _handleOnSubmitSelect = async () => {
+  const _handleSubmit = async () => {
     if (await triggerValidation(val)) {
       console.log("Sukses");
     } else {
@@ -265,7 +255,6 @@ export const GeneralController = ({ children }) => {
           _isLogin,
           open,
           setOpen,
-          registerSelect,
           _onSubmit,
           optionsCompanyType,
           Indonesia,
@@ -300,10 +289,8 @@ export const GeneralController = ({ children }) => {
           _handleCity,
           _handleDistrict,
           _onValidate,
-          _handleOnSubmitSelect,
+          _handleSubmit,
           register,
-          handleSubmit,
-          errors,
         }}
       >
         {children}

From 2e0365cefcb56bd9f1040ca93809dc75ae1edaa8 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:48:57 +0700
Subject: [PATCH 30/43] add modal & validation form new entry

---
 .../Component/General/Component/Modal.tsx     |  38 ++-
 .../Component/General/Component/Query.tsx     |   7 -
 .../Component/General/Component/Table.tsx     | 261 ++++++++++--------
 .../Component/General/Controller.tsx          |  45 ++-
 .../VendorProfile/Component/General/Query.ts  |  49 ++++
 .../Private/VendorProfile/Controller.tsx      |  28 +-
 6 files changed, 288 insertions(+), 140 deletions(-)
 delete mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index c9f9175..edb6faf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -20,15 +20,14 @@ const ModalComponent = () => {
     setPhoneNumberExt,
     setFaxNumber,
     setFaxNumberExt,
+    setWebsite,
     setCompanyEmail,
     optionsCompanyType,
     Indonesia,
     Yogya,
     Sleman,
     register,
-    // errors,
   } = useContext(GeneralContext);
-  // const { errors: errorsSelect } = useFormContext();
   const { errors } = useFormContext();
 
   return (
@@ -445,6 +444,41 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Situs</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <input
+                      type="text"
+                      name="website"
+                      ref={register({
+                        required: "This is required",
+                        minLength: {
+                          value: 8,
+                          message: "This inpus is less than 8 characters",
+                        },
+                        maxLength: {
+                          value: 30,
+                          message: "This inpus is more than 30 characters",
+                        },
+                      })}
+                      onChange={(val) => setWebsite(val.target.value)}
+                      className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
+                      placeholder="example.com"
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    {errors.website && (
+                      <p className="px-2 bg-red-200 rounded-b text-xs py-1 text-red-500">
+                        {errors.website && errors.website.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
deleted file mode 100644
index 4015911..0000000
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const Query = () => {
-  return <div>Isi Query</div>;
-};
-
-export default Query;
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
index fa1398c..5ec0db4 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import "../../../../../../Assets/Css/App.css";
+import { HomeContext } from "../../../Controller";
 
 const Table = () => {
+  const { generalList } = useContext(HomeContext);
+  console.log("CEK", generalList);
+
   return (
     <div>
       <table className="w-full">
@@ -27,115 +31,152 @@ const Table = () => {
             </th>
           </tr>
         </thead>
-        <tbody>
-          <tr className="hover:bg-gray-200">
-            <td
-              className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
-              rowSpan={13}
-            >
-              1.
-            </td>
-            <td className="border border-gray-400 py-1 px-4">
-              Nama Perusahaan
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4">Dipersiapkan</td>
-            <td
-              className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
-              rowSpan={13}
-            >
-              <button
-                title="Ubah Perusahaan"
-                // onClick={() => controller.setOpen(true)}
-              >
-                <svg
-                  className="fill-current text-blue-700 w-3 h-3"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 576 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-                  ></path>
-                </svg>
-              </button>
-            </td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              Kategori Lokasi
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Negara</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Provinsi</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kota</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kecamatan</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">alamat</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Nomor Telepon</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              Nomor Faksimile
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">Situs</td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <tr className="hover:bg-gray-200">
-            <td className="border border-gray-400 py-1 px-4">
-              E-mail Perusahaan
-            </td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-            <td className="border border-gray-400 py-1 px-4"></td>
-          </tr>
-          <td className="border border-gray-400 py-1 px-4" colSpan={4}></td>
-        </tbody>
+        {generalList && Object.keys(generalList)}
+        {/* <tbody>
+          {generalList &&
+            generalList.map((e: any, i: any) => (
+              <Fragment key={i}>
+                <tr className="hover:bg-gray-200">
+                  <td
+                    className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
+                    rowSpan={13}
+                  >
+                    {i + 1}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nama Perusahaan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.companyName}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    Dipersiapkan
+                  </td>
+                  <td
+                    className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
+                    rowSpan={13}
+                  >
+                    <button
+                      title="Ubah Perusahaan"
+                      // onClick={() => controller.setOpen(true)}
+                    >
+                      <svg
+                        className="fill-current text-blue-700 w-3 h-3"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 576 512"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Kategori Lokasi
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.address}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Negara</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.county}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Provinsi</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.province}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Kota</td>
+                  <td className="border border-gray-400 py-1 px-4">{e.city}</td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Kecamatan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.district}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.postalCode}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">alamat</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.address}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nomor Telepon
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.phoneNumber}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    Nomor Faksimile
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.faxNumber}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">Situs</td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.website}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <tr className="hover:bg-gray-200">
+                  <td className="border border-gray-400 py-1 px-4">
+                    E-mail Perusahaan
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4">
+                    {e.eMail}
+                  </td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                  <td className="border border-gray-400 py-1 px-4"></td>
+                </tr>
+                <td
+                  className="border border-gray-400 py-1 px-4"
+                  colSpan={4}
+                ></td>
+              </Fragment>
+            ))}
+        </tbody> */}
       </table>
     </div>
   );
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
index d994aeb..9e515a6 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Controller.tsx
@@ -1,13 +1,14 @@
 import React, { createContext, useState, useEffect } from "react";
 import { useForm, FormContext } from "react-hook-form";
 import { getToken } from "../../../../../../Misc/Cookies";
+import { INSERT_VENDOR_CONTACT } from "./Query";
+import { useMutation } from "react-apollo";
 
 interface InitialState {
   customStyles: object;
   _isLogin: string | null;
   open: boolean;
   setOpen: Function;
-  _onSubmit: Function;
   optionsCompanyType: Array<object>;
   Indonesia: Array<object>;
   Yogya: Array<object>;
@@ -23,6 +24,7 @@ interface InitialState {
   phoneNumberExt: string;
   faxNumber: string;
   faxNumberExt: string;
+  website: string;
   companyEmail: string;
   setBranchName: Function;
   setAddress: Function;
@@ -36,10 +38,10 @@ interface InitialState {
   setFaxNumber: Function;
   setFaxNumberExt: Function;
   setCompanyEmail: Function;
+  setWebsite: Function;
   _handleCountry: Function;
   _handleProvince: Function;
   _handleCity: Function;
-  _onValidate: Function;
   _handleDistrict: Function;
   _handleSubmit: Function;
   register: Function;
@@ -51,7 +53,6 @@ const initialState = {
   open: false,
   setOpen: () => {},
   register: () => {},
-  _onSubmit: () => {},
   optionsCompanyType: [{}],
   Indonesia: [{}],
   Yogya: [{}],
@@ -80,11 +81,12 @@ const initialState = {
   setFaxNumberExt: () => {},
   companyEmail: "",
   setCompanyEmail: () => {},
+  website: "",
+  setWebsite: () => {},
   _handleCountry: () => {},
   _handleProvince: () => {},
   _handleCity: () => {},
   _handleDistrict: () => {},
-  _onValidate: () => {},
   _handleSubmit: () => {},
 };
 
@@ -109,9 +111,9 @@ export const GeneralController = ({ children }) => {
   const [phoneNumberExt, setPhoneNumberExt] = useState("");
   const [faxNumber, setFaxNumber] = useState("");
   const [faxNumberExt, setFaxNumberExt] = useState("");
+  const [website, setWebsite] = useState("");
   const [companyEmail, setCompanyEmail] = useState("");
 
-  const _onSubmit = (value) => console.log("Validate", value);
   const optionsCompanyType = [
     {
       label: "10 dari 255 (harap ketik untuk memfilter)",
@@ -223,30 +225,47 @@ export const GeneralController = ({ children }) => {
   const val = [
     "branchName",
     "address",
-    "postalCode",
     "country",
     "province",
     "city",
     "district",
+    "postalCode",
     "phoneNumber",
     "phoneNumberExt",
     "faxNumber",
     "faxNumberExt",
+    "website",
     "companyEmail",
   ];
 
+  // Add
+  const [submitAdd] = useMutation(INSERT_VENDOR_CONTACT, {
+    errorPolicy: "all",
+  });
+
   const _handleSubmit = async () => {
     if (await triggerValidation(val)) {
-      console.log("Sukses");
+      try {
+        await submitAdd({
+          variables: {
+            company_name: branchName,
+            address,
+            country,
+            province,
+            city,
+            district,
+            postal_code: postalCode,
+            phone_number: phoneNumber,
+            website,
+            e_mail: companyEmail,
+          },
+        });
+      } catch (error) {}
     } else {
       console.log("Gagal");
     }
   };
 
-  const _onValidate = async () => {
-    console.log("validation");
-  };
-
   return (
     <FormContext {...methods}>
       <GeneralProvider
@@ -255,7 +274,6 @@ export const GeneralController = ({ children }) => {
           _isLogin,
           open,
           setOpen,
-          _onSubmit,
           optionsCompanyType,
           Indonesia,
           Yogya,
@@ -271,6 +289,7 @@ export const GeneralController = ({ children }) => {
           phoneNumberExt,
           faxNumber,
           faxNumberExt,
+          website,
           companyEmail,
           setBranchName,
           setAddress,
@@ -284,11 +303,11 @@ export const GeneralController = ({ children }) => {
           setFaxNumber,
           setFaxNumberExt,
           setCompanyEmail,
+          setWebsite,
           _handleCountry,
           _handleProvince,
           _handleCity,
           _handleDistrict,
-          _onValidate,
           _handleSubmit,
           register,
         }}
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
new file mode 100644
index 0000000..e563fb6
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Query.ts
@@ -0,0 +1,49 @@
+import gql from "graphql-tag";
+
+export const GENERAL_LIST = gql`
+  {
+    GetVendorContacts {
+      id
+      companyName
+      address
+      county
+      province
+      city
+      district
+      phoneNumber
+      faxNumber
+      website
+      eMail
+    }
+  }
+`;
+
+export const INSERT_VENDOR_CONTACT = gql`
+  mutation(
+    $company_name: String
+    $address: String
+    $country: String
+    $province: String
+    $city: String
+    $district: String
+    $postal_code: Int
+    $phone_number: String
+    $website: String
+    $e_mail: String
+  ) {
+    InsertVendorContact(
+      data: {
+        company_name: $company_name
+        address: $address
+        country: $country
+        province: $province
+        city: $city
+        district: $district
+        postal_code: $postal_code
+        phone_number: $phone_number
+        website: $website
+        e_mail: $e_mail
+      }
+    )
+  }
+`;
diff --git a/src/App/Container/Views/Private/VendorProfile/Controller.tsx b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
index 60bdce9..f809a34 100644
--- a/src/App/Container/Views/Private/VendorProfile/Controller.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Controller.tsx
@@ -1,9 +1,21 @@
-import React from 'react'
-
-export const HomeController = () => {
-    return (
-        <div>
-            Home Controller
-        </div>
-    )
+import React, { createContext } from "react";
+import { useQuery } from "react-apollo";
+import { GENERAL_LIST } from "../VendorProfile/Component/General/Query";
+
+interface InitialState {
+  generalList: object;
 }
+
+const initialState = {
+  generalList: {},
+};
+
+export const HomeContext = createContext<InitialState>(initialState);
+
+export const { Provider: HomeProvider, Consumer: HomeConsumer } = HomeContext;
+
+export const HomeController = ({ children }) => {
+  const { data: generalList } = useQuery(GENERAL_LIST);
+
+  return <HomeProvider value={{ generalList }}>{children}</HomeProvider>;
+};

From e891a4d4d5358cd8fee1fb974fb862950f8e3249 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:58:50 +0700
Subject: [PATCH 31/43] fix

---
 .../Private/VendorProfile/Component/General/View.tsx     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index c7c1e5b..4a6e117 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -4,7 +4,16 @@ import { GeneralController } from "./Controller";
 
 const General = () => {
   return (
+<<<<<<< HEAD
     <GeneralController>
+=======
+    <MainApp
+      title="PROFIL PERUSAHAAN"
+      onActionRefresh={() => alert("Ok")}
+      onActionDone={() => alert("Done")}
+      onActionNew={() => alert("New")}
+    >
+>>>>>>> add reusable 4 button main app
       <GeneralComponent />
     </GeneralController>
   );

From 2a97f1b024e19db7d09f97943e5fb125f64f3e20 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 23:01:29 +0700
Subject: [PATCH 32/43] fix

---
 .../Private/VendorProfile/Component/General/View.tsx     | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
index 4a6e117..c7c1e5b 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/View.tsx
@@ -4,16 +4,7 @@ import { GeneralController } from "./Controller";
 
 const General = () => {
   return (
-<<<<<<< HEAD
     <GeneralController>
-=======
-    <MainApp
-      title="PROFIL PERUSAHAAN"
-      onActionRefresh={() => alert("Ok")}
-      onActionDone={() => alert("Done")}
-      onActionNew={() => alert("New")}
-    >
->>>>>>> add reusable 4 button main app
       <GeneralComponent />
     </GeneralController>
   );

From ce2b8923e0aa553424cbd6245fff1ceaeb210044 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 23:02:55 +0700
Subject: [PATCH 33/43] fix

---
 .../Component/General/Component/Modal.tsx     | 252 +++++++++++++++++-
 1 file changed, 251 insertions(+), 1 deletion(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index edb6faf..cc22296 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,5 +1,9 @@
 import React, { useContext } from "react";
+<<<<<<< HEAD
 import { useFormContext } from "react-hook-form";
+=======
+import { ErrorMessage, useFormContext } from "react-hook-form";
+>>>>>>> validate select
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
@@ -26,9 +30,18 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
+<<<<<<< HEAD
     register,
   } = useContext(GeneralContext);
   const { errors } = useFormContext();
+=======
+    _onValidate,
+    register,
+    handleSubmit,
+    errors,
+  } = useContext(GeneralContext);
+  const { errors: errorsSelect } = useFormContext();
+>>>>>>> validate select
 
   return (
     <div className="bg-white">
@@ -36,7 +49,7 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form>
+        <form onSubmit={handleSubmit(_onValidate())}>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">
@@ -63,6 +76,26 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
+<<<<<<< HEAD
+=======
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <ErrorMessage errors={errors} name="branchName">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+>>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -97,6 +130,26 @@ const ModalComponent = () => {
                       })}
                       onChange={(val) => setAddress(val.target.value)}
                     />
+<<<<<<< HEAD
+=======
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <ErrorMessage errors={errors} name="address">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+>>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -125,6 +178,19 @@ const ModalComponent = () => {
                       options={optionsCompanyType}
                       placeholder="Negara"
                     />
+<<<<<<< HEAD
+=======
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+>>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -165,6 +231,19 @@ const ModalComponent = () => {
                       placeholder="Provinsi"
                       isDisabled={country ? false : true}
                     />
+<<<<<<< HEAD
+=======
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+>>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -206,6 +285,19 @@ const ModalComponent = () => {
                       placeholder="Kota/Kabupaten"
                       isDisabled={country && province ? false : true}
                     />
+<<<<<<< HEAD
+=======
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+>>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -246,6 +338,19 @@ const ModalComponent = () => {
                       placeholder="Kecamatan"
                       isDisabled={country && province && city ? false : true}
                     />
+<<<<<<< HEAD
+=======
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
+                    {errorsSelect.country && (
+                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
+                        This is required
+                      </p>
+                    )}
+>>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -287,6 +392,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
+<<<<<<< HEAD
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
@@ -295,6 +401,23 @@ const ModalComponent = () => {
                         {errors.postalCode && errors.postalCode.message}
                       </p>
                     )}
+=======
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <ErrorMessage errors={errors} name="postalCode">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+>>>>>>> validate select
                   </div>
                 </div>
               </div>
@@ -327,6 +450,7 @@ const ModalComponent = () => {
                         className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
+<<<<<<< HEAD
                     </div>
                     <div className="w-2/5 flex-col">
                       <input
@@ -349,6 +473,71 @@ const ModalComponent = () => {
                         className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
+=======
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <input
+                        name="phoneNumberExt"
+                        ref={register({
+                          minLength: {
+                            value: 4,
+                            message: "This input is less than 4 characters",
+                          },
+                          maxLength: {
+                            value: 30,
+                            message: "This input is more than 30 characters",
+                          },
+                          pattern: {
+                            value: /^\d+$/,
+                            message: "This input is number 0-9",
+                          },
+                        })}
+                        onChange={(val) => setPhoneNumberExt(val.target.value)}
+                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
+                        placeholder="Ext."
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
+                    <label>Nomor Telepon</label>
+                  </div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <ErrorMessage errors={errors} name="phoneNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <ErrorMessage errors={errors} name="phoneNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+>>>>>>> validate select
                     </div>
                   </div>
                 </div>
@@ -425,6 +614,7 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
+<<<<<<< HEAD
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
@@ -480,6 +670,48 @@ const ModalComponent = () => {
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
+=======
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
+                    <div className="w-3/5 flex-col mr-8">
+                      <ErrorMessage errors={errors} name="faxNumber">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                    <div className="w-2/5 flex-col">
+                      <ErrorMessage errors={errors} name="faxNumberExt">
+                        {({ messages }) => {
+                          return (
+                            messages &&
+                            Object.entries(messages).map(([type, message]) => (
+                              <p
+                                key={type}
+                                className="px-2 text-sm text-red-500"
+                              >
+                                {message}
+                              </p>
+                            ))
+                          );
+                        }}
+                      </ErrorMessage>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+>>>>>>> validate select
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
                   </div>
@@ -504,6 +736,7 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
+<<<<<<< HEAD
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
@@ -512,6 +745,23 @@ const ModalComponent = () => {
                         {errors.companyEmail && errors.companyEmail.message}
                       </p>
                     )}
+=======
+                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
+                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
+                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
+                    <ErrorMessage errors={errors} name="companyEmail">
+                      {({ messages }) => {
+                        return (
+                          messages &&
+                          Object.entries(messages).map(([type, message]) => (
+                            <p key={type} className="px-2 text-sm text-red-500">
+                              {message}
+                            </p>
+                          ))
+                        );
+                      }}
+                    </ErrorMessage>
+>>>>>>> validate select
                   </div>
                 </div>
               </div>

From 857bba6d9a58877c4dfcd9153d5f9f95025dd94d Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 23:04:20 +0700
Subject: [PATCH 34/43] fix

---
 .../Component/General/Component/Modal.tsx     | 250 ------------------
 1 file changed, 250 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index cc22296..9d23089 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -1,9 +1,5 @@
 import React, { useContext } from "react";
-<<<<<<< HEAD
 import { useFormContext } from "react-hook-form";
-=======
-import { ErrorMessage, useFormContext } from "react-hook-form";
->>>>>>> validate select
 import Select from "react-select";
 import { GeneralContext } from "../Controller";
 
@@ -30,18 +26,9 @@ const ModalComponent = () => {
     Indonesia,
     Yogya,
     Sleman,
-<<<<<<< HEAD
     register,
   } = useContext(GeneralContext);
   const { errors } = useFormContext();
-=======
-    _onValidate,
-    register,
-    handleSubmit,
-    errors,
-  } = useContext(GeneralContext);
-  const { errors: errorsSelect } = useFormContext();
->>>>>>> validate select
 
   return (
     <div className="bg-white">
@@ -76,26 +63,6 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Nama Cabang/Lokasi Cabang"
                     />
-<<<<<<< HEAD
-=======
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="branchName">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
->>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -130,26 +97,6 @@ const ModalComponent = () => {
                       })}
                       onChange={(val) => setAddress(val.target.value)}
                     />
-<<<<<<< HEAD
-=======
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="address">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
->>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -178,19 +125,6 @@ const ModalComponent = () => {
                       options={optionsCompanyType}
                       placeholder="Negara"
                     />
-<<<<<<< HEAD
-=======
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
-                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
-                        This is required
-                      </p>
-                    )}
->>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -231,19 +165,6 @@ const ModalComponent = () => {
                       placeholder="Provinsi"
                       isDisabled={country ? false : true}
                     />
-<<<<<<< HEAD
-=======
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
-                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
-                        This is required
-                      </p>
-                    )}
->>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -285,19 +206,6 @@ const ModalComponent = () => {
                       placeholder="Kota/Kabupaten"
                       isDisabled={country && province ? false : true}
                     />
-<<<<<<< HEAD
-=======
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
-                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
-                        This is required
-                      </p>
-                    )}
->>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -338,19 +246,6 @@ const ModalComponent = () => {
                       placeholder="Kecamatan"
                       isDisabled={country && province && city ? false : true}
                     />
-<<<<<<< HEAD
-=======
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 justify-start">
-                    {errorsSelect.country && (
-                      <p className="bg-red-200 px-2 py-1 text-xs text-red-500 rounded-b">
-                        This is required
-                      </p>
-                    )}
->>>>>>> validate select
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
@@ -392,7 +287,6 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-<<<<<<< HEAD
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
@@ -401,23 +295,6 @@ const ModalComponent = () => {
                         {errors.postalCode && errors.postalCode.message}
                       </p>
                     )}
-=======
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="postalCode">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
->>>>>>> validate select
                   </div>
                 </div>
               </div>
@@ -450,7 +327,6 @@ const ModalComponent = () => {
                         className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="+62xx-xxxxxxxxxxxx"
                       />
-<<<<<<< HEAD
                     </div>
                     <div className="w-2/5 flex-col">
                       <input
@@ -473,71 +349,6 @@ const ModalComponent = () => {
                         className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                         placeholder="Ext."
                       />
-=======
-                    </div>
-                    <div className="w-2/5 flex-col">
-                      <input
-                        name="phoneNumberExt"
-                        ref={register({
-                          minLength: {
-                            value: 4,
-                            message: "This input is less than 4 characters",
-                          },
-                          maxLength: {
-                            value: 30,
-                            message: "This input is more than 30 characters",
-                          },
-                          pattern: {
-                            value: /^\d+$/,
-                            message: "This input is number 0-9",
-                          },
-                        })}
-                        onChange={(val) => setPhoneNumberExt(val.target.value)}
-                        className="w-full bg-white border border-gray-400 hover:border-gray-500 py-1 px-2"
-                        placeholder="Ext."
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
-                    <label>Nomor Telepon</label>
-                  </div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
-                    <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="phoneNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
-                    </div>
-                    <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="phoneNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
->>>>>>> validate select
                     </div>
                   </div>
                 </div>
@@ -614,7 +425,6 @@ const ModalComponent = () => {
                     </div>
                   </div>
                 </div>
-<<<<<<< HEAD
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
@@ -670,48 +480,6 @@ const ModalComponent = () => {
                   </div>
                 </div>
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pt-2 items-center">
-=======
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex justify-start">
-                    <div className="w-3/5 flex-col mr-8">
-                      <ErrorMessage errors={errors} name="faxNumber">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
-                    </div>
-                    <div className="w-2/5 flex-col">
-                      <ErrorMessage errors={errors} name="faxNumberExt">
-                        {({ messages }) => {
-                          return (
-                            messages &&
-                            Object.entries(messages).map(([type, message]) => (
-                              <p
-                                key={type}
-                                className="px-2 text-sm text-red-500"
-                              >
-                                {message}
-                              </p>
-                            ))
-                          );
-                        }}
-                      </ErrorMessage>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
->>>>>>> validate select
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold">
                     <label>E-mail Perusahaan</label>
                   </div>
@@ -736,7 +504,6 @@ const ModalComponent = () => {
                     />
                   </div>
                 </div>
-<<<<<<< HEAD
                 <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row pb-2 items-center">
                   <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
                   <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
@@ -745,23 +512,6 @@ const ModalComponent = () => {
                         {errors.companyEmail && errors.companyEmail.message}
                       </p>
                     )}
-=======
-                <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row py-2 items-center">
-                  <div className="w-full sm:w-1/3 md:w-1/3 lg:w-1/3 xl:w-1/3 mx-4 text-left sm:text-right md:text-right lg:text-right xl:text-right font-bold"></div>
-                  <div className="w-full sm:w-2/3 md:w-2/3 lg:w-2/3 xl:w-2/3 mx-4 flex flex-col justify-start">
-                    <ErrorMessage errors={errors} name="companyEmail">
-                      {({ messages }) => {
-                        return (
-                          messages &&
-                          Object.entries(messages).map(([type, message]) => (
-                            <p key={type} className="px-2 text-sm text-red-500">
-                              {message}
-                            </p>
-                          ))
-                        );
-                      }}
-                    </ErrorMessage>
->>>>>>> validate select
                   </div>
                 </div>
               </div>

From e465b3e36169f610b0728ee35be557c39bb3f0db Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 23:05:07 +0700
Subject: [PATCH 35/43] fix

---
 .../Component/General/Component/Modal.tsx     | 22 +++++++++----------
 .../Component/General/Component/Query.tsx     |  7 ++++++
 2 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 9d23089..6fa8423 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -48,7 +48,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -84,7 +84,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -147,7 +147,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -187,7 +187,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -228,7 +228,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -266,7 +266,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -308,7 +308,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={register({
+                        ref={registerSelect({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -331,7 +331,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -381,7 +381,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -404,7 +404,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -487,7 +487,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
new file mode 100644
index 0000000..4015911
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Query = () => {
+  return <div>Isi Query</div>;
+};
+
+export default Query;

From 0e7e0a6632a83dab73814a572a5d8a1db8c7f04b Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 23:05:41 +0700
Subject: [PATCH 36/43] fix

---
 .../Component/General/Component/Modal.tsx     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 6fa8423..9d23089 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -48,7 +48,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -84,7 +84,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -147,7 +147,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -187,7 +187,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -228,7 +228,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -266,7 +266,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -308,7 +308,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={registerSelect({
+                        ref={register({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -331,7 +331,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -381,7 +381,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -404,7 +404,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -487,7 +487,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,

From 36103af59c53d06db68b024d799b8d586908a7dd Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:48:57 +0700
Subject: [PATCH 37/43] add modal & validation form new entry

---
 .../VendorProfile/Component/General/Component/Query.tsx    | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
deleted file mode 100644
index 4015911..0000000
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const Query = () => {
-  return <div>Isi Query</div>;
-};
-
-export default Query;

From 33edc24191f3b22f2819416b1b2879c5c73cadb6 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:59:22 +0700
Subject: [PATCH 38/43] fix

---
 .../Private/VendorProfile/Component/General/Component/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index 9d23089..edb6faf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -36,7 +36,7 @@ const ModalComponent = () => {
         <div className="py-1 px-4 mt-6">
           <span className="text-gray-900 text-2xl">Use as Branch Office</span>
         </div>
-        <form onSubmit={handleSubmit(_onValidate())}>
+        <form>
           <div className="w-full">
             <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row xl:flex-row">
               <div className="w-full py-4">

From 56e54a93c7bdaeca1ab68dbc6548731c70053e3c Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:00:43 +0700
Subject: [PATCH 39/43] fix

---
 .../Component/General/Component/Modal.tsx     | 22 +++++++++----------
 .../Component/General/Component/Query.tsx     |  7 ++++++
 2 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index edb6faf..df66bf1 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -48,7 +48,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -84,7 +84,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -147,7 +147,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -187,7 +187,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -228,7 +228,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -266,7 +266,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -308,7 +308,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={register({
+                        ref={registerSelect({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -331,7 +331,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -381,7 +381,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -404,7 +404,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={register({
+                        ref={registerSelect({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -487,7 +487,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={register({
+                      ref={registerSelect({
                         required: "This is required",
                         minLength: {
                           value: 8,
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
new file mode 100644
index 0000000..4015911
--- /dev/null
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Query = () => {
+  return <div>Isi Query</div>;
+};
+
+export default Query;

From efe3bc1739b53e3d119ac384f83743f6f0448143 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 22:01:22 +0700
Subject: [PATCH 40/43] fix

---
 .../Component/General/Component/Modal.tsx     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
index df66bf1..edb6faf 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Modal.tsx
@@ -48,7 +48,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="branchName"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -84,7 +84,7 @@ const ModalComponent = () => {
                       className="w-full bg-white border border-gray-400 rounded hover:border-gray-500 py-1 px-2"
                       placeholder="Alamat"
                       name="address"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -147,7 +147,7 @@ const ModalComponent = () => {
                       className="province"
                       name="province"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -187,7 +187,7 @@ const ModalComponent = () => {
                       className="city"
                       name="city"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -228,7 +228,7 @@ const ModalComponent = () => {
                       className="district"
                       name="district"
                       isClearable
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,
@@ -266,7 +266,7 @@ const ModalComponent = () => {
                     <input
                       type="number"
                       name="postalCode"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 5,
@@ -308,7 +308,7 @@ const ModalComponent = () => {
                     <div className="w-3/5 flex-col mr-8">
                       <input
                         name="phoneNumber"
-                        ref={registerSelect({
+                        ref={register({
                           required: "This is required",
                           minLength: {
                             value: 4,
@@ -331,7 +331,7 @@ const ModalComponent = () => {
                     <div className="w-2/5 flex-col">
                       <input
                         name="phoneNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -381,7 +381,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumber"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -404,7 +404,7 @@ const ModalComponent = () => {
                       <input
                         type="number"
                         name="faxNumberExt"
-                        ref={registerSelect({
+                        ref={register({
                           minLength: {
                             value: 4,
                             message: "This input is less than 4 characters",
@@ -487,7 +487,7 @@ const ModalComponent = () => {
                     <input
                       type="text"
                       name="companyEmail"
-                      ref={registerSelect({
+                      ref={register({
                         required: "This is required",
                         minLength: {
                           value: 8,

From 0b1863a2a33682a8385f80cf9693737753adad33 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 21:48:57 +0700
Subject: [PATCH 41/43] add modal & validation form new entry

---
 .../VendorProfile/Component/General/Component/Query.tsx    | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx

diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
deleted file mode 100644
index 4015911..0000000
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Query.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const Query = () => {
-  return <div>Isi Query</div>;
-};
-
-export default Query;

From 35cd2d7709626f62314fe798d1b9674beffc5a9e Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 23:06:10 +0700
Subject: [PATCH 42/43] fix

---
 src/App/Container/Components/MainApp/View.tsx |  53 ++--
 .../Component/General/Component/General.tsx   |  54 +++-
 .../Component/General/Component/Table.tsx     | 284 +++++++++---------
 3 files changed, 211 insertions(+), 180 deletions(-)

diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index d7836d9..7892bf1 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -1,32 +1,35 @@
 import React from "react";
 
-export const MainApp = ({
-  title,
-  children,
-  onActionRefresh = () => {},
-  onActionDone = () => {},
-  onActionNew = () => {},
-  onActionPrimary = () => {},
-}) => {
+export const MainApp = ({ title, children, button = {} }) => {
   return (
-    <div className="w-full h-full overflow-y-auto">
-      <div className="w-full border-b-2 bg-gray-200">
-        <div className="text-left py-2 pl-6 text-gray-600 text-sm font-semibold">
-          {title}
-        </div>
-      </div>
-      <div className="w-full bg-white">
-        <div className="text-left py-3 px-6">{children}</div>
-      </div>
+    <div className="w-full h-full">
       <div className="w-full">
-        <div className="text-left py-3 px-6">
-          <p className="text-xs text-gray-700 font-semibold">Perhatian :</p>
-          <p className="text-xs text-gray-700 text-justify">
-            This program is protected by copyright law and international
-            treaties. Unauthorized reproduction or distribution of the program,
-            or any portion, may result in civil and criminal penalties, and will
-            be prosecuted to the maximum extent under the law.
-          </p>
+        <div className="w-full border-b-2 bg-gray-200">
+          <div className="flex flex-row justify-between">
+            <div className="text-left py-2 pl-6 text-gray-600 text-sm font-semibold">
+              {title}
+            </div>
+            {button}
+          </div>
+        </div>
+        <div className="w-full bg-white">
+          <div>
+            <div className="text-left py-3 px-6">{children}</div>
+          </div>
+        </div>
+        <div className="w-full">
+          <div>
+            <div className="text-left py-3 px-6">
+              <p className="text-xs text-gray-700 font-semibold">Perhatian :</p>
+              <p className="text-xs text-gray-700 text-justify">
+                This program is protected by copyright law and international
+                treaties. Unauthorized reproduction or distribution of the
+                program, or any portion, may result in civil and criminal
+                penalties, and will be prosecuted to the maximum extent under
+                the law.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
index c7d506a..515f966 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/General.tsx
@@ -8,13 +8,55 @@ import ModalComponent from "./Modal";
 const GeneralComponent = () => {
   const { open, setOpen, _handleSubmit } = useContext(GeneralContext);
 
+  const ButtonMainApp = () => {
+    return (
+      <div className="text-xs mr-6 flex flex-row items-center">
+        <div>
+          <button className="my-0 mr-6">
+            <svg
+              className="fill-current h-3 w-3 text-blue-800"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+            >
+              <path
+                fill="currentColor"
+                d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        {/* <button className="bg-orangepindad-100 hover:bg-yellow-600 text-white mr-3 px-4 py-1 inline-flex items-center border border-yellow-500">
+          <svg
+            className="fill-current h-3 w-3 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 18 18"
+          >
+            <path d="M9 8c1.66 0 2.99-1.34 2.99-3S10.66 2 9 2C7.34 2 6 3.34 6 5s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V16h14v-2.5c0-2.33-4.67-3.5-7-3.5z" />
+          </svg>
+          <span>Set Primary Data</span>
+        </button> */}
+        <button className="bg-bluepindad-300 hover:bg-blue-900 text-white px-4 py-1 inline-flex items-center border border-blue-800">
+          Selesai
+        </button>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-greenpindad-100 hover:bg-green-700 text-white px-4 py-1 inline-flex items-center border border-gray-600"
+        >
+          <svg
+            className="fill-current w-3 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 5 5"
+          >
+            <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
+          </svg>
+          <span>Buat Entri Baru</span>
+        </button>
+      </div>
+    );
+  };
+
   return (
-    <MainApp
-      title="PROFIL PERUSAHAAN"
-      onActionRefresh={() => alert("Ok")}
-      onActionDone={() => alert("Done")}
-      onActionNew={() => setOpen(true)}
-    >
+    <MainApp title="PROFIL PERUSAHAAN" button={<ButtonMainApp />}>
       <div className="flex flex-col">
         <div className="w-full flex flex-col w-4/5 bg-white text-sm">
           <div className="flex flex-row py-6">
diff --git a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
index 5ec0db4..fb8e7b2 100644
--- a/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
+++ b/src/App/Container/Views/Private/VendorProfile/Component/General/Component/Table.tsx
@@ -1,11 +1,7 @@
 import React, { useContext } from "react";
 import "../../../../../../Assets/Css/App.css";
-import { HomeContext } from "../../../Controller";
 
 const Table = () => {
-  const { generalList } = useContext(HomeContext);
-  console.log("CEK", generalList);
-
   return (
     <div>
       <table className="w-full">
@@ -31,152 +27,142 @@ const Table = () => {
             </th>
           </tr>
         </thead>
-        {generalList && Object.keys(generalList)}
-        {/* <tbody>
-          {generalList &&
+        <tbody>
+          {/* {generalList &&
             generalList.map((e: any, i: any) => (
-              <Fragment key={i}>
-                <tr className="hover:bg-gray-200">
-                  <td
-                    className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
-                    rowSpan={13}
-                  >
-                    {i + 1}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    Nama Perusahaan
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.companyName}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    Dipersiapkan
-                  </td>
-                  <td
-                    className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
-                    rowSpan={13}
-                  >
-                    <button
-                      title="Ubah Perusahaan"
-                      // onClick={() => controller.setOpen(true)}
-                    >
-                      <svg
-                        className="fill-current text-blue-700 w-3 h-3"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 576 512"
-                      >
-                        <path
-                          fill="currentColor"
-                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-                        ></path>
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Kategori Lokasi
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.address}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Negara</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.county}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Provinsi</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.province}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Kota</td>
-                  <td className="border border-gray-400 py-1 px-4">{e.city}</td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Kecamatan
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.district}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.postalCode}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">alamat</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.address}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Nomor Telepon
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.phoneNumber}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    Nomor Faksimile
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.faxNumber}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">Situs</td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.website}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <tr className="hover:bg-gray-200">
-                  <td className="border border-gray-400 py-1 px-4">
-                    E-mail Perusahaan
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4">
-                    {e.eMail}
-                  </td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                  <td className="border border-gray-400 py-1 px-4"></td>
-                </tr>
-                <td
-                  className="border border-gray-400 py-1 px-4"
-                  colSpan={4}
-                ></td>
-              </Fragment>
-            ))}
-        </tbody> */}
+              <Fragment key={i}> */}
+          <tr className="hover:bg-gray-200">
+            <td
+              className="border border-gray-400 py-1 px-4 text-center align-top bg-white"
+              rowSpan={13}
+            >
+              {/* {i + 1} */}1
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              Nama Perusahaan
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.companyName} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4">Dipersiapkan</td>
+            <td
+              className="border border-gray-400 py-1 px-4 align-top text-center bg-white"
+              rowSpan={13}
+            >
+              <button
+                title="Ubah Perusahaan"
+                // onClick={() => controller.setOpen(true)}
+              >
+                <svg
+                  className="fill-current text-blue-700 w-3 h-3"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 576 512"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                  ></path>
+                </svg>
+              </button>
+            </td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">
+              Kategori Lokasi
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.address} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Negara</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.county} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Provinsi</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.province} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Kota</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.city} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Kecamatan</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.district} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Kode Pos</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.postalCode} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">alamat</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.address} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Nomor Telepon</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.phoneNumber} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">
+              Nomor Faksimile
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.faxNumber} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">Situs</td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.website} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <tr className="hover:bg-gray-200">
+            <td className="border border-gray-400 py-1 px-4">
+              E-mail Perusahaan
+            </td>
+            <td className="border border-gray-400 py-1 px-4">
+              {/* {e.eMail} */}
+            </td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+            <td className="border border-gray-400 py-1 px-4"></td>
+          </tr>
+          <td className="border border-gray-400 py-1 px-4" colSpan={4}></td>
+        </tbody>
       </table>
     </div>
   );

From 177d3662cf9d196ae3f7c466bbe17dcc40d50b22 Mon Sep 17 00:00:00 2001
From: Fuad Rifki Refactory <fuad.rifki98@gmail.com>
Date: Mon, 20 Apr 2020 23:10:15 +0700
Subject: [PATCH 43/43] fix modal

---
 src/App/Container/Components/MainApp/View.tsx | 2 +-
 src/Routes.tsx                                | 8 ++------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/App/Container/Components/MainApp/View.tsx b/src/App/Container/Components/MainApp/View.tsx
index 7892bf1..07bbe90 100644
--- a/src/App/Container/Components/MainApp/View.tsx
+++ b/src/App/Container/Components/MainApp/View.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-export const MainApp = ({ title, children, button = {} }) => {
+export const MainApp = ({ title, children, button = "" }) => {
   return (
     <div className="w-full h-full">
       <div className="w-full">
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 34c568a..325fbac 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -15,7 +15,7 @@ import {
   TermCondition,
   UserManual,
 } from "./App/Container/Views/Public/index";
-import { VendorProfile,ChangePassword,Beranda } from "./App/Container/Views/Private/index";
+import { ChangePassword, Beranda } from "./App/Container/Views/Private/index";
 import { PublicHeader, PublicSidebar } from "./App/Layout/Public/index";
 import { PrivateSidebar } from "./App/Layout/Private/index";
 import history from "./App/Misc/BrowserHistory";
@@ -103,12 +103,8 @@ const Routes = () => {
                 path="/registration"
                 component={Registration}
               />
+              <PrivateRoute exact path="/vendor" component={Beranda} />
               <PrivateRoute
-                exact
-                path="/vendor"
-                component={Beranda}
-              />
-               <PrivateRoute
                 exact
                 path="/vendor/password_updates"
                 component={ChangePassword}