From 2e9f47d95b53674c98d324a8f8696430143e244f Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Fri, 17 Jun 2022 18:15:29 +0300
Subject: [PATCH] Calculation: add Settings Component

---
 Components/Calculation/Settings/config.ts     | 20 +++++++++++++++++++
 Components/Calculation/Settings/index.js      |  7 +++++++
 .../Calculation/config/elements-components.ts |  4 ++--
 .../Calculation/config/elements-props.ts      |  9 +++++----
 .../Calculation/config/elements-render.tsx    | 11 +++++++---
 Components/Calculation/index.js               | 12 ++++++++++-
 .../Calculation/types/elements-props.ts       |  4 ++--
 Components/Layout/index.jsx                   | 16 +--------------
 Elements/Link.tsx                             |  2 --
 9 files changed, 56 insertions(+), 29 deletions(-)
 create mode 100644 Components/Calculation/Settings/config.ts
 create mode 100644 Components/Calculation/Settings/index.js

diff --git a/Components/Calculation/Settings/config.ts b/Components/Calculation/Settings/config.ts
new file mode 100644
index 0000000..ee04751
--- /dev/null
+++ b/Components/Calculation/Settings/config.ts
@@ -0,0 +1,20 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable object-curly-newline */
+import type { FormTabRows } from '../lib/render-rows';
+
+const defaultRowStyle = { gridTemplateColumns: '1fr' };
+
+export const rows: FormTabRows = [
+  { title: 'Выбор Интереса/ЛС' },
+  [['selectLead'], defaultRowStyle],
+  [['selectOpportunity'], defaultRowStyle],
+  [['cbxRecalcWithRevision'], defaultRowStyle],
+  [['selectQuote'], defaultRowStyle],
+  [['btnCalculate'], defaultRowStyle],
+
+  { title: 'Параметры расчета' },
+  [['labelIrrInfo'], defaultRowStyle],
+  [['radioCalcType'], defaultRowStyle],
+  [['tbxIRR_Perc'], defaultRowStyle],
+  [['tbxTotalPayments'], defaultRowStyle],
+];
diff --git a/Components/Calculation/Settings/index.js b/Components/Calculation/Settings/index.js
new file mode 100644
index 0000000..141fc2f
--- /dev/null
+++ b/Components/Calculation/Settings/index.js
@@ -0,0 +1,7 @@
+import Background from 'Elements/layout/Background';
+import renderFormRows from '../lib/render-rows';
+import { rows } from './config';
+
+export default function Settings() {
+  return <Background>{renderFormRows(rows)}</Background>;
+}
diff --git a/Components/Calculation/config/elements-components.ts b/Components/Calculation/config/elements-components.ts
index 5bea2b8..b24593a 100644
--- a/Components/Calculation/config/elements-components.ts
+++ b/Components/Calculation/config/elements-components.ts
@@ -29,7 +29,7 @@ const components: Record<
   tbxSaleBonus: InputNumber,
   tbxFirstPaymentPerc: InputNumber,
   tbxFirstPaymentRub: InputNumber,
-  radioLastPaymentRule: Segmented,
+  radioLastPaymentRule: Radio,
   tbxLastPaymentPerc: InputNumber,
   tbxLastPaymentRub: InputNumber,
   tbxRedemptionPaymentSum: InputNumber,
@@ -121,7 +121,7 @@ const components: Record<
   tbxIRR_Perc: InputNumber,
   tbxMileage: InputNumber,
   tbxEngineHours: InputNumber,
-  radioCalcType: Radio,
+  radioCalcType: Segmented,
   tbxTotalPayments: InputNumber,
   radioObjectRegistration: Radio,
   selectObjectRegionRegistration: Select,
diff --git a/Components/Calculation/config/elements-props.ts b/Components/Calculation/config/elements-props.ts
index 7185933..0a110c4 100644
--- a/Components/Calculation/config/elements-props.ts
+++ b/Components/Calculation/config/elements-props.ts
@@ -58,6 +58,11 @@ const props: Partial<ElementsProps> = {
     precision: 2,
     formatter: formatNumber,
   },
+  radioLastPaymentRule: {
+    spaceProps: {
+      direction: 'vertical',
+    },
+  },
   tbxFirstPaymentPerc: {
     min: 0,
     max: 50,
@@ -308,10 +313,6 @@ const props: Partial<ElementsProps> = {
       marginBottom: '8px',
     },
   },
