Skip to content

Commit

Permalink
[DTRA] / Kate / DTRA-708/ Arrow logic improvements (#12932)
Browse files Browse the repository at this point in the history 
* fix: remove arrow indicator if the contract was sold

* refactor: add test cases
  • Loading branch information
@kate-deriv
kate-deriv authored Jan 23, 2024
1 parent c7eb068 commit ef9fc33
Show file tree
Hide file tree
Showing 12 changed files with 91 additions and 20 deletions.
12 changes: 12 additions & 0 deletions ...src/components/contract-card/contract-card-items/__tests__/accumulator-card-body.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,16 @@ describe('<AccumulatorCardBody />', () => {
expect(screen.getByText('Take profit:')).toBeInTheDocument();
expect(screen.getByText('-')).toBeInTheDocument();
});

it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
render(<AccumulatorCardBody {...mock_props} />);

expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
});

it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
render(<AccumulatorCardBody {...mock_props} is_sold={false} />);

expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
});
});
13 changes: 12 additions & 1 deletion .../src/components/contract-card/contract-card-items/__tests__/multiplier-card-body.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ describe('MultiplierCardBody', () => {
expect(screen.getByText(getCardLabels().STOP_LOSS)).toBeInTheDocument();
expect(screen.getByText(getCardLabels().TAKE_PROFIT)).toBeInTheDocument();
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
expect(screen.getByTestId('dt_arrow_indicator')).toBeInTheDocument();
};

it('should render the correct content for a Cancelled contract with Deal cancel.fee and negative Total profit/loss', () => {
Expand Down Expand Up @@ -97,4 +96,16 @@ describe('MultiplierCardBody', () => {
expect(screen.getByText(mock_props.getCardLabels().NOT_AVAILABLE)).toBeInTheDocument();
expect(screen.getByText(progress_slider)).toBeInTheDocument();
});

it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
render(<MultiplierCardBody {...mock_props} />);

expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
});

it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
render(<MultiplierCardBody {...mock_props} is_sold={false} />);

expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
});
});
12 changes: 12 additions & 0 deletions ...ents/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,16 @@ describe('TurbosCardBody', () => {
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
expect(screen.getByText('0.00')).toBeInTheDocument();
});

it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
render(<TurbosCardBody {...mock_props} is_sold />);

expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
});

it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
render(<TurbosCardBody {...mock_props} />);

expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
});
});
14 changes: 12 additions & 2 deletions ...components/contract-card/contract-card-items/__tests__/vanilla-options-card-body.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ describe('VanillaOptionsCardBody', () => {
expect(screen.getByText(getCardLabels().STRIKE)).toBeInTheDocument();
expect(screen.getByText('1,200.00')).toBeInTheDocument();
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
expect(screen.getByTestId('dt_arrow_indicator')).toBeInTheDocument();
});

