Checkout: Add thank you page for the domain only site flow #11702

gziolo · 2017-03-02T10:50:13Z

Implements #11452. ~~Requires D4612-code.~~

This PR:

Creates ThankYouCard from PlanThankYouCard.
Refactors PlanThankYouCard to use ThankYouCard.
Uses ThankYouCard to display a domain-only thank you page.

Testing

PlanThankYouCard

Make sure https://wpcalypso.wordpress.com/devdocs/blocks/plan-thank-you-card and http://calypso.localhost:3000/devdocs/blocks/plan-thank-you-card looks the same after refactoring. See also image below for comparison.
Visit /start while logged out (PlanThankYouCard is only displayed for new users).
Select a non-free plan on the plans page.
Proceed through signup and create a new user.
Assert that you land in checkout with the plan you selected in the second step.
Purchase the plan.
Assert that you land on a thank you page with PlanThankYouCard displayed for the plan you purchased like in the image above.

New thank you page

Visit /start/domain-first?new=DOMAIN where DOMAIN is a domain like thisisaniquedomain123.live.
Select Just purchase a domain.
Purchase the domain in checkout.
Assert that you land on a thank you page with ThankYouCard displayed for the domain you purchased like:

Review

Code
Copy
Design
Product

matticbot · 2017-03-02T10:50:15Z

Test live: https://calypso.live/?branch=update/domain-only-site-thank-you

drewblaisdell · 2017-03-02T18:23:54Z

client/my-sites/upgrades/index.js

