[DTRA] Kate/Maryia/DTRA-1279/Redesign: Positions page

[maryia-deriv]

Changes:

- To add Positions page for DTrader Redesign

Detailed specs:

<PositionsContent />:

This is the content for Open and Closed tabs which differs based on the value of isClosedTab prop.

Elements:

• Filters. It's displayed only if a user has any positions:

  • Open tab: <ContractTypeFilter/>,
  • Closed tab: <ContractTypeFilter/> and <TimeFilter/>.
    NOTE:
    1. Contract type filtration is executed on FE side in PositionContent with the help of filterPositions() from /AppV2/Utils.
    2. Time filtration is performed on BE side: filter values (dates) are passed to handleDateChange method that calls profit_table API from ProfitTableStore.
    3. useTradeTypeFilter hook returns contractTypeFilter based on the selected tab, which means that filters work independently in each tab.

• Total profit loss: <TotalProfitLoss /> is always rendered together with the list of contract cards.

• Contract cards:

  • Open tab: <ContractCardList />,
  • Closed tab: <ContractCardsSections />, which adds date separators to <ContractCardList /> because in Closed tab we need to group cards based on their purchase dates.

• Empty page placeholder: <EmptyPositions /> is rendered if the user has no positions.

• Loading: <Loading /> is rendered while positions are being loaded, i.e. when it's still unknown whether or not the user has any positions and which content we need to show: <EmptyPositions /> or Contract cards.

Positions data:

Positions are used as filteredPositions based on various initial data depending on a selected tab, and after filtration if applicable:
- Open tab: active_positions taken from PortfolioStore,
- Closed tab: closedPositions mapped based on data from ProfitTableStore.

<ContractTypeFilter />:

Its purpose is to detect options selected by a user and to pass them to a parent via setContractTypeFilter callback.
The component's structure is based on <Chip /> and <ActionSheet/>, which contains <Checkboxes/>.
Default checked options are provided by contractTypeFilter prop, and the list of all options is taken from availableContracts, which is temporarily hardcoded and supposed to be based on the contracts that are actually available for a user instead.
When a user checks some options, they will be stored in the component's state until the moment when the user clicks 'Apply'.
When 'Apply' is clicked, an array with the chosen options gets passed to a parent via setContractTypeFilter callback for 2 purposes:
1. to set the filter value into PositionsStore;
2. to be used to filter positions in PositionsContent.

<TimeFilter />:

Its purpose is to detect a newly selected time option and set it in the PositionsStore, so that profit_table API call returns filtered positions from BE side.
The component's structure is based on <Chip />, <ActionSheet/>, which contains <RadioGroup/>, and DateRangePicker (calendar from Quill UI).
A user can select one option from RadioButtons, which are rendered based on the timeFilterList array, or pick a custom date range from the DateRangePicker.
A selected option will be set to the PositionsStore via setTimeFilter or via setCustomTimeRangeFilter, and passed to handleDateChange for BE filtration.
By clicking on 'Reset' button, a user can remove all time filters: time filters in the PositionsStore will be replaced with empty strings, and profit_table API will be called for all closed contracts.

<ContractCard />:

Displays contract data.
It can have Action Buttons:
- Open tab: a card has action buttons (Close, or Cancel & Close) that get revealed when a user swipes to the left on the card,
- Closed tab: a card has no action buttons since the positions can no longer be closed.

<ContractCardList />:

It can have Buttons Demo:
- Open tab: on the first opening of the Open tab, the list of cards has a demo, i.e. animation that quickly reveals and hides action buttons on the first card on the list, so that a user is aware of their availability.
- Closed tab: no demo since there are no action buttons.

Screenshots:

Test coverage:

IMPORTANT NOTICE:

This page is subject to improvement.
Edge cases, e.g. forward starting contracts handling, dark theme, etc. are not part of this PR.
Further improvements to UI and behavior will be done moving forward.
This PR can be considered as an initial implementation.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Jun 4, 2024 8:31am

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: [DTRA] Kate/Maryia/DTRA-1279/Redesign: Positions page #15234
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-kate-deriv-maryia-katedtra-1279redesi-fc452e.binary.sx?qa_server=red.derivws.com&app_id=31359
  • Original: https://deriv-app-git-fork-kate-deriv-maryia-katedtra-1279redesi-fc452e.binary.sx
• App ID: 31359

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/15234](https://github.com/binary-com/deriv-app/pull/15234)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-kate-deriv-maryia-katedtra-1279redesi-fc452e.binary.sx?qa_server=red.derivws.com&app_id=31359
    - **Original**: https://deriv-app-git-fork-kate-deriv-maryia-katedtra-1279redesi-fc452e.binary.sx
- **App ID**: `31359`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	34
🟧 Accessibility	70
🟢 Best practices	92
🟧 SEO	77
🟧 PWA	78

Lighthouse ran with https://deriv-app-git-fork-kate-deriv-maryia-katedtra-1279redesi-fc452e.binary.sx/

[coveralls]

coverage: 43.297% (+0.2%) from 43.064%
when pulling 9217413 on kate-deriv:maryia/kate/DTRA-1279/redesign_position_page
into e9bdf4d on binary-com:master.

[sonarcloud]

Quality Gate passed

Issues
14 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

⏳ Generating Lighthouse report...