Basic posting up to fortellis-select-customer.

client/src/components/dms-customer-selector/dms-customer-selector.component.jsx

@@ -1,8 +1,10 @@
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Col, Table } from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useSocket } from "../../contexts/SocketIO/useSocket";
 import { socket } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { alphaSort } from "../../utils/sorters";
@@ -22,17 +24,47 @@ export function DmsCustomerSelector({ bodyshop }) {
   const [selectedCustomer, setSelectedCustomer] = useState(null);
   const [dmsType, setDmsType] = useState("cdk");
 
-  socket.on("cdk-select-customer", (customerList, callback) => {
-    setOpen(true);
-    setDmsType("cdk");
-    setcustomerList(customerList);
-  });
-  socket.on("pbs-select-customer", (customerList, callback) => {
-    setOpen(true);
-    setDmsType("pbs");
-    setcustomerList(customerList);
+  const {
+    treatments: { Fortellis }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Fortellis"],
+    splitKey: bodyshop.imexshopid
   });
 
+  const { socket: wsssocket } = useSocket();
+
+  useEffect(() => {
+    if (Fortellis.treatment === "on") {
+      const handleFortellisSelectCustomer = (customerList, callback) => {
+        setOpen(true);
+        setDmsType("fortellis");
+        setcustomerList(customerList);
+      };
+      wsssocket.on("fortellis-select-customer", handleFortellisSelectCustomer);
+      return () => {
+        wsssocket.off("fortellis-select-customer", handleFortellisSelectCustomer);
+      };
+    } else {
+      const handleCdkSelectCustomer = (customerList, callback) => {
+        setOpen(true);
+        setDmsType("cdk");
+        setcustomerList(customerList);
+      };
+      const handlePbsSelectCustomer = (customerList, callback) => {
+        setOpen(true);
+        setDmsType("pbs");
+        setcustomerList(customerList);
+      };
+      socket.on("cdk-select-customer", handleCdkSelectCustomer);
+      socket.on("pbs-select-customer", handlePbsSelectCustomer);
+      return () => {
+        socket.off("cdk-select-customer", handleCdkSelectCustomer);
+        socket.off("pbs-select-customer", handlePbsSelectCustomer);
+      };
+    }
+  }, []);
+
   const onUseSelected = () => {
     setOpen(false);
     socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
@@ -51,6 +83,42 @@ export function DmsCustomerSelector({ bodyshop }) {
     setSelectedCustomer(null);
   };
 
+  const fortellisColumns = [
+    {
+      title: t("jobs.fields.dms.id"),
+      dataIndex: "customerId",
+      key: "id"
+    },
+    {
+      title: t("jobs.fields.dms.vinowner"),
+      dataIndex: "vinOwner",
+      key: "vinOwner",
+      render: (text, record) => <Checkbox disabled checked={record.vinOwner} />
+    },
+    {
+      title: t("jobs.fields.dms.name1"),
+      dataIndex: ["customerName", "firstName"],
+      key: "firstName",
+      sorter: (a, b) => alphaSort(a.customerName?.firstName, b.customerName?.firstName)
+    },
+    {
+      title: t("jobs.fields.dms.name1"),
+      dataIndex: ["customerName", "lastName"],
+      key: "lastName",
+      sorter: (a, b) => alphaSort(a.customerName?.lastName, b.customerName?.lastName)
+    },
+    {
+      title: t("jobs.fields.dms.address"),
+
+      key: "address",
+      render: (record, value) =>
+        `${record.postalAddress?.addressLine1} ${record.postalAddress?.addressLine2 ? `, ${record.postalAddress?.addressLine2}` : ""},
+        ${record.postalAddress?.city} ${record.postalAddress?.state} ${record.postalAddress?.postalCode} ${
+          record.postalAddress?.country
+        }`
+    }
+  ];
+
   const cdkColumns = [
     {
       title: t("jobs.fields.dms.id"),
@@ -122,13 +190,13 @@ export function DmsCustomerSelector({ bodyshop }) {
           </div>
         )}
         pagination={{ position: "top" }}
-        columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
-        rowKey={(record) => (dmsType === "cdk" ? record.id.value : record.ContactId)}
+        columns={dmsType === "cdk" ? (Fortellis.treatment === "on" ? fortellisColumns : cdkColumns) : pbsColumns}
+        rowKey={(record) => (dmsType === "cdk" ? record.id?.value || record.customerId : record.ContactId)}
         dataSource={customerList}
         //onChange={handleTableChange}
         rowSelection={{
           onSelect: (record) => {
-            setSelectedCustomer(dmsType === "cdk" ? record.id.value : record.ContactId);
+            setSelectedCustomer(dmsType === "cdk" ? record.id?.value || record.customerId : record.ContactId);
           },
           type: "radio",
           selectedRowKeys: [selectedCustomer]