Calculation: add Results Component

Components/Calculation/Results/Output/config.ts

@@ -0,0 +1,21 @@
+/* eslint-disable object-curly-newline */
+/* eslint-disable import/prefer-default-export */
+
+import type { FormTabRows } from '../../lib/render-rows';
+
+export const id = 'output';
+export const title = 'Результаты';
+
+const defaultRowStyle = { gridTemplateColumns: ['1fr', '1fr 1fr'] };
+
+export const rows: FormTabRows = [
+  [['labelResultTotalGraphwithNDS', 'labelResultPlPrice'], defaultRowStyle],
+  [['labelResultPriceUpPr', 'labelResultIRRGraphPerc'], defaultRowStyle],
+  [['labelResultIRRNominalPerc', 'labelResultInsKasko'], defaultRowStyle],
+  [['labelResultInsOsago', 'labelResultDopProdSum'], defaultRowStyle],
+  [['labelResultFirstPayment', 'labelResultLastPayment'], defaultRowStyle],
+  [['labelResultFirstPaymentRiskPolicy', 'labelResultTerm'], defaultRowStyle],
+  [['labelResultAB_FL', 'labelResultAB_UL'], defaultRowStyle],
+  [['labelResultBonusMPL', 'labelResultDopMPLLeasing'], defaultRowStyle],
+  [['labelResultBonusDopProd', 'labelResultBonusSafeFinance'], defaultRowStyle],
+];

Components/Calculation/Results/Output/index.js

@@ -0,0 +1,12 @@
+import renderFormRows from 'Components/Calculation/lib/render-rows';
+import { id, rows, title } from './config';
+
+function Output() {
+  return renderFormRows(rows);
+}
+
+export default {
+  id,
+  title,
+  Component: Output,
+};

Components/Calculation/Results/index.jsx

@@ -0,0 +1,31 @@
+import Background from 'Elements/layout/Background';
+import Tabs from 'Elements/layout/Tabs';
+import styled from 'styled-components';
+import { min } from 'UIKit/mq';
+import Output from './Output';
+
+const resultsTabs = [Output];
+
+const Wrapper = styled(Background)`
+  padding: 4px 10px;
+
+  ${min('laptop')} {
+    padding: 4px 18px;
+  }
+`;
+
+function Results() {
+  return (
+    <Wrapper>
+      <Tabs>
+        {resultsTabs.map(({ id, title, Component }) => (
+          <Tabs.TabPane tab={title} key={id}>
+            <Component />
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+    </Wrapper>
+  );
+}
+
+export default Results;

Components/Calculation/Settings/index.js

@@ -8,7 +8,7 @@ const Wrapper = styled(Background)`
   padding: 4px 10px;
 
   ${min('laptop')} {
-    padding: 10px 18px;
+    padding: 4px 18px 10px;
   }
 `;
 

Components/Calculation/config/elements-titles.ts

@@ -133,8 +133,8 @@ const titles: Record<ValuesElements | ComputedElements | ActionElements, string>
   labelResultInsKasko: 'КАСКО, НС, ДГО в графике',
   labelResultInsOsago: 'ОСАГО в графике',
   labelResultDopProdSum: 'Общая сумма доп.продуктов',
-  labelResultFirstPayment: 'Первый платеж.',
-  labelResultLastPayment: 'Последний платеж.',
+  labelResultFirstPayment: 'Первый платеж',
+  labelResultLastPayment: 'Последний платеж',
   labelResultTerm: 'Срок, мес.',
   labelResultAB_FL: 'АВ ФЛ, без НДФЛ.',
   labelResultAB_UL: 'АВ ЮЛ, с НДС.',

Components/Calculation/index.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { Box } from 'UIKit/grid';
 import { min } from 'UIKit/mq';
 import Form from './Form';
+import Results from './Results';
 import Settings from './Settings';
 
 const Grid = styled(Box)`
@@ -29,6 +30,7 @@ export default function Calculation() {
     <Grid>
       <Form />
       <Settings />
+      <Results />
     </Grid>
   );
 }