Design phone home opt-in prompt

[allendav]

Before we can submit the connect plugin to the dot org repo, we need to make sure it includes code to obtain explicit consent before "phoning home" (rule 7 at https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/ )

**UPDATE: I realized after our sprint planning meeting that it doesn't matter if Jetpack or WooCommerce or anything are installed with regard to this requirement. We already have a separate issue to prompt the user to take care of missing Jetpack or WooCommerce ( #463 ) so let's just focus on getting the consent with this issue. For the purpose of getting into the dot org repo, lets just deal with this and then when we are ready for #463 it can update/fit into this work.

So, this issue is to design that opt-in prompt and how it appears in wp-admin (and on what pages it appears)**

And then implement it in https://github.com/Automattic/woocommerce-connect-client/issues/24

NOTE: The prompt should also link to the TOS, which should include the stored payment / credit card for label purchases terms ( Automattic/wp-calypso#7603 (comment) ) and "data transfer and privacy" terms related to the use of WooCommerce Connect.

[jameskoster]

As discussed in Slack, an admin notice is probably going to work best for this. Here's one that plays off the 'cloud' theme we've used before;

As an alternative we could run with the connecting cable idea which we've also used;

I'm not sure if we should adopt the WooCommerce core purple for the flourishes, or just use the standard blue like Jetpack. Thoughts appreciated on that.

For the terms themselves, it'd be cool if we could pull those in to the message itself to smoothen the process. Something like (with the terms appearing when the terms link is clicked);

The notice isn't dismissible because Connect is useless until the user has agreed or not.

Do you think we need an 'I don't agree' button?

Other thoughts @kellychoffman @allendav @robobot3000?

[kellychoffman]

Nice! I like the cloud graphics over the plug.

I'm not sure if we should adopt the WooCommerce core purple for the flourishes, or just use the standard blue like Jetpack.

Good question. For connect designs, I stuck with blue, but only because it fit in with its surroundings: settings and add-product pages use blue. The only time I deviated was in the Setup Wizard because its all purple there. Since the rest of our notices seem to be purple, I think we should stick with purple here. Hmm, maybe we should standardize all our colors everywhere going forward 😀

For the terms themselves, it'd be cool if we could pull those in to the message itself to smoothen the process. Something like (with the terms appearing when the terms link is clicked);

I think thats a good idea if we don't have pages and pages of text here. Do we know how long our terms will be? If they are super long: I wonder if it would be daunting to see a large amount of text in such a small space and would turn people off. Maybe an external link would be better? If its not super long, I think having it inline like you have it is the best idea.

The notice isn't dismissible because Connect is useless until the user has agreed or not. Do you think we need an 'I don't agree' button?

Yes, I think we need some sort of 'Nevermind', 'No thanks', or 'I don't agree' button here. It would also act as a dismiss.

[jameskoster]

I wonder if it would be daunting to see a large amount of text in such a small space and would turn people off.

Honestly I prefer that to being sent to a separate site. It makes it even easier to ignore which is what most people do.

[kellychoffman]

👍 Thought about this more and I agree. Lets keep it as is and just add a button for people who don't agree with our TOS.

[jameskoster]

What happens when you click on that button? Do we prompt to deactivate / uninstall?

[kellychoffman]

I don't think we should uninstall it. Lets just deactivate it just like what happens when you close the current 'connection' banner in an activated jetpack plugin:

So it would be: Click the 'nevermind/close/i disagree' button > notice goes away > success notice that the plugin has been deactivated appears

[jameskoster]

We don't want it to stand out so much so I reckon a text link will suffice?

[allendav]

For the terms themselves, it'd be cool if we could pull those in to the message itself to smoothen the process. Something like (with the terms appearing when the terms link is clicked);

Looks like we've concluded not to do this, and I think that is for the best - since it is not just our TOS but that TOS links to other TOSes and privacy policies and that could be a rats nest of an experience

@jameskoster - I like the TOS link but I think let's NOT link to shipping settings, since I assume once they click I agree the notice goes away and before that shipping settings isn't very useful to them?

And +1 to @kellychoffman 's suggestion of deactivating the plugin if they say no thanks

[allendav]

@jameskoster - one more question - we intend to display this notice throughout wp-admin, right?

[kellychoffman]

We don't want it to stand out so much so I reckon a text link will suffice?

My only concern is that we don't do that anywhere else.

we intend to display this notice throughout wp-admin, right?

We discussed this in today's chat, and the answer was yes.

[pesieminski]

OK, talked w @allendav today, and went through a few details on this flow.

A few notes and suggestions:

• If Connect is essentially un-usable without the connection to A8C, I think it's ok to include only a "CONNECT" button, and no-opt out. If we're clear that the connection to A8C is an inextricable part of how the plugin works (as the name might imply...), this should be fine. It is important to get a user to authorize us to connect to an external server - but don't think this means we need to get a specific opt out, esp if that makes the plugin useless.
• For the text of the notice, I'd like to say: "By clicking "Connect" below, you agree to our Terms of Service < use link to main WooCommerce TOS>, and understand that Connect for WooCommerce passes some data to external servers in order to enable its features. You can find more information about how your store's data is handled here." < use link to our new privacy support doc.
• There's no magic to the word "CONNECT" on the button. Just my suggestion, which I thought was a nice reinforcement of the name of the plugin. The only requirement is that the text on the button must match the text we use in the sentence above it. If we say "by clicking "Connect" the button should say "Connect".

[jameskoster]

No need for a mockup for that ^^ I assume @robobot3000 ?

[marcinbot]

No need, it makes sense

[allendav]

Done done