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.

Sign up for GitHub

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

New Checkout: split layout (take 2) #41373

Merged
merged 35 commits into from
Apr 22, 2020
Merged

New Checkout: split layout (take 2) #41373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
4d7ef8b
Move domain to review step pull purchase deats out of checkout wrapper
michaeldcain Apr 13, 2020
37b3788
Add useTax
michaeldcain Apr 14, 2020
7baa996
Add tax and basic styling to order summary
michaeldcain Apr 14, 2020
084834e
Adjust summary amount styles
michaeldcain Apr 14, 2020
a914142
Remove WPCheckoutOrderSummaryTitle for now.
michaeldcain Apr 15, 2020
9cc0a13
Missing propType
michaeldcain Apr 15, 2020
b12be53
Switch useTax to useFirstLineItemOfType hook
michaeldcain Apr 15, 2020
4ce26ea
Remove unnecessary span
michaeldcain Apr 15, 2020
946ce9e
Return all line items of a certain type.
michaeldcain Apr 15, 2020
ee8104a
Move MainContentUI to CheckoutSteps component
michaeldcain Apr 15, 2020
b2085e4
Restructure Checkout and CheckoutSteps to allow for CheckoutSummary
michaeldcain Apr 16, 2020
a4150fe
Add CheckoutSummary component skeleton with defaults and demo
michaeldcain Apr 16, 2020
8a554ad
Cleanup CheckoutSummary
michaeldcain Apr 16, 2020
b4555b6
Cleanup styles up to this point
michaeldcain Apr 16, 2020
e9ed68b
Make CheckoutSummary default content unique from CheckoutSummaryStep
michaeldcain Apr 16, 2020
d1f734c
Remove unused styled components from default summary
michaeldcain Apr 16, 2020
3dd40e4
Use CheckoutSummary in WPcom Checkout
michaeldcain Apr 16, 2020
7fe28da
Remove widths from MainContentUI to allow for optional CheckoutSummary
michaeldcain Apr 16, 2020
840da4a
Update documentation to match current state
michaeldcain Apr 20, 2020
5545282
Update tests to reflect order summary step > checkout summary change
michaeldcain Apr 20, 2020
8a3bc98
Center checkout for single-column layout
michaeldcain Apr 21, 2020
c37dbb3
Tighten up order review line item styles to match design
michaeldcain Apr 21, 2020
1567c2c
Export CheckIcon and allow it to be styled
michaeldcain Apr 21, 2020
80786e3
Stub out CheckoutSummaryFeatures for initial styling
michaeldcain Apr 21, 2020
2cf0b5a
Hide summary on mobile
michaeldcain Apr 21, 2020
28059bb
Alphabetize
michaeldcain Apr 21, 2020
ad0d7e9
Improve docs for useLineItemsOfType
michaeldcain Apr 21, 2020
b1891e4
Provide domainUrl as replacement string in translation
michaeldcain Apr 21, 2020
bb2074b
Remove default value on useLineItemsOfType hook
michaeldcain Apr 21, 2020
a53b033
Update docs to reflect moving the form structure to CheckoutSteps
michaeldcain Apr 21, 2020
0ba584f
Add CheckoutStepArea component
michaeldcain Apr 22, 2020
a7ac92c
Update docs and demo
michaeldcain Apr 22, 2020
e3cd44b
Update package tests
michaeldcain Apr 22, 2020
8c82195
Update product features defaults
michaeldcain Apr 22, 2020
7a4d9bb
Use translated string
michaeldcain Apr 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client/my-sites/checkout/composite-checkout/test/composite-checkout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,13 +431,13 @@ describe( 'CompositeCheckout', () => {
expect( getByText( 'ZIP code' ) ).toBeInTheDocument();
} );

