Skip to content

Commit

Permalink
fix: handle all cases of risk management items display
Browse files Browse the repository at this point in the history
  • Loading branch information
henry-deriv committed May 30, 2024
1 parent ca2941b commit a4e709c
Show file tree
Hide file tree
Showing 9 changed files with 181 additions and 111 deletions.
24 changes: 12 additions & 12 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
"@datadog/browser-rum": "^5.11.0",
"@deriv-com/analytics": "1.4.13",
"@deriv-com/quill-tokens": "^2.0.4",
"@deriv-com/quill-ui": "^1.10.13",
"@deriv-com/quill-ui": "^1.10.17",
"@deriv-com/utils": "^0.0.20",
"@deriv/account": "^1.0.0",
"@deriv/account-v2": "^1.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/trader/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"@cloudflare/stream-react": "^1.9.1",
"@deriv-com/analytics": "1.4.13",
"@deriv-com/quill-tokens": "^2.0.4",
"@deriv-com/quill-ui": "^1.10.13",
"@deriv-com/quill-ui": "^1.10.17",
"@deriv-com/utils": "^0.0.20",
"@deriv/api-types": "^1.0.172",
"@deriv/components": "^1.0.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Localize } from '@deriv/translations';
import React from 'react';
import { getContractDetailsConfig } from 'AppV2/Utils/contract-details-config';
import { observer } from '@deriv/stores';
import useContractDetails from 'AppV2/Hooks/useContractDetails';
import RiskManagementItem from '../RiskManagementItem';
import { isValidToCancel, isOpen } from '@deriv/shared';
import CardWrapper from '../CardWrapper';

const DealCancellation = observer(() => {
const { contract_info } = useContractDetails();
const { is_deal_cancellation_visible } = getContractDetailsConfig(contract_info.contract_type ?? '');

const is_valid_to_cancel = isValidToCancel(contract_info);

return is_valid_to_cancel && is_deal_cancellation_visible && isOpen(contract_info) ? (
<CardWrapper>
<RiskManagementItem
label={<Localize i18n_default_text='Deal cancellation' />}
modal_body_content={
<Localize i18n_default_text='When this is active, you can cancel your trade within the chosen time frame. Your stake will be returned without loss.' />
}
is_deal_cancellation
/>
</CardWrapper>
) : null;
});

export default DealCancellation;
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,9 @@ 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 RiskManagementInfoModal = ({ header_content, body_content, info_message }: RiskManagementInfoModalProps) => {
const [isVisible, setIsVisible] = React.useState(false);
return (
<>
Expand All @@ -34,7 +28,7 @@ const RiskManagementInfoModal = ({
<Modal.Body>
<div className='risk-management-info-modal--container'>
<Text size='md'>{body_content}</Text>
<SectionMessage message={info_message} size='sm' status='info' title={''} />
{info_message && <SectionMessage message={info_message} size='sm' status='info' title={''} />}
</div>
</Modal.Body>
</Modal>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import React from 'react';
import { ActionSheet, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui';
import { localize } from '@deriv/translations';
import { Localize, localize } from '@deriv/translations';
import RiskManagementInfoModal from '../RiskManagementInfoModal';
import DealCancellationRemainingTime from '../DealCancellationRemainingTime/deal-cancellation-remaining-time';
import { observer } from '@deriv/stores';
import useContractDetails from 'AppV2/Hooks/useContractDetails';
import { CONTRACT_TYPES, isAccumulatorContract, isValidToCancel } from '@deriv/shared';
import { useTraderStore } from 'Stores/useTraderStores';

type RiskManagementItemProps = {
label: React.ReactNode;
Expand All @@ -11,66 +15,82 @@ type RiskManagementItemProps = {
is_deal_cancellation?: boolean;
};

const RiskManagementItem = ({
label,
modal_body_content,
validation_message,
is_deal_cancellation = false,
}: RiskManagementItemProps) => {
const [toggle, setToggle] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(false);
const dummy_boolean = false; // This will be flag from backend
const RiskManagementItem = observer(
({ label, modal_body_content, validation_message, is_deal_cancellation = false }: RiskManagementItemProps) => {
const [toggle, setToggle] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(false);
const dummy_boolean = false; // This will be flag from backend
const { has_take_profit } = useTraderStore();
const { contract_info } = useContractDetails();
const { contract_type } = contract_info;
const is_valid_to_cancel = isValidToCancel(contract_info);
const is_accumulator = isAccumulatorContract(contract_type);

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}
info_message='lorem lorem lorem ipsum'
const info_message = {
[CONTRACT_TYPES.ACCUMULATOR]: (
<Localize i18n_default_text='Take profit can’t be adjusted for ongoing accumulator contracts.' />
),
[CONTRACT_TYPES.MULTIPLIER.UP || CONTRACT_TYPES.MULTIPLIER.DOWN]:
is_valid_to_cancel && !is_deal_cancellation ? (
<Localize i18n_default_text='Take profit and stop loss are unavailable while deal cancellation is enabled.' />
) : (
''
),
} as const;

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}
info_message={info_message[contract_type as keyof typeof info_message] || ''}
/>
</span>
{!is_deal_cancellation &&
(has_take_profit && is_accumulator ? (
<Text size='sm'>5 USD</Text>
) : (
<ToggleSwitch checked={toggle} onChange={() => setToggle(!toggle)} />
))}
{is_valid_to_cancel && is_deal_cancellation && <DealCancellationRemainingTime />}
</div>
{toggle && (
<TextField
variant='fill'
inputSize='md'
textAlignment='center'
value='5.00 USD'
onFocus={() => setIsOpen(true)}
/>
</span>
{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)} />
)}
</div>
{toggle && (
<TextField
variant='fill'
inputSize='md'
textAlignment='center'
value='5.00 USD'
onFocus={() => setIsOpen(true)}
/>
)}
<ActionSheet.Root expandable isOpen={isOpen} onClose={() => setIsOpen(false)}>
<ActionSheet.Portal>
<ActionSheet.Header title={label} />
<ActionSheet.Content>
<TextField
variant='fill'
inputSize='md'
textAlignment='center'
value='5.00 USD'
message={validation_message}
<ActionSheet.Root expandable isOpen={isOpen} onClose={() => setIsOpen(false)}>
<ActionSheet.Portal>
<ActionSheet.Header title={label} />
<ActionSheet.Content>
<TextField
variant='fill'
inputSize='md'
textAlignment='center'
value='5.00 USD'
message={validation_message}
/>
</ActionSheet.Content>
<ActionSheet.Footer
shouldCloseOnPrimaryButtonClick
primaryAction={{
content: localize('Save'),
onAction: () => {
//do the save
},
}}
/>
</ActionSheet.Content>
<ActionSheet.Footer
shouldCloseOnPrimaryButtonClick
primaryAction={{
content: localize('Save'),
onAction: () => {
//do the save
},
}}
/>
</ActionSheet.Portal>
</ActionSheet.Root>
</div>
);
};
</ActionSheet.Portal>
</ActionSheet.Root>
</div>
);
}
);
export default RiskManagementItem;
23 changes: 23 additions & 0 deletions packages/trader/src/AppV2/Components/StopLoss/stop-loss.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Localize } from '@deriv/translations';
import React from 'react';
import { getContractDetailsConfig } from 'AppV2/Utils/contract-details-config';
import { observer } from '@deriv/stores';
import useContractDetails from 'AppV2/Hooks/useContractDetails';
import RiskManagementItem from '../RiskManagementItem';

