Merge pull request #38 from suisin-deriv/suisin/74166/ts_migration_re…

…set_trading_password_modal Suisin/refactor: ts migration for reset-trading-password-modal
jim-deriv · Jan 11, 2023 · 4a920a0 · 4a920a0
2 parents 1b78986 + ac373aa
commit 4a920a0
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/...ts__/reset-trading-password-modal.spec.js → ...s__/reset-trading-password-modal.spec.tsx b/...ts__/reset-trading-password-modal.spec.js → ...s__/reset-trading-password-modal.spec.tsx
@@ -40,7 +40,7 @@ const interactWithPasswordField = async (trigger_click = true) => {
 };
 
 describe('<ResetTradingPasswordModal/>', () => {
-    const props = {
+    const props: React.ComponentProps<typeof ResetTradingPasswordModal> = {
         disableApp: jest.fn(),
         enableApp: jest.fn(),
         toggleResetTradingPasswordModal: mockFn,
@@ -152,7 +152,7 @@ describe('<ResetTradingPasswordModal/>', () => {
 
         fireEvent.click(screen.getByTestId('dt_password_input_visibility_icon'));
         await waitFor(() => {
-            expect(screen.getByDisplayValue('hN795jCWkDtPy5').getAttribute('type')).toBe('text');
+            expect(screen.getByDisplayValue('hN795jCWkDtPy5')).toHaveAttribute('type', 'text');
         });
     });
 
@@ -167,7 +167,7 @@ describe('<ResetTradingPasswordModal/>', () => {
         fireEvent.click(el_visibility_icon);
 
         await waitFor(() => {
-            expect(screen.getByDisplayValue('hN795jCWkDtPy5').getAttribute('type')).toBe('text');
+            expect(screen.getByDisplayValue('hN795jCWkDtPy5')).toHaveAttribute('type', 'text');
         });
     });
 

diff --git a/packages/account/src/Components/reset-trading-password-modal/index.js b/packages/account/src/Components/reset-trading-password-modal/index.js
@@ -1,3 +1,3 @@
 import './reset-trading-password-modal.scss';
 
-export default from './reset-trading-password-modal.jsx';
+export default from './reset-trading-password-modal';
diff --git a/...rd-modal/reset-trading-password-modal.jsx → ...rd-modal/reset-trading-password-modal.tsx b/...rd-modal/reset-trading-password-modal.jsx → ...rd-modal/reset-trading-password-modal.tsx
@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import PropTypes from 'prop-types';
-import { Formik, Form } from 'formik';
+import { Formik, Form, FormikValues, FormikErrors } from 'formik';
 import { useHistory } from 'react-router-dom';
 import { Button, Dialog, Icon, PasswordInput, PasswordMeter, Text, FormSubmitButton } from '@deriv/components';
 import { getErrorMessages, validPassword, validLength, WS, getCFDPlatformLabel } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 
-const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordModal, verification_code, platform }) => {
-    const handleSubmit = (values, actions) => {
+type TResetTradingPassword = {
+    setDialogTitleFunc?: (value: boolean) => void;
+    toggleResetTradingPasswordModal: (value: boolean) => void;
+    verification_code: string;
+    platform: 'dxtrade' | 'mt5' | 'derivez';
+};
+
+const ResetTradingPassword = ({
+    setDialogTitleFunc,
+    toggleResetTradingPasswordModal,
+    verification_code,
+    platform,
+}: TResetTradingPassword) => {
+    const handleSubmit = (values: FormikValues, actions: FormikValues) => {
         actions.setSubmitting(true);
 
         const params = {
@@ -16,10 +28,10 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo
             platform,
         };
 
-        WS.tradingPlatformPasswordReset(params).then(async response => {
+        WS.tradingPlatformPasswordReset(params).then(async (response: FormikValues) => {
             if (response.error) {
                 actions.setStatus({ error_msg: response.error.message, error_code: response.error.code });
-                setDialogTitleFunc(true);
+                setDialogTitleFunc?.(true);
             } else {
                 actions.resetForm({ password: '' });
                 actions.setStatus({ reset_complete: true });
@@ -29,8 +41,8 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo
         });
     };
 
-    const validateReset = values => {
-        const errors = {};
+    const validateReset = (values: FormikValues) => {
+        const errors: FormikErrors<FormikValues> = {};
 
         if (
             !validLength(values.password, {
@@ -146,12 +158,12 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo
                                                 label={localize('{{platform}} password', {
                                                     platform: getCFDPlatformLabel(platform),
                                                 })}
-                                                onChange={e => {
+                                                onChange={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
                                                     setFieldTouched('password', true);
                                                     handleChange(e);
                                                 }}
                                                 onBlur={handleBlur}
-                                                error={touched.password && errors.password}
+                                                error={touched.password ? errors.password : ''}
                                                 value={values.password}
                                                 data-lpignore='true'
                                                 required
@@ -179,13 +191,12 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo
     );
 };
 
-ResetTradingPassword.propTypes = {
-    is_dxtrade_allowed: PropTypes.bool,
-    setDialogTitleFunc: PropTypes.func,
-    toggleResetTradingPasswordModal: PropTypes.func,
-    verification_code: PropTypes.string,
-    platform: PropTypes.string,
-};
+type TResetTradingPasswordModal = {
+    disableApp: () => void;
+    enableApp: () => void;
+    is_loading: boolean;
+    is_visible: boolean;
+} & TResetTradingPassword;
 
 const ResetTradingPasswordModal = ({
     disableApp,
@@ -195,7 +206,7 @@ const ResetTradingPasswordModal = ({
     toggleResetTradingPasswordModal,
     verification_code,
     platform,
-}) => {
+}: TResetTradingPasswordModal) => {
     const [dialog_title, setDialogTitle] = React.useState('');
     const history = useHistory();
     React.useEffect(() => {
@@ -207,7 +218,7 @@ const ResetTradingPasswordModal = ({
         }
     }, [history, is_visible]);
 
-    const setDialogTitleFunc = is_invalid_token => {
+    const setDialogTitleFunc = (is_invalid_token: boolean) => {
         setDialogTitle(
             is_invalid_token
                 ? localize('Reset {{platform}} password', {

diff --git a/packages/components/src/components/dialog/dialog.tsx b/packages/components/src/components/dialog/dialog.tsx
@@ -11,7 +11,7 @@ type TDialog = {
     cancel_button_text?: string;
     className?: string;
     confirm_button_text?: string;
-    dismissable: boolean;
+    dismissable?: boolean;
     disableApp?: () => void;
     enableApp?: () => void;
     has_close_icon: boolean;