Calculation/Form: add SupplierAgent component

Components/Calculation/Form/LeasingObject/index.jsx

@@ -1,4 +1,4 @@
-import renderFormComponent from 'Components/Calculation/lib/renderFormComponent';
+import renderFormComponent from '../../lib/renderFormComponent';
 import config from './config';
 
 function LeasingObject() {

Components/Calculation/Form/Payments/config.ts

@@ -1,10 +1,10 @@
 /* eslint-disable import/prefer-default-export */
-import type { FormComponentConfig } from '../../lib/renderFormComponent';
+import type { ElementsRow } from '../../lib/renderFormComponent';
 
 export const id = 'payments';
 export const title = 'Платежи';
 
-export const elements: FormComponentConfig['rows'][number][0] = [
+export const elements: ElementsRow['0'] = [
   'radioGraphType',
   'selectSeasonType',
   'tbxParmentsDecreasePercent',

Components/Calculation/Form/SupplierAgent/config.ts

@@ -0,0 +1,51 @@
+/* eslint-disable object-curly-newline */
+import type { FormComponentConfig } from '../../lib/renderFormComponent';
+
+const config: FormComponentConfig = {
+  id: 'supplier-agent',
+  title: 'Поставщик/агент',
+  rows: [
+    { title: 'Поставщик предмета лизинга' },
+    [['selectDealer'], { gridTemplateColumns: '1fr' }],
+    [
+      ['selectDealerPerson', 'selectDealerBroker'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+    [
+      ['selectDealerRewardCondition', 'selectDealerBrokerRewardCondition'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+    [
+      ['tbxDealerRewardSumm', 'tbxDealerBrokerRewardSumm'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+
+    { title: 'Агент, передавший контакт' },
+    [
+      ['selectIndAgent', 'selectCalcDoubleAgent'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+    [
+      ['selectIndAgentRewardCondition', 'selectCalcDoubleAgentRewardCondition'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+    [
+      ['tbxIndAgentRewardSumm', 'tbxCalcDoubleAgentRewardSumm'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+    [
+      ['selectCalcBroker', 'selectCalcFinDepartment'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+    [
+      ['selectCalcBrokerRewardCondition', 'selectFinDepartmentRewardCondtion'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+    [
+      ['tbxCalcBrokerRewardSum', 'tbxFinDepartmentRewardSumm'],
+      { gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'] },
+    ],
+  ],
+};
+
+export default config;

Components/Calculation/Form/SupplierAgent/index.jsx

@@ -0,0 +1,12 @@
+import renderFormComponent from '../../lib/renderFormComponent';
+import config from './config';
+
+function Leasing() {
+  return renderFormComponent(config);
+}
+
+export default {
+  id: config.id,
+  title: config.title,
+  Component: Leasing,
+};

Components/Calculation/Form/index.jsx

@@ -3,15 +3,16 @@ import { Tabs, Wrapper } from 'Elements/layout/Tabs';
 import Leasing from './Leasing';
 import LeasingObject from './LeasingObject';
 import Payments from './Payments';
+import SupplierAgent from './SupplierAgent';
 
-const formTabs = [Leasing, Payments, LeasingObject];
+const formTabs = [Leasing, Payments, LeasingObject, SupplierAgent];
 
 function Form() {
   return (
     <Wrapper>
-      <Tabs type="card">
+      <Tabs type="card" tabBarGutter="5px">
         {formTabs.map(({ id, title, Component }) => (
-          <Tabs.TabPane tab={title} key={id} animated style>
+          <Tabs.TabPane tab={title} key={id}>
             <Background>
               <Component />
             </Background>

Components/Calculation/lib/renderFormComponent.tsx

@@ -1,3 +1,4 @@
+import Divider from 'Elements/layout/Divider';
 import type { BoxProps } from 'UIKit/grid';
 import { Box } from 'UIKit/grid';
 import elementsRender from '../config/elements-render';
@@ -5,36 +6,47 @@ import type { Elements as ActionElements } from '../config/map/actions';
 import type { Elements as ComputedElements } from '../config/map/computed';
 import type { Elements as ValuesElements } from '../config/map/values';
 
+export type ElementsRow = [
+  elements: (ValuesElements | ComputedElements | ActionElements)[],
+  style?: BoxProps['sx']
+];
+type DividerRow = { title: string };
+
 export type FormComponentConfig = {
   id: string;
   title: string;
-  rows: Array<
-    [elements: (ValuesElements | ComputedElements | ActionElements)[], style?: BoxProps['sx']]
-  >;
+  rows: Array<ElementsRow | DividerRow>;
 };
 
 function renderFormComponent(config: FormComponentConfig) {
-  const rows = config.rows.map(([elements, style], i) => {
-    const renderedElements = elements.map((elementName) => {
-      const render = elementsRender[elementName]?.render;
+  const rows = config.rows.map((row, i) => {
+    if (Array.isArray(row)) {
+      const [elements, style] = row;
+      const renderedElements = elements.map((elementName) => {
+        const render = elementsRender[elementName]?.render;
 
-      return render();
-    });
+        return render();
+      });
 
-    return (
-      <Box
-        // eslint-disable-next-line react/no-array-index-key
-        key={i.toString()}
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: ['1fr', '1fr', 'repeat(3, 1fr)'],
-          gap: '10px',
-          ...style,
-        }}
-      >
-        {renderedElements}
-      </Box>
-    );
+      return (
+        <Box
+          // eslint-disable-next-line react/no-array-index-key
+          key={i.toString()}
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: ['1fr', '1fr', 'repeat(3, 1fr)'],
+            gap: '10px',
+            ...style,
+          }}
+        >
+          {renderedElements}
+        </Box>
+      );
+    }
+
+    const { title } = row;
+
+    return <Divider>{title}</Divider>;
   });
 
   return (

Elements/layout/Divider.js

@@ -0,0 +1,4 @@
+/* eslint-disable unicorn/filename-case */
+/* eslint-disable no-restricted-exports */
+
+export { Divider as default } from 'antd';