;
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);