Akmal / feat: migrate EmptyPortfolioMessage, ErrorComponent and Page404 in Trader package

packages/components/src/components/dialog/dialog.tsx

@@ -14,7 +14,7 @@ type TDialog = {
     dismissable?: boolean;
     disableApp?: () => void;
     enableApp?: () => void;
-    has_close_icon: boolean;
+    has_close_icon?: boolean;
     is_closed_on_cancel?: boolean;
     is_closed_on_confirm?: boolean;
     is_content_centered?: boolean;
@@ -98,7 +98,7 @@ const Dialog = ({
         }
     };
 
-    const validateClickOutside = () => dismissable || (has_close_icon && is_visible && is_closed_on_cancel);
+    const validateClickOutside = () => dismissable || !!(has_close_icon && is_visible && is_closed_on_cancel);
 
     useOnClickOutside(wrapper_ref, handleClose, validateClickOutside);
 

packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.jsx → packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/empty-portfolio-message.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const EmptyPortfolioMessage = ({ error }) => (
+type TEmptyPortfolioMessage = {
+    error: string;
+};
+
+const EmptyPortfolioMessage = ({ error }: TEmptyPortfolioMessage) => (
     <div className='portfolio-empty'>
         <div className='portfolio-empty__wrapper'>
             {error ? (

packages/trader/src/App/Components/Elements/EmptyPortfolioMessage/index.js

@@ -1,3 +1,3 @@
-import EmptyPortfolioMessage from './empty-portfolio-message.jsx';
+import EmptyPortfolioMessage from './empty-portfolio-message';
 
 export default EmptyPortfolioMessage;

packages/trader/src/App/Components/Elements/Errors/error-component.jsx → packages/trader/src/App/Components/Elements/Errors/error-component.tsx

@@ -1,24 +1,32 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog, PageErrorContainer } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
-const ErrorComponent = ({
+type TErrorComponent = {
+    header: string;
+    message: React.ReactNode;
+    is_dialog: boolean;
+    redirect_label: string;
+    redirectOnClick: () => void;
+    should_show_refresh: boolean;
+};
+
+const ErrorComponent: React.FC<Partial<TErrorComponent>> = ({
     header,
     message,
     is_dialog,
     redirect_label,
     redirectOnClick,
     should_show_refresh = true,
 }) => {
-    const refresh_message = should_show_refresh ? localize('Please refresh this page to continue.') : '';
+    const refresh_message: string = should_show_refresh ? localize('Please refresh this page to continue.') : '';
 
     if (is_dialog) {
         return (
             <Dialog
                 title={header || localize('There was an error')}
-                is_visible
+                is_visible={true}
                 confirm_button_text={redirect_label || localize('Ok')}
                 onConfirm={redirectOnClick || (() => location.reload())}
             >
@@ -29,22 +37,12 @@ const ErrorComponent = ({
     return (
         <PageErrorContainer
             error_header={header ?? ''}
-            error_messages={message ? message[(message, refresh_message)] : []}
+            error_messages={message ? [message, refresh_message] : []}
             redirect_urls={[routes.trade]}
             redirect_labels={[redirect_label || localize('Refresh')]}
             buttonOnClick={redirectOnClick || (() => location.reload())}
         />
     );
 };
 
-ErrorComponent.propTypes = {
-    header: PropTypes.string,
-    is_dialog: PropTypes.bool,
-    message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-    redirect_label: PropTypes.string,
-    redirectOnClick: PropTypes.func,
-    should_show_refresh: PropTypes.bool,
-    type: PropTypes.string,
-};
-
 export default ErrorComponent;

packages/trader/src/App/Components/Elements/Errors/index.js

@@ -1,3 +1,3 @@
-import ErrorComponent from './error-component.jsx';
+import ErrorComponent from './error-component';
 
 export default ErrorComponent;

packages/trader/src/Modules/Page404/Components/Page404.jsx → packages/trader/src/Modules/Page404/Components/Page404.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PageError } from '@deriv/components';
 import { routes, getUrlBase } from '@deriv/shared';
-
 import { localize } from '@deriv/translations';
 
 const Page404 = () => (

packages/trader/src/Modules/Page404/index.js

@@ -1,3 +1,3 @@
-import Page404 from './Components/Page404.jsx';
+import Page404 from './Components/Page404';
 
 export default Page404;