it('should render the correct content for an unsold contract', async () => {
Expand All @@ -50,6 +49,17 @@ describe('VanillaOptionsCardBody', () => {
expect(screen.getByText(getCardLabels().PURCHASE_PRICE)).toBeInTheDocument();
expect(screen.getByText(getCardLabels().STRIKE)).toBeInTheDocument();
expect(screen.getByText(getCardLabels().TOTAL_PROFIT_LOSS)).toBeInTheDocument();
expect(screen.getByTestId('dt_arrow_indicator')).toBeInTheDocument();
});

it('should render arrow indicator if the contract is not sold (is_sold === false)', () => {
render(<VanillaOptionsCardBody {...mock_props} />);

expect(screen.getAllByTestId('dt_arrow_indicator')).not.toHaveLength(0);
});

it('should not render arrow indicator if the contract was sold (is_sold === true)', () => {
render(<VanillaOptionsCardBody {...mock_props} is_sold />);

expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
});
});
12 changes: 7 additions & 5 deletions ...ges/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,12 @@ const AccumulatorCardBody = ({
>
<Money amount={sell_price || indicative} currency={currency} />
</div>
<ArrowIndicator
className='dc-contract-card__indicative--movement'
value={sell_price || indicative}
/>
{!is_sold && (
<ArrowIndicator
className='dc-contract-card__indicative--movement'
value={sell_price || indicative}
/>
)}
</ContractCardItem>
<ContractCardItem
header={TOTAL_PROFIT_LOSS}
Expand All @@ -84,7 +86,7 @@ const AccumulatorCardBody = ({
is_won={is_won}
>
<Money amount={profit} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />}
</ContractCardItem>
<ContractCardItem header={TAKE_PROFIT} className='dc-contract-card__take-profit'>
{take_profit ? <Money amount={take_profit} currency={currency} /> : <strong>-</strong>}
Expand Down
14 changes: 9 additions & 5 deletions packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,14 +141,18 @@ const ContractCardBody = ({
is_won={Number(profit) > 0}
>
<Money amount={profit} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
{!is_sold && (
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
)}
</ContractCardItem>
<ContractCardItem header={is_sold ? PAYOUT : INDICATIVE_PRICE}>
<Money currency={currency} amount={Number(sell_price || indicative)} />
<ArrowIndicator
className='dc-contract-card__indicative--movement'
value={Number(sell_price || indicative)}
/>
{!is_sold && (
<ArrowIndicator
className='dc-contract-card__indicative--movement'
value={Number(sell_price || indicative)}
/>
)}
</ContractCardItem>
<ContractCardItem header={PURCHASE_PRICE}>
<Money amount={buy_price} currency={currency} />
Expand Down
6 changes: 4 additions & 2 deletions ...ages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const ContractUpdateForm = (props: TContractUpdateFormProps) => {
contract_update_stop_loss,
});

const { buy_price, currency = '', is_valid_to_cancel } = contract_info;
const { buy_price, currency = '', is_valid_to_cancel, is_sold } = contract_info;
const { stop_loss, take_profit } = getLimitOrderAmount(contract_info.limit_order);
const { contract_update_stop_loss: stop_loss_error, contract_update_take_profit: take_profit_error } =
validation_errors;
Expand Down Expand Up @@ -217,7 +217,9 @@ const ContractUpdateForm = (props: TContractUpdateFormProps) => {
)}
>
<Money amount={total_profit} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />
{!is_sold && (
<ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />
)}
</div>
</div>
</MobileWrapper>
Expand Down
2 changes: 1 addition & 1 deletion ...ages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const MultiplierCardBody = ({
is_won={total_profit > 0}
>
<Money amount={Math.abs(total_profit)} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={total_profit} />}
</ContractCardItem>
</React.Fragment>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const TurbosCardBody = ({
is_won={Number(profit) > 0}
>
<Money amount={profit} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />}
</ContractCardItem>
</React.Fragment>
);
Expand Down
6 changes: 4 additions & 2 deletions ...components/src/components/contract-card/contract-card-items/vanilla-options-card-body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const VanillaOptionsCardBody: React.FC<TVanillaOptionsCardBodyProps> = ({
is_won={Number(profit) > 0}
>
<Money amount={profit} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
{!is_sold && <ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />}
</ContractCardItem>
</DesktopWrapper>
<MobileWrapper>
Expand Down Expand Up @@ -94,7 +94,9 @@ const VanillaOptionsCardBody: React.FC<TVanillaOptionsCardBodyProps> = ({
is_won={Number(profit) > 0}
>
<Money amount={profit} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
{!is_sold && (
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
)}
</ContractCardItem>
</div>
</MobileWrapper>
Expand Down
14 changes: 14 additions & 0 deletions ...rader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,4 +273,18 @@ describe('<PositionsModalCard />', () => {
expect(screen.getByText(/Stop loss:/i)).toBeInTheDocument();
expect(screen.getByText(TOTAL_PROFIT_LOSS)).toBeInTheDocument();
});

it('should not render arrow indicator if the contract was sold (is_sold === 1)', () => {
render(
mockPositionsModalCard(mockStore(default_mock_store), {
...default_mock_props,
contract_info: {
...default_mock_props.contract_info,
is_sold: 1,
},
})
);

expect(screen.queryByTestId('dt_arrow_indicator')).not.toBeInTheDocument();
});
});
4 changes: 3 additions & 1 deletion packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,9 @@ const PositionsModalCard = observer(
})}
>
<Money amount={profit} currency={currency} />
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
{!is_sold && (
<ArrowIndicator className='dc-contract-card__indicative--movement' value={profit} />
)}
</div>
</div>
<ContractCard.Footer
Expand Down

1 comment on commit ef9fc33

@vercel
Copy link

@vercel vercel bot commented on ef9fc33 Jan 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

deriv-app – ./

deriv-app.vercel.app
binary.sx
deriv-app.binary.sx
deriv-app-git-master.binary.sx

Please sign in to comment.