@automattic/plans-grid-next 1.0.0

package/src/lib/test/filter-plan-features-object.ts

@@ -0,0 +1,65 @@
+import filterUnusedFeaturesObject from '../filter-unused-features-object';
+import type { GridPlan } from '../../types';
+import type { FeatureObject } from '@automattic/calypso-products';
+
+// Mock data for GridPlan and FeatureObject
+const feature1 = { getSlug: () => 'feature1' } as FeatureObject;
+const feature2 = { getSlug: () => 'feature2' } as FeatureObject;
+const feature3 = { getSlug: () => 'feature3' } as FeatureObject;
+const feature4 = { getSlug: () => 'feature4' } as FeatureObject;
+const feature5 = { getSlug: () => 'feature5-jetpack' } as FeatureObject;
+const feature6 = { getSlug: () => 'feature6-jetpack' } as FeatureObject;
+const feature7 = { getSlug: () => 'feature7-conditional' } as FeatureObject;
+
+const planA = {
+	features: {
+		wpcomFeatures: [ feature1, feature2 ],
+		jetpackFeatures: [ feature5, feature6 ],
+	},
+} as GridPlan;
+
+const planB = {
+	features: {
+		wpcomFeatures: [ feature2, feature3 ],
+		jetpackFeatures: [ feature5, feature6 ],
+	},
+} as GridPlan;
+
+describe( 'filterUnusedFeaturesObject', () => {
+	it( 'should return an empty array when both plans and features are empty', () => {
+		const filteredFeatures = filterUnusedFeaturesObject( [], [] );
+		expect( filteredFeatures ).toEqual( [] );
+	} );
+
+	it( 'should return only the features used in any plan', () => {
+		const filteredFeatures = filterUnusedFeaturesObject(
+			[ planA, planB ],
+			[ feature1, feature2, feature3, feature4, feature5, feature7 ]
+		);
+		expect( filteredFeatures ).toEqual( [ feature1, feature2, feature3, feature5 ] );
+	} );
+
+	it( 'should return an empty array when no features are used in plans', () => {
+		const filteredFeatures = filterUnusedFeaturesObject( [], [ feature1 ] );
+		expect( filteredFeatures ).toEqual( [] );
+	} );
+
+	it( 'should handle duplicate features across plans correctly', () => {
+		const planC = {
+			features: {
+				wpcomFeatures: [ feature1, feature1 ],
+				jetpackFeatures: [ feature5, feature6, feature6 ],
+			},
+		} as GridPlan;
+		const filteredFeatures = filterUnusedFeaturesObject(
+			[ planC ],
+			[ feature1, feature2, feature6, feature7 ]
+		);
+		expect( filteredFeatures ).toEqual( [ feature1, feature6 ] );
+	} );
+
+	it( 'should handle invalid input gracefully', () => {
+		const filteredFeatures = filterUnusedFeaturesObject( undefined as any, undefined as any );
+		expect( filteredFeatures ).toEqual( [] );
+	} );
+} );

package/src/lib/test/sort-plan-properties.ts

