Skip to content

Commit ef9fc33

Browse files
kate-derivkate-deriv
authored
[DTRA] / Kate / DTRA-708/ Arrow logic improvements (#12932)
* fix: remove arrow indicator if the contract was sold * refactor: add test cases
1 parent c7eb068 commit ef9fc33

File tree

12 files changed

+91
-20
lines changed

12 files changed

+91
-20
lines changed

‎packages/components/src/components/contract-card/contract-card-items/__tests__/accumulator-card-body.spec.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,16 @@ describe('<AccumulatorCardBody />', () => {
4949
expect(screen.getByText('Take profit:')).toBeInTheDocument();
5050
expect(screen.getByText('-')).toBeInTheDocument();
5151
});
52+
53+
it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
54+
render(<AccumulatorCardBody {...mock_props} />);
55+
56+
expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
57+
});
58+
59+
it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
60+
render(<AccumulatorCardBody {...mock_props} is_sold={false} />);
61+
62+
expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
63+
});
5264
});

‎packages/components/src/components/contract-card/contract-card-items/__tests__/multiplier-card-body.spec.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ describe('MultiplierCardBody', () => {
5858
expect(screen.getByText(getCardLabels().STOP_LOSS)).toBeInTheDocument();
5959
expect(screen.getByText(getCardLabels().TAKE_PROFIT)).toBeInTheDocument();
6060
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
61-
expect(screen.getByTestId('dt_arrow_indicator')).toBeInTheDocument();
6261
};
6362

6463
it('should render the correct content for a Cancelled contract with Deal cancel.fee and negative Total profit/loss', () => {
@@ -97,4 +96,16 @@ describe('MultiplierCardBody', () => {
9796
expect(screen.getByText(mock_props.getCardLabels().NOT_AVAILABLE)).toBeInTheDocument();
9897
expect(screen.getByText(progress_slider)).toBeInTheDocument();
9998
});
99+
100+
it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
101+
render(<MultiplierCardBody {...mock_props} />);
102+
103+
expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
104+
});
105+
106+
it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
107+
render(<MultiplierCardBody {...mock_props} is_sold={false} />);
108+
109+
expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
110+
});
100111
});

‎packages/components/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,16 @@ describe('TurbosCardBody', () => {
7979
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
8080
expect(screen.getByText('0.00')).toBeInTheDocument();
8181
});
82+
83+
it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
84+
render(<TurbosCardBody {...mock_props} is_sold />);
85+
86+
expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
87+
});
88+
89+
it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
90+
render(<TurbosCardBody {...mock_props} />);
91+
92+
expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
93+
});
8294
});

‎packages/components/src/components/contract-card/contract-card-items/__tests__/vanilla-options-card-body.spec.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ describe('VanillaOptionsCardBody', () => {
3131
expect(screen.getByText(getCardLabels().STRIKE)).toBeInTheDocument();
3232
expect(screen.getByText('1,200.00')).toBeInTheDocument();
3333
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
34-
expect(screen.getByTestId('dt_arrow_indicator')).toBeInTheDocument();
3534
});
3635

3736
it('should render the correct content for an unsold contract', async () => {
@@ -50,6 +49,17 @@ describe('VanillaOptionsCardBody', () => {
5049
expect(screen.getByText(getCardLabels().PURCHASE_PRICE)).toBeInTheDocument();
5150
expect(screen.getByText(getCardLabels().STRIKE)).toBeInTheDocument();
5251
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
53-
expect(screen.getByTestId('dt_arrow_indicator')).toBeInTheDocument();
52+
});
53+
54+
it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
55+
render(<VanillaOptionsCardBody {...mock_props} />);
56+
57+
expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
58+
});
59+
60+
it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
61+
render(<VanillaOptionsCardBody {...mock_props} is_sold />);
62+
63+
expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
5464
});
5565
});

