Henry/dtra 376/fix: ts migration positionsdrawer folder

packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx

@@ -23,7 +23,7 @@ export type TGeneralContractCardBodyProps = {
     contract_update: TContractInfo['contract_update'];
     connectWithContractUpdate?: (contract_update_form: React.ElementType) => React.ElementType;
     currency: string;
-    current_focus?: string;
+    current_focus?: string | null;
     error_message_alignment?: string;
     getCardLabels: TGetCardLables;
     getContractById: (contract_id?: number) => TContractStore;

packages/components/src/components/contract-card/contract-card.tsx

@@ -18,7 +18,7 @@ type TContractCardProps = {
     is_multiplier: boolean;
     is_positions?: boolean;
     is_unsupported?: boolean;
-    onClickRemove?: (contract_id?: number) => void;
+    onClickRemove?: (contract_id: number) => void;
     profit_loss: number;
     result?: string;
     should_show_result_overlay: boolean;

packages/components/src/components/contract-card/result-overlay/result-overlay.tsx

@@ -14,7 +14,7 @@ type TResultOverlayProps = {
     is_unsupported?: boolean;
     is_visible: boolean;
     onClick: () => void;
-    onClickRemove?: (contract_id?: number) => void;
+    onClickRemove?: (contract_id: number) => void;
     result: string;
 };
 
@@ -88,7 +88,9 @@ const ResultOverlay = ({
                         <span
                             id={`dc_contract_card_${contract_id}_result_close_icon`}
                             className='dc-result__close-btn'
-                            onClick={() => onClickRemove?.(contract_id)}
+                            onClick={() => {
+                                if (contract_id) onClickRemove?.(contract_id);
+                            }}
                         />
                     )}
                     {getContractPath && (

packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx

@@ -23,27 +23,27 @@ type TPositionsDrawerCardProps = {
     contract_info: TContractInfo;
     contract_update?: TContractInfo['contract_update'];
     currency: string;
-    current_focus: string;
+    current_focus: string | null;
     display_name?: string;
     getContractById: (contract_id?: number) => TContractStore;
     is_mobile?: boolean;
     is_sell_requested?: boolean;
     is_unsupported?: boolean;
-    is_link_disabled: boolean;
+    is_link_disabled?: boolean;
     profit_loss?: number;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
-    onClickRemove: (contract_id?: number) => void;
+    onClickRemove: (contract_id: number) => void;
     onFooterEntered?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     removeToast: (key: string) => void;
     result?: string;
     setCurrentFocus: (value: string) => void;
-    server_time: moment.Moment;
+    server_time?: moment.Moment;
     should_show_transition?: boolean;
     should_show_cancellation_warning: boolean;
-    status: string;
+    status?: string;
     toggleCancellationWarning: () => void;
     toggleUnsupportedContractModal: (value: boolean) => void;
 };
@@ -105,7 +105,7 @@ const PositionsDrawerCard = ({
             is_mobile={is_mobile}
             is_sell_requested={!!is_sell_requested}
             onClickSell={onClickSell}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
         />
     );
 
@@ -130,7 +130,7 @@ const PositionsDrawerCard = ({
             is_vanilla={is_vanilla}
             has_progress_slider={is_mobile && has_progress_slider}
             removeToast={removeToast}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
             setCurrentFocus={setCurrentFocus}
             should_show_cancellation_warning={should_show_cancellation_warning}
             status={status}
@@ -148,7 +148,7 @@ const PositionsDrawerCard = ({
             onClickCancel={onClickCancel}
             onClickSell={onClickSell}
             onFooterEntered={onFooterEntered}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
             should_show_transition={!!should_show_transition}
         />
     );

packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx

@@ -9,9 +9,9 @@ import { TGetCardLables } from '../types';
 
 type TProgressSliderMobileProps = {
     className?: string;
-    current_tick: number | null;
+    current_tick?: number | null;
     expiry_time?: number;
-    is_loading: boolean;
+    is_loading?: boolean;
     server_time: moment.Moment;
     start_time?: number;
     ticks_count?: number;

packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx

@@ -4,7 +4,7 @@ import Text from '../text';
 import { TGetCardLables } from '../types';
 
 type TProgressTicksMobileProps = {
-    current_tick: number | null;
+    current_tick?: number | null;
     ticks_count: number;
     getCardLabels: TGetCardLables;
 };

packages/shared/src/utils/constants/contract.tsx

@@ -24,7 +24,7 @@ type TContractTypesConfig = {
     config?: { hide_duration?: boolean; should_override?: boolean };
 };
 
-type TGetContractTypesConfig = (symbol: string) => Record<string, TContractTypesConfig>;
+type TGetContractTypesConfig = (symbol?: string) => Record<string, TContractTypesConfig>;
 
 type TGetSupportedContracts = keyof ReturnType<typeof getSupportedContracts>;
 

packages/stores/src/mockStore.ts

@@ -436,6 +436,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_loading: false,
             is_accumulator: false,
             is_multiplier: false,
+            onHoverPosition: jest.fn(),
             onClickCancel: jest.fn(),
             onClickSell: jest.fn(),
             onMount: jest.fn(),

packages/stores/types.ts

@@ -536,6 +536,7 @@ type TPortfolioStore = {
     is_loading: boolean;
     is_multiplier: boolean;
     is_accumulator: boolean;
+    onHoverPosition: (is_over: boolean, position: TPortfolioPosition, underlying: string) => void;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
     onMount: () => void;

packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx

@@ -174,7 +174,7 @@ const ContractDetails = ({
                         id='dt_entry_spot_label'
                         icon={<Icon icon='IcContractEntrySpot' size={24} />}
                         label={localize('Entry spot')}
-                        value={addCommaToNumber(entry_spot_display_value) || ' - '}
+                        value={addCommaToNumber(Number(entry_spot_display_value)) || ' - '}
                         value2={toGMTFormat(epochToMoment(Number(entry_tick_time))) || ' - '}
                     />
                 )}
@@ -183,7 +183,7 @@ const ContractDetails = ({
                         id='dt_exit_spot_label'
                         icon={<Icon icon='IcContractExitSpot' size={24} />}
                         label={localize('Exit spot')}
-                        value={addCommaToNumber(exit_spot) || ' - '}
+                        value={addCommaToNumber(Number(exit_spot)) || ' - '}
                         value2={toGMTFormat(epochToMoment(Number(exit_tick_time))) || ' - '}
                     />
                 )}

packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PositionsResultMobile from '../positions-result-mobile';
+
+describe('PositionsResultMobile', () => {
+    it('should PositionsResultMobile be in the DOM', () => {
+        render(<PositionsResultMobile is_visible={true} result='won' />);
+        expect(screen.getByTestId('result_mobile')).toBeInTheDocument();
+    });
+
+    it('should PositionsResultMobile render LOST if result is won ', () => {
+        render(<PositionsResultMobile is_visible={true} result='won' />);
+        expect(screen.getByText('Won')).toBeInTheDocument();
+    });
+
+    it('should PositionsResultMobile render LOST if result is not won ', () => {
+        render(<PositionsResultMobile is_visible={true} result='lost' />);
+        expect(screen.getByText('Lost')).toBeInTheDocument();
+    });
+});

packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js → packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.ts

@@ -1,7 +1,10 @@
 import { localize } from '@deriv/translations';
-import { isHighLow, getContractTypesConfig, isCallPut, isVanillaContract } from '@deriv/shared';
+import { isHighLow, getContractTypesConfig, isCallPut, isVanillaContract, TContractInfo } from '@deriv/shared';
 
-export const addCommaToNumber = (num, decimal_places) => {
+export const addCommaToNumber = (
+    num: number | null | undefined,
+    decimal_places?: number | undefined
+): string | number | null | undefined => {
     if (!num || isNaN(num)) {
         return num;
     }
@@ -10,7 +13,7 @@ export const addCommaToNumber = (num, decimal_places) => {
     return n.replace(/\d(?=(?:\d{3})+(?:\.|$))/g, (m, i) => (p <= 0 || i < p ? `${m},` : m));
 };
 
-export const getBarrierLabel = contract_info => {
+export const getBarrierLabel = (contract_info: TContractInfo) => {
     if (isDigitType(contract_info.contract_type)) {
         return localize('Target');
     }
@@ -20,16 +23,17 @@ export const getBarrierLabel = contract_info => {
     return localize('Barrier');
 };
 
-export const getBarrierValue = contract_info => {
+export const getBarrierValue = (contract_info: TContractInfo) => {
     if (isDigitType(contract_info.contract_type)) {
-        return digitTypeMap(contract_info)[contract_info.contract_type];
+        return digitTypeMap(contract_info)[contract_info.contract_type as keyof ReturnType<typeof digitTypeMap>];
     }
-    return addCommaToNumber(contract_info.barrier);
+    return addCommaToNumber(Number(contract_info.barrier));
 };
 
-export const isDigitType = contract_type => /digit/.test(contract_type.toLowerCase());
+export const isDigitType = (contract_type: TContractInfo['contract_type']) =>
+    contract_type && /digit/.test(contract_type.toLowerCase());
 
-const digitTypeMap = contract_info => ({
+const digitTypeMap = (contract_info: TContractInfo) => ({
     DIGITDIFF: localize('Not {{barrier}}', { barrier: contract_info.barrier }),
     DIGITEVEN: localize('Even'),
     DIGITMATCH: localize('Equals {{barrier}}', { barrier: contract_info.barrier }),
@@ -38,14 +42,17 @@ const digitTypeMap = contract_info => ({
     DIGITUNDER: localize('Under {{barrier}}', { barrier: contract_info.barrier }),
 });
 
-export const filterByContractType = ({ contract_type, shortcode }, trade_contract_type) => {
-    const is_call_put = isCallPut(trade_contract_type);
+export const filterByContractType = (
+    { contract_type, shortcode }: { contract_type?: string; shortcode?: string },
+    trade_contract_type: string
+) => {
+    const is_call_put = isCallPut(trade_contract_type as Parameters<typeof isCallPut>[0]);
     const is_high_low = isHighLow({ shortcode });
     const is_vanilla = isVanillaContract(contract_type);
     const trade_types = is_call_put
         ? ['CALL', 'CALLE', 'PUT', 'PUTE']
         : getContractTypesConfig()[trade_contract_type]?.trade_types;
-    const match = trade_types?.includes(contract_type);
+    const match = trade_types?.includes(contract_type ?? '');
     if (trade_contract_type === 'high_low') return is_high_low;
     return match && (is_vanilla || !is_high_low);
 };

packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts

@@ -0,0 +1,3 @@
+import PositionsDrawer from './positions-drawer';
+
+export default PositionsDrawer;

packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx → packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -11,18 +10,47 @@ import { filterByContractType } from './helpers';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { observer, useStore } from '@deriv/stores';
 
+type TUiStore = Pick<
+    ReturnType<typeof useStore>['ui'],
+    | 'addToast'
+    | 'current_focus'
+    | 'is_mobile'
+    | 'is_positions_drawer_on'
+    | 'removeToast'
+    | 'setCurrentFocus'
+    | 'should_show_cancellation_warning'
+    | 'toggleCancellationWarning'
+    | 'togglePositionsDrawer'
+    | 'toggleUnsupportedContractModal'
+>;
+type TPortfolioStore = Pick<
+    ReturnType<typeof useStore>['portfolio'],
+    'onHoverPosition' | 'onClickCancel' | 'onClickSell'
+>;
+type TPositionDrawerCardItem = TPortfolioStore &
+    TUiStore & {
+        currency: ReturnType<typeof useStore>['client']['currency'];
+        getContractById: ReturnType<typeof useStore>['contract_trade']['getContractById'];
+        is_new_row?: boolean;
+        measure?: () => void;
+        onClickRemove: ReturnType<typeof useStore>['portfolio']['removePositionById'];
+        row: ReturnType<typeof useStore>['portfolio']['active_positions'][0];
+        server_time: ReturnType<typeof useStore>['common']['server_time'];
+        symbol: ReturnType<typeof useTraderStore>['symbol'];
+    };
+
 const PositionsDrawerCardItem = ({
     row: portfolio_position,
     measure,
     onHoverPosition,
     symbol,
     is_new_row,
     ...props
-}) => {
-    const { in_prop } = useNewRowTransition(is_new_row);
+}: TPositionDrawerCardItem) => {
+    const { in_prop } = useNewRowTransition(is_new_row as boolean);
 
     React.useEffect(() => {
-        measure();
+        measure?.();
     }, [portfolio_position.contract_info.is_sold, measure]);
 
     return (
@@ -84,16 +112,16 @@ const PositionsDrawer = observer(({ ...props }) => {
         toggleUnsupportedContractModal,
     } = ui;
     const drawer_ref = React.useRef(null);
-    const list_ref = React.useRef(null);
-    const scrollbar_ref = React.useRef(null);
+    const list_ref = React.useRef<HTMLDivElement>(null);
+    const scrollbar_ref = React.useRef<HTMLElement>(null);
 
     React.useEffect(() => {
         onMount();
     }, [onMount]);
 
     React.useEffect(() => {
-        list_ref?.current?.scrollTo(0);
-        scrollbar_ref?.current?.scrollToTop();
+        list_ref?.current?.scrollTo({ top: 0 });
+        if (scrollbar_ref.current) scrollbar_ref.current.scrollTop = 0;
     }, [symbol, trade_contract_type]);
 
     const positions = all_positions.filter(
@@ -109,6 +137,7 @@ const PositionsDrawer = observer(({ ...props }) => {
         <DataList
             data_source={positions}
             rowRenderer={args => (
+                // @ts-expect-error not sure how to type row so types are compatible
                 <PositionsDrawerCardItem
                     onHoverPosition={onHoverPosition}
                     symbol={symbol}
@@ -120,11 +149,13 @@ const PositionsDrawer = observer(({ ...props }) => {
                     server_time={server_time}
                     getContractById={getContractById}
                     is_mobile={is_mobile}
+                    is_positions_drawer_on={is_positions_drawer_on}
                     current_focus={current_focus}
                     removeToast={removeToast}
                     setCurrentFocus={setCurrentFocus}
                     should_show_cancellation_warning={should_show_cancellation_warning}
                     toggleCancellationWarning={toggleCancellationWarning}
+                    togglePositionsDrawer={toggleDrawer}
                     toggleUnsupportedContractModal={toggleUnsupportedContractModal}
                     {...args}
                     {...props}
@@ -179,10 +210,4 @@ const PositionsDrawer = observer(({ ...props }) => {
     );
 });
 
-PositionsDrawer.propTypes = {
-    children: PropTypes.node,
-    onChangeContractUpdate: PropTypes.func,
-    onClickContractUpdate: PropTypes.func,
-};
-
 export default PositionsDrawer;