From f9124580b90db9a469c238404ac89dec182ee15c Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Thu, 22 Aug 2024 14:30:34 +0800
Subject: [PATCH] fix: applied comments

---
 .../WalletAddedSuccess/WalletAddedSuccess.tsx | 34 ++++++++++---------
 .../WalletAddedSuccessFooter.tsx              | 26 ++++++++++++++
 .../WalletAddedSuccess.spec.tsx               | 10 +++---
 .../WalletAddedSuccessFooter.spec.tsx         | 32 +++++++++++++++++
 4 files changed, 81 insertions(+), 21 deletions(-)
 create mode 100644 packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccessFooter.tsx
 rename packages/wallets/src/components/WalletAddedSuccess/{__test__ => __tests__}/WalletAddedSuccess.spec.tsx (91%)
 create mode 100644 packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccessFooter.spec.tsx

diff --git a/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx b/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx
index 6d3cdc7b5957..c9cf70b7c5b8 100644
--- a/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx
+++ b/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,18 +24,6 @@ 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 = (
-        <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>
-    );
 
     const renderIcon = useCallback(
         () => (
@@ -47,7 +36,15 @@ 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>
         );
@@ -55,7 +52,12 @@ const WalletAddedSuccess: React.FC<TWalletAddedSuccessProps> = ({
     return (
         <ModalWrapper hideCloseButton>
             <WalletSuccess
-                actionButtons={renderFooter}
+                actionButtons={
+                    <WalletAddedSuccessFooter
+                        onPrimaryButtonClick={onPrimaryButtonClick}
+                        onSecondaryButtonClick={onSecondaryButtonClick}
+                    />
+                }
                 description={description}
                 renderIcon={renderIcon}
                 title={title}
diff --git a/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccessFooter.tsx b/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccessFooter.tsx
new file mode 100644
index 000000000000..3554c365d021
--- /dev/null
+++ b/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccessFooter.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Localize } from '@deriv-com/translations';
+import { Button } from '@deriv-com/ui';
+import { WalletButtonGroup } from '../Base';
+
+type TWalletAddedSuccessFooterProps = {
+    onPrimaryButtonClick: () => void;
+    onSecondaryButtonClick: () => void;
+};
+
+const WalletAddedSuccessFooter = ({ onPrimaryButtonClick, onSecondaryButtonClick }: TWalletAddedSuccessFooterProps) => {
+    return (
+        <div className='wallets-add-more__success-footer'>
+            <WalletButtonGroup isFlex isFullWidth>
+                <Button onClick={onSecondaryButtonClick} variant='outlined'>
+                    <Localize i18n_default_text='Maybe later' />
+                </Button>
+                <Button onClick={onPrimaryButtonClick}>
+                    <Localize i18n_default_text='Deposit' />
+                </Button>
+            </WalletButtonGroup>
+        </div>
+    );
+};
+
+export default WalletAddedSuccessFooter;
diff --git a/packages/wallets/src/components/WalletAddedSuccess/__test__/WalletAddedSuccess.spec.tsx b/packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccess.spec.tsx
similarity index 91%
rename from packages/wallets/src/components/WalletAddedSuccess/__test__/WalletAddedSuccess.spec.tsx
rename to packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccess.spec.tsx
index b3e3bb2b09b9..93279fd8327d 100644
--- a/packages/wallets/src/components/WalletAddedSuccess/__test__/WalletAddedSuccess.spec.tsx
+++ b/packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccess.spec.tsx
@@ -24,8 +24,8 @@ const wrapper = ({ children }: PropsWithChildren) => (
 
 jest.mock('../../../hooks/useDevice', () => jest.fn());
 
-describe('<WalletAddedSuccess />', () => {
-    it('should render success modal', () => {
+describe('WalletAddedSuccess', () => {
+    it('renders success modal content', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });
@@ -34,7 +34,7 @@ describe('<WalletAddedSuccess />', () => {
         expect(screen.getByRole('button', { name: 'Maybe later' })).toBeInTheDocument();
     });
 
-    it('should render WalletCard', () => {
+    it('renders WalletCard', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });
@@ -43,7 +43,7 @@ describe('<WalletAddedSuccess />', () => {
         expect(screen.getByTestId('dt_wallet_currency_icon')).toBeInTheDocument();
     });
 
-    it('should run function on button click', () => {
+    it('runs function on button click', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });
@@ -57,7 +57,7 @@ describe('<WalletAddedSuccess />', () => {
         expect(props.onSecondaryButtonClick).toHaveBeenCalled();
     });
 
-    it('should render mobile modal', () => {
+    it('renders modal in mobile', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
 
         render(<WalletAddedSuccess {...props} />, { wrapper });
diff --git a/packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccessFooter.spec.tsx b/packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccessFooter.spec.tsx
new file mode 100644
index 000000000000..1a458f566725
--- /dev/null
+++ b/packages/wallets/src/components/WalletAddedSuccess/__tests__/WalletAddedSuccessFooter.spec.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import WalletAddedSuccessFooter from '../WalletAddedSuccessFooter';
+
+describe('WalletAddedSuccessFooter', () => {
+    const mockPrimaryClick = jest.fn();
+    const mockSecondaryClick = jest.fn();
+
+    beforeEach(() => {
+        render(
+            <WalletAddedSuccessFooter
+                onPrimaryButtonClick={mockPrimaryClick}
+                onSecondaryButtonClick={mockSecondaryClick}
+            />
+        );
+    });
+
+    it('renders the component with correct buttons', () => {
+        expect(screen.getByText('Maybe later')).toBeInTheDocument();
+        expect(screen.getByText('Deposit')).toBeInTheDocument();
+    });
+
+    it('calls onSecondaryButtonClick when "Maybe later" button is clicked', () => {
+        fireEvent.click(screen.getByText('Maybe later'));
+        expect(mockSecondaryClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onPrimaryButtonClick when "Deposit" button is clicked', () => {
+        fireEvent.click(screen.getByText('Deposit'));
+        expect(mockPrimaryClick).toHaveBeenCalledTimes(1);
+    });
+});