‎packages/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,12 @@ const AccumulatorCardBody = ({
7272
>
7373
<Money amount={sell_price || indicative} currency={currency} />
7474
</div>
75-
<ArrowIndicator
76-
className='dc-contract-card__indicative--movement'
77-
value={sell_price || indicative}
78-
/>
75+
{!is_sold && (
76+
<ArrowIndicator
77+
className='dc-contract-card__indicative--movement'
78+
value={sell_price || indicative}
79+
/>
80+
)}
7981
</ContractCardItem>
8082
<ContractCardItem
8183
header={TOTAL_PROFIT_LOSS}
@@ -84,7 +86,7 @@ const AccumulatorCardBody = ({
8486
is_won={is_won}
8587
>
8688
<Money amount={profit} currency={currency} />
87-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
89+
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />}
8890
</ContractCardItem>
8991
<ContractCardItem header={TAKE_PROFIT} className='dc-contract-card__take-profit'>
9092
{take_profit ? <Money amount={take_profit} currency={currency} /> : <strong>-</strong>}

‎packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -141,14 +141,18 @@ const ContractCardBody = ({
141141
is_won={Number(profit) > 0}
142142
>
143143
<Money amount={profit} currency={currency} />
144-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
144+
{!is_sold && (
145+
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
146+
)}
145147
</ContractCardItem>
146148
<ContractCardItem header={is_sold ? PAYOUT : INDICATIVE_PRICE}>
147149
<Money currency={currency} amount={Number(sell_price || indicative)} />
148-
<ArrowIndicator
149-
className='dc-contract-card__indicative--movement'
150-
value={Number(sell_price || indicative)}
151-
/>
150+
{!is_sold && (
151+
<ArrowIndicator
152+
className='dc-contract-card__indicative--movement'
153+
value={Number(sell_price || indicative)}
154+
/>
155+
)}
152156
</ContractCardItem>
153157
<ContractCardItem header={PURCHASE_PRICE}>
154158
<Money amount={buy_price} currency={currency} />

‎packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const ContractUpdateForm = (props: TContractUpdateFormProps) => {
9595
contract_update_stop_loss,
9696
});
9797

98-
const { buy_price, currency = '', is_valid_to_cancel } = contract_info;
98+
const { buy_price, currency = '', is_valid_to_cancel, is_sold } = contract_info;
9999
const { stop_loss, take_profit } = getLimitOrderAmount(contract_info.limit_order);
100100
const { contract_update_stop_loss: stop_loss_error, contract_update_take_profit: take_profit_error } =
101101
validation_errors;
@@ -217,7 +217,9 @@ const ContractUpdateForm = (props: TContractUpdateFormProps) => {
217217
)}
218218
>
219219
<Money amount={total_profit} currency={currency} />
220-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />
220+
{!is_sold && (
221+
<ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />
222+
)}
221223
</div>
222224
</div>
223225
</MobileWrapper>

‎packages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const MultiplierCardBody = ({
130130
is_won={total_profit > 0}
131131
>
132132
<Money amount={Math.abs(total_profit)} currency={currency} />
133-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />
133+
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />}
134134
</ContractCardItem>
135135
</React.Fragment>
136136
);

‎packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const TurbosCardBody = ({
106106
is_won={Number(profit) > 0}
107107
>
108108
<Money amount={profit} currency={currency} />
109-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
109+
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />}
110110
</ContractCardItem>
111111
</React.Fragment>
112112
);

‎packages/components/src/components/contract-card/contract-card-items/vanilla-options-card-body.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const VanillaOptionsCardBody: React.FC<TVanillaOptionsCardBodyProps> = ({
5555
is_won={Number(profit) > 0}
5656
>
5757
<Money amount={profit} currency={currency} />
58-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
58+
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />}
5959
</ContractCardItem>
6060
</DesktopWrapper>
6161
<MobileWrapper>
@@ -94,7 +94,9 @@ const VanillaOptionsCardBody: React.FC<TVanillaOptionsCardBodyProps> = ({
9494
is_won={Number(profit) > 0}
9595
>
9696
<Money amount={profit} currency={currency} />
97-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
97+
{!is_sold && (
98+
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
99+
)}
98100
</ContractCardItem>
99101
</div>
100102
</MobileWrapper>

‎packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,4 +273,18 @@ describe('<PositionsModalCard />', () => {
273273
expect(screen.getByText(/Stop loss:/i)).toBeInTheDocument();
274274
expect(screen.getByText(TOTAL_PROFIT_LOSS)).toBeInTheDocument();
275275
});
276+
277+
it('should not render arrow indicator if the contract was sold (is_sold === 1)', () => {
278+
render(
279+
mockPositionsModalCard(mockStore(default_mock_store), {
280+
...default_mock_props,
281+
contract_info: {
282+
...default_mock_props.contract_info,
283+
is_sold: 1,
284+
},
285+
})
286+
);
287+
288+
expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
289+
});
276290
});

‎packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,9 @@ const PositionsModalCard = observer(
184184
})}
185185
>
186186
<Money amount={profit} currency={currency} />
187-
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
187+
{!is_sold && (
188+
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
189+
)}
188190
</div>
189191
</div>
190192
<ContractCard.Footer

0 commit comments

Comments
 (0)