Merge branch 'master' into remove_effortless_modal/add_passkey_notifi…

…cation
deriv-com · Jun 25, 2024 · b1c2ffd · b1c2ffd
2 parents 5f70538 + 93e7fd1
commit b1c2ffd
Show file tree

Hide file tree

Showing 143 changed files with 3,576 additions and 765 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx
@@ -18,6 +18,7 @@ import AddOptionsAccount from 'Components/add-options-account';
 import TradingAppCard from 'Components/containers/trading-app-card';
 import PlatformLoader from 'Components/pre-loader/platform-loader';
 import CompareAccount from 'Components/compare-account';
+import CFDsDescription from 'Components/elements/cfds-description';
 import { getHasDivider } from 'Constants/utils';
 import { useMT5SVGEligibleToMigrate } from '@deriv/hooks';
 import './cfds-listing.scss';
@@ -194,16 +195,7 @@ const CFDsListing = observer(() => {
                     </div>
                 )
             }
-            description={
-                <Text size='xs' line_height='s'>
-                    <Localize
-                        i18n_default_text={
-                            'Trade bigger positions with less capital across diverse financial and derived instruments. <0>Learn more</0>'
-                        }
-                        components={[<StaticUrl key={0} className='options' href='/trade-types/cfds' />]}
-                    />
-                </Text>
-            }
+            description={<CFDsDescription />}
         >
             {isMobile() && <CompareAccount accounts_sub_text={accounts_sub_text} />}
             <AddDerivAccount />

