[DTRA] Maryia/DTRA-1336/feat: update chart 'Interval duration' setting (

#15877) * feat: add description and disable chart Interval duration setting when not visible for 1T interval * test: ChartSettings
binary-com · Jul 19, 2024 · c5fa987 · c5fa987
1 parent 4666051
commit c5fa987
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/packages/core/src/sass/app/_common/components/media-item.scss b/packages/core/src/sass/app/_common/components/media-item.scss
@@ -6,6 +6,10 @@
         color: var(--text-prominent);
         margin: 0 0 16px;
         text-transform: none;
+
+        .inline-message {
+            margin-top: 1.6rem;
+        }
     }
     &__icon {
         height: 120px;

diff --git a/packages/trader/src/App/Containers/SettingsModal/__tests__/settings-chart.spec.tsx b/packages/trader/src/App/Containers/SettingsModal/__tests__/settings-chart.spec.tsx
@@ -20,7 +20,11 @@ jest.mock('Assets/SvgComponents/settings/dark/interval-enabled.svg', () =>
 describe('<ChartSettings/>', () => {
     let default_mock_store: ReturnType<typeof mockStore>;
     beforeEach(() => {
-        default_mock_store = mockStore({});
+        default_mock_store = mockStore({
+            contract_trade: {
+                granularity: 60,
+            },
+        });
     });
 
     const mockChartSettings = () => {
@@ -45,4 +49,11 @@ describe('<ChartSettings/>', () => {
 
         expect(default_mock_store.ui.setChartCountdown).toBeCalled();
     });
+    it('should display Unavailable message and disable checkbox if chart granularity === 0 (1 Tick interval)', () => {
+        default_mock_store.contract_trade.granularity = 0;
+        render(mockChartSettings());
+
+        expect(screen.getByText(/This feature is unavailable for tick intervals/)).toBeInTheDocument();
+        expect(screen.getByRole('checkbox')).toBeDisabled();
+    });
 });
diff --git a/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx b/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Checkbox } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
+import { Checkbox, InlineMessage } from '@deriv/components';
+import { Localize } from '@deriv/translations';
 import MediaItem, { MediaHeading, MediaIcon, MediaDescription } from 'App/Components/Elements/Media';
 import { observer, useStore } from '@deriv/stores';
 
@@ -16,18 +16,27 @@ import IntervalDurationDisabledLightIcon from 'Assets/SvgComponents/settings/int
 import IntervalDurationEnabledLightIcon from 'Assets/SvgComponents/settings/interval-enabled.svg';
 
 const ChartSettings = observer(() => {
-    const { ui } = useStore();
+    const { contract_trade, ui } = useStore();
     const {
         is_chart_countdown_visible: is_countdown_visible,
         is_dark_mode_on: is_dark_mode,
         setChartCountdown: setCountdown,
     } = ui;
+    const { granularity } = contract_trade;
 
     return (
         <div className='settings-chart'>
             <MediaItem>
                 <MediaHeading>
                     <Localize i18n_default_text='Interval duration' />
+                    {granularity === 0 && (
+                        <InlineMessage
+                            type='information'
+                            message={
+                                <Localize i18n_default_text='This feature is unavailable for tick intervals. Switch to minutes, hours, or days.' />
+                            }
+                        />
+                    )}
                 </MediaHeading>
                 <MediaDescription>
                     <MediaIcon
@@ -40,7 +49,8 @@ const ChartSettings = observer(() => {
                         <Checkbox
                             id='dt_settings_interval_checkbox'
                             defaultChecked={is_countdown_visible}
-                            label={localize('Display remaining time for each interval')}
+                            disabled={granularity === 0}
+                            label={<Localize i18n_default_text='Display remaining time for each interval' />}
                             onChange={e => {
                                 if ('checked' in e.target) {
                                     setCountdown(e.target.checked);