@automattic/plans-grid-next 1.0.1 → 1.0.2

package/src/components/features-grid/index.tsx

@@ -31,6 +31,7 @@ import type {
 	FeaturesGridExternalProps,
 	FeaturesGridProps,
 	GridPlan,
+	GridSize,
 	PlanActionOverrides,
 } from '../../types';
 
@@ -405,7 +406,7 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		// we want to fit 3 plans per row in this breakpoint
 		const mediumBreakpoint = isInSiteDashboard ? 667 : 741;
 
-		return new Map( [
+		return new Map< GridSize, number >( [
 			[ 'small', 0 ],
 			[ 'medium', mediumBreakpoint ],
 			[ 'large', largeBreakpoint ],

package/src/components/features-grid/style.scss

@@ -241,8 +241,10 @@
 	&.is-top-buttons {
 		padding: 0 20px;
 		@include plans-grid-medium-large {
-			padding-top: 16px;
-			padding-bottom: 16px;
+			button {
+				margin-top: 16px;
+				margin-bottom: 16px;
+			}
 		}
 	}
 

package/src/components/plan-button/style.scss

@@ -21,7 +21,7 @@
 			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-50);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-wordpress-blue-60);
 		}
 
@@ -34,7 +34,7 @@
 			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-60);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-wordpress-blue-70);
 		}
 	}
@@ -46,7 +46,7 @@
 			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-70);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-wordpress-blue-80);
 		}
 	}
@@ -58,7 +58,7 @@
 			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
 		}
 
