Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plans: Add parameter to show only specific plans for the Jetpack app plan selection flow #77029

Merged
merged 10 commits into from
May 31, 2023
Merged

Plans: Add parameter to show only specific plans for the Jetpack app plan selection flow #77029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
886d47c
Show only personal and premium plans when jetpackAppPlans parameter i…
staskus May 17, 2023
0ffb9a8
Hide domain and plan package header from Plans when jetpackAppPlans p…
staskus May 17, 2023
a070609
Remember jetpackAppPlans parameter when toggling between Plan intervals
staskus May 17, 2023
a7e3f3c
Parse domainAndPlanPackage and jetpackAppPlans parameters to support …
staskus May 18, 2023
a3ea576
Merge branch 'trunk' into update/76968-different-plans-selection-for-…
staskus May 18, 2023
5d02efe
Handle parameters being null before parsing to Boolean
staskus May 18, 2023
23db848
Use explicit value comparison for query parameters
staskus May 30, 2023
9671427
Add a comment explaining filtering of premium and personal plans for …
staskus May 30, 2023
00ecf1d
Define domainAndPlanPackage prop as boolean
staskus May 30, 2023
7818de5
Merge branch 'trunk' into update/76968-different-plans-selection-for-…
staskus May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions client/my-sites/plans-features-main/components/plan-type-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,8 @@ export const IntervalTypeToggle: React.FunctionComponent< IntervalTypeProps > =
'domainAndPlanPackage'
);

const isJetpackAppFlow = new URLSearchParams( window.location.search ).get( 'jetpackAppPlans' );

const intervalTabs = showBiannualToggle ? [ 'yearly', '2yearly' ] : [ 'monthly', 'yearly' ];

return (
Expand All @@ -196,6 +198,7 @@ export const IntervalTypeToggle: React.FunctionComponent< IntervalTypeProps > =
intervalType: interval,
domain: isDomainUpsellFlow,
domainAndPlanPackage: isDomainAndPlanPackageFlow,
jetpackAppPlans: isJetpackAppFlow,
...additionalPathProps,
} ) }
isPlansInsideStepper={ props.isPlansInsideStepper }
Expand Down
3 changes: 2 additions & 1 deletion client/my-sites/plans/controller.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ export function plans( context, next ) {
? context.query.addDomainFlow === 'true'
: undefined
}
domainAndPlanPackage={ context.query.domainAndPlanPackage }
domainAndPlanPackage={ context.query.domainAndPlanPackage === 'true' }
jetpackAppPlans={ context.query.jetpackAppPlans === 'true' }
is2023PricingGridVisible={ is2023PricingGridActivePage( null, context.pathname ) }
/>
);
Expand Down
12 changes: 10 additions & 2 deletions client/my-sites/plans/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
PLAN_WOOEXPRESS_SMALL_MONTHLY,
PLAN_WOOEXPRESS_MEDIUM,
PLAN_WOOEXPRESS_MEDIUM_MONTHLY,
TYPE_PERSONAL,
TYPE_PREMIUM,
} from '@automattic/calypso-products';
import { is2023PricingGridActivePage } from '@automattic/calypso-products/src/plans-utilities';
import { WpcomPlansUI } from '@automattic/data-stores';
Expand Down Expand Up @@ -147,7 +149,7 @@ class Plans extends Component {
static propTypes = {
context: PropTypes.object.isRequired,
redirectToAddDomainFlow: PropTypes.bool,
domainAndPlanPackage: PropTypes.string,
domainAndPlanPackage: PropTypes.bool,
intervalType: PropTypes.string,
customerType: PropTypes.string,
selectedFeature: PropTypes.string,
Expand Down Expand Up @@ -258,6 +260,8 @@ class Plans extends Component {
}

const hideFreePlan = ! is2023PricingGridVisible || this.props.isDomainAndPlanPackageFlow;
// The Jetpack mobile app only wants to display two plans -- personal and premium
const planTypes = this.props.jetpackAppPlans ? [ TYPE_PERSONAL, TYPE_PREMIUM ] : null;
Copy link
Contributor

@jeyip jeyip May 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking / nitpick:

Spitballing here, but wondering if a small inline comment might be useful?

// The jetpack mobile app only wants to display two plans -- personal and premium

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think the more explicit we are in such cases the better so the comment would only increase the clarity by expressing intentions 👍


const hidePlanTypeSelector =
this.props.domainAndPlanPackage &&
Expand All @@ -279,6 +283,7 @@ class Plans extends Component {
plansWithScroll={ false }
hidePlansFeatureComparison={ this.props.isDomainAndPlanPackageFlow }
is2023PricingGridVisible={ is2023PricingGridVisible }
planTypes={ planTypes }
/>
);
}
Expand Down Expand Up @@ -349,6 +354,7 @@ class Plans extends Component {
isFreePlan,
currentPlanIntervalType,
domainFromHomeUpsellFlow,
jetpackAppPlans,
} = this.props;

if ( ! selectedSite || this.isInvalidPlanInterval() || ! currentPlan ) {
Expand Down Expand Up @@ -412,7 +418,9 @@ class Plans extends Component {
{ isDomainAndPlanPackageFlow && (
<>
<div className="plans__header">
<DomainAndPlanPackageNavigation goBackLink={ goBackLink } step={ 2 } />
{ ! jetpackAppPlans && (
<DomainAndPlanPackageNavigation goBackLink={ goBackLink } step={ 2 } />
) }

<FormattedHeader brandFont headerText={ headline } align="center" />

Expand Down