@@ -0,0 +1,104 @@
+/**
+ * @jest-environment jsdom
+ */
+/**
+ * Default mock implementations
+ */
+jest.mock( '../../hooks/data-store/is-popular-plan', () => ( {
+	isPopularPlan: ( planSlug ) => planSlug === 'value_bundle',
+} ) );
+jest.mock( '@automattic/calypso-products', () => ( {
+	isFreePlan: ( planSlug ) => planSlug === 'free_plan',
+} ) );
+
+import { sortPlans } from '../sort-plan-properties';
+import type { GridPlan } from '../../types';
+
+const planFree = {
+	pricing: { originalPrice: { full: 0, monthly: 0 } },
+	planSlug: 'free_plan',
+} as GridPlan;
+
+const planPersonal = {
+	pricing: { originalPrice: { full: 100, monthly: 0 } },
+	planSlug: 'personal-bundle',
+} as GridPlan;
+
+const planPremium = {
+	pricing: { originalPrice: { full: 200, monthly: 0 } },
+	planSlug: 'value_bundle',
+} as GridPlan;
+
+const planBusiness = {
+	pricing: { originalPrice: { full: 300, monthly: 0 } },
+	planSlug: 'business-bundle',
+} as GridPlan;
+
+const planEcommerce = {
+	pricing: { originalPrice: { full: 500, monthly: 0 } },
+	planSlug: 'ecommerce-bundle',
+} as GridPlan;
+
+const plansInDefaultOrder = [ planFree, planPersonal, planPremium, planBusiness, planEcommerce ];
+
+describe( 'sortPlans', () => {
+	it( 'should sort plans in descending order of value when current plan slug is personal', () => {
+		expect( sortPlans( plansInDefaultOrder, 'personal-bundle' ) ).toEqual( [
+			planPersonal,
+			planPremium,
+			planBusiness,
+			planEcommerce,
+			planFree,
+		] );
+	} );
+
+	it( 'should sort plans in descending order of value when current plan slug is ecommerce', () => {
+		expect( sortPlans( plansInDefaultOrder, 'ecommerce-bundle' ) ).toEqual( [
+			planEcommerce,
+			planBusiness,
+			planPremium,
+			planPersonal,
+			planFree,
+		] );
+	} );
+
+	it( 'should show the popular plan first if current plan slug is empty', () => {
+		expect( sortPlans( plansInDefaultOrder ) ).toEqual( [
+			planPremium,
+			planBusiness,
+			planEcommerce,
+			planPersonal,
+			planFree,
+		] );
+	} );
+
+	it( 'should show the popular plan first when current plan slug is empty', () => {
+		expect( sortPlans( plansInDefaultOrder ) ).toEqual( [
+			planPremium,
+			planBusiness,
+			planEcommerce,
+			planPersonal,
+			planFree,
+		] );
+	} );
+
+	it( 'should show the popular plan first if current plan slug is the free plan', () => {
+		expect( sortPlans( plansInDefaultOrder, 'free_plan' ) ).toEqual( [
+			planPremium,
+			planBusiness,
+			planEcommerce,
+			planPersonal,
+			planFree,
+		] );
+	} );
+
+	it( 'should show the popular plan second if current plan slug is empty/free and user is on mobile', () => {
+		expect( sortPlans( plansInDefaultOrder, 'free_plan', true ) ).toEqual( [
+			planPersonal,
+			planPremium,
+			planBusiness,
+			planEcommerce,
+			planFree,
+		] );
+	} );
+} );

package/src/lib/touch-detect/README.md

@@ -0,0 +1,11 @@
+# touch-detect
+
+`touch-detect` is a simple test to see if the browser supports touch events.
+This is not the same as detecting if the current display is a touch screen.
+Depending on the use case, this may be appropriate.
+
+Further reading:
+
+<https://github.com/Modernizr/Modernizr/blob/HEAD/feature-detects/touchevents.js>
+<http://www.stucox.com/blog/you-cant-detect-a-touchscreen/>
+<http://www.html5rocks.com/en/mobile/touchandmouse/>

package/src/lib/touch-detect/index.js

@@ -0,0 +1,17 @@
+// eslint-disable-next-line inclusive-language/use-inclusive-words
+/**
+ * This test is for touch events.
+ * It may not accurately detect a touch screen, but may be close enough depending on the use case.
+ * @copyright Modernizr © 2009-2015.
+ * @license MIT
+ * @see https://github.com/Modernizr/Modernizr/blob/master/LICENSE.md
+ * @see https://github.com/Modernizr/Modernizr/blob/HEAD/feature-detects/touchevents.js
+ * @returns {boolean} whether touch screen is available
+ */
+export function hasTouch() {
+	/* global DocumentTouch:true */
+	return (
+		window &&
+		( 'ontouchstart' in window || ( window.DocumentTouch && document instanceof DocumentTouch ) )
+	);
+}

package/src/types.ts

