Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Because
This pull request
packages/fxa-settings/src/pages/Pair2/Supplicant/DownloadFirefox/index.tsx.Issue that this pull request solves
Closes: FXA-14236
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Check out the storybook output here. Compare against figma designs (linked in ticket). Check out code for AI slop and over all adherence to patterns set forth in FxA.
Note, that this is just UI work, wiring up functionality comes later.
Worth a look on review: both actions here are static external URLs, so both are wired rather than left as callback props. The primary CTA uses
Constants.FIREFOX_MOBILE_DOWNLOAD_URLrather than a per-platform App Store / Play Store link, since picking between the two needs UA sniffing plus runtime config (seePocPairInit) and mozilla.org already routes mobile visitors to the right store. The inline "Learn more" usesLINK.FX_SYNCand is embedded in the sentence with a Fluent DOM overlay so translators can move it.Screenshots (Optional)
See story books.
Other information (Optional)
Follows the pattern set in #20952 (FXA-14234).