Stats: Adjust Personal purchase page styling for WPCOM sites (#81463)

* Refactor styles with variables * Update shared styling between both sides * Move position of personal benefits * Update shared copy for average price * Adjust styling for WPCOM sites * reverse copy change --------- Co-authored-by: Jasper Kang <kangzjnet@gmail.com>
Automattic · Sep 6, 2023 · af15567 · af15567
1 parent a66109a
commit af15567
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 37 deletions.
diff --git a/client/my-sites/stats/stats-purchase/stats-purchase-personal.tsx b/client/my-sites/stats/stats-purchase/stats-purchase-personal.tsx
@@ -1,9 +1,15 @@
-import { PricingSlider, RenderThumbFunction } from '@automattic/components';
+import {
+	PricingSlider,
+	RenderThumbFunction,
+	Button as CalypsoButton,
+} from '@automattic/components';
 import formatCurrency from '@automattic/format-currency';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { Button, CheckboxControl } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import React, { useState } from 'react';
+import { useSelector } from 'calypso/state';
+import getIsSiteWPCOM from 'calypso/state/selectors/is-site-wpcom';
 import gotoCheckoutPage from './stats-purchase-checkout-redirect';
 import { COMPONENT_CLASS_NAME, MIN_STEP_SPLITS } from './stats-purchase-wizard';
 
@@ -13,6 +19,7 @@ interface PersonalPurchaseProps {
 	defaultStartingValue: number;
 	handlePlanSwap: ( e: React.MouseEvent< HTMLAnchorElement, MouseEvent > ) => void;
 	currencyCode: string;
+	siteId: number | null;
 	siteSlug: string;
 	sliderSettings: {
 		sliderStepPrice: number;
@@ -32,6 +39,7 @@ const PersonalPurchase = ( {
 	defaultStartingValue,
 	handlePlanSwap,
 	currencyCode,
+	siteId,
 	siteSlug,
 	sliderSettings,
 	adminUrl,
@@ -80,8 +88,26 @@ const PersonalPurchase = ( {
 	const handleClick = ( e: React.MouseEvent< HTMLAnchorElement, MouseEvent > ) =>
 		handlePlanSwap( e );
 
+	const isWPCOMSite = useSelector( ( state ) => siteId && getIsSiteWPCOM( state, siteId ) );
+	// The button of @automattic/components has built-in color scheme support for Calypso.
+	const ButtonComponent = isWPCOMSite ? CalypsoButton : Button;
+
 	return (
 		<div>
+			<div className={ `${ COMPONENT_CLASS_NAME }__benefits` }>
+				{ subscriptionValue === 0 ? (
+					<ul className={ `${ COMPONENT_CLASS_NAME }__benefits--not-included` }>
+						<li>{ translate( 'No access to upcoming features' ) }</li>
+						<li>{ translate( 'No priority support' ) }</li>
+					</ul>
+				) : (
+					<ul className={ `${ COMPONENT_CLASS_NAME }__benefits--included` }>
+						<li>{ translate( 'Instant access to upcoming features' ) }</li>
+						<li>{ translate( 'Priority support' ) }</li>
+					</ul>
+				) }
+			</div>
+
 			<div className={ `${ COMPONENT_CLASS_NAME }__notice` }>
 				{ translate(
 					'This plan is for personal sites only. If your site is used for a commercial activity, {{Button}}you will need to choose a commercial plan{{/Button}}.',
@@ -92,6 +118,7 @@ const PersonalPurchase = ( {
 					}
 				) }
 			</div>
+
 			<PricingSlider
 				className={ `${ COMPONENT_CLASS_NAME }__slider` }
 				value={ subscriptionValue }
@@ -109,23 +136,6 @@ const PersonalPurchase = ( {
 				} ) }
 			</p>
 
-			<div className={ `${ COMPONENT_CLASS_NAME }__benefits` }>
-				{ subscriptionValue === 0 ? (
-					<ul className={ `${ COMPONENT_CLASS_NAME }__benefits--not-included` }>
-						<li>{ translate( 'No access to upcoming features' ) }</li>
-						<li>{ translate( 'No priority support' ) }</li>
-					</ul>
-				) : (
-					<>
-						<p>{ translate( 'Benefits:' ) }</p>
-						<ul className={ `${ COMPONENT_CLASS_NAME }__benefits--included` }>
-							<li>{ translate( 'Instant access to upcoming features' ) }</li>
-							<li>{ translate( 'Priority support' ) }</li>
-						</ul>
-					</>
-				) }
-			</div>
-
 			{ subscriptionValue === 0 && (
 				<div className={ `${ COMPONENT_CLASS_NAME }__persnal-checklist` }>
 					<p>
@@ -168,7 +178,7 @@ const PersonalPurchase = ( {
 				</div>
 			) }
 
-			<p>
+			<p className={ `${ COMPONENT_CLASS_NAME }__personal-tos` }>
 				{ translate(
 					`By clicking the button below, you agree to our {{a}}Terms of Service{{/a}} and to {{b}}share details{{/b}} with WordPress.com.`,
 					{
@@ -187,18 +197,20 @@ const PersonalPurchase = ( {
 			</p>
 
 			{ subscriptionValue === 0 ? (
-				<Button
+				<ButtonComponent
 					variant="primary"
+					primary={ isWPCOMSite ? true : undefined }
 					disabled={ ! isAdsChecked || ! isSellingChecked || ! isBusinessChecked }
 					onClick={ () =>
 						gotoCheckoutPage( { from, type: 'free', siteSlug, adminUrl, redirectUri } )
 					}
 				>
 					{ translate( 'Continue with Jetpack Stats for free' ) }
-				</Button>
+				</ButtonComponent>
 			) : (
-				<Button
+				<ButtonComponent
 					variant="primary"
+					primary={ isWPCOMSite ? true : undefined }
 					onClick={ () =>
 						gotoCheckoutPage( {
 							from,
@@ -210,12 +222,8 @@ const PersonalPurchase = ( {
 						} )
 					}
 				>
-					{ translate( 'Get Jetpack Stats for %(value)s per month', {
-						args: {
-							value: formatCurrency( subscriptionValue * sliderStepPrice, currencyCode ),
-						},
-					} ) }
-				</Button>
+					{ translate( 'Get Stats Personal' ) }
+				</ButtonComponent>
 			) }
 		</div>
 	);

diff --git a/client/my-sites/stats/stats-purchase/stats-purchase-single-item.tsx b/client/my-sites/stats/stats-purchase/stats-purchase-single-item.tsx
@@ -57,6 +57,7 @@ interface StatsSingleItemPersonalPurchasePageProps {
 }
 
 interface StatsPersonalPurchaseProps {
+	siteId: number | null;
 	siteSlug: string;
 	maxSliderPrice: number;
 	pwywProduct: {
@@ -182,6 +183,7 @@ const StatsCommercialPurchase = ( {
 };
 
 const StatsPersonalPurchase = ( {
+	siteId,
 	siteSlug,
 	maxSliderPrice,
 	pwywProduct,
@@ -217,6 +219,7 @@ const StatsPersonalPurchase = ( {
 				defaultStartingValue={ defaultStartingValue }
 				handlePlanSwap={ ( e ) => handlePlanSwap( e ) }
 				currencyCode={ pwywProduct?.currency_code }
+				siteId={ siteId }
 				siteSlug={ siteSlug }
 				sliderSettings={ {
 					minSliderPrice: disableFreeProduct ? sliderStepPrice : 0,
@@ -247,6 +250,7 @@ const StatsSingleItemPersonalPurchasePage = ( {
 	return (
 		<StatsSingleItemPagePurchaseFrame>
 			<StatsPersonalPurchase
+				siteId={ siteId }
 				siteSlug={ siteSlug }
 				adminUrl={ adminUrl || '' }
 				redirectUri={ redirectUri }

diff --git a/client/my-sites/stats/stats-purchase/styles.scss b/client/my-sites/stats/stats-purchase/styles.scss
@@ -26,11 +26,11 @@
 
 			h1 {
 				font-family: $font-recoleta;
-				color: #101517;
+				color: var(--studio-gray-100);
 				font-size: $font-headline-small;
 				font-style: normal;
 				font-weight: 400;
-				line-height: 40px; /* 111.111% */
+				line-height: 40px;
 			}
 
 			.stats-purchase-wizard__pricing-value {
@@ -48,6 +48,34 @@
 				padding: 8px 32px;
 			}
 		}
+
+		.stats-purchase-wizard__notice {
+			color: var(--studio-yellow-80);
+
+			.is-link {
+				color: var(--studio-yellow-80);
+			}
+		}
+
+		.stats-purchase-wizard__personal-tos {
+			display: none;
+		}
+
+		.jp-components-pricing-slider__track.jp-components-pricing-slider__track-0 {
+			background-color: var(--color-primary);
+		}
+
+		.jp-components-pricing-slider__thumb {
+			border-radius: 2px;
+			border-color: var(--color-primary);
+		}
+
+		// On holding thumb styling
+		.jp-components-pricing-slider--is-holding {
+			.jp-components-pricing-slider__thumb {
+				box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);
+			}
+		}
 	}
 }
 
@@ -112,8 +140,9 @@
 	}
 
 	.stats-purchase-wizard__average-price {
+		font-size: $font-body-small;
 		margin-bottom: 3em;
-		color: #2c3338;
+		color: var(--studio-gray-80);
 		text-align: center;
 	}
 
@@ -196,7 +225,7 @@
 		}
 
 		.stats-purchase-wizard__pricing-cadency {
-			color: #787c82;
+			color: var(--studio-gray-40);
 		}
 	}
 
@@ -294,8 +323,8 @@
 			&:hover,
 			&:active,
 			&:focus {
-				background: #2c3338;
-				border-color: #2c3338;
+				background: var(--studio-gray-80);
+				border-color: var(--studio-gray-80);
 			}
 
 			&[disabled],
@@ -354,8 +383,8 @@
 	}
 
 	.stats-purchase-wizard__notice {
-		padding: 8px 12px;
-		background: #f5e6b3;
+		padding: 12px 16px;
+		background: var(--studio-yellow-5);
 		border-radius: 4px;
 
 		.is-link {
@@ -368,7 +397,7 @@
 	}
 
 	.stats-purchase-wizard__notice--green {
-		background-color: #d0e6b8;
+		background-color: var(--studio-jetpack-green-5);
 	}
 
 	.stats-purchase-wizard__control--checkbox {