it( 'renders the checkout greeting header', async () => {
it( 'renders the checkout summary', async () => {
let renderResult;
await act( async () => {
renderResult = render( <MyCheckout />, container );
} );
const { getByText } = renderResult;
expect( getByText( 'You are all set to check out' ) ).toBeInTheDocument();
expect( getByText( 'Purchase Details' ) ).toBeInTheDocument();
expect( page.redirect ).not.toHaveBeenCalled();
} );

Expand Down
21 changes: 19 additions & 2 deletions client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout-order-review.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { useLineItems, useFormStatus } from '@automattic/composite-checkout';
import { useTranslate } from 'i18n-calypso';

/**
* Internal dependencies
*/
import joinClasses from './join-classes';
import Coupon from './coupon';
import { WPOrderReviewLineItems, WPOrderReviewSection } from './wp-order-review-line-items';
import { isLineItemADomain } from '../hooks/has-domains';

export default function WPCheckoutOrderReview( {
className,
Expand All @@ -23,13 +25,20 @@ export default function WPCheckoutOrderReview( {
variantSelectOverride,
getItemVariants,
onChangePlanLength,
siteUrl,
} ) {
const translate = useTranslate();
const [ items, total ] = useLineItems();
const { formStatus } = useFormStatus();
const isPurchaseFree = total.amount.value === 0;

const firstDomainItem = items.find( isLineItemADomain );
const domainUrl = firstDomainItem ? firstDomainItem.sublabel : siteUrl;

return (
<div className={ joinClasses( [ className, 'checkout-review-order' ] ) }>
{ domainUrl && <DomainURL>{ translate( 'Site: %s', { args: domainUrl } ) }</DomainURL> }

<WPOrderReviewSection>
<WPOrderReviewLineItems
items={ items }
Expand Down Expand Up @@ -61,10 +70,18 @@ WPCheckoutOrderReview.propTypes = {
removeCoupon: PropTypes.func.isRequired,
getItemVariants: PropTypes.func,
onChangePlanLength: PropTypes.func,
siteUrl: PropTypes.string,
};

const DomainURL = styled.div`
color: ${( props ) => props.theme.colors.textColorLight};
font-size: 14px;
margin-top: -10px;
word-break: break-word;
`;

const CouponField = styled( Coupon )`
margin: 24px 30px 24px 0;
padding-bottom: 24px;
margin: 20px 30px 20px 0;
padding-bottom: 20px;
border-bottom: 1px solid ${( props ) => props.theme.colors.borderColorLight};
`;
113 changes: 84 additions & 29 deletions client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout-order-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,101 @@
*/
import React from 'react';
import styled from '@emotion/styled';
import { useLineItems, useTotal, renderDisplayValueMarkdown } from '@automattic/composite-checkout';
import {
CheckoutCheckIcon,
renderDisplayValueMarkdown,
useLineItemsOfType,
useTotal,
} from '@automattic/composite-checkout';
import { useTranslate } from 'i18n-calypso';

/**
* Internal dependencies
*/
import { isLineItemADomain } from '../hooks/has-domains';

export default function WPCheckoutOrderSummary( { siteUrl } ) {
const [ items ] = useLineItems();

const firstDomainItem = items.find( isLineItemADomain );
const domainUrl = firstDomainItem ? firstDomainItem.sublabel : siteUrl;

return <React.Fragment>{ domainUrl && <DomainURL>{ domainUrl }</DomainURL> }</React.Fragment>;
}

export function WPCheckoutOrderSummaryTitle() {
export default function WPCheckoutOrderSummary() {
const translate = useTranslate();
const taxes = useLineItemsOfType( 'tax' );
const total = useTotal();

return (
<CheckoutSummaryTitle>
<span>{ translate( 'You are all set to check out' ) }</span>
<CheckoutSummaryTotal>
{ renderDisplayValueMarkdown( total.amount.displayValue ) }
</CheckoutSummaryTotal>
</CheckoutSummaryTitle>
<>
<CheckoutSummaryTitle>{ translate( 'Purchase Details' ) }</CheckoutSummaryTitle>
<CheckoutSummaryFeatures>
<CheckoutSummaryFeaturesTitle>
{ translate( 'Included with your purchase' ) }
</CheckoutSummaryFeaturesTitle>
<CheckoutSummaryFeaturesList>
<CheckoutSummaryFeaturesListItem>
<WPCheckoutCheckIcon />
{ translate( 'Email and live chat support' ) }
</CheckoutSummaryFeaturesListItem>
<CheckoutSummaryFeaturesListItem>
<WPCheckoutCheckIcon />
{ translate( 'Money back guarantee' ) }
Copy link

Choose a reason for hiding this comment

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

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 17 times:
translate( '30-day Money Back Guarantee' ) ES Score: 9

</CheckoutSummaryFeaturesListItem>
</CheckoutSummaryFeaturesList>
</CheckoutSummaryFeatures>
<CheckoutSummaryAmountWrapper>
{ taxes.map( ( tax ) => (
<CheckoutSummaryLineItem key={ 'checkout-summary-line-item-' + tax.id }>
<span>{ tax.label }</span>
<span>{ renderDisplayValueMarkdown( tax.amount.displayValue ) }</span>
</CheckoutSummaryLineItem>
) ) }
<CheckoutSummaryTotal>
<span>{ translate( 'Total' ) }</span>
<span>{ renderDisplayValueMarkdown( total.amount.displayValue ) }</span>
</CheckoutSummaryTotal>
</CheckoutSummaryAmountWrapper>
</>
);
}

const CheckoutSummaryTitle = styled.span`
const CheckoutSummaryTitle = styled.h2`
color: ${( props ) => props.theme.colors.textColor};
display: none;
font-weight: ${( props ) => props.theme.weights.bold};
padding: 20px 20px 0;

@media ( ${( props ) => props.theme.breakpoints.desktopUp} ) {
display: none;
}
`;

const CheckoutSummaryFeatures = styled.div`
padding: 20px;
`;

const CheckoutSummaryFeaturesTitle = styled.h3`
font-size: 16px;
font-weight: ${( props ) => props.theme.weights.normal};
margin-bottom: 4px;
`;

const CheckoutSummaryFeaturesList = styled.ul`
margin: 0;
list-style: none;
font-size: 14px;
`;

const WPCheckoutCheckIcon = styled( CheckoutCheckIcon )`
fill: ${( props ) => props.theme.colors.success};
margin-right: 4px;
vertical-align: bottom;
`;

const CheckoutSummaryFeaturesListItem = styled.li`
margin-bottom: 4px;
`;

const CheckoutSummaryAmountWrapper = styled.div`
border-top: 1px solid ${( props ) => props.theme.colors.borderColorLight};
padding: 20px;
`;

const CheckoutSummaryLineItem = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
`;

const CheckoutSummaryTotal = styled.span`
const CheckoutSummaryTotal = styled( CheckoutSummaryLineItem )`
font-weight: ${( props ) => props.theme.weights.bold};
`;

const DomainURL = styled.div`
margin-top: -12px;
word-break: break-word;
`;
Loading