Skip to content

Commit

Permalink
Merge pull request #11702 from Automattic/update/domain-only-site-tha…
Browse files Browse the repository at this point in the history 
…nk-you

Checkout: Add thank you page for the domain only site flow
  • Loading branch information
@gziolo
gziolo authored Mar 8, 2017
2 parents 51c65b6 + 52cd24b commit 7b93ca8
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 151 deletions.
2 changes: 1 addition & 1 deletion assets/stylesheets/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,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';
Expand Down Expand Up @@ -159,6 +158,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';
Expand Down
108 changes: 36 additions & 72 deletions client/blocks/plan-thank-you-card/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
/**
* 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
Expand All @@ -16,83 +14,49 @@ 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 (
<div>
<QuerySites siteId={ siteId } />
<QuerySitePlans siteId={ siteId } />

<ThankYouCard
name={ name }
price={ price }
heading={ translate( 'Thank you for your purchase!' ) }
description={ translate( "Now that we've taken care of the plan, it's time to see your new site." ) }
buttonUrl={ siteUrl }
buttonText={ translate( 'Visit Your Site' ) }
/>
</div>
);
};

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 (
<div className="plan-thank-you-card">
<QuerySites siteId={ siteId } />
<QuerySitePlans siteId={ siteId } />
<div className="plan-thank-you-card__header">
<Gridicon className="plan-thank-you-card__main-icon" icon="checkmark-circle" size={ 140 } />
{ ! plan
? <div>
<div className="plan-thank-you-card__plan-name is-placeholder"></div>
<div className="plan-thank-you-card__plan-price is-placeholder"></div>
</div>
: <div>
<div className="plan-thank-you-card__plan-name">
{ translate( '%(planName)s Plan', {
args: { planName: getPlan( plan.productSlug ).getTitle() }
} ) }
</div>
<div className="plan-thank-you-card__plan-price">
{ formatCurrency( plan.rawPrice, plan.currencyCode ) }
</div>
</div>
}
<div className="plan-thank-you-card__background-icons">
<Gridicon icon="audio" size={ 52 } />
<Gridicon icon="audio" size={ 20 } />
<Gridicon icon="heart" size={ 52 } />
<Gridicon icon="heart" size={ 41 } />
<Gridicon icon="star" size={ 26 } />
<Gridicon icon="status" size={ 52 } />
<Gridicon icon="audio" size={ 38 } />
<Gridicon icon="status" size={ 28 } />
<Gridicon icon="status" size={ 65 } />
<Gridicon icon="star" size={ 57 } />
<Gridicon icon="star" size={ 33 } />
<Gridicon icon="star" size={ 45 } />
</div>
</div>
<div className="plan-thank-you-card__body">
<div className="plan-thank-you-card__heading">
{ translate( 'Thank you for your purchase!' ) }
</div>
<div className="plan-thank-you-card__description">
{ translate( "Now that we've taken care of the plan, it's time to see your new site." ) }
</div>
<a
className={ classnames( 'plan-thank-you-card__button', { 'is-placeholder': ! siteURL } ) }
href={ siteURL }>
{ translate( 'Visit Your Site' ) }
</a>
</div>
</div>
);
/* eslint-enable wpcalypso/jsx-gridicon-size */
}
}
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 );
const plan = getCurrentPlan( state, ownProps.siteId );

return {
plan,
siteURL: site && site.URL
siteUrl: site && site.URL
};
} )( localize( PlanThankYouCard ) );
65 changes: 65 additions & 0 deletions client/components/thank-you-card/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* 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 = ( { heading, description, buttonUrl, buttonText, price, name } ) => (
<div className="thank-you-card">
<div className="thank-you-card__header">
<Gridicon className="thank-you-card__main-icon" icon="checkmark-circle" size={ 140 } />

<div>
<div className={ classnames( 'thank-you-card__name', { 'is-placeholder': ! name } ) }>
{ name }
</div>
<div className={ classnames( 'thank-you-card__price', { 'is-placeholder': ! price } ) }>
{ price }
</div>
</div>

<div className="thank-you-card__background-icons">
<Gridicon icon="audio" size={ 52 } />
<Gridicon icon="audio" size={ 20 } />
<Gridicon icon="heart" size={ 52 } />
<Gridicon icon="heart" size={ 41 } />
<Gridicon icon="star" size={ 26 } />
<Gridicon icon="status" size={ 52 } />
<Gridicon icon="audio" size={ 38 } />
<Gridicon icon="status" size={ 28 } />
<Gridicon icon="status" size={ 65 } />
<Gridicon icon="star" size={ 57 } />
<Gridicon icon="star" size={ 33 } />
<Gridicon icon="star" size={ 45 } />
</div>
</div>
<div className="thank-you-card__body">
<div className="thank-you-card__heading">
{ heading }
</div>
<div className="thank-you-card__description">
{ description }
</div>
<a
className={ classnames( 'thank-you-card__button', { 'is-placeholder': ! buttonUrl } ) }
href={ buttonUrl }>
{ buttonText }
</a>
</div>
</div>
);
/* 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,
};

export default ThankYouCard;
106 changes: 53 additions & 53 deletions client/blocks/plan-thank-you-card/style.scss → client/components/thank-you-card/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.plan-thank-you-card {
.thank-you-card {
position: relative;
width: 100%;
max-width: 500px;
Expand All @@ -15,7 +15,7 @@
}
}

.plan-thank-you-card__header {
.thank-you-card__header {
background-color: $alert-green;
padding: 12px 0;
position: relative;
Expand All @@ -28,15 +28,55 @@
}
}

.plan-thank-you-card__body {
.thank-you-card__body {
padding: 24px;

@include breakpoint( ">480px" ) {
padding: 40px;
}
}

.plan-thank-you-card__heading {
.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%;
}
}

.thank-you-card__heading {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
Expand All @@ -46,7 +86,7 @@
}
}

.plan-thank-you-card__description {
.thank-you-card__description {
font-size: 13px;
font-weight: 400;
width: 280px;
Expand All @@ -59,8 +99,8 @@
}
}

.plan-thank-you-card__button,
.plan-thank-you-card__button:visited {
.thank-you-card__button,
.thank-you-card__button:visited {
display: inline-block;
border-radius: 4px;
background-color: $white;
Expand All @@ -77,60 +117,30 @@
border-width: 1px 1px 2px;
}

.plan-thank-you-card__button.is-placeholder,
.plan-thank-you-card__button.is-placeholder:visited {
.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;
}

.plan-thank-you-card__button:hover {
.thank-you-card__button:hover {
border-color: darken( $alert-green, 30 );
color: darken( $alert-green, 10 );
}

.plan-thank-you-card__button:focus {
.thank-you-card__button:focus {
color: darken( $alert-green, 10 );
outline: 1px dotted $white;
}

.plan-thank-you-card__button:active {
.thank-you-card__button:active {
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;
Expand All @@ -146,7 +156,7 @@
}
}

.plan-thank-you-card__background-icons {
.thank-you-card__background-icons {
position: absolute;
top: 0;
left: 0;
Expand Down Expand Up @@ -221,13 +231,3 @@
animation-delay: random(10) + s;
}
}

.plan-thank-you-card__main-icon {
width: 72px;
height: 72px;

@include breakpoint( ">480px" ) {
width: 96px;
height: 96px;
}
}
Loading

0 comments on commit 7b93ca8

Please sign in to comment.