Skip to content

Commit

Permalink
Checkout Redesign: add Jetpack support (#44039)
Browse files Browse the repository at this point in the history 
* Return product alias to search for non-plan products

* Export theme from composite-checkout package

* Use Jetpack colors when site is Jetpack (and not Atomic)

* Only prevent Jetpack sites and plans in production

* Add Jetpack scan to products list

* Add Jetpack product slugs to allowed list

* Skeletor likes updated docs

* Only allow jetpack product slugs when not in production

* Use JETPACK_PRODUCTS_LIST to add Jetpack items to cart

* Show header bar with Jetpack logo

* Remove old Jetpack Checkout styles and use color studio variables

* Keep Jetpack colors in legacy checkout

* Don't show price breakdown multipler when plan is monthly

* Add support for Jetpack plan variant selection
  • Loading branch information
@michaeldcain
michaeldcain authored Aug 3, 2020
1 parent 818894c commit 8e806f2
Show file tree
Hide file tree
Showing 12 changed files with 126 additions and 85 deletions.
9 changes: 7 additions & 2 deletions client/layout/masterbar/logged-in.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import isSiteMigrationInProgress from 'state/selectors/is-site-migration-in-prog
import isSiteMigrationActiveRoute from 'state/selectors/is-site-migration-active-route';
import { setNextLayoutFocus } from 'state/ui/layout-focus/actions';
import { getSelectedSiteId } from 'state/ui/selectors';
import { getSiteSlug } from 'state/sites/selectors';
import { getSiteSlug, isJetpackSite } from 'state/sites/selectors';
import canCurrentUserUseCustomerHome from 'state/sites/selectors/can-current-user-use-customer-home';
import { getStatsPathForTab } from 'lib/route';
import { domainManagementList } from 'my-sites/domains/paths';
Expand All @@ -38,6 +38,8 @@ import { requestHttpData } from 'state/data-layer/http-data';
import { http } from 'state/data-layer/wpcom-http/actions';
import { hasUnseen } from 'state/reader-ui/seen-posts/selectors';
import getPreviousPath from 'state/selectors/get-previous-path.js';
import isAtomicSite from 'state/selectors/is-site-automated-transfer';
import JetpackLogo from 'components/jetpack-logo';

class MasterbarLoggedIn extends React.Component {
static propTypes = {
Expand Down Expand Up @@ -167,6 +169,7 @@ class MasterbarLoggedIn extends React.Component {
isMigrationInProgress,
previousPath,
siteSlug,
isJetpackNotAtomic,
} = this.props;

if ( isCheckout === true ) {
Expand All @@ -186,7 +189,8 @@ class MasterbarLoggedIn extends React.Component {
tooltip={ translate( 'Close Checkout' ) }
tipTarget="close"
/>
<WordPressWordmark className="masterbar__wpcom-wordmark" />
{ ! isJetpackNotAtomic && <WordPressWordmark className="masterbar__wpcom-wordmark" /> }
{ isJetpackNotAtomic && <JetpackLogo className="masterbar__jetpack-wordmark" full /> }
<span className="masterbar__secure-checkout-text">
{ translate( 'Secure checkout' ) }
</span>
Expand Down Expand Up @@ -278,6 +282,7 @@ export default connect(
migrationStatus: getSiteMigrationStatus( state, currentSelectedSiteId ),
currentSelectedSiteId,
previousPath: getPreviousPath( state ),
isJetpackNotAtomic: isJetpackSite( state, siteId ) && ! isAtomicSite( state, siteId ),
};
},
{ setNextLayoutFocus, recordTracksEvent, updateSiteMigrationMeta }
Expand Down
36 changes: 35 additions & 1 deletion client/layout/masterbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ $autobar-height: 20px;
background: var( --studio-orange );
border-bottom: 1px solid var( --studio-orange-60 );
}

.is-section-checkout.is-jetpack-site & {
background-color: var( --color-jetpack-masterbar-background );
border-bottom: 1px solid var( --color-jetpack-masterbar-border );
color: var( --color-jetpack-masterbar-text );
}
}

.pride .masterbar {
Expand Down Expand Up @@ -112,6 +118,10 @@ $autobar-height: 20px;

.gridicon {
fill: var( --color-masterbar-text ); // only because safari gets currentColor wrong

.is-section-checkout.is-jetpack-site & {
fill: var( --color-jetpack-masterbar-text );
}
}

.gridicon + .masterbar__item-content {
Expand All @@ -121,6 +131,11 @@ $autobar-height: 20px;
&:hover {
background: var( --color-masterbar-item-hover-background );
color: var( --color-masterbar-text );

.is-section-checkout.is-jetpack-site & {
background: var( --color-jetpack-masterbar-item-hover-background );
color: var( --color-jetpack-masterbar-text );
}
}

&:focus {
Expand All @@ -130,6 +145,11 @@ $autobar-height: 20px;
box-shadow: inset 0 0 0 2px var( --color-primary-light );
color: var( --color-masterbar-text );
}

.is-section-checkout.is-jetpack-site & {
box-shadow: inset 0 0 0 2px var( --color-jetpack-masterbar-item-hover-background );
color: var( --color-jetpack-masterbar-text );
}
}

&.is-active {
Expand All @@ -154,9 +174,13 @@ $autobar-height: 20px;
}

&.masterbar__close-button {
border-right: 1px solid var( --color-primary-light );
border-right: 1px solid var( --color-masterbar-border );
margin-right: 15px;

.is-section-checkout.is-jetpack-site & {
border-right: 1px solid var( --color-jetpack-masterbar-border );
}

.masterbar__item-content {
display: none;
}
Expand Down Expand Up @@ -575,8 +599,18 @@ a.masterbar__quick-language-switcher {
margin-right: 5px;
}

.masterbar__jetpack-wordmark {
height: 25px;
margin-right: 5px;
}

.masterbar__secure-checkout-text {
color: var( --color-primary-5 );
transform: translateY( 1px );

.is-jetpack-site & {
color: var( --color-jetpack-masterbar-text );
transform: translateY( -1px );
}
}
}
30 changes: 24 additions & 6 deletions client/my-sites/checkout/checkout-system-decider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,13 +230,16 @@ function getCheckoutVariant(
return 'disallowed-geo';
}

// Disable if this is a jetpack site
if ( isJetpack && ! isAtomic ) {
// Disable for Jetpack sites in production
if ( config( 'env_id' ) === 'production' && isJetpack && ! isAtomic ) {
debug( 'shouldShowCompositeCheckout false because jetpack site' );
return 'jetpack-site';
}
// Disable for jetpack plans
if ( cart.products?.find( ( product ) => product.product_slug.includes( 'jetpack' ) ) ) {
// Disable for Jetpack plans in production
if (
config( 'env_id' ) === 'production' &&
cart.products?.find( ( product ) => product.product_slug.includes( 'jetpack' ) )
) {
debug( 'shouldShowCompositeCheckout false because cart contains jetpack' );
return 'jetpack-product';
}
Expand All @@ -246,7 +249,7 @@ function getCheckoutVariant(
// products via URL, so we list those slugs here. Renewals use actual slugs,
// so they do not need to go through this check.
const isRenewal = !! purchaseId;
const pseudoSlugsToAllow = [
let pseudoSlugsToAllow = [
'blogger',
'blogger-2-years',
'business',
Expand All @@ -256,9 +259,24 @@ function getCheckoutVariant(
'ecommerce-2-years',
'personal',
'personal-2-years',
'premium',
'premium', // WordPress.com or Jetpack Premium Yearly
'premium-2-years',
];
const jetpackPseudoSlugsToAllow = [
'jetpack_backup_daily',
'jetpack_backup_realtime',
'jetpack_personal',
'jetpack-personal',
'jetpack-personal-monthly',
'jetpack_scan',
'jetpack_search',
'premium-monthly',
'professional',
'professional-monthly',
];
if ( config( 'env_id' ) !== 'production' ) {
pseudoSlugsToAllow = [ ...pseudoSlugsToAllow, ...jetpackPseudoSlugsToAllow ];
}
const slugPrefixesToAllow = [ 'domain-mapping:', 'theme:' ];
if (
! isRenewal &&
Expand Down
62 changes: 0 additions & 62 deletions client/my-sites/checkout/checkout/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1148,29 +1148,6 @@
font-style: italic;
}

.is-section-checkout.is-jetpack-site {
.layout__content {
position: static;
// Adjust the padding as we no longer
// show the masterbar.
padding-top: 48px;

@include breakpoint-deprecated( '<660px' ) {
padding-top: 0;
}
}

// Move the sidebar up top
.layout__secondary {
top: 0;
}

// Hide the masterbar for real
.masterbar {
display: none;
}
}

.is-section-checkout.is-jetpack-site,
.is-section-checkout-thank-you.is-jetpack-site {
@include jetpack-connect-colors();
Expand All @@ -1180,45 +1157,6 @@
}
}

.is-section-checkout.is-jetpack-site {
min-height: 100%;
background-color: var( --color-jetpack-onboarding-background );

.formatted-header {
color: var( --color-jetpack-onboarding-text );
}

.formatted-header__subtitle {
color: var( --color-primary-10 );
}

.card {
box-shadow: none;
border-radius: 3px;

&.section-header {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

&.payment-box {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}

.is-section-checkout-thank-you.is-jetpack-site {
min-height: 100%;
background-color: var( --color-jetpack-onboarding-background );

.checkout-thank-you__jetpack .plan-thank-you-card .thank-you-card,
.checkout-thank-you__jetpack .plan-thank-you-card .thank-you-card,
.checkout-thank-you__jetpack .plan-thank-you-card .thank-you-card {
box-shadow: none;
}
}

.checkout__site-created-notice-wrapper {
overflow: hidden;
float: none;
Expand Down
5 changes: 3 additions & 2 deletions client/my-sites/checkout/composite-checkout/add-items.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
themeItem,
jetpackProductItem,
} from 'lib/cart-values/cart-items';
import { JETPACK_PRODUCTS_LIST } from 'lib/products-values/constants';
import type { RequestCartProduct } from './wpcom/types';

const debug = debugFactory( 'calypso:composite-checkout:add-items' );
Expand Down Expand Up @@ -65,8 +66,8 @@ export function createItemToAddToCart( {
}

if (
( productAlias?.startsWith( 'jetpack_backup' ) ||
productAlias?.startsWith( 'jetpack_search' ) ) &&
productAlias &&
JETPACK_PRODUCTS_LIST.includes( productAlias ) &&
isJetpackNotAtomic &&
product_id
) {
Expand Down
22 changes: 19 additions & 3 deletions client/my-sites/checkout/composite-checkout/composite-checkout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
domainRequiredContactDetails,
taxRequiredContactDetails,
} from 'my-sites/checkout/composite-checkout/wpcom';
import { CheckoutProvider, defaultRegistry } from '@automattic/composite-checkout';
import { CheckoutProvider, checkoutTheme, defaultRegistry } from '@automattic/composite-checkout';

/**
* Internal dependencies
Expand Down Expand Up @@ -85,12 +85,13 @@ import { AUTO_RENEWAL } from 'lib/url/support';
import { useLocalizedMoment } from 'components/localized-moment';
import isDomainOnlySite from 'state/selectors/is-domain-only-site';
import { retrieveSignupDestination, clearSignupDestinationCookie } from 'signup/utils';
import { useWpcomProductVariants } from './wpcom/hooks/product-variants';
import { useProductVariants } from './wpcom/hooks/product-variants';
import { CartProvider } from './cart-provider';
import { translateResponseCartToWPCOMCart } from './wpcom/lib/translate-cart';
import useShoppingCartManager from './wpcom/hooks/use-shopping-cart-manager';
import useShowAddCouponSuccessMessage from './wpcom/hooks/use-show-add-coupon-success-message';
import useCountryList from './wpcom/hooks/use-country-list';
import { colors } from '@automattic/color-studio';

const debug = debugFactory( 'calypso:composite-checkout:composite-checkout' );

Expand Down Expand Up @@ -468,7 +469,7 @@ export default function CompositeCheckout( {
);
};

const getItemVariants = useWpcomProductVariants( {
const getItemVariants = useProductVariants( {
siteId,
productSlug: getPlanProductSlugs( items )[ 0 ],
} );
Expand Down Expand Up @@ -529,6 +530,20 @@ export default function CompositeCheckout( {
product
);

const jetpackColors = isJetpackNotAtomic
? {
primary: colors[ 'Jetpack Green' ],
primaryBorder: colors[ 'Jetpack Green 80' ],
primaryOver: colors[ 'Jetpack Green 60' ],
success: colors[ 'Jetpack Green' ],
discount: colors[ 'Jetpack Green' ],
highlight: colors[ 'Blue 50' ],
highlightBorder: colors[ 'Blue 80' ],
highlightOver: colors[ 'Blue 60' ],
}
: {};
const theme = { ...checkoutTheme, colors: { ...checkoutTheme.colors, ...jetpackColors } };

return (
<React.Fragment>
<QuerySitePlans siteId={ siteId } />
Expand All @@ -555,6 +570,7 @@ export default function CompositeCheckout( {
isLoadingCart || isLoadingStoredCards || paymentMethods.length < 1 || items.length < 1
}
isValidating={ isCartPendingUpdate }
theme={ theme }
>
<WPCheckout
removeItem={ removeItem }
Expand Down
2 changes: 1 addition & 1 deletion client/my-sites/checkout/composite-checkout/use-prepare-product-for-cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ function getProductSlugFromAlias( productAlias ) {
if ( productAlias === 'concierge-session' ) {
return 'concierge-session';
}
return null;
return productAlias;
}

function createRenewalItemToAddToCart( productAlias, productId, purchaseId, selectedSiteSlug ) {
Expand Down
13 changes: 12 additions & 1 deletion client/my-sites/checkout/composite-checkout/wpcom/components/wp-order-review-line-items.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ function LineItemSublabelAndPrice( { item } ) {
const isDomainMap = item.type === 'domain_map';
const isGSuite = isGSuiteProductSlug( item.wpcom_meta?.product_slug );

if ( item.type === 'plan' && item.wpcom_meta?.months_per_bill_period ) {
if ( item.type === 'plan' && item.wpcom_meta?.months_per_bill_period > 1 ) {
return translate( '%(sublabel)s: %(monthlyPrice)s per month × %(monthsPerBillPeriod)s', {
args: {
sublabel: item.sublabel,
Expand All @@ -438,6 +438,17 @@ function LineItemSublabelAndPrice( { item } ) {
comment: 'product type and monthly breakdown of total cost, separated by a colon',
} );
}

if ( item.type === 'plan' && item.wpcom_meta?.months_per_bill_period === 1 ) {
return translate( '%(sublabel)s: %(monthlyPrice)s per month', {
args: {
sublabel: item.sublabel,
monthlyPrice: item.wpcom_meta.item_subtotal_monthly_cost_display,
},
comment: 'product type and monthly breakdown of total cost, separated by a colon',
} );
}

if (
( isDomainRegistration || isDomainMap || isGSuite ) &&
item.wpcom_meta?.months_per_bill_period === 12
Expand Down
Loading

0 comments on commit 8e806f2

Please sign in to comment.