[DTRA]/Ahmad/DTRA-1607/Add Accumulator Stats (binary-com#16431)

* chore: progress

* chore: progress

* fix: fix

* chore: added action sheets and scroller

* chore: test cases

* chore: working

* chore: renaming

* chore: renaming

* chore: fix test case

* fix: removing the spacing

* chore: scss

* chore: sonar cloud fix

* chore: fixing button

* fix: pseudo

* fix: pseudo

* chore: review comments

* chore: test fix

* chore: barrier changes

* chore: eslint fix

* chore: adding cleanup

* fix: review fix

* fix: fix

* chore: snakcase

packages/trader/src/AppV2/Components/AccumulatorStats/__tests__/accumulator-stats.spec.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AccumulatorStats from '../accumulator-stats';
+import TraderProviders from '../../../../trader-providers';
+import { mockStore, useStore } from '@deriv/stores';
+import { TStores } from '@deriv/stores/types';
+
+describe('AccumulatorStats', () => {
+    let default_mock_store: ReturnType<typeof mockStore>;
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+        default_mock_store = mockStore({
+            modules: {
+                trade: {
+                    onChange: jest.fn(),
+                    validation_errors: { barrier_1: [] },
+                    duration: 10,
+                    ticks_history_stats: {
+                        ticks_stayed_in: [
+                            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
+                            1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
+                        ],
+                    },
+                },
+            },
+        });
+    });
+
+    const renderAccumulatorState = (default_mock_store: TStores) => {
+        render(
+            <TraderProviders store={default_mock_store}>
+                <AccumulatorStats />
+            </TraderProviders>
+        );
+    };
+
+    test('should render without crashing', () => {
+        renderAccumulatorState(default_mock_store);
+        expect(screen.getByText('Stats')).toBeInTheDocument();
+    });
+
+    test('should render stats when data is available', () => {
+        renderAccumulatorState(default_mock_store);
+        const stats = screen.getAllByText(/\d/);
+        expect(stats.length).toBeGreaterThan(0);
+    });
+
+    test('should open description when heading is clicked', () => {
+        renderAccumulatorState(default_mock_store);
+        const heading = screen.getByText('Stats');
+        userEvent.click(heading);
+
+        expect(
+            screen.getByText(
+                'Stats show the history of consecutive tick counts, i.e. the number of ticks the price remained within range continuously.'
+            )
+        ).toBeInTheDocument();
+    });
+
+    test('should open ActionSheet with stats when expand icon is clicked', () => {
+        renderAccumulatorState(default_mock_store);
+        const expandIcon = screen.getByTestId('expand-stats-icon');
+        userEvent.click(expandIcon);
+
+        const historyText = screen.getByText('History of tick counts');
+        expect(historyText).toBeInTheDocument();
+    });
+
+    test('should close ActionSheet when primary button is clicked', () => {
+        renderAccumulatorState(default_mock_store);
+        const heading = screen.getByText('Stats');
+        userEvent.click(heading);
+
+        const gotItButton = screen.getByText('Got it');
+        userEvent.click(gotItButton);
+
+        expect(
+            screen.queryByText(
+                'Stats show the history of consecutive tick counts, i.e. the number of ticks the price remained within range continuously.'
+            )
+        ).not.toBeInTheDocument();
+    });
+    test('should return null when ticks_stayed_in are empty', () => {
+        default_mock_store.modules.trade.ticks_history_stats = {
+            ticks_stayed_in: [],
+        };
+        renderAccumulatorState(default_mock_store);
+        expect(screen.queryByText('Stats')).not.toBeInTheDocument();
+    });
+    test('should set animationClass and isMovingTransition based on rows[0][0] changes', async () => {
+        renderAccumulatorState(default_mock_store);
+        jest.advanceTimersByTime(3000);
+        await waitFor(() => {
+            expect(screen.getByTestId('accumulator-first-stat')).toHaveClass('animate-success');
+        });
+    });
+});

packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-description.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ActionSheet, Text } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv/translations';
+
+const AccumulatorStatsDescription = ({ onActionSheetClose }: { onActionSheetClose: () => void }) => {
+    return (
+        <ActionSheet.Portal showHandlebar={false}>
+            <div className='stats-description'>
+                <div className='stats-description__placeholder' />
+                <div className='stats-description__content'>
+                    <div className='stats-description__content__title'>
+                        <Text size='lg' bold>
+                            <Localize i18n_default_text='Stats' />
+                        </Text>
+                    </div>
+                    <div className='stats-description__content__description'>
+                        <Text>
+                            <Localize i18n_default_text='Stats show the history of consecutive tick counts, i.e. the number of ticks the price remained within range continuously.' />
+                        </Text>
+                    </div>
+                </div>
+            </div>
+            <ActionSheet.Footer
+                alignment='vertical'
+                primaryAction={{
+                    content: <Localize i18n_default_text='Got it' />,
+                    onAction: onActionSheetClose,
+                }}
+            />
+        </ActionSheet.Portal>
+    );
+};
+
+export default AccumulatorStatsDescription;

packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ActionSheet } from '@deriv-com/quill-ui';
+import { Text } from '@deriv-com/ui';
+import StatsRow from './accumulator-stats-row';
+import { Localize } from '@deriv/translations';
+
+const AccumulatorStatsModal = ({
+    rows,
+    animation_class,
+    is_moving_transaction,
+}: {
+    rows: number[][];
+    animation_class?: string;
+    is_moving_transaction: boolean;
+}) => {
+    return (
+        <ActionSheet.Portal shouldCloseOnDrag>
+            <div className='stats-sheet'>
+                <div className='stats-sheet__title'>
+                    <Text size='lg' bold>
+                        <Localize i18n_default_text='Stats' />
+                    </Text>
+                </div>
+                <div className='stats-sheet__caption'>
+                    <Text>
+                        <Localize i18n_default_text='History of tick counts' />
+                    </Text>
+                </div>
+
+                <div className='stats-sheet__stats'>
+                    <StatsRow
+                        rows={rows[0]}
+                        animation_class={animation_class}
+                        is_moving_transaction={is_moving_transaction}
+                        className='stats-sheet__stats'
+                    />
+                </div>
+                {rows.slice(1).map((item: number[], index: number) => (
+                    <div key={index} className='stats-sheet__stats'>
+                        {item.map((item: number, innerIndex: number) => (
+                            <div key={`${index}-${innerIndex}`} className='stats-sheet__stats__number'>
+                                <Text size='sm'>{item}</Text>
+                            </div>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        </ActionSheet.Portal>
+    );
+};
+
+export default AccumulatorStatsModal;

packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-row.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Text } from '@deriv-com/quill-ui';
+import clsx from 'clsx';
+
+const StatsRow = ({
+    rows,
+    animation_class,
+    is_moving_transaction,
+    className,
+}: {
+    rows: number[];
+    animation_class?: string;
+    is_moving_transaction: boolean;
+    className: string;
+}) => {
+    return (
+        <>
+            <div className={`${className}__stat`}>
+                <Text size='sm' bold className={animation_class} data-testid='accumulator-first-stat'>
+                    {rows[0]}
+                </Text>
+            </div>
+            <div
+                className={clsx(`${className}__moving`, {
+                    'slide-right': is_moving_transaction,
+                })}
+            >
+                {rows.slice(1)?.map((el: number, i: number) => (
+                    <div key={i + 1} className={`${className}__stat`}>
+                        <Text size='sm'>{el}</Text>
+                    </div>
+                ))}
+            </div>
+        </>
+    );
+};
+
+export default StatsRow;