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

import { Button, Table, Col, Checkbox } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { socket } from "../../pages/dms/dms.container";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { alphaSort } from "../../utils/sorters";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DmsCustomerSelector);

export function DmsCustomerSelector({ bodyshop }) {
  const { t } = useTranslation();
  const [customerList, setcustomerList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [dmsType, setDmsType] = useState("cdk");

  socket.on("cdk-select-customer", (customerList, callback) => {
    setVisible(true);
    setDmsType("cdk");
    setcustomerList(customerList);
  });
  socket.on("pbs-select-customer", (customerList, callback) => {
    setVisible(true);
    setDmsType("pbs");
    setcustomerList(customerList);
    console.log(
      "🚀 ~ file: dms-customer-selector.component.jsx ~ line 37 ~ socket.on ~ customerList",
      customerList
    );
  });

  const onUseSelected = () => {
    setVisible(false);
    socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
    setSelectedCustomer(null);
  };

  const onUseGeneric = () => {
    setVisible(false);
    socket.emit(
      "cdk-selected-customer",
      bodyshop.cdk_configuration.generic_customer_number
    );
    setSelectedCustomer(null);
  };

  const onCreateNew = () => {
    setVisible(false);
    socket.emit("cdk-selected-customer", null);
    setSelectedCustomer(null);
  };

  const cdkColumns = [
    {
      title: t("jobs.fields.dms.id"),
      dataIndex: ["id", "value"],
      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: ["name1", "fullName"],
      key: "name1",
      sorter: (a, b) =>
        alphaSort(a.name1 && a.name1.fullName, b.name1 && b.name1.fullName),
    },

    {
      title: t("jobs.fields.dms.address"),
      //dataIndex: ["name2", "fullName"],
      key: "address",
      render: (record, value) =>
        `${
          record.address &&
          record.address.addressLine &&
          record.address.addressLine[0]
        }, ${record.address && record.address.city} ${
          record.address && record.address.stateOrProvince
        } ${record.address && record.address.postalCode}`,
    },
  ];

  const pbsColumns = [
    {
      title: t("jobs.fields.dms.id"),
      dataIndex: "ContactId",
      key: "ContactId",
    },
    {
      title: t("jobs.fields.dms.vinowner"),
      dataIndex: "vinOwner",
      key: "vinOwner",
      render: (text, record) => <Checkbox disabled checked={record.vinOwner} />,
    },
    {
      title: t("jobs.fields.dms.name1"),
      key: "name1",
      sorter: (a, b) => alphaSort(a.LastName, b.LastName),
      render: (text, record) =>
        `${record.FirstName || ""} ${record.LastName || ""}`,
    },

    {
      title: t("jobs.fields.dms.address"),
      key: "address",
      render: (record, value) =>
        `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`,
    },
  ];

  if (!visible) return null;
  return (
    <Col span={24}>
      <Table
        title={() => (
          <div>
            <Button onClick={onUseSelected} disabled={!selectedCustomer}>
              {t("jobs.actions.dms.useselected")}
            </Button>
            <Button
              onClick={onUseGeneric}
              disabled={
                !(
                  bodyshop.cdk_configuration &&
                  bodyshop.cdk_configuration.generic_customer_number
                )
              }
            >
              {t("jobs.actions.dms.usegeneric")}
            </Button>
            <Button onClick={onCreateNew}>
              {t("jobs.actions.dms.createnewcustomer")}
            </Button>
          </div>
        )}
        pagination={{ position: "top" }}
        columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
        rowKey={(record) =>
          dmsType === "cdk" ? record.id.value : record.ContactId
        }
        dataSource={customerList}
        //onChange={handleTableChange}
        rowSelection={{
          onSelect: (record) => {
            setSelectedCustomer(
              dmsType === "cdk" ? record.id.value : record.ContactId
            );
          },
          type: "radio",
          selectedRowKeys: [selectedCustomer],
        }}
      />
    </Col>
  );
}