Checkout: Thank You: Update support section in footer with new copy #3755

stephanethomas · 2016-03-03T13:37:27Z

This pull request addresses part of #2484 by updating the footer of the Thank You page with a new copy for the support section:

Testing instructions

Run git checkout update/thank-you-footer and start your server
Purchase any type of product
Check that the footer of the Thank You page displays as expected for large viewports
Check that the footer of the Thank You page displays as expected for small viewports
Purchase a Jetpack plan
Check that clicking on buttons now redirects you on the Jetpack site
Check that the support section displays correctly in the app components doc

Additional notes

I wasn't able to align vertically the gravatar, especially since there is a difference of placement for the buttons depending on the size of the viewport.

Reviews

Code
Product

fabianapsimoes · 2016-03-03T14:15:53Z

The mockup has a lot more vertical padding.

Mockup:

Implemented:

Should we maybe have a smaller gravatar for mobile? cc @mikeshelton1503

Mockup:

Implemented:

stephanethomas · 2016-03-03T15:27:00Z

I added more padding and also made sure the gravatar's size is consistent with the size of gridicons.

scruffian · 2016-03-03T16:57:48Z

client/my-sites/upgrades/checkout-thank-you/style.scss

 }

 .checkout-thank-you__footer-content {
-	margin: 16px auto;
+	margin-left: auto;
+	margin-right: auto;


Why not write this margin: 0 auto; and save a line?

Because in that case you're also resetting top and bottom margins. Moreover when it's explicit like this you don't have to think about it (and my old brain likes that), and it will be compiled as a single property/line by SASS anyway.

it will be compiled as a single property/line by SASS anyway.

That's cool. I didn't know this.

drewblaisdell · 2016-03-03T18:56:16Z

client/my-sites/upgrades/checkout-thank-you/footer.jsx

-				}
-			);
+		return (
+			<a className="button" href={ url } target={ target }>


What do you think about using <Button /> for this? I assume you intended to use it, because it is imported at the top, but never used.

Yes, I started with <Button /> but switched to a simple anchor because I assumed that this component couldn't allow me to manage the target attribute. Looks like I was plain wrong.

drewblaisdell · 2016-03-03T19:05:23Z

I had a couple minor notes which I addressed in a commit that I pushed onto this branch. Feel free to squash it in with your commits, or delete it if I missed something. Otherwise, the code LGTM. 👍

mtias · 2016-03-03T19:43:26Z

client/my-sites/upgrades/checkout-thank-you/footer.jsx

@@ -51,13 +69,27 @@ const CheckoutThankYouFooter = React.createClass( {
 		return (
 			<Card className="checkout-thank-you__footer">
 				<div className="checkout-thank-you__footer-content">
+					{ this.renderGravatar() }


This has become a nice component. Can we turn it into an app-component we can reuse outside of thank you pages? Thinking something like SupportFromHappiness that we can render in devdocs/app-components, on the /plans page, etc.

(It would also help clean up the thank-you stylesheet.)

Sure thing.

stephanethomas · 2016-03-04T12:32:29Z

Thank you everyone for your feedback! I've made the suggested changes and this pull request is now ready for a last look.

fabianapsimoes · 2016-03-04T13:09:29Z

I think we need placeholders for this section:

Especially because it shows the WordPress.com footer first even if you've just purchased a Jetpack product.

fabianapsimoes · 2016-03-07T15:51:09Z

I still think we need placeholders, since the URL changes depending on the product we're loading. Having the HE not change is nice, but the main issue is around the URL. Especially in cases such as the one Drew described, in which the page can take a while to fully load, there is a risk the user will click that button and be taken to the wrong support site.

mikeshelton1503 · 2016-03-07T17:58:20Z

I agree with @fabianapsimoes, let's go with placeholders. It eliminates the risk of a user going to the wrong place.

stephanethomas · 2016-03-07T20:21:35Z

I've rebased, updated existing placeholders to better match the expected layout of the Thank You page and finally added placeholders for the support section. Let me know what you think of it.

drewblaisdell · 2016-03-08T01:59:34Z

👍

Simpler is better.

…nent

This makes sure the same gravatar is always displayed even if the component is rerendered.

…arge viewports

scruffian · 2016-03-08T12:40:23Z

Product 👍

Checkout: Thank You: Update support section in footer with new copy

stephanethomas added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. labels Mar 3, 2016

stephanethomas self-assigned this Mar 3, 2016

stephanethomas added this to the Amber: Sprint milestone Mar 3, 2016

fabianapsimoes added [Status] Needs Author Reply and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 3, 2016

stephanethomas force-pushed the update/thank-you-footer branch 2 times, most recently from 9cede83 to 57df7eb Compare March 3, 2016 15:26

stephanethomas added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Author Reply labels Mar 3, 2016

stephanethomas force-pushed the update/thank-you-footer branch from 57df7eb to 8f2a871 Compare March 3, 2016 15:28

scruffian reviewed Mar 3, 2016
View reviewed changes

drewblaisdell added the [Type] Task label Mar 3, 2016

drewblaisdell reviewed Mar 3, 2016
View reviewed changes

mtias reviewed Mar 3, 2016
View reviewed changes

mtias added [Status] Needs Author Reply and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 3, 2016

stephanethomas force-pushed the update/thank-you-footer branch 2 times, most recently from 4a792e0 to 4025f7b Compare March 4, 2016 12:29

stephanethomas added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Author Reply labels Mar 4, 2016

fabianapsimoes added the [Status] Needs Author Reply label Mar 4, 2016

stephanethomas removed the [Status] Needs Author Reply label Mar 7, 2016

fabianapsimoes added [Status] Needs Author Reply and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 7, 2016

stephanethomas force-pushed the update/thank-you-footer branch 2 times, most recently from b860f4b to 6276965 Compare March 7, 2016 20:20

stephanethomas added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Author Reply labels Mar 7, 2016

stephanethomas added 10 commits March 8, 2016 09:18

Checkout: Thank You: Update support section in footer with new copy

56607d3

Checkout: Thank You: Simplify condition

94f5c34

Simpler is better.

Components: Order imports alphabetically

62ca5af

Checkout: Thank You: Extract happiness support section into app compo…

6e0bb32

…nent

Happiness Support: Add example to app components documentation

f4e0b04

Happiness Support: Prevent gravatar from changing during render

4331053

This makes sure the same gravatar is always displayed even if the component is rerendered.

Checkout: Thank You: Align support section with list of features in l…

f31d3e1

…arge viewports

Happiness Support: Remove hardcoded url to contact page

a71fae5

Checkout: Thank You: Update placeholders to better match expected layout

ec811ba

Happiness Support: Add placeholders

15b6e36

stephanethomas force-pushed the update/thank-you-footer branch from 6276965 to 15b6e36 Compare March 8, 2016 09:22

scruffian added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 8, 2016

scruffian added a commit that referenced this pull request Mar 8, 2016

Merge pull request #3755 from Automattic/update/thank-you-footer

27ca11e

Checkout: Thank You: Update support section in footer with new copy

scruffian merged commit 27ca11e into master Mar 8, 2016

scruffian deleted the update/thank-you-footer branch March 8, 2016 12:41

nylen removed the [Status] Ready to Merge label Mar 12, 2016

fabianapsimoes mentioned this pull request Mar 24, 2016

Checkout: Update support section in generic Thank You page #3943

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: Thank You: Update support section in footer with new copy #3755

Checkout: Thank You: Update support section in footer with new copy #3755

stephanethomas commented Mar 3, 2016

fabianapsimoes commented Mar 3, 2016

stephanethomas commented Mar 3, 2016

scruffian Mar 3, 2016

stephanethomas Mar 3, 2016

drewblaisdell Mar 3, 2016

drewblaisdell Mar 3, 2016

stephanethomas Mar 4, 2016

drewblaisdell commented Mar 3, 2016

mtias Mar 3, 2016

stephanethomas Mar 4, 2016

mtias Mar 4, 2016

stephanethomas commented Mar 4, 2016

fabianapsimoes commented Mar 4, 2016

fabianapsimoes commented Mar 7, 2016

mikeshelton1503 commented Mar 7, 2016

stephanethomas commented Mar 7, 2016

drewblaisdell commented Mar 8, 2016

scruffian commented Mar 8, 2016

Checkout: Thank You: Update support section in footer with new copy #3755

Checkout: Thank You: Update support section in footer with new copy #3755

Conversation

stephanethomas commented Mar 3, 2016

Testing instructions

Additional notes

Reviews

fabianapsimoes commented Mar 3, 2016

stephanethomas commented Mar 3, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewblaisdell commented Mar 3, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephanethomas commented Mar 4, 2016

fabianapsimoes commented Mar 4, 2016

fabianapsimoes commented Mar 7, 2016

mikeshelton1503 commented Mar 7, 2016

stephanethomas commented Mar 7, 2016

drewblaisdell commented Mar 8, 2016

scruffian commented Mar 8, 2016