const StopLoss = observer(() => {
const { contract_info } = useContractDetails();
const { is_stop_loss_visible } = getContractDetailsConfig(contract_info.contract_type ?? '');

return is_stop_loss_visible ? (
<RiskManagementItem
label={<Localize i18n_default_text='Stop Loss' />}
modal_body_content={
<Localize i18n_default_text='When your loss reaches or exceeds the set amount, your trade will be closed automatically.' />
}
validation_message='hello'
/>
) : null;
});

export default StopLoss;
25 changes: 25 additions & 0 deletions packages/trader/src/AppV2/Components/TakeProfit/take-profit.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Localize } from '@deriv/translations';
import React from 'react';
import { getContractDetailsConfig } from 'AppV2/Utils/contract-details-config';
import { observer } from '@deriv/stores';
import useContractDetails from 'AppV2/Hooks/useContractDetails';
import RiskManagementItem from '../RiskManagementItem';

const TakeProfit = observer(() => {
const { contract_info } = useContractDetails();
const { is_take_profit_visible } = getContractDetailsConfig(contract_info.contract_type ?? '');

return (
is_take_profit_visible && (
<RiskManagementItem
label={<Localize i18n_default_text='Take profit' />}
modal_body_content={
<Localize i18n_default_text='When your profit reaches or exceeds the set amount, your trade will be closed automatically.' />
}
validation_message='hello'
/>
)
);
});

export default TakeProfit;
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,20 @@ import EntryExitDetails from 'AppV2/Components/EntryExitDetails';
import TakeProfitHistory from 'AppV2/Components/TakeProfitHistory';
import PayoutInfo from 'AppV2/Components/PayoutInfo';
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';
import OrderDetails from 'AppV2/Components/OrderDetails';
import { getContractDetailsConfig } from 'AppV2/Utils/contract-details-config';
import TakeProfit from 'AppV2/Components/TakeProfit/take-profit';
import StopLoss from 'AppV2/Components/StopLoss/stop-loss';
import DealCancellation from 'AppV2/Components/DealCancellation/deal-cancellation';
import { isOpen } from '@deriv/shared';

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 { 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' },
Expand Down Expand Up @@ -56,32 +54,13 @@ const ContractDetails = observer(() => {
<div className='placeholder'>
<ChartPlaceholder />
</div>
{is_valid_to_cancel && is_deal_cancellation_visible && (
<DealCancellation />
{isOpen(contract_info) && (
<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
/>
<TakeProfit />
<StopLoss />
</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>
Expand Down

0 comments on commit a4e709c

Please sign in to comment.