Improves new upgrade flow UI/UX

- Makes plan parameter explicit in upgrade calls
- Consolidates plan comparison logic
- Improves account chip UI for upgrade options
- Adds plan parameter to subscription upgrade commands

Author: eamodio

docs/telemetry-events.md

@@ -1484,7 +1484,7 @@ void
   'repoPrivacy': 'private' | 'public' | 'local',
   'repository.visibility': 'private' | 'public' | 'local',
   // Provided for compatibility with other GK surfaces
-  'source': 'account' | 'subscription' | 'graph' | 'patchDetails' | 'settings' | 'timeline' | 'home' | 'view' | 'code-suggest' | 'ai' | 'ai:picker' | 'associateIssueWithBranch' | 'cloud-patches' | 'commandPalette' | 'deeplink' | 'inspect' | 'inspect-overview' | 'integrations' | 'launchpad' | 'launchpad-indicator' | 'launchpad-view' | 'merge-target' | 'notification' | 'prompt' | 'quick-wizard' | 'remoteProvider' | 'startWork' | 'trial-indicator' | 'scm-input' | 'walkthrough' | 'whatsnew' | 'worktrees'
+  'source': 'account' | 'subscription' | 'graph' | 'patchDetails' | 'settings' | 'timeline' | 'home' | 'view' | 'code-suggest' | 'ai' | 'ai:picker' | 'associateIssueWithBranch' | 'cloud-patches' | 'commandPalette' | 'deeplink' | 'feature-badge' | 'feature-gate' | 'inspect' | 'inspect-overview' | 'integrations' | 'launchpad' | 'launchpad-indicator' | 'launchpad-view' | 'merge-target' | 'notification' | 'prompt' | 'quick-wizard' | 'remoteProvider' | 'startWork' | 'trial-indicator' | 'scm-input' | 'walkthrough' | 'whatsnew' | 'worktrees'
 }
 ```
 

src/commands/quickWizard.base.ts

@@ -1,6 +1,7 @@
 import type { Disposable, InputBox, QuickInputButton, QuickPick, QuickPickItem } from 'vscode';
 import { InputBoxValidationSeverity, QuickInputButtons, window } from 'vscode';
 import type { GlCommands } from '../constants.commands';
+import { SubscriptionPlanId } from '../constants.subscription';
 import { Container } from '../container';
 import { Directive, isDirective, isDirectiveQuickPickItem } from '../quickpicks/items/directive';
 import { configuration } from '../system/-webview/configuration';
@@ -746,7 +747,7 @@ export abstract class QuickWizardCommandBase extends GlCommandBase {
 									}
 
 									case Directive.RequiresPaidSubscription:
-										void Container.instance.subscription.upgrade({
+										void Container.instance.subscription.upgrade(SubscriptionPlanId.Pro, {
 											source: 'quick-wizard',
 											detail: {
 												action: rootStep.command?.key,

src/commands/walkthroughs.ts

@@ -3,6 +3,7 @@ import { urls } from '../constants';
 import type { GlCommands } from '../constants.commands';
 import type { Source, Sources } from '../constants.telemetry';
 import type { Container } from '../container';
+import type { SubscriptionUpgradeCommandArgs } from '../plus/gk/models/subscription';
 import type { LaunchpadCommandArgs } from '../plus/launchpad/launchpad';
 import { command, executeCommand } from '../system/-webview/command';
 import { openUrl, openWalkthrough as openWalkthroughCore } from '../system/-webview/vscode';
@@ -80,7 +81,7 @@ export class WalkthroughPlusUpgradeCommand extends GlCommandBase {
 			name: 'plus/upgrade',
 			command: command,
 		});
-		executeCommand<Source>(command, { source: 'walkthrough' });
+		executeCommand<SubscriptionUpgradeCommandArgs>(command, { source: 'walkthrough' });
 	}
 }
 

src/constants.telemetry.ts

@@ -934,6 +934,8 @@ export type Sources =
 	| 'cloud-patches'
 	| 'commandPalette'
 	| 'deeplink'
+	| 'feature-badge'
+	| 'feature-gate'
 	| 'graph'
 	| 'home'
 	| 'inspect'

src/plus/gk/models/subscription.ts

@@ -1,4 +1,5 @@
 import type { SubscriptionPlanId, SubscriptionState } from '../../../constants.subscription';
+import type { Source } from '../../../constants.telemetry';
 import type { Organization } from './organization';
 
 export type FreeSubscriptionPlans = Extract<
@@ -50,3 +51,7 @@ export interface SubscriptionPreviewTrial {
 	readonly startedOn: string;
 	readonly expiresOn: string;
 }
+
+export interface SubscriptionUpgradeCommandArgs extends Source {
+	plan?: SubscriptionPlanId;
+}

src/plus/gk/subscriptionService.ts

@@ -71,19 +71,20 @@ import { authenticationProviderScopes } from './authenticationProvider';
 import type { GKCheckInResponse } from './models/checkin';
 import type { Organization } from './models/organization';
 import type { Promo } from './models/promo';
-import type { Subscription } from './models/subscription';
+import type { Subscription, SubscriptionUpgradeCommandArgs } from './models/subscription';
 import type { ServerConnection } from './serverConnection';
 import { ensurePlusFeaturesEnabled } from './utils/-webview/plus.utils';
 import { getConfiguredActiveOrganizationId, updateActiveOrganizationId } from './utils/-webview/subscription.utils';
 import { getSubscriptionFromCheckIn } from './utils/checkin.utils';
 import {
 	assertSubscriptionState,
+	compareSubscriptionPlans,
 	computeSubscriptionState,
 	getCommunitySubscription,
 	getPreviewSubscription,
 	getSubscriptionPlan,
 	getSubscriptionPlanName,
-	getSubscriptionPlanPriority,
+	getSubscriptionPlanTierType,
 	getSubscriptionStateString,
 	getSubscriptionTimeRemaining,
 	getTimeRemaining,
@@ -357,11 +358,8 @@ export class SubscriptionService implements Disposable {
 			registerCommand('gitlens.plus.startPreviewTrial', (src?: Source) => this.startPreviewTrial(src)),
 			registerCommand('gitlens.plus.reactivateProTrial', (src?: Source) => this.reactivateProTrial(src)),
 			registerCommand('gitlens.plus.resendVerification', (src?: Source) => this.resendVerification(src)),
-			registerCommand('gitlens.plus.upgrade', (srcAndPlan?: Source & { plan?: SubscriptionPlanId }) =>
-				this.upgrade(
-					srcAndPlan ? { source: srcAndPlan.source, detail: srcAndPlan.detail } : undefined,
-					srcAndPlan?.plan,
-				),
+			registerCommand('gitlens.plus.upgrade', (args?: SubscriptionUpgradeCommandArgs) =>
+				this.upgrade(args?.plan, args ? { source: args.source, detail: args.detail } : undefined),
 			),
 
 			registerCommand('gitlens.plus.hide', (src?: Source) => this.setProFeaturesVisibility(false, src)),
@@ -548,7 +546,7 @@ export class SubscriptionService implements Disposable {
 			);
 
 			if (result === upgrade) {
-				void this.upgrade(source);
+				void this.upgrade(SubscriptionPlanId.Pro, source);
 			} else if (result === learn) {
 				void this.learnAboutPro({ source: 'prompt', detail: { action: 'trial-ended' } }, source);
 			}
@@ -657,9 +655,10 @@ export class SubscriptionService implements Disposable {
 	@gate(() => '')
 	@log()
 	async reactivateProTrial(source: Source | undefined): Promise<void> {
-		if (!(await ensurePlusFeaturesEnabled())) return;
 		const scope = getLogScope();
 
+		if (!(await ensurePlusFeaturesEnabled())) return;
+
 		if (this.container.telemetry.enabled) {
 			this.container.telemetry.sendEvent('subscription/action', { action: 'reactivate' }, source);
 		}
@@ -892,11 +891,13 @@ export class SubscriptionService implements Disposable {
 	}
 
 	@log()
-	async upgrade(source: Source | undefined, plan?: SubscriptionPlanId): Promise<boolean> {
+	async upgrade(plan: SubscriptionPlanId | undefined, source: Source | undefined): Promise<boolean> {
 		const scope = getLogScope();
 
 		if (!(await ensurePlusFeaturesEnabled())) return false;
 
+		plan ??= SubscriptionPlanId.Pro;
+
 		let aborted = false;
 		const promo = await this.container.productConfig.getApplicablePromo(this._subscription.state);
 
@@ -920,14 +921,13 @@ export class SubscriptionService implements Disposable {
 
 		const hasAccount = this._subscription.account != null;
 		if (hasAccount) {
-			// Do a pre-check-in to see if we've already upgraded to a paid plan.
+			// Do a pre-check-in to see if we've already upgraded to a paid plan
 			try {
 				const session = await this.ensureSession(false, source);
 				if (session != null) {
 					if (
 						(await this.checkUpdatedSubscription(source)) === SubscriptionState.Paid &&
-						getSubscriptionPlanPriority(this._subscription.plan.effective.id) >=
-							getSubscriptionPlanPriority(plan ?? SubscriptionPlanId.Pro)
+						compareSubscriptionPlans(this._subscription.plan.effective.id, plan) >= 0
 					) {
 						return true;
 					}
@@ -938,20 +938,7 @@ export class SubscriptionService implements Disposable {
 		const query = new URLSearchParams();
 		query.set('source', 'gitlens');
 		query.set('product', 'gitlens');
-
-		let planType = 'PRO';
-		switch (plan) {
-			case SubscriptionPlanId.Advanced:
-				planType = 'ADVANCED';
-				break;
-			case SubscriptionPlanId.Teams:
-				planType = 'TEAMS';
-				break;
-			case SubscriptionPlanId.Enterprise:
-				planType = 'ENTERPRISE';
-				break;
-		}
-		query.set('planType', planType);
+		query.set('planType', getSubscriptionPlanTierType(plan));
 
 		if (promo?.code != null) {
 			query.set('promoCode', promo.code);

src/plus/gk/utils/-webview/acount.utils.ts

@@ -1,5 +1,6 @@
 import type { Uri } from 'vscode';
 import { window } from 'vscode';
+import { SubscriptionPlanId } from '../../../../constants.subscription';
 import type { Source } from '../../../../constants.telemetry';
 import type { Container } from '../../../../container';
 import type { PlusFeatures } from '../../../../features';
@@ -142,7 +143,7 @@ export async function ensureFeatureAccess(
 		);
 
 		if (result === upgrade) {
-			if (await container.subscription.upgrade(source)) {
+			if (await container.subscription.upgrade(SubscriptionPlanId.Pro, source)) {
 				continue;
 			}
 		}

src/plus/gk/utils/-webview/plus.utils.ts

@@ -1,6 +1,6 @@
 import type { MessageItem } from 'vscode';
 import { window } from 'vscode';
-import { proTrialLengthInDays } from '../../../../constants.subscription';
+import { proTrialLengthInDays, SubscriptionPlanId } from '../../../../constants.subscription';
 import type { Source } from '../../../../constants.telemetry';
 import type { Container } from '../../../../container';
 import { configuration } from '../../../../system/-webview/configuration';
@@ -28,6 +28,7 @@ export async function ensurePlusFeaturesEnabled(): Promise<boolean> {
 	await configuration.updateEffective('plusFeatures.enabled', true);
 	return true;
 }
+
 export async function ensurePaidPlan(
 	container: Container,
 	title: string,
@@ -100,7 +101,7 @@ export async function ensurePaidPlan(
 			);
 
 			if (result === upgrade) {
-				void container.subscription.upgrade(source);
+				void container.subscription.upgrade(SubscriptionPlanId.Pro, source);
 			}
 		}
 

src/plus/gk/utils/checkin.utils.ts

@@ -2,7 +2,7 @@ import { SubscriptionPlanId } from '../../../constants.subscription';
 import type { GKCheckInResponse, GKLicense, GKLicenseType } from '../models/checkin';
 import type { Organization } from '../models/organization';
 import type { Subscription } from '../models/subscription';
-import { getSubscriptionPlan, getSubscriptionPlanPriority } from './subscription.utils';
+import { compareSubscriptionPlans, getSubscriptionPlan, getSubscriptionPlanPriority } from './subscription.utils';
 
 export function getSubscriptionFromCheckIn(
 	data: GKCheckInResponse,
@@ -129,7 +129,7 @@ export function getSubscriptionFromCheckIn(
 		);
 	}
 
-	if (effective == null || getSubscriptionPlanPriority(actual.id) >= getSubscriptionPlanPriority(effective.id)) {
+	if (effective == null || compareSubscriptionPlans(actual.id, effective.id) >= 0) {
 		effective = { ...actual };
 	}
 

src/plus/gk/utils/subscription.utils.ts

@@ -5,6 +5,13 @@ import type { PaidSubscriptionPlans, Subscription, SubscriptionPlan } from '../m
 
 export const SubscriptionUpdatedUriPathPrefix = 'did-update-subscription';
 
+export function compareSubscriptionPlans(
+	planA: SubscriptionPlanId | undefined,
+	planB: SubscriptionPlanId | undefined,
+): number {
+	return getSubscriptionPlanPriority(planA) - getSubscriptionPlanPriority(planB);
+}
+
 export function getSubscriptionStateName(
 	state: SubscriptionState,
 	planId?: SubscriptionPlanId,
@@ -19,10 +26,9 @@ export function getSubscriptionStateName(
 		case SubscriptionState.ProTrial:
 			return `${getSubscriptionPlanName(SubscriptionPlanId.Pro)} Trial`;
 		// return `${getSubscriptionPlanName(
-		// 	effectivePlanId != null &&
-		// 		getSubscriptionPlanPriority(effectivePlanId) >
-		// 			getSubscriptionPlanPriority(planId ?? SubscriptionPlanId.Pro)
-		// 		? effectivePlanId
+		// 	_effectivePlanId != null &&
+		// 		compareSubscriptionPlans(_effectivePlanId, planId ?? SubscriptionPlanId.Pro) > 0
+		// 		? _effectivePlanId
 		// 		: planId ?? SubscriptionPlanId.Pro,
 		// )} Trial`;
 		case SubscriptionState.ProTrialExpired:
@@ -68,10 +74,7 @@ export function computeSubscriptionState(subscription: Optional<Subscription, 's
 
 	if (account?.verified === false) return SubscriptionState.VerificationRequired;
 
-	if (
-		actual.id === effective.id ||
-		getSubscriptionPlanPriority(actual.id) > getSubscriptionPlanPriority(effective.id)
-	) {
+	if (actual.id === effective.id || compareSubscriptionPlans(actual.id, effective.id) > 0) {
 		switch (actual.id === effective.id ? effective.id : actual.id) {
 			case SubscriptionPlanId.Community:
 				return preview == null ? SubscriptionState.Community : SubscriptionState.ProPreviewExpired;
@@ -93,7 +96,7 @@ export function computeSubscriptionState(subscription: Optional<Subscription, 's
 	}
 
 	// If you have a paid license, any trial license higher tier than your paid license is considered paid
-	if (getSubscriptionPlanPriority(actual.id) > getSubscriptionPlanPriority(SubscriptionPlanId.CommunityWithAccount)) {
+	if (compareSubscriptionPlans(actual.id, SubscriptionPlanId.CommunityWithAccount) > 0) {
 		return SubscriptionState.Paid;
 	}
 	switch (effective.id) {
@@ -161,6 +164,20 @@ export function getSubscriptionPlanTier(
 			return 'Community';
 	}
 }
+
+export function getSubscriptionPlanTierType(id: SubscriptionPlanId): 'PRO' | 'ADVANCED' | 'TEAMS' | 'ENTERPRISE' {
+	switch (id) {
+		case SubscriptionPlanId.Advanced:
+			return 'ADVANCED';
+		case SubscriptionPlanId.Teams:
+			return 'TEAMS';
+		case SubscriptionPlanId.Enterprise:
+			return 'ENTERPRISE';
+		default:
+			return 'PRO';
+	}
+}
+
 const plansPriority = new Map<SubscriptionPlanId | undefined, number>([
 	[undefined, -1],
 	[SubscriptionPlanId.Community, 0],