Guided Transfer: Notices for ineligibility

[jordwest]

This PR was rebased and depends on the refactoring work in #7347 (Merged)

This PR adds notices informing the user when there are potential issues impeding a Guided Transfer.

Notices:

• GT unavailable (error)
• GT on vacation (error)
• Premium theme (warning)
• Custom font (warning)

[jordwest]

After implementing the 'unavailable' notice, I'm not sure whether the notice really belongs on that page:

Should we move that notice (and the vacation notice) to the Export page?

[jordwest]

@dllh @mrheston: I've just made some changes to the way the GT ineligibility information is displayed. Would love some design review on this idea:

If there's an issue blocking transfer (vacation/GT disabled) then we'll display a card where the first step would have been:

Until we have premium theme/custom font auto-fixing implemented:

If the GT process can auto-resolve the premium theme/custom font issues, we'll instead display the issues as notices as originally planned:

[folletto]

Should we move that notice (and the vacation notice) to the Export page?

If possibile (I'm not sure it's feasible) would be ideal to change the message on the first page, without having the user to click "Purchase" first.

Here's a quick mock:

Make sure that each of the action in the "fixes" list has a link to where actually that bit can be fixed. :)

[dllh]

I think this looks great, and @folletto's feedback seems right as well.

I note that on the fonts notice (the yellow one), we still refer to switching the theme.

[folletto]

I note that on the fonts notice (the yellow one), we still refer to switching the theme.

Cool!

I'd say to adjust it as needed. I think the important bit is to provide a link for each bit — you're more aware than me on what's right in each of the bits. :)

[dllh]

Oh, I meant in the original yellow notice (not your mockup), which
presumably we'll still show in case the user doesn't resolve the issue in
the step you've kindly suggested.

On Fri, Aug 5, 2016 at 8:02 AM, Davide Casali notifications@github.com
wrote:

I note that on the fonts notice (the yellow one), we still refer to
switching the theme.

Cool!

I'd say to adjust it as needed. I think the important bit is to provide a
link for each bit — you're more aware than me on what's right in each of
the bits. :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#7270 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACnITAwr2WAVuDokyEul3UkmvTPAA30Sks5qcyZtgaJpZM4JchKF
.

[jordwest]

Those designs look great ✨

One thing I'm concerned about is that users might not know what a Guided Transfer is, and might be reluctant to rectify those issues without knowing what they're doing it for. How about displaying the issues card above/below the normal description card?

It was becoming difficult to modify the Export and Guided Transfer cards, so I've also done some refactoring work to organize the export page components better in #7347.

I've also started implementing the changes suggested above, but they're still a work in progress.

[folletto]

One thing I'm concerned about is that users might not know what a Guided Transfer is, and might be reluctant to rectify those issues without knowing what they're doing it for. How about displaying the issues card above/below the normal description card?

I'd try to avoid stacking a full-height card and a full-height explanation at the same time, but I think you're right about the lack of explanation there.

Then maybe we can just use the "not available" message displayed immediately (with a line at the end saying "For more details click here." pointing to the support page), and instead use the "checklist" inside as you had before, so one can still read the full description before clicking.

[evilluendas]

What if we reduce a little bit the text on the unavailability info and display it in a popover? Something like this, that would display when hovering the deactivated button:

Then we can have the checklist in the second screen, like this:

In a next iteration we could consider deactivating the conflicting customizations automatically when you purchase the GT instead of having those two buttons to manually make the changes. (Although having the user to consciously change the theme makes it less prone to unpleasant surprises afterwards, so maybe it's better this way.)

[jordwest]

@mrheston That looks great. On the second screen, we'll also need to hide or disable the 'Set up Guided Transfer' card to prevent the user moving to the next step while there are issues.

[jordwest]

Popover and disabled button implemented in 4d94c27:

[folletto]

would display when hovering the deactivated button

It's a good solution. We need to make sure it works on mobile, which doesn't have hover tho. Maybe we can swap the disabled button (which is also not really readable) with a notification rectangle with the i icon, and make that both clickable and hoverable?

[jordwest]

Just finished implementing these suggestions:

I spent more time than I care to admit trying to get that little i aligned with the text 😄

I've left those auto-resolving buttons out for now, there are a whole bunch of UI and API considerations in that (eg, confirmation dialog or undo, the sequence of API calls required) which we should take to another PR. It's pretty simple to resolve the issues manually for now though, here's a quick GIF:

[dllh]

I gave this a test and was able to force GT to be unavailable so that I could see the little gray button and explanatory bubble, but I couldn't repro the yellow notice. I tried making GT available to click through to the host listing screen, then making GT unavailable and clicking a host logo, but I was then able to see the credentials page. Steps to test would be really helpful here.

[dllh]

Maybe link to /help/contact here?

[jordwest]

@dllh Was the screen below the one you couldn't reproduce?

To reach that screen:

1. GTs should be enabled generally (not disabled or on vacation)
2. Switch to a site with a premium theme and/or custom fonts set
3. Click the Purchase a Guided Transfer button
4. You should see the yellow notice and issues list.
5. Fix the issues, then return to that screen.
6. The host selection screen should appear.

[dllh]

Ah, yeah, that was it. I tested that flow, disabled the offending upgrades, and was able to move through the flow to the next step. The code looks pretty uncontroversial to me, so let's 🚢, maybe with the addition of the link I've suggested.

[jordwest]

Rebased and added the support link in 391ba34