@@ -0,0 +1,340 @@
+import { Plans, AddOns, PlanPricing } from '@automattic/data-stores';
+import type {
+	UrlFriendlyTermType,
+	PlanSlug,
+	FeatureList,
+	FeatureObject,
+	FeatureGroupMap,
+	Feature,
+} from '@automattic/calypso-products';
+import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
+import type { TranslateResult } from 'i18n-calypso';
+
+/******************
+ * Grid Plan Types:
+ ******************/
+
+export type TransformedFeatureObject = FeatureObject & {
+	availableForCurrentPlan: boolean;
+	availableOnlyForAnnualPlans: boolean;
+	isHighlighted?: boolean;
+};
+
+export interface PlanFeaturesForGridPlan {
+	wpcomFeatures: TransformedFeatureObject[];
+	jetpackFeatures: TransformedFeatureObject[];
+	storageFeature?: FeatureObject;
+	// used for comparison grid so far
+	comparisonGridFeatureLabels?: Record< Feature, TranslateResult >;
+}
+
+export interface GridPlan {
+	planSlug: PlanSlug;
+	freeTrialPlanSlug?: PlanSlug;
+	isVisible: boolean;
+	features: PlanFeaturesForGridPlan;
+	tagline: TranslateResult;
+	planTitle: TranslateResult;
+	availableForPurchase: boolean;
+	pricing: Plans.PricingMetaForGridPlan;
+	productNameShort?: string | null;
+	billingTimeframe?: TranslateResult | null;
+	current?: boolean;
+	isMonthlyPlan?: boolean;
+	cartItemForPlan?: {
+		product_slug: string;
+	} | null;
+	highlightLabel?: React.ReactNode | null;
+}
+
+/***********************
+ * Grid Component Types:
+ ***********************/
+
+export type GridSize = 'small' | 'medium' | 'large';
+
+export type PlansIntent =
+	| 'plans-affiliate'
+	| 'plans-blog-onboarding'
+	| 'plans-newsletter'
+	| 'plans-new-hosted-site'
+	| 'plans-new-hosted-site-business-only'
+	| 'plans-plugins'
+	| 'plans-jetpack-app'
+	| 'plans-jetpack-app-site-creation'
+	| 'plans-import'
+	| 'plans-woocommerce'
+	| 'plans-p2'
+	| 'plans-default-wpcom'
+	| 'plans-business-trial'
+	| 'plans-videopress'
+	| 'plans-guided-segment-developer-or-agency'
+	| 'plans-guided-segment-merchant'
+	| 'plans-guided-segment-blogger'
+	| 'plans-guided-segment-nonprofit'
+	| 'plans-guided-segment-consumer-or-business'
+	| 'plans-site-selected-legacy'
+	| 'default';
+
+export interface PlanActionOverrides {
+	loggedInFreePlan?: {
+		text?: TranslateResult;
+		status?: 'blocked' | 'enabled';
+	};
+	currentPlan?: {
+		text?: TranslateResult;
+	};
+	trialAlreadyUsed?: {
+		postButtonText?: TranslateResult;
+	};
+}
+
+// A generic type representing the response of an async request.
+// It's probably generic enough to be put outside of the pricing grid package,
+// but at the moment it's located here to reduce its scope of influence.
+export type DataResponse< T > = {
+	isLoading: boolean;
+	result?: T;
+};
+
+export interface CommonGridProps {
+	/**
+	 * Site id may not be used in ComparisonGrid, but need to be investigated further
+	 */
+	siteId?: number | null;
+	isInSignup: boolean;
+	isInAdmin: boolean;
+	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
+	currentSitePlanSlug?: string | null;
+	hideUnavailableFeatures?: boolean; // used to hide features that are not available, instead of strike-through as explained in #76206
+	planActionOverrides?: PlanActionOverrides;
+	// Value of the `?feature=` query param, so we can highlight a given feature and hide plans without it.
+	selectedFeature?: string;
+	showUpgradeableStorage: boolean; // feature flag used to show the storage add-on dropdown
+	stickyRowOffset: number;
+	showRefundPeriod?: boolean;
+	// only used for comparison grid
+	planTypeSelectorProps?: PlanTypeSelectorProps;
+	gridContainerRef?: React.MutableRefObject< HTMLDivElement | null >;
+	gridSize?: string;
+}
+
+export interface FeaturesGridProps extends CommonGridProps {
+	gridPlans: GridPlan[];
+	currentPlanManageHref?: string;
+	generatedWPComSubdomain: DataResponse< { domain_name: string } >;
+	gridPlanForSpotlight?: GridPlan;
+	isCustomDomainAllowedOnFreePlan: boolean; // indicate when a custom domain is allowed to be used with the Free plan.
+	paidDomainName?: string;
+	showLegacyStorageFeature: boolean;
+	enableShowAllFeaturesButton?: boolean;
+}
+
+export interface ComparisonGridProps extends CommonGridProps {
+	// Value of the `?plan=` query param, so we can highlight a given plan.
+	selectedPlan?: string;
+	intervalType: string;
+}
+
+export type UseActionCallback = ( {
+	planSlug,
+	cartItemForPlan,
+	selectedStorageAddOn,
+	availableForPurchase,
+}: {
+	planSlug: PlanSlug;
+	cartItemForPlan?: MinimalRequestCartProduct | null;
+	selectedStorageAddOn?: AddOns.AddOnMeta | null;
+	availableForPurchase?: boolean;
+} ) => () => Promise< void > | void;
+
+export interface GridAction {
+	primary: {
+		text: TranslateResult;
+		callback: () => Promise< void > | void;
+		// TODO: It's not clear if status is ever actually set to 'blocked'. Investigate and remove if not.
+		status?: 'disabled' | 'blocked' | 'enabled';
+		variant?: 'primary' | 'secondary';
+	};
+	postButtonText?: TranslateResult;
+}
+
+export type UseAction = ( {
+	availableForPurchase,
+	billingPeriod,
+	cartItemForPlan,
+	currentPlanBillingPeriod,
+	isFreeTrialAction,
+	isLargeCurrency,
+	isStuck,
+	planSlug,
+	planTitle,
+	priceString,
+	selectedStorageAddOn,
+}: {
+	availableForPurchase?: boolean;
+	billingPeriod?: PlanPricing[ 'billPeriod' ];
+	cartItemForPlan?: MinimalRequestCartProduct | null;
+	currentPlanBillingPeriod?: PlanPricing[ 'billPeriod' ];
+	isFreeTrialAction?: boolean;
+	isLargeCurrency?: boolean;
+	isStuck?: boolean;
+	planSlug: PlanSlug;
+	planTitle?: TranslateResult;
+	priceString?: string;
+	selectedStorageAddOn?: AddOns.AddOnMeta | null;
+} ) => GridAction;
+
+export type GridContextProps = {
+	gridPlans: GridPlan[];
+	allFeaturesList: FeatureList;
+	intent?: PlansIntent;
+	siteId?: number | null;
+	useCheckPlanAvailabilityForPurchase: Plans.UseCheckPlanAvailabilityForPurchase;
+	useAction: UseAction;
+	recordTracksEvent?: ( eventName: string, eventProperties: Record< string, unknown > ) => void;
+	children: React.ReactNode;
+	coupon?: string;
+	enableFeatureTooltips?: boolean;
+	featureGroupMap: Partial< FeatureGroupMap >;
+	hideUnsupportedFeatures?: boolean;
+	enterpriseFeaturesList?: string[];
+
+	/**
+	 * `enableCategorisedFeatures` is no longer exact, and probably best to rename.
+	 * It is only used for showing "Everything in [previous] plus".
+	 */
+	enableCategorisedFeatures?: boolean;
+
+	/**
+	 * Display the plan storage limit as a badge like "50GB" or as plain text like "50GB storage"
+	 */
+	enableStorageAsBadge?: boolean;
+
+	/**
+	 * Reduce the vertical spacing between each feature group
+	 */
+	enableReducedFeatureGroupSpacing?: boolean;
+
+	/**
+	 * Display only the client logos for the enterprise plan
+	 */
+	enableLogosOnlyForEnterprisePlan?: boolean;
+
+	/**
+	 * Hide the titles for feature groups in the features grid
+	 */
+	hideFeatureGroupTitles?: boolean;
+
+	/**
+	 * Enable the display of the term savings in plan prices.
+	 * Prices will display crossed out with the savings from shorter term accentuated in a label.
+	 * This carries lower precedence than promo/coupon and introductory pricing, irrespective of whether set or not.
+	 */
+	enableTermSavingsPriceDisplay?: boolean;
+
+	/**
+	 * Determine if storage add-on products should be combined with plan costs when
+	 * calculating prices.
+	 */
+	reflectStorageSelectionInPlanPrices?: boolean;
+};
+
+export type ComparisonGridExternalProps = Omit<
+	GridContextProps,
+	'children' | 'enableCategorisedFeatures'
+> &
+	Omit< ComparisonGridProps, 'onUpgradeClick' | 'gridContainerRef' | 'gridSize' > & {
+		className?: string;
+		onUpgradeClick?: (
+			cartItems?: MinimalRequestCartProduct[] | null,
+			clickedPlanSlug?: PlanSlug
+		) => void;
+	};
+
+export type FeaturesGridExternalProps = Omit< GridContextProps, 'children' | 'featureGroupMap' > &
+	Omit<
+		FeaturesGridProps,
+		'onUpgradeClick' | 'isLargeCurrency' | 'translate' | 'gridContainerRef' | 'gridSize'
+	> & {
+		className?: string;
+		onUpgradeClick?: (
+			cartItems?: MinimalRequestCartProduct[] | null,
+			clickedPlanSlug?: PlanSlug
+		) => void;
+		featureGroupMap?: Partial< FeatureGroupMap >; // make it optional for Features Grid
+	};
+
+/************************
+ * PlanTypeSelector Types:
+ ************************/
+
+export type PlanTypeSelectorProps = {
+	kind: 'interval';
+	siteId?: number | null;
+	basePlansPath?: string | null;
+	intervalType: UrlFriendlyTermType;
+	customerType: string;
+	enableStickyBehavior?: boolean;
+	stickyPlanTypeSelectorOffset?: number;
+	onPlanIntervalUpdate: ( interval: SupportedUrlFriendlyTermType ) => void;
+	layoutClassName?: string;
+	siteSlug?: string | null;
+	selectedPlan?: string;
+	selectedFeature?: string;
+	showPlanTypeSelectorDropdown?: boolean; // feature flag used for the plan selector dropdown
+	isInSignup: boolean;
+	plans: PlanSlug[];
+	eligibleForWpcomMonthlyPlans?: boolean;
+	hideDiscount?: boolean;
+	redirectTo?: string | null;
+	isStepperUpgradeFlow: boolean;
+	currentSitePlanSlug?: PlanSlug | null;
+	useCheckPlanAvailabilityForPurchase: Plans.UseCheckPlanAvailabilityForPurchase;
+	recordTracksEvent?: ( eventName: string, eventProperties: Record< string, unknown > ) => void;
+	/**
+	 * Whether to render the selector along with a title if passed.
+	 */
+	title?: TranslateResult;
+	/**
+	 * Coupon code for use in pricing hook usage.
+	 */
+	coupon?: string;
+	displayedIntervals: UrlFriendlyTermType[];
+	intent?: PlansIntent | null;
+};
+
+export type IntervalTypeProps = Pick<
+	PlanTypeSelectorProps,
+	| 'intervalType'
+	| 'siteId'
+	| 'displayedIntervals'
+	| 'plans'
+	| 'isInSignup'
+	| 'eligibleForWpcomMonthlyPlans'
+	| 'hideDiscount'
+	| 'redirectTo'
+	| 'showPlanTypeSelectorDropdown'
+	| 'selectedPlan'
+	| 'selectedFeature'
+	| 'currentSitePlanSlug'
+	| 'useCheckPlanAvailabilityForPurchase'
+	| 'title'
+	| 'coupon'
+	| 'onPlanIntervalUpdate'
+	| 'intent'
+>;
+
+export type SupportedUrlFriendlyTermType = Extract<
+	UrlFriendlyTermType,
+	'yearly' | '2yearly' | '3yearly' | 'monthly'
+>;
+
+export type HiddenPlans = {
+	hideFreePlan?: boolean;
+	hidePersonalPlan?: boolean;
+	hidePremiumPlan?: boolean;
+	hideBusinessPlan?: boolean;
+	hideEcommercePlan?: boolean;
+	hideEnterprisePlan?: boolean;
+};