1052864 - Create a banner on the consumer pages

Status: VERIFIED FIXED

(Marketplace Graveyard :: Integration, defect, P2)

Description

[Andy McKay]

We'd like to have a banner on the consumer pages for logged in users that redirects them to setting up a firefox account. This should only show up under the following conditions:

* if the user has logged in with a firefox account (see bug 1052625)
* if the user isn't on a FxOS 2.x device
* if some flag or setting is enabled (maybe this should be a different one from fx-auth itself)

The message should be tailored to meet the conditions:

* user is signed in but has a verified persona account
* user is signed in but does not have a verified persona account

Comment 1

[Maureen Hanratty]

Updated banner text to copy from Scott: https://www.lucidchart.com/documents/edit/769cc8ee-64c7-456c-aceb-c4c6a43929dd/1 (see second tab, banners are on the left)

We'll need to do some changes to the visual design of our current banner, especially to address the issue of having two things to click on in a small area (the "Transfer account" link and the "Learn more" link.) Looping in Phil for visual design feedback.

Comment 2

[Andy McKay]

The banner for a logged in user is #1.
The banner for a logged out user is unnumbered.

Comment 3

[Philip [:pwalm]]

Attachment: banner.png

Proposed banner! Thoughts?
Colour: #64be3c
Type:
- Line 1: Fira Sans Light, 15px, #ffffff (Link: Fira Sans Regular)
- Line 2: Fira Sans Light, 12px, #ffffff (Link: Fira Sans Regular)

Comment 4

[Philip [:pwalm]]

Attachment: new-banners.png

Scratch that last banner. After a team critique, it was pointed out that the thing that screams "click me" the most is the "x", which is not what we want! So I've reverted back to the original style for the notification banner. Which works better if we a) remove the FF icon, or b) remove some copy.

Comment 5

[Christopher Van Wiemeersch [:cvan]]

Could you design it for mobile and desktop sizes?

Comment 6

[Tony Santos [:tsmuse]]

This is the standard notification banner spec'd in the style guide at: http://pwalm.github.io/marketplace-style-guides/navigation.html under "Events"

Comment 7

[Philip [:pwalm]]

Remove the "x" from the banner. It will stay persistent until the user takes the plunge and finally converts.

Comment 8

[Mark Striemer [:mstriemer]]

Attachment: fx-accounts-banner-320x480.png

Mobile banner (X still to be removed).

Comment 9

[Mark Striemer [:mstriemer]]

https://github.com/mozilla/fireplace/pull/657

Comment 10

[Christopher Van Wiemeersch [:cvan]]

Looks good, but shouldn't the green area be flush with the header?

https://www.dropbox.com/s/js8fpjt0oc0q5t8/Screenshot%202014-09-15%2013.40.40.png?dl=0

Comment 11

[Mark Striemer [:mstriemer]]

The spacing is fixed in the PR.

Comment 12

[Mark Striemer [:mstriemer]]

https://github.com/mozilla/fireplace/commit/9ea27d4c5217d11ef5d0f703e3f940922a174db2

This isn't active on -dev or stage yet (waffled).

Comment 13

[Mark Striemer [:mstriemer]]

This will need to be tested on FxOS 1.1 also (sorry).

Comment 14

[Mark Striemer [:mstriemer]]

Might be worth checking that the polyfill's tests [1] are all green, the demo [2] has a spinning clock and a fixed clock, and this other demo [3] has some logos rotating and sliding around on 1.1 also.

[1] http://webreflection.github.io/document-register-element/test/ (http://bit.ly/YEnQ8C)
[2] https://webreflection.github.io/custom-element/ (http://bit.ly/ZobC3P)
[3] http://kentaromiura.github.io/transform-3d/ (http://bit.ly/ZobD7W)

Comment 15

[Philip [:pwalm]]

Attachment: fxa-banner-mobile.png

Banner for mobile: We strip out everything but the most necessary text, and center the copy/button. Conserves space and looks balanced.

Comment 16

[Mark Striemer [:mstriemer]]

Reopening to update text and look.

Just to be clear, we're hiding the "Learn about Firefox Accounts" part on mobile but leaving it on wider screens?

