[WALL] Lubega / WALL-3411 / Update deriv apps to options (#14337)

* feat: update deriv apps to options * feat: update deriv apps to options * fix: failed unit test * fix: update content
deriv-com · Apr 2, 2024 · 2ebda39 · 2ebda39
1 parent 102085f
commit 2ebda39
Show file tree

Hide file tree

Showing 14 changed files with 31 additions and 38 deletions.
diff --git a/...rc/App/Containers/AccountSwitcherWallet/__tests__/account-switcher-wallet-mobile.spec.tsx b/...rc/App/Containers/AccountSwitcherWallet/__tests__/account-switcher-wallet-mobile.spec.tsx
@@ -60,7 +60,7 @@ describe('AccountSwitcherWalletMobile', () => {
             },
         });
         render(<AccountSwitcherWalletMobile {...props} />, { wrapper: wrapper(store) });
-        expect(screen.getByText('Deriv Apps accounts')).toBeInTheDocument();
+        expect(screen.getByText('Options accounts')).toBeInTheDocument();
         expect(screen.getByText('AccountSwitcherWalletList')).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Manage funds' })).toBeInTheDocument();
         expect(screen.getByText('Looking for CFDs? Go to Trader’s Hub')).toBeInTheDocument();

diff --git a/.../core/src/App/Containers/AccountSwitcherWallet/__tests__/account-switcher-wallet.spec.tsx b/.../core/src/App/Containers/AccountSwitcherWallet/__tests__/account-switcher-wallet.spec.tsx
@@ -42,7 +42,7 @@ describe('AccountSwitcherWalletComponent', () => {
         });
 
         render(<AccountSwitcherWallet {...props} />, { wrapper: wrapper(mock) });
-        expect(screen.getByText('Deriv Apps accounts')).toBeInTheDocument();
+        expect(screen.getByText('Options accounts')).toBeInTheDocument();
         expect(screen.getByText('AccountSwitcherWalletList')).toBeInTheDocument();
         expect(screen.getByText('Looking for CFDs? Go to Trader’s Hub')).toBeInTheDocument();
     });