diff --git a/packages/appstore/src/components/elements/cfds-description/cfds-description.tsx b/packages/appstore/src/components/elements/cfds-description/cfds-description.tsx
@@ -6,7 +6,7 @@ const CFDsDescription = () => {
     return (
         <Text size='xs' line_height='s'>
             <Localize
-                i18n_default_text='Trade bigger positions with less capital across diverse financial and derived instruments. <0>Learn more</0>'
+                i18n_default_text='Trade bigger positions with less capital on a wide range of global markets. <0>Learn more</0>'
                 components={[<StaticUrl key={0} className='options' href='/trade-types/cfds' />]}
             />
         </Text>

diff --git a/packages/appstore/src/components/elements/options-description/options-description.tsx b/packages/appstore/src/components/elements/options-description/options-description.tsx
@@ -8,17 +8,17 @@ type TOptionsDescription = {
 
 const OptionsDescription = ({ is_eu_user }: TOptionsDescription) => {
     return is_eu_user ? (
-        <Text size='xs'>
+        <Text size='xs' line_height='s'>
             <Localize
                 i18n_default_text='Multipliers let you trade with leverage and limit your risk to your stake. <0>Learn more</0>'
                 components={[<StaticUrl key={0} className='options' href='trade-types/multiplier/' />]}
             />
         </Text>
     ) : (
         <div>
-            <Text size='xs'>
+            <Text size='xs' line_height='s'>
                 <Localize
-                    i18n_default_text='Buy or sell at a specific time for a specific price. <0>Learn more</0>'
+                    i18n_default_text='Predict the market, profit if you’re right, risk only what you put in. <0>Learn more</0>'
                     components={[
                         <StaticUrl
                             key={0}

diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx
@@ -10,6 +10,7 @@ import { BrandConfig } from 'Constants/platform-config';
 import { getHasDivider } from 'Constants/utils';
 import { Analytics } from '@deriv-com/analytics';
 import PlatformLoader from 'Components/pre-loader/platform-loader';
+import OptionsDescription from 'Components/elements/options-description';
 
 const OptionsAndMultipliersListing = observer(() => {
     const { traders_hub, client, ui } = useStore();
@@ -62,29 +63,7 @@ const OptionsAndMultipliersListing = observer(() => {
     return (
         <ListingContainer
             title={<OptionsTitle />}
-            description={
-                low_risk_cr_non_eu || high_risk_cr || cr_demo ? (
-                    <Text size='xs' line_height='s'>
-                        <Localize
-                            i18n_default_text='Buy or sell at a specific time for a specific price. <0>Learn more</0>'
-                            components={[
-                                <StaticUrl
-                                    key={0}
-                                    className='options'
-                                    href='trade-types/options/digital-options/up-and-down/'
-                                />,
-                            ]}
-                        />
-                    </Text>
-                ) : (
-                    <Text size='xs' line_height='s'>
-                        <Localize
-                            i18n_default_text='Multipliers let you trade with leverage and limit your risk to your stake. <0>Learn more</0>'
-                            components={[<StaticUrl key={0} className='options' href='trade-types/multiplier/' />]}
-                        />
-                    </Text>
-                )
-            }
+            description={<OptionsDescription is_eu_user={!(low_risk_cr_non_eu || high_risk_cr || cr_demo)} />}
             is_deriv_platform
         >
             {is_real && (no_CR_account || no_MF_account) && (

diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
@@ -76,7 +76,7 @@
         "@deriv/api-types": "1.0.172",
         "@deriv/bot-skeleton": "^1.0.0",
         "@deriv/components": "^1.0.0",
-        "@deriv/deriv-charts": "^2.1.21",
+        "@deriv/deriv-charts": "^2.1.22",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

diff --git a/packages/cashier-v2/src/types.ts b/packages/cashier-v2/src/types.ts
@@ -34,6 +34,7 @@ declare module 'react-router-dom' {
             state: Record<string, unknown>;
         };
         push: (path: TRouteTypes.TRoutes) => void;
+        goBack: () => void;
     };
 
     export function useRouteMatch(path: TRouteTypes.TRoutes): boolean;

diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts
@@ -11,7 +11,7 @@ export const getJurisdictionBviContents = ({
             key: 'assets',
             title: localize('Assets'),
             description: localize(
-                'Forex (standard), stock indices, commodities, cryptocurrencies, synthetic indices, basket indices and derived FX'
+                'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
             ),
             title_indicators: {
                 type: 'displayText',

diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts
@@ -11,7 +11,7 @@ export const getJurisdictionSvgContents = ({
             key: 'assets',
             title: localize('Assets'),
             description: localize(
-                'Forex (standard), stock indices, commodities, cryptocurrencies, synthetic indices, basket indices and derived FX'
+                'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
             ),
             title_indicators: {
                 type: 'displayText',

diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts
@@ -11,7 +11,7 @@ export const getJurisdictionVanuatuContents = ({
             key: 'assets',
             title: localize('Assets'),
             description: localize(
-                'Forex (standard), stock indices, commodities, cryptocurrencies, synthetic indices, basket indices and derived FX'
+                'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
             ),
             title_indicators: {
                 type: 'displayText',

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx
@@ -5,6 +5,7 @@ import { Text, Icon, PageOverlay, DesktopWrapper, MobileWrapper, CFDCompareAccou
 import { routes } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
+import { useIsRtl } from '@deriv/hooks';
 import CFDCompareAccountsCard from './cfd-compare-accounts-card';
 import {
     getSortedCFDAvailableAccounts,
@@ -18,6 +19,7 @@ import {
 import { REGION } from '../../Helpers/cfd-config';
 
 const CompareCFDs = observer(() => {
+    const is_rtl = useIsRtl();
     const history = useHistory();
     const store = useStore();
     const { client, traders_hub } = store;
@@ -106,7 +108,7 @@ const CompareCFDs = observer(() => {
                         })}
                     >
                         <div className='card-list'>
-                            <CFDCompareAccountsCarousel>
+                            <CFDCompareAccountsCarousel isRtl={is_rtl}>
                                 {all_cfd_available_accounts.map(item => (
                                     <CFDCompareAccountsCard
                                         trading_platforms={item}
@@ -148,7 +150,7 @@ const CompareCFDs = observer(() => {
                             'compare-cfd-account-container__card-count--mobile': card_count < 2,
                         })}
                     >
-                        <CFDCompareAccountsCarousel>
+                        <CFDCompareAccountsCarousel isRtl={is_rtl}>
                             {all_cfd_available_accounts.map(item => (
                                 <CFDCompareAccountsCard
                                     trading_platforms={item}

diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx
@@ -197,7 +197,7 @@ describe('JurisdictionCard', () => {
         expect(screen.getByText('210+')).toBeInTheDocument();
         expect(
             screen.getByText(
-                'Forex (standard), stock indices, commodities, cryptocurrencies, synthetic indices, basket indices and derived FX'
+                'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
             )
         ).toBeInTheDocument();
         expect(screen.getByText('Leverage')).toBeInTheDocument();

diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx
@@ -203,7 +203,7 @@ describe('JurisdictionModalContent', () => {
         expect(screen.getAllByText('Assets')).toHaveLength(3);
         expect(
             screen.getAllByText(
-                'Forex (standard), stock indices, commodities, cryptocurrencies, synthetic indices, basket indices and derived FX'
+                'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
             )
         ).toHaveLength(3);
         expect(screen.getAllByText('210+')).toHaveLength(3);
@@ -356,7 +356,7 @@ describe('JurisdictionModalContent', () => {
         expect(screen.getByText('210+')).toBeInTheDocument();
         expect(
             screen.getByText(
-                'Forex (standard), stock indices, commodities, cryptocurrencies, synthetic indices, basket indices and derived FX'
+                'Forex (standard), stock indices, commodities, cryptocurrencies, stocks, ETFs, synthetic indices, basket indices and derived FX'
             )
         ).toBeInTheDocument();
     });

diff --git a/packages/cfd/src/Helpers/compare-accounts-config.ts b/packages/cfd/src/Helpers/compare-accounts-config.ts
@@ -30,11 +30,11 @@ const getHighlightedIconLabel = (
         case MARKET_TYPE.GAMING:
             return [
                 { icon: 'Forex', text: getForexLabel(), highlighted: true },
-                { icon: 'Stocks', text: localize('Stocks'), highlighted: false },
+                { icon: 'Stocks', text: localize('Stocks'), highlighted: true },
                 { icon: 'StockIndices', text: localize('Stock indices'), highlighted: true },
                 { icon: 'Commodities', text: localize('Commodities'), highlighted: true },
                 { icon: 'Cryptocurrencies', text: localize('Cryptocurrencies'), highlighted: true },
-                { icon: 'ETF', text: localize('ETFs'), highlighted: false },
+                { icon: 'ETF', text: localize('ETFs'), highlighted: true },
                 { icon: 'Synthetics', text: localize('Synthetic indices'), highlighted: true },
                 { icon: 'Baskets', text: localize('Basket indices'), highlighted: true },
                 { icon: 'DerivedFX', text: localize('Derived FX'), highlighted: true },

diff --git a/...nts/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel-button.tsx b/...nts/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel-button.tsx
@@ -5,11 +5,15 @@ import Icon from '../icon';
 type TPrevNextButtonProps = {
     enabled: boolean;
     onClick: () => void;
-    isNext: boolean;
+    isNext?: boolean;
+    isRtl?: boolean;
 };
 
 const CFDCompareAccountsCarouselButton = (props: TPrevNextButtonProps) => {
-    const { enabled, onClick, isNext } = props;
+    const { enabled, onClick, isNext = false, isRtl = false } = props;
+
+    const nextButtonName = isRtl ? 'IcChevronLeftBold' : 'IcChevronRightBold';
+    const prevButtonName = isRtl ? 'IcChevronRightBold' : 'IcChevronLeftBold';
 
     return (
         <button
@@ -21,7 +25,7 @@ const CFDCompareAccountsCarouselButton = (props: TPrevNextButtonProps) => {
             disabled={!enabled}
         >
             <Icon
-                icon={isNext ? 'IcChevronRightBold' : 'IcChevronLeftBold'}
+                icon={isNext ? nextButtonName : prevButtonName}
                 className='cfd-compare-accounts-carousel__button__svg'
             />
         </button>

diff --git a/...components/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel.tsx b/...components/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel.tsx
@@ -4,12 +4,14 @@ import CFDCompareAccountsCarouselButton from './cfd-compare-accounts-carousel-bu
 
 type TCFDCompareAccountsCarousel = {
     children: React.ReactNode;
+    isRtl?: boolean;
 };
 
-const CFDCompareAccountsCarousel = (props: TCFDCompareAccountsCarousel) => {
+const CFDCompareAccountsCarousel = ({ children, isRtl = false }: TCFDCompareAccountsCarousel) => {
     const options: EmblaOptionsType = {
         align: 0,
         containScroll: 'trimSnaps',
+        direction: isRtl ? 'rtl' : 'ltr',
     };
     const [emblaRef, emblaApi] = useEmblaCarousel(options);
     const [prev_btn_enabled, setPrevBtnEnabled] = React.useState(false);
@@ -34,10 +36,10 @@ const CFDCompareAccountsCarousel = (props: TCFDCompareAccountsCarousel) => {
     return (
         <div className='cfd-compare-accounts-carousel'>
             <div className='cfd-compare-accounts-carousel__viewport' ref={emblaRef}>
-                <div className='cfd-compare-accounts-carousel__container'>{props.children}</div>
+                <div className='cfd-compare-accounts-carousel__container'>{children}</div>
             </div>
-            <CFDCompareAccountsCarouselButton onClick={scrollPrev} isNext={false} enabled={prev_btn_enabled} />
-            <CFDCompareAccountsCarouselButton onClick={scrollNext} isNext={true} enabled={next_btn_enabled} />
+            <CFDCompareAccountsCarouselButton onClick={scrollPrev} enabled={prev_btn_enabled} isRtl={isRtl} />
+            <CFDCompareAccountsCarouselButton onClick={scrollNext} isNext enabled={next_btn_enabled} isRtl={isRtl} />
         </div>
     );
 };

diff --git a/...ages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx b/...ages/components/src/components/contract-card/contract-card-items/multiplier-card-body.jsx
@@ -44,6 +44,7 @@ const MultiplierCardBody = ({
                     'dc-contract-card-items-wrapper': !is_mobile,
                     'dc-contract-card-items-wrapper--has-progress-slider': has_progress_slider && !is_sold,
                 })}
+                data-testid='dt_multiplier_card_body'
             >
                 <ContractCardItem header={CONTRACT_COST} className='dc-contract-card__stake'>
                     <Money amount={buy_price - cancellation_price} currency={currency} />

diff --git a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx
@@ -30,7 +30,7 @@ const ProgressSliderMobile = ({
 }: TProgressSliderMobileProps) => {
     const percentage = getTimePercentage(server_time, Number(start_time), Number(expiry_time));
     return (
-        <div className={classNames('dc-progress-slider-mobile', className)}>
+        <div className={classNames('dc-progress-slider-mobile', className)} data-testid='dt_progress_slider_mobile'>
             {ticks_count ? (
                 <ProgressTicksMobile
                     current_tick={current_tick}

diff --git a/packages/components/src/components/remaining-time/remaining-time.tsx b/packages/components/src/components/remaining-time/remaining-time.tsx
@@ -11,9 +11,17 @@ type TRemainingTimeProps = {
     start_time: moment.Moment;
     format?: string;
     getCardLabels: TGetCardLables;
+    className?: string;
 };
 
-const RemainingTime = ({ as = 'div', end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => {
+const RemainingTime = ({
+    as = 'div',
+    end_time,
+    format,
+    getCardLabels,
+    start_time,
+    className = 'dc-remaining-time',
+}: TRemainingTimeProps) => {
     const Tag = as;
     if (!end_time || start_time.unix() > +end_time) {
         return <React.Fragment>{''}</React.Fragment>;
@@ -26,7 +34,7 @@ const RemainingTime = ({ as = 'div', end_time, format, getCardLabels, start_time
     }
     const is_zeroes = /^00:00$/.test(remaining_time);
 
-    return <React.Fragment>{!is_zeroes && <Tag className='dc-remaining-time'>{remaining_time}</Tag>}</React.Fragment>;
+    return <React.Fragment>{!is_zeroes && <Tag className={className}>{remaining_time}</Tag>}</React.Fragment>;
 };
 
 export default RemainingTime;
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -110,7 +110,7 @@
         "@deriv/cfd": "^1.0.0",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.15",
-        "@deriv/deriv-charts": "^2.1.21",
+        "@deriv/deriv-charts": "^2.1.22",
         "@deriv/hooks": "^1.0.0",
         "@deriv/p2p": "^0.7.3",
         "@deriv/p2p-v2": "^1.0.0",