From 7aedd33f6463a72dac7124f30d7fb9265fcad689 Mon Sep 17 00:00:00 2001
From: kate-deriv <kate@regentmarkets.com>
Date: Mon, 17 Apr 2023 14:07:24 +0300
Subject: [PATCH 1/4] refactor: change turbos details

---
 .../Elements/ContractAudit/contract-details.jsx        | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
index 0ba5e123b653..c40bdd11eb7f 100644
--- a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
@@ -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')}`;

From 4316bff3c62e9555361a3e96d059ea713fcdf8fa Mon Sep 17 00:00:00 2001
From: kate-deriv <kate@regentmarkets.com>
Date: Mon, 17 Apr 2023 15:21:15 +0300
Subject: [PATCH 2/4] feat: add third row to contract card with new values and
 rewrite tests

---
 .../__tests__/turbos-card-body.spec.tsx       | 62 ++++----------
 .../contract-card-items/turbos-card-body.tsx  | 82 +++++++++----------
 .../contract-card/contract-card.scss          | 14 ++--
 3 files changed, 58 insertions(+), 100 deletions(-)

diff --git a/packages/components/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx b/packages/components/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx
index 151b8c14bc43..3f4a2f4b0680 100644
--- a/packages/components/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx
@@ -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', () => {
@@ -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();
@@ -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();
-    });
 });
diff --git a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
index e265ded3a985..17f495306261 100644
--- a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
@@ -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'>
+                    <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 ? (
diff --git a/packages/components/src/components/contract-card/contract-card.scss b/packages/components/src/components/contract-card/contract-card.scss
index cb1503d127e6..3f6f9254cae9 100644
--- a/packages/components/src/components/contract-card/contract-card.scss
+++ b/packages/components/src/components/contract-card/contract-card.scss
@@ -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;

From c7019e8c327caab08152535b6ffa47d3cf0b8139 Mon Sep 17 00:00:00 2001
From: kate-deriv <kate@regentmarkets.com>
Date: Mon, 17 Apr 2023 15:59:58 +0300
Subject: [PATCH 3/4] refactor: make total profit loss always visible for
 turbos card

---
 .../contract-card/contract-card-items/turbos-card-body.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
index 17f495306261..cc51f306ab3c 100644
--- a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
@@ -122,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}

From aae91d1d72ef655d69795ca3b146fca28f8bab51 Mon Sep 17 00:00:00 2001
From: kate-deriv <kate@regentmarkets.com>
Date: Mon, 17 Apr 2023 16:39:22 +0300
Subject: [PATCH 4/4] chore: rename classname

---
 .../contract-card/contract-card-items/turbos-card-body.tsx      | 2 +-
 .../components/src/components/contract-card/contract-card.scss  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
index cc51f306ab3c..aca9f631462a 100644
--- a/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/turbos-card-body.tsx
@@ -77,7 +77,7 @@ const TurbosCardBody = ({
                 >
                     <Money amount={buy_price} currency={currency} />
                 </ContractCardItem>
-                <ContractCardItem header={CONTRACT_VALUE} className='dc-contract-card__current-value'>
+                <ContractCardItem header={CONTRACT_VALUE} className='dc-contract-card__contract-value'>
                     <Money amount={contract_value} currency={currency} />
                 </ContractCardItem>
                 <ContractCardItem
diff --git a/packages/components/src/components/contract-card/contract-card.scss b/packages/components/src/components/contract-card/contract-card.scss
index 3f6f9254cae9..608209ec743b 100644
--- a/packages/components/src/components/contract-card/contract-card.scss
+++ b/packages/components/src/components/contract-card/contract-card.scss
@@ -307,7 +307,7 @@
                 grid-row: 1/1;
                 padding: 0.8rem 0 0;
             }
-            &__current-value {
+            &__contract-value {
                 grid-column: 2/2;
                 grid-row: 1/2;
                 padding: 0.8rem 0 0;