[DTRA] / Kate / DTRA-708/ Arrow logic improvements (deriv-com#12932)

* fix: remove arrow indicator if the contract was sold * refactor: add test cases
niloofar-deriv · Jan 23, 2024 · ef9fc33 · ef9fc33
1 parent c7eb068
commit ef9fc33
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 20 deletions.
diff --git a/...src/components/contract-card/contract-card-items/__tests__/accumulator-card-body.spec.tsx b/...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/.../src/components/contract-card/contract-card-items/__tests__/multiplier-card-body.spec.tsx b/.../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/...ents/src/components/contract-card/contract-card-items/__tests__/turbos-card-body.spec.tsx b/...ents/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/...components/contract-card/contract-card-items/__tests__/vanilla-options-card-body.spec.tsx b/...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/...ges/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx b/...ges/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
@@ -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/...ages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx b/...ages/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/...ages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx b/...ages/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
@@ -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/...components/src/components/contract-card/contract-card-items/vanilla-options-card-body.tsx b/...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/...rader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-modal-card.spec.tsx b/...rader/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
@@ -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