bodyshop/client/src/components/shop-info/shop-info.component.jsx

import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Button, Card, Tabs } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ShopInfoGeneral from "./shop-info.general.component";
import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
import ShopInfoLaborRates from "./shop-info.laborrates.component";
import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
import ShopInfoPartsScan from "./shop-info.parts-scan";
import ShopInfoRbacComponent from "./shop-info.rbac.component";
import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
import { useLocation, useNavigate } from "react-router-dom";
import ShopInfoTaskPresets from "./shop-info.task-presets.component";
import queryString from "query-string";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import ShopInfoRoGuard from "./shop-info.roguard.component";
import ShopInfoIntellipay from "./shop-intellipay-config.component";

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

export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
  const {
    treatments: { CriticalPartsScanning, Enhanced_Payroll }
  } = useSplitTreatments({
    attributes: {},
    names: ["CriticalPartsScanning", "Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });

  const { t } = useTranslation();
  const history = useNavigate();
  const location = useLocation();
  const search = queryString.parse(location.search);

  const tabItems = [
    {
      key: "general",
      label: t("bodyshop.labels.shopinfo"),
      children: <ShopInfoGeneral form={form} />,
      id: "tab-shop-general"
    },
    {
      key: "speedprint",
      label: t("bodyshop.labels.speedprint"),
      children: <ShopInfoSpeedPrint form={form} />,
      id: "tab-shop-speedprint"
    },
    {
      key: "rbac",
      label: t("bodyshop.labels.rbac"),
      children: <ShopInfoRbacComponent form={form} />,
      id: "tab-shop-rbac"
    },
    {
      key: "roStatus",
      label: t("bodyshop.labels.jobstatuses"),
      children: <ShopInfoROStatusComponent form={form} />,
      id: "tab-shop-rostatus"
    },
    {
      key: "scheduling",
      label: t("bodyshop.labels.scheduling"),
      children: <ShopInfoSchedulingComponent form={form} />,
      id: "tab-shop-scheduling"
    },
    {
      key: "orderStatus",
      label: t("bodyshop.labels.orderstatuses"),
      children: <ShopInfoOrderStatusComponent form={form} />,
      id: "tab-shop-orderstatus"
    },
    {
      key: "responsibilityCenters",
      label: t("bodyshop.labels.responsibilitycenters.title"),
      children: <ShopInfoResponsibilityCenterComponent form={form} />,
      id: "tab-shop-responsibilitycenters"
    },
    ...InstanceRenderManager({
      imex: [
        {
          key: "checklists",
          label: t("bodyshop.labels.checklists"),
          children: <ShopInfoIntakeChecklistComponent form={form} />,
          id: "tab-shop-checklists"
        }
      ],
      rome: "USE_IMEX",
      promanager: []
    }),
    {
      key: "laborrates",
      label: t("bodyshop.labels.laborrates"),
      children: <ShopInfoLaborRates form={form} />,
      id: "tab-shop-laborrates"
    },
    ...(CriticalPartsScanning.treatment === "on"
      ? [
          {
            key: "partsscan",
            label: t("bodyshop.labels.partsscan"),
            children: <ShopInfoPartsScan form={form} />,
            id: "tab-shop-partsscan"
          }
        ]
      : []),
    ...(Enhanced_Payroll.treatment === "on"
      ? [
          {
            key: "task-presets",
            label: t("bodyshop.labels.task-presets"),
            children: <ShopInfoTaskPresets form={form} />,
            id: "tab-shop-task-presets"
          }
        ]
      : []),
    ...InstanceRenderManager({
      imex: [
        {
          key: "roguard",
          label: t("bodyshop.labels.roguard.title"),
          children: <ShopInfoRoGuard form={form} />,
          id: "tab-shop-roguard"
        }
      ],
      rome: "USE_IMEX",
      promanager: []
    }),
    ...InstanceRenderManager({
      imex: [],
      rome: [
        {
          key: "intellipay",
          label: InstanceRenderManager({ rome: t("bodyshop.labels.romepay"), imex: t("bodyshop.labels.imexpay") }),
          children: <ShopInfoIntellipay form={form} />
        }
      ],
      promanager: []
    })
  ];
  return (
    <Card
      extra={
        <Button type="primary" loading={saveLoading} onClick={() => form.submit()}>
          {t("general.actions.save")}
        </Button>
      }
    >
      <Tabs
        defaultActiveKey={search.subtab}
        onChange={(key) =>
          history({
            search: `?tab=${search.tab}&subtab=${key}`
          })
        }
        items={tabItems}
      />
    </Card>
  );
}