Merge pull request #19 from yauheni-kryzhyk-deriv/yauheni/74112/formb…

…odysection_ts_migration Yauheni/74112/formbodysection ts migration
suisin-deriv · Nov 1, 2022 · d9fc6e9 · d9fc6e9
2 parents 7eefb92 + a111e07
commit d9fc6e9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/...ction/__tests__/form-body-section.spec.js → ...tion/__tests__/form-body-section.spec.tsx b/...ction/__tests__/form-body-section.spec.js → ...tion/__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>
@@ -18,7 +18,7 @@ describe('Test coverage for FormBodySection component', () => {
 
     it('When we pass "has_side_note" property, it should render a different ui', () => {
         render(<MockFormBodySection has_side_note />);
-        expect(screen.getByTestId('side-note-container')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_side_note_container')).toBeInTheDocument();
     });
 
     it('When "side_note" value is string, it should render inside Text component', () => {
@@ -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();
     });
 });
diff --git a/...s/form-body-section/form-body-section.jsx → ...s/form-body-section/form-body-section.tsx b/...s/form-body-section/form-body-section.jsx → ...s/form-body-section/form-body-section.tsx
@@ -1,15 +1,20 @@
 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
-                data-testid='side-note-container'
+                data-testid='dt_side_note_container'
                 className={classNames('account-form__section', { 'account-form__section--dashboard': is_appstore })}
             >
                 <div className='account-form__section-side-note'>
@@ -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;
diff --git a/packages/account/src/Components/form-body-section/index.js b/packages/account/src/Components/form-body-section/index.js
diff --git a/packages/account/src/Components/form-body-section/index.ts b/packages/account/src/Components/form-body-section/index.ts
@@ -0,0 +1,3 @@
+import FormBodySection from './form-body-section';
+
+export default FormBodySection;