Both labels are updated using the type interpolation already in place, so the change applies automatically to both email and phone cards. "This email/phone is mine & my primary" is now "This email/phone is my primary email/phone," and "This email/phone is mine, but not my primary" is now "This email/phone is mine, but not my primary email/phone."
Good. I have a clear picture of both components. The plan: add a second step to the form — after selections are made and "Save My Preferences" is clicked, show an inline confirmation screen (no popup) where the user must type each email/phone they claimed as theirs into an input field. If the typed value matches the masked pattern's claimed contact, they proceed to success.
Since the contacts are masked, I'll ask the user to type the full value to prove ownership (e.g. they type the full email/phone they know). I'll store the confirmation inputs in state and validate on "Confirm & Save".
Now update the main form to import and use the new ConfirmationStep as a second step:
The flow now has three inline steps — no popup anywhere. On step 1 (select) the user picks ownership and primary for each contact. Clicking "Save My Preferences" advances to step 2 (confirm), a new ConfirmationStep component where each claimed email/phone gets a labeled input the user must type in full. Validation checks the entered value against the expected value (case-insensitive, ignoring spaces/formatting), and on success moves to the final success view. A "Back to selections" button on step 2 lets users return to step 1 if needed.
You can send messages while the preview loads