Plans: Add Single Product Jetpack Backup

_inc/client/plans/index.jsx

@@ -3,31 +3,45 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
  */
-import { getSiteConnectionStatus } from 'state/connection';
 import PlanGrid from './plan-grid';
-import QuerySite from 'components/data/query-site';
+import { SingleProductBackup } from './single-product-backup';
 import QueryProducts from 'components/data/query-products';
+import QuerySite from 'components/data/query-site';
+import { getUpgradeUrl } from 'state/initial-state';
+import { getProducts, getSitePlan } from 'state/site';
 
 export class Plans extends React.Component {
 	render() {
+		const { dailyBackupUpgradeUrl, products, realtimeBackupUpgradeUrl } = this.props;
+
+		const upgradeLinks = {
+			daily: dailyBackupUpgradeUrl,
+			'real-time': realtimeBackupUpgradeUrl,
+		};
+
 		return (
-			<div>
+			<React.Fragment>
 				<QueryProducts />
 				<QuerySite />
-				<div>
-					<PlanGrid />
-				</div>
-			</div>
+				{ products && 'jetpack_free' === get( this.props.sitePlan, 'product_slug' ) && (
+					<SingleProductBackup products={ products } upgradeLinks={ upgradeLinks } />
+				) }
+				<PlanGrid />
+			</React.Fragment>
 		);
 	}
 }
 
 export default connect( state => {
 	return {
-		getSiteConnectionStatus: () => getSiteConnectionStatus( state ),
+		dailyBackupUpgradeUrl: getUpgradeUrl( state, 'jetpack-backup-daily' ),
+		products: getProducts( state ),
+		realtimeBackupUpgradeUrl: getUpgradeUrl( state, 'jetpack-backup-realtime' ),
+		sitePlan: getSitePlan( state ),
 	};
 } )( Plans );

_inc/client/plans/single-product-backup.jsx

@@ -1,9 +1,11 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { getCurrencyDefaults } from '@automattic/format-currency';
 import { translate as __ } from 'i18n-calypso';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -13,6 +15,61 @@ import ExternalLink from 'components/external-link';
 
 import './single-product-backup.scss';
 
+export function SingleProductBackup( { products, upgradeLinks } ) {
+	const [ selectedBackupType, setSelectedBackupType ] = useState( 'real-time' );
+
+	const backupPlanPrices = {
+		jetpack_backup_daily: {
+			monthly: get( products, [ 'jetpack_backup_daily_monthly', 'cost' ], '' ),
+			yearly: get( products, [ 'jetpack_backup_daily', 'cost' ], '' ),
+		},
+		jetpack_backup_realtime: {
+			monthly: get( products, [ 'jetpack_backup_realtime_monthly', 'cost' ], '' ),
+			yearly: get( products, [ 'jetpack_backup_realtime', 'cost' ], '' ),
+		},
+	};
+
+	const currency_code = get( products, [ 'jetpack_backup_daily', 'currency_code' ], '' );
+	const currencySymbol = getCurrencyDefaults( currency_code ).symbol;
+
+	return (
+		<React.Fragment>
+			<h1 className="plans-section__header">{ __( 'Solutions' ) }</h1>
+			<h2 className="plans-section__subheader">
+				{ __( "Just looking for backups? We've got you covered." ) }
+			</h2>
+			<div className="plans-section__single-product">
+				<div className="single-product-backup__accented-card">
+					<div className="single-product-backup__accented-card-header">
+						<SingleProductBackupHeader
+							currencySymbol={ currencySymbol }
+							backupPlanPrices={ backupPlanPrices }
+						/>
+					</div>
+					<div className="single-product-backup__accented-card-body">
+						<SingleProductBackupBody
+							backupPlanPrices={ backupPlanPrices }
+							currencySymbol={ currencySymbol }
+							selectedBackupType={ selectedBackupType }
+							setSelectedBackupType={ setSelectedBackupType }
+							upgradeLinks={ upgradeLinks }
+						/>
+					</div>
+				</div>
+			</div>
+		</React.Fragment>
+	);
+}
+
+function SingleProductBackupHeader( { currencySymbol, backupPlanPrices } ) {
+	return (
+		<div className="single-product-backup__header-container">
+			<h3 className="single-product-backup__header-title">{ __( 'Jetpack Backup' ) }</h3>
+			<PlanPriceDisplay currencySymbol={ currencySymbol } backupPlanPrices={ backupPlanPrices } />
+		</div>
+	);
+}
+
 export function PlanPriceDisplay( { backupPlanPrices, currencySymbol } ) {
 	const dailyBackupYearlyPrice = backupPlanPrices.jetpack_backup_daily.yearly;
 	const dailyBackupMonthlyPrice = backupPlanPrices.jetpack_backup_daily.monthly;

_inc/client/plans/single-product-backup.scss

@@ -1,7 +1,11 @@
-.single-product-backup__options-header {
-	font-size: 14px;
-	color: #747474;
-	border-bottom: solid 2px #e6e6e6;
+@import '../scss/variables/_colors.scss';
+
+.plan-radio-button__label {
+	display: flex;
+}
+
+input[type='radio'].plan-radio-button__input {
+	margin-top: 0px;
 }
 
 .plans-price__container {
@@ -43,10 +47,66 @@
 	align-content: center;
 }
 
-.plan-radio-button__label {
+.single-product-backup__options-header {
+	font-size: 14px;
+	color: $gray-text-min;
+	border-bottom: solid 2px #e6e6e6;
+}
+
+.plans-section__header {
+	text-align: center;
+	font-weight: normal;
+	font-size: 22px;
+}
+
+.plans-section__subheader {
+	color: $gray-text-min;
+	text-align: center;
+	font-weight: normal;
+	font-size: 14px;
+}
+
+.plans-section__single-product {
 	display: flex;
+	justify-content: center;
+	margin-bottom: 10px;
 }
 
-input[type='radio'].plan-radio-button__input {
-	margin-top: 0px;
+.single-product-backup__header-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-content: center;
+}
+
+.single-product-backup__radio-buttons-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+}
+
+.single-product-backup__upgrade-button-container {
+	text-align: center;
+	margin-top: 23px;
+	margin-bottom: 10px;
+}
+
+.single-product-backup__accented-card {
+	max-width: 518px;
+	min-height: 313px;
+	background-color: #fff;
+	border: solid 1px #e6e6e6;
+}
+
+.single-product-backup__accented-card-header {
+	padding: 15px;
+	border-bottom: solid 2px $blue-medium;
+}
+
+.single-product-backup__header-title {
+	font-size: 17px;
+}
+
+.single-product-backup__accented-card-body {
+	padding: 15px;
 }