[DTRA]/Ahmad/DTRA-951/Template Message For Accumulators (#1534)

ahmadtaimoor-deriv · balakrishna-deriv · web-flow · commit 8171c26d7e38 · 2024-03-18T13:36:55.000+08:00
* info message

* fix

* review fix

* Update src/utils/index.ts

---------

Co-authored-by: balakrishna-deriv &lt;56330681+balakrishna-deriv@users.noreply.github.com&gt;
diff --git a/sass/components/_chart-mode.scss b/sass/components/_chart-mode.scss
@@ -46,20 +46,6 @@
                 }
             }
         }
-        &__text {
-            @include themify($themes) {
-                color: themed('ChartModeText') !important;
-            }
-            line-height: 18px;
-            font-size: 12px;
-            font-weight: 400;
-            padding: 16px;
-            text-align: center;
-
-            &--mobile {
-                font-size: 11px;
-            }
-        }
     }
 }
 
diff --git a/sass/components/_dialog.scss b/sass/components/_dialog.scss
@@ -132,6 +132,20 @@
             }
         }
     }
+    .info-footnote {
+        @include themify($themes) {
+            color: themed('ChartModeText') !important;
+        }
+        line-height: 18px;
+        font-size: 12px;
+        font-weight: 400;
+        padding: 16px;
+        text-align: center;
+
+        &--mobile {
+            font-size: 11px;
+        }
+    }
 }
 
 .tabs {
diff --git a/sass/components/_view.scss b/sass/components/_view.scss
@@ -205,6 +205,11 @@
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
+
+                    &--disabled {
+                        opacity: 0.5;
+                        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
+                    }
                 }
                 .ic-icon {
                     @include themify($themes) {
diff --git a/src/components/ChartMode.tsx b/src/components/ChartMode.tsx
@@ -15,7 +15,7 @@ import {
 } from './Icons';
 import Menu from './Menu';
 import Timeperiod from './Timeperiod';
-
+import InfoFootnote from './InfoFootnote';
 
 type TChartModeProps = {
     portalNodeId?: string;
@@ -67,17 +67,18 @@ const ChartMode = ({ onChartType, onGranularity, portalNodeId }: TChartModeProps
                     </div>
                 </div>
                 {allowTickChartTypeOnly && (
-                    <div
-                        className={classNames('sc-chart-mode__section__text', {
-                            'sc-chart-mode__section__text--mobile': isMobile,
-                        })}
-                    >
-                        {t.translate('Only selected charts and time intervals are available for this trade type.')}
-                    </div>
+                    <InfoFootnote
+                        isMobile={isMobile}
+                        text={t.translate('Only selected charts and time intervals are available for this trade type.')}
+                    />
                 )}
             </Menu.Body>
         </Menu>
     );
 };
 
+ChartMode.defaultProps = {
+    portalNodeId: '',
+};
+
 export default observer(ChartMode);
diff --git a/src/components/InfoFootnote.tsx b/src/components/InfoFootnote.tsx
@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import React from 'react';
+
+type InfoFootnoteProps = {
+    className?: string;
+    isMobile?: boolean;
+    text: string;
+};
+
+const InfoFootnote = ({ className, isMobile, text }: InfoFootnoteProps) => (
+    <div
+        className={classNames(className,{
+            [`${className}--mobile`]: isMobile,
+        })}
+    >
+        {text}
+    </div>
+);
+
+InfoFootnote.defaultProps = {
+    className: 'info-footnote',
+    isMobile: false,
+};
+
+export default React.memo(InfoFootnote);
diff --git a/src/components/Views.tsx b/src/components/Views.tsx
@@ -10,8 +10,10 @@ import { wrapText } from '../utils';
 import { TemplateIcon, AddIcon, DeleteIcon, EmptyStateIcon, OverwriteStateIcon } from './Icons';
 import '../../sass/components/_view.scss';
 import Menu from './Menu';
+import InfoFootnote from './InfoFootnote';
 
 type TViewItemProps = {
+    disabled?: boolean;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     view: ArrayElement<TViews>;
     remove: (event: React.MouseEvent<HTMLElement>) => void;
@@ -30,6 +32,7 @@ type TOverwriteViewProps = {
 };
 
 type TActiveListViewProps = {
+    allowTickChartTypeOnly: TMainStore['state']['allowTickChartTypeOnly'];
     removeAll: TMainStore['view']['removeAll'];
     views: TMainStore['view']['sortedItems'];
     applyLayout: TMainStore['view']['applyLayout'];
@@ -38,18 +41,22 @@ type TActiveListViewProps = {
     onGranularity: (granularity?: TGranularity) => void;
 };
 
-const ViewItem = ({ view, remove, onClick }: TViewItemProps) => (
+const ViewItem = ({ disabled, view, remove, onClick }: TViewItemProps) => (
     <Tooltip
         className='sc-views__views__list__item'
-        onClick={onClick}
+        onClick={disabled ? undefined : onClick}
         enabled={view.name.length > 27}
         content={wrapText(view.name, 26)}
     >
-        <div className='text'>{view.name}</div>
+        <div className={classNames('text', { 'text--disabled': disabled })}>{view.name}</div>
         <DeleteIcon onClick={remove} />
     </Tooltip>
 );
 
+ViewItem.defaultProps = {
+    disabled: false,
+};
+
 const EmptyView = ({ onClick }: { onClick: (event: React.MouseEvent<HTMLElement>) => void }) => (
     <div className='sc-views--empty'>
         <EmptyStateIcon />
@@ -83,6 +90,7 @@ const OverwriteView = ({ templateName, onCancel, onOverwrite }: TOverwriteViewPr
 );
 
 const ActiveListView = ({
+    allowTickChartTypeOnly,
     views,
     removeAll,
     applyLayout,
@@ -92,6 +100,12 @@ const ActiveListView = ({
 }: TActiveListViewProps) => {
     if (!views.length) return null;
 
+    const isDisabled = (layout: TMainStore['view']['sortedItems'][number]['layout']) => {
+        const { chartType, timeUnit } = layout ?? {};
+        const oneTickChartTemplate = chartType === 'line' && timeUnit === 'tick';
+        return allowTickChartTypeOnly && !oneTickChartTemplate;
+    };
+
     return (
         <div className='sc-views__views'>
             <div className='sc-views__views__head'>
@@ -104,6 +118,7 @@ const ActiveListView = ({
                 <div className='sc-views__views__list'>
                     {views.map((view, i) => (
                         <ViewItem
+                            disabled={isDisabled(view.layout)}
                             view={view}
                             key={view.name}
                             onClick={e => applyLayout(i, e as TCustomEvent, onGranularity, onChartType)}
@@ -117,7 +132,9 @@ const ActiveListView = ({
 };
 
 const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
-    const { view } = useStores();
+    const { view, state, chart } = useStores();
+    const { allowTickChartTypeOnly } = state;
+    const { isMobile } = chart;
 
     const {
         sortedItems: views,
@@ -161,7 +178,7 @@ const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
                     {currentRoute === 'new' ? (
                         <EmptyView onClick={onToggleNew} />
                     ) : (
-                        <React.Fragment>
+                        <>
                             {currentRoute !== 'overwrite' ? (
                                 ''
                             ) : (
@@ -209,6 +226,7 @@ const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
                                     </div>
                                 </div>
                                 <ActiveListView
+                                    allowTickChartTypeOnly={allowTickChartTypeOnly}
                                     views={views}
                                     removeAll={removeAll}
                                     applyLayout={applyLayout}
@@ -217,9 +235,15 @@ const Views = ({ portalNodeId, onChartType, onGranularity }: TViewsProps) => {
                                     onGranularity={onGranularity}
                                 />
                             </Scroll>
-                        </React.Fragment>
+                        </>
                     )}
                 </div>
+                {allowTickChartTypeOnly && (
+                    <InfoFootnote
+                        isMobile={isMobile}
+                        text={t.translate('Some of your templates may not work with this trade type.')}
+                    />
+                )}
             </Menu.Body>
         </Menu>
     );
diff --git a/src/utils/__tests__/index.spec.ts b/src/utils/__tests__/index.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import { Intervals } from 'src/Constant';
-import { getSymbolMarketCategory, getTimeIntervalName, getYAxisScalingParams } from '..';
+import { getIntervalInSeconds, getSymbolMarketCategory, getTimeIntervalName, getYAxisScalingParams } from '..';
 
 describe('getYAxisScalingParams', () => {
     const mocked_height_desktop = 700;
@@ -149,3 +149,118 @@ describe('getTimeIntervalName', () => {
         expect(getTimeIntervalName(300, intervals)).to.equal('5 minutes');
     });
 });
+
+describe('getIntervalInSeconds', () => {
+    it('should return correct number of seconds for 1-tick interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 1,
+                timeUnit: 'second',
+            })
+        ).to.equal(1);
+    });
+    it('should return correct number of seconds for 1-minute interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 1,
+                timeUnit: 'minute',
+            })
+        ).to.equal(60);
+    });
+    it('should return correct number of seconds for 2-minute interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 2,
+                timeUnit: 'minute',
+            })
+        ).to.equal(120);
+    });
+    it('should return correct number of seconds for 3-minute interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 3,
+                timeUnit: 'minute',
+            })
+        ).to.equal(180);
+    });
+    it('should return correct number of seconds for 5 minutes interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 5,
+                timeUnit: 'minute',
+            })
+        ).to.equal(300);
+    });
+    it('should return correct number of seconds for 10 minutes interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 10,
+                timeUnit: 'minute',
+            })
+        ).to.equal(600);
+    });
+    it('should return correct number of seconds for 15 minutes interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 15,
+                timeUnit: 'minute',
+            })
+        ).to.equal(900);
+    });
+    it('should return correct number of seconds for 30 minutes interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 30,
+                timeUnit: 'minute',
+            })
+        ).to.equal(1800);
+    });
+    it('should return correct number of seconds for 1-hour interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 60,
+                timeUnit: 'minute',
+            })
+        ).to.equal(3600);
+    });
+    it('should return correct number of seconds for 2-hour interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 120,
+                timeUnit: 'minute',
+            })
+        ).to.equal(7200);
+    });
+    it('should return correct number of seconds for 4-hour interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 240,
+                timeUnit: 'minute',
+            })
+        ).to.equal(14400);
+    });
+    it('should return correct number of seconds for 8-hour interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 480,
+                timeUnit: 'minute',
+            })
+        ).to.equal(28800);
+    });
+    it('should return correct number of seconds for 1-day interval', () => {
+        expect(
+            getIntervalInSeconds({
+                interval: 'day',
+                timeUnit: null,
+            })
+        ).to.equal(86400);
+    });
+    it('should return NaN if interval is incorrect', () => {
+        (expect(
+            getIntervalInSeconds({
+                interval: 1,
+                timeUnit: 'day',
+            })
+        ).to.be.NaN as unknown) as () => void;
+    });
+});
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -93,7 +93,7 @@ export const getIntervalInSeconds = ({
     timeUnit,
     interval,
 }: {
-    timeUnit?: string | number;
+    timeUnit?: string | number | null;
     interval?: string | number;
 }) => {
     let unit = timeUnit;
@@ -110,14 +110,14 @@ export const getIntervalInSeconds = ({
         unit = 1;
     }
 
-    if (unit !== undefined && interv !== undefined) {
+    if (unit !== undefined && interv !== undefined && unit !== null) {
         if (typeof unit === 'string') {
             unit = Number(unit);
         }
         if (typeof interv === 'string') {
             interv = Number(interv);
         }
-        return unit * interv;
+        return Number(unit) * interv;
     }
 
     return 0;

Original file line number	Diff line number	Diff line change
`@@ -46,20 +46,6 @@`
`46`	`46`	`}`
`47`	`47`	`}`
`48`	`48`	`}`
`49`		`- &__text {`
`50`		`- @include themify($themes) {`
`51`		`- color: themed('ChartModeText') !important;`
`52`		`- }`
`53`		`- line-height: 18px;`
`54`		`- font-size: 12px;`
`55`		`- font-weight: 400;`
`56`		`- padding: 16px;`
`57`		`- text-align: center;`
`58`		`-`
`59`		`- &--mobile {`
`60`		`- font-size: 11px;`
`61`		`- }`
`62`		`- }`
`63`	`49`	`}`
`64`	`50`	`}`
`65`	`51`
Original file line number	Diff line number	Diff line change
`@@ -132,6 +132,20 @@`
`132`	`132`	`}`
`133`	`133`	`}`
`134`	`134`	`}`
	`135`	`+ .info-footnote {`
	`136`	`+ @include themify($themes) {`
	`137`	`+ color: themed('ChartModeText') !important;`
	`138`	`+ }`
	`139`	`+ line-height: 18px;`
	`140`	`+ font-size: 12px;`
	`141`	`+ font-weight: 400;`
	`142`	`+ padding: 16px;`
	`143`	`+ text-align: center;`
	`144`	`+`
	`145`	`+ &--mobile {`
	`146`	`+ font-size: 11px;`
	`147`	`+ }`
	`148`	`+ }`
`135`	`149`	`}`
`136`	`150`
`137`	`151`	`.tabs {`
Original file line number	Diff line number	Diff line change
`@@ -93,7 +93,7 @@ export const getIntervalInSeconds = ({`
`93`	`93`	`timeUnit,`
`94`	`94`	`interval,`
`95`	`95`	`}: {`
`96`		`- timeUnit?: string \| number;`
	`96`	`+ timeUnit?: string \| number \| null;`
`97`	`97`	`interval?: string \| number;`
`98`	`98`	`}) => {`
`99`	`99`	`let unit = timeUnit;`
`@@ -110,14 +110,14 @@ export const getIntervalInSeconds = ({`
`110`	`110`	`unit = 1;`
`111`	`111`	`}`
`112`	`112`
`113`		`- if (unit !== undefined && interv !== undefined) {`
	`113`	`+ if (unit !== undefined && interv !== undefined && unit !== null) {`
`114`	`114`	`if (typeof unit === 'string') {`
`115`	`115`	`unit = Number(unit);`
`116`	`116`	`}`
`117`	`117`	`if (typeof interv === 'string') {`
`118`	`118`	`interv = Number(interv);`
`119`	`119`	`}`
`120`		`- return unit * interv;`
	`120`	`+ return Number(unit) * interv;`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`return 0;`