BOD-61 Fixed invoice enter modal to simplify + follow new modal pattern.

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -0,0 +1,40 @@
+import { Select, Tag } from "antd";
+import React, { useEffect, useState } from "react";
+const { Option } = Select;
+
+//To be used as a form element only.
+
+const VendorSearchSelect = ({ value, onChange, options, onSelect }) => {
+  const [option, setOption] = useState(value);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  return (
+    <Select
+      showSearch
+      value={option}
+      style={{
+        width: 300
+      }}
+      onChange={setOption}
+      optionFilterProp="children"
+      onSelect={onSelect}
+    >
+      {options
+        ? options.map(o => (
+            <Option key={o.id} value={o.id} discount={o.discount}>
+              <div style={{ display: "flex" }}>
+                {o.name}
+                <Tag color="green">{`${o.discount * 100}%`}</Tag>
+              </div>
+            </Option>
+          ))
+        : null}
+    </Select>
+  );
+};
+export default VendorSearchSelect;