Comment 17

[Mark Striemer [:mstriemer]]

zamboni migration and template update: https://github.com/mozilla/zamboni/commit/11bc3a7a55e387a316e0530381ab4c9a0633efb3

Comment 18

[Philip [:pwalm]]

Attachment: mobile banner - 2 options.png

Here is the mobile banner with the "Learn more" link and copy. Looks ok, but i think we could put the "Learn more" on the transfer page as per Maureen's suggestion.

Comment 19

[Philip [:pwalm]]

Attachment: banner in German.png

For kicks, here's what the banner would look like translated into German. It all holds up pretty well, except the mobile banner with "learn more" is getting a bit close to the edges of the screen. Looks pretty cramped.

Comment 20

[Maureen Hanratty]

Ok, just checked with Scott. Let's change the button text to "Learn more about transferring your account" (if that is too long we can drop the "more"). When clicking on the button the user will be taken to a pop-up with more context about the switch. I'll update the pop-up in the Lucid chart.

Comment 21

[Maureen Hanratty]

Ok, talked to Scott. Can we remove the "!" from "Firefox Accounts has arrived." After the banner we will take the user to the #4 screen on the Lucid chart: https://www.lucidchart.com/documents/edit/769cc8ee-64c7-456c-aceb-c4c6a43929dd/1

Comment 22

[Mark Striemer [:mstriemer]]

https://github.com/mozilla/fireplace/commit/a1775444ec0aa78ef767459d50149308caf300c1

Updated banner look and used shorter "Learn how to transfer your account" button text.

Comment 23

[Victor Carciu]

This banner is not displayed at all for https://marketplace-dev.allizom.org/

Comment 24

[Victor Carciu]

Also , please note that the banner is present on MP-dev app for FxOS 2.x device. Based on initial scenario, the banner should only show "* if the user isn't on a FxOS 2.x device".

Please let me know if a new bug is needed here.

Comment 25

[Madalin Cotetiu]

The banner is not present also on FFOS 1.3 (Inari) when using the MP-dev app.

Comment 26

[Mark Striemer [:mstriemer]]

The banner should be shown to users that have logged in using Persona on the current device before but have not logged in with Firefox Accounts on the current device. This is a bit hard to test since Persona is gone.

STR (new user)
1. Open a new Private Browsing window.
2. Go to https://marketplace-dev.allizom.org.
3. Verify that the banner is not shown.

STR (returning Persona user)
1. Open a Private Browsing window.
2. Go to https://marketplace-dev.allizom.org.
3. Verify that the banner is not shown.
4. Open the JavaScript console and run: require('storage').setItem('permissions', {});
5. Reload the page.
6. Verify that the banner is shown.

STR (hidden after FxA login)
1. Complete the steps for "returning Persona user".
2. Click on "Sign in" or "Learn how to transfer your account".
3. Verify that you see the migration info described in bug 1065725.
4. Click continue.
5. Verify that you see the email form described in bug 1052876.
6. Enter an email address, one of the following will occur:
  a) If the email address has completed the FxA login flow in the current environment
     (-dev, stage, etc) you will be redirected to the FxA Sign In page with email prepopulated.
  b) If the email address has not completed the FxA login flow in the current environment
     you will be redirected to the FxA Register page with email prepopulated.
7. Complete your FxA authentication.
8. Verify that you are logged in and the banner is no longer visible.
9. Reload the page and verify that the banner is still not visible.

Comment 27

[Mark Striemer [:mstriemer]]

To clarify step 6 of "hidden after FxA login" the redirect location will change if the user has completed the FxA login flow on this environment but not on this "device" (clearing your localStorage or opening a Private Browing will make the app think it's on a new device).

Comment 28

[Andy McKay]

Those worked for me. The only change is that instead of doing "require ..." on the console, do:

window.localStorage.setItem('0::permissions', {})

To avoid a require not defined issue.

Comment 29

[Christopher Van Wiemeersch [:cvan]]

That should be `window.localStorage.setItem('0::permissions', '{}')`. You can't serialise objects - only strings.

Comment 30

[Victor Carciu]

Verified all scenarios from above and everything worked as expected. Marking bug as verified.