From c402787d09be84933960bdf70c2904242e515341 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 2 Mar 2017 11:48:55 +0100 Subject: [PATCH 1/8] Checkout: Add thank you page for the domain only site flow --- .../upgrades/checkout-thank-you/index.jsx | 35 ++++++++++++------- .../my-sites/upgrades/checkout/checkout.jsx | 6 ---- client/my-sites/upgrades/controller.jsx | 3 +- client/my-sites/upgrades/index.js | 2 +- 4 files changed, 26 insertions(+), 20 deletions(-) diff --git a/client/my-sites/upgrades/checkout-thank-you/index.jsx b/client/my-sites/upgrades/checkout-thank-you/index.jsx index cc08e83ec73b0..242b202b74f0f 100644 --- a/client/my-sites/upgrades/checkout-thank-you/index.jsx +++ b/client/my-sites/upgrades/checkout-thank-you/index.jsx @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import { find } from 'lodash'; import page from 'page'; -import React from 'react'; +import React, { PropTypes } from 'react'; import moment from 'moment'; /** @@ -75,13 +75,14 @@ function findPurchaseAndDomain( purchases, predicate ) { const CheckoutThankYou = React.createClass( { propTypes: { - failedPurchases: React.PropTypes.array, - productsList: React.PropTypes.object.isRequired, - receiptId: React.PropTypes.number, - selectedFeature: React.PropTypes.string, - selectedSite: React.PropTypes.oneOfType( [ - React.PropTypes.bool, - React.PropTypes.object + domainOnlySiteFlow: PropTypes.bool.isRequired, + failedPurchases: PropTypes.array, + productsList: PropTypes.object.isRequired, + receiptId: PropTypes.number, + selectedFeature: PropTypes.string, + selectedSite: PropTypes.oneOfType( [ + PropTypes.bool, + PropTypes.object ] ).isRequired }, @@ -207,10 +208,6 @@ const CheckoutThankYou = React.createClass( { wasDotcomPlanPurchased = purchases.some( isDotComPlan ); } - const userCreatedMoment = moment( this.props.userDate ), - isNewUser = userCreatedMoment.isAfter( moment().subtract( 2, 'hours' ) ), - goBackText = this.props.selectedSite ? this.translate( 'Back to my site' ) : this.translate( 'Register Domain' ); - // this placeholder is using just wp logo here because two possible states do not share a common layout if ( ! purchases && ! failedPurchases && ! this.isGenericReceipt() ) { // disabled because we use global loader icon @@ -221,6 +218,9 @@ const CheckoutThankYou = React.createClass( { /* eslint-enable wpcalypso/jsx-classname-namespace */ } + const userCreatedMoment = moment( this.props.userDate ), + isNewUser = userCreatedMoment.isAfter( moment().subtract( 2, 'hours' ) ); + // streamlined paid NUX thanks page if ( isNewUser && wasDotcomPlanPurchased ) { return ( @@ -238,6 +238,17 @@ const CheckoutThankYou = React.createClass( { ); } + if ( this.props.domainOnlySiteFlow ) { + return ( +
+ { this.renderConfirmationNotice() } +
Domain purchased :)
+
+ ); + } + + const goBackText = this.props.selectedSite ? this.translate( 'Back to my site' ) : this.translate( 'Register Domain' ); + // standard thanks page return (
diff --git a/client/my-sites/upgrades/checkout/checkout.jsx b/client/my-sites/upgrades/checkout/checkout.jsx index 486c0cd6049dd..8bc8e423a433b 100644 --- a/client/my-sites/upgrades/checkout/checkout.jsx +++ b/client/my-sites/upgrades/checkout/checkout.jsx @@ -43,7 +43,6 @@ import { getSelectedSiteSlug, } from 'state/ui/selectors'; import { getDomainNameFromReceiptOrCart } from 'lib/domains/utils'; -import { domainManagementList } from 'my-sites/upgrades/paths'; import { fetchSitesAndUser } from 'lib/signup/step-actions'; const Checkout = React.createClass( { @@ -206,11 +205,6 @@ const Checkout = React.createClass( { ? `/plans/${ selectedSiteSlug }/thank-you` : '/checkout/thank-you/plans'; } else if ( cart.create_new_blog ) { - const domainName = getDomainNameFromReceiptOrCart( receipt, cart ); - if ( domainName && receipt && isEmpty( receipt.failed_purchases ) ) { - return domainManagementList( domainName ); - } - return `/checkout/thank-you/no-site/${ receiptId }`; } diff --git a/client/my-sites/upgrades/controller.jsx b/client/my-sites/upgrades/controller.jsx index 4390521ab0374..024bebe263a59 100644 --- a/client/my-sites/upgrades/controller.jsx +++ b/client/my-sites/upgrades/controller.jsx @@ -6,7 +6,7 @@ import qs from 'qs'; import i18n from 'i18n-calypso'; import ReactDom from 'react-dom'; import React from 'react'; -import { get } from 'lodash'; +import { get, isEmpty } from 'lodash'; /** * Internal Dependencies @@ -264,6 +264,7 @@ module.exports = { ), diff --git a/client/my-sites/upgrades/index.js b/client/my-sites/upgrades/index.js index 460ce064670f6..185b01f4e9b40 100644 --- a/client/my-sites/upgrades/index.js +++ b/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?', upgradesController.checkoutThankYou ); From 0054e1258be058cbb74f8f2bf3b9a914f9e15ffd Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 2 Mar 2017 17:42:24 +0100 Subject: [PATCH 2/8] Components: Extract ThankYouCard component --- assets/stylesheets/_components.scss | 1 + client/blocks/plan-thank-you-card/index.jsx | 106 ++++------- client/blocks/plan-thank-you-card/style.scss | 169 ------------------ client/components/thank-you-card/index.jsx | 51 ++++++ client/components/thank-you-card/style.scss | 168 +++++++++++++++++ .../upgrades/checkout-thank-you/index.jsx | 2 +- 6 files changed, 258 insertions(+), 239 deletions(-) create mode 100644 client/components/thank-you-card/index.jsx create mode 100644 client/components/thank-you-card/style.scss diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 117601c7dc8a2..ceb946c467db1 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -154,6 +154,7 @@ @import 'components/sticky-panel/style'; @import 'components/suggestions/style'; @import 'components/textarea-autosize/style'; +@import 'components/thank-you-card/style'; @import 'components/theme/style'; @import 'components/themes-list/style'; @import 'components/tinymce/style'; diff --git a/client/blocks/plan-thank-you-card/index.jsx b/client/blocks/plan-thank-you-card/index.jsx index 9ec39984e4740..2897f991b4ca2 100644 --- a/client/blocks/plan-thank-you-card/index.jsx +++ b/client/blocks/plan-thank-you-card/index.jsx @@ -1,11 +1,10 @@ /** * External dependencies */ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import { localize } from 'i18n-calypso'; import { connect } from 'react-redux'; import classnames from 'classnames'; -import Gridicon from 'gridicons'; /** * Internal dependencies @@ -16,76 +15,45 @@ import QuerySites from 'components/data/query-sites'; import QuerySitePlans from 'components/data/query-site-plans'; import { getPlan } from 'lib/plans'; import formatCurrency from 'lib/format-currency'; +import ThankYouCard from 'components/thank-you-card'; -class PlanThankYouCard extends Component { - static propTypes = { - siteId: PropTypes.number.isRequired - }; +const PlanThankYouCard = ( { + plan, + translate, + siteId, + siteURL, +} ) => { + const name = plan && translate( '%(planName)s Plan', { + args: { planName: getPlan( plan.productSlug ).getTitle() } + } ); + const price = plan && formatCurrency( plan.rawPrice, plan.currencyCode ); + + return ( + + + - render() { - const { - plan, - translate, - siteId, - siteURL, - } = this.props; - // Non standard gridicon sizes are used here because we use them as background pattern with various sizes and rotation - /* eslint-disable wpcalypso/jsx-gridicon-size */ - return ( -
- - -
- - { ! plan - ?
-
-
-
- :
-
- { translate( '%(planName)s Plan', { - args: { planName: getPlan( plan.productSlug ).getTitle() } - } ) } -
-
- { formatCurrency( plan.rawPrice, plan.currencyCode ) } -
-
- } -
- - - - - - - - - - - - -
-
-
-
- { translate( 'Thank you for your purchase!' ) } -
-
- { translate( "Now that we've taken care of the plan, it's time to see your new site." ) } -
- - { translate( 'Visit Your Site' ) } - -
+
+ { translate( 'Thank you for your purchase!' ) }
- ); - /* eslint-enable wpcalypso/jsx-gridicon-size */ - } -} +
+ { translate( "Now that we've taken care of the plan, it's time to see your new site." ) } +
+ + { translate( 'Visit Your Site' ) } + + + ); +}; + +PlanThankYouCard.propTypes = { + plan: PropTypes.object, + siteId: PropTypes.number.isRequired, + siteUrl: PropTypes.string, + translate: PropTypes.func.isRequired, +}; export default connect( ( state, ownProps ) => { const site = getRawSite( state, ownProps.siteId ); diff --git a/client/blocks/plan-thank-you-card/style.scss b/client/blocks/plan-thank-you-card/style.scss index 88ffd7a1a4b12..4b0e0525d2747 100644 --- a/client/blocks/plan-thank-you-card/style.scss +++ b/client/blocks/plan-thank-you-card/style.scss @@ -1,41 +1,3 @@ -.plan-thank-you-card { - position: relative; - width: 100%; - max-width: 500px; - background-color: darken( $alert-green, 10 ); - border-radius: 8px 8px 6px 6px; - overflow: hidden; - margin: 12px auto 24px; - color: $white; - font-family: $sans; - text-align: center; - - @include breakpoint( ">480px" ) { - margin-top: 28px; - } -} - -.plan-thank-you-card__header { - background-color: $alert-green; - padding: 12px 0; - position: relative; - line-height: 1.2; - border-radius: 6px 6px 0 0; - overflow: hidden; - - @include breakpoint( ">480px" ) { - padding: 32px 0 15px; - } -} - -.plan-thank-you-card__body { - padding: 24px; - - @include breakpoint( ">480px" ) { - padding: 40px; - } -} - .plan-thank-you-card__heading { font-size: 18px; font-weight: 600; @@ -100,134 +62,3 @@ border-width: 2px 1px 1px; color: darken( $alert-green, 30 ); } - -.plan-thank-you-card__plan-name { - font-size: 18px; - font-weight: 500; - margin-bottom: 5px; - - &.is-placeholder { - @include placeholder(); - - background-color: lighten( $alert-green, 40 ); - margin-left: auto; - margin-right: auto; - width: 35%; - } -} - -.plan-thank-you-card__plan-price { - font-size: 15px; - font-weight: 500; - color: lighten( $alert-green, 40 ); - - &.is-placeholder { - @include placeholder(); - - background-color: lighten( $alert-green, 40 ); - margin-left: auto; - margin-right: auto; - width: 10%; - } -} - -@keyframes floating { - 0% { - opacity: 0; - transform: translateY( 0 ) translateX( 0 ) rotate( 0 ); - } - 70% { - opacity: 1; - transform: translateY( 5px ) translateX( 5px ) rotate( -20deg ); - } - 100% { - opacity: 0; - transform: translateY( 0 ) translateX( 0 ) rotate( 0 ); - } -} - -.plan-thank-you-card__background-icons { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - color: rgba( $white, 0.4 ); - - .gridicon { - position: absolute; - opacity: 0; - animation: floating 10s infinite ease-in-out; - } - - .gridicon:nth-child(1) { - top: 18px; - left: 14.8%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(2) { - top: 118px; - left: 67.4%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(3) { - top: 108px; - left: 86.2%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(4) { - top: 190px; - left: 8.4%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(5) { - top: 233px; - left: 70.6%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(6) { - top: 83px; - left: 4.2%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(7) { - top: 213px; - left: 23.8%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(8) { - top: 30px; - left: 37.8%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(9) { - top: 26px; - left: 78.4%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(10) { - top: 101px; - left: 21%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(11) { - top: 21px; - left: 62%; - animation-delay: random(10) + s; - } - .gridicon:nth-child(12) { - top: 161px; - left: 77.6%; - animation-delay: random(10) + s; - } -} - -.plan-thank-you-card__main-icon { - width: 72px; - height: 72px; - - @include breakpoint( ">480px" ) { - width: 96px; - height: 96px; - } -} diff --git a/client/components/thank-you-card/index.jsx b/client/components/thank-you-card/index.jsx new file mode 100644 index 0000000000000..f720202f48c1b --- /dev/null +++ b/client/components/thank-you-card/index.jsx @@ -0,0 +1,51 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import Gridicon from 'gridicons'; +import React, { PropTypes } from 'react'; + +// Non standard gridicon sizes are used here because we use them as background pattern with various sizes and rotation +/* eslint-disable wpcalypso/jsx-gridicon-size */ +const ThankYouCard = ( { children, price, name } ) => ( +
+
+ + +
+
+ { name } +
+
+ { price } +
+
+ +
+ + + + + + + + + + + + +
+
+
+ { children } +
+
+); +/* eslint-enable wpcalypso/jsx-gridicon-size */ + +ThankYouCard.propTypes = { + name: PropTypes.string, + price: PropTypes.string +}; + +export default ThankYouCard; diff --git a/client/components/thank-you-card/style.scss b/client/components/thank-you-card/style.scss new file mode 100644 index 0000000000000..8112b7ca73164 --- /dev/null +++ b/client/components/thank-you-card/style.scss @@ -0,0 +1,168 @@ +.thank-you-card { + position: relative; + width: 100%; + max-width: 500px; + background-color: darken( $alert-green, 10 ); + border-radius: 8px 8px 6px 6px; + overflow: hidden; + margin: 12px auto 24px; + color: $white; + font-family: $sans; + text-align: center; + + @include breakpoint( ">480px" ) { + margin-top: 28px; + } +} + +.thank-you-card__header { + background-color: $alert-green; + padding: 12px 0; + position: relative; + line-height: 1.2; + border-radius: 6px 6px 0 0; + overflow: hidden; + + @include breakpoint( ">480px" ) { + padding: 32px 0 15px; + } +} + +.thank-you-card__body { + padding: 24px; + + @include breakpoint( ">480px" ) { + padding: 40px; + } +} + +.thank-you-card__main-icon { + width: 72px; + height: 72px; + + @include breakpoint( ">480px" ) { + width: 96px; + height: 96px; + } +} + +.thank-you-card__name { + font-size: 18px; + font-weight: 500; + margin-bottom: 5px; + + &.is-placeholder { + @include placeholder(); + + background-color: lighten( $alert-green, 40 ); + margin-left: auto; + margin-right: auto; + width: 35%; + } +} + +.thank-you-card__price { + font-size: 15px; + font-weight: 500; + color: lighten( $alert-green, 40 ); + + &.is-placeholder { + @include placeholder(); + + background-color: lighten( $alert-green, 40 ); + margin-left: auto; + margin-right: auto; + width: 10%; + } +} + +@keyframes floating { + 0% { + opacity: 0; + transform: translateY( 0 ) translateX( 0 ) rotate( 0 ); + } + 70% { + opacity: 1; + transform: translateY( 5px ) translateX( 5px ) rotate( -20deg ); + } + 100% { + opacity: 0; + transform: translateY( 0 ) translateX( 0 ) rotate( 0 ); + } +} + +.thank-you-card__background-icons { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + color: rgba( $white, 0.4 ); + + .gridicon { + position: absolute; + opacity: 0; + animation: floating 10s infinite ease-in-out; + } + + .gridicon:nth-child(1) { + top: 18px; + left: 14.8%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(2) { + top: 118px; + left: 67.4%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(3) { + top: 108px; + left: 86.2%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(4) { + top: 190px; + left: 8.4%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(5) { + top: 233px; + left: 70.6%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(6) { + top: 83px; + left: 4.2%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(7) { + top: 213px; + left: 23.8%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(8) { + top: 30px; + left: 37.8%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(9) { + top: 26px; + left: 78.4%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(10) { + top: 101px; + left: 21%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(11) { + top: 21px; + left: 62%; + animation-delay: random(10) + s; + } + .gridicon:nth-child(12) { + top: 161px; + left: 77.6%; + animation-delay: random(10) + s; + } +} diff --git a/client/my-sites/upgrades/checkout-thank-you/index.jsx b/client/my-sites/upgrades/checkout-thank-you/index.jsx index 242b202b74f0f..63eaee0bdb6f1 100644 --- a/client/my-sites/upgrades/checkout-thank-you/index.jsx +++ b/client/my-sites/upgrades/checkout-thank-you/index.jsx @@ -238,7 +238,7 @@ const CheckoutThankYou = React.createClass( { ); } - if ( this.props.domainOnlySiteFlow ) { + if ( this.props.domainOnlySiteFlow && ! failedPurchases ) { return (
{ this.renderConfirmationNotice() } From a4373f6d432b804f79a8801bd5aaa9eca9bc1472 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Thu, 2 Mar 2017 11:01:21 -0800 Subject: [PATCH 3/8] Checkout: Check the `purchases` and `failedPurchases` length as empty arrays are truthy --- client/my-sites/upgrades/checkout-thank-you/index.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/client/my-sites/upgrades/checkout-thank-you/index.jsx b/client/my-sites/upgrades/checkout-thank-you/index.jsx index 63eaee0bdb6f1..280ab42cb234d 100644 --- a/client/my-sites/upgrades/checkout-thank-you/index.jsx +++ b/client/my-sites/upgrades/checkout-thank-you/index.jsx @@ -197,10 +197,11 @@ const CheckoutThankYou = React.createClass( { }, render() { - let purchases = null, - failedPurchases = null, + let purchases = [], + failedPurchases = [], wasJetpackPlanPurchased = false, wasDotcomPlanPurchased = false; + if ( this.isDataLoaded() && ! this.isGenericReceipt() ) { purchases = getPurchases( this.props ); failedPurchases = getFailedPurchases( this.props ); @@ -209,7 +210,7 @@ const CheckoutThankYou = React.createClass( { } // 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() ) { // disabled because we use global loader icon /* eslint-disable wpcalypso/jsx-classname-namespace */ return ( @@ -238,7 +239,7 @@ const CheckoutThankYou = React.createClass( { ); } - if ( this.props.domainOnlySiteFlow && ! failedPurchases ) { + if ( this.props.domainOnlySiteFlow && ! failedPurchases.length ) { return (
{ this.renderConfirmationNotice() } From 42c369f56dbc38418f9ad3eec401b3bfd09a61a0 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Thu, 2 Mar 2017 11:21:47 -0800 Subject: [PATCH 4/8] Checkout: Move `PlanThankYouCard` styles to `ThankYouCard` This will allow us to reduce redundancy in a future commit. --- assets/stylesheets/_components.scss | 1 - client/blocks/plan-thank-you-card/index.jsx | 28 ++++----- client/blocks/plan-thank-you-card/style.scss | 64 ------------------- client/components/thank-you-card/index.jsx | 20 +++++- client/components/thank-you-card/style.scss | 65 ++++++++++++++++++++ 5 files changed, 94 insertions(+), 84 deletions(-) delete mode 100644 client/blocks/plan-thank-you-card/style.scss diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index ceb946c467db1..2fc1266ef5c72 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -28,7 +28,6 @@ @import 'blocks/image-editor/style'; @import 'blocks/like-button/style'; @import 'blocks/plan-storage/style'; -@import 'blocks/plan-thank-you-card/style'; @import 'blocks/post-edit-button/style'; @import 'blocks/post-item/style'; @import 'blocks/post-likes/style'; diff --git a/client/blocks/plan-thank-you-card/index.jsx b/client/blocks/plan-thank-you-card/index.jsx index 2897f991b4ca2..a34ab0119664d 100644 --- a/client/blocks/plan-thank-you-card/index.jsx +++ b/client/blocks/plan-thank-you-card/index.jsx @@ -4,7 +4,6 @@ import React, { PropTypes } from 'react'; import { localize } from 'i18n-calypso'; import { connect } from 'react-redux'; -import classnames from 'classnames'; /** * Internal dependencies @@ -21,7 +20,7 @@ const PlanThankYouCard = ( { plan, translate, siteId, - siteURL, + siteUrl, } ) => { const name = plan && translate( '%(planName)s Plan', { args: { planName: getPlan( plan.productSlug ).getTitle() } @@ -29,22 +28,19 @@ const PlanThankYouCard = ( { const price = plan && formatCurrency( plan.rawPrice, plan.currencyCode ); return ( - +
-
- { translate( 'Thank you for your purchase!' ) } -
-
- { translate( "Now that we've taken care of the plan, it's time to see your new site." ) } -
- - { translate( 'Visit Your Site' ) } - - + +
); }; @@ -61,6 +57,6 @@ export default connect( ( state, ownProps ) => { return { plan, - siteURL: site && site.URL + siteUrl: site && site.URL }; } )( localize( PlanThankYouCard ) ); diff --git a/client/blocks/plan-thank-you-card/style.scss b/client/blocks/plan-thank-you-card/style.scss deleted file mode 100644 index 4b0e0525d2747..0000000000000 --- a/client/blocks/plan-thank-you-card/style.scss +++ /dev/null @@ -1,64 +0,0 @@ -.plan-thank-you-card__heading { - font-size: 18px; - font-weight: 600; - margin-bottom: 8px; - - @include breakpoint( ">480px" ) { - font-size: 22px; - } -} - -.plan-thank-you-card__description { - font-size: 13px; - font-weight: 400; - width: 280px; - max-width: 100%; - margin: 0 auto 30px; - line-height: 20px; - - @include breakpoint( ">480px" ) { - font-size: 15px; - } -} - -.plan-thank-you-card__button, -.plan-thank-you-card__button:visited { - display: inline-block; - border-radius: 4px; - background-color: $white; - color: darken( $alert-green, 30 ); - font-size: 14px; - height: 40px; - line-height: 40px; - max-width: 280px; - padding: 0; - width: 100%; - margin: 0 auto; - border-style: solid; - border-color: darken( $alert-green, 20 ); - border-width: 1px 1px 2px; -} - -.plan-thank-you-card__button.is-placeholder, -.plan-thank-you-card__button.is-placeholder:visited { - @include placeholder(); - pointer-events: none; - background-color: lighten( $alert-green, 40 ); - border-color: transparent; - border-radius: 0; -} - -.plan-thank-you-card__button:hover { - border-color: darken( $alert-green, 30 ); - color: darken( $alert-green, 10 ); -} - -.plan-thank-you-card__button:focus { - color: darken( $alert-green, 10 ); - outline: 1px dotted $white; -} - -.plan-thank-you-card__button:active { - border-width: 2px 1px 1px; - color: darken( $alert-green, 30 ); -} diff --git a/client/components/thank-you-card/index.jsx b/client/components/thank-you-card/index.jsx index f720202f48c1b..0d0b5bf827850 100644 --- a/client/components/thank-you-card/index.jsx +++ b/client/components/thank-you-card/index.jsx @@ -7,7 +7,7 @@ import React, { PropTypes } from 'react'; // Non standard gridicon sizes are used here because we use them as background pattern with various sizes and rotation /* eslint-disable wpcalypso/jsx-gridicon-size */ -const ThankYouCard = ( { children, price, name } ) => ( +const ThankYouCard = ( { heading, description, buttonUrl, buttonText, price, name } ) => (
@@ -37,15 +37,29 @@ const ThankYouCard = ( { children, price, name } ) => (
- { children } +
+ { heading } +
+
+ { description } +
+ + { buttonText } +
); /* eslint-enable wpcalypso/jsx-gridicon-size */ ThankYouCard.propTypes = { + buttonText: PropTypes.string, + buttonUrl: PropTypes.string, + description: PropTypes.string, + heading: PropTypes.string, name: PropTypes.string, - price: PropTypes.string + price: PropTypes.string, }; export default ThankYouCard; diff --git a/client/components/thank-you-card/style.scss b/client/components/thank-you-card/style.scss index 8112b7ca73164..b95c3ebd35a6f 100644 --- a/client/components/thank-you-card/style.scss +++ b/client/components/thank-you-card/style.scss @@ -76,6 +76,71 @@ } } +.thank-you-card__heading { + font-size: 18px; + font-weight: 600; + margin-bottom: 8px; + + @include breakpoint( ">480px" ) { + font-size: 22px; + } +} + +.thank-you-card__description { + font-size: 13px; + font-weight: 400; + width: 280px; + max-width: 100%; + margin: 0 auto 30px; + line-height: 20px; + + @include breakpoint( ">480px" ) { + font-size: 15px; + } +} + +.thank-you-card__button, +.thank-you-card__button:visited { + display: inline-block; + border-radius: 4px; + background-color: $white; + color: darken( $alert-green, 30 ); + font-size: 14px; + height: 40px; + line-height: 40px; + max-width: 280px; + padding: 0; + width: 100%; + margin: 0 auto; + border-style: solid; + border-color: darken( $alert-green, 20 ); + border-width: 1px 1px 2px; +} + +.thank-you-card__button.is-placeholder, +.thank-you-card__button.is-placeholder:visited { + @include placeholder(); + pointer-events: none; + background-color: lighten( $alert-green, 40 ); + border-color: transparent; + border-radius: 0; +} + +.thank-you-card__button:hover { + border-color: darken( $alert-green, 30 ); + color: darken( $alert-green, 10 ); +} + +.thank-you-card__button:focus { + color: darken( $alert-green, 10 ); + outline: 1px dotted $white; +} + +.thank-you-card__button:active { + border-width: 2px 1px 1px; + color: darken( $alert-green, 30 ); +} + @keyframes floating { 0% { opacity: 0; From f4f296287b3766e392d9d2dcbe699c31b7118cb7 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Thu, 2 Mar 2017 12:10:46 -0800 Subject: [PATCH 5/8] Checkout: Display `ThankYouCard` for domain-only purchases --- .../my-sites/upgrades/checkout-thank-you/index.jsx | 14 +++++++++++++- client/state/receipts/assembler.js | 1 + 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/client/my-sites/upgrades/checkout-thank-you/index.jsx b/client/my-sites/upgrades/checkout-thank-you/index.jsx index 280ab42cb234d..25d5ba9e926ed 100644 --- a/client/my-sites/upgrades/checkout-thank-you/index.jsx +++ b/client/my-sites/upgrades/checkout-thank-you/index.jsx @@ -16,6 +16,7 @@ import Card from 'components/card'; import ChargebackDetails from './chargeback-details'; import CheckoutThankYouFeaturesHeader from './features-header'; import CheckoutThankYouHeader from './header'; +import { domainManagementEdit } from 'my-sites/upgrades/paths'; import DomainMappingDetails from './domain-mapping-details'; import DomainRegistrationDetails from './domain-registration-details'; import { fetchReceipt } from 'state/receipts/actions'; @@ -56,6 +57,7 @@ import PurchaseDetail from 'components/purchase-detail'; import { getFeatureByKey, shouldFetchSitePlans } from 'lib/plans'; import SiteRedirectDetails from './site-redirect-details'; import Notice from 'components/notice'; +import ThankYouCard from 'components/thank-you-card'; import upgradesPaths from 'my-sites/upgrades/paths'; import config from 'config'; @@ -240,10 +242,20 @@ const CheckoutThankYou = React.createClass( { } if ( this.props.domainOnlySiteFlow && ! failedPurchases.length ) { + const [ purchase, domainName ] = findPurchaseAndDomain( purchases, isDomainRegistration ); + return (
{ this.renderConfirmationNotice() } -
Domain purchased :)
+ +
); } diff --git a/client/state/receipts/assembler.js b/client/state/receipts/assembler.js index 4cf9808caa403..e75adddb4fe8a 100644 --- a/client/state/receipts/assembler.js +++ b/client/state/receipts/assembler.js @@ -3,6 +3,7 @@ export function createReceiptObject( data ) { receiptId: data.receipt_id, purchases: data.purchases.map( purchase => { return { + displayPrice: purchase.display_price, freeTrial: purchase.free_trial, isDomainRegistration: Boolean( purchase.is_domain_registration ), meta: purchase.meta, From a46bbfb7a2acf19b2505c4422f81535bdd35eb82 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Thu, 2 Mar 2017 15:02:16 -0800 Subject: [PATCH 6/8] Checkout: Hide `ThankYouCard` if a receipt ID (and thus purchases) are missing --- client/my-sites/upgrades/checkout-thank-you/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/upgrades/checkout-thank-you/index.jsx b/client/my-sites/upgrades/checkout-thank-you/index.jsx index 25d5ba9e926ed..b0fcf573d84df 100644 --- a/client/my-sites/upgrades/checkout-thank-you/index.jsx +++ b/client/my-sites/upgrades/checkout-thank-you/index.jsx @@ -241,7 +241,7 @@ const CheckoutThankYou = React.createClass( { ); } - if ( this.props.domainOnlySiteFlow && ! failedPurchases.length ) { + if ( this.props.domainOnlySiteFlow && purchases.length > 0 && ! failedPurchases.length ) { const [ purchase, domainName ] = findPurchaseAndDomain( purchases, isDomainRegistration ); return ( From 1de5e4cc2e9d30bfb31fd8f26bfd566ac6b8941b Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 6 Mar 2017 12:47:42 +0100 Subject: [PATCH 7/8] Checkout: Add copy changes to the Thank You page for the domain only site flow --- .../my-sites/upgrades/checkout-thank-you/index.jsx | 12 ++++++------ client/state/receipts/assembler.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/client/my-sites/upgrades/checkout-thank-you/index.jsx b/client/my-sites/upgrades/checkout-thank-you/index.jsx index b0fcf573d84df..5122eb70108ed 100644 --- a/client/my-sites/upgrades/checkout-thank-you/index.jsx +++ b/client/my-sites/upgrades/checkout-thank-you/index.jsx @@ -16,7 +16,7 @@ import Card from 'components/card'; import ChargebackDetails from './chargeback-details'; import CheckoutThankYouFeaturesHeader from './features-header'; import CheckoutThankYouHeader from './header'; -import { domainManagementEdit } from 'my-sites/upgrades/paths'; +import { domainManagementList } from 'my-sites/upgrades/paths'; import DomainMappingDetails from './domain-mapping-details'; import DomainRegistrationDetails from './domain-registration-details'; import { fetchReceipt } from 'state/receipts/actions'; @@ -242,19 +242,19 @@ const CheckoutThankYou = React.createClass( { } if ( this.props.domainOnlySiteFlow && purchases.length > 0 && ! failedPurchases.length ) { - const [ purchase, domainName ] = findPurchaseAndDomain( purchases, isDomainRegistration ); + const domainName = find( purchases, isDomainRegistration ).meta; return (
{ this.renderConfirmationNotice() }
); diff --git a/client/state/receipts/assembler.js b/client/state/receipts/assembler.js index e75adddb4fe8a..410b56f1833bf 100644 --- a/client/state/receipts/assembler.js +++ b/client/state/receipts/assembler.js @@ -1,9 +1,9 @@ export function createReceiptObject( data ) { return { receiptId: data.receipt_id, + displayPrice: data.display_price, purchases: data.purchases.map( purchase => { return { - displayPrice: purchase.display_price, freeTrial: purchase.free_trial, isDomainRegistration: Boolean( purchase.is_domain_registration ), meta: purchase.meta, From 52cd24b3c41211ddedd5ffd1b0712c191562a546 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Mon, 6 Mar 2017 12:21:35 -0800 Subject: [PATCH 8/8] Checkout: Provide raw `receipt` object to `fetchReceiptCompleted` action --- client/my-sites/upgrades/checkout/checkout.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/my-sites/upgrades/checkout/checkout.jsx b/client/my-sites/upgrades/checkout/checkout.jsx index 8bc8e423a433b..0083407086342 100644 --- a/client/my-sites/upgrades/checkout/checkout.jsx +++ b/client/my-sites/upgrades/checkout/checkout.jsx @@ -285,9 +285,9 @@ const Checkout = React.createClass( { const receiptId = receipt.receipt_id; this.props.fetchReceiptCompleted( receiptId, { - receiptId, + ...receipt, purchases: this.flattenPurchases( this.props.transaction.step.data.purchases ), - failedPurchases: this.flattenPurchases( this.props.transaction.step.data.failed_purchases ), + failedPurchases: this.flattenPurchases( this.props.transaction.step.data.failed_purchases ) } ); }