IO-1748 Add vendor # to parts order modal.

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

@@ -1,6 +1,7 @@
 import { HeartOutlined } from "@ant-design/icons";
-import { Select, Tag } from "antd";
+import { Select, Space, Tag } from "antd";
 import React, { forwardRef, useEffect, useState } from "react";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 const { Option } = Select;
 
 //To be used as a form element only.
@@ -35,6 +36,7 @@ const VendorSearchSelect = (
       style={{
         width: "100%",
       }}
+      dropdownMatchSelectWidth={false}
       onChange={setOption}
       optionFilterProp="name"
       onSelect={onSelect}
@@ -50,10 +52,15 @@ const VendorSearchSelect = (
             >
               <div className="imex-flex-row">
                 <div style={{ flex: 1 }}>{o.name}</div>
-                <HeartOutlined />
-                {o.discount && o.discount !== 0 ? (
-                  <Tag color="green">{`${o.discount * 100}%`}</Tag>
-                ) : null}
+                <Space style={{ marginLeft: "1rem" }}>
+                  <HeartOutlined style={{ color: "red" }} />
+                  {o.phone && (
+                    <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
+                  )}
+                  {o.discount && o.discount !== 0 ? (
+                    <Tag color="green">{`${o.discount * 100}%`}</Tag>
+                  ) : null}
+                </Space>
               </div>
             </Option>
           ))
@@ -64,9 +71,14 @@ const VendorSearchSelect = (
               <div className="imex-flex-row" style={{ width: "100%" }}>
                 <div style={{ flex: 1 }}>{o.name}</div>
 
-                {o.discount && o.discount !== 0 ? (
-                  <Tag color="green">{`${o.discount * 100}%`}</Tag>
-                ) : null}
+                <Space style={{ marginLeft: "1rem" }}>
+                  {o.phone && (
+                    <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
+                  )}
+                  {o.discount && o.discount !== 0 ? (
+                    <Tag color="green">{`${o.discount * 100}%`}</Tag>
+                  ) : null}
+                </Space>
               </div>
             </Option>
           ))

client/src/graphql/vendors.queries.js

@@ -87,6 +87,7 @@ export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
       discount
       email
       active
+      phone
     }
     jobs(where: { id: { _eq: $jobId } }) {
       v_make_desc