From a2a88682235b844daa83d2081ea2fe779a727c26 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 2 Mar 2022 11:18:10 -0800
Subject: [PATCH] IO-1748 Add vendor # to parts order modal.

---
 .../vendor-search-select.component.jsx        | 28 +++++++++++++------
 client/src/graphql/vendors.queries.js         |  1 +
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/client/src/components/vendor-search-select/vendor-search-select.component.jsx b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
index 465007841..7f3c67729 100644
--- a/client/src/components/vendor-search-select/vendor-search-select.component.jsx
+++ b/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>
           ))
diff --git a/client/src/graphql/vendors.queries.js b/client/src/graphql/vendors.queries.js
index d4a3986cf..f18b124ff 100644
--- a/client/src/graphql/vendors.queries.js
+++ b/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