@@ -234,7 +234,7 @@ module.exports = function() {

 	if ( config.isEnabled( 'upgrades/checkout' ) ) {
 		page(
-			'/checkout/thank-you/no-site/:receiptId',
+			'/checkout/thank-you/no-site/:receiptId?',


Thanks for fixing this.

drewblaisdell · 2017-03-02T18:54:07Z

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

@@ -229,6 +229,17 @@ const CheckoutThankYou = React.createClass( {
 			);
 		}

+		if ( this.props.domainOnlySiteFlow && ! failedPurchases ) {


Empty arrays are still truthy so we need to check the length here.

I had this locally:)

if ( this.props.domainOnlySiteFlow && failedPurchases.length === 0 && purchases.some( isDomainRegistration ) ) {

drewblaisdell · 2017-03-02T19:11:27Z

client/blocks/plan-thank-you-card/index.jsx

-						{ translate( 'Visit Your Site' ) }
-					</a>
-				</div>
+			<div className="plan-thank-you-card__heading">


I think these styles should live in ThankYouCard instead of PlanThankYouCard because we want to use them in every (currently, both) version of the thank you card.

Unfortunately, this means we won't be able to use children which is a nice API for this component. The other options would be to:

Reference thank-you-card styles in plan-thank-you-card.

Duplicate the styles between domain-thank-you-card and plan-thank-you-card.

I don't think either of those are preferable to using props instead of props.children here. What do you think?

I'm perfectly fine with this approach. This was my first idea, but I quickly got distracted by the power of children :)

What you proposed fits what we need in this particular approach and removes code duplication. If it turns out we need something different inside body we can always extract this content and create another component and get back to the concept of using children.

a8ci18n · 2017-03-02T20:56:56Z

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

+						heading={ this.translate( 'Thank you for your purchase!' ) }
+						description={ this.translate( "That looks like a great domain. Now it's time to get it all set up." ) }
+						buttonUrl={ domainManagementEdit( domainName, domainName ) }
+						buttonText={ this.translate( 'Manage Your Domain' ) }


Hi! I've found a possible matching string that has already been translated 52 times:
translate( 'Manage Your Domains' ) ES Score: 11
See 1 additional suggestion in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

@ranh suggested in #11452 to use Go To Your Domain instead.

drewblaisdell · 2017-03-02T23:35:38Z

@gziolo I think this is ready for review. :)

gziolo · 2017-03-03T07:00:55Z

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

 		// this placeholder is using just wp logo here because two possible states do not share a common layout
-		if ( ! purchases && ! failedPurchases && ! this.isGenericReceipt() ) {
+		if ( ! purchases.length && ! failedPurchases.length && ! this.isGenericReceipt() ) {


Good idea 👍

That's personal preference but I like using isEmpty() in those cases since it makes the code reads like a sentence.

gziolo · 2017-03-03T07:01:34Z

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

+
+					<ThankYouCard
+						name={ this.translate( 'Domain Registration' ) }
+						price={ purchase.displayPrice }


What about privacy protection?

gziolo · 2017-03-03T07:04:40Z

@drewblaisdell thanks for finishing this PR. Everything looks awesome.

I had only two comments, one related to the different copy for the button. We also need to double check if privacy protection cost is included in the price displayed on this page.

…e missing

…site flow

gziolo · 2017-03-07T05:51:20Z

@drewblaisdell thanks for fixing the issue raised by @stephanethomas 👍
Code looks good now!

gziolo · 2017-03-07T07:43:41Z

@stephanethomas can you try to reproduce the issue you discovered with the updated backend patch and client code? :)

stephanethomas · 2017-03-07T10:02:52Z

client/my-sites/upgrades/checkout/checkout.jsx

@@ -288,10 +282,12 @@ const Checkout = React.createClass( {
 		}

 		if ( receipt && receipt.receipt_id ) {
-			const receiptId = receipt.receipt_id;
+			const receiptId = receipt.receipt_id,
+				displayPrice = receipt.display_price;


This is where destructuring comes in handy:

const { receipt_id: receiptId, display_price: displayPrice } = receipt;

stephanethomas · 2017-03-07T10:12:08Z

@gziolo: I've just tested it and had the same issue again with the Thank You page. Note this time the /me/transactions endpoint returned the display_price property, but it was equal to zero:

{
  "code": 200,
  "headers": [{
    "name": "Content-Type",
    "value": "application\/json"
  }],
  "body": {
    "success": true,
    "error_code": "",
    "error_message": "",
    "receipt_id": "22457622",
    "display_price": "$0.00",
    "purchases": {
      ...

drewblaisdell · 2017-03-07T20:12:45Z

@stephanethomas There was an issue where we were camelCasing keys that were expected to be raw from the API that I fixed in 52cd24b.

I tested several times with and without the privacy upgrade and never saw a display_price of "$0.00". Would you mind trying again and seeing where in the patch this fails for you? :) (We should probably move this discussion there)

gziolo · 2017-03-08T07:47:23Z

It might be because @stephanethomas has tested it with credits. I'll double check it today with free credits :) I guess 0 price is sth expected in such case.

gziolo · 2017-03-08T10:56:58Z

I see also 0 in the email receipt when paying with credits:

gziolo · 2017-03-08T11:20:56Z

I tested also the case when paying with card, everything works properly. Product 👍

gziolo added Post Checkout [Type] Enhancement labels Mar 2, 2017

gziolo self-assigned this Mar 2, 2017

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Mar 2, 2017

gziolo added this to the Tortuga MVP: Development milestone Mar 2, 2017

gziolo force-pushed the update/domain-only-site-thank-you branch from 630d4c0 to 1a37150 Compare March 2, 2017 10:52

matticbot added [Size] M Medium sized issue [Size] XL Probably needs to be broken down into multiple smaller issues and removed [Size] XL Probably needs to be broken down into multiple smaller issues [Size] M Medium sized issue labels Mar 2, 2017

gziolo added the [Status] In Progress label Mar 2, 2017

drewblaisdell reviewed Mar 2, 2017

View reviewed changes

drewblaisdell force-pushed the update/domain-only-site-thank-you branch from 2474044 to 414c641 Compare March 2, 2017 20:52

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Mar 2, 2017

a8ci18n reviewed Mar 2, 2017

View reviewed changes

drewblaisdell added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Mar 2, 2017

gziolo commented Mar 3, 2017

View reviewed changes

gziolo requested review from ranh and danhauk March 3, 2017 07:05

drewblaisdell and others added 2 commits March 6, 2017 17:41

Checkout: Hide ThankYouCard if a receipt ID (and thus purchases) ar…

a46bbfb

…e missing

Checkout: Add copy changes to the Thank You page for the domain only …

1de5e4c

…site flow

drewblaisdell force-pushed the update/domain-only-site-thank-you branch from 1fb005a to 581a6d4 Compare March 7, 2017 01:46

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Mar 7, 2017

stephanethomas reviewed Mar 7, 2017

View reviewed changes

stephanethomas 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, 2017

Checkout: Provide raw receipt object to fetchReceiptCompleted action

52cd24b

drewblaisdell force-pushed the update/domain-only-site-thank-you branch from 581a6d4 to 52cd24b Compare March 7, 2017 20:08

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Mar 7, 2017

drewblaisdell 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, 2017

gziolo 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, 2017

gziolo merged commit 7b93ca8 into master Mar 8, 2017

gziolo deleted the update/domain-only-site-thank-you branch March 8, 2017 11:57

matticbot removed the [Status] Ready to Merge label Mar 8, 2017

ebinnion mentioned this pull request Mar 8, 2017

Plans: Color PlanThankYouCard based on plan #11865

Merged

fabianapsimoes mentioned this pull request Mar 13, 2017

Domains: No confirmation after domain-only purchase #11452

Closed

snyk-bot mentioned this pull request Nov 19, 2020

[Snyk] Fix for 1 vulnerabilities awaisab172/wp-calypso#49

Open

awaisab172 mentioned this pull request Jun 24, 2023

[Snyk] Fix for 1 vulnerabilities awaisab172/wp-calypso#153

Open

awaisab172 mentioned this pull request Nov 30, 2023

[Snyk] Fix for 1 vulnerabilities awaisab172/wp-calypso#174

Open

awaisab172 mentioned this pull request Jan 9, 2024

[Snyk] Fix for 1 vulnerabilities awaisab172/wp-calypso#180

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: Add thank you page for the domain only site flow #11702

Checkout: Add thank you page for the domain only site flow #11702

gziolo commented Mar 2, 2017 •

edited

Loading

matticbot commented Mar 2, 2017

drewblaisdell Mar 2, 2017

drewblaisdell Mar 2, 2017 •

edited

Loading

gziolo Mar 3, 2017

drewblaisdell Mar 2, 2017 •

edited

Loading

gziolo Mar 3, 2017

a8ci18n Mar 2, 2017

gziolo Mar 3, 2017

drewblaisdell commented Mar 2, 2017

gziolo Mar 3, 2017

stephanethomas Mar 6, 2017

gziolo Mar 3, 2017

gziolo commented Mar 3, 2017

gziolo commented Mar 7, 2017

gziolo commented Mar 7, 2017

stephanethomas Mar 7, 2017

stephanethomas commented Mar 7, 2017

drewblaisdell commented Mar 7, 2017

gziolo commented Mar 8, 2017

gziolo commented Mar 8, 2017

gziolo commented Mar 8, 2017

Checkout: Add thank you page for the domain only site flow #11702

Checkout: Add thank you page for the domain only site flow #11702

Conversation

gziolo commented Mar 2, 2017 • edited Loading

Testing

Review

matticbot commented Mar 2, 2017

Choose a reason for hiding this comment

drewblaisdell Mar 2, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewblaisdell Mar 2, 2017 • edited Loading

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 2, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Mar 3, 2017

gziolo commented Mar 7, 2017

gziolo commented Mar 7, 2017

Choose a reason for hiding this comment

stephanethomas commented Mar 7, 2017

drewblaisdell commented Mar 7, 2017

gziolo commented Mar 8, 2017

gziolo commented Mar 8, 2017

gziolo commented Mar 8, 2017

gziolo commented Mar 2, 2017 •

edited

Loading

drewblaisdell Mar 2, 2017 •

edited

Loading

drewblaisdell Mar 2, 2017 •

edited

Loading