Add support for products on My Plan page and update layout to match mocks

_inc/client/lib/plans/constants.js

@@ -41,6 +41,13 @@ export const JETPACK_MONTHLY_PLANS = [
 	PLAN_JETPACK_PERSONAL_MONTHLY,
 ];
 
+export const JETPACK_BACKUP_PRODUCTS = [
+	PLAN_JETPACK_BACKUP_DAILY,
+	PLAN_JETPACK_BACKUP_DAILY_MONTHLY,
+	PLAN_JETPACK_BACKUP_REALTIME,
+	PLAN_JETPACK_BACKUP_REALTIME_MONTHLY,
+];
+
 export const PLAN_MONTHLY_PERIOD = 31;
 export const PLAN_ANNUAL_PERIOD = 365;
 
@@ -119,6 +126,10 @@ export function isNew( plan ) {
 	return includes( NEW_PLANS, plan );
 }
 
+export function isJetpackBackup( product ) {
+	return includes( JETPACK_BACKUP_PRODUCTS, product );
+}
+
 export function getPlanClass( plan ) {
 	switch ( plan ) {
 		case PLAN_JETPACK_FREE:

_inc/client/my-plan/index.jsx

@@ -27,9 +27,7 @@ export class MyPlan extends React.Component {
 
 		return (
 			<div>
-				<div className="jp-landing__plans dops-card">
-					<MyPlanHeader plan={ sitePlan } siteRawUrl={ this.props.siteRawUrl } />
-				</div>
+				<MyPlanHeader plan={ sitePlan } siteRawUrl={ this.props.siteRawUrl } />
 				<MyPlanBody
 					plan={ sitePlan }
 					availableFeatures={ availableFeatures }

_inc/client/my-plan/my-plan-card/README.md

@@ -0,0 +1,43 @@
+My Plan Card
+=======
+
+My Plan Card is a React component for rendering a box with plan or product name, description and icon, its expiry
+date and a button to manage the payment.
+
+It's meant to be used on My Plan page to display plans and products that the user purchased.
+
+See p1HpG7-7ET-p2 for more details.
+
+### How to use the `<MyPlanCard />`
+
+```jsx
+import React from 'react';
+import MyPlanCard from 'components/my-plan-card';
+import Button from 'components/button';
+
+export default class extends React.Component {
+	render() {
+		return (
+			<MyPlanCard
+				action={ <Button compact>Manage Payment</Button> }
+				details="Expires on October 27, 2020"
+				icon="images/plans/plan-personal.svg"
+				tagLine="Your data is being securely backed up and you have access to priority support."
+				title="Jetpack Personal"
+			/>
+		);
+	}
+}
+```
+
+### `<MyPlanCard />` props
+
+The following props can be passed to the My Plan Card component:
+
+* `action`: ( element | node ) Action button element or node.
+* `isError`: ( bool ) With this flag being set the details string is in an error state (red copy).
+* `isPlaceholder`: ( bool ) Flag indicating that the component in is a loading state
+* `details`: ( string ) Details about a plan or product, e.g. expiration or auto-renew date like `Expires on October 27, 2020`
+* `icon`: ( string ) Plan or product icon path
+* `tagLine`: ( string | element | node ) Plan or product tag line. It can be a string, a node or a React element (e.g. `<Fragment>`)
+* `title`: ( string | element | node ) Plan or product title. It can be a string, a node or a React element (e.g. `<Fragment>`)

_inc/client/my-plan/my-plan-card/index.jsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+const MyPlanCard = ( { action, isError, isPlaceholder, details, icon, tagLine, title } ) => {
+	const cardClassNames = classNames( 'my-plan-card', {
+		'is-placeholder': isPlaceholder,
+		'has-action-only': action && ! details && ! isPlaceholder,
+	} );
+	const detailsClassNames = classNames( 'my-plan-card__details', { 'is-error': isError } );
+
+	return (
+		<div className={ cardClassNames } compact>
+			<div className="my-plan-card__primary">
+				<div className="my-plan-card__icon">{ icon && <img src={ icon } alt={ title } /> }</div>
+				<div className="my-plan-card__header">
+					{ title && <h2 className="my-plan-card__title">{ title }</h2> }
+					{ tagLine && <p className="my-plan-card__tag-line">{ tagLine }</p> }
+				</div>
+			</div>
+			{ ( details || action || isPlaceholder ) && (
+				<div className="my-plan-card__secondary">
+					<div className={ detailsClassNames }>{ isPlaceholder ? null : details }</div>
+					<div className="my-plan-card__action">{ isPlaceholder ? null : action }</div>
+				</div>
+			) }
+		</div>
+	);
+};
+
+MyPlanCard.propTypes = {
+	action: PropTypes.oneOfType( [ PropTypes.node, PropTypes.element ] ),
+	isError: PropTypes.bool,
+	isPlaceholder: PropTypes.bool,
+	details: PropTypes.string,
+	icon: PropTypes.string,
+	tagLine: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node, PropTypes.element ] ),
+	title: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node, PropTypes.element ] ),
+};
+
+export default MyPlanCard;

_inc/client/my-plan/my-plan-card/style.scss

@@ -0,0 +1,122 @@
+@import '../../scss/mixin_breakpoint';
+@import '../../scss/calypso-colors';
+
+// My Plan Card
+.my-plan-card {
+	@include breakpoint( '>960px' ) {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+	}
+}
+
+.my-plan-card__primary {
+	display: flex;
+	flex-flow: row nowrap;
+	flex-grow: 1;
+}
+
+.my-plan-card__header {
+	flex: 1;
+}
+
+.my-plan-card__title {
+	font-size: 20px;
+	font-weight: 600;
+	line-height: 29px;
+	margin: 6px 0;
+	color: $gray-dark;
+}
+
+.my-plan-card__tag-line {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 17px;
+	margin: 0 0 24px;
+
+	@include breakpoint( '>960px' ) {
+		margin-bottom: 8px;
+	}
+}
+
+.my-plan-card__icon {
+	flex: 0 0 auto;
+	width: 64px;
+	height: 64px;
+	margin: 8px 20px 16px 0;
+
+	@include breakpoint( '<660px' ) {
+		display: none;
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.my-plan-card__secondary {
+	position: relative;
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 0 0;
+
+	@include breakpoint( '>960px' ) {
+		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: flex-end;
+		padding: 0 0 0 24px;
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: -16px;
+		right: -16px;
+		border-top: 1px solid $light-gray-700;
+
+		@include breakpoint( '>480px' ) {
+			left: -24px;
+			right: -24px;
+		}
+
+		@include breakpoint( '>960px' ) {
+			content: none;
+		}
+	}
+
+	.has-action-only & {
+		padding-top: 0;
+		justify-content: center;
+
+		&::before {
+			content: none;
+		}
+	}
+}
+
+.my-plan-card__details {
+	padding-top: 8px;
+	white-space: nowrap;
+	color: $gray-darken-10;
+
+	@include breakpoint( '>960px' ) {
+		padding-top: 0;
+	}
+
+	&.is-error {
+		color: $alert-red;
+	}
+}
+
+.my-plan-card__action {
+	padding-top: 8px;
+	white-space: nowrap;
+
+	.has-action-only & {
+		padding-top: 0;
+	}
+}