Merge pull request #69 from suisin-deriv/suisin/74180/ts_migration_se…

…lf_exclusion_footer refactor: ts migration for self-exclusion-footer.js
shayan-deriv · Jan 4, 2023 · f9cb0c3 · f9cb0c3
2 parents 4bea7b1 + 42ce301
commit f9cb0c3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/...n/__tests__/self-exclusion-footer.spec.js → .../__tests__/self-exclusion-footer.spec.tsx b/...n/__tests__/self-exclusion-footer.spec.js → .../__tests__/self-exclusion-footer.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Formik } from 'formik';
+import { Formik, FormikValues } from 'formik';
 import * as formik from 'formik';
 import { fireEvent, render, screen } from '@testing-library/react';
 import SelfExclusionContext from '../self-exclusion-context';
@@ -8,7 +8,7 @@ import SelfExclusionFooter from '../self-exclusion-footer';
 const portal_root = document.createElement('div');
 document.body.appendChild(portal_root);
 
-const mockUseFormikContext = jest.spyOn(formik, 'useFormikContext');
+const mockUseFormikContext = jest.spyOn(formik, 'useFormikContext') as any;
 
 describe('<SelfExclusionFooter />', () => {
     let mock_context = {};
@@ -26,7 +26,7 @@ describe('<SelfExclusionFooter />', () => {
         });
     });
     it('should not render SelfExclusionFooter component', () => {
-        mock_context.footer_ref = null;
+        (mock_context as FormikValues).footer_ref = null;
 
         render(
             <SelfExclusionContext.Provider value={mock_context}>
@@ -39,7 +39,7 @@ describe('<SelfExclusionFooter />', () => {
 
     it('should render SelfExclusionFooter component', () => {
         render(
-            <Formik>
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionFooter />
                 </SelfExclusionContext.Provider>
@@ -50,10 +50,10 @@ describe('<SelfExclusionFooter />', () => {
     });
 
     it('Should trigger click on the button', () => {
-        const mockGoToConfirm = mock_context.goToConfirm;
+        const mockGoToConfirm = (mock_context as FormikValues).goToConfirm;
 
         render(
-            <Formik>
+            <Formik initialValues={{}} onSubmit={jest.fn()}>
                 <SelfExclusionContext.Provider value={mock_context}>
                     <SelfExclusionFooter />
                 </SelfExclusionContext.Provider>

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion-context.tsx b/packages/account/src/Components/self-exclusion/self-exclusion-context.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 type TSelfExclusionContext = {
     footer_ref?: React.RefObject<HTMLElement>;
-    goToConfirm?: () => void;
+    goToConfirm?: (values: unknown) => void;
     toggleArticle?: () => void;
     is_app_settings?: boolean;
     is_wrapper_bypassed?: boolean;

diff --git a/.../self-exclusion/self-exclusion-footer.jsx → .../self-exclusion/self-exclusion-footer.tsx b/.../self-exclusion/self-exclusion-footer.jsx → .../self-exclusion/self-exclusion-footer.tsx
@@ -22,7 +22,7 @@ const SelfExclusionFooter = () => {
                     primary
                     className='da-self-exclusion__button'
                     large
-                    onClick={() => goToConfirm(values)}
+                    onClick={() => goToConfirm?.(values)}
                     type='button'
                 >
                     <Localize i18n_default_text='Next' />

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion-inputs.jsx b/packages/account/src/Components/self-exclusion/self-exclusion-inputs.jsx
@@ -5,7 +5,7 @@ import { getBrandWebsiteName, epochToMoment, toMoment, PlatformContext, isMobile
 import { Localize, localize } from '@deriv/translations';
 import { Field, useFormikContext } from 'formik';
 import SelfExclusionContext from './self-exclusion-context';
-import SelfExclusionFooter from './self-exclusion-footer.jsx';
+import SelfExclusionFooter from './self-exclusion-footer';
 
 const SectionTitle = ({ title, has_border_line }) => {
     return (