diff --git a/Components/Calculation/Form/Payments/config.ts b/Components/Calculation/Form/Payments/config.ts
new file mode 100644
index 0000000..02871c1
--- /dev/null
+++ b/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',
+];
diff --git a/Components/Calculation/Form/Payments/index.jsx b/Components/Calculation/Form/Payments/index.jsx
new file mode 100644
index 0000000..72e1913
--- /dev/null
+++ b/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 (
+
+
+ {radioGraphType}
+
+ {selectSeasonType}
+ {tbxParmentsDecreasePercent}
+ {selectHighSeasonStart}
+
+
+ {/* TODO: add Payments Table */}
+
+ );
+}
+
+export default Payments;
diff --git a/Components/Calculation/config/elements-props.ts b/Components/Calculation/config/elements-props.ts
index 82f02f3..4d8f909 100644
--- a/Components/Calculation/config/elements-props.ts
+++ b/Components/Calculation/config/elements-props.ts
@@ -354,6 +354,11 @@ const props: Partial = {
optionType: 'button',
buttonStyle: 'solid',
},
+ radioGraphType: {
+ spaceProps: {
+ direction: 'vertical',
+ },
+ },
};
const moneyResultElementsProps = Object.fromEntries(
diff --git a/Elements/Radio.tsx b/Elements/Radio.tsx
index feee975..66f15e1 100644
--- a/Elements/Radio.tsx
+++ b/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 & {
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({
+ >
+
+ {options.map((option) => (
+ {option.label}
+ ))}
+
+
);
}
-export { type RadioGroupProps as RadioProps } from 'antd';
+type RadioProps = RadioGroupProps & {
+ spaceProps?: SpaceProps;
+};
+
+export type { RadioProps };