Add payments methods a/b test (#36705)

fditrapani · web-flow · commit c2a58e8671d7 · 2019-10-28T10:52:05.000-04:00
diff --git a/client/blocks/subscription-length-picker/style.scss b/client/blocks/subscription-length-picker/style.scss
@@ -18,7 +18,7 @@
 		flex-basis: calc( 100% );
 
 		&:not( :first-child ) {
-			margin-top: 20px;
+			margin-top: 8px;
 		}
 
 		@include breakpoint( '>960px' ) {
diff --git a/client/components/section-nav/item.jsx b/client/components/section-nav/item.jsx
@@ -25,6 +25,7 @@ class NavItem extends PureComponent {
 		selected: PropTypes.bool,
 		tabIndex: PropTypes.number,
 		onClick: PropTypes.func,
+		onKeyPress: PropTypes.func,
 		isExternalLink: PropTypes.bool,
 		disabled: PropTypes.bool,
 		count: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
@@ -74,6 +75,7 @@ class NavItem extends PureComponent {
 					disabled={ this.props.disabled }
 					role="menuitem"
 					rel={ this.props.isExternalLink ? 'external' : null }
+					onKeyPress={ this.props.onKeyPress }
 				>
 					<span className={ 'section-nav-' + itemClassPrefix + '__text' }>
 						{ this.props.children }
diff --git a/client/lib/abtest/active-tests.js b/client/lib/abtest/active-tests.js
@@ -124,4 +124,14 @@ export default {
 		},
 		defaultVariation: 'default',
 	},
+	checkoutPaymentTypes: {
+		datestamp: '20191028',
+		variations: {
+			tabs: 50,
+			radios: 50,
+		},
+		defaultVariation: 'tabs',
+		allowExistingUsers: true,
+		localeTargets: 'any',
+	},
 };
diff --git a/client/my-sites/checkout/checkout/index.jsx b/client/my-sites/checkout/checkout/index.jsx
@@ -793,7 +793,6 @@ export class Checkout extends React.Component {
 					shouldShowTax={ shouldShowTax( this.props.cart ) }
 					key="picker"
 				/>
-				<hr className="checkout__subscription-length-picker-separator" key="separator" />
 			</React.Fragment>
 		);
 	}
diff --git a/client/my-sites/checkout/checkout/payment-box.jsx b/client/my-sites/checkout/checkout/payment-box.jsx
@@ -26,11 +26,11 @@ import {
 	WEB_PAYMENT_BASIC_CARD_METHOD,
 	WEB_PAYMENT_APPLE_PAY_METHOD,
 } from 'lib/web-payment';
+import { abtest } from 'lib/abtest';
 
 export class PaymentBox extends PureComponent {
 	constructor() {
 		super();
-		this.handlePaymentMethodChange = this.handlePaymentMethodChange.bind( this );
 	}
 
 	componentDidUpdate() {
@@ -44,14 +44,14 @@ export class PaymentBox extends PureComponent {
 		}
 	}
 
-	handlePaymentMethodChange( paymentMethod ) {
+	handlePaymentMethodChange = paymentMethod => {
 		const onSelectPaymentMethod = this.props.onSelectPaymentMethod;
 		return function() {
 			analytics.ga.recordEvent( 'Upgrades', 'Switch Payment Method' );
 			analytics.tracks.recordEvent( 'calypso_checkout_switch_to_' + snakeCase( paymentMethod ) );
 			onSelectPaymentMethod( paymentMethod );
 		};
-	}
+	};
 
 	getPaymentProviderLabel( method ) {
 		let labelLogo = (
@@ -124,6 +124,7 @@ export class PaymentBox extends PureComponent {
 				href=""
 				onClick={ this.handlePaymentMethodChange( method ) }
 				selected={ this.props.currentPaymentMethod === method }
+				onKeyPress={ event => this.choosePaymentMethodWithKeyboard( event, method ) }
 			>
 				{ this.getPaymentProviderLabel( method ) }
 			</NavItem>
@@ -139,8 +140,45 @@ export class PaymentBox extends PureComponent {
 		} );
 	}
 
+	renderPaymentMethod = ( paymentMethods, isPaymentMethodTest, titleText ) => {
+		if ( isPaymentMethodTest ) {
+			return (
+				<div className="payment-box__pm-test-wrapper">
+					<h2 className="payment-box__pm-title">
+						{ this.props.translate( 'Choose a payment method' ) }
+					</h2>
+					<ul className="payment-box__pm-wrapper">{ paymentMethods }</ul>
+				</div>
+			);
+		}
+
+		if ( paymentMethods ) {
+			return (
+				<SectionNav selectedText={ titleText }>
+					<NavTabs>{ paymentMethods }</NavTabs>
+				</SectionNav>
+			);
+		}
+
+		return null;
+	};
+
+	choosePaymentMethodWithKeyboard = ( event, method ) => {
+		const code = event.keyCode || event.which;
+		if ( code === 13 ) {
+			//13 is the enter keycode
+			this.props.onSelectPaymentMethod( method );
+		}
+	};
+
 	render() {
-		const cardClass = classNames( 'payment-box', this.props.classSet ),
+		const paymentMethods = this.getPaymentMethods();
+		const isPaymentMethodTest = paymentMethods && abtest( 'checkoutPaymentTypes' ) === 'radios';
+		const cardClass = classNames(
+				'payment-box',
+				this.props.classSet,
+				isPaymentMethodTest && 'payment-box--payment-methods-test'
+			),
 			contentClass = classNames( 'payment-box__content', this.props.contentClassSet );
 
 		const titleText = this.props.currentPaymentMethod
@@ -151,20 +189,20 @@ export class PaymentBox extends PureComponent {
 			  } )
 			: this.props.translate( 'Loading…' );
 
-		const paymentMethods = this.getPaymentMethods();
-
 		return (
 			<div className="checkout__payment-box-container" key={ this.props.currentPage }>
 				{ this.props.title ? <SectionHeader label={ this.props.title } /> : null }
 
-				{ paymentMethods && (
-					<SectionNav selectedText={ titleText }>
-						<NavTabs>{ paymentMethods }</NavTabs>
-					</SectionNav>
-				) }
+				{ this.renderPaymentMethod( paymentMethods, isPaymentMethodTest, titleText ) }
 
 				<Card className={ cardClass }>
 					<div className="checkout__box-padding">
+						{ isPaymentMethodTest && (
+							<h2 className="checkout__payment-information-title">
+								{ this.props.translate( 'Enter your payment information' ) }
+							</h2>
+						) }
+
 						<div className={ contentClass }>{ this.props.children }</div>
 					</div>
 				</Card>
diff --git a/client/my-sites/checkout/checkout/style.scss b/client/my-sites/checkout/checkout/style.scss
@@ -1,5 +1,24 @@
 @import 'jetpack-connect/colors.scss';
 
+@mixin section-border ( $position ) {
+  &::before {
+  	display: block;
+  	content: '';
+  	position: absolute;
+  	#{ $position }: 0;
+  	left: -8px;
+  	width: calc( 100% + 16px );
+  	height: 1px;
+  	box-sizing: border-box;
+  	background: var( --color-border-subtle );
+  	
+  	@include breakpoint( '>660px' ) {
+  		width: calc( 100% + 60px );
+  		left: -30px;
+  	}
+  }
+}
+
 .checkout {
 	position: relative;
 
@@ -306,7 +325,7 @@
 		}
 
 		.checkout__payment-box-section.is-selected.no-stored-cards {
-			border-left: 1px solid var( --color-neutral-0 );
+			border: 1px solid var( --color-neutral-5 );
 		}
 
 		.checkout__payment-box-section.is-selected:not( .no-stored-cards ) .checkout__new-card-fields {
@@ -352,6 +371,10 @@
 		}
 	}
 
+	.checkout__payment-box-section {
+		border: 1px solid var( --color-neutral-5 );
+	}
+
 	.checkout__summary-toggle {
 		cursor: pointer;
 		display: block;
@@ -368,24 +391,29 @@
 	// -----------------------------------
 
 	.subscription-length-picker {
-		margin-top: 15px;
+		position: relative;
+		padding-bottom: 10px;
+		margin: 15px 0;
+
+		@include breakpoint( '>660px' ) {
+			padding-bottom: 30px;
+			margin-bottom: 20px;
+		}
+
+		@include section-border( bottom );
 	}
 
-	&__subscription-length-picker-separator {
-		display: none;
+	.subscription-length-picker__header {
+		margin-bottom: 8px;
+		padding-top: 10px;
 		position: relative;
-		// Parent overflow is hidden, so 80px here is an arbitrary number
-		// to make sure this element will cover entire width of the parent.
-		// If it's wider, it's okay too.
-		width: calc( 100% + 80px * 2 );
-		left: -80px;
-		margin-top: 1.7em;
-		margin-bottom: 1.7em;
-		background: var( --color-neutral-0 );
-	}
 
-	.subscription-length-picker + &__subscription-length-picker-separator {
-		display: block;
+		@include breakpoint( '>660px' ) {
+			margin-top: 30px;
+			padding-top: 20px;
+		}
+
+		@include section-border( top );
 	}
 
 	// PayPal Payment Box
@@ -859,6 +887,7 @@
 .checkout__alternative-payment-methods {
 	float: right;
 }
+
 .checkout__payment-box-container {
 	.select-dropdown__option {
 		&:first-child {
@@ -1158,3 +1187,116 @@
 		height: 40px;
 	}
 }
+
+/* Payment Methods Test
+======================================= */
+.payment-box__pm-test-wrapper {
+	background: var( --color-surface );
+	padding: 10px 8px 0;
+
+	@include breakpoint( '>660px' ) {
+		padding: 25px 30px 0;
+	}
+}
+
+.payment-box__pm-title {
+	font-size: 16px;
+	margin-bottom: 8px;
+}
+
+.payment-box__pm-wrapper {
+	margin: 0;
+	padding: 0;
+
+	.section-nav-tab {
+		list-style: none;
+		border: 0;
+		margin: 8px 0 0;
+		position: relative;
+
+		&:first-child {
+			margin-top: 0 !important;
+		}
+
+		&::after {
+			display: block;
+			content: '';
+			position: absolute;
+			top: 50%;
+			transform: translateY( -50% );
+			left: 15px;
+			width: 21px;
+			height: 21px;
+			border: 1px solid var( --color-neutral-10 );
+			border-radius: 50%;
+			box-sizing: border-box;
+		}
+
+		&::before {
+			display: block;
+			content: '';
+			position: absolute;
+			top: 50%;
+			transform: translateY( -50% ) scale( 0.8 );
+			left: 19px;
+			width: 13px;
+			height: 13px;
+			background: var( --color-surface );
+			border-radius: 50%;
+			box-sizing: border-box;
+			transition: transform 0.3s ease;
+		}
+
+		&.is-selected::before {
+			transform: translateY( -50% ) scale( 1 );
+			background: var( --color-primary );
+		}
+
+		&.is-selected .section-nav-tab__link::before {
+			border: 3px solid var( --color-primary );
+		}
+	}
+
+	.section-nav-tab__link {
+		color: var( --color-text );
+		font-weight: 400;
+		position: relative;
+		padding: 16px 16px 16px 47px;
+		background: transparent !important;
+
+		&::before {
+			display: block;
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			border: 1px solid var( --color-border );
+			border-radius: 3px;
+		}
+
+		&:hover::before {
+			border: 3px solid var( --color-primary );
+		}
+	}
+}
+
+.payment-box--payment-methods-test {
+	box-shadow: none;
+}
+
+.checkout__payment-information-title {
+	font-size: 16px;
+	margin-bottom: 8px;
+	padding-top: 10px;
+	position: relative;
+
+	@include breakpoint( '>660px' ) {
+		margin: 20px 0 8px;
+		padding-top: 20px;
+	}
+
+	@include section-border( top );
+}

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`flex-basis: calc( 100% );`
`19`	`19`
`20`	`20`	`&:not( :first-child ) {`
`21`		`- margin-top: 20px;`
	`21`	`+ margin-top: 8px;`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`@include breakpoint( '>960px' ) {`
Original file line number	Diff line number	Diff line change
`@@ -793,7 +793,6 @@ export class Checkout extends React.Component {`
`793`	`793`	`shouldShowTax={ shouldShowTax( this.props.cart ) }`
`794`	`794`	`key="picker"`
`795`	`795`	`/>`
`796`		`- <hr className="checkout__subscription-length-picker-separator" key="separator" />`
`797`	`796`	`</React.Fragment>`
`798`	`797`	`);`
`799`	`798`	`}`