fix: connect deal cancellation widget to store

packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx

@@ -54,7 +54,7 @@ const bottomNavItems = [
 ];
 
 const BottomNav = ({ className, children }: BottomNavProps) => {
-    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [selectedIndex, setSelectedIndex] = React.useState(4);
 
     return (
         <div className={classNames('bottom-nav', className)}>

packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx

@@ -0,0 +1,38 @@
+import { Tag } from '@deriv-com/quill-ui';
+import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons';
+import { formatDuration, getDiffDuration } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import useContractDetails from 'AppV2/Hooks/useContractDetails';
+import React from 'react';
+
+type DealCancellationRemainingTimeProps = {
+    format?: string;
+};
+
+const DealCancellationRemainingTime = observer(({ format = 'mm:ss' }: DealCancellationRemainingTimeProps) => {
+    const { common } = useStore();
+    const { server_time: start_time } = common;
+    const { contract_info } = useContractDetails();
+
+    const { date_expiry: end_time } = contract_info.cancellation || {};
+    if (!end_time || start_time.unix() > +end_time) {
+        return <React.Fragment>{''}</React.Fragment>;
+    }
+
+    const { timestamp } = formatDuration(getDiffDuration(start_time.unix(), end_time), format);
+
+    return (
+        <React.Fragment>
+            <Tag
+                variant='custom'
+                label={timestamp}
+                icon={LabelPairedStopwatchCaptionRegularIcon}
+                size='sm'
+                color='custom'
+                className='deal-cancellation-badge'
+            />
+        </React.Fragment>
+    );
+});
+
+export default DealCancellationRemainingTime;

packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ActionSheet, Tag, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui';
+import { ActionSheet, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui';
 import { localize } from '@deriv/translations';
 import RiskManagementInfoModal from '../RiskManagementInfoModal/risk-management-info-modal';
-import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons';
+import DealCancellationRemainingTime from '../DealCancellationRemainingTime/deal-cancellation-remaining-time';
 
 type RiskManagementItemProps = {
     label: React.ReactNode;
@@ -28,18 +28,8 @@ const RiskManagementItem = ({
                     <Text size='sm'>{label}</Text>
                     <RiskManagementInfoModal header_content={label} body_content={modal_body_content} />
                 </span>
-                {dummy_boolean && !is_deal_cancellation && <span>5 USD</span>}
-                {/* {is_deal_cancellation && <div>For now</div>} */}
-                {is_deal_cancellation && (
-                    <Tag
-                        variant='custom'
-                        label='59:59'
-                        icon={LabelPairedStopwatchCaptionRegularIcon}
-                        size='sm'
-                        color='custom'
-                        className='deal-cancellation-badge'
-                    />
-                )}
+                {dummy_boolean && !is_deal_cancellation && <Text size='sm'>5 USD</Text>}
+                {is_deal_cancellation && <DealCancellationRemainingTime />}
                 {!dummy_boolean && !is_deal_cancellation && (
                     <ToggleSwitch checked={toggle} onChange={() => setToggle(!toggle)} />
                 )}
@@ -79,5 +69,4 @@ const RiskManagementItem = ({
         </div>
     );
 };
-
 export default RiskManagementItem;

packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx

@@ -7,8 +7,14 @@ import ChartPlaceholder from '../Chart';
 import { Localize } from '@deriv/translations';
 import RiskManagementItem from 'AppV2/Components/RiskManagementItem';
 import CardWrapper from 'AppV2/Components/CardWrapper';
+import { observer } from '@deriv/stores';
+import useContractDetails from 'AppV2/Hooks/useContractDetails';
+import { isValidToCancel } from '@deriv/shared';
 
-const ContractDetails = () => {
+const ContractDetails = observer(() => {
+    const { contract_info, is_loading } = useContractDetails();
+    if (is_loading) return <></>;
+    const is_valid_to_cancel = isValidToCancel(contract_info);
     const historyData = [
         { date: '01 Jan 2024', time: '12:00:00 GMT', action: 'Take profit', amount: '5.00 USD' },
         { date: '02 Jan 2024', time: '13:00:00 GMT', action: 'Take profit', amount: '10.00 USD' },
@@ -45,14 +51,16 @@ const ContractDetails = () => {
             <div className='placeholder'>
                 <ChartPlaceholder />
             </div>
-            <CardWrapper>
-                <RiskManagementItem
-                    label={<Localize i18n_default_text='Deal cancellation' />}
-                    modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
-                    validation_message='hello'
-                    is_deal_cancellation
-                />
-            </CardWrapper>
+            {is_valid_to_cancel && (
+                <CardWrapper>
+                    <RiskManagementItem
+                        label={<Localize i18n_default_text='Deal cancellation' />}
+                        modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
+                        validation_message='hello'
+                        is_deal_cancellation
+                    />
+                </CardWrapper>
+            )}
             <CardWrapper>
                 <RiskManagementItem
                     label={<Localize i18n_default_text='Take profit' />}
@@ -73,6 +81,6 @@ const ContractDetails = () => {
             <TakeProfitHistory history={historyData} />
         </div>
     );
-};
+});
 
 export default ContractDetails;

packages/trader/src/AppV2/Hooks/useContractDetails.ts

@@ -5,22 +5,23 @@ import { useStore } from '@deriv/stores';
 const useContractDetails = () => {
     const store = useStore();
     const { contract_replay } = store;
-    const { contract_store, onMount, onUnmount } = contract_replay;
+    const { contract_store, onMount } = contract_replay;
     const location = useLocation();
     const { contract_info } = contract_store;
 
     useEffect(() => {
-        const url_array = /[^/]*$/.exec(location.pathname);
-        const url_contract_id = url_array ? +url_array[0] : undefined;
-        onMount(url_contract_id);
+        if (!contract_info.contract_id) {
+            const url_array = /[^/]*$/.exec(location.pathname);
+            const url_contract_id = url_array ? +url_array[0] : undefined;
+            onMount(url_contract_id);
+        }
 
-        return () => {
-            onUnmount();
-        };
-    }, [location, onMount, onUnmount]);
+        // TODO: need to add onUnmount from contract_replay store whenever pathname changes
+    }, [location.pathname, onMount, contract_info.contract_id]);
 
     return {
         contract_info,
+        is_loading: !contract_info.contract_id,
     };
 };