chore(runway): cherry-pick fix(card): cp-7.62.0 general UI issues (#24801)

Author: runway-github[bot]

app/components/UI/Card/Views/CardHome/CardHome.tsx

@@ -79,7 +79,6 @@ import CardWarningBox from '../../components/CardWarningBox/CardWarningBox';
 import { useIsSwapEnabledForPriorityToken } from '../../hooks/useIsSwapEnabledForPriorityToken';
 import { isAuthenticationError } from '../../util/isAuthenticationError';
 import { removeCardBaanxToken } from '../../util/cardTokenVault';
-import Logger from '../../../../../util/Logger';
 import useLoadCardData from '../../hooks/useLoadCardData';
 import { CardActions } from '../../util/metrics';
 import { isSolanaChainId } from '@metamask/bridge-controller';
@@ -456,10 +455,14 @@ const CardHome = () => {
         changeAssetAction();
       }
     } catch (error) {
-      Logger.log('enableCardAction error', error);
+      const errorMessage =
+        error instanceof Error && error.message
+          ? error.message
+          : strings('card.card_home.enable_card_error');
+
       toastRef?.current?.showToast({
         variant: ToastVariants.Icon,
-        labelOptions: [{ label: strings('card.card_home.enable_card_error') }],
+        labelOptions: [{ label: errorMessage }],
         iconName: IconName.Danger,
         iconColor: theme.colors.error.default,
         backgroundColor: theme.colors.error.muted,

app/components/UI/Card/Views/CardWelcome/CardWelcome.tsx

@@ -123,7 +123,7 @@ const CardWelcome = () => {
                 variant={TextVariant.BodyMDMedium}
                 style={styles.notNowButtonText}
               >
-                {strings('predict.gtm_content.not_now')}
+                {strings('card.card_onboarding.not_now_button')}
               </Text>
             }
           />

app/components/UI/Card/components/Onboarding/ConfirmEmail.test.tsx

@@ -387,6 +387,7 @@ const createTestStore = (initialState = {}) =>
 
 describe('ConfirmEmail Component', () => {
   const mockNavigate = jest.fn();
+  const mockReset = jest.fn();
   const mockUseNavigation = useNavigation as jest.MockedFunction<
     typeof useNavigation
   >;
@@ -404,6 +405,7 @@ describe('ConfirmEmail Component', () => {
 
     mockUseNavigation.mockReturnValue({
       navigate: mockNavigate,
+      reset: mockReset,
     } as never);
     mockUseParams.mockReturnValue({
       email: 'test@example.com',
@@ -1026,6 +1028,7 @@ describe('ConfirmEmail Component', () => {
           confirmAction: expect.objectContaining({
             label: 'Log in',
           }),
+          onClose: expect.any(Function),
         }),
       });
     });
@@ -1106,11 +1109,62 @@ describe('ConfirmEmail Component', () => {
 
       expect(capturedOnPress).toEqual(expect.any(Function));
 
-      mockNavigate.mockClear();
+      mockReset.mockClear();
 
       capturedOnPress?.();
 
-      expect(mockNavigate).toHaveBeenCalledWith(Routes.CARD.AUTHENTICATION);
+      expect(mockReset).toHaveBeenCalledWith({
+        index: 0,
+        routes: [{ name: Routes.CARD.AUTHENTICATION }],
+      });
+    });
+
+    it('navigates to authentication screen when modal is closed', async () => {
+      const store = createTestStore();
+
+      let capturedOnClose: (() => void) | undefined;
+
+      const mockVerifyEmailVerification = jest.fn().mockResolvedValue({
+        onboardingId: null,
+        hasAccount: true,
+      });
+
+      mockUseEmailVerificationVerify.mockReturnValue({
+        verifyEmailVerification: mockVerifyEmailVerification,
+        isLoading: false,
+        isError: false,
+        error: null,
+        reset: jest.fn(),
+      });
+
+      mockNavigate.mockImplementation((_route, params) => {
+        if (params?.params?.onClose) {
+          capturedOnClose = params.params.onClose;
+        }
+      });
+
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <ConfirmEmail />
+        </Provider>,
+      );
+
+      const codeFieldInput = getByTestId('confirm-email-code-field');
+
+      await act(async () => {
+        fireEvent.changeText(codeFieldInput, '123456');
+      });
+
+      expect(capturedOnClose).toEqual(expect.any(Function));
+
+      mockReset.mockClear();
+
+      capturedOnClose?.();
+
+      expect(mockReset).toHaveBeenCalledWith({
+        index: 0,
+        routes: [{ name: Routes.CARD.AUTHENTICATION }],
+      });
     });
 
     it('does not navigate to confirm modal when onboardingId is returned', async () => {

app/components/UI/Card/components/Onboarding/ConfirmEmail.tsx

@@ -148,6 +148,13 @@ const ConfirmEmail = () => {
         dispatch(setOnboardingId(onboardingId));
         navigation.navigate(Routes.CARD.ONBOARDING.SET_PHONE_NUMBER);
       } else if (hasAccount) {
+        const navigateToAuthentication = () => {
+          navigation.reset({
+            index: 0,
+            routes: [{ name: Routes.CARD.AUTHENTICATION }],
+          });
+        };
+
         navigation.navigate(Routes.CARD.MODALS.ID, {
           screen: Routes.CARD.MODALS.CONFIRM_MODAL,
           params: {
@@ -162,10 +169,9 @@ const ConfirmEmail = () => {
               label: strings(
                 'card.card_onboarding.account_exists.confirm_button',
               ),
-              onPress: () => {
-                navigation.navigate(Routes.CARD.AUTHENTICATION);
-              },
+              onPress: navigateToAuthentication,
             },
+            onClose: navigateToAuthentication,
             icon: IconName.UserCheck,
           },
         });

app/components/UI/Card/components/Onboarding/ConfirmModal.test.tsx

@@ -21,6 +21,13 @@ const mockOnCloseBottomSheet = jest.fn((callback?: () => void) => {
   }
 });
 
+// Store the onClose prop passed to BottomSheet
+let capturedOnCloseProp: (() => void) | undefined;
+const getCapturedOnCloseProp = () => capturedOnCloseProp;
+const setCapturedOnCloseProp = (fn: (() => void) | undefined) => {
+  capturedOnCloseProp = fn;
+};
+
 // Store reference for the mock to use (hoisting workaround)
 const getMockOnCloseBottomSheet = () => mockOnCloseBottomSheet;
 
@@ -35,12 +42,19 @@ jest.mock(
         {
           children,
           testID,
+          onClose,
         }: {
           children: React.ReactNode;
           testID?: string;
+          onClose?: () => void;
         },
         ref: React.Ref<{ onCloseBottomSheet: (callback?: () => void) => void }>,
       ) => {
+        // Capture onClose prop for testing
+        React.useEffect(() => {
+          setCapturedOnCloseProp(onClose);
+        }, [onClose]);
+
         React.useImperativeHandle(ref, () => ({
           onCloseBottomSheet: (callback?: () => void) => {
             // Get the mock function at runtime to avoid hoisting issues
@@ -136,6 +150,7 @@ interface MockConfirmModalParams {
     onPress: jest.Mock;
     variant?: string;
   };
+  onClose?: jest.Mock;
 }
 
 const createMockParams = (
@@ -156,6 +171,7 @@ describe('ConfirmModal', () => {
     jest.clearAllMocks();
     mockStrings.mockClear();
     mockUseParams.mockReturnValue(createMockParams());
+    setCapturedOnCloseProp(undefined);
     // Restore mock implementation since jest.resetAllMocks() clears it
     mockOnCloseBottomSheet.mockImplementation((callback?: () => void) => {
       if (callback) {
@@ -266,6 +282,46 @@ describe('ConfirmModal', () => {
 
       expect(mockOnCloseBottomSheet).toHaveBeenCalledTimes(1);
     });
+
+    it('closes bottom sheet without callback when close button is pressed', () => {
+      const mockOnClose = jest.fn();
+      mockUseParams.mockReturnValue(
+        createMockParams({
+          onClose: mockOnClose,
+        }),
+      );
+
+      const { getByTestId } = render(<ConfirmModal />);
+      const closeButton = getByTestId('confirm-modal-close-button');
+
+      fireEvent.press(closeButton);
+
+      // handleCancel should close without passing callback (onClose is handled by BottomSheet prop)
+      expect(mockOnCloseBottomSheet).toHaveBeenCalledTimes(1);
+      expect(mockOnCloseBottomSheet).toHaveBeenCalledWith(undefined);
+    });
+
+    it('passes onClose callback to BottomSheet component', () => {
+      const mockOnClose = jest.fn();
+      mockUseParams.mockReturnValue(
+        createMockParams({
+          onClose: mockOnClose,
+        }),
+      );
+
+      render(<ConfirmModal />);
+
+      // Verify onClose prop was passed to BottomSheet
+      expect(getCapturedOnCloseProp()).toBe(mockOnClose);
+    });
+
+    it('does not pass onClose to BottomSheet when not provided', () => {
+      mockUseParams.mockReturnValue(createMockParams());
+
+      render(<ConfirmModal />);
+
+      expect(getCapturedOnCloseProp()).toBeUndefined();
+    });
   });
 
   describe('Edge Cases', () => {

app/components/UI/Card/components/Onboarding/ConfirmModal.tsx

@@ -27,10 +27,11 @@ interface ConfirmModalParams {
   description: string;
   icon: IconName;
   confirmAction: ModalAction;
+  onClose?: () => void;
 }
 
 const ConfirmModal = () => {
-  const { title, description, icon, confirmAction } =
+  const { title, description, icon, confirmAction, onClose } =
     useParams<ConfirmModalParams>();
   const sheetRef = useRef<BottomSheetRef>(null);
 
@@ -85,7 +86,7 @@ const ConfirmModal = () => {
   );
 
   return (
-    <BottomSheet ref={sheetRef} testID="confirm-modal">
+    <BottomSheet ref={sheetRef} onClose={onClose} testID="confirm-modal">
       <Box
         flexDirection={BoxFlexDirection.Column}
         alignItems={BoxAlignItems.Center}