Skip to content

Comments

feature/BA-3022-rn-request-change-email#330

Open
lbjunq wants to merge 2 commits intomasterfrom
feature/BA-3022-rn-request-change-email
Open

feature/BA-3022-rn-request-change-email#330
lbjunq wants to merge 2 commits intomasterfrom
feature/BA-3022-rn-request-change-email

Conversation

@lbjunq
Copy link
Contributor

@lbjunq lbjunq commented Jan 19, 2026

❌ RN - Change Email in Settings
Key details
Description

Acceptance Criteria

Given that I am on the Login & Security settings page, when I tap on the "Change Email" option, then the section should expand to reveal a "New Email" input field

When I enter a valid email address in the "New Email" input field, then the "Change Email" button should be enabled.

    If we don't input a valid email address display an error alert

Given that I have entered a valid email and the "Change Email" button is enabled, when I tap on the "Change Email" button, then the system should validate the email and send a verification link to the new email address.

Given the verification link has been sent, then display a message informing the user and also display a resend button in case there is trouble receiving the email.

Given that the system has sent a verification link to my new email, when I click on that link then it should open the app and show that I have successfully verified my email.

Given that I am in the process of changing my email , when I tap the "Cancel" button, then the section should collapse, any entered data should be cleared, and I should return to the default Login & Security settings view. 

Design Link: https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=6107-19479&t=ZYZocuoVLM11VrtX-0

Notes
Check the web app flow, so that the designs match the flow.

Approvd
https://app.approvd.io/silverlogic/BA/stories/39019

Demo: In progress...

Summary by CodeRabbit

  • New Features

    • Email change workflow: request, resend, verify, confirm and cancel flows for updating user email.
    • New design assets: InfoIcon plus newsletter and error illustrations for UI use.
  • Tests

    • Comprehensive test coverage for the email-change flows, including success, error, validation, customization, and resend behavior.

✏️ Tip: You can customize this high-level summary in your review settings.

@changeset-bot
Copy link

changeset-bot bot commented Jan 19, 2026

⚠️ No Changeset found

Latest commit: fea1bb0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link

coderabbitai bot commented Jan 19, 2026

📝 Walkthrough

Walkthrough

Introduces an email-change workflow: a new useRequestEmailChange React hook (form + six mutations) backed by new AuthApi endpoints and types, comprehensive tests for the hook, and three new design-system SVG components (InfoIcon, NewsletterImage, WeGotAProblemImage).

Changes

Cohort / File(s) Summary
Email Change Hook & Types
packages/authentication/modules/access/useRequestEmailChange/index.ts, packages/authentication/modules/access/useRequestEmailChange/types.ts, packages/authentication/modules/access/useRequestEmailChange/constants.ts
Adds useRequestEmailChange hook (react-hook-form + zod resolver) and types/constants. Exposes six React Query mutations: requestEmailChange, resendRequestEmailChange, verifyEmailChange, resendVerifyEmailChange, confirmEmailChange, cancelEmailChange. Supports custom validation schema, default values, per-mutation options, and optional mapping of API errors to form errors.
Email Change Hook Tests
packages/authentication/modules/access/useRequestEmailChange/__tests__/useRequestEmailChange.test.tsx
Adds comprehensive tests covering success/error paths for request and resend flows, validation behavior, custom schema/overrides, and error mapping using mocked fetch and auth test providers.
Authentication API & Types
packages/authentication/services/auth.ts, packages/authentication/types/auth.ts
Adds new AuthApi methods for the email-change workflow (requestEmailChange, resendRequestEmailChange, confirmEmailChange, verifyEmailChange, resendVerifyEmailChange, cancelEmailChange) and new types RequestEmailChangeRequest and ConfirmEmailParams.
Design System Icons
packages/design-system/components/native/icons/InfoIcon/index.tsx, packages/design-system/components/native/icons/index.ts
Adds themed InfoIcon SVG component and re-exports it from the icons barrel.
Design System Illustrations
packages/design-system/components/native/illustrations/NewsletterImage/index.tsx, packages/design-system/components/native/illustrations/WeGotAProblemImage/index.tsx, packages/design-system/components/native/illustrations/index.ts
Adds two themed SVG illustrations (NewsletterImage, WeGotAProblemImage) with exports from the illustrations barrel.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant F as Form (UI)
  participant H as useRequestEmailChange (hook)
  participant A as AuthApi
  participant S as Server

  U->>F: submit new email
  F->>H: handleSubmit -> submit()
  H->>A: requestEmailChange({ newEmail })
  A->>S: POST /change-email
  S-->>A: 200 { newEmail } / 4xx error
  A-->>H: resolve / reject
  alt success
    H->>F: call onSuccess callbacks
  else error
    H->>F: map API errors to form errors (if enabled)
    H->>F: call onError callbacks
  end
  H->>A: resendRequestEmailChange() (when invoked)
  A->>S: POST /change-email/resend-confirm
  S-->>A: 200 / error
  A-->>H: resolve / reject
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • Ba 1954 signup updates #160 — Changes to AuthApi surface; potentially overlaps with or affects the new email-change methods added here.

