Skip to content

feat(pair): generate pairing download QR per entrypoint#20716

Open
vbudhram wants to merge 1 commit into
mainfrom
fxa-13720
Open

feat(pair): generate pairing download QR per entrypoint#20716
vbudhram wants to merge 1 commit into
mainfrom
fxa-13720

Conversation

@vbudhram

@vbudhram vbudhram commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Because

  • The pairing download screen served one static QR image to every user, so mobile installs that originated from a Send Tab flow could not be attributed separately from generic downloads.
  • The encoded download target was hardcoded into a static SVG, so it could not vary by how the user reached the screen.

This pull request

  • Adds a reusable, domain-agnostic QRCode component (components/QRCode/index.tsx) using qrcode.react: generates a QR from a value or renders a pre-rendered imageData URI, with an optional center logo (modules excavated behind it so it stays scannable), a loading state, and a loadingDelayMs reveal.
  • Adds buildPairingDownloadUrl and turns isSendTabEntrypoint into a type guard in lib/utilities.ts: the generic mzl.la shortlink by default, an Adjust deep-link (campaign=send-tab, creative=<entrypoint>) for Send Tab entrypoints so each is individually attributable. New constants in lib/constants.ts.
  • Wires the component into the pairing download screen (pages/Pair/Index/index.tsx) and removes the static qr_code_firefox_mobile.svg asset.
  • Adds qrcode.react@^4.2.0 dependency; tests for the component, helpers, and per-entrypoint URL logic.

Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-13720

Checklist

  • 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.

Other information

How to test:

  1. Start a pairing flow and reach the pairing download screen.
  2. From a Send Tab entrypoint, the QR encodes the Adjust link with campaign=send-tab&creative=<entrypoint> (verify in the rendered value).
  3. From any other entrypoint, the QR encodes https://mzl.la/3NDxAIS.
  4. Scan the QR; it should route to the App Store / Play Store by device OS.

Because:
 - The pairing download screen served one static QR image to everyone, so
   mobile installs originating from a Send Tab flow could not be attributed
   separately from generic downloads.

This commit:
 - Adds a reusable, domain-agnostic QRCode component (qrcode.react) that
   generates a QR from a value or renders a pre-rendered imageData URI, with an
   optional center logo (modules excavated behind it so it stays scannable) and
   a loading state.
 - Adds isSendTabEntrypoint (now a type guard) and buildPairingDownloadUrl:
   the generic mzl.la shortlink by default, and an Adjust deep-link
   (campaign=send-tab, creative=<entrypoint>) for Send Tab entrypoints so each
   is individually attributable.
 - Wires the component into the pairing download screen and removes the static
   qr_code_firefox_mobile.svg asset.
@vbudhram vbudhram self-assigned this Jun 9, 2026
@vbudhram vbudhram requested a review from a team as a code owner June 9, 2026 15:28
}: QRCodeProps) => {
const [delaying, setDelaying] = useState(!!loadingDelayMs);
useEffect(() => {
if (!loadingDelayMs) {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a delay here so that page feels a bit more "alive", otw the code shows almost instantly.

'https://app.adjust.com/2uo1qc?campaign=%(campaign)s&creative=%(creative)s&adgroup=android&fallback=https://play.google.com/store/apps/details?id=org.mozilla.firefox',

// Generic pairing download QR target (Mozilla shortlink).
DOWNLOAD_LINK_PAIRING_QR_DEFAULT: 'https://mzl.la/3NDxAIS',

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the url that is encoded in the old QR code svg.

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.

1 participant