From ef9fc33e173fa440aecf09fb973be823ebf9bdf5 Mon Sep 17 00:00:00 2001
From: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Date: Tue, 23 Jan 2024 07:09:43 +0300
Subject: [PATCH] [DTRA] / Kate / DTRA-708/ Arrow logic improvements (#12932)

* fix: remove arrow indicator if the contract was sold

* refactor: add test cases
---
 .../__tests__/accumulator-card-body.spec.tsx       | 12 ++++++++++++
 .../__tests__/multiplier-card-body.spec.tsx        | 13 ++++++++++++-
 .../__tests__/turbos-card-body.spec.tsx            | 12 ++++++++++++
 .../__tests__/vanilla-options-card-body.spec.tsx   | 14 ++++++++++++--
 .../contract-card-items/accumulator-card-body.tsx  | 12 +++++++-----
 .../contract-card-items/contract-card-body.tsx     | 14 +++++++++-----
 .../contract-card-items/contract-update-form.tsx   |  6 ++++--
 .../contract-card-items/multiplier-card-body.jsx   |  2 +-
 .../contract-card-items/turbos-card-body.tsx       |  2 +-
 .../vanilla-options-card-body.tsx                  |  6 ++++--
 .../__tests__/positions-modal-card.spec.tsx        | 14 ++++++++++++++
 .../PositionsDrawer/positions-modal-card.tsx       |  4 +++-
 12 files changed, 91 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/contract-card/contract-card-items/__tests__/accumulator-card-body.spec.tsx b/packages/components/src/components/contract-card/contract-card-items/__tests__/accumulator-card-body.spec.tsx
index 62b289589694..1970f9907e35 100644
--- a/packages/components/src/components/contract-card/contract-card-items/__tests__/accumulator-card-body.spec.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/__tests__/accumulator-card-body.spec.tsx
@@ -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);
+    });
 });
diff --git a/packages/components/src/components/contract-card/contract-card-items/__tests__/multiplier-card-body.spec.tsx b/packages/components/src/components/contract-card/contract-card-items/__tests__/multiplier-card-body.spec.tsx
index 3b2d3145b117..1f6af4dbb435 100644
--- a/packages/components/src/components/contract-card/contract-card-items/__tests__/multiplier-card-body.spec.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/__tests__/multiplier-card-body.spec.tsx
@@ -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', () => {
@@ -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);
+    });
 });
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 4c1f50a23d41..deaabcfe6d62 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
@@ -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);
+    });
 });
diff --git a/packages/components/src/components/contract-card/contract-card-items/__tests__/vanilla-options-card-body.spec.tsx b/packages/components/src/components/contract-card/contract-card-items/__tests__/vanilla-options-card-body.spec.tsx
index 536f1ea29c2a..b1e98879baf4 100644
--- a/packages/components/src/components/contract-card/contract-card-items/__tests__/vanilla-options-card-body.spec.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/__tests__/vanilla-options-card-body.spec.tsx
@@ -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 () => {
@@ -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();
     });
 });
diff --git a/packages/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx
index 45dc88d1a2f7..ba6f501405f5 100644
--- a/packages/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx
@@ -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}
@@ -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>}
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
index 3050df6817ed..9bb165ef1584 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
@@ -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} />
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
index 1945ff2dd328..16a3cd42da4f 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
@@ -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;
@@ -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>
diff --git a/packages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx b/packages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx
index 04fc482b0fd5..24cb60c5a3d7 100644
--- a/packages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx
@@ -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>
     );
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 78787c090a2d..b0d10b9db39d 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
@@ -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>
     );
diff --git a/packages/components/src/components/contract-card/contract-card-items/vanilla-options-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/vanilla-options-card-body.tsx
index f2ab2105356c..3d3c780f9a24 100644
--- a/packages/components/src/components/contract-card/contract-card-items/vanilla-options-card-body.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/vanilla-options-card-body.tsx
@@ -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>
@@ -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>
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx
index 607ac21ef254..f0e60f1f5988 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx
@@ -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();
+    });
 });
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
index fc82d0a724a1..e85bf50202df 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
@@ -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