diff --git a/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-item.tsx b/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-item.tsx
@@ -70,7 +70,7 @@ export const AccountSwitcherWalletItem = observer(
                 </div>
                 <div className='acc-switcher-wallet-item__content'>
                     <Text size='xxxs'>
-                        <Localize i18n_default_text='Deriv Apps' />
+                        <Localize i18n_default_text='Options' />
                     </Text>
                     <Text size='xxxs'>
                         {is_virtual ? (

diff --git a/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-mobile.tsx b/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-mobile.tsx
@@ -51,7 +51,7 @@ export const AccountSwitcherWalletMobile = observer(({ is_visible, toggle, login
             onClose={closeAccountsDialog}
             has_close_icon
             has_full_height
-            title={<Localize i18n_default_text='Deriv Apps accounts' />}
+            title={<Localize i18n_default_text='Options accounts' />}
         >
             <div className='account-switcher-wallet-mobile'>
                 <AccountSwitcherWalletList wallets={dtrade_account_wallets} closeAccountsDialog={closeAccountsDialog} />

diff --git a/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet.tsx b/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet.tsx
@@ -47,7 +47,7 @@ export const AccountSwitcherWallet = observer(({ is_visible, toggle }: TAccountS
         <div className='account-switcher-wallet' ref={wrapper_ref}>
             <div className='account-switcher-wallet__header'>
                 <Text as='h4' weight='bold' size='xs'>
-                    <Localize i18n_default_text='Deriv Apps accounts' />
+                    <Localize i18n_default_text='Options accounts' />
                 </Text>
             </div>
             <ThemedScrollbars height={450}>

diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx
@@ -25,7 +25,7 @@ const AccountsList = ({ isWalletSettled }: TProps) => {
     if (isMobile) {
         return (
             <WalletsPrimaryTabs className='wallets-accounts-list'>
-                <WalletsPrimaryTabList list={[t('CFDs'), t('Options & multipliers')]} />
+                <WalletsPrimaryTabList list={[t('CFDs'), t('Options')]} />
                 <WalletsPrimaryTabPanels>
                     <WalletsPrimaryTabPanel>
                         <CFDPlatformsList onMT5PlatformListLoaded={setIsMT5PlatformListLoaded} />

diff --git a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx
@@ -51,12 +51,12 @@ describe('AccountsList', () => {
         expect(screen.getByTestId('dt_tab_list')).toBeInTheDocument();
         expect(screen.getByTestId('dt_tab_panels')).toBeInTheDocument();
         expect(screen.getByText('CFDs')).toBeInTheDocument();
-        expect(screen.getByText('Options & multipliers')).toBeInTheDocument();
+        expect(screen.getByText('Options')).toBeInTheDocument();
         expect(screen.getByText('Deriv MT5')).toBeInTheDocument();
         expect(screen.getByText('Compare accounts')).toBeInTheDocument();
     });
 
-    it('should show Options & Multipliers tab in mobile view when the tab active', () => {
+    it('should show Options tab in mobile view when the tab active', () => {
         mockUseDevice.mockReturnValue({
             isDesktop: false,
             isMobile: true,
@@ -65,10 +65,10 @@ describe('AccountsList', () => {
         render(<AccountsList isWalletSettled={true} />, { wrapper });
         expect(screen.getByTestId('dt_tab_panels')).toBeInTheDocument();
         expect(screen.getByText('CFDs')).toBeInTheDocument();
-        expect(screen.getByText('Options & multipliers')).toBeInTheDocument();
+        expect(screen.getAllByText('Options')[0]).toBeInTheDocument();
 
-        screen.getByText('Options & multipliers').click();
-        expect(screen.getByText('Deriv Apps')).toBeInTheDocument();
+        screen.getAllByText('Options')[0].click();
+        expect(screen.getAllByText('Options')[0]).toBeInTheDocument();
         expect(screen.getByText('Deriv Trader')).toBeInTheDocument();
         expect(screen.getByText('Deriv Bot')).toBeInTheDocument();
         expect(screen.getByText('SmartTrader')).toBeInTheDocument();
@@ -86,7 +86,7 @@ describe('AccountsList', () => {
 
         expect(screen.getByTestId('dt_desktop_accounts_list')).toBeInTheDocument();
         expect(screen.getByText('CFDs')).toBeInTheDocument();
-        expect(screen.getByText('Options & Multipliers')).toBeInTheDocument();
+        expect(screen.getAllByText('Options')[0]).toBeInTheDocument();
     });
 
     it('should render wallet tour guide in mobile view with isWalletSettled set to false', () => {

diff --git a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx
@@ -58,10 +58,10 @@ const DerivAppsGetAccount: React.FC = () => {
                     shouldHideHeader={isDesktop}
                 >
                     <CFDSuccess
-                        description={`Transfer funds from your ${activeWallet?.wallet_currency_type} Wallet to your Deriv Apps (${landingCompanyName}) account to start trading.`}
+                        description={`Transfer funds from your ${activeWallet?.wallet_currency_type} Wallet to your Options (${landingCompanyName}) account to start trading.`}
                         displayBalance={activeLinkedToTradingAccount?.display_balance ?? '0.00'}
                         renderButton={() => <DerivAppsSuccessFooter />}
-                        title={`Your Deriv Apps (${landingCompanyName}) account is ready`}
+                        title={`Your Options (${landingCompanyName}) account is ready`}
                     />
                 </ModalStepWrapper>,
                 {
@@ -80,12 +80,10 @@ const DerivAppsGetAccount: React.FC = () => {
             <div className='wallets-deriv-apps-section__get-content'>
                 <div className='wallets-deriv-apps-section__details'>
                     <WalletText size='sm' weight='bold'>
-                        Deriv Apps
+                        Options
                     </WalletText>
                     <WalletText size={isDesktop ? '2xs' : 'xs'}>
-                        {activeWallet?.is_malta_wallet
-                            ? 'Get a Deriv Apps trading account regulated by MFSA to trade multipliers on Deriv Trader.'
-                            : 'Get a Deriv Apps trading account to trade options and multipliers on these apps.'}
+                        Trade options on multiple platforms with a single account.
                     </WalletText>
                 </div>
                 <WalletButton color='primary-light' onClick={createTradingAccount}>

diff --git a/packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx b/packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx
@@ -20,7 +20,7 @@ const DerivAppsTradingAccount: React.FC = () => {
             </div>
             <div className='wallets-deriv-apps-section__details'>
                 <div className='wallets-deriv-apps-section__title-and-badge'>
-                    <WalletText size='sm'>Deriv Apps</WalletText>
+                    <WalletText size='sm'>Options</WalletText>
                     <WalletListCardBadge isDemo={activeWallet?.is_virtual} label={activeWallet?.landing_company_name} />
                 </div>
                 {isLoading ? (

diff --git a/...ges/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss b/...ges/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss
@@ -25,6 +25,7 @@
             display: flex;
             flex-direction: column;
             align-items: flex-start;
+            width: 100%;
         }
 
         @include mobile {

diff --git a/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
@@ -103,23 +103,17 @@ const OptionsAndMultipliersListing: React.FC<TOptionsAndMultipliersListingProps>
                 <div className='wallets-options-and-multipliers-listing__header-title'>
                     {!isMobile && (
                         <WalletText align='center' size='xl' weight='bold'>
-                            <Trans defaults='Options & Multipliers' />
+                            <Trans defaults='Options' />
                         </WalletText>
                     )}
-                    <div>
-                        <WalletText size={isMobile ? 'sm' : 'md'}>
-                            <Trans
-                                components={[
-                                    <WalletLink
-                                        key={0}
-                                        staticUrl='/trade-types/options/digital-options/up-and-down/'
-                                    />,
-                                    <WalletLink key={1} staticUrl='/trade-types/multiplier/' />,
-                                ]}
-                                defaults='Earn a range of payouts by correctly predicting market price movements with <0>options</0>, or get the upside of CFDs without risking more than your initial stake with <1>multipliers</1>.'
-                            />
-                        </WalletText>
-                    </div>
+                    <WalletText size={isMobile ? 'sm' : 'md'}>
+                        <Trans
+                            components={[
+                                <WalletLink key={0} staticUrl='/trade-types/options/digital-options/up-and-down/' />,
+                            ]}
+                            defaults='Buy or sell at a specific time for a specific price. <0>Learn more</0>'
+                        />
+                    </WalletText>
                 </div>
                 <DerivAppsSection />
             </section>

diff --git a/packages/wallets/src/features/cashier/constants/constants.ts b/packages/wallets/src/features/cashier/constants/constants.ts
@@ -193,6 +193,6 @@ export const PlatformDetails = {
             light: 'IcWalletOptionsLight',
         },
         name: 'standard',
-        title: 'Deriv Apps',
+        title: 'Options',
     },
 } as const;
diff --git a/packages/wallets/src/features/cfd/CFDPlatformsList.tsx b/packages/wallets/src/features/cfd/CFDPlatformsList.tsx
@@ -34,7 +34,7 @@ const CFDPlatformsList: React.FC<TProps> = ({ onMT5PlatformListLoaded }) => {
                                         target='_blank'
                                     />,
                                 ]}
-                                defaults='Trade with leverage and tight spreads for better returns on trades. <0>Learn more</0>'
+                                defaults='Trade bigger positions with less capital. <0>Learn more</0>'
                             />
                         </WalletText>
                         <WalletButton
@@ -67,7 +67,7 @@ const CFDPlatformsList: React.FC<TProps> = ({ onMT5PlatformListLoaded }) => {
                         <WalletText size='md'>
                             <Trans
                                 components={[<WalletLink key={0} staticUrl='/trade-types/cfds/' />]}
-                                defaults='Trade with leverage and tight spreads for better returns on trades. <0>Learn more</0>'
+                                defaults='Trade bigger positions with less capital. <0>Learn more</0>'
                             />
                         </WalletText>
                     </div>

diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx
@@ -40,7 +40,7 @@ const CFDSuccess: React.FC<TSuccessProps> = ({
         marketType === 'all' &&
         (platform === PlatformDetails.dxtrade.platform || platform === PlatformDetails.ctrader.platform);
 
-    let marketTypeTitle = 'Deriv Apps';
+    let marketTypeTitle = 'Options';
 
     if (marketType && platform) {
         const isPlatformValid = Object.keys(PlatformDetails).includes(platform);