Because:
- We are updating pairing flows and want to land UI components / pages first.
- Adds the mobile screen prompting the user to install Firefox.
This commit:
- Adds `packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.tsx`,
a presentational card rendering the Firefox brand lockup, the desktop/mobile sync
illustration, the heading and subcopy, and a single primary action. It reuses the
`SyncDevicesImage` and `FirefoxWordmarkImage` that landed with FXA-14234, so no new
assets are added.
- Wires both actions rather than taking callback props, because both are static
external URLs. The primary CTA points at `Constants.FIREFOX_MOBILE_DOWNLOAD_URL`
and the inline "Learn more" at `LINK.FX_SYNC`; neither URL is hardcoded. Choosing
between the App Store and the Play Store per-platform, as `PocPairInit` does, needs
user-agent sniffing plus runtime config and would make this card
non-presentational — mozilla.org already routes mobile visitors to the right store,
so that branch can land with the flow if Product wants direct store links.
- Embeds "Learn more" inside the subcopy with a Fluent DOM overlay
(`elems={{ linkExternal }}` against a `<linkExternal>` placeable in the message)
rather than splitting the sentence into fragments, so translators can move the link
within the sentence. The `LinkExternal` element is declared once and passed to both
`elems` and the fallback children so the two renders cannot drift.
- Adds `en.ftl` with the three new strings, `index.stories.tsx` with the single state
the card has, and tests covering the wiring. The suite runs `testL10n` against the
bundle to catch drift between fallback text and the Fluent messages; the overlay
message is checked separately, since `testL10n` compares rendered text against the
raw message and can never match one containing overlay tags.
Closes #FXA-14236