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

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.

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

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)

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.

Could you design it for mobile and desktop sizes?

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

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

Mobile banner (X still to be removed).

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

The spacing is fixed in the PR.

https://github.com/mozilla/fireplace/commit/9ea27d4c5217d11ef5d0f703e3f940922a174db2 This isn't active on -dev or stage yet (waffled).

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

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)

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

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?

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

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.

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.

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.

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

https://github.com/mozilla/fireplace/commit/a1775444ec0aa78ef767459d50149308caf300c1 Updated banner look and used shorter "Learn how to transfer your account" button text.

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

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.

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

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.

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

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.

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

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