Henry/dtra 282/rewrite contract type info component

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

@@ -62,7 +62,7 @@ const VerticalTabHeaderGroup = ({
             })}
             onClick={handleClick}
         >
-            <HeaderIcon icon={group.icon} is_active={selected} />
+            <HeaderIcon icon={group.icon ?? ''} is_active={selected} />
             <Header text={label} />
             {is_collapsible && (
                 <Icon
@@ -83,7 +83,7 @@ const VerticalTabHeaderGroup = ({
                 })}
                 onClick={handleClick}
             >
-                <HeaderIcon icon={group.icon} is_active={selected} />
+                <HeaderIcon icon={group.icon ?? ''} is_active={selected} />
                 <Header text={label} />
                 {is_collapsible && (
                     <Icon

packages/components/src/components/vertical-tab/vertical-tab-header.tsx

@@ -16,14 +16,15 @@ export type THeader = {
 };
 
 export type TItem = {
-    component?: typeof React.Component;
+    component?: JSX.Element | null;
     count?: number;
     default?: boolean;
     getTitle?: () => string;
     has_side_note?: boolean;
-    icon: string;
+    icon?: string;
     is_hidden?: boolean;
     is_disabled?: boolean;
+    key?: string;
     label?: string;
     path?: string;
     subitems?: number[];
@@ -88,7 +89,7 @@ const VerticalTabHeader = ({
                 'dc-vertical-tab__header--active': is_active,
             })}
         >
-            <HeaderIcon icon={item.icon} is_active={is_active} />
+            <HeaderIcon icon={item.icon ?? ''} is_active={is_active} />
             <Header text={label} path={item.path} />
             {!!count && <Counter count={count} className='dc-vertical-tab__header__counter' />}
             {children}
@@ -102,7 +103,7 @@ const VerticalTabHeader = ({
             })}
             onClick={handleClick}
         >
-            <HeaderIcon icon={item.icon} is_active={is_active} />
+            <HeaderIcon icon={item.icon ?? ''} is_active={is_active} />
             <Header text={label} />
             {children}
             <>{item.component}</>

packages/shared/src/utils/route/route.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 // TODO: Add test cases for this
 type TRoute = {
-    component?: React.ComponentType;
+    component?: JSX.Element | null;
     default?: boolean;
     exact?: boolean;
     getTitle?: () => string;

packages/trader/src/Modules/SmartChart/Components/buy-toast-notification.tsx

@@ -6,7 +6,7 @@ import { findContractCategory } from 'Modules/Trading/Helpers/contract-type';
 import { observer, useStore } from '@deriv/stores';
 
 type TContractType = {
-    text: string;
+    text?: string;
     value: string;
 };
 

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-glossary.tsx

@@ -34,7 +34,7 @@ const ContractTypeGlossary = ({ category }: { category: string }) => {
                     {
                         type: 'paragraph',
                         text: localize(
-                            'The spot price may change by the time your order reaches our servers. When this happens, your payout maybe affected.'
+                            'The spot price may change by the time your order reaches our servers. When this happens, your payout may be affected.'
                         ),
                     },
                 ];

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info-header.jsx → packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info-header.tsx

@@ -1,8 +1,13 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Text } from '@deriv/components';
 
-const Header = ({ onClickGoBack, text_size = 's', title }) => (
+type THeader = {
+    onClickGoBack?: () => void;
+    text_size?: string;
+    title: string;
+};
+
+const Header = ({ onClickGoBack, text_size = 's', title }: THeader) => (
     <div className='contract-type-info__action-bar'>
         <span className='contract-type-info__icon' id='dt_contract_info_back_nav' onClick={onClickGoBack}>
             <Icon icon='IcArrowLeftBold' />
@@ -13,10 +18,4 @@ const Header = ({ onClickGoBack, text_size = 's', title }) => (
     </div>
 );
 
-Header.propTypes = {
-    onClickGoBack: PropTypes.func,
-    text_size: PropTypes.string,
-    title: PropTypes.string,
-};
-
 export default Header;

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx → packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.tsx

@@ -1,77 +1,74 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, ThemedScrollbars, Carousel, ButtonToggle } from '@deriv/components';
+import { Button, ThemedScrollbars, ButtonToggle } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import TradeCategories from 'Assets/Trading/Categories/trade-categories.jsx';
 import TradeCategoriesGIF from 'Assets/Trading/Categories/trade-categories-gif.jsx';
 import { getContractTypes } from '../../../../Helpers/contract-type';
 import ContractTypeGlossary from './contract-type-glossary';
 import classNames from 'classnames';
+import { TContractType, TList } from '../types';
+
+type TInfo = {
+    handleSelect: (
+        type: TContractType,
+        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement | HTMLInputElement>
+    ) => void;
+    item: TContractType;
+    list: TList[];
+};
 
 const TABS = {
     DESCRIPTION: 'description',
     GLOSSARY: 'glossary',
 };
 
-const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }) => {
-    const [carousel_index, setCarouselIndex] = React.useState('');
+const Info = ({ handleSelect, item, list }: TInfo) => {
     const [selected_tab, setSelectedTab] = React.useState(TABS.DESCRIPTION);
-    const contract_types = getContractTypes(list, item).filter(
-        i => i.value !== 'rise_fall_equal' && i.value !== 'turbosshort'
+    const contract_types: TContractType[] | undefined = getContractTypes(list, item)?.filter(
+        (i: { value: TContractType['value'] }) => i.value !== 'rise_fall_equal' && i.value !== 'turbosshort'
     );
-    const has_toggle_buttons = /accumulator|vanilla/i.test(carousel_index);
+    const has_toggle_buttons = /accumulator|vanilla/i.test(item.value);
     const is_description_tab_selected = selected_tab === TABS.DESCRIPTION;
     const is_glossary_tab_selected = selected_tab === TABS.GLOSSARY;
     const width = isMobile() ? '328' : '528';
     const scroll_bar_height = has_toggle_buttons ? '464px' : '560px';
-    const selected_contract_type = contract_types.find(type => type.value === carousel_index);
-
     const onClickGlossary = () => setSelectedTab(TABS.GLOSSARY);
-    const handleItemSelect = active_index => {
-        setCarouselIndex(contract_types[active_index].value);
-        handleNavigationClick(contract_types[active_index]);
-    };
 
-    const cards = contract_types.map((type, idx) => {
+    const cards = contract_types?.map((type: TContractType) => {
+        if (type.value !== item.value) return null;
         return (
-            <div key={idx} className='contract-type-info__card'>
+            <div key={type.value} className='contract-type-info__card'>
                 <ThemedScrollbars
                     className={classNames('contract-type-info__scrollbars', {
                         'contract-type-info__scrollbars-description--active': is_description_tab_selected,
                         'contract-type-info__scrollbars-glossary contract-type-info__scrollbars-glossary--active ':
                             is_glossary_tab_selected,
                     })}
                     style={{
-                        left: `${is_description_tab_selected ? `-${width}` : width}px`,
-                        transform: `translate3d(${is_description_tab_selected ? width : `-${width}`}px, 0, 0)`,
+                        left: `${is_description_tab_selected ? '-' : ''}${width}px`,
+                        transform: `translate3d(${is_description_tab_selected ? '' : '-'}${width}px, 0, 0)`,
                     }}
                     height={isMobile() ? '' : scroll_bar_height}
                     autohide={false}
                 >
                     <div
-                        className={classNames({
-                            'contract-type-info__gif--has-toggle-buttons': has_toggle_buttons,
-                            'contract-type-info__content': is_glossary_tab_selected,
+                        className={classNames('contract-type-info__content', {
                             'contract-type-info__gif': is_description_tab_selected,
+                            'contract-type-info__gif--has-toggle-buttons': has_toggle_buttons,
                             'contract-type-info__gif--has-video':
-                                carousel_index === 'accumulator' && is_description_tab_selected,
+                                item.value === 'accumulator' && is_description_tab_selected,
                         })}
                     >
                         {is_description_tab_selected ? (
-                            <TradeCategoriesGIF
-                                category={type.value}
-                                selected_contract_type={selected_contract_type?.value}
-                            />
+                            <React.Fragment>
+                                <TradeCategoriesGIF category={type.value} selected_contract_type={item?.value} />
+                                <TradeCategories category={type.value} onClick={onClickGlossary} />
+                            </React.Fragment>
                         ) : (
                             <ContractTypeGlossary category={type.value} />
                         )}
                     </div>
-                    <div className='contract-type-info__content'>
-                        {is_description_tab_selected && (
-                            <TradeCategories category={type.value} onClick={onClickGlossary} />
-                        )}
-                    </div>
                 </ThemedScrollbars>
             </div>
         );
@@ -96,25 +93,23 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
                     />
                 </div>
             )}
-            <Carousel
+            <div
                 className={classNames('contract-type-info', {
                     'contract-type-info--has-toggle-buttons': has_toggle_buttons,
                 })}
-                disable_swipe={isMobile()}
-                onItemSelect={handleItemSelect}
-                initial_index={initial_index}
-                list={cards}
-                width={isMobile() ? 328 : 528}
-                show_bullet={false}
-                show_nav={false}
-            />
+                style={{
+                    width: isMobile() ? '328px' : '528px',
+                }}
+            >
+                {cards}
+            </div>
             <div className='contract-type-info__trade-type-btn-wrapper'>
                 <Button
-                    id={`dt_contract_info_${selected_contract_type?.value}_btn`}
+                    id={`dt_contract_info_${item?.value}_btn`}
                     className='contract-type-info__button'
-                    onClick={e => handleSelect(selected_contract_type, e)}
+                    onClick={e => handleSelect(item, e)}
                     text={localize('Choose {{contract_type}}', {
-                        contract_type: selected_contract_type?.text,
+                        contract_type: item?.text,
                         interpolation: { escapeValue: false },
                     })}
                     secondary
@@ -124,12 +119,4 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
     );
 };
 
-Info.propTypes = {
-    handleSelect: PropTypes.func,
-    initial_index: PropTypes.number,
-    item: PropTypes.object,
-    list: PropTypes.array,
-    handleNavigationClick: PropTypes.func,
-};
-
 export default Info;

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/index.js

@@ -1,5 +1,5 @@
-import Info from './contract-type-info.jsx';
+import Info from './contract-type-info';
 
-export { default as Header } from './contract-type-info-header.jsx';
+export { default as Header } from './contract-type-info-header';
 
 export default Info;

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeMenu/contract-type-menu.jsx → packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeMenu/contract-type-menu.tsx

@@ -1,12 +1,26 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Loading, ThemedScrollbars, VerticalTab } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import SearchInput from './search-input.jsx';
-import NoResultsMessage from './no-results-message.jsx';
-import { Header } from '../ContractTypeInfo';
+import SearchInput from './search-input';
+import NoResultsMessage from './no-results-message';
+import { Header } from '../ContractTypeInfo/index.js';
 import { getContractCategoryKey } from '../../../../Helpers/contract-type';
+import { TList } from '../types';
+import ContractType from '../contract-type';
+
+type TDialog = {
+    categories: TList[];
+    item: React.ComponentProps<typeof ContractType.Info>['item'];
+    selected?: string;
+    children?: React.ReactNode;
+    is_info_dialog_open?: boolean;
+    is_open?: boolean;
+    onBackButtonClick?: () => void;
+    onCategoryClick?: (e: React.ComponentProps<typeof VerticalTab.Headers>['selected']) => void;
+    onChangeInput?: (e: string) => void;
+    show_loading?: boolean;
+};
 
 const Dialog = ({
     categories,
@@ -19,19 +33,16 @@ const Dialog = ({
     onCategoryClick,
     onChangeInput,
     show_loading,
-}) => {
-    const input_ref = React.useRef(null);
-
+}: React.PropsWithChildren<TDialog>) => {
+    const input_ref = React.useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(null);
     const [input_value, setInputValue] = React.useState('');
-
     const contract_category = getContractCategoryKey(categories, item);
-    const selected_item = selected ? { key: selected } : contract_category;
+    const selected_item = selected ? { key: selected } : { key: contract_category };
     const selected_category_contract = !categories?.find(category => category.key === selected_item.key)
-        ?.contract_categories.length;
-
-    const onChange = e => {
+        ?.contract_categories?.length;
+    const onChange: React.ComponentProps<typeof VerticalTab.Headers>['onChange'] = e => {
         if (is_info_dialog_open) {
-            onBackButtonClick();
+            onBackButtonClick?.();
         }
         if (input_value) {
             onClickClearInput();
@@ -41,15 +52,15 @@ const Dialog = ({
         }
     };
 
-    const onChangeInputValue = e => {
+    const onChangeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
         setInputValue(e.target.value);
-        onChangeInput(e.target.value);
+        onChangeInput?.(e.target.value);
     };
 
     const onClickClearInput = () => {
-        input_ref.current.focus();
+        input_ref?.current?.focus();
         setInputValue('');
-        onChangeInput('');
+        onChangeInput?.('');
     };
 
     const renderChildren = () => {
@@ -66,7 +77,6 @@ const Dialog = ({
             value={input_value}
         />
     );
-
     return (
         <CSSTransition
             in={is_open}
@@ -105,7 +115,7 @@ const Dialog = ({
                             ) : (
                                 <React.Fragment>
                                     <div className='dc-vertical-tab__action-bar dc-vertical-tab__action-bar--contract-type-info-header'>
-                                        <Header title={item.text} onClickGoBack={onBackButtonClick} />
+                                        <Header title={item.text || ''} onClickGoBack={onBackButtonClick} />
                                     </div>
                                     {renderChildren()}
                                 </React.Fragment>
@@ -118,18 +128,4 @@ const Dialog = ({
     );
 };
 
-Dialog.propTypes = {
-    categories: PropTypes.array,
-    children: PropTypes.node,
-    is_info_dialog_open: PropTypes.bool,
-    is_open: PropTypes.bool,
-    selected: PropTypes.string,
-    show_loading: PropTypes.bool,
-    item: PropTypes.object,
-    list: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-    onBackButtonClick: PropTypes.func,
-    onCategoryClick: PropTypes.func,
-    onChangeInput: PropTypes.func,
-};
-
 export default Dialog;

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeMenu/index.js

@@ -1,3 +1,3 @@
-import Dialog from './contract-type-menu.jsx';
+import Dialog from './contract-type-menu';
 
 export default Dialog;