feat: add description and disable chart Interval duration setting whe…

…n not visible for 1T interval
binary-com · Jul 1, 2024 · 16178a9 · 16178a9
1 parent 20138cc
commit 16178a9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 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/settings-chart.tsx b/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox } from '@deriv/components';
+import { Checkbox, InlineMessage } from '@deriv/components';
 import { localize, 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,6 +49,7 @@ const ChartSettings = observer(() => {
                         <Checkbox
                             id='dt_settings_interval_checkbox'
                             defaultChecked={is_countdown_visible}
+                            disabled={granularity === 0}
                             label={localize('Display remaining time for each interval')}
                             onChange={e => {
                                 if ('checked' in e.target) {