Merge pull request #83 from ameerul-deriv/FEQ-2264-incorrect-invalid-…

…verification-link-modal

Ameerul / FEQ-2264 Incorrect invalid verification link modal

src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx

@@ -1,9 +1,6 @@
 import clsx from 'clsx';
 import { ERROR_CODES } from '@/constants';
-import {
-    DerivLightIcEmailVerificationLinkBlockedIcon,
-    DerivLightIcEmailVerificationLinkInvalidIcon,
-} from '@deriv/quill-icons';
+import { DerivLightIcEmailVerificationLinkInvalidIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './InvalidVerificationLinkModal.scss';
@@ -36,44 +33,25 @@ const InvalidVerificationLinkModal = ({
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
         >
-            <Modal.Header hideBorder onRequestClose={onRequestClose} />
             <Modal.Body
-                className={clsx('flex flex-col items-center gap-[2.4rem] p-[2.4rem] pb-4', {
+                className={clsx('flex flex-col items-center gap-[2.4rem] p-[2.4rem]', {
                     'py-0 px-[1.4rem] gap-[1.4rem]': isExcessiveErrorMobile,
                 })}
             >
-                {isInvalidVerification ? (
-                    <DerivLightIcEmailVerificationLinkInvalidIcon height={iconSize} width={iconSize} />
-                ) : (
-                    <DerivLightIcEmailVerificationLinkBlockedIcon height={iconSize} width={iconSize} />
-                )}
-                {isInvalidVerification && (
-                    <Text weight='bold'>
-                        <Localize i18n_default_text='Invalid verification link' />
-                    </Text>
-                )}
-                {error?.message && (
-                    <Text align='center' weight={isInvalidVerification ? 'normal' : 'bold'}>
-                        {error.message}
-                    </Text>
-                )}
+                <DerivLightIcEmailVerificationLinkInvalidIcon height={iconSize} width={iconSize} />
+                <Text weight='bold'>
+                    <Localize i18n_default_text='Invalid verification link' />
+                </Text>
+                {error?.message && <Text align='center'>{error.message}</Text>}
             </Modal.Body>
             <Modal.Footer
                 className={clsx('justify-center', {
                     'pt-2 min-h-fit': isExcessiveErrorMobile,
                 })}
                 hideBorder
             >
-                <Button
-                    onClick={() => (isInvalidVerification ? mutate() : onRequestClose())}
-                    size={isMobile ? 'md' : 'lg'}
-                    textSize='sm'
-                >
-                    {isInvalidVerification ? (
-                        <Localize i18n_default_text='Get new link' />
-                    ) : (
-                        <Localize i18n_default_text='OK' />
-                    )}
+                <Button onClick={mutate} size={isMobile ? 'md' : 'lg'} textSize='sm'>
+                    <Localize i18n_default_text='Get new link' />
                 </Button>
             </Modal.Footer>
         </Modal>

src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/__tests__/MyProfileCounterpartiesTable.spec.tsx

@@ -35,6 +35,7 @@ const mockUseModalManager = {
 };
 
 jest.mock('@/hooks/custom-hooks', () => ({
+    useIsAdvertiserBarred: jest.fn(() => false),
     useModalManager: jest.fn(() => mockUseModalManager),
 }));
 

src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx

@@ -53,6 +53,7 @@ jest.mock('@/hooks', () => ({
 }));
 
 jest.mock('@/hooks/custom-hooks', () => ({
+    useIsAdvertiserBarred: () => false,
     useModalManager: () => mockModalManager,
 }));
 

src/pages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/__tests__/OrderDetailsCardFooter.spec.tsx

@@ -314,7 +314,7 @@ describe('<OrderDetailsCardFooter />', () => {
         expect(screen.getByText('Please wait for 59 seconds before requesting another email.')).toBeInTheDocument();
     });
 
-    it('should call history.replace, hideModal and reset when clicking on OK button in InvalidVerificationLinkModal', async () => {
+    it('should call mutate when clicking on Get new link button in InvalidVerificationLinkModal', async () => {
         modalManager.isModalOpenFor.mockImplementation(
             (modalName: string) => modalName === 'InvalidVerificationLinkModal'
         );
@@ -324,12 +324,10 @@ describe('<OrderDetailsCardFooter />', () => {
         const paymentButton = screen.getByRole('button', { name: 'I’ve received payment' });
         await userEvent.click(paymentButton);
 
-        const okButton = screen.getByRole('button', { name: 'OK' });
+        const okButton = screen.getByRole('button', { name: 'Get new link' });
         await userEvent.click(okButton);
 
-        expect(modalManager.hideModal).toHaveBeenCalled();
-        expect(mockUseHistory().replace).toHaveBeenCalled();
-        expect(mockUseConfirm().reset).toHaveBeenCalled();
+        expect(mockUseConfirm().mutate).toHaveBeenCalled();
     });
 
     it('should show InvalidVerificationLinkModal if InvalidVerificationToken error is returned when code param is in the URL', async () => {