From 1dcf0363420f39bb5a27ed0666dca18fe8b65b1a Mon Sep 17 00:00:00 2001 From: Dehan Date: Fri, 24 Nov 2023 09:17:44 -0500 Subject: [PATCH] Refactor: Move action override related props to the relevant data structure (#83976) * Move action override related props to the relevent data structure * Switch overrides data structure * Fix callback button * Add a default case active plan --- client/my-sites/plans-features-main/index.tsx | 50 +++++++++++-------- .../plans-grid/components/actions.tsx | 32 ++++-------- .../components/comparison-grid/index.tsx | 18 ------- .../components/features-grid/index.tsx | 5 -- .../plans-grid/components/test/actions.tsx | 1 - client/my-sites/plans-grid/index.tsx | 20 +------- client/my-sites/plans-grid/types.ts | 6 ++- 7 files changed, 46 insertions(+), 86 deletions(-) diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx index c4d42620a39a4e..96bf57a2bbedf2 100644 --- 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 ) } /> 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 ( - ); @@ -306,15 +296,17 @@ const LoggedInPlansFeatureActionButton = ( { { translate( 'Upgrade' ) } ); + } else if ( planActionOverrides?.currentPlan ) { + const { callback, text } = planActionOverrides.currentPlan; + return ( + + ); } - return ( - ); } @@ -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 index ff266d7acf3570..dd9d0d7c2879ad 100644 --- 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 = ( { 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 } > { 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 index 6934c337a1508a..574be33b8cca32 100644 --- 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 index f9f9cff906ac77..cb77e49e7fe66f 100644 --- 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; }; }