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';

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} />,
    },
    {
      key: 'speedprint',
      label: t('bodyshop.labels.speedprint'),
      children: <ShopInfoSpeedPrint form={form} />,
    },
    {
      key: 'rbac',
      label: t('bodyshop.labels.rbac'),
      children: <ShopInfoRbacComponent form={form} />,
    },
    {
      key: 'roStatus',
      label: t('bodyshop.labels.jobstatuses'),
      children: <ShopInfoROStatusComponent form={form} />,
    },
    {
      key: 'scheduling',
      label: t('bodyshop.labels.scheduling'),
      children: <ShopInfoSchedulingComponent form={form} />,
    },
    {
      key: 'orderStatus',
      label: t('bodyshop.labels.orderstatuses'),
      children: <ShopInfoOrderStatusComponent form={form} />,
    },
    {
      key: 'responsibilityCenters',
      label: t('bodyshop.labels.responsibilitycenters.title'),
      children: <ShopInfoResponsibilityCenterComponent form={form} />,
    },
    ...InstanceRenderManager({
      imex: [
        {
          key: 'checklists',
          label: t('bodyshop.labels.checklists'),
          children: <ShopInfoIntakeChecklistComponent form={form} />,
        },
      ],
      rome: 'USE_IMEX',
      promanager: [],
    }),
    {
      key: 'laborrates',
      label: t('bodyshop.labels.laborrates'),
      children: <ShopInfoLaborRates form={form} />,
    },
    ...(CriticalPartsScanning.treatment === 'on'
      ? [
          {
            key: 'partsscan',
            label: t('bodyshop.labels.partsscan'),
            children: <ShopInfoPartsScan form={form} />,
          },
        ]
      : []),
    ...(Enhanced_Payroll.treatment === 'on'
      ? [
          {
            key: 'task-presets',
            label: t('bodyshop.labels.task-presets'),
            children: <ShopInfoTaskPresets form={form} />,
          },
        ]
      : []),
    ...InstanceRenderManager({
      imex: [
        {
          key: 'roguard',
          label: t('bodyshop.labels.roguard.title'),
          children: <ShopInfoRoGuard form={form} />,
        },
      ],
      rome: 'USE_IMEX',
      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>
  );
}