Suggested reviewers

  • priscilladeroode
  • anicioalexandre
  • deboracosilveira

Poem

🐰
I hopped through code with whiskered cheer,
New emails change and icons appear,
Zod guards forms with graceful art,
Mutations race and tests take part,
A little rabbit stamps "All clear!"

🚥 Pre-merge checks | ✅ 1 | ❌ 2
❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description contains extensive acceptance criteria and design notes but does not follow the repository's template structure for package updates and changelog entries. Restructure the description to match the template format: package name, version, and changelog entries. Move acceptance criteria to separate sections if needed.
Title check ❓ Inconclusive The PR title is a feature branch reference (feature/BA-3022-rn-request-change-email) that is vague and doesn't describe the actual change from a developer's perspective. Use a clear, concise title that describes the main change, e.g., 'Add email change flow to settings' or similar. Avoid using branch names as PR titles.
✅ Passed checks (1 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/authentication/modules/access/useRequestEmailChange/__tests__/useRequestEmailChange.test.tsx`:
- Around line 38-42: Tests are failing because the test props use a non-existent
options property; update all test instances to use requestEmailChangeOptions
(the property defined on the UseRequestEmailChange interface) instead of options
— e.g., where you set options: { onSuccess: () => { hasOnSuccessRan = true } },
change to requestEmailChangeOptions: { onSuccess: () => { hasOnSuccessRan = true
} }; apply the same replacement for every occurrence in this test file
(including the other blocks that set onSuccess/onError callbacks) so the mock
props align with the UseRequestEmailChange interface.
🧹 Nitpick comments (4)
packages/authentication/modules/access/useRequestEmailChange/types.ts (1)

17-19: Duplicate type definition with packages/authentication/types/auth.ts.

RequestEmailChangeRequest is also defined as an interface in packages/authentication/types/auth.ts (lines 63-65). Consider importing from the centralized auth types instead to avoid duplication and maintain a single source of truth.

🔧 Suggested fix
-export type RequestEmailChangeRequest = {
-  newEmail: string
-}
+export type { RequestEmailChangeRequest } from '../../../types/auth'
packages/authentication/modules/access/useRequestEmailChange/__tests__/useRequestEmailChange.test.tsx (1)

17-19: Consider adding beforeEach to reset the mock properly.

Using mockClear() in afterEach is fine, but if a test fails before setting up the mock, subsequent tests might behave unexpectedly. Consider using beforeEach with jest.resetAllMocks() for more robust test isolation.

packages/authentication/modules/access/useRequestEmailChange/constants.ts (1)

7-9: Consider reordering validators for better error messaging.

With the current order .email().min(1), an empty string will fail at .email() with "Please provide a properly formatted email address" rather than "This field is required". If you want empty values to show the "required" message, reverse the order:

💡 Suggested improvement
 export const DEFAULT_VALIDATION_SCHEMA = z.object({
-  newEmail: z.string().email(ZOD_MESSAGE.email).min(1, ZOD_MESSAGE.required),
+  newEmail: z.string().min(1, ZOD_MESSAGE.required).email(ZOD_MESSAGE.email),
 })
packages/authentication/modules/access/useRequestEmailChange/index.ts (1)

115-121: Empty catch block silently swallows errors.

While the comment explains that mutateAsync raises errors on API failures, the empty catch block makes debugging difficult. Consider at minimum logging in development mode, or removing the try-catch if error handling is already managed by the mutation's onError callback.

💡 Suggested alternatives

Option 1: Remove try-catch (errors handled by mutation's onError)

 const handleSubmit: SubmitHandler<RequestEmailChangeRequest> = async (values) => {
-  try {
-    await requestEmailChangeMutation.mutateAsync(values)
-  } catch (error) {
-    // mutateAsync will raise an error if there's an API error
-  }
+  await requestEmailChangeMutation.mutateAsync(values)
 }

Option 2: Keep catch but add development logging

 const handleSubmit: SubmitHandler<RequestEmailChangeRequest> = async (values) => {
   try {
     await requestEmailChangeMutation.mutateAsync(values)
   } catch (error) {
-    // mutateAsync will raise an error if there's an API error
+    // Error is already handled by mutation's onError callback
+    if (process.env.NODE_ENV === 'development') {
+      console.debug('Request email change failed:', error)
+    }
   }
 }

@sonarqubecloud
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants