Conversation
… Fx Desktop Because: * We want a more persistent 'pair' button near connected services in Settings. The current CaD promo can be dismissed This commit: * Adds this button, and is displayed under the same condition as the promo banner (signed into Firefox Desktop) closes FXA-13797
There was a problem hiding this comment.
Pull request overview
This PR adds a persistent “Connect a device” CTA to the Connected Services section in fxa-settings, shown under the same conditions as the existing Firefox pairing promo (Firefox Desktop + signed into the browser). It also centralizes the pairing eligibility logic so both the promo banner and the new CTA share the same condition.
Changes:
- Introduces a shared
canPairDevicehelper to determine when the/pairflow is available. - Threads a new
showConnectDeviceButtonprop fromPageSettingsintoConnectedServicesto render the CTA. - Updates tests, Storybook, and localization strings to cover/render the new CTA.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/fxa-settings/src/lib/utilities.ts | Adds canPairDevice helper for shared pairing eligibility logic. |
| packages/fxa-settings/src/components/Settings/PageSettings/index.tsx | Computes pairing eligibility and passes showConnectDeviceButton into ConnectedServices. |
| packages/fxa-settings/src/components/Settings/ConnectedServices/index.tsx | Adds optional CTA link to /pair (preserving location.search) in the header actions area. |
| packages/fxa-settings/src/components/Settings/ConnectedServices/index.test.tsx | Adds coverage ensuring the CTA link renders only when enabled via prop. |
| packages/fxa-settings/src/components/Settings/ConnectedServices/index.stories.tsx | Adds a Storybook variant showing the CTA. |
| packages/fxa-settings/src/components/Settings/ConnectedServices/en.ftl | Adds localized string for the new CTA label. |
| packages/fxa-settings/src/components/FirefoxPromoBanner/index.test.tsx | Adjusts utilities mock to keep newly-shared exports available. |
| packages/fxa-settings/src/components/FirefoxPromoBanner/bannerState.ts | Uses canPairDevice to determine the firefox-pair banner state. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1; | ||
| } | ||
|
|
||
| // Whether this browser can pair a new device: `/pair` is currently a Desktop-only |
There was a problem hiding this comment.
Just thinking out loud here, even if the user is not signed into the browser, it seems like we could show the button and navigate to /pair. The pair page on desktop checks for signed in user etc and prompts to login to Sync if they are not. After they login they see the pairing pages.
The benefit of this is that users coming from an RP or web flows would get signed into Sync.
There was a problem hiding this comment.
Ohh, do we already have that web channel in place where we grab the query params for that? Good suggestion, I'll look into that.
There was a problem hiding this comment.
Yea, it uses the webchannel to request a Sync login url. I used it alot in functional tests gotoSyncSession because it was the only way to ensure that the correct query params are set so the user is fully signed into Firefox desktop.
Because:
This commit:
closes FXA-13797
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Sign into Firefox desktop and go to Settings. See the button.
Note, the button here has a little more left/right padding than in Figma. That's what our standard buttons use.
Note2, there is a known issue here which is that for both the Firefox Promo and this link, pairing doesn't work if the browser doesn't have the sync key. Since for a huge majority of users it will work and we do not have a way to tell "is sync on" essentially yet, we'll land this anyway.
Screenshots (Optional)