Skip to content

Commit

Permalink
Sync my jetpack's Boost page with Boost's getting started page (#39130)
Browse files Browse the repository at this point in the history 
* Sync my jetpack's Boost page with Boost's getting started page

* add changelog

* Remove unused prop

* Update Boost pricing table to rely on the same data as my jetpack

* Add features list component to reduce code repetition

* Fix type incompatibility

* Remove unused code

* add changelog

* Reduce localized data

* Update premium pricing to rely on my jetpack variables instead of own

* Remove unused type

* Use data sync for 'my jetpack' data instead of directly localizing

* Add test for my jetpack data in Boost

* Fix test signature

* Update prop name

* Simplify tests

* Update php tests to be less strict in terms of feature order

* Add a check for feature count
  • Loading branch information
@dilirity
dilirity authored Oct 9, 2024
1 parent f65d672 commit 7ddcd05
Show file tree
Hide file tree
Showing 12 changed files with 272 additions and 267 deletions.
4 changes: 4 additions & 0 deletions projects/packages/my-jetpack/changelog/update-boost-getting-started-page-to-match-boost
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Update Boost's pricing table to include latest feature list.
97 changes: 77 additions & 20 deletions projects/packages/my-jetpack/src/products/class-boost.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ public static function get_tiers() {
public static function get_features_by_tier() {
return array(
array(
'name' => __( 'Optimize CSS Loading', 'jetpack-my-jetpack' ),
'name' => __( 'Auto CSS Optimization', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Move important styling information to the start of the page, which helps pages display your content sooner, so your users don’t have to wait for the entire page to load. Commonly referred to as Critical CSS.',
Expand All @@ -143,8 +143,8 @@ public static function get_features_by_tier() {
),
'tiers' => array(
self::FREE_TIER_SLUG => array(
'included' => true,
'description' => __( 'Must be done manually', 'jetpack-my-jetpack' ),
'included' => false,
'description' => __( 'Manual', 'jetpack-my-jetpack' ),
'info' => array(
'title' => __( 'Manual Critical CSS regeneration', 'jetpack-my-jetpack' ),
'content' => __(
Expand All @@ -163,7 +163,7 @@ public static function get_features_by_tier() {
),
self::UPGRADED_TIER_SLUG => array(
'included' => true,
'description' => __( 'Automatically updated', 'jetpack-my-jetpack' ),
'description' => __( 'Included', 'jetpack-my-jetpack' ),
'info' => array(
'title' => __( 'Automatic Critical CSS regeneration', 'jetpack-my-jetpack' ),
'content' => __(
Expand All @@ -176,15 +176,51 @@ public static function get_features_by_tier() {
),
),
array(
'name' => __( 'Defer non-essential JavaScript', 'jetpack-my-jetpack' ),
'name' => __( 'Automatic image size analysis', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Run non-essential JavaScript after the page has loaded so that styles and images can load more quickly.',
'Scan your site for images that aren’t properly sized for the device they’re being viewed on.',
'jetpack-my-jetpack'
),
),
'tiers' => array(
self::FREE_TIER_SLUG => array( 'included' => false ),
self::UPGRADED_TIER_SLUG => array( 'included' => true ),
),
),
array(
'name' => __( 'Historical performance scores', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Get access to your historical performance scores and see advanced Core Web Vitals data.',
'jetpack-my-jetpack'
),
'link' => array(
'id' => 'jetpack-boost-defer-js',
'title' => 'web.dev',
),
'tiers' => array(
self::FREE_TIER_SLUG => array( 'included' => false ),
self::UPGRADED_TIER_SLUG => array( 'included' => true ),
),
),
array(
'name' => __( 'Dedicated email support', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'<p>Paid customers get dedicated email support from our world-class Happiness Engineers to help with any issue.</p>
<p>All other questions are handled by our team as quickly as we are able to go through the WordPress support forum.</p>',
'jetpack-my-jetpack'
),
),
'tiers' => array(
self::FREE_TIER_SLUG => array( 'included' => false ),
self::UPGRADED_TIER_SLUG => array( 'included' => true ),
),
),
array(
'name' => __( 'Page Cache', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Page caching speeds up load times by storing a copy of each web page on the first visit, allowing subsequent visits to be served instantly. This reduces server load and improves user experience by delivering content faster, without waiting for the page to be generated again.',
'jetpack-my-jetpack'
),
),
'tiers' => array(
Expand All @@ -193,15 +229,37 @@ public static function get_features_by_tier() {
),
),
array(
'name' => __( 'Lazy image loading', 'jetpack-my-jetpack' ),
'name' => __( 'Image CDN Quality Settings', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Improve page loading speed by only loading images when they are required.',
'Fine-tune image quality settings to your liking.',
'jetpack-my-jetpack'
),
'link' => array(
'id' => 'jetpack-boost-lazy-load',
'title' => 'web.dev',
),
'tiers' => array(
self::FREE_TIER_SLUG => array( 'included' => false ),
self::UPGRADED_TIER_SLUG => array( 'included' => true ),
),
),
array(
'name' => __( 'Image CDN Auto-Resize Lazy Images', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Optimizes lazy-loaded images by dynamically serving perfectly sized images for each device.',
'jetpack-my-jetpack'
),
),
'tiers' => array(
self::FREE_TIER_SLUG => array( 'included' => false ),
self::UPGRADED_TIER_SLUG => array( 'included' => true ),
),
),
array(
'name' => __( 'Image CDN', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Deliver images from Jetpack\'s Content Delivery Network. Automatically resizes your images to an appropriate size, converts them to modern efficient formats like WebP, and serves them from a worldwide network of servers.',
'jetpack-my-jetpack'
),
),
'tiers' => array(
Expand All @@ -223,10 +281,10 @@ public static function get_features_by_tier() {
),
),
array(
'name' => __( 'Image CDN', 'jetpack-my-jetpack' ),
'name' => __( 'Defer non-essential JavaScript', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'Deliver images from Jetpack\'s Content Delivery Network. Automatically resizes your images to an appropriate size, converts them to modern efficient formats like WebP, and serves them from a worldwide network of servers.',
'Run non-essential JavaScript after the page has loaded so that styles and images can load more quickly.',
'jetpack-my-jetpack'
),
),
Expand All @@ -236,16 +294,15 @@ public static function get_features_by_tier() {
),
),
array(
'name' => __( 'Dedicated email support', 'jetpack-my-jetpack' ),
'name' => __( 'Concatenate JS and CSS', 'jetpack-my-jetpack' ),
'info' => array(
'content' => __(
'<p>Paid customers get dedicated email support from our world-class Happiness Engineers to help with any issue.</p>
<p>All other questions are handled by our team as quickly as we are able to go through the WordPress support forum.</p>',
'Boost your website performance by merging and compressing JavaScript and CSS files, reducing site loading time and number of requests.',
'jetpack-my-jetpack'
),
),
'tiers' => array(
self::FREE_TIER_SLUG => array( 'included' => false ),
self::FREE_TIER_SLUG => array( 'included' => true ),
self::UPGRADED_TIER_SLUG => array( 'included' => true ),
),
),
Expand Down
1 change: 0 additions & 1 deletion projects/plugins/boost/app/admin/class-config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

use Automattic\Jetpack\Status;
use Automattic\Jetpack\Status\Host;

/**
* Handle the configuration constants.
*
Expand Down
63 changes: 57 additions & 6 deletions ...ects/plugins/boost/app/assets/src/js/features/boost-pricing-table/boost-pricing-table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,73 @@
import { type PricingSchema, usePricing } from '$lib/stores/pricing';
import { usePricing } from '$lib/stores/pricing';
import { useProduct } from '$lib/stores/product';
import {
Button,
Notice,
PricingTable,
PricingTableColumn,
PricingTableHeader,
PricingTableItem,
ProductPrice,
} from '@automattic/jetpack-components';
import { boostFeatureList } from './lib/features';
import { __ } from '@wordpress/i18n';

type BoostPricingTableProps = {
pricing: PricingSchema;
onPremiumCTA: () => void;
onFreeCTA: () => void;
chosenFreePlan: boolean;
chosenPaidPlan: boolean;
};

type BoostPricingTablesFeaturesListProps = {
feature: {
included: boolean;
description?: string;
info?: {
title?: string;
content: string;
class?: string;
};
};
};

const BoostPricingTablesFeaturesList = ( { feature }: BoostPricingTablesFeaturesListProps ) => {
const { description, included, info } = feature;

let labelText;
if ( description ) {
labelText = <strong>{ description }</strong>;
}

return (
<PricingTableItem
isIncluded={ included }
label={ labelText }
tooltipTitle={ info?.title }
tooltipInfo={
// eslint-disable-next-line react/no-danger
info?.content ? <div dangerouslySetInnerHTML={ { __html: info?.content } } /> : null
}
tooltipClassName={ info?.class }
/>
);
};

export const BoostPricingTable = ( {
onPremiumCTA,
onFreeCTA,
chosenFreePlan,
chosenPaidPlan,
}: BoostPricingTableProps ) => {
const pricing = usePricing();
const product = useProduct();

// If the first year discount ends, we want to show the default label.
const legend = pricing?.isIntroductoryOffer
? __( '/month for the first year, billed yearly', 'jetpack-boost' )
: undefined;

const isDiscounted = pricing?.priceBefore && pricing?.priceBefore > pricing?.priceAfter;
const featuresByTier = product?.features_by_tier ?? [];

return (
<>
Expand All @@ -49,7 +85,15 @@ export const BoostPricingTable = ( {

<PricingTable
title={ __( 'The easiest speed optimization plugin for WordPress', 'jetpack-boost' ) }
items={ boostFeatureList.map( feature => feature.description ) }
items={ featuresByTier.map( ( { name, info } ) => ( {
name,
tooltipTitle: info?.title,
tooltipInfo: info?.content ? (
// eslint-disable-next-line react/no-danger
<div dangerouslySetInnerHTML={ { __html: info?.content } } />
) : null,
tooltipPlacement: 'bottom-start',
} ) ) }
>
<PricingTableColumn primary>
{ [
Expand All @@ -70,7 +114,12 @@ export const BoostPricingTable = ( {
{ __( 'Get Boost', 'jetpack-boost' ) }
</Button>
</PricingTableHeader>,
...boostFeatureList.map( feature => feature.premium ),
...featuresByTier.map( ( tierFeature, mapIndex ) => (
<BoostPricingTablesFeaturesList
key={ mapIndex }
feature={ tierFeature.tiers.upgraded }
/>
) ),
] }
</PricingTableColumn>
<PricingTableColumn>
Expand All @@ -92,7 +141,9 @@ export const BoostPricingTable = ( {
{ __( 'Start for free', 'jetpack-boost' ) }
</Button>
</PricingTableHeader>,
...boostFeatureList.map( feature => feature.free ),
...featuresByTier.map( ( { tiers }, index ) => (
<BoostPricingTablesFeaturesList key={ index } feature={ tiers.free } />
) ),
] }
</PricingTableColumn>
</PricingTable>
Expand Down
Loading

0 comments on commit 7ddcd05

Please sign in to comment.