From a6cd500631298a787c87115d49ccaef4459d571a Mon Sep 17 00:00:00 2001 From: kate-deriv <121025168+kate-deriv@users.noreply.github.com> Date: Fri, 15 Sep 2023 09:12:32 +0300 Subject: [PATCH] Kate / DTRA-404 / [Refactoring]: Divide trade-categories.tsx file and cover changes with tests (#35) * refactor: add rise fall description * refactor: separate stay end high contract description * refactor: separate description of digits contracts * refactor: separate asian reset runhighlow touch contracts * refactor: separate callputspread lb tickhighlow and vanilla contracts * refactor: separate multipliers contract * refactor: add unit tests for contract descriptions * refactor: add more tests * refactor: add tests for touch ans vanilla contracts * refactor: tests for trade categories * refactor: contract description structure * refactor: apply suggestions * refactor: add missing test case --- .../asian-trade-description.spec.tsx | 11 + ...call-put-spread-trade-description.spec.tsx | 11 + .../__tests__/end-trade-description.spec.tsx | 11 + .../even-odd-trade-description.spec.tsx | 11 + .../high-low-trade-description.spec.tsx | 11 + .../lb-call-trade-description.spec.tsx | 11 + .../lb-high-low-trade-description.spec.tsx | 11 + .../lb-put-trade-description.spec.tsx | 11 + .../match-diff-trade-descriptioon.spec.tsx | 11 + .../multiplier-trade-description.spec.tsx | 11 + .../over-under-trade-description.spec.tsx | 11 + .../reset-trade-description.spec.tsx | 11 + .../rise-fall-trade-description.spec.tsx | 11 + .../run-high-low-trade-description.spec.tsx | 11 + .../__tests__/stay-trade-description.spec.tsx | 11 + .../tick-high-low-trade-description.spec.tsx | 11 + .../touch-trade-description.spec.tsx | 11 + .../turbos-trade-description.spec.tsx | 3 +- .../vanilla-trade-description.spec.tsx | 25 + .../accumulator-trade-description.tsx | 39 ++ .../Description/asian-trade-description.tsx | 35 ++ .../call-put-spread-trade-description.tsx | 76 +++ .../Description/end-trade-description.tsx | 31 ++ .../even-odd-trade-description.tsx | 27 + .../high-low-trade-description.tsx | 28 + .../Description/lb-call-trade-description.tsx | 35 ++ .../lb-high-low-trade-description.tsx | 35 ++ .../Description/lb-put-trade-desciption.tsx | 35 ++ .../match-diff-trade-description.tsx | 27 + .../multiplier-trade-description.tsx | 113 ++++ .../over-under-trade-description.tsx | 27 + .../Description/reset-trade-description.tsx | 31 ++ .../rise-fall-trade-description.tsx | 31 ++ .../run-high-low-trade-description.tsx | 27 + .../Description/stay-trade-description.tsx | 27 + .../tick-high-low-trade-description.tsx | 27 + .../Description/touch-trade-description.tsx | 27 + .../turbos-trade-description.tsx | 32 +- .../Description/vanilla-trade-description.tsx | 46 ++ .../__tests__/trade-categories.spec.tsx | 207 +++----- .../accumulator-trade-description.tsx | 40 -- .../Trading/Categories/trade-categories.tsx | 492 ++---------------- 42 files changed, 1090 insertions(+), 620 deletions(-) create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/asian-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/call-put-spread-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/end-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/even-odd-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/high-low-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-call-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-high-low-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-put-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/match-diff-trade-descriptioon.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/multiplier-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/over-under-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/reset-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/rise-fall-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/run-high-low-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/stay-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/tick-high-low-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/touch-trade-description.spec.tsx rename packages/trader/src/Assets/Trading/Categories/{ => Description}/__tests__/turbos-trade-description.spec.tsx (86%) create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/__tests__/vanilla-trade-description.spec.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/asian-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/call-put-spread-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/end-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/even-odd-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/high-low-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/lb-call-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/lb-high-low-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/lb-put-trade-desciption.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/match-diff-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/over-under-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/reset-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/rise-fall-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/run-high-low-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/stay-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/tick-high-low-trade-description.tsx create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/touch-trade-description.tsx rename packages/trader/src/Assets/Trading/Categories/{ => Description}/turbos-trade-description.tsx (66%) create mode 100644 packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx delete mode 100644 packages/trader/src/Assets/Trading/Categories/accumulator-trade-description.tsx diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/asian-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/asian-trade-description.spec.tsx new file mode 100644 index 000000000000..d3c001ac0e8f --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/asian-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import AsianTradeDescription from '../asian-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/Asian options settle by comparing/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/call-put-spread-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/call-put-spread-trade-description.spec.tsx new file mode 100644 index 000000000000..115d64d830e0 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/call-put-spread-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import CallPutSpreadTradeDescription from '../call-put-spread-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/Win maximum payout if the exit spot is higher/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/end-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/end-trade-description.spec.tsx new file mode 100644 index 000000000000..c104601c8f0a --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/end-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import EndTradeDescription from '../end-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Ends Between", you win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/even-odd-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/even-odd-trade-description.spec.tsx new file mode 100644 index 000000000000..173c95fd0e13 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/even-odd-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import EvenOddTradeDescription from '../even-odd-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Even", you will win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/high-low-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/high-low-trade-description.spec.tsx new file mode 100644 index 000000000000..318e17052042 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/high-low-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import HighLowTradeDescription from '../high-low-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Higher", you win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-call-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-call-trade-description.spec.tsx new file mode 100644 index 000000000000..6ec7fee31e9b --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-call-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import LbCallTradeDescription from '../lb-call-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/By purchasing the "Close-to-Low" contract/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-high-low-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-high-low-trade-description.spec.tsx new file mode 100644 index 000000000000..567564c6d342 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-high-low-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import LbHighLowTradeDescription from '../lb-high-low-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/By purchasing the "High-to-Low" contract, you/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-put-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-put-trade-description.spec.tsx new file mode 100644 index 000000000000..11916862a667 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-put-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import LbPutTradeDescription from '../lb-put-trade-desciption'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/By purchasing the "High-to-Close" contract/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/match-diff-trade-descriptioon.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/match-diff-trade-descriptioon.spec.tsx new file mode 100644 index 000000000000..77d2d30edb35 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/match-diff-trade-descriptioon.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import MatchDiffTradeDescription from '../match-diff-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Matches", you will win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/multiplier-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/multiplier-trade-description.spec.tsx new file mode 100644 index 000000000000..c7d70400e387 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/multiplier-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import MultiplierTradeDescription from '../multiplier-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/Predict the market direction and select either “Up” or “Down”/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/over-under-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/over-under-trade-description.spec.tsx new file mode 100644 index 000000000000..18946af8dee6 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/over-under-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import OverUnderTradeDescription from '../over-under-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Over", you will win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/reset-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/reset-trade-description.spec.tsx new file mode 100644 index 000000000000..a25e4ba3878b --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/reset-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import ResetTradeDescription from '../reset-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Reset-Up”, you win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/rise-fall-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/rise-fall-trade-description.spec.tsx new file mode 100644 index 000000000000..e1dcb15c49b5 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/rise-fall-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import RiseFallTradeDescription from '../rise-fall-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Rise", you win the payout if the exit/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/run-high-low-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/run-high-low-trade-description.spec.tsx new file mode 100644 index 000000000000..56b3303cc89a --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/run-high-low-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import RunHighLowTradeDescription from '../run-high-low-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Only Ups", you win the payout if consecutive/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/stay-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/stay-trade-description.spec.tsx new file mode 100644 index 000000000000..0aa99cfc1252 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/stay-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import StayTradeDescription from '../stay-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Stays Between", you win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/tick-high-low-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/tick-high-low-trade-description.spec.tsx new file mode 100644 index 000000000000..fcba0774b535 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/tick-high-low-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import TickHighLowTradeDescription from '../tick-high-low-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "High Tick", you win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/touch-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/touch-trade-description.spec.tsx new file mode 100644 index 000000000000..6fd49ca7b520 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/touch-trade-description.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import TouchTradeDescription from '../touch-trade-description'; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/If you select "Touch", you win the payout/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/__tests__/turbos-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/turbos-trade-description.spec.tsx similarity index 86% rename from packages/trader/src/Assets/Trading/Categories/__tests__/turbos-trade-description.spec.tsx rename to packages/trader/src/Assets/Trading/Categories/Description/__tests__/turbos-trade-description.spec.tsx index 4990d596887a..351e171a6032 100644 --- a/packages/trader/src/Assets/Trading/Categories/__tests__/turbos-trade-description.spec.tsx +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/turbos-trade-description.spec.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import { TurbosTradeDescription } from '../turbos-trade-description'; +import TurbosTradeDescription from '../turbos-trade-description'; describe('', () => { it('a proper text of description should be rendered', () => { render(); + expect( screen.getByText( /This product allows you to express a strong bullish or bearish view on an underlying asset/i diff --git a/packages/trader/src/Assets/Trading/Categories/Description/__tests__/vanilla-trade-description.spec.tsx b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/vanilla-trade-description.spec.tsx new file mode 100644 index 000000000000..32cf777b8fb5 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/__tests__/vanilla-trade-description.spec.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import VanillaTradeDescription from '../vanilla-trade-description'; + +const mocked_props = { + onClick: jest.fn(), +}; + +describe('', () => { + it('a proper text of description should be rendered', () => { + render(); + + expect(screen.getByText(/Vanilla options allow you to predict/i)).toBeInTheDocument(); + }); + + it('should call a function if word from vocabulary was clicked', () => { + render(); + + const vocabulary_word = screen.getByText(/payout per point/i); + userEvent.click(vocabulary_word); + + expect(mocked_props.onClick).toBeCalled(); + }); +}); diff --git a/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx new file mode 100644 index 000000000000..7f2ccf202575 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const AccumulatorTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler }) => { + const content = [ + ]} + key='1' + />, + ]} + key='2' + />, + ]} + key='3' + />, + ]} + key='4' + />, + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default AccumulatorTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/asian-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/asian-trade-description.tsx new file mode 100644 index 000000000000..d53181b60ec9 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/asian-trade-description.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const AsianTradeDescription = () => { + const content = [ + , + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default AsianTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/call-put-spread-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/call-put-spread-trade-description.tsx new file mode 100644 index 000000000000..94e654e92e87 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/call-put-spread-trade-description.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const CallPutSpreadTradeDescription = () => { + const content = [ + { type: 'heading', text: }, + { + type: 'paragraph', + text: ( + + ), + }, + { + type: 'paragraph', + text: ( + + ), + }, + { + type: 'paragraph', + text: ( + + ), + }, + { type: 'heading', text: }, + { + type: 'paragraph', + text: ( + + ), + }, + { + type: 'paragraph', + text: ( + + ), + }, + { + type: 'paragraph', + text: ( + + ), + }, + ]; + + return ( + + {content.map(({ type, text }) => + type === 'heading' ? ( + + {text} + + ) : ( + + {text} + + ) + )} + + ); +}; + +export default CallPutSpreadTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/end-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/end-trade-description.tsx new file mode 100644 index 000000000000..f7926dae7320 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/end-trade-description.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const EndTradeDescription = () => { + const content = [ + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default EndTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/even-odd-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/even-odd-trade-description.tsx new file mode 100644 index 000000000000..e9668bb7e1d2 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/even-odd-trade-description.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const EvenOddTradeDescription = () => { + const content = [ + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default EvenOddTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/high-low-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/high-low-trade-description.tsx new file mode 100644 index 000000000000..554701434e98 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/high-low-trade-description.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const HighLowTradeDescription = () => { + const content = [ + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default HighLowTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/lb-call-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/lb-call-trade-description.tsx new file mode 100644 index 000000000000..e52c6d1b60ab --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/lb-call-trade-description.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const LbCallTradeDescription = () => { + const content = [ + , + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default LbCallTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/lb-high-low-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/lb-high-low-trade-description.tsx new file mode 100644 index 000000000000..c8a9152d2686 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/lb-high-low-trade-description.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const LbHighLowTradeDescription = () => { + const content = [ + , + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default LbHighLowTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/lb-put-trade-desciption.tsx b/packages/trader/src/Assets/Trading/Categories/Description/lb-put-trade-desciption.tsx new file mode 100644 index 000000000000..7c101a44efc8 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/lb-put-trade-desciption.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const LbPutTradeDescription = () => { + const content = [ + , + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default LbPutTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/match-diff-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/match-diff-trade-description.tsx new file mode 100644 index 000000000000..e304b255e92d --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/match-diff-trade-description.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const MatchDiffTradeDescription = () => { + const content = [ + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default MatchDiffTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx new file mode 100644 index 000000000000..ebe0a1f978be --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/multiplier-trade-description.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const MultiplierTradeDescription = () => { + const about_section = [ + , + , + , + , + , + , + ]; + const multipliers_params_section = [ + { + type: 'list_item', + text: ( + + ), + }, + { + type: 'list_item', + text: ( + + ), + }, + { + type: 'list_item', + text: ( + + ), + }, + { type: 'paragraph', text: }, + ]; + const deal_cancellation_section = [ + , + , + ]; + const closing_section = [ + , + , + ]; + + return ( + + {about_section.map(paragraph => ( + + {paragraph} + + ))} +
    + {multipliers_params_section.map(({ type, text }) => + type === 'list_item' ? ( + + {text} + + ) : ( + + {text} + + ) + )} +
      + {deal_cancellation_section.map(paragraph => ( + + {paragraph} + + ))} +
    +
+ {closing_section.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default MultiplierTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/over-under-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/over-under-trade-description.tsx new file mode 100644 index 000000000000..53e47c97b6ce --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/over-under-trade-description.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const OverUnderTradeDescription = () => { + const content = [ + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default OverUnderTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/reset-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/reset-trade-description.tsx new file mode 100644 index 000000000000..bfb06d664c65 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/reset-trade-description.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const ResetTradeDescription = () => { + const content = [ + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default ResetTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/rise-fall-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/rise-fall-trade-description.tsx new file mode 100644 index 000000000000..35cc54e6441d --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/rise-fall-trade-description.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const RiseFallTradeDescription = () => { + const content = [ + , + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default RiseFallTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/run-high-low-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/run-high-low-trade-description.tsx new file mode 100644 index 000000000000..e959574be3f2 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/run-high-low-trade-description.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const RunHighLowTradeDescription = () => { + const content = [ + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default RunHighLowTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/stay-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/stay-trade-description.tsx new file mode 100644 index 000000000000..cd3267542a47 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/stay-trade-description.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const StayTradeDescription = () => { + const content = [ + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default StayTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/tick-high-low-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/tick-high-low-trade-description.tsx new file mode 100644 index 000000000000..0e79a6642484 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/tick-high-low-trade-description.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const TickHighLowTradeDescription = () => { + const content = [ + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default TickHighLowTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/touch-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/touch-trade-description.tsx new file mode 100644 index 000000000000..72123f56a308 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/touch-trade-description.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const TouchTradeDescription = () => { + const content = [ + , + , + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default TouchTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/turbos-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx similarity index 66% rename from packages/trader/src/Assets/Trading/Categories/turbos-trade-description.tsx rename to packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx index 1bdbfb853b08..d1eab3410a04 100644 --- a/packages/trader/src/Assets/Trading/Categories/turbos-trade-description.tsx +++ b/packages/trader/src/Assets/Trading/Categories/Description/turbos-trade-description.tsx @@ -1,50 +1,60 @@ import React from 'react'; -import { Localize, localize } from '@deriv/translations'; +import { Localize } from '@deriv/translations'; import { Text } from '@deriv/components'; -export const TurbosTradeDescription = () => { +const TurbosTradeDescription = () => { const content = [ { type: 'paragraph', - text: localize( - 'This product allows you to express a strong bullish or bearish view on an underlying asset.' + text: ( + ), }, - { type: 'heading', text: localize('For Long:') }, + { type: 'heading', text: }, { type: 'paragraph', text: ( ]} + key='3' /> ), }, - { type: 'heading', text: localize('For Short:') }, + { type: 'heading', text: }, { type: 'paragraph', text: ( ]} + key='5' /> ), }, { type: 'paragraph', - text: localize('You can determine the expiry of your contract by setting the duration or end time.'), + text: ( + + ), }, ]; return ( - {content.map(({ type, text }, index) => + {content.map(({ type, text }) => type === 'heading' ? ( - + {text} ) : ( - + {text} ) @@ -52,3 +62,5 @@ export const TurbosTradeDescription = () => { ); }; + +export default TurbosTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx new file mode 100644 index 000000000000..e2ce1ad68818 --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/Description/vanilla-trade-description.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { Localize } from '@deriv/translations'; +import { Text } from '@deriv/components'; + +const VanillaTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler }) => { + const content = [ + , + , + , + ]} + key='2' + />, + ]} + key='3' + />, + ]} + key='4' + />, + ]} + key='5' + />, + ]; + return ( + + {content.map(paragraph => ( + + {paragraph} + + ))} + + ); +}; + +export default VanillaTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/__tests__/trade-categories.spec.tsx b/packages/trader/src/Assets/Trading/Categories/__tests__/trade-categories.spec.tsx index f5e0b5dc4432..e5e88d50d671 100644 --- a/packages/trader/src/Assets/Trading/Categories/__tests__/trade-categories.spec.tsx +++ b/packages/trader/src/Assets/Trading/Categories/__tests__/trade-categories.spec.tsx @@ -2,158 +2,109 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import TradeCategories from '../trade-categories'; -jest.mock('../accumulator-trade-description', () => jest.fn(() => 'mockedAccumulatorTradeDescription')); +jest.mock('../Description/accumulator-trade-description', () => jest.fn(() => 'mockedAccumulatorTradeDescription')); +jest.mock('../Description/asian-trade-description', () => jest.fn(() => 'mockedAsianTradeDescription')); +jest.mock('../Description/call-put-spread-trade-description', () => + jest.fn(() => 'mockedCallPutSpreadTradeDescription') +); +jest.mock('../Description/end-trade-description', () => jest.fn(() => 'mockedEndTradeDescription')); +jest.mock('../Description/even-odd-trade-description', () => jest.fn(() => 'mockedEvenOddTradeDescription')); +jest.mock('../Description/high-low-trade-description', () => jest.fn(() => 'mockedHighLowTradeDescription')); +jest.mock('../Description/lb-call-trade-description', () => jest.fn(() => 'mockedLbCallTradeDescription')); +jest.mock('../Description/lb-high-low-trade-description', () => jest.fn(() => 'mockedLbHighLowTradeDescription')); +jest.mock('../Description/lb-put-trade-desciption', () => jest.fn(() => 'mockedLbPutTradeDescription')); +jest.mock('../Description/match-diff-trade-description', () => jest.fn(() => 'mockedMatchDiffTradeDescription')); +jest.mock('../Description/multiplier-trade-description', () => jest.fn(() => 'mockedMultiplierTradeDescription')); +jest.mock('../Description/over-under-trade-description', () => jest.fn(() => 'mockedOverUnderTradeDescription')); +jest.mock('../Description/reset-trade-description', () => jest.fn(() => 'mockedResetTradeDescription')); +jest.mock('../Description/rise-fall-trade-description', () => jest.fn(() => 'mockedRiseFallTradeDescription')); +jest.mock('../Description/run-high-low-trade-description', () => jest.fn(() => 'mockedRunHighLowTradeDescription')); +jest.mock('../Description/stay-trade-description', () => jest.fn(() => 'mockedStayTradeDescription')); +jest.mock('../Description/tick-high-low-trade-description', () => jest.fn(() => 'mockedTickHighLowTradeDescription')); +jest.mock('../Description/touch-trade-description', () => jest.fn(() => 'mockedTouchTradeDescription')); +jest.mock('../Description/turbos-trade-description', () => jest.fn(() => 'mockedTurbosTradeDescription')); +jest.mock('../Description/vanilla-trade-description', () => jest.fn(() => 'mockedVanillaTradeDescription')); describe('', () => { - it('Ensure mockedAccumulatorTradeDescription is rendered correctly when trade category is "accumulator"', () => { + it('Ensure AccumulatorTradeDescription is rendered correctly when trade category is "accumulator"', () => { render(); expect(screen.getByText(/mockedaccumulatortradedescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "rise_fall" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Rise", you win the payout if the exit spot is strictly higher than the entry spot./i - ) - ).toBeInTheDocument(); - }); - it('Ensure trade category "rise_fall_equal" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Allow equals", you win the payout if exit spot is higher than or equal to entry spot for "Rise". Similarly, you win the payout if exit spot is lower than or equal to entry spot for "Fall"./i - ) - ).toBeInTheDocument(); - }); - it('Ensure trade category "high_low" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Higher", you win the payout if the exit spot is strictly higher than the barrier./i - ) - ).toBeInTheDocument(); + it('Ensure mockedAsianTradeDescription is rendered correctly when trade category is "asian"', () => { + render(); + expect(screen.getByText(/mockedAsianTradeDescription/i)).toBeInTheDocument(); + }); + it('Ensure mockedCallPutSpreadTradeDescription is rendered correctly when trade category is "callputspread"', () => { + render(); + expect(screen.getByText(/mockedCallPutSpreadTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "end" description is rendered properly', () => { + it('Ensure mockedEndTradeDescription is rendered correctly when trade category is "end"', () => { render(); - expect( - screen.getByText( - /If you select "Ends Between", you win the payout if the exit spot is strictly higher than the Low barrier AND strictly lower than the High barrier./i - ) - ).toBeInTheDocument(); + expect(screen.getByText(/mockedEndTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "stay" description is rendered properly', () => { - render(); - expect( - screen.getByText(/If you select "Stays Between", you win the payout if the market stays between/i) - ).toBeInTheDocument(); + it('Ensure mockedEvenOddTradeDescription is rendered correctly when trade category is "even_odd"', () => { + render(); + expect(screen.getByText(/mockedEvenOddTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "match_diff" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Matches", you will win the payout if the last digit of the last tick is the same as your prediction./i - ) - ).toBeInTheDocument(); + it('Ensure mockedHighLowTradeDescription is rendered correctly when trade category is "high_low"', () => { + render(); + expect(screen.getByText(/mockedHighLowTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "even_odd" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Even", you will win the payout if the last digit of the last tick is an even number/i - ) - ).toBeInTheDocument(); + it('Ensure mockedLbCallTradeDescription is rendered correctly when trade category is "lb_call"', () => { + render(); + expect(screen.getByText(/mockedLbCallTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "over_under" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Over", you will win the payout if the last digit of the last tick is greater than your prediction./i - ) - ).toBeInTheDocument(); + it('Ensure mockedLbHighLowTradeDescription is rendered correctly when trade category is "lb_high_low"', () => { + render(); + expect(screen.getByText(/mockedLbHighLowTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "touch" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Touch", you win the payout if the market touches the barrier at any time during the contract period./i - ) - ).toBeInTheDocument(); + it('Ensure mockedLbPutTradeDescription is rendered correctly when trade category is "lb_put"', () => { + render(); + expect(screen.getByText(/mockedLbPutTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "asian" description is rendered properly', () => { - render(); - expect( - screen.getByText(/Asian options settle by comparing the last tick with the average spot over the period./i) - ).toBeInTheDocument(); + it('Ensure mockedMatchDiffTradeDescription is rendered correctly when trade category is "match_diff"', () => { + render(); + expect(screen.getByText(/mockedMatchDiffTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "run_high_low" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "Only Ups", you win the payout if consecutive ticks rise successively after the entry spot. No payout if any tick falls or is equal to any of the previous ticks./i - ) - ).toBeInTheDocument(); + it('Ensure mockedMultiplierTradeDescription is rendered correctly when trade category is "multiplier"', () => { + render(); + expect(screen.getByText(/mockedMultiplierTradeDescription/i)).toBeInTheDocument(); + }); + it('Ensure mockedOverUnderTradeDescription is rendered correctly when trade category is "over_under"', () => { + render(); + expect(screen.getByText(/mockedOverUnderTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "reset" description is rendered properly', () => { + it('Ensure mockedResetTradeDescription is rendered correctly when trade category is "reset"', () => { render(); - expect( - screen.getByText( - /If you select "Reset-Up”, you win the payout if the exit spot is strictly higher than either the entry spot or the spot at reset time./i - ) - ).toBeInTheDocument(); + expect(screen.getByText(/mockedResetTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "callputspread" description is rendered properly', () => { - render(); - expect( - screen.getByText(/Win maximum payout if the exit spot is higher than or equal to the upper barrier./i) - ).toBeInTheDocument(); + it('Ensure mockedRiseFallTradeDescription is rendered correctly when trade category is "rise_fall"', () => { + render(); + expect(screen.getByText(/mockedRiseFallTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "tick_high_low" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /If you select "High Tick", you win the payout if the selected tick is the highest among the next five ticks./i - ) - ).toBeInTheDocument(); + it('Ensure mockedRunHighLowTradeDescription is rendered correctly when trade category is "run_high_low"', () => { + render(); + expect(screen.getByText(/mockedRunHighLowTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "lb_high_low" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /By purchasing the "High-to-Low" contract, you'll win the multiplier times the difference between the high and low over the duration of the contract./i - ) - ).toBeInTheDocument(); + it('Ensure mockedStayTradeDescription is rendered correctly when trade category is "stay"', () => { + render(); + expect(screen.getByText(/mockedStayTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "lb_put" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /By purchasing the "High-to-Close" contract, you'll win the multiplier times the difference between the high and close over the duration of the contract./i - ) - ).toBeInTheDocument(); + it('Ensure mockedTickHighLowTradeDescription is rendered correctly when trade category is "tick_high_low"', () => { + render(); + expect(screen.getByText(/mockedTickHighLowTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "lb_call" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /By purchasing the "Close-to-Low" contract, you'll win the multiplier times the difference between the close and low over the duration of the contract./i - ) - ).toBeInTheDocument(); + it('Ensure mockedTouchTradeDescription is rendered correctly when trade category is "touch"', () => { + render(); + expect(screen.getByText(/mockedTouchTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "multiplier" description is rendered properly', () => { - render(); - expect( - screen.getByText( - /Predict the market direction and select either “Up” or “Down” to open a position. We will charge a commission when you open a position./i - ) - ).toBeInTheDocument(); + it('Ensure mockedTurbosTradeDescription is rendered correctly when trade category is "turbosshort"', () => { + render(); + expect(screen.getByText(/mockedTurbosTradeDescription/i)).toBeInTheDocument(); }); - it('Ensure trade category "vanilla" description is rendered properly', () => { + it('Ensure mockedVanillaTradeDescription is rendered correctly when trade category is "vanilla"', () => { render(); - expect( - screen.getByText( - 'Vanilla options allow you to predict an upward (bullish) or downward (bearish) direction of the underlying asset by purchasing a "Call" or a "Put".' - ) - ).toBeInTheDocument(); + expect(screen.getByText(/mockedVanillaTradeDescription/i)).toBeInTheDocument(); }); it('Ensure description is not found is rendered when trade category doesnt exist', () => { render(); diff --git a/packages/trader/src/Assets/Trading/Categories/accumulator-trade-description.tsx b/packages/trader/src/Assets/Trading/Categories/accumulator-trade-description.tsx deleted file mode 100644 index b3023be7d6b3..000000000000 --- a/packages/trader/src/Assets/Trading/Categories/accumulator-trade-description.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { Localize } from '@deriv/translations'; -import { Text } from '@deriv/components'; - -const AccumulatorTradeDescription = ({ onClick }: { onClick: () => void }) => { - return ( - - - growth rate.' - } - components={[]} - /> - - - payout is the sum of your inital stake and profit.'} - components={[]} - /> - - - range from the <0>previous spot price. Otherwise, you lose your stake and the trade is terminated.' - } - components={[]} - /> - - - slippage risk<0/>.'} - components={[]} - /> - - - ); -}; - -export default AccumulatorTradeDescription; diff --git a/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx b/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx index 33a80d8ad5d7..d11115e9124d 100644 --- a/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx +++ b/packages/trader/src/Assets/Trading/Categories/trade-categories.tsx @@ -1,12 +1,34 @@ import React from 'react'; import { Text } from '@deriv/components'; -import { localize, Localize } from '@deriv/translations'; -import AccumulatorTradeDescription from './accumulator-trade-description'; -import { TurbosTradeDescription } from './turbos-trade-description'; +import { Localize } from '@deriv/translations'; +import AccumulatorTradeDescription from './Description/accumulator-trade-description'; +import AsianTradeDescription from './Description/asian-trade-description'; +import CallPutSpreadTradeDescription from './Description/call-put-spread-trade-description'; +import EndTradeDescription from './Description/end-trade-description'; +import EvenOddTradeDescription from './Description/even-odd-trade-description'; +import HighLowTradeDescription from './Description/high-low-trade-description'; +import LbHighLowTradeDescription from './Description/lb-high-low-trade-description'; +import LbPutTradeDescription from './Description/lb-put-trade-desciption'; +import LbCallTradeDescription from './Description/lb-call-trade-description'; +import MatchDiffTradeDescription from './Description/match-diff-trade-description'; +import MultiplierTradeDescription from './Description/multiplier-trade-description'; +import OverUnderTradeDescription from './Description/over-under-trade-description'; +import RiseFallTradeDescription from './Description/rise-fall-trade-description'; +import RunHighLowTradeDescription from './Description/run-high-low-trade-description'; +import ResetTradeDescription from './Description/reset-trade-description'; +import StayTradeDescription from './Description/stay-trade-description'; +import TurbosTradeDescription from './Description/turbos-trade-description'; +import TouchTradeDescription from './Description/touch-trade-description'; +import TickHighLowTradeDescription from './Description/tick-high-low-trade-description'; +import VanillaTradeDescription from './Description/vanilla-trade-description'; -// Templates are from Binary 1.0, it should be checked if they need change or not and add all of trade types -// TODO: refactor the rest of descriptions to use them as components like AccumulatorTradeDescription -const TradeCategories = ({ category, onClick }: { category?: string; onClick: () => void }) => { +const TradeCategories = ({ + category, + onClick, +}: { + category?: string; + onClick: React.MouseEventHandler; +}) => { let TradeTypeTemplate; if (category) { switch (category) { @@ -14,482 +36,70 @@ const TradeCategories = ({ category, onClick }: { category?: string; onClick: () TradeTypeTemplate = ; break; case 'rise_fall': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Rise", you win the payout if the exit spot is strictly higher than the entry spot.' - )} - - - {localize( - 'If you select "Fall", you win the payout if the exit spot is strictly lower than the entry spot.' - )} - - - {localize( - 'If you select "Allow equals", you win the payout if exit spot is higher than or equal to entry spot for "Rise". Similarly, you win the payout if exit spot is lower than or equal to entry spot for "Fall".' - )} - - - ); - break; case 'rise_fall_equal': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Rise", you win the payout if the exit spot is strictly higher than the entry spot.' - )} - - - {localize( - 'If you select "Fall", you win the payout if the exit spot is strictly lower than the entry spot.' - )} - - - {localize( - 'If you select "Allow equals", you win the payout if exit spot is higher than or equal to entry spot for "Rise". Similarly, you win the payout if exit spot is lower than or equal to entry spot for "Fall".' - )} - - - ); + TradeTypeTemplate = ; break; case 'high_low': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Higher", you win the payout if the exit spot is strictly higher than the barrier.' - )} - - - {localize( - 'If you select "Lower", you win the payout if the exit spot is strictly lower than the barrier.' - )} - - - {localize("If the exit spot is equal to the barrier, you don't win the payout.")} - - - ); + TradeTypeTemplate = ; break; case 'end': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Ends Between", you win the payout if the exit spot is strictly higher than the Low barrier AND strictly lower than the High barrier.' - )} - - - {localize( - 'If you select "Ends Outside", you win the payout if the exit spot is EITHER strictly higher than the High barrier, OR strictly lower than the Low barrier.' - )} - - - {localize( - "If the exit spot is equal to either the Low barrier or the High barrier, you don't win the payout." - )} - - - ); + TradeTypeTemplate = ; break; case 'stay': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Stays Between", you win the payout if the market stays between (does not touch) either the High barrier or the Low barrier at any time during the contract period' - )} - - - {localize( - 'If you select "Goes Outside", you win the payout if the market touches either the High barrier or the Low barrier at any time during the contract period.' - )} - - - ); + TradeTypeTemplate = ; break; case 'match_diff': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Matches", you will win the payout if the last digit of the last tick is the same as your prediction.' - )} - - - {localize( - 'If you select "Differs", you will win the payout if the last digit of the last tick is not the same as your prediction.' - )} - - - ); + TradeTypeTemplate = ; break; case 'even_odd': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Even", you will win the payout if the last digit of the last tick is an even number (i.e., 2, 4, 6, 8, or 0).' - )} - - - {localize( - 'If you select "Odd", you will win the payout if the last digit of the last tick is an odd number (i.e., 1, 3, 5, 7, or 9).' - )} - - - ); + TradeTypeTemplate = ; break; case 'over_under': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Over", you will win the payout if the last digit of the last tick is greater than your prediction.' - )} - - - {localize( - 'If you select "Under", you will win the payout if the last digit of the last tick is less than your prediction.' - )} - - - ); + TradeTypeTemplate = ; break; case 'touch': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Touch", you win the payout if the market touches the barrier at any time during the contract period.' - )} - - - {localize( - 'If you select "No Touch", you win the payout if the market never touches the barrier at any time during the contract period.' - )} - - - ); + TradeTypeTemplate = ; break; case 'asian': - TradeTypeTemplate = ( - - - {localize( - 'Asian options settle by comparing the last tick with the average spot over the period.' - )} - - - {localize( - 'If you select "Asian Rise", you will win the payout if the last tick is higher than the average of the ticks.' - )} - - - {localize( - 'If you select "Asian Fall", you will win the payout if the last tick is lower than the average of the ticks.' - )} - - - {localize( - "If the last tick is equal to the average of the ticks, you don't win the payout." - )} - - - ); + TradeTypeTemplate = ; break; case 'run_high_low': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Only Ups", you win the payout if consecutive ticks rise successively after the entry spot. No payout if any tick falls or is equal to any of the previous ticks.' - )} - - - {localize( - 'If you select "Only Downs", you win the payout if consecutive ticks fall successively after the entry spot. No payout if any tick rises or is equal to any of the previous ticks.' - )} - - - ); + TradeTypeTemplate = ; break; case 'reset': - TradeTypeTemplate = ( - - - {localize( - 'If you select "Reset-Up”, you win the payout if the exit spot is strictly higher than either the entry spot or the spot at reset time.' - )} - - - {localize( - 'If you select "Reset-Down”, you win the payout if the exit spot is strictly lower than either the entry spot or the spot at reset time.' - )} - - - {localize( - "If the exit spot is equal to the barrier or the new barrier (if a reset occurs), you don't win the payout." - )} - - - ); + TradeTypeTemplate = ; break; case 'callputspread': - TradeTypeTemplate = ( - -

{localize('Spread Up')}

- - {localize( - 'Win maximum payout if the exit spot is higher than or equal to the upper barrier.' - )} - - - {localize( - 'Win up to maximum payout if exit spot is between lower and upper barrier, in proportion to the difference between exit spot and lower barrier.' - )} - - {localize('No payout if exit spot is below or equal to the lower barrier.')} -

{localize('Spread Down')}

- - {localize( - 'Win maximum payout if the exit spot is lower than or equal to the lower barrier.' - )} - - - {localize( - 'Win up to maximum payout if exit spot is between lower and upper barrier, in proportion to the difference between upper barrier and exit spot.' - )} - - {localize('No payout if exit spot is above or equal to the upper barrier.')} - - ); + TradeTypeTemplate = ; break; case 'tick_high_low': - TradeTypeTemplate = ( - - - {localize( - 'If you select "High Tick", you win the payout if the selected tick is the highest among the next five ticks.' - )} - - - {localize( - 'If you select "Low Tick", you win the payout if the selected tick is the lowest among the next five ticks.' - )} - - - ); + TradeTypeTemplate = ; break; case 'lb_high_low': - TradeTypeTemplate = ( - - - {localize( - 'By purchasing the "High-to-Low" contract, you\'ll win the multiplier times the difference between the high and low over the duration of the contract.' - )} - - - {localize( - 'The high is the highest point ever reached by the market during the contract period.' - )} - - - {localize( - 'The low is the lowest point ever reached by the market during the contract period.' - )} - - - {localize( - 'The close is the latest tick at or before the end time. If you selected a specific end time, the end time is the selected time.' - )} - - - ); + TradeTypeTemplate = ; break; case 'lb_put': - TradeTypeTemplate = ( - - - {localize( - 'By purchasing the "High-to-Close" contract, you\'ll win the multiplier times the difference between the high and close over the duration of the contract.' - )} - - - {localize( - 'The high is the highest point ever reached by the market during the contract period.' - )} - - - {localize( - 'The low is the lowest point ever reached by the market during the contract period.' - )} - - - {localize( - 'The close is the latest tick at or before the end time. If you selected a specific end time, the end time is the selected time.' - )} - - - ); + TradeTypeTemplate = ; break; case 'lb_call': - TradeTypeTemplate = ( - - - {localize( - 'By purchasing the "Close-to-Low" contract, you\'ll win the multiplier times the difference between the close and low over the duration of the contract.' - )} - - - {localize( - 'The high is the highest point ever reached by the market during the contract period.' - )} - - - {localize( - 'The low is the lowest point ever reached by the market during the contract period.' - )} - - - {localize( - 'The close is the latest tick at or before the end time. If you selected a specific end time, the end time is the selected time.' - )} - - - ); + TradeTypeTemplate = ; break; case 'multiplier': - TradeTypeTemplate = ( - - - {localize( - 'Predict the market direction and select either “Up” or “Down” to open a position. We will charge a commission when you open a position.' - )} - - - {localize( - 'If you select “Up”, you will earn a profit by closing your position when the market price is higher than the entry spot.' - )} - - - {localize( - 'If you select “Down”, you will earn a profit by closing your position when the market price is lower than the entry spot.' - )} - - - {localize( - 'Your profit is the percentage change in market price times your stake and the multiplier of your choice.' - )} - - - {localize( - 'The stop-out level on the chart indicates the price at which your potential loss equals your entire stake. When the market price reaches this level, your position will be closed automatically. This ensures that your loss does not exceed the amount you paid to purchase the contract.' - )} - - {localize('These are optional parameters for each position that you open:')} -
    -
  • - {localize( - 'If you select “Take profit” and specify an amount that you’d like to earn, your position will be closed automatically when your profit is more than or equals to this amount. Your profit may be more than the amount you entered depending on the market price at closing.' - )} -
    • -
  • - {localize( - 'If you select “Stop loss” and specify an amount to limit your loss, your position will be closed automatically when your loss is more than or equals to this amount. Your loss may be more than the amount you entered depending on the market price at closing.' - )} -
    • -
  • - {localize( - 'If you select “Deal cancellation”, you’ll be able to cancel your trade within a chosen time frame should the market move against your favour. We’ll charge a small fee for this, but we’ll return your stake amount without profit or loss. If the stop-out amount is reached before the deal cancellation expires, your position will be cancelled automatically and we’ll return your stake amount without profit or loss.' - )} -
    • - {localize('While “Deal cancellation” is active:')} -
      -
    • - {localize( - '“Stop loss” is deactivated and will only be available when “Deal cancellation” expires.' - )} -
      • -
    • - {localize( - '“Take profit” cannot be updated. You may update it only when “Deal cancellation” expires.' - )} -
      • -
    -
- - {localize( - 'The entry spot is the market price when your contract is processed by our servers.' - )} - - {localize('The exit spot is the market price when the contract is closed.')} - - ); + TradeTypeTemplate = ; break; case 'turbosshort': case 'turboslong': TradeTypeTemplate = ; break; case 'vanilla': - TradeTypeTemplate = ( - - - {localize( - 'Vanilla options allow you to predict an upward (bullish) or downward (bearish) direction of the underlying asset by purchasing a "Call" or a "Put".' - )} - - - , - , - ]} - /> - - - ]} - /> - - - , - ]} - /> - - - , - ]} - /> - - - ); + TradeTypeTemplate = ; break; default: - TradeTypeTemplate = {localize('Description not found.')}; + TradeTypeTemplate = ( + + + + ); break; } }