feat(handover): display masked email and instructions for production OTP verification (!54) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(handover): display masked email and instructions for production OTP verification

Summary

This MR enhances the Account Ownership Handover interface to guide users through the production email OTP verification flow. When the target device connects to the session (transitioning to Step 3 - Authorization), the UI now presents a dedicated notification banner indicating that the 6-digit OTP code has been dispatched to the account owner's email address (displayed as a masked email). Pre-initiation guidance in Step 1 has also been updated to state the linked email requirement.

Problem Solved

In production, OTP codes are delivered securely via email rather than shown on-screen in sandbox mode.
Previously, users had no visual confirmation that an email had been dispatched, nor did they know which mailbox to inspect.
Users were not reminded prior to code creation that a linked email is required for the authorization process.

Key Changes

SVG Icon Library (src/components/ui/icons.tsx):
- Implemented MailIcon: Standardized vector icon matching the design system and styling tokens.
Handover Types (src/types/handover.ts):
- Added sourceUserEmailMasked?: string to HandoverStatusResponse interface.
Account Handover Page (src/pages/account-handover/index.tsx):
- Added maskedEmail state to capture the masked email address returned by status polling.
- Updated Step 1 (Initiation warning): Added notice specifying that the account must have a linked email to receive the transfer OTP.
- Updated Step 3 (Authorization): Rendered an informational card featuring MailIcon displaying the exact masked email address (e.g., nc***@gmail.com) to check.
- Maintained sandbox OTP box display strictly when otpCodeDev is present for development and test environments.
- State reset: Automatically clears maskedEmail when the user cancels the handover session.
Localization (src/i18n/locales/vi.json, src/i18n/locales/en.json):
- Added warningNoticeEmail, otpEmailSentTitle, and otpEmailSentDesc localization keys in both Vietnamese and English.

## Summary
This MR enhances the Account Ownership Handover interface to guide users through the production email OTP verification flow. When the target device connects to the session (transitioning to Step 3 - Authorization), the UI now presents a dedicated notification banner indicating that the 6-digit OTP code has been dispatched to the account owner's email address (displayed as a masked email). Pre-initiation guidance in Step 1 has also been updated to state the linked email requirement.

## Problem Solved
- In production, OTP codes are delivered securely via email rather than shown on-screen in sandbox mode.
- Previously, users had no visual confirmation that an email had been dispatched, nor did they know which mailbox to inspect.
- Users were not reminded prior to code creation that a linked email is required for the authorization process.

## Key Changes
1. **SVG Icon Library (`src/components/ui/icons.tsx`)**:
   - Implemented `MailIcon`: Standardized vector icon matching the design system and styling tokens.

2. **Handover Types (`src/types/handover.ts`)**:
   - Added `sourceUserEmailMasked?: string` to `HandoverStatusResponse` interface.

3. **Account Handover Page (`src/pages/account-handover/index.tsx`)**:
   - Added `maskedEmail` state to capture the masked email address returned by status polling.
   - Updated Step 1 (Initiation warning): Added notice specifying that the account must have a linked email to receive the transfer OTP.
   - Updated Step 3 (Authorization): Rendered an informational card featuring `MailIcon` displaying the exact masked email address (e.g., `nc***@gmail.com`) to check.
   - Maintained sandbox OTP box display strictly when `otpCodeDev` is present for development and test environments.
   - State reset: Automatically clears `maskedEmail` when the user cancels the handover session.

4. **Localization (`src/i18n/locales/vi.json`, `src/i18n/locales/en.json`)**:
   - Added `warningNoticeEmail`, `otpEmailSentTitle`, and `otpEmailSentDesc` localization keys in both Vietnamese and English.