DTRA / Kate / DTRA-1434 / Guide component bug fixes (#16394)

* fix: trnslation issue * refactor: replace small localize with big one * fix: height and positioning of the video * refactor: suggestion * refactor: increase height and width of the video * refactor: increase height and width of the video
binary-com · Aug 15, 2024 · 63b747d · 63b747d
1 parent 020c3c3
commit 63b747d
Show file tree

Hide file tree

Showing 16 changed files with 218 additions and 169 deletions.
diff --git a/...s/Guide/Description/ContractDescription/__tests__/accumulators-trade-description.spec.tsx b/...s/Guide/Description/ContractDescription/__tests__/accumulators-trade-description.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TERM } from 'AppV2/Utils/contract-description-utils';
+import { getTerm } from 'AppV2/Utils/contract-description-utils';
 import AccumulatorsTradeDescription from '../accumulators-trade-description';
 
 jest.mock('@lottiefiles/dotlottie-react', () => ({
@@ -24,7 +24,7 @@ describe('AccumulatorsTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<AccumulatorsTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.GROWTH_RATE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().GROWTH_RATE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -33,7 +33,7 @@ describe('AccumulatorsTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<AccumulatorsTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.RANGE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().RANGE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -42,7 +42,7 @@ describe('AccumulatorsTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<AccumulatorsTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.PREVIOUS_SPOT_PRICE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().PREVIOUS_SPOT_PRICE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -51,7 +51,7 @@ describe('AccumulatorsTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<AccumulatorsTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.PAYOUT.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().PAYOUT.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -60,7 +60,7 @@ describe('AccumulatorsTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<AccumulatorsTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.TAKE_PROFIT }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().TAKE_PROFIT }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -69,7 +69,7 @@ describe('AccumulatorsTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<AccumulatorsTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.SLIPPAGE_RISK.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().SLIPPAGE_RISK.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });

diff --git a/...nts/Guide/Description/ContractDescription/__tests__/multiplier-trade-description.spec.tsx b/...nts/Guide/Description/ContractDescription/__tests__/multiplier-trade-description.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TERM } from 'AppV2/Utils/contract-description-utils';
+import { getTerm } from 'AppV2/Utils/contract-description-utils';
 import MultipliersTradeDescription from '../multipliers-trade-description';
 
 jest.mock('@lottiefiles/dotlottie-react', () => ({
@@ -21,7 +21,7 @@ describe('MultipliersTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<MultipliersTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.STOP_OUT_LEVEL.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().STOP_OUT_LEVEL.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -30,7 +30,7 @@ describe('MultipliersTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<MultipliersTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.TAKE_PROFIT }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().TAKE_PROFIT }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -39,7 +39,7 @@ describe('MultipliersTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<MultipliersTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.STOP_LOSS }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().STOP_LOSS }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -48,7 +48,7 @@ describe('MultipliersTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<MultipliersTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.DEAL_CANCELLATION }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().DEAL_CANCELLATION }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -57,7 +57,7 @@ describe('MultipliersTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<MultipliersTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.SLIPPAGE_RISK.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().SLIPPAGE_RISK.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });

diff --git a/...ponents/Guide/Description/ContractDescription/__tests__/turbos-trade-description.spec.tsx b/...ponents/Guide/Description/ContractDescription/__tests__/turbos-trade-description.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TERM } from 'AppV2/Utils/contract-description-utils';
+import { getTerm } from 'AppV2/Utils/contract-description-utils';
 import TurbosTradeDescription from '../turbos-trade-description';
 
 jest.mock('@lottiefiles/dotlottie-react', () => ({
@@ -19,7 +19,7 @@ describe('TurbosTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<TurbosTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.PAYOUT.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().PAYOUT.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -28,7 +28,7 @@ describe('TurbosTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<TurbosTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.EXPIRY.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().EXPIRY.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -37,7 +37,7 @@ describe('TurbosTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<TurbosTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.BARRIER.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().BARRIER.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -46,7 +46,7 @@ describe('TurbosTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<TurbosTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.PAYOUT_PER_POINT.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().PAYOUT_PER_POINT.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -55,7 +55,7 @@ describe('TurbosTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<TurbosTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.FINAL_PRICE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().FINAL_PRICE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -64,7 +64,7 @@ describe('TurbosTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<TurbosTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.CONTRACT_VALUE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().CONTRACT_VALUE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });

diff --git a/...nents/Guide/Description/ContractDescription/__tests__/vanillas-trade-description.spec.tsx b/...nents/Guide/Description/ContractDescription/__tests__/vanillas-trade-description.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TERM } from 'AppV2/Utils/contract-description-utils';
+import { getTerm } from 'AppV2/Utils/contract-description-utils';
 import VanillasTradeDescription from '../vanillas-trade-description';
 
 jest.mock('@lottiefiles/dotlottie-react', () => ({
@@ -19,7 +19,7 @@ describe('VanillasTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<VanillasTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.PAYOUT.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().PAYOUT.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -28,7 +28,7 @@ describe('VanillasTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<VanillasTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.FINAL_PRICE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().FINAL_PRICE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -37,7 +37,7 @@ describe('VanillasTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<VanillasTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.STRIKE_PRICE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().STRIKE_PRICE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -46,7 +46,7 @@ describe('VanillasTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<VanillasTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.EXPIRY.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().EXPIRY.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -55,7 +55,7 @@ describe('VanillasTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<VanillasTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.PAYOUT_PER_POINT.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().PAYOUT_PER_POINT.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });
@@ -64,7 +64,7 @@ describe('VanillasTradeDescription', () => {
         const onTermClick = jest.fn();
         render(<VanillasTradeDescription onTermClick={onTermClick} />);
 
-        userEvent.click(screen.getByRole('button', { name: TERM.CONTRACT_VALUE.toLowerCase() }));
+        userEvent.click(screen.getByRole('button', { name: getTerm().CONTRACT_VALUE.toLowerCase() }));
 
         expect(onTermClick).toHaveBeenCalled();
     });

diff --git a/...AppV2/Components/Guide/Description/ContractDescription/accumulators-trade-description.tsx b/...AppV2/Components/Guide/Description/ContractDescription/accumulators-trade-description.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Localize } from '@deriv/translations';
 import { CONTRACT_LIST } from 'AppV2/Utils/trade-types-utils';
-import { TERM, getContractDescription } from 'AppV2/Utils/contract-description-utils';
+import { getTerm, getContractDescription } from 'AppV2/Utils/contract-description-utils';
 
 const AccumulatorsTradeDescription = ({ onTermClick }: { onTermClick: (term: string) => void }) => {
+    const { GROWTH_RATE, RANGE, PREVIOUS_SPOT_PRICE, PAYOUT, TAKE_PROFIT, SLIPPAGE_RISK } = getTerm();
     const content = [
         {
             type: 'paragraph',
@@ -14,7 +15,7 @@ const AccumulatorsTradeDescription = ({ onTermClick }: { onTermClick: (term: str
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.GROWTH_RATE)}
+                            onClick={() => onTermClick(GROWTH_RATE)}
                         />,
                     ]}
                 />
@@ -33,12 +34,12 @@ const AccumulatorsTradeDescription = ({ onTermClick }: { onTermClick: (term: str
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.RANGE)}
+                            onClick={() => onTermClick(RANGE)}
                         />,
                         <button
                             className='description__content--definition'
                             key={1}
-                            onClick={() => onTermClick(TERM.PREVIOUS_SPOT_PRICE)}
+                            onClick={() => onTermClick(PREVIOUS_SPOT_PRICE)}
                         />,
                     ]}
                 />
@@ -53,7 +54,7 @@ const AccumulatorsTradeDescription = ({ onTermClick }: { onTermClick: (term: str
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.PAYOUT)}
+                            onClick={() => onTermClick(PAYOUT)}
                         />,
                     ]}
                 />
@@ -68,7 +69,7 @@ const AccumulatorsTradeDescription = ({ onTermClick }: { onTermClick: (term: str
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.TAKE_PROFIT)}
+                            onClick={() => onTermClick(TAKE_PROFIT)}
                         />,
                     ]}
                 />
@@ -83,7 +84,7 @@ const AccumulatorsTradeDescription = ({ onTermClick }: { onTermClick: (term: str
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.SLIPPAGE_RISK)}
+                            onClick={() => onTermClick(SLIPPAGE_RISK)}
                         />,
                     ]}
                 />

diff --git a/.../AppV2/Components/Guide/Description/ContractDescription/multipliers-trade-description.tsx b/.../AppV2/Components/Guide/Description/ContractDescription/multipliers-trade-description.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Localize } from '@deriv/translations';
-import { TERM, getContractDescription } from 'AppV2/Utils/contract-description-utils';
+import { getTerm, getContractDescription } from 'AppV2/Utils/contract-description-utils';
 
 const MultipliersTradeDescription = ({ onTermClick }: { onTermClick: (term: string) => void }) => {
+    const { STOP_OUT_LEVEL, TAKE_PROFIT, STOP_LOSS, DEAL_CANCELLATION, SLIPPAGE_RISK } = getTerm();
     const content = [
         {
             type: 'general',
@@ -57,7 +58,7 @@ const MultipliersTradeDescription = ({ onTermClick }: { onTermClick: (term: stri
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.STOP_OUT_LEVEL)}
+                            onClick={() => onTermClick(STOP_OUT_LEVEL)}
                         />,
                     ]}
                 />
@@ -72,17 +73,17 @@ const MultipliersTradeDescription = ({ onTermClick }: { onTermClick: (term: stri
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.TAKE_PROFIT)}
+                            onClick={() => onTermClick(TAKE_PROFIT)}
                         />,
                         <button
                             className='description__content--definition'
                             key={1}
-                            onClick={() => onTermClick(TERM.STOP_LOSS)}
+                            onClick={() => onTermClick(STOP_LOSS)}
                         />,
                         <button
                             className='description__content--definition'
                             key={2}
-                            onClick={() => onTermClick(TERM.DEAL_CANCELLATION)}
+                            onClick={() => onTermClick(DEAL_CANCELLATION)}
                         />,
                     ]}
                 />
@@ -97,7 +98,7 @@ const MultipliersTradeDescription = ({ onTermClick }: { onTermClick: (term: stri
                         <button
                             className='description__content--definition'
                             key={0}
-                            onClick={() => onTermClick(TERM.SLIPPAGE_RISK)}
+                            onClick={() => onTermClick(SLIPPAGE_RISK)}
                         />,
                     ]}
                 />