[WALL] Lubega / WALL-4689 / Replace wallets action screen with deriv-com/ui

packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx

@@ -418,15 +418,15 @@ const AccountWizard = observer(props => {
                     closeRealAccountSignup();
                     setShouldShowSameDOBPhoneModal(true);
                 } else if (modifiedProps.real_account_signup_target === 'maltainvest') {
+                    modifiedProps.onOpenDepositModal();
+                } else if (modifiedProps.real_account_signup_target === 'samoa') {
+                    modifiedProps.onOpenWelcomeModal(response.new_account_samoa.currency.toLowerCase());
+                } else {
+                    if (direct_deposit_flow) {
                         modifiedProps.onOpenDepositModal();
-                    } else if (modifiedProps.real_account_signup_target === 'samoa') {
-                        modifiedProps.onOpenWelcomeModal(response.new_account_samoa.currency.toLowerCase());
-                    } else {
-                        if (direct_deposit_flow) {
-                            modifiedProps.onOpenDepositModal();
-                        }
-                        modifiedProps.onFinishSuccess(response.new_account_real.currency.toLowerCase());
                     }
+                    modifiedProps.onFinishSuccess(response.new_account_real.currency.toLowerCase());
+                }
 
                 const country_code = modifiedProps.account_settings.citizen || modifiedProps.residence;
                 /**

packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx

@@ -79,12 +79,12 @@ const DerivAppsGetAccount: React.FC = () => {
                     shouldHideHeader={isDesktop}
                 >
                     <CFDSuccess
+                        actionButtons={<DerivAppsSuccessFooter />}
                         description={localize(
                             'Transfer funds from your {{walletCurrencyType}} Wallet to your Options account to start trading.',
                             { walletCurrencyType: activeWallet?.wallet_currency_type }
                         )}
                         displayBalance={displayBalance}
-                        renderButton={() => <DerivAppsSuccessFooter />}
                         title={localize('Your Options account is ready')}
                     />
                 </ModalStepWrapper>,

packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsGetAccount.spec.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import {
     APIProvider,
     useActiveLinkedToTradingAccount,
+    useActiveWalletAccount,
     useCreateNewRealAccount,
     useInvalidateQuery,
 } from '@deriv/api-v2';
@@ -12,7 +13,6 @@ import WalletsAuthProvider from '../../../AuthProvider';
 import { ModalProvider } from '../../ModalProvider';
 import { DerivAppsGetAccount } from '../DerivAppsGetAccount';
 
-const mockShow = jest.fn();
 jest.mock('@deriv/api-v2', () => ({
     ...jest.requireActual('@deriv/api-v2'),
     useActiveLinkedToTradingAccount: jest.fn(() => ({ isLoading: false })),
@@ -22,9 +22,11 @@ jest.mock('@deriv/api-v2', () => ({
     useCreateNewRealAccount: jest.fn(() => ({ isLoading: false })),
     useInvalidateQuery: jest.fn(() => Promise.resolve({})),
 }));
+
 jest.mock('../../../hooks/useSyncLocalStorageClientAccounts', () =>
     jest.fn(() => ({ addTradingAccountToLocalStorage: jest.fn(() => Promise.resolve({})) }))
 );
+
 jest.mock('../../../hooks/useAllBalanceSubscription', () =>
     jest.fn(() => ({
         data: {
@@ -36,10 +38,13 @@ jest.mock('../../../hooks/useAllBalanceSubscription', () =>
         isLoading: false,
     }))
 );
+
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn(() => ({})),
 }));
+
+const mockShow = jest.fn();
 jest.mock('../../ModalProvider', () => ({
     ...jest.requireActual('../../ModalProvider'),
     useModal: jest.fn(() => ({
@@ -74,6 +79,7 @@ describe('DerivAppsGetAccount', () => {
         render(<DerivAppsGetAccount />, { wrapper });
         expect(screen.getByRole('button', { name: 'Get' })).toBeInTheDocument();
     });
+
     it('calls createTradingAccount function when the Get button is clicked', async () => {
         const mockMutateAsync = jest.fn(() => Promise.resolve({ new_account_real: 'new_account_real' }));
         const mockInvalidate = jest.fn();
@@ -86,6 +92,7 @@ describe('DerivAppsGetAccount', () => {
         await waitFor(() => expect(mockMutateAsync).toBeCalled());
         await waitFor(() => expect(mockInvalidate).toBeCalledWith('account_list'));
     });
+
     it('calls show function when the Get button is clicked and new_account_real is defined on mobile', () => {
         const mockMutateAsync = jest.fn(() => Promise.resolve({ new_account_real: 'new_account_real' }));
         (mockUseCreateNewRealAccount as jest.Mock).mockReturnValue({
@@ -98,6 +105,7 @@ describe('DerivAppsGetAccount', () => {
         render(<DerivAppsGetAccount />, { wrapper });
         expect(mockShow).toBeCalled();
     });
+
     it('calls show function when the Get button is clicked and new_account_real is defined on desktop', () => {
         const mockMutateAsync = jest.fn(() => Promise.resolve({ new_account_real: 'new_account_real' }));
         (mockUseCreateNewRealAccount as jest.Mock).mockReturnValue({
@@ -114,4 +122,16 @@ describe('DerivAppsGetAccount', () => {
         expect(screen.getByRole('button', { name: 'Maybe later' })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Transfer funds' })).toBeInTheDocument();
     });
+
+    it('does not create a new account when the active wallet is virtual', async () => {
+        const mockMutateAsync = jest.fn();
+        (mockUseCreateNewRealAccount as jest.Mock).mockReturnValue({ isLoading: false, mutateAsync: mockMutateAsync });
+        (useActiveWalletAccount as jest.Mock).mockReturnValue({
+            data: { is_virtual: true },
+        });
+        render(<DerivAppsGetAccount />, { wrapper });
+        const button = screen.getByRole('button', { name: 'Get' });
+        userEvent.click(button);
+        await waitFor(() => expect(mockMutateAsync).not.toBeCalled());
+    });
 });

packages/wallets/src/components/Page404/Page404.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Text } from '@deriv-com/ui';
+import { ActionScreen, Button, Text } from '@deriv-com/ui';
 import useDevice from '../../hooks/useDevice';
-import { WalletButton } from '../Base';
-import { WalletsActionScreen } from '../WalletsActionScreen';
 import './Page404.scss';
 
 const Page404 = () => {
@@ -25,12 +23,9 @@ const Page404 = () => {
 
     return (
         <div className='wallets-page-404'>
-            <WalletsActionScreen
-                description={localize('You may have followed a broken link, or the page has moved to a new address.')}
-                descriptionSize={descriptionSize}
-                icon={errorImage}
-                renderButtons={() => (
-                    <WalletButton
+            <ActionScreen
+                actionButtons={
+                    <Button
                         onClick={() => {
                             history.push('/');
                         }}
@@ -39,8 +34,11 @@ const Page404 = () => {
                         <Text color='white' size={buttonTextSize} weight='bold'>
                             <Localize i18n_default_text="Return to Trader's Hub" />
                         </Text>
-                    </WalletButton>
-                )}
+                    </Button>
+                }
+                description={localize('You may have followed a broken link, or the page has moved to a new address.')}
+                descriptionSize={descriptionSize}
+                icon={errorImage}
                 title={localize("We couldn't find that page")}
                 titleSize={titleSize}
             />

packages/wallets/src/components/Page404/__test__/Page404.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import useDevice from '../../../hooks/useDevice';
+import Page404 from '../Page404';
+
+jest.mock('../../../hooks/useDevice', () => ({
+    __esModule: true,
+    default: jest.fn(() => ({ isMobile: false })),
+}));
+
+jest.mock('react-router-dom', () => ({
+    useHistory: jest.fn(),
+}));
+
+describe('Page404', () => {
+    const mockHistoryPush = jest.fn();
+
+    beforeEach(() => {
+        (useHistory as jest.Mock).mockReturnValue({ push: mockHistoryPush });
+    });
+
+    it('renders error 404 screen content for desktop', () => {
+        render(<Page404 />);
+
+        expect(screen.getByText("We couldn't find that page")).toBeInTheDocument();
+        expect(
+            screen.getByText('You may have followed a broken link, or the page has moved to a new address.')
+        ).toBeInTheDocument();
+        expect(screen.getByRole('img', { name: '404' })).toHaveAttribute('src', '/public/images/common/404.png');
+        expect(screen.getByRole('img', { name: '404' })).toHaveAttribute('width', '607px');
+        expect(screen.getByRole('img', { name: '404' })).toHaveAttribute('height', '366px');
+        expect(screen.getByRole('button', { name: "Return to Trader's Hub" })).toBeInTheDocument();
+    });
+
+    it('renders error 404 screen content for mobile', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
+        render(<Page404 />);
+
+        expect(screen.getByRole('img', { name: '404' })).toHaveAttribute('width', '328px');
+        expect(screen.getByRole('img', { name: '404' })).toHaveAttribute('height', '200px');
+    });
+
+    it('navigates to home page when button is clicked', () => {
+        render(<Page404 />);
+
+        const button = screen.getByRole('button', { name: "Return to Trader's Hub" });
+        userEvent.click(button);
+
+        expect(mockHistoryPush).toHaveBeenCalledWith('/');
+    });
+});

packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx

@@ -9,14 +9,12 @@ import {
     DerivLightIcTypoEmailPasskeyIcon,
     DerivLightIcWrongEmailPasskeyIcon,
 } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
-import { Text, useDevice } from '@deriv-com/ui';
+import { Localize, useTranslations } from '@deriv-com/translations';
+import { ActionScreen, Button, Text, useDevice } from '@deriv-com/ui';
 import { PlatformDetails } from '../../features/cfd/constants';
 import useSendPasswordResetEmail from '../../hooks/useSendPasswordResetEmail';
 import { TPlatforms } from '../../types';
-import { WalletButton } from '../Base';
 import { WalletError } from '../WalletError';
-import { WalletsActionScreen } from '../WalletsActionScreen';
 import './SentEmailContent.scss';
 
 type SentEmailContentProps = {
@@ -70,6 +68,7 @@ const SentEmailContent: FC<SentEmailContentProps> = ({
     const [hasCountdownStarted, setHasCountdownStarted] = useState(false);
     const { error: resetPasswordError, sendEmail } = useSendPasswordResetEmail();
     const { isMobile } = useDevice();
+    const { localize } = useTranslations();
 
     const mt5Platform = PlatformDetails.mt5.platform;
     const { title } = PlatformDetails[platform ?? mt5Platform];
@@ -112,19 +111,10 @@ const SentEmailContent: FC<SentEmailContentProps> = ({
                 'wallets-sent-email-content--scrollable': isForgottenPassword,
             })}
         >
-            <WalletsActionScreen
-                description={
-                    description ?? (
-                        <Localize
-                            i18n_default_text='Please click on the link in the email to change your {{title}} password.'
-                            values={{ title }}
-                        />
-                    )
-                }
-                descriptionSize={descriptionSize}
-                icon={<EmailSentIcon width={133} />}
-                renderButtons={() => (
-                    <WalletButton
+            <ActionScreen
+                actionButtons={
+                    <Button
+                        color='primary-transparent'
                         disabled={shouldShowResendEmailReasons}
                         onClick={() => {
                             setShouldShowResendEmailReasons(true);
@@ -135,8 +125,14 @@ const SentEmailContent: FC<SentEmailContentProps> = ({
                         <Text color='error' size={emailButtonTextSize} weight='bold'>
                             <Localize i18n_default_text="Didn't receive the email?" />
                         </Text>
-                    </WalletButton>
-                )}
+                    </Button>
+                }
+                description={
+                    description ??
+                    localize('Please click on the link in the email to change your {{title}} password.', { title })
+                }
+                descriptionSize={descriptionSize}
+                icon={<EmailSentIcon width={133} />}
                 title={<Localize i18n_default_text="We've sent you an email" />}
                 titleSize={titleSize}
             />
@@ -154,7 +150,7 @@ const SentEmailContent: FC<SentEmailContentProps> = ({
                             );
                         })}
                     </div>
-                    <WalletButton
+                    <Button
                         color='primary'
                         disabled={hasCountdownStarted}
                         onClick={resendEmail}
@@ -167,7 +163,7 @@ const SentEmailContent: FC<SentEmailContentProps> = ({
                         ) : (
                             <Localize i18n_default_text='Resend email' />
                         )}
-                    </WalletButton>
+                    </Button>
                 </Fragment>
             )}
         </div>

packages/wallets/src/components/SentEmailContent/__test__/SentEmailContent.spec.tsx

@@ -36,7 +36,7 @@ describe('SentEmailContent', () => {
         jest.clearAllMocks();
     });
 
-    it('renders component', () => {
+    it('renders default sent email content for mt5', () => {
         render(<SentEmailContent platform='mt5' />, { wrapper });
 
         expect(screen.getByText("We've sent you an email")).toBeInTheDocument();
@@ -45,6 +45,13 @@ describe('SentEmailContent', () => {
         ).toBeInTheDocument();
     });
 
+    it('renders custom description when provided', () => {
+        const customDescription = 'Example custom description';
+        render(<SentEmailContent description={customDescription} platform='mt5' />, { wrapper });
+
+        expect(screen.getByText(customDescription)).toBeInTheDocument();
+    });
+
     it('shows additional content when button is clicked', () => {
         render(<SentEmailContent platform='mt5' />, { wrapper });
 

packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
-import { Localize, useTranslations } from '@deriv-com/translations';
+import { useTranslations } from '@deriv-com/translations';
 import useDevice from '../../hooks/useDevice';
 import { THooks } from '../../types';
-import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../Base';
+import { ModalStepWrapper, ModalWrapper } from '../Base';
 import { WalletCard } from '../WalletCard';
 import { WalletSuccess } from '../WalletSuccess';
+import WalletAddedSuccessFooter from './WalletAddedSuccessFooter';
 
 type TWalletAddedSuccessProps = {
     currency: THooks.CreateWallet['currency'];
@@ -23,21 +24,7 @@ const WalletAddedSuccess: React.FC<TWalletAddedSuccessProps> = ({
     const { localize } = useTranslations();
     const description = localize('Make a deposit into your new Wallet.');
     const title = useMemo(() => localize('Your {{currency}} wallet is ready', { currency }), [currency, localize]);
-    const renderFooter = useCallback(
-        () => (
-            <div className='wallets-add-more__success-footer'>
-                <WalletButtonGroup isFlex isFullWidth>
-                    <WalletButton onClick={onSecondaryButtonClick} variant='outlined'>
-                        <Localize i18n_default_text='Maybe later' />
-                    </WalletButton>
-                    <WalletButton onClick={onPrimaryButtonClick}>
-                        <Localize i18n_default_text='Deposit' />
-                    </WalletButton>
-                </WalletButtonGroup>
-            </div>
-        ),
-        [onPrimaryButtonClick, onSecondaryButtonClick]
-    );
+
     const renderIcon = useCallback(
         () => (
             <div className='wallets-add-more__success-card'>
@@ -49,16 +36,29 @@ const WalletAddedSuccess: React.FC<TWalletAddedSuccessProps> = ({
 
     if (isMobile)
         return (
-            <ModalStepWrapper renderFooter={renderFooter} title=''>
+            <ModalStepWrapper
+                renderFooter={() => (
+                    <WalletAddedSuccessFooter
+                        onPrimaryButtonClick={onPrimaryButtonClick}
+                        onSecondaryButtonClick={onSecondaryButtonClick}
+                    />
+                )}
+                title=''
+            >
                 <WalletSuccess description={description} renderIcon={renderIcon} title={title} />
             </ModalStepWrapper>
         );
 
     return (
         <ModalWrapper hideCloseButton>
             <WalletSuccess
+                actionButtons={
+                    <WalletAddedSuccessFooter
+                        onPrimaryButtonClick={onPrimaryButtonClick}
+                        onSecondaryButtonClick={onSecondaryButtonClick}
+                    />
+                }
                 description={description}
-                renderButtons={renderFooter}
                 renderIcon={renderIcon}
                 title={title}
             />