-  radioCalcType: {
-    optionType: 'button',
-    buttonStyle: 'solid',
-  },
   tbxTotalPayments: {
     min: 0,
     step: 1000,
diff --git a/Components/Calculation/config/elements-render.tsx b/Components/Calculation/config/elements-render.tsx
index f2bf481..d047634 100644
--- a/Components/Calculation/config/elements-render.tsx
+++ b/Components/Calculation/config/elements-render.tsx
@@ -70,6 +70,11 @@ const renderElements = (Object.keys(map) as (keyof typeof map)[]).reduce((acc, e
   return acc;
 }, {} as Record<keyof typeof map, RenderProps>);
 
+const defaultLinkProps = {
+  text: 'Открыть в CRM',
+  type: 'link',
+};
+
 const overrideRenderElements: Partial<Record<keyof typeof map, RenderProps>> = {
   selectLead: {
     render: () => {
@@ -91,7 +96,7 @@ const overrideRenderElements: Partial<Record<keyof typeof map, RenderProps>> = {
 
       return (
         <Container>
-          <Head title={title} addon={<LinkComponent text="Открыть в CRM" />} />
+          <Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
           <Element {...props} />
         </Container>
       );
@@ -118,7 +123,7 @@ const overrideRenderElements: Partial<Record<keyof typeof map, RenderProps>> = {
 
       return (
         <Container>
-          <Head title={title} addon={<LinkComponent text="Открыть в CRM" />} />
+          <Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
           <Element {...props} />
         </Container>
       );
@@ -145,7 +150,7 @@ const overrideRenderElements: Partial<Record<keyof typeof map, RenderProps>> = {
 
       return (
         <Container>
-          <Head title={title} addon={<LinkComponent text="Открыть в CRM" />} />
+          <Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
           <Element {...props} />
         </Container>
       );
diff --git a/Components/Calculation/index.js b/Components/Calculation/index.js
index 5f4e95e..d203e87 100644
--- a/Components/Calculation/index.js
+++ b/Components/Calculation/index.js
@@ -1,5 +1,15 @@
+import styled from 'styled-components';
+import { Box } from 'UIKit/grid';
 import Form from './Form';
+import Settings from './Settings';
+
+const Grid = styled(Box)``;
 
 export default function Calculation() {
-  return <Form />;
+  return (
+    <Grid>
+      <Form />
+      <Settings />
+    </Grid>
+  );
 }
diff --git a/Components/Calculation/types/elements-props.ts b/Components/Calculation/types/elements-props.ts
index 953e68a..486cd33 100644
--- a/Components/Calculation/types/elements-props.ts
+++ b/Components/Calculation/types/elements-props.ts
@@ -23,7 +23,7 @@ export interface ElementsProps {
   tbxSaleBonus: InputNumberProps;
   tbxFirstPaymentPerc: InputNumberProps;
   tbxFirstPaymentRub: InputNumberProps;
-  radioLastPaymentRule: SegmentedProps;
+  radioLastPaymentRule: RadioProps;
   tbxLastPaymentPerc: InputNumberProps;
   tbxLastPaymentRub: InputNumberProps;
   tbxRedemptionPaymentSum: InputNumberProps;
@@ -115,7 +115,7 @@ export interface ElementsProps {
   tbxIRR_Perc: InputNumberProps;
   tbxMileage: InputNumberProps;
   tbxEngineHours: InputNumberProps;
-  radioCalcType: RadioProps;
+  radioCalcType: SegmentedProps;
   tbxTotalPayments: InputNumberProps;
   radioObjectRegistration: RadioProps;
   selectObjectRegionRegistration: SelectProps;
diff --git a/Components/Layout/index.jsx b/Components/Layout/index.jsx
index f4c3f0f..ad5d83b 100644
--- a/Components/Layout/index.jsx
+++ b/Components/Layout/index.jsx
@@ -1,27 +1,13 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable import/no-unresolved */
-import styled from 'styled-components';
 import { Flex } from 'UIKit/grid';
-import { min } from 'UIKit/mq';
 import Header from './Header';
 
-const Main = styled.main`
-  ${min('laptop')} {
-    margin: 3px 8px;
-  }
-  ${min('desktop')} {
-    margin: 3px 7%;
-  }
-  ${min('extra')} {
-    margin: 3px 15%;
-  }
-`;
-
 export default function Layout({ children }) {
   return (
     <Flex flexDirection="column">
       <Header />
-      <Main>{children}</Main>
+      <main>{children}</main>
     </Flex>
   );
 }
diff --git a/Elements/Link.tsx b/Elements/Link.tsx
index 8641267..a38aced 100644
--- a/Elements/Link.tsx
+++ b/Elements/Link.tsx
@@ -1,4 +1,3 @@
-import DownloadOutlined from '@ant-design/icons/lib/icons/DownloadOutlined';
 import { Button as AntButton } from 'antd';
 import type { BaseButtonProps } from 'antd/lib/button/button';
 import type { BaseElementProps } from './types';
@@ -20,7 +19,6 @@ export default function Link({
       href={value}
       disabled={status === 'Disabled'}
       loading={status === 'Loading'}
-      icon={<DownloadOutlined />}
       {...props}
     >
       {text}