diff --git a/app/webpacker/controllers/mixins/useRenderCustomer.js b/app/webpacker/controllers/mixins/useRenderCustomer.js
new file mode 100644
index 0000000000..2f23da24c0
--- /dev/null
+++ b/app/webpacker/controllers/mixins/useRenderCustomer.js
@@ -0,0 +1,50 @@
+export const useRenderCustomer = (controller) => {
+  Object.assign(controller, {
+    renderOption(item, escape) {
+      if (!item.bill_address) {
+        return this.renderWithNoBillAddress(item, escape);
+      }
+      return `<div class='customer-autocomplete-item'>
+                <div class='customer-details'>
+                  <h5>${escape(item.email)}</h5>
+                  ${
+                    item.bill_address.firstname
+                      ? `<strong>${I18n.t("bill_address")}</strong>
+                      ${item.bill_address.firstname} ${
+                          item.bill_address.lastname
+                        }<br>
+                      ${item.bill_address.address1}, ${
+                          item.bill_address.address2
+                        }<br>
+                      ${item.bill_address.city}
+                      <br>
+                    ${
+                      item.bill_address.state_id &&
+                      item.bill_address.state &&
+                      item.bill_address.state.name
+                        ? item.bill_address.state.name
+                        : item.bill_address.state_name
+                    }
+                      
+                    ${
+                      item.bill_address.country &&
+                      item.bill_address.country.name
+                        ? item.bill_address.country.name
+                        : item.bill_address.country_name
+                    }
+                    `
+                      : ""
+                  }
+                </div>
+              </div>`;
+    },
+
+    renderWithNoBillAddress(item, escape) {
+      return `<div class='customer-autocomplete-item'>
+                <div class='customer-details'><h5>${escape(
+                  item.email
+                )}</h5></div>
+              </div>`;
+    },
+  });
+};
diff --git a/app/webpacker/controllers/select_customer_controller.js b/app/webpacker/controllers/select_customer_controller.js
index c02ff5bcc8..7034dbd4d0 100644
--- a/app/webpacker/controllers/select_customer_controller.js
+++ b/app/webpacker/controllers/select_customer_controller.js
@@ -1,11 +1,13 @@
 import TomSelectController from "./tom_select_controller";
 import { useSearchCustomer } from "./mixins/useSearchCustomer";
+import { useRenderCustomer } from "./mixins/useRenderCustomer";
 
 export default class extends TomSelectController {
   static values = { options: Object, distributor: Number };
 
   connect() {
     useSearchCustomer(this);
+    useRenderCustomer(this);
     const options = {
       valueField: "id",
       labelField: "email",
@@ -21,50 +23,6 @@ export default class extends TomSelectController {
     this.items = [];
   }
 
-  renderOption(item, escape) {
-    if (!item.bill_address) {
-      return this.renderWithNoBillAddress(item, escape);
-    }
-    return `<div class='customer-autocomplete-item'>
-              <div class='customer-details'>
-                <h5>${escape(item.email)}</h5>
-                ${
-                  item.bill_address.firstname
-                    ? `<strong>${I18n.t("bill_address")}</strong>
-                    ${item.bill_address.firstname} ${
-                        item.bill_address.lastname
-                      }<br>
-                    ${item.bill_address.address1}, ${
-                        item.bill_address.address2
-                      }<br>
-                    ${item.bill_address.city}
-                    <br>
-                  ${
-                    item.bill_address.state_id &&
-                    item.bill_address.state &&
-                    item.bill_address.state.name
-                      ? item.bill_address.state.name
-                      : item.bill_address.state_name
-                  }
-                    
-                  ${
-                    item.bill_address.country && item.bill_address.country.name
-                      ? item.bill_address.country.name
-                      : item.bill_address.country_name
-                  }
-                  `
-                    : ""
-                }
-              </div>
-            </div>`;
-  }
-
-  renderWithNoBillAddress(item, escape) {
-    return `<div class='customer-autocomplete-item'>
-              <div class='customer-details'><h5>${escape(item.email)}</h5></div>
-            </div>`;
-  }
-
   onItemSelect(id, item) {
     const customer = this.items.find((item) => item.id == id);
     ["bill_address", "ship_address"].forEach((address) => {