Merge pull request #77 from yauheni-deriv/evgeniy/76943/verticaltab_t…

…s_migration

Evgeniy/76943/verticaltab ts migration

packages/account/src/Containers/account.jsx

@@ -6,7 +6,6 @@ import { routes as shared_routes, isMobile, matchRoute, getSelectedRoute, Platfo
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import { flatten } from '../Helpers/flatten';
-import AccountLimitInfo from '../Sections/Security/AccountLimits/account-limits-info.jsx';
 import 'Styles/account.scss';
 import { useHistory } from 'react-router';
 
@@ -76,12 +75,10 @@ const PageOverlayWrapper = ({
             <VerticalTab
                 title={selected_route.getTitle()}
                 onClickClose={onClickClose}
-                alignment='center'
                 is_collapsible={false}
                 is_grid
                 is_floating
                 className='dashboard'
-                classNameHeader='account__inset_header'
                 current_path={location.pathname}
                 is_routed
                 is_full_width
@@ -95,9 +92,7 @@ const PageOverlayWrapper = ({
     return (
         <PageOverlay header={localize('Settings')} onClickClose={routeToPrevious} is_from_app={is_from_derivgo}>
             <VerticalTab
-                alignment='center'
                 is_floating
-                classNameHeader='account__inset_header'
                 current_path={location.pathname}
                 is_routed
                 is_full_width
@@ -111,7 +106,6 @@ const PageOverlayWrapper = ({
 
 const Account = ({
     active_account_landing_company,
-    currency,
     history,
     is_from_derivgo,
     is_logged_in,
@@ -174,25 +168,6 @@ const Account = ({
         history.push(shared_routes.personal_details);
     }
 
-    const action_bar_items = [
-        {
-            onClick: () => {
-                routeBackInApp(history);
-            },
-            icon: 'IcCross',
-            title: localize('Close'),
-        },
-    ];
-
-    const is_account_limits_route = selected_content.path === routes.account_limits;
-
-    if (is_account_limits_route) {
-        action_bar_items.push({
-            // eslint-disable-next-line react/display-name
-            component: () => <AccountLimitInfo currency={currency} is_virtual={is_virtual} />,
-        });
-    }
-
     if (!is_logged_in && is_logging_in) {
         return <Loading is_fullscreen className='account__initial-loader' />;
     }
@@ -221,7 +196,6 @@ const Account = ({
 
 Account.propTypes = {
     active_account_landing_company: PropTypes.string,
-    currency: PropTypes.string,
     history: PropTypes.object,
     is_from_derivgo: PropTypes.bool,
     is_logged_in: PropTypes.bool,
@@ -241,7 +215,6 @@ Account.propTypes = {
 
 export default connect(({ client, common, ui }) => ({
     active_account_landing_company: client.landing_company_shortcode,
-    currency: client.currency,
     is_from_derivgo: common.is_from_derivgo,
     is_logged_in: client.is_logged_in,
     is_logging_in: client.is_logging_in,

packages/cashier/src/containers/cashier/cashier.tsx

@@ -37,10 +37,10 @@ type TCashierOptions = {
     count?: number;
     default?: boolean;
     has_side_note: boolean;
-    icon?: string;
+    icon: string;
     label: string;
     path?: string;
-    value: TRoute['component'];
+    value?: typeof React.Component;
 };
 
 const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => {
@@ -138,7 +138,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     const getHeaderTitle = () => {
         if (!isMobile() || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier');
 
-        return selected_route.getTitle();
+        return selected_route.getTitle?.();
     };
 
     return (
@@ -149,9 +149,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                 <PageOverlay header={getHeaderTitle()} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
                     <DesktopWrapper>
                         <VerticalTab
-                            alignment='center'
-                            id='cashier'
-                            classNameHeader='cashier__tab-header'
                             current_path={location.pathname}
                             is_floating
                             setVerticalTabIndex={setTabIndex}
@@ -191,7 +188,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                     </DesktopWrapper>
                     <MobileWrapper>
                         <Div100vhContainer className='cashier__wrapper--is-mobile' height_offset='80px'>
-                            {selected_route && (
+                            {selected_route?.component && (
                                 <selected_route.component
                                     component_icon={selected_route.icon_component}
                                     history={history}

packages/cashier/src/types/routes.types.ts

@@ -1,15 +1,14 @@
-import { Redirect } from 'react-router-dom';
-import { TPage404 } from '../constants/routes-config';
+import React from 'react';
 
 export type TRoute = {
     default?: boolean;
     exact?: boolean;
     id?: string;
-    icon_component?: string;
+    icon_component: string;
     is_invisible?: boolean;
     path?: string;
     to?: string;
-    component: ((cashier_routes?: TRoute[]) => JSX.Element) | TPage404 | typeof Redirect;
+    component?: typeof React.Component;
     getTitle: () => string;
 };
 

packages/components/src/components/vertical-tab/index.js → packages/components/src/components/vertical-tab/index.ts

@@ -1,4 +1,4 @@
-import VerticalTab from './vertical-tab.jsx';
+import VerticalTab from './vertical-tab';
 import './vertical-tab.scss';
 
 export default VerticalTab;

packages/components/src/components/vertical-tab/vertical-tab-content-container.jsx → packages/components/src/components/vertical-tab/vertical-tab-content-container.tsx

@@ -3,11 +3,43 @@ import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { usePrevious } from '../../hooks';
 import Icon from '../icon/icon';
+import { TItem } from './vertical-tab-header';
 
-const SideNotes = ({ class_name, side_notes }) => {
+type TSideNotes = {
+    class_name?: string;
+    side_notes: React.ReactNode[] | null;
+};
+
+type TContentWrapper = {
+    has_side_note?: boolean;
+};
+
+type TContent = {
+    is_routed?: boolean;
+    items: TItem[];
+    selected: TItem;
+};
+
+export type TAction_bar = {
+    component?: typeof React.Component;
+    onClick?: () => void;
+    icon: string;
+    title?: string;
+};
+
+type TVerticalTabContentContainer = TContent & {
+    action_bar?: TAction_bar[];
+    action_bar_classname?: string;
+    className?: string;
+    id?: string;
+    is_floating?: boolean;
+    tab_container_classname?: string;
+};
+
+const SideNotes = ({ class_name, side_notes }: TSideNotes) => {
     return (
         <div
-            className={classNames('dc-vertical-tab__content-side-note', { [class_name]: !!side_notes })}
+            className={classNames('dc-vertical-tab__content-side-note', { [class_name as string]: !!side_notes })}
             data-testid='vertical_tab_side_note'
         >
             {side_notes?.map((note, i) => (
@@ -19,22 +51,22 @@ const SideNotes = ({ class_name, side_notes }) => {
     );
 };
 
-const ContentWrapper = ({ children, has_side_note }) => {
+const ContentWrapper = ({ children, has_side_note }: React.PropsWithChildren<TContentWrapper>) => {
     if (has_side_note) {
         return <div className='dc-vertical-tab__content-inner'>{children}</div>;
     }
-    return children;
+    return children as JSX.Element;
 };
 
-const Content = ({ is_routed, items, selected }) => {
+const Content = ({ is_routed, items, selected }: TContent) => {
     const selected_item = items.find(item => item.label === selected.label);
     const previous_selected_item = usePrevious(selected_item);
-    const TabContent = selected_item.value;
-    const [side_notes, setSideNotes] = React.useState(null);
+    const TabContent = selected_item?.value as React.ElementType;
+    const [side_notes, setSideNotes] = React.useState<React.ReactNode[] | null>(null);
 
-    const notes_array = [];
+    const notes_array: React.ReactNode[][] = [];
 
-    const addToNotesQueue = React.useCallback(notes => {
+    const addToNotesQueue = React.useCallback((notes: React.ReactNode[]) => {
         notes_array.unshift(notes);
         setSideNotes(notes);
     }, []);
@@ -52,7 +84,7 @@ const Content = ({ is_routed, items, selected }) => {
             {is_routed ? (
                 <Switch>
                     {items.map(({ value, component, path, icon }, idx) => {
-                        const Component = value || component;
+                        const Component = (value as React.ElementType) || (component as React.ElementType);
                         return (
                             <Route
                                 key={idx}
@@ -63,12 +95,12 @@ const Content = ({ is_routed, items, selected }) => {
                     })}
                 </Switch>
             ) : (
-                <TabContent key={selected_item.label} className='item-id' setSideNotes={addToNotesQueue} />
+                <TabContent key={selected_item?.label} className='item-id' setSideNotes={addToNotesQueue} />
             )}
             {selected.has_side_note && (
                 // for components that have side note, even if no note is passed currently,
                 // we want to keep the column space for side note
-                <SideNotes selected_item={selected_item} side_notes={side_notes} />
+                <SideNotes side_notes={side_notes} />
             )}
         </React.Fragment>
     );
@@ -84,7 +116,7 @@ const VerticalTabContentContainer = ({
     items,
     selected,
     tab_container_classname,
-}) => {
+}: TVerticalTabContentContainer) => {
     return (
         <div
             className={classNames('dc-vertical-tab__content', {
@@ -95,12 +127,12 @@ const VerticalTabContentContainer = ({
             {!is_floating && action_bar && (
                 <div
                     className={classNames('dc-vertical-tab__action-bar', {
-                        [action_bar_classname]: !!action_bar_classname,
+                        [action_bar_classname as string]: !!action_bar_classname,
                     })}
                 >
                     {action_bar.map(({ component, icon, onClick }, idx) => {
                         const Component = component;
-                        return component ? (
+                        return Component ? (
                             <Component key={idx} />
                         ) : (
                             <div

packages/components/src/components/vertical-tab/vertical-tab-header-group.jsx → packages/components/src/components/vertical-tab/vertical-tab-header-group.tsx

@@ -1,9 +1,20 @@
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
 import { NavLink } from 'react-router-dom';
 import Icon from '../icon/icon';
+import { THeader, THeaderIcon, TItem } from './vertical-tab-header';
+
+type TVerticalTabHeaderGroup = {
+    className?: string;
+    group: TItem;
+    selected: boolean;
+    is_collapsible?: boolean;
+    is_routed?: boolean;
+    onChange: (group: TItem) => void;
+    onToggle: (toggle: boolean) => void;
+};
 
-const HeaderIcon = ({ icon, is_active }) => (
+const HeaderIcon = ({ icon, is_active }: THeaderIcon) => (
     <Icon
         icon={icon}
         className={classNames('dc-vertical-tab__header-group__icon', {
@@ -12,7 +23,7 @@ const HeaderIcon = ({ icon, is_active }) => (
     />
 );
 
-const Header = ({ text }) => <div className='dc-vertical-tab__header-group__link'>{text}</div>;
+const Header = ({ text }: THeader) => <div className='dc-vertical-tab__header-group__link'>{text}</div>;
 
 const VerticalTabHeaderGroup = ({
     children,
@@ -23,16 +34,16 @@ const VerticalTabHeaderGroup = ({
     is_routed,
     onChange,
     onToggle,
-}) => {
+}: React.PropsWithChildren<TVerticalTabHeaderGroup>) => {
     const [show_items, setShowItems] = React.useState(true);
 
     React.useEffect(() => {
         onToggle(true);
     }, [show_items, onToggle]);
 
-    const label = typeof group.getTitle === 'function' ? group.getTitle() : group.label || group.title;
+    const label = group.getTitle ? group.getTitle() : group.label || group.title || '';
     const handleClick = () => {
-        if (!group.subitems && typeof onChange === 'function') {
+        if (!group.subitems) {
             onChange(group);
         } else if (is_collapsible && !selected) {
             setShowItems(!show_items);

packages/components/src/components/vertical-tab/vertical-tab-header-title.jsx → packages/components/src/components/vertical-tab/vertical-tab-header-title.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import Text from '../text';
 
-const VerticalTabHeaderTitle = ({ header_title }) => (
+type TVerticalTabHeaderTitle = { header_title: string };
+
+const VerticalTabHeaderTitle = ({ header_title }: TVerticalTabHeaderTitle) => (
     <div className='dc-vertical-tab__header-title'>
         <Text as='p' color='prominent' align='center' weight='bold'>
             {header_title}