Vinu/Ts cashier error dialog (#5820)

* migrated error-dialog to typescript * removed proptypes from error-dialog * added appropriate types to message variable in error-dialog * updated code with latest upstream branch * fixed type of rootstore in error-dialog * fixed Rootsore path in error dialog * added type for ReactElement in props.types.ts cashier
deriv-com · Jul 12, 2022 · 7e575f2 · 7e575f2
1 parent 8603197
commit 7e575f2
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 28 deletions.
diff --git a/...ror-dialog/__tests__/error-dialog.spec.js → ...or-dialog/__tests__/error-dialog.spec.tsx b/...ror-dialog/__tests__/error-dialog.spec.js → ...or-dialog/__tests__/error-dialog.spec.tsx
@@ -12,8 +12,9 @@ jest.mock('Stores/connect.js', () => ({
 }));
 
 describe('<ErrorDialog />', () => {
+    let modal_root_el;
     beforeAll(() => {
-        const modal_root_el = document.createElement('div');
+        modal_root_el = document.createElement('div');
         modal_root_el.setAttribute('id', 'modal_root');
         document.body.appendChild(modal_root_el);
     });

diff --git a/.../components/error-dialog/error-dialog.jsx → .../components/error-dialog/error-dialog.tsx b/.../components/error-dialog/error-dialog.jsx → .../components/error-dialog/error-dialog.tsx
@@ -1,36 +1,45 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { Dialog } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 import { connect } from 'Stores/connect';
+import { RootStore, TReactElement } from 'Types';
 
-const ErrorDialog = ({ disableApp, enableApp, error = {} }) => {
+type TErrorDialogProps = {
+    disableApp: () => void;
+    enableApp: () => void;
+    error: {
+        message?: string;
+        code?: string;
+        setErrorMessage?: (message: string) => void;
+    };
+};
+
+type TSetDetails = {
+    title: string;
+    cancel_button_text: undefined | string;
+    confirm_button_text: undefined | string;
+    onConfirm: undefined | (() => void);
+    message: undefined | string | TReactElement;
+    has_close_icon?: boolean;
+};
+
+const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) => {
     const history = useHistory();
     const [is_visible, setIsVisible] = React.useState(false);
-    const [details, setDetails] = React.useState({
+    const [details, setDetails] = React.useState<TSetDetails>({
         title: '',
         cancel_button_text: undefined,
         confirm_button_text: '',
         onConfirm: undefined,
         message: '',
     });
 
-    React.useEffect(() => {
-        // avoid resetting the text when dismissing the pop up
-        if (error.message) {
-            mapErrorToDetails(error.code, error.message);
-        }
-    }, [error.code, error.message, mapErrorToDetails]);
-
-    React.useEffect(() => {
-        setErrorVisibility(!!error.message);
-    }, [error.message]);
-
     const mapErrorToDetails = React.useCallback(
-        (error_code, error_message) => {
+        (error_code?: string, error_message?: string) => {
             if (
+                error_code &&
                 [
                     'Fiat2CryptoTransferOverLimit',
                     'Crypto2FiatTransferOverLimit',
@@ -94,12 +103,25 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }) => {
         [history]
     );
 
-    const setErrorVisibility = is_error_visible => {
+    React.useEffect(() => {
+        // avoid resetting the text when dismissing the pop up
+        if (error.message) {
+            mapErrorToDetails(error.code, error.message);
+        }
+    }, [error.code, error.message, mapErrorToDetails]);
+
+    React.useEffect(() => {
+        setErrorVisibility(!!error.message);
+    }, [error.message]);
+
+    const setErrorVisibility = (is_error_visible: boolean) => {
         setIsVisible(is_error_visible);
     };
 
     const dismissError = () => {
-        error.setErrorMessage('');
+        if (error.setErrorMessage) {
+            error.setErrorMessage('');
+        }
         setErrorVisibility(false);
     };
 
@@ -130,13 +152,7 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }) => {
     );
 };
 
-ErrorDialog.propTypes = {
-    error: PropTypes.object,
-    disableApp: PropTypes.func,
-    enableApp: PropTypes.func,
-};
-
-export default connect(({ ui }) => ({
+export default connect(({ ui }: RootStore) => ({
     disableApp: ui.disableApp,
     enableApp: ui.enableApp,
 }))(ErrorDialog);
diff --git a/packages/cashier/src/components/error-dialog/index.js b/packages/cashier/src/components/error-dialog/index.js
diff --git a/packages/cashier/src/components/error-dialog/index.ts b/packages/cashier/src/components/error-dialog/index.ts
@@ -0,0 +1,3 @@
+import ErrorDialog from './error-dialog';
+
+export default ErrorDialog;
diff --git a/packages/cashier/src/types/props.types.ts b/packages/cashier/src/types/props.types.ts
@@ -3,3 +3,7 @@ export type TReactChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export type TReactChildren = React.ReactNode;
 
 export type TReactMouseEvent = React.MouseEvent<HTMLElement>;
+
+export type TReactFormEvent = React.FormEvent<HTMLInputElement>;
+
+export type TReactElement = React.ReactElement;