Merge pull request #58 from jim-deriv/Jim/74998/contract-card-ts-migr…

…ation

Jim/74998/contract card ts migration

packages/components/package.json

@@ -74,6 +74,7 @@
     "gh-pages": "^2.1.1",
     "glob": "^7.1.5",
     "lodash.throttle": "^4.1.1",
+    "moment": "^2.29.2",
     "prop-types": "^15.7.2",
     "react-content-loader": "^6.2.0",
     "react-div-100vh": "^0.3.8",

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

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {
     isCryptocurrency,
@@ -13,15 +12,45 @@ import {
     isValidToSell,
     shouldShowCancellation,
 } from '@deriv/shared';
-import ContractCardItem from './contract-card-item.jsx';
-import ToggleCardDialog from './toggle-card-dialog.jsx';
+import ContractCardItem from './contract-card-item';
+import ToggleCardDialog from './toggle-card-dialog';
 import CurrencyBadge from '../../currency-badge';
 import DesktopWrapper from '../../desktop-wrapper';
 import Icon from '../../icon';
 import MobileWrapper from '../../mobile-wrapper';
 import Money from '../../money';
-import { ResultStatusIcon } from '../result-overlay/result-overlay.jsx';
+import { ResultStatusIcon } from '../result-overlay/result-overlay';
 import ProgressSliderMobile from '../../progress-slider-mobile';
+import { TContractInfo, TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables, TToastConfig } from '../../types';
+import { ContractUpdate } from '@deriv/api-types';
+
+export type TGeneralContractCardBodyProps = {
+    addToast: (toast_config: TToastConfig) => void;
+    contract_info: TContractInfo;
+    contract_update: ContractUpdate;
+    connectWithContractUpdate: (contract_update_form: React.ElementType) => React.ElementType;
+    currency: string;
+    current_focus?: string;
+    error_message_alignment: string;
+    getCardLabels: TGetCardLables;
+    getContractById: (contract_id?: number) => TContractStore;
+    should_show_cancellation_warning: boolean;
+    has_progress_slider: boolean;
+    is_mobile: boolean;
+    is_sold: boolean;
+    onMouseLeave: () => void;
+    removeToast: (toast_id: string) => void;
+    setCurrentFocus: (name: string) => void;
+    status: string;
+    toggleCancellationWarning: () => void;
+    progress_slider: React.ReactNode;
+};
+
+export type TContractCardBodyProps = {
+    is_multiplier: boolean;
+    server_time: moment.Moment;
+} & TGeneralContractCardBodyProps;
 
 const MultiplierCardBody = ({
     addToast,
@@ -43,7 +72,7 @@ const MultiplierCardBody = ({
     should_show_cancellation_warning,
     status,
     toggleCancellationWarning,
-}) => {
+}: TGeneralContractCardBodyProps) => {
     const { buy_price, bid_price, profit, limit_order, underlying } = contract_info;
 
     const total_profit = getTotalProfit(contract_info);
@@ -62,13 +91,13 @@ const MultiplierCardBody = ({
                 })}
             >
                 <ContractCardItem header={getCardLabels().STAKE} className='dc-contract-card__stake'>
-                    <Money amount={buy_price - cancellation_price} currency={currency} />
+                    <Money amount={Number(buy_price) - cancellation_price} currency={currency} />
                 </ContractCardItem>
                 <ContractCardItem header={getCardLabels().CURRENT_STAKE} className='dc-contract-card__current-stake'>
                     <div
                         className={classNames({
-                            'dc-contract-card--profit': +profit > 0,
-                            'dc-contract-card--loss': +profit < 0,
+                            'dc-contract-card--profit': Number(profit) > 0,
+                            'dc-contract-card--loss': Number(profit) < 0,
                         })}
                     >
                         <Money amount={bid_price} currency={currency} />
@@ -168,7 +197,7 @@ const ContractCardBody = ({
     should_show_cancellation_warning,
     status,
     toggleCancellationWarning,
-}) => {
+}: TContractCardBodyProps) => {
     const indicative = getIndicativePrice(contract_info);
     const { buy_price, sell_price, payout, profit, tick_count, date_expiry, purchase_time } = contract_info;
     const current_tick = tick_count ? getCurrentTick(contract_info) : null;
@@ -213,8 +242,8 @@ const ContractCardBody = ({
                 <ContractCardItem
                     header={is_sold ? getCardLabels().PROFIT_LOSS : getCardLabels().POTENTIAL_PROFIT_LOSS}
                     is_crypto={isCryptocurrency(currency)}
-                    is_loss={+profit < 0}
-                    is_won={+profit > 0}
+                    is_loss={Number(profit) < 0}
+                    is_won={Number(profit) > 0}
                 >
                     <Money amount={profit} currency={currency} />
                     <div
@@ -227,7 +256,7 @@ const ContractCardBody = ({
                     </div>
                 </ContractCardItem>
                 <ContractCardItem header={is_sold ? getCardLabels().PAYOUT : getCardLabels().INDICATIVE_PRICE}>
-                    <Money currency={currency} amount={sell_price || indicative} />
+                    <Money currency={currency} amount={Number(sell_price || indicative)} />
                     <div
                         className={classNames('dc-contract-card__indicative--movement', {
                             'dc-contract-card__indicative--movement-complete': is_sold,
@@ -265,12 +294,9 @@ const ContractCardBody = ({
             <DesktopWrapper>{card_body}</DesktopWrapper>
             <MobileWrapper>
                 <div
-                    className={
-                        ('dc-contract-card__separatorclass',
-                        classNames({
-                            'dc-contract-card__body-wrapper': !is_multiplier,
-                        }))
-                    }
+                    className={classNames('dc-contract-card__separatorclass', {
+                        'dc-contract-card__body-wrapper': !is_multiplier,
+                    })}
                 >
                     {card_body}
                 </div>
@@ -279,27 +305,4 @@ const ContractCardBody = ({
     );
 };
 
-ContractCardBody.propTypes = {
-    addToast: PropTypes.func,
-    connectWithContractUpdate: PropTypes.func,
-    contract_info: PropTypes.object,
-    contract_update: PropTypes.object,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    error_message_alignment: PropTypes.string,
-    getCardLabels: PropTypes.func,
-    getContractById: PropTypes.func,
-    is_mobile: PropTypes.bool,
-    is_multiplier: PropTypes.bool,
-    is_sold: PropTypes.bool,
-    onMouseLeave: PropTypes.func,
-    removeToast: PropTypes.func,
-    server_time: PropTypes.object,
-    setCurrentFocus: PropTypes.func,
-    should_show_cancellation_warning: PropTypes.bool,
-    status: PropTypes.string,
-    toggleCancellationWarning: PropTypes.func,
-    has_progress_slider: PropTypes.bool,
-};
-
 export default ContractCardBody;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import './sass/contract-card-dialog.scss';
+import { IClickEvent, useOnClickOutside } from '../../../hooks/use-onclickoutside';
+
+export type TContractCardDialogProps = {
+    children: React.ReactNode;
+    is_visible: boolean;
+    left: number;
+    toggleDialog: (e: any) => void; // This function accomodates events for various HTML elements, which have no overlap, so typing it to any
+    toggle_ref?: React.RefObject<HTMLDivElement>;
+    top: number;
+};
+
+const ContractCardDialog = React.forwardRef(
+    (
+        { children, is_visible, left, toggleDialog, toggle_ref, top }: TContractCardDialogProps,
+        ref: React.ForwardedRef<HTMLDivElement>
+    ) => {
+        const validateClickOutside = (event: IClickEvent) =>
+            is_visible && !toggle_ref?.current?.contains(event.target as Node);
+
+        useOnClickOutside(ref, toggleDialog, validateClickOutside);
+
+        const dialog = (
+            <CSSTransition
+                in={is_visible}
+                classNames={{
+                    enter: 'dc-contract-card-dialog--enter',
+                    enterDone: 'dc-contract-card-dialog--enter-done',
+                    exit: 'dc-contract-card-dialog--exit',
+                }}
+                timeout={150}
+                unmountOnExit
+            >
+                <div
+                    ref={ref}
+                    className='dc-contract-card-dialog'
+                    style={{
+                        top,
+                        left: `calc(${left}px + 32px)`,
+                    }}
+                >
+                    {children}
+                </div>
+            </CSSTransition>
+        );
+        const deriv_app_element = document.getElementById('deriv_app');
+        return ReactDOM.createPortal(
+            dialog, // use portal to render dialog above ThemedScrollbars container
+            deriv_app_element || document.body
+        );
+    }
+);
+
+ContractCardDialog.displayName = 'ContractCardDialog';
+
+export default ContractCardDialog;

packages/components/src/components/contract-card/contract-card-items/contract-card-footer.jsx → packages/components/src/components/contract-card/contract-card-items/contract-card-footer.tsx

@@ -1,10 +1,24 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isValidToCancel, hasContractEntered, isOpen, useNewRowTransition } from '@deriv/shared';
-import ContractCardSell from './contract-card-sell.jsx';
-import MultiplierCloseActions from './multiplier-close-actions.jsx';
+import ContractCardSell from './contract-card-sell';
+import MultiplierCloseActions from './multiplier-close-actions';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables } from '../../types';
+
+export type TCardFooterPropTypes = {
+    contract_info: TContractInfo;
+    getCardLabels: TGetCardLables;
+    is_multiplier?: boolean;
+    is_positions: boolean;
+    is_sell_requested: boolean;
+    onClickCancel: (contract_id?: number) => void;
+    onClickSell: (contract_id?: number) => void;
+    onFooterEntered: () => void;
+    server_time: moment.Moment;
+    should_show_transition: boolean;
+};
 
 const CardFooter = ({
     contract_info,
@@ -17,7 +31,7 @@ const CardFooter = ({
     onFooterEntered,
     server_time,
     should_show_transition,
-}) => {
+}: TCardFooterPropTypes) => {
     const { in_prop } = useNewRowTransition(should_show_transition);
 
     const is_valid_to_cancel = isValidToCancel(contract_info);
@@ -79,17 +93,4 @@ const CardFooter = ({
     );
 };
 
-CardFooter.propTypes = {
-    contract_info: PropTypes.object,
-    getCardLabels: PropTypes.func,
-    is_multiplier: PropTypes.bool,
-    is_positions: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    onClickCancel: PropTypes.func,
-    onClickSell: PropTypes.func,
-    onFooterEntered: PropTypes.func,
-    server_time: PropTypes.object,
-    should_show_transition: PropTypes.bool,
-};
-
 export default CardFooter;

packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx → packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx

@@ -1,15 +1,30 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isHighLow, getCurrentTick, isBot } from '@deriv/shared';
-import ContractTypeCell from './contract-type-cell.jsx';
+import ContractTypeCell from './contract-type-cell';
 import Button from '../../button';
 import Icon from '../../icon';
 import Text from '../../text';
 import ProgressSlider from '../../progress-slider';
 import DesktopWrapper from '../../desktop-wrapper';
 import MobileWrapper from '../../mobile-wrapper';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables, TGetContractTypeDisplay } from '../../types';
+
+export type TContractCardHeaderProps = {
+    contract_info: TContractInfo;
+    display_name: string;
+    getCardLabels: TGetCardLables;
+    getContractTypeDisplay: TGetContractTypeDisplay;
+    has_progress_slider: boolean;
+    is_mobile: boolean;
+    is_sell_requested: boolean;
+    is_valid_to_sell: boolean;
+    onClickSell: (contract_id?: number) => void;
+    server_time: moment.Moment;
+    id: number;
+};
 
 const ContractCardHeader = ({
     contract_info,
@@ -23,7 +38,7 @@ const ContractCardHeader = ({
     is_valid_to_sell,
     onClickSell,
     server_time,
-}) => {
+}: TContractCardHeaderProps) => {
     const current_tick = contract_info.tick_count ? getCurrentTick(contract_info) : null;
     const { underlying, multiplier, contract_type, shortcode, purchase_time, date_expiry, tick_count, is_sold } =
         contract_info;
@@ -99,18 +114,4 @@ const ContractCardHeader = ({
     );
 };
 
-ContractCardHeader.propTypes = {
-    contract_info: PropTypes.object,
-    display_name: PropTypes.string,
-    getCardLabels: PropTypes.func,
-    getContractTypeDisplay: PropTypes.func,
-    has_progress_slider: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_valid_to_sell: PropTypes.bool,
-    onClickSell: PropTypes.func,
-    server_time: PropTypes.object,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
 export default ContractCardHeader;