Implement an AddonQRCode component

[bobsilverberg]

For the Mobile Add-Ons Promo project, we need a box that appears that contains a QR code, as well as some text that explains what the user is seeing. According to https://docs.google.com/document/d/1upD3G06aJFZg4XjhIeQ-MKo494ny-7geOu3YPyxXH3Q/edit, the code should appear in a black frame, and should have the following text underneath it:

"To get {addonName} on Firefox for Android, point your device camera to the code above or copy this link"

Sample image:

[bobsilverberg]

@muffinresearch @tublitzed As mentioned on Slack, I have some UX-related questions about this feature. The spec includes the screenshot shown above, which looks like a modal pop-up containing the QR code. It appears to be modal, as the background is greyed out.

I have a proposal for a slightly different approach, which I think is more consistent with the rest of the site. I propose we have the link behave in the same manner as the "Flag" link for reviews, where when the user clicks it a panel appears directly below the link, and the panel disappears either by clicking the link again, or clicking anywhere outside of the link.

Here is a screen recording:

Please let me know what you think and whether it might be possible to get UX input on this.

[willdurand]

@bobsilverberg We have the OverlayCard component for what you're calling "modal pop-up". For a QR code, it might be a bit easier for apps to scan the code with an overlay that greys out the rest of the page.

[bobsilverberg]

@bobsilverberg We have the OverlayCard component for what you're calling "modal pop-up". For a QR code, it might be a bit easier for apps to scan the code with an overlay that greys out the rest of the page.

Thanks @willdurand. I forgot about that component. I'm still not a huge fan of the "fake modal", but I guess we can implement it that way if that's what's in the spec.

[muffinresearch]

@bobsilverberg For UX input you could reach out to @designakt to see what's possible there.

[ioanarusiczki]

@bobsilverberg I checked on -dev the fenix collection. There are lots of addons which are recommended on both platforms so I was thinking I'll see the URL described above under the blue button with FF or another browser.

I downloaded a QRCode app, scanning the code from https://github.com/mozilla/addons-frontend/pull/10904 I am redirected to HTTPS Everywhere from prod.

Pls let me know how to test this.

[ioanarusiczki]

@bobsilverberg To add: I tried with these pages: https://addons-dev.allizom.org/en-US/firefox/addon/bubbles-for-mozilla-appr/ https://addons.allizom.org/en-US/firefox/addon/youtube-high-definition/ https://addons-dev.allizom.org/en-US/firefox/addon/not-promoted/

None has "Also available on Firefox for Android"

[willdurand]

@ioanarusiczki unfortunately, there is nothing visible yet: this issue is about adding a new UI component but it isn't used right now. It will be used in mozilla/addons#14295

[ioanarusiczki]

@willdurand Ok, thanks!

[bobsilverberg]

Yes, my apologies for not updating this issue. I will mark it as qa: not needed and all of it can be tested after the next patch lands which makes it visible.