Yauheni/74112/formbodysection ts migration

packages/account/src/Components/form-body-section/__tests__/form-body-section.spec.js → packages/account/src/Components/form-body-section/__tests__/form-body-section.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
-import FormBodySection from '../form-body-section';
+import FormBodySection, { TFormBodySection } from '../form-body-section';
 
-const MockFormBodySection = props => {
+const MockFormBodySection = (props: TFormBodySection) => {
     return (
         <FormBodySection {...props}>
             <p>Lorem Ipsum</p>
@@ -28,9 +28,9 @@ describe('Test coverage for FormBodySection component', () => {
     });
 
     it('When "side_note" value is not string, it should not render inside Text component', () => {
-        const test_side_note = 80;
+        const test_side_note = <div>test side note component</div>;
         render(<MockFormBodySection has_side_note side_note={test_side_note} />);
-        expect(screen.getByText(test_side_note)).toBeInTheDocument();
+        expect(screen.getByText('test side note component')).toBeInTheDocument();
         expect(screen.queryByTestId('side-note-text')).not.toBeInTheDocument();
     });
 });

packages/account/src/Components/form-body-section/form-body-section.jsx → packages/account/src/Components/form-body-section/form-body-section.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import classNames from 'classnames';
-import { PropTypes } from 'prop-types';
 import { Text } from '@deriv/components';
 import { PlatformContext } from '@deriv/shared';
+import { TPlatformContext } from 'Types';
 
-const FormBodySection = ({ children, has_side_note, side_note }) => {
-    const { is_appstore } = React.useContext(PlatformContext);
+export type TFormBodySection = {
+    has_side_note?: boolean;
+    side_note?: string | React.ReactElement;
+};
+
+const FormBodySection = ({ children, has_side_note, side_note }: React.PropsWithChildren<TFormBodySection>) => {
+    const { is_appstore }: Partial<TPlatformContext> = React.useContext(PlatformContext);
     if (has_side_note) {
         return (
             <div
@@ -25,11 +30,7 @@ const FormBodySection = ({ children, has_side_note, side_note }) => {
             </div>
         );
     }
-    return children;
-};
-FormBodySection.prototype = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    has_side_note: PropTypes.bool,
-    side_note: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    return children as JSX.Element;
 };
+
 export default FormBodySection;

packages/account/src/Components/form-body-section/index.ts

@@ -0,0 +1,3 @@
+import FormBodySection from './form-body-section';
+
+export default FormBodySection;