Skip to content

fix(settings): Match the pairing hand-off card to its Figma spec - #21133

Draft
dschom wants to merge 2 commits into
mainfrom
FXA-14459
Draft

fix(settings): Match the pairing hand-off card to its Figma spec#21133
dschom wants to merge 2 commits into
mainfrom
FXA-14459

Conversation

@dschom

@dschom dschom commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Because

  • The card a user lands on after scanning a pairing QR outside Firefox no
    longer matched the approved design — wrong heading and subcopy, no
    "Learn more" link.
  • "Opening Firefox…" rendered as status text below the button, with a store
    link beneath that, instead of as the button's own active state.

This pull request

  • Retitles the card "Get Firefox on this device" and swaps the subcopy for the
    sync explainer plus an inline "Learn more" link.
  • Moves "Opening Firefox…" and its spinner into the CTA as the button's active
    state.
  • Removes the "Don’t have Firefox? Get it now" link.
  • Keeps the CTA mounted in both states, so attempting alone drives it and
    ctaRevealed goes away.
  • Adds -v2 Fluent ids for the two changed strings and drops the store-link
    message.

Issue that this pull request solves

Closes: FXA-14459

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).
  • I have manually reviewed all AI generated code.

How to review (Optional)

  • Key files/areas to focus on: packages/fxa-settings/src/components/ContinueInFirefox/index.tsx
  • Suggested review order:
  • Risky or complex parts: the Android auto-attempt state machine. ctaRevealed
    is gone, so the WebView backstop timer returns the CTA to rest rather than
    revealing it.

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

  • "Learn more" points at LINK.FX_SYNC, matching the Pair2
    Supplicant/DownloadFirefox card this ticket cites as the reference. The
    ticket names a SUMO pairing article instead — swap the target if design
    prefers it.
  • Dropping the store link removes the escape hatch for one residual case: an
    iOS build where the error alert fires visibilitychange, so the watchdog
    wrongly concludes the app opened. A retap re-arms it.
  • Pre-merge review waived as trivial: presentational card plus copy, no auth,
    payments, crypto, session, or migration paths touched.

Because:
  - The live card's copy and its "Opening Firefox…" status line diverged
    from the approved design and from the Pair2 storybook card.
  - The design drops the separate store link; the hand-off already routes
    to the store on both platforms.

This commit:
  - Retitles the card "Get Firefox on this device" with the sync subcopy
    and an inline "Learn more" link.
  - Moves "Opening Firefox…" into the CTA as its active state.
  - Removes the "Don’t have Firefox? Get it now" link.
  - Keeps the CTA mounted throughout, so `attempting` alone drives it and
    a retap still reaches the store.

Fixes FXA-14459
Because:
  - CodeQL reads `replace(/<\/?[a-zA-Z]+>/g, '')` as an incomplete HTML
    sanitizer and fails the PR on a high-severity alert.

This commit:
  - Splits the Fluent message on the literal `<linkExternal>` tag instead,
    asserting the sentence and the placeable separately.
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