-		&:hover {
+		&:hover:not([disabled]) {
 			background-color: var(--studio-woocommerce-purple-70);
 		}
 

package/src/components/shared/header-price/style.scss

@@ -1,3 +1,5 @@
+@import "@automattic/typography/styles/variables";
+
 .plans-grid-next-header-price {
 	padding: 0 20px;
 	margin: 0 0 4px 0;

package/src/hooks/data-store/use-plan-billing-period.tsx

@@ -0,0 +1,28 @@
+import {
+	TERMS_LIST,
+	TERM_ANNUALLY,
+	TERM_BIENNIALLY,
+	TERM_MONTHLY,
+	TERM_TRIENNIALLY,
+} from '@automattic/calypso-products';
+import { EFFECTIVE_TERMS_LIST } from '../../constants';
+import type { SupportedUrlFriendlyTermType } from '../../types';
+
+const usePlanBillingPeriod = ( {
+	intervalType,
+	defaultValue,
+}: {
+	intervalType: SupportedUrlFriendlyTermType;
+	defaultValue?: ( typeof TERMS_LIST )[ number ];
+} ) => {
+	const plans: Record< SupportedUrlFriendlyTermType, ( typeof EFFECTIVE_TERMS_LIST )[ number ] > = {
+		monthly: TERM_MONTHLY,
+		yearly: TERM_ANNUALLY,
+		'2yearly': TERM_BIENNIALLY,
+		'3yearly': TERM_TRIENNIALLY,
+	} as const;
+
+	return plans[ intervalType ] || defaultValue || TERM_ANNUALLY;
+};
+
+export default usePlanBillingPeriod;

package/src/hooks/use-grid-size.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
+import { GridSize } from '../types';
 
 interface Props {
 	containerRef: React.MutableRefObject< HTMLDivElement | null >;
@@ -8,7 +9,7 @@ interface Props {
 	 * but they could be used in the future in a containment context.
 	 * The keys are the labels, the values are the minimum widths.
 	 */
-	containerBreakpoints: Map< string, number >;
+	containerBreakpoints: Map< GridSize, number >;
 }
 
 /**
@@ -16,7 +17,7 @@ interface Props {
  * and the breakpoints passed through as props.
  */
 export default function useGridSize( { containerRef, containerBreakpoints }: Props ) {
-	const [ gridSize, setGridSize ] = useState< string | null >( null );
+	const [ gridSize, setGridSize ] = useState< GridSize | null >( null );
 
 	useLayoutEffect( () => {
 		if ( ! containerRef.current ) {

package/src/index.tsx

@@ -9,6 +9,7 @@ import useGridPlans, { usePlanTypesWithIntent } from './hooks/data-store/use-gri
 import useGridPlansForComparisonGrid from './hooks/data-store/use-grid-plans-for-comparison-grid';
 import useGridPlansForFeaturesGrid from './hooks/data-store/use-grid-plans-for-features-grid';
 import usePlanBillingDescription from './hooks/data-store/use-plan-billing-description';
+import usePlanBillingPeriod from './hooks/data-store/use-plan-billing-period';
 import usePlanFeaturesForGridPlans from './hooks/data-store/use-plan-features-for-grid-plans';
 import usePlansFromTypes from './hooks/data-store/use-plans-from-types';
 import useRestructuredPlanFeaturesForComparisonGrid from './hooks/data-store/use-restructured-plan-features-for-comparison-grid';
@@ -33,6 +34,7 @@ export {
 	useGridPlansForFeaturesGrid,
 	useGridPlansForComparisonGrid,
 	useGridPlanForSpotlight,
+	usePlanBillingPeriod,
 	usePlanBillingDescription,
 	usePlanFeaturesForGridPlans,
 	usePlansFromTypes,

package/src/types.ts

@@ -51,7 +51,7 @@ export interface GridPlan {
  * Grid Component Types:
  ***********************/
 
-export type GridSize = 'small' | 'medium' | 'large';
+export type GridSize = 'small' | 'smedium' | 'medium' | 'large' | 'xlarge';
 
 export type PlansIntent =
 	| 'plans-affiliate'
@@ -106,7 +106,7 @@ export interface CommonGridProps {
 	isInAdmin: boolean;
 	isInSiteDashboard: boolean;
 	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
-	currentSitePlanSlug?: string | null;
+	currentSitePlanSlug?: PlanSlug | 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.
@@ -117,7 +117,7 @@ export interface CommonGridProps {
 	// only used for comparison grid
 	planTypeSelectorProps?: PlanTypeSelectorProps;
 	gridContainerRef?: React.MutableRefObject< HTMLDivElement | null >;
-	gridSize?: string;
+	gridSize?: GridSize;
 }
 
 export interface FeaturesGridProps extends CommonGridProps {
@@ -134,7 +134,7 @@ export interface FeaturesGridProps extends CommonGridProps {
 export interface ComparisonGridProps extends CommonGridProps {
 	// Value of the `?plan=` query param, so we can highlight a given plan.
 	selectedPlan?: string;
-	intervalType: string;
+	intervalType: SupportedUrlFriendlyTermType;
 }
 
 export type UseActionCallback = ( {

package/dist/cjs/lib/sort-plan-properties.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortPlans = sortPlans;
-function sortPlans(gridPlans, currentSitePlanProductSlug) {
-    // If we don't have plans to sort, return empty array
-    if (!gridPlans.length) {
-        return [];
-    }
-    // If we have a current site plan and we're on mobile, sort to prioritize it
-    if (currentSitePlanProductSlug) {
-        return [...gridPlans].sort((planA, planB) => {
-            // If planA is the current plan, it should come first (-1 moves it up)
-            if (planA.planSlug === currentSitePlanProductSlug) {
-                return -1;
-            }
-            // If planB is the current plan, it should come first (1 moves planA down)
-            if (planB.planSlug === currentSitePlanProductSlug) {
-                return 1;
-            }
-            // Otherwise, maintain original order
-            return 0;
-        });
-    }
-    return [...gridPlans];
-}
-//# sourceMappingURL=sort-plan-properties.js.map

package/dist/cjs/lib/sort-plan-properties.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sort-plan-properties.js","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":";;AAEA,8BAwBC;AAxBD,SAAgB,SAAS,CACxB,SAAqB,EACrB,0BAA0C;IAE1C,qDAAqD;IACrD,IAAK,CAAE,SAAS,CAAC,MAAM,EAAG,CAAC;QAC1B,OAAO,EAAE,CAAC;IACX,CAAC;IACD,4EAA4E;IAC5E,IAAK,0BAA0B,EAAG,CAAC;QAClC,OAAO,CAAE,GAAG,SAAS,CAAE,CAAC,IAAI,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAChD,sEAAsE;YACtE,IAAK,KAAK,CAAC,QAAQ,KAAK,0BAA0B,EAAG,CAAC;gBACrD,OAAO,CAAC,CAAC,CAAC;YACX,CAAC;YACD,0EAA0E;YAC1E,IAAK,KAAK,CAAC,QAAQ,KAAK,0BAA0B,EAAG,CAAC;gBACrD,OAAO,CAAC,CAAC;YACV,CAAC;YACD,qCAAqC;YACrC,OAAO,CAAC,CAAC;QACV,CAAC,CAAE,CAAC;IACL,CAAC;IACD,OAAO,CAAE,GAAG,SAAS,CAAE,CAAC;AACzB,CAAC"}

package/dist/esm/lib/sort-plan-properties.js

@@ -1,23 +0,0 @@
-export function sortPlans(gridPlans, currentSitePlanProductSlug) {
-    // If we don't have plans to sort, return empty array
-    if (!gridPlans.length) {
-        return [];
-    }
-    // If we have a current site plan and we're on mobile, sort to prioritize it
-    if (currentSitePlanProductSlug) {
-        return [...gridPlans].sort((planA, planB) => {
-            // If planA is the current plan, it should come first (-1 moves it up)
-            if (planA.planSlug === currentSitePlanProductSlug) {
-                return -1;
-            }
-            // If planB is the current plan, it should come first (1 moves planA down)
-            if (planB.planSlug === currentSitePlanProductSlug) {
-                return 1;
-            }
-            // Otherwise, maintain original order
-            return 0;
-        });
-    }
-    return [...gridPlans];
-}
-//# sourceMappingURL=sort-plan-properties.js.map

package/dist/esm/lib/sort-plan-properties.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sort-plan-properties.js","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,SAAS,CACxB,SAAqB,EACrB,0BAA0C;IAE1C,qDAAqD;IACrD,IAAK,CAAE,SAAS,CAAC,MAAM,EAAG,CAAC;QAC1B,OAAO,EAAE,CAAC;IACX,CAAC;IACD,4EAA4E;IAC5E,IAAK,0BAA0B,EAAG,CAAC;QAClC,OAAO,CAAE,GAAG,SAAS,CAAE,CAAC,IAAI,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAChD,sEAAsE;YACtE,IAAK,KAAK,CAAC,QAAQ,KAAK,0BAA0B,EAAG,CAAC;gBACrD,OAAO,CAAC,CAAC,CAAC;YACX,CAAC;YACD,0EAA0E;YAC1E,IAAK,KAAK,CAAC,QAAQ,KAAK,0BAA0B,EAAG,CAAC;gBACrD,OAAO,CAAC,CAAC;YACV,CAAC;YACD,qCAAqC;YACrC,OAAO,CAAC,CAAC;QACV,CAAC,CAAE,CAAC;IACL,CAAC;IACD,OAAO,CAAE,GAAG,SAAS,CAAE,CAAC;AACzB,CAAC"}

package/dist/types/lib/sort-plan-properties.d.ts

@@ -1,3 +0,0 @@
-import type { GridPlan } from '../types';
-export declare function sortPlans(gridPlans: GridPlan[], currentSitePlanProductSlug?: string | null): GridPlan[];
-//# sourceMappingURL=sort-plan-properties.d.ts.map

package/dist/types/lib/sort-plan-properties.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sort-plan-properties.d.ts","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,wBAAgB,SAAS,CACxB,SAAS,EAAE,QAAQ,EAAE,EACrB,0BAA0B,CAAC,EAAE,MAAM,GAAG,IAAI,GACxC,QAAQ,EAAE,CAqBZ"}

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

@@ -1,27 +0,0 @@
-import type { GridPlan } from '../types';
-
-export function sortPlans(
-	gridPlans: GridPlan[],
-	currentSitePlanProductSlug?: string | null
-): GridPlan[] {
-	// If we don't have plans to sort, return empty array
-	if ( ! gridPlans.length ) {
-		return [];
-	}
-	// If we have a current site plan and we're on mobile, sort to prioritize it
-	if ( currentSitePlanProductSlug ) {
-		return [ ...gridPlans ].sort( ( planA, planB ) => {
-			// If planA is the current plan, it should come first (-1 moves it up)
-			if ( planA.planSlug === currentSitePlanProductSlug ) {
-				return -1;
-			}
-			// If planB is the current plan, it should come first (1 moves planA down)
-			if ( planB.planSlug === currentSitePlanProductSlug ) {
-				return 1;
-			}
-			// Otherwise, maintain original order
-			return 0;
-		} );
-	}
-	return [ ...gridPlans ];
-}

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

@@ -1,122 +0,0 @@
-/**
- * @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 return an empty array if no plans are provided', () => {
-		expect( sortPlans( [] ) ).toEqual( [] );
-	} );
-
-	it( 'should return the original order if no current plan is specified', () => {
-		expect( sortPlans( plansInDefaultOrder ) ).toEqual( plansInDefaultOrder );
-	} );
-
-	it( 'should return the original order if current plan is null', () => {
-		expect( sortPlans( plansInDefaultOrder, null ) ).toEqual( plansInDefaultOrder );
-	} );
-
-	it( 'should return the original order if current plan is undefined', () => {
-		expect( sortPlans( plansInDefaultOrder, undefined ) ).toEqual( plansInDefaultOrder );
-	} );
-
-	it( 'should return the original order if current plan is not found in the plans array', () => {
-		expect( sortPlans( plansInDefaultOrder, 'non-existent-plan' ) ).toEqual( plansInDefaultOrder );
-	} );
-
-	it( 'should prioritize the current plan when specified', () => {
-		// When personal plan is current
-		expect( sortPlans( plansInDefaultOrder, 'personal-bundle' ) ).toEqual( [
-			planPersonal,
-			planFree,
-			planPremium,
-			planBusiness,
-			planEcommerce,
-		] );
-
-		// When premium plan is current
-		expect( sortPlans( plansInDefaultOrder, 'value_bundle' ) ).toEqual( [
-			planPremium,
-			planFree,
-			planPersonal,
-			planBusiness,
-			planEcommerce,
-		] );
-
-		// When business plan is current
-		expect( sortPlans( plansInDefaultOrder, 'business-bundle' ) ).toEqual( [
-			planBusiness,
-			planFree,
-			planPersonal,
-			planPremium,
-			planEcommerce,
-		] );
-
-		// When ecommerce plan is current
-		expect( sortPlans( plansInDefaultOrder, 'ecommerce-bundle' ) ).toEqual( [
-			planEcommerce,
-			planFree,
-			planPersonal,
-			planPremium,
-			planBusiness,
-		] );
-
-		// When free plan is current
-		expect( sortPlans( plansInDefaultOrder, 'free_plan' ) ).toEqual( [
-			planFree,
-			planPersonal,
-			planPremium,
-			planBusiness,
-			planEcommerce,
-		] );
-	} );
-
-	it( 'should work with a single plan', () => {
-		const singlePlan = [ planFree ];
-		expect( sortPlans( singlePlan, 'free_plan' ) ).toEqual( [ planFree ] );
-	} );
-
-	it( 'should preserve the original array', () => {
-		const originalArray = [ ...plansInDefaultOrder ];
-		sortPlans( plansInDefaultOrder, 'personal-bundle' );
-		expect( plansInDefaultOrder ).toEqual( originalArray );
-	} );
-} );