Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Mar 8, 2017
2 changes: 1 addition & 1 deletion assets/stylesheets/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -154,6 +153,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
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch.

};
} )( localize( PlanThankYouCard ) );
65 changes: 65 additions & 0 deletions client/components/thank-you-card/index.jsx
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;
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