Refactor: Move action override related props to the relevant data str…

…ucture (#83976) * Move action override related props to the relevent data structure * Switch overrides data structure * Fix callback button * Add a default case active plan
Automattic · Dec 11, 2023 · 1dcf036 · 1dcf036
1 parent 8159302
commit 1dcf036
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 86 deletions.
diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx
@@ -552,25 +552,34 @@ const PlansFeaturesMain = ( {
 			};
 		}
 
-		if ( sitePlanSlug && isFreePlan( sitePlanSlug ) && intentFromProps !== 'plans-p2' ) {
-			actionOverrides = {
-				loggedInFreePlan: {
-					status:
-						isPlanUpsellEnabledOnFreeDomain.isLoading || resolvedSubdomainName.isLoading
-							? 'blocked'
-							: 'enabled',
-					callback: () => {
-						page.redirect( `/add-ons/${ siteSlug }` );
+		if ( sitePlanSlug && intentFromProps !== 'plans-p2' ) {
+			if ( isFreePlan( sitePlanSlug ) ) {
+				actionOverrides = {
+					loggedInFreePlan: {
+						status:
+							isPlanUpsellEnabledOnFreeDomain.isLoading || resolvedSubdomainName.isLoading
+								? 'blocked'
+								: 'enabled',
+						callback: () => {
+							page.redirect( `/add-ons/${ siteSlug }` );
+						},
+						text: translate( 'Manage add-ons', { context: 'verb' } ),
 					},
-					text: translate( 'Manage add-ons', { context: 'verb' } ),
-				},
-			};
+				};
 
-			if ( domainFromHomeUpsellFlow ) {
-				actionOverrides.loggedInFreePlan = {
-					...actionOverrides.loggedInFreePlan,
-					callback: showDomainUpsellDialog,
-					text: translate( 'Keep my plan', { context: 'verb' } ),
+				if ( domainFromHomeUpsellFlow ) {
+					actionOverrides.loggedInFreePlan = {
+						...actionOverrides.loggedInFreePlan,
+						callback: showDomainUpsellDialog,
+						text: translate( 'Keep my plan', { context: 'verb' } ),
+					};
+				}
+			} else {
+				actionOverrides = {
+					currentPlan: {
+						text: canUserManageCurrentPlan ? translate( 'Manage plan' ) : translate( 'View plan' ),
+						callback: () => page( currentPlanManageHref ),
+					},
 				};
 			}
 		}
@@ -579,12 +588,15 @@ const PlansFeaturesMain = ( {
 	}, [
 		isInSignup,
 		sitePlanSlug,
+		intentFromProps,
 		isPlanUpsellEnabledOnFreeDomain.isLoading,
 		resolvedSubdomainName.isLoading,
 		translate,
 		domainFromHomeUpsellFlow,
 		siteSlug,
 		showDomainUpsellDialog,
+		canUserManageCurrentPlan,
+		currentPlanManageHref,
 	] );
 
 	/**
@@ -812,8 +824,6 @@ const PlansFeaturesMain = ( {
 									usePricingMetaForGridPlans={ usePricingMetaForGridPlans }
 									allFeaturesList={ FEATURES_LIST }
 									onStorageAddOnClick={ handleStorageAddOnClick }
-									currentPlanManageHref={ currentPlanManageHref }
-									canUserManageCurrentPlan={ canUserManageCurrentPlan }
 									showRefundPeriod={ isAnyHostingFlow( flowName ) }
 								/>
 								{ showEscapeHatch && hidePlansFeatureComparison && (
@@ -875,8 +885,6 @@ const PlansFeaturesMain = ( {
 												usePricingMetaForGridPlans={ usePricingMetaForGridPlans }
 												allFeaturesList={ FEATURES_LIST }
 												onStorageAddOnClick={ handleStorageAddOnClick }
-												currentPlanManageHref={ currentPlanManageHref }
-												canUserManageCurrentPlan={ canUserManageCurrentPlan }
 												showRefundPeriod={ isAnyHostingFlow( flowName ) }
 											/>
 											<ComparisonGridToggle

diff --git a/client/my-sites/plans-grid/components/actions.tsx b/client/my-sites/plans-grid/components/actions.tsx
@@ -31,11 +31,9 @@ import type { PlanActionOverrides } from '../types';
 
 type PlanFeaturesActionsButtonProps = {
 	availableForPurchase: boolean;
-	canUserManageCurrentPlan?: boolean | null;
 	className: string;
 	currentSitePlanSlug?: string | null;
 	freePlan: boolean;
-	currentPlanManageHref?: string;
 	isPopular?: boolean;
 	isInSignup?: boolean;
 	isLaunchPage?: boolean | null;
@@ -217,8 +215,6 @@ const LoggedInPlansFeatureActionButton = ( {
 	planTitle,
 	handleUpgradeButtonClick,
 	planSlug,
-	currentPlanManageHref,
-	canUserManageCurrentPlan,
 	currentSitePlanSlug,
 	buttonText,
 	planActionOverrides,
@@ -234,8 +230,6 @@ const LoggedInPlansFeatureActionButton = ( {
 	planTitle: TranslateResult;
 	handleUpgradeButtonClick: () => void;
 	planSlug: PlanSlug;
-	currentPlanManageHref?: string;
-	canUserManageCurrentPlan?: boolean | null;
 	currentSitePlanSlug?: string | null;
 	buttonText?: string;
 	planActionOverrides?: PlanActionOverrides;
@@ -275,11 +269,7 @@ const LoggedInPlansFeatureActionButton = ( {
 	) {
 		if ( planActionOverrides?.loggedInFreePlan ) {
 			return (
-				<Button
-					className={ classes }
-					onClick={ planActionOverrides.loggedInFreePlan.callback }
-					disabled={ ! currentPlanManageHref } // not sure why this is here
-				>
+				<Button className={ classes } onClick={ planActionOverrides.loggedInFreePlan.callback }>
 					{ planActionOverrides.loggedInFreePlan.text }
 				</Button>
 			);
@@ -306,15 +296,17 @@ const LoggedInPlansFeatureActionButton = ( {
 					{ translate( 'Upgrade' ) }
 				</Button>
 			);
+		} else if ( planActionOverrides?.currentPlan ) {
+			const { callback, text } = planActionOverrides.currentPlan;
+			return (
+				<Button className={ classes } disabled={ ! callback } onClick={ callback }>
+					{ text }
+				</Button>
+			);
 		}
-
 		return (
-			<Button
-				className={ classes }
-				href={ currentPlanManageHref }
-				disabled={ ! currentPlanManageHref }
-			>
-				{ canUserManageCurrentPlan ? translate( 'Manage plan' ) : translate( 'View plan' ) }
+			<Button className={ classes } disabled>
+				{ translate( 'Active Plan' ) }
 			</Button>
 		);
 	}
@@ -432,11 +424,9 @@ const LoggedInPlansFeatureActionButton = ( {
 
 const PlanFeaturesActionsButton: React.FC< PlanFeaturesActionsButtonProps > = ( {
 	availableForPurchase = true,
-	canUserManageCurrentPlan,
 	className,
 	currentSitePlanSlug,
 	freePlan = false,
-	currentPlanManageHref,
 	isInSignup,
 	isLaunchPage,
 	onUpgradeClick,
@@ -566,8 +556,6 @@ const PlanFeaturesActionsButton: React.FC< PlanFeaturesActionsButtonProps > = (
 			availableForPurchase={ availableForPurchase }
 			classes={ classes }
 			handleUpgradeButtonClick={ handleUpgradeButtonClick }
-			currentPlanManageHref={ currentPlanManageHref }
-			canUserManageCurrentPlan={ canUserManageCurrentPlan }
 			currentSitePlanSlug={ currentSitePlanSlug }
 			buttonText={ buttonText }
 			planActionOverrides={ planActionOverrides }

diff --git a/client/my-sites/plans-grid/components/comparison-grid/index.tsx b/client/my-sites/plans-grid/components/comparison-grid/index.tsx
@@ -328,8 +328,6 @@ type ComparisonGridProps = {
 	isLaunchPage?: boolean | null;
 	flowName?: string | null;
 	currentSitePlanSlug?: string | null;
-	currentPlanManageHref?: string;
-	canUserManageCurrentPlan?: boolean | null;
 	onUpgradeClick: ( planSlug: PlanSlug ) => void;
 	siteId?: number | null;
 	planActionOverrides?: PlanActionOverrides;
@@ -351,8 +349,6 @@ type ComparisonGridHeaderProps = {
 	flowName?: string | null;
 	onPlanChange: ( currentPlan: PlanSlug, event: ChangeEvent< HTMLSelectElement > ) => void;
 	currentSitePlanSlug?: string | null;
-	currentPlanManageHref?: string;
-	canUserManageCurrentPlan?: boolean | null;
 	onUpgradeClick: ( planSlug: PlanSlug ) => void;
 	siteId?: number | null;
 	planActionOverrides?: PlanActionOverrides;
@@ -385,8 +381,6 @@ const ComparisonGridHeaderCell = ( {
 	onPlanChange,
 	displayedGridPlans,
 	currentSitePlanSlug,
-	currentPlanManageHref,
-	canUserManageCurrentPlan,
 	isLaunchPage,
 	flowName,
 	isLargeCurrency,
@@ -477,8 +471,6 @@ const ComparisonGridHeaderCell = ( {
 			</div>
 			<PlanFeatures2023GridActions
 				currentSitePlanSlug={ currentSitePlanSlug }
-				currentPlanManageHref={ currentPlanManageHref }
-				canUserManageCurrentPlan={ canUserManageCurrentPlan }
 				availableForPurchase={ gridPlan.availableForPurchase }
 				className={ getPlanClass( planSlug ) }
 				freePlan={ isFreePlan( planSlug ) }
@@ -507,8 +499,6 @@ const ComparisonGridHeader = forwardRef< HTMLDivElement, ComparisonGridHeaderPro
 			isFooter,
 			onPlanChange,
 			currentSitePlanSlug,
-			currentPlanManageHref,
-			canUserManageCurrentPlan,
 			onUpgradeClick,
 			siteId,
 			planActionOverrides,
@@ -551,8 +541,6 @@ const ComparisonGridHeader = forwardRef< HTMLDivElement, ComparisonGridHeaderPro
 						onPlanChange={ onPlanChange }
 						displayedGridPlans={ displayedGridPlans }
 						currentSitePlanSlug={ currentSitePlanSlug }
-						currentPlanManageHref={ currentPlanManageHref }
-						canUserManageCurrentPlan={ canUserManageCurrentPlan }
 						flowName={ flowName }
 						onUpgradeClick={ onUpgradeClick }
 						isLaunchPage={ isLaunchPage }
@@ -966,8 +954,6 @@ const ComparisonGrid = ( {
 	isLaunchPage,
 	flowName,
 	currentSitePlanSlug,
-	currentPlanManageHref,
-	canUserManageCurrentPlan,
 	onUpgradeClick,
 	siteId,
 	planActionOverrides,
@@ -1118,8 +1104,6 @@ const ComparisonGrid = ( {
 							flowName={ flowName }
 							onPlanChange={ onPlanChange }
 							currentSitePlanSlug={ currentSitePlanSlug }
-							currentPlanManageHref={ currentPlanManageHref }
-							canUserManageCurrentPlan={ canUserManageCurrentPlan }
 							onUpgradeClick={ onUpgradeClick }
 							planActionOverrides={ planActionOverrides }
 							selectedPlan={ selectedPlan }
@@ -1152,8 +1136,6 @@ const ComparisonGrid = ( {
 					isFooter={ true }
 					onPlanChange={ onPlanChange }
 					currentSitePlanSlug={ currentSitePlanSlug }
-					currentPlanManageHref={ currentPlanManageHref }
-					canUserManageCurrentPlan={ canUserManageCurrentPlan }
 					onUpgradeClick={ onUpgradeClick }
 					siteId={ siteId }
 					planActionOverrides={ planActionOverrides }

diff --git a/client/my-sites/plans-grid/components/features-grid/index.tsx b/client/my-sites/plans-grid/components/features-grid/index.tsx
@@ -47,7 +47,6 @@ type PlanRowOptions = {
 interface FeaturesGridType extends PlansGridProps {
 	isLargeCurrency: boolean;
 	translate: LocalizeProps[ 'translate' ];
-	canUserManageCurrentPlan?: boolean | null;
 	currentPlanManageHref?: string;
 	isPlanUpgradeCreditEligible: boolean;
 	handleUpgradeClick: ( planSlug: PlanSlug ) => void;
@@ -359,8 +358,6 @@ class FeaturesGrid extends Component< FeaturesGridType > {
 			isInSignup,
 			isLaunchPage,
 			flowName,
-			canUserManageCurrentPlan,
-			currentPlanManageHref,
 			currentSitePlanSlug,
 			translate,
 			planActionOverrides,
@@ -397,8 +394,6 @@ class FeaturesGrid extends Component< FeaturesGridType > {
 						isTableCell={ options?.isTableCell }
 					>
 						<PlanFeatures2023GridActions
-							currentPlanManageHref={ currentPlanManageHref }
-							canUserManageCurrentPlan={ canUserManageCurrentPlan }
 							availableForPurchase={ availableForPurchase }
 							className={ getPlanClass( planSlug ) }
 							freePlan={ isFreePlan( planSlug ) }

diff --git a/client/my-sites/plans-grid/components/test/actions.tsx b/client/my-sites/plans-grid/components/test/actions.tsx
@@ -68,7 +68,6 @@ describe( 'PlanFeatures2023GridActions', () => {
 		const contactSupport = 'Contact support';
 		const defaultProps = {
 			availableForPurchase: true,
-			canUserManageCurrentPlan: true,
 			className: '',
 			current: false,
 			freePlan: false,

diff --git a/client/my-sites/plans-grid/index.tsx b/client/my-sites/plans-grid/index.tsx
@@ -56,8 +56,6 @@ export interface PlansGridProps {
 	showUpgradeableStorage: boolean; // feature flag used to show the storage add-on dropdown
 	stickyRowOffset: number;
 	usePricingMetaForGridPlans: UsePricingMetaForGridPlans;
-	currentPlanManageHref?: string;
-	canUserManageCurrentPlan?: boolean | null;
 	showRefundPeriod?: boolean;
 }
 
@@ -78,8 +76,6 @@ const WrappedComparisonGrid = ( {
 	showLegacyStorageFeature,
 	showUpgradeableStorage,
 	onStorageAddOnClick,
-	currentPlanManageHref,
-	canUserManageCurrentPlan,
 	stickyRowOffset,
 	...otherProps
 }: PlansGridProps ) => {
@@ -101,8 +97,6 @@ const WrappedComparisonGrid = ( {
 				isLaunchPage={ isLaunchPage }
 				flowName={ flowName }
 				currentSitePlanSlug={ currentSitePlanSlug }
-				currentPlanManageHref={ currentPlanManageHref }
-				canUserManageCurrentPlan={ canUserManageCurrentPlan }
 				onUpgradeClick={ handleUpgradeClick }
 				siteId={ siteId }
 				selectedPlan={ selectedPlan }
@@ -118,16 +112,8 @@ const WrappedComparisonGrid = ( {
 };
 
 const WrappedFeaturesGrid = ( props: PlansGridProps ) => {
-	const {
-		siteId,
-		intent,
-		gridPlans,
-		usePricingMetaForGridPlans,
-		allFeaturesList,
-		onUpgradeClick,
-		currentPlanManageHref,
-		canUserManageCurrentPlan,
-	} = props;
+	const { siteId, intent, gridPlans, usePricingMetaForGridPlans, allFeaturesList, onUpgradeClick } =
+		props;
 	const translate = useTranslate();
 	const isPlanUpgradeCreditEligible = useIsPlanUpgradeCreditVisible(
 		siteId,
@@ -157,8 +143,6 @@ const WrappedFeaturesGrid = ( props: PlansGridProps ) => {
 				{ ...props }
 				isPlanUpgradeCreditEligible={ isPlanUpgradeCreditEligible }
 				isLargeCurrency={ isLargeCurrency }
-				canUserManageCurrentPlan={ canUserManageCurrentPlan }
-				currentPlanManageHref={ currentPlanManageHref }
 				translate={ translate }
 				handleUpgradeClick={ handleUpgradeClick }
 			/>

diff --git a/client/my-sites/plans-grid/types.ts b/client/my-sites/plans-grid/types.ts
@@ -9,9 +9,13 @@ export type TransformedFeatureObject = FeatureObject & {
 
 export interface PlanActionOverrides {
 	loggedInFreePlan?: {
-		callback?: () => void;
 		text?: TranslateResult;
 		status?: 'blocked' | 'enabled';
+		callback?: () => void;
+	};
+	currentPlan?: {
+		text?: TranslateResult;
+		callback?: () => void;
 	};
 }