Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Kate/93332/CD: [Change Request] replace contract card fields by new ones #123

Merged
merged 4 commits into from
Apr 17, 2023
Merged

Kate/93332/CD: [Change Request] replace contract card fields by new ones #123

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7aedd33
refactor: change turbos details
kate-deriv Apr 17, 2023
4316bff
feat: add third row to contract card with new values and rewrite tests
kate-deriv Apr 17, 2023
c7019e8
refactor: make total profit loss always visible for turbos card
kate-deriv Apr 17, 2023
aae91d1
chore: rename classname
kate-deriv Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 14 additions & 48 deletions ...ents/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,17 @@ const contract_info: TContractInfo = {
buy_price: 1044.0,
profit: 50,
barrier: '10904.80',
current_spot_display_value: '1046.80',
sell_spot: 1046.8,
entry_spot: 1054,
is_valid_to_sell: 1,
entry_spot_display_value: '1046.80',
sell_price: 1046.8,
};

const mockCardLabels = () => ({
BARRIER: 'Barrier',
CURRENT_PRICE: 'Current price',
STAKE: 'Stake',
BUY_PRICE: 'Buy price',
CONTRACT_VALUE: 'Contract value',
ENTRY_SPOT: 'Entry spot',
TAKE_PROFIT: 'Take profit',
TOTAL_PROFIT_LOSS: 'Total profit/loss',
PAYOUT: 'Payout',
PROFIT_LOSS: 'Profit/Loss',
POTENTIAL_PROFIT_LOSS: 'Potential profit/loss',
PURCHASE_PRICE: 'Buy price',
});

describe('TurbosCardBody', () => {
Expand Down Expand Up @@ -58,18 +53,17 @@ describe('TurbosCardBody', () => {
});
});

