fix: add contract details page config for showing sections

packages/core/package.json

@@ -96,8 +96,8 @@
         "@babel/polyfill": "^7.4.4",
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.4",
+        "@deriv-com/quill-tokens": "^2.0.4",
+        "@deriv-com/quill-ui": "^1.10.13",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",
         "@deriv/account-v2": "^1.0.0",

packages/trader/package.json

@@ -89,8 +89,8 @@
     "dependencies": {
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.4",
+        "@deriv-com/quill-tokens": "^2.0.4",
+        "@deriv-com/quill-ui": "^1.10.13",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",

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

@@ -26,7 +26,7 @@ const DealCancellationRemainingTime = observer(({ format = 'mm:ss' }: DealCancel
             <Tag
                 variant='custom'
                 label={timestamp}
-                icon={LabelPairedStopwatchCaptionRegularIcon}
+                icon={<LabelPairedStopwatchCaptionRegularIcon />}
                 size='sm'
                 color='custom'
                 className='deal-cancellation-badge'

packages/trader/src/AppV2/Components/OrderDetails/order-details.scss

@@ -5,10 +5,6 @@
     background-color: var(--component-modal-bg);
     border-radius: var(--semantic-borderRadius-md);
 
-    .title {
-        margin-bottom: var(--core-spacing-800);
-    }
-
     .table {
         display: flex;
         justify-content: space-between;

packages/trader/src/AppV2/Components/RiskManagementInfoModal/index.ts

@@ -0,0 +1,4 @@
+import RiskManagementInfoModal from './risk-management-info-modal';
+import './risk-management-info-modal.scss';
+
+export default RiskManagementInfoModal;

packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.scss

@@ -0,0 +1,7 @@
+.risk-management-info-modal {
+    &--container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--semantic-spacing-gap-lg);
+    }
+}

packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import { Modal } from '@deriv-com/quill-ui';
+import { Modal, SectionMessage, Text } from '@deriv-com/quill-ui';
 import { Localize } from '@deriv/translations';
 import { LabelPairedCircleInfoSmRegularIcon } from '@deriv/quill-icons';
 
 type RiskManagementInfoModalProps = {
     header_content: React.ReactNode;
     body_content: React.ReactNode;
+    info_message?: React.ReactNode;
     is_deal_cancellation_enabled?: boolean;
 };
 
 const RiskManagementInfoModal = ({
     header_content,
     body_content,
+    info_message,
     is_deal_cancellation_enabled = false,
 }: RiskManagementInfoModalProps) => {
     const [isVisible, setIsVisible] = React.useState(false);
@@ -30,8 +32,10 @@ const RiskManagementInfoModal = ({
             >
                 <Modal.Header title={header_content} />
                 <Modal.Body>
-                    {body_content}
-                    {is_deal_cancellation_enabled && <div>hello</div>}
+                    <div className='risk-management-info-modal--container'>
+                        <Text size='md'>{body_content}</Text>
+                        <SectionMessage message={info_message} size='sm' status='info' title={''} />
+                    </div>
                 </Modal.Body>
             </Modal>
         </>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ActionSheet, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui';
 import { localize } from '@deriv/translations';
-import RiskManagementInfoModal from '../RiskManagementInfoModal/risk-management-info-modal';
+import RiskManagementInfoModal from '../RiskManagementInfoModal';
 import DealCancellationRemainingTime from '../DealCancellationRemainingTime/deal-cancellation-remaining-time';
 
 type RiskManagementItemProps = {
@@ -19,14 +19,18 @@ const RiskManagementItem = ({
 }: RiskManagementItemProps) => {
     const [toggle, setToggle] = React.useState(false);
     const [isOpen, setIsOpen] = React.useState(false);
-    const dummy_boolean = true; // This will be flag from backend
+    const dummy_boolean = false; // This will be flag from backend
 
     return (
         <div className='risk-management-item--container'>
             <div className='risk-management-item'>
                 <span className='risk-management-item--title'>
                     <Text size='sm'>{label}</Text>
-                    <RiskManagementInfoModal header_content={label} body_content={modal_body_content} />
+                    <RiskManagementInfoModal
+                        header_content={label}
+                        body_content={modal_body_content}
+                        info_message='lorem lorem lorem ipsum'
+                    />
                 </span>
                 {dummy_boolean && !is_deal_cancellation && <Text size='sm'>5 USD</Text>}
                 {is_deal_cancellation && <DealCancellationRemainingTime />}

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

@@ -11,11 +11,15 @@ import { observer } from '@deriv/stores';
 import useContractDetails from 'AppV2/Hooks/useContractDetails';
 import { isValidToCancel } from '@deriv/shared';
 import OrderDetails from 'AppV2/Components/OrderDetails';
+import { getContractDetailsConfig } from 'AppV2/Utils/contract-details-config';
 
 const ContractDetails = observer(() => {
     const { contract_info, is_loading } = useContractDetails();
     if (is_loading) return <></>;
     const is_valid_to_cancel = isValidToCancel(contract_info);
+    const { is_deal_cancellation_visible, is_stop_loss_visible, is_take_profit_visible, is_tp_history_visible } =
+        getContractDetailsConfig(contract_info.contract_type ?? '');
+
     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' },
@@ -52,7 +56,7 @@ const ContractDetails = observer(() => {
             <div className='placeholder'>
                 <ChartPlaceholder />
             </div>
-            {is_valid_to_cancel && (
+            {is_valid_to_cancel && is_deal_cancellation_visible && (
                 <CardWrapper>
                     <RiskManagementItem
                         label={<Localize i18n_default_text='Deal cancellation' />}
@@ -62,32 +66,28 @@ const ContractDetails = observer(() => {
                     />
                 </CardWrapper>
             )}
+            <CardWrapper>
+                {is_take_profit_visible && (
+                    <RiskManagementItem
+                        label={<Localize i18n_default_text='Take profit' />}
+                        modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
+                        validation_message='hello'
+                    />
+                )}
+                {is_stop_loss_visible && (
+                    <RiskManagementItem
+                        label={<Localize i18n_default_text='Stop Loss' />}
+                        modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
+                        validation_message='hello'
+                    />
+                )}
+            </CardWrapper>
             <div className='placeholder'>
                 <OrderDetails contract_info={contract_info} />
             </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>
-            <CardWrapper>
-                <RiskManagementItem
-                    label={<Localize i18n_default_text='Take profit' />}
-                    modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
-                    validation_message='hello'
-                />
-                <RiskManagementItem
-                    label={<Localize i18n_default_text='Stop Loss' />}
-                    modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
-                    validation_message='hello'
-                />
-            </CardWrapper>
             <PayoutInfo />
             <EntryExitDetails contract_info={contract_info} />
-            <TakeProfitHistory history={historyData} />
+            {is_tp_history_visible && <TakeProfitHistory history={historyData} />}
         </div>
     );
 });

packages/trader/src/AppV2/Utils/contract-details-config.ts

@@ -0,0 +1,33 @@
+import { CONTRACT_TYPES } from '@deriv/shared';
+
+const DEFAULT_CONFIG = {
+    is_take_profit_visible: false,
+    is_deal_cancellation_visible: false,
+    is_stop_loss_visible: false,
+    is_tp_history_visible: false,
+};
+
+export const getContractDetailsConfig = (contract_type: string) => {
+    const config = {
+        [CONTRACT_TYPES.ACCUMULATOR]: {
+            is_take_profit_visible: true,
+            is_deal_cancellation_visible: false,
+            is_stop_loss_visible: false,
+            is_tp_history_visible: true,
+        },
+        [CONTRACT_TYPES.MULTIPLIER.UP || CONTRACT_TYPES.MULTIPLIER.DOWN]: {
+            is_take_profit_visible: true,
+            is_deal_cancellation_visible: true,
+            is_stop_loss_visible: true,
+            is_tp_history_visible: true,
+        },
+        [CONTRACT_TYPES.TURBOS.LONG || CONTRACT_TYPES.TURBOS.SHORT]: {
+            is_take_profit_visible: true,
+            is_deal_cancellation_visible: false,
+            is_stop_loss_visible: false,
+            is_tp_history_visible: true,
+        },
+    } as const;
+
+    return config[contract_type as keyof typeof config] || DEFAULT_CONFIG;
+};