Create PlanPriceDisplay

Automattic · Nov 14, 2019 · ae49ac7 · ae49ac7
1 parent 8fbc2b1
commit ae49ac7
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/_inc/client/plans/single-product-backup.jsx b/_inc/client/plans/single-product-backup.jsx
@@ -6,6 +6,35 @@ import { translate as __ } from 'i18n-calypso';
 
 import './single-product-backup.scss';
 
+export function PlanPriceDisplay( { backupPlanPrices, currencySymbol } ) {
+	const perYearPriceRange = `${ currencySymbol }${ backupPlanPrices.jetpack_backup_daily.yearly }-${ backupPlanPrices.jetpack_backup_realtime.yearly } /year`;
+
+	const full_daily_backup_yearly_cost = backupPlanPrices.jetpack_backup_daily.monthly * 12;
+	const full_realtime_backup_yearly_cost = backupPlanPrices.jetpack_backup_realtime.monthly * 12;
+
+	return (
+		<div className="single-product-backup__plan-price-display-container">
+			<div className="discounted-price__container">
+				<div className="discounted-price__slash"></div>
+				<div className="discounted-price__price">
+					{ __( '%(currencySymbol)s%(lowPrice)s-%(highPrice)s', {
+						args: {
+							currencySymbol,
+							lowPrice: full_daily_backup_yearly_cost,
+							highPrice: full_realtime_backup_yearly_cost,
+						},
+						comment:
+							"Describes how much a plan will cost per year. %(currencySymbol) is the currency symbol of the user's locale (e.g. $). %(planPrice) is the cost of a plan (e.g. 20).",
+					} ) }
+				</div>
+			</div>
+			<div className="plans-price__container">
+				<span className="plans-price__price-range">{ perYearPriceRange }</span>
+			</div>
+		</div>
+	);
+}
+
 export function PlanRadioButton( {
 	checked,
 	currencySymbol,

diff --git a/_inc/client/plans/single-product-backup.scss b/_inc/client/plans/single-product-backup.scss
@@ -1,3 +1,42 @@
+.plans-price__container {
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+}
+
+.plans-price__price-range {
+	display: inline-block;
+	vertical-align: middle;
+	line-height: normal;
+}
+
+.discounted-price__container {
+	position: relative;
+	display: inline-block;
+	line-height: 50px;
+	margin-right: 14px;
+}
+
+.discounted-price__slash {
+	position: relative;
+	width: 100%;
+	height: 0;
+	border-top: 2px solid $blue-medium;
+	transform: rotate( -16deg );
+	top: 27px;
+}
+
+.discounted-price__price {
+	color: #a7aaad;
+}
+
+.single-product-backup__plan-price-display-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-content: center;
+}
+
 .plan-radio-button__input {
 	margin-left: -20px !important;