Calculation/Form: add Payments Component

Components/Calculation/Form/Payments/config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+
+import type { SectionsConfig } from 'Components/Calculation/types/sections';
+
+export const elements: SectionsConfig[number][0] = [
+  'radioGraphType',
+  'selectSeasonType',
+  'tbxParmentsDecreasePercent',
+  'selectHighSeasonStart',
+];

Components/Calculation/Form/Payments/index.jsx

@@ -0,0 +1,37 @@
+/* eslint-disable operator-linebreak */
+import { Box, Flex } from 'UIKit/grid';
+import elementsRender from '../../config/elements-render';
+import { elements } from './config';
+
+function Payments() {
+  const renderedElements = elements.map((elementName) => {
+    const render = elementsRender[elementName]?.render;
+
+    return render();
+  });
+
+  const [radioGraphType, selectSeasonType, tbxParmentsDecreasePercent, selectHighSeasonStart] =
+    renderedElements;
+
+  return (
+    <Flex flexDirection="column">
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: ['1fr', '1fr', '1fr 4fr'],
+          gap: '10px',
+        }}
+      >
+        {radioGraphType}
+        <Flex flexDirection="column">
+          {selectSeasonType}
+          {tbxParmentsDecreasePercent}
+          {selectHighSeasonStart}
+        </Flex>
+      </Box>
+      {/* TODO: add Payments Table */}
+    </Flex>
+  );
+}
+
+export default Payments;

Components/Calculation/config/elements-props.ts

@@ -354,6 +354,11 @@ const props: Partial<ElementsProps> = {
     optionType: 'button',
     buttonStyle: 'solid',
   },
+  radioGraphType: {
+    spaceProps: {
+      direction: 'vertical',
+    },
+  },
 };
 
 const moneyResultElementsProps = Object.fromEntries(

Elements/Radio.tsx

@@ -1,11 +1,12 @@
-import type { RadioChangeEvent } from 'antd';
-import { Form, Radio as AntRadio } from 'antd';
+import type { RadioChangeEvent, RadioGroupProps, SpaceProps } from 'antd';
+import { Form, Radio as AntRadio, Space } from 'antd';
 import type { BaseElementProps, BaseOption } from './types';
 
 const { Item: FormItem } = Form;
 
 type ElementProps = BaseElementProps<string | null> & {
   options: BaseOption[];
+  spaceProps?: SpaceProps;
 };
 
 export default function Radio({
@@ -15,6 +16,7 @@ export default function Radio({
   status,
   isValid,
   help,
+  spaceProps,
   ...props
 }: ElementProps) {
   function handleChange(e: RadioChangeEvent) {
@@ -25,13 +27,22 @@ export default function Radio({
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <AntRadio.Group
         value={value}
-        options={options}
         onChange={handleChange}
         disabled={status === 'Disabled'}
         {...props}
-      />
+      >
+        <Space {...spaceProps}>
+          {options.map((option) => (
+            <AntRadio value={option.value}>{option.label}</AntRadio>
+          ))}
+        </Space>
+      </AntRadio.Group>
     </FormItem>
   );
 }
 
-export { type RadioGroupProps as RadioProps } from 'antd';
+type RadioProps = RadioGroupProps & {
+  spaceProps?: SpaceProps;
+};
+
+export type { RadioProps };