diff --git a/packages/core/src/sass/app/_common/components/media-item.scss b/packages/core/src/sass/app/_common/components/media-item.scss index 06eb05d79d61..35dcda110166 100644 --- 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 index ca20d51e410a..e360ac00ea57 100644 --- 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('', () => { let default_mock_store: ReturnType; beforeEach(() => { - default_mock_store = mockStore({}); + default_mock_store = mockStore({ + contract_trade: { + granularity: 60, + }, + }); }); const mockChartSettings = () => { @@ -45,4 +49,11 @@ describe('', () => { 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 index ff588813cdf9..b8f60ce7dbd7 100644 --- 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 (
+ {granularity === 0 && ( + + } + /> + )} { } onChange={e => { if ('checked' in e.target) { setCountdown(e.target.checked);