// is_sold = false
it('renders stake amount correctly', () => {
it('renders header and values correctly', () => {
render(<TurbosCardBody {...mock_props} />);
const stake_header = screen.getByText(mockCardLabels().STAKE);
expect(stake_header).toBeInTheDocument();
const stake_amount = screen.getByText('1,044.00');
expect(stake_amount).toBeInTheDocument();
const buy_price_header = screen.getByText(mockCardLabels().PURCHASE_PRICE);
expect(buy_price_header).toBeInTheDocument();
const buy_price_amount = screen.getByText('1,044.00');
expect(buy_price_amount).toBeInTheDocument();

const current_price_header = screen.getByText(mockCardLabels().CURRENT_PRICE);
expect(current_price_header).toBeInTheDocument();
const current_price_amount = screen.getByText('1,046.80');
expect(current_price_amount).toBeInTheDocument();
const entry_spot_header = screen.getByText(mockCardLabels().ENTRY_SPOT);
expect(entry_spot_header).toBeInTheDocument();
const entry_spot_amount = screen.getByText('1,046.80');
expect(entry_spot_amount).toBeInTheDocument();

const barrier_header = screen.getByText(mockCardLabels().BARRIER);
expect(barrier_header).toBeInTheDocument();
Expand All @@ -86,32 +80,4 @@ describe('TurbosCardBody', () => {
const total_profit_loss_amount = screen.getByText('50.00');
expect(total_profit_loss_amount).toBeInTheDocument();
});

// is_sold = true
it('renders headers when contract is sold', () => {
render(<TurbosCardBody {...mock_props} is_sold />);

const profit_loss_header = screen.getByText(mockCardLabels().PROFIT_LOSS);
expect(profit_loss_header).toBeInTheDocument();
const profit_loss_amount = screen.getByText('50.00');
expect(profit_loss_amount).toBeInTheDocument();

const payout_header = screen.getByText(mockCardLabels().PAYOUT);
expect(payout_header).toBeInTheDocument();
const payout_amount = screen.getByText('1,046.80');
expect(payout_amount).toBeInTheDocument();

const buy_price_header = screen.getByText(mockCardLabels().BUY_PRICE);
expect(buy_price_header).toBeInTheDocument();
const buy_price_amount = screen.getByText('10,904.80');
expect(buy_price_amount).toBeInTheDocument();

const take_profit_header = screen.queryByText(mockCardLabels().TAKE_PROFIT);
expect(take_profit_header).not.toBeInTheDocument();
const take_profit_amount = screen.queryByText('-');
expect(take_profit_amount).not.toBeInTheDocument();

expect(screen.getByText('Barrier')).toBeInTheDocument();
expect(screen.queryByText('Current price')).not.toBeInTheDocument();
});
});
84 changes: 38 additions & 46 deletions packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,72 +54,64 @@ const TurbosCardBody = ({
status,
}: TTurbosCardBody) => {
const {
bid_price,
buy_price,
profit,
barrier,
current_spot_display_value,
entry_spot_display_value,
limit_order = {},
sell_spot,
entry_spot,
sell_price,
} = contract_info;
const { take_profit } = getLimitOrderAmount(contract_update || limit_order);
const is_valid_to_sell = isValidToSell(contract_info);
const { BARRIER, BUY_PRICE, CURRENT_PRICE, STAKE, TAKE_PROFIT, TOTAL_PROFIT_LOSS, PAYOUT, PROFIT_LOSS } =
getCardLabels();
const contract_value = is_sold ? sell_price : bid_price;
const { BARRIER, CONTRACT_VALUE, ENTRY_SPOT, TAKE_PROFIT, TOTAL_PROFIT_LOSS, PURCHASE_PRICE } = getCardLabels();

return (
<React.Fragment>
<div className={classNames('dc-contract-card-items-wrapper dc-contract-card--turbos')}>
<ContractCardItem
className='dc-contract-card__stake'
header={is_sold ? PROFIT_LOSS : STAKE}
className='dc-contract-card__buy-price'
is_crypto={isCryptocurrency(currency)}
is_loss={is_sold && profit ? profit < 0 : false}
is_won={is_sold && profit ? profit > 0 : false}
header={PURCHASE_PRICE}
>
<Money amount={is_sold ? profit : buy_price} currency={currency} />
<Money amount={buy_price} currency={currency} />
</ContractCardItem>
<ContractCardItem header={is_sold ? PAYOUT : CURRENT_PRICE} className='dc-contract-card__current-price'>
<Money currency={currency} amount={sell_spot || current_spot_display_value} />
<ContractCardItem header={CONTRACT_VALUE} className='dc-contract-card__current-value'>
Copy link
Owner

Choose a reason for hiding this comment

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

Suggested change
<ContractCardItem header={CONTRACT_VALUE} className='dc-contract-card__current-value'>
<ContractCardItem header={CONTRACT_VALUE} className='dc-contract-card__contract-value'>

nit😊

Copy link
Collaborator Author

@kate-deriv kate-deriv Apr 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Done🫡

<Money amount={contract_value} currency={currency} />
</ContractCardItem>
<ContractCardItem
header={is_sold ? BUY_PRICE : BARRIER}
header={ENTRY_SPOT}
is_crypto={isCryptocurrency(currency)}
className='dc-contract-card__buy-price'
className='dc-contract-card__entry-spot'
>
<Money
amount={is_sold ? entry_spot : addComma(barrier)}
currency={currency}
should_format={is_sold}
/>
<Money amount={`${entry_spot_display_value}`} />
</ContractCardItem>
{is_sold ? (
<ContractCardItem header={BARRIER} className='dc-contract-card__barrier-level'>
<Money amount={addComma(barrier)} currency={currency} should_format={false} />

<div className='dc-contract-card__limit-order-info'>
<ContractCardItem header={TAKE_PROFIT} className='dc-contract-card__take-profit'>
{take_profit ? <Money amount={take_profit} currency={currency} /> : <strong>-</strong>}
{is_valid_to_sell && (
<ToggleCardDialog
addToast={addToast}
connectWithContractUpdate={connectWithContractUpdate}
contract_id={contract_info.contract_id}
current_focus={current_focus}
error_message_alignment={error_message_alignment}
getCardLabels={getCardLabels}
getContractById={getContractById}
is_turbos
onMouseLeave={onMouseLeave}
removeToast={removeToast}
setCurrentFocus={setCurrentFocus}
status={status}
/>
)}
</ContractCardItem>
) : (
<div className='dc-contract-card__limit-order-info'>
<ContractCardItem header={TAKE_PROFIT} className='dc-contract-card__take-profit'>
{take_profit ? <Money amount={take_profit} currency={currency} /> : <strong>-</strong>}
{is_valid_to_sell && (
<ToggleCardDialog
addToast={addToast}
connectWithContractUpdate={connectWithContractUpdate}
contract_id={contract_info.contract_id}
current_focus={current_focus}
error_message_alignment={error_message_alignment}
getCardLabels={getCardLabels}
getContractById={getContractById}
is_turbos
onMouseLeave={onMouseLeave}
removeToast={removeToast}
setCurrentFocus={setCurrentFocus}
status={status}
/>
)}
</ContractCardItem>
</div>
)}
</div>
<ContractCardItem header={BARRIER} className='dc-contract-card__barrier-level'>
<Money amount={addComma(barrier)} currency={currency} should_format={false} />
</ContractCardItem>
<MobileWrapper>
<div className='dc-contract-card__status'>
{is_sold ? (
Expand All @@ -130,7 +122,7 @@ const TurbosCardBody = ({
</div>
</MobileWrapper>
</div>
{!is_sold && !!profit && (
{!!profit && (
<ContractCardItem
className='dc-contract-card-item__total-profit-loss'
header={TOTAL_PROFIT_LOSS}
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/components/contract-card/contract-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,23 +302,23 @@
}
&--turbos {
.dc-contract-card {
&__stake {
&__buy-price {
grid-column: 1/1;
grid-row: 1/1;
padding: 0.8rem 0;
padding: 0.8rem 0 0;
}
&__current-price {
&__current-value {
grid-column: 2/2;
grid-row: 1/2;
padding: 0.8rem 0;
padding: 0.8rem 0 0;
}
&__buy-price {
&__entry-spot {
grid-column: 1/2;
grid-row: 2/2;
}
&__barrier-level {
grid-column: 2/2;
grid-row: 2/2;
grid-column: 1/1;
grid-row: 3/3;
}
&__limit-order-info {
grid-row: 2/2;
Expand Down
10 changes: 3 additions & 7 deletions packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,9 @@ const ContractDetails = ({ contract_end_time, contract_info, duration, duration_
const is_profit = profit >= 0;
const cancellation_price = getCancellationPrice(contract_info);
const { number_of_contracts } = extractInfoFromShortcode(shortcode);
const show_barrier =
!is_vanilla &&
!isAccumulatorContract(contract_type) &&
(!isTurbosContract(contract_type) || !isNaN(contract_end_time));
const show_duration =
(!isAccumulatorContract(contract_type) && !isTurbosContract(contract_type)) || !isNaN(contract_end_time);
const show_payout_per_point = (isTurbosContract(contract_type) && !isNaN(contract_end_time)) || is_vanilla;
const show_barrier = !is_vanilla && !isAccumulatorContract(contract_type);
const show_duration = !isAccumulatorContract(contract_type) || !isNaN(contract_end_time);
const show_payout_per_point = isTurbosContract(contract_type) || is_vanilla;
const ticks_duration_text = isAccumulatorContract(contract_type)
? `${tick_passed}/${tick_count} ${localize('ticks')}`
: `${tick_count} ${tick_count < 2 ? localize('tick') : localize('ticks')}`;
Expand Down