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

@@ -20,30 +20,30 @@ import { TToastConfig } from '../types/contract.types';
 type TPositionsDrawerCardProps = {
     addToast: (toast_config: TToastConfig) => void;
     className?: string;
-    contract_info: TContractInfo;
+    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;
 };
@@ -77,13 +77,13 @@ const PositionsDrawerCard = ({
     toggleCancellationWarning,
     toggleUnsupportedContractModal,
 }: TPositionsDrawerCardProps) => {
-    const is_accumulator = isAccumulatorContract(contract_info.contract_type);
-    const is_multiplier = isMultiplierContract(contract_info.contract_type || '');
-    const is_turbos = isTurbosContract(contract_info.contract_type);
-    const is_vanilla = isVanillaContract(contract_info.contract_type);
-    const is_crypto = isCryptoContract(contract_info.underlying || '');
+    const is_accumulator = isAccumulatorContract(contract_info?.contract_type);
+    const is_multiplier = isMultiplierContract(contract_info?.contract_type || '');
+    const is_turbos = isTurbosContract(contract_info?.contract_type);
+    const is_vanilla = isVanillaContract(contract_info?.contract_type);
+    const is_crypto = isCryptoContract(contract_info?.underlying || '');
     const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
-    const has_ended = !!getEndTime(contract_info);
+    const has_ended = !!getEndTime(contract_info as TContractInfo);
     const is_mobile = isMobile();
     const contract_card_classname = classNames('dc-contract-card', {
         'dc-contract-card--green': Number(profit_loss) > 0 && !result,
@@ -97,22 +97,22 @@ const PositionsDrawerCard = ({
     );
     const card_header = (
         <ContractCard.Header
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             display_name={display_name ?? ''}
             getCardLabels={getCardLabels}
             getContractTypeDisplay={getContractTypeDisplay}
             has_progress_slider={!is_mobile && has_progress_slider}
             is_mobile={is_mobile}
             is_sell_requested={!!is_sell_requested}
             onClickSell={onClickSell}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
         />
     );
 
     const card_body = (
         <ContractCard.Body
             addToast={addToast}
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             contract_update={contract_update ?? {}}
             currency={currency}
             current_focus={current_focus}
@@ -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}
@@ -140,15 +140,15 @@ const PositionsDrawerCard = ({
 
     const card_footer = (
         <ContractCard.Footer
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             getCardLabels={getCardLabels}
             is_multiplier={is_multiplier}
             is_positions
             is_sell_requested={!!is_sell_requested}
             onClickCancel={onClickCancel}
             onClickSell={onClickSell}
             onFooterEntered={onFooterEntered}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
             should_show_transition={!!should_show_transition}
         />
     );
@@ -162,26 +162,26 @@ const PositionsDrawerCard = ({
 
     const supported_contract_card = (
         <div className={contract_card_classname} onClick={() => toggleUnsupportedContractModal(true)}>
-            {contract_info.underlying ? contract_el : loader_el}
+            {contract_info?.underlying ? contract_el : loader_el}
         </div>
     );
 
     const unsupported_contract_card = is_link_disabled ? (
-        <div className={contract_card_classname}>{contract_info.underlying ? contract_el : loader_el}</div>
+        <div className={contract_card_classname}>{contract_info?.underlying ? contract_el : loader_el}</div>
     ) : (
         <NavLink
             className={contract_card_classname}
             to={{
-                pathname: `/contract/${contract_info.contract_id}`,
+                pathname: `/contract/${contract_info?.contract_id}`,
             }}
         >
-            {contract_info.underlying ? contract_el : loader_el}
+            {contract_info?.underlying ? contract_el : loader_el}
         </NavLink>
     );
 
     return (
         <ContractCard
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             getCardLabels={getCardLabels}
             getContractPath={getContractPath}
             is_multiplier={is_multiplier}
@@ -194,7 +194,7 @@ const PositionsDrawerCard = ({
             toggleUnsupportedContractModal={toggleUnsupportedContractModal}
         >
             <div
-                id={`dc_contract_card_${contract_info.contract_id}`}
+                id={`dc_contract_card_${contract_info?.contract_id}`}
                 className={className}
                 onMouseEnter={() => {
                     if (typeof onMouseEnter === 'function') onMouseEnter();

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;