add 3 day local feature trial

Author: sergiolms

src/constants.storage.ts

@@ -1,7 +1,7 @@
 import type { GraphBranchesVisibility, ViewShowBranchComparison } from './config';
 import type { AIProviders } from './constants.ai';
 import type { IntegrationId } from './constants.integrations';
-import type { TrackedUsage, TrackedUsageKeys } from './constants.telemetry';
+import type { Sources, TrackedUsage, TrackedUsageKeys } from './constants.telemetry';
 import type { Environment } from './container';
 import type { Subscription } from './plus/gk/account/subscription';
 import type { Integration } from './plus/integrations/integration';
@@ -74,7 +74,9 @@ export type GlobalStorage = {
 	'launchpad:indicator:hasInteracted': string;
 	'launchpadView:groups:expanded': StoredLaunchpadGroup[];
 	'graph:searchMode': StoredGraphSearchMode;
-} & { [key in `confirm:ai:tos:${AIProviders}`]: boolean } & {
+} & { [key in `plus:featurePreviewTrial:${Sources}:consumedDays`]: { startedOn: string; expiresOn: string }[] } & {
+	[key in `confirm:ai:tos:${AIProviders}`]: boolean;
+} & {
 	[key in `provider:authentication:skip:${string}`]: boolean;
 } & { [key in `gk:${string}:checkin`]: Stored<StoredGKCheckInResponse> } & {
 	[key in `gk:${string}:organizations`]: Stored<StoredOrganization[]>;

src/constants.telemetry.ts

@@ -378,7 +378,8 @@ export type TelemetryEvents = {
 					| 'resend-verification'
 					| 'pricing'
 					| 'start-preview-trial'
-					| 'upgrade';
+					| 'upgrade'
+					| `start-${Sources}-preview-trial`;
 		  }
 		| {
 				action: 'visibility';

src/plus/gk/account/subscriptionService.ts

@@ -242,9 +242,6 @@ export class SubscriptionService implements Disposable {
 			registerCommand(Commands.PlusManage, (src?: Source) => this.manage(src)),
 			registerCommand(Commands.PlusShowPlans, (src?: Source) => this.showPlans(src)),
 			registerCommand(Commands.PlusStartPreviewTrial, (src?: Source) => this.startPreviewTrial(src)),
-			registerCommand(Commands.PlusStartFeaturePreviewTrial, (src?: Source) =>
-				this.startFeaturePreviewTrial(src),
-			),
 			registerCommand(Commands.PlusReactivateProTrial, (src?: Source) => this.reactivateProTrial(src)),
 			registerCommand(Commands.PlusResendVerification, (src?: Source) => this.resendVerification(src)),
 			registerCommand(Commands.PlusUpgrade, (src?: Source) => this.upgrade(src)),
@@ -730,10 +727,6 @@ export class SubscriptionService implements Disposable {
 		}, 1);
 	}
 
-	@gate(() => '')
-	@log()
-	async startFeaturePreviewTrial(_: Source | undefined): Promise<void> {}
-
 	@log()
 	async upgrade(source: Source | undefined): Promise<void> {
 		const scope = getLogScope();

src/plus/webviews/graph/graphWebview.ts

@@ -19,6 +19,7 @@ import type {
 import { GlyphChars } from '../../../constants';
 import { Commands } from '../../../constants.commands';
 import type { StoredGraphFilters, StoredGraphRefType } from '../../../constants.storage';
+import { proPreviewLengthInDays, proTrialLengthInDays } from '../../../constants.subscription';
 import type { GraphShownTelemetryContext, GraphTelemetryContext, TelemetryEvents } from '../../../constants.telemetry';
 import type { Container } from '../../../container';
 import { CancellationError } from '../../../errors';
@@ -96,6 +97,7 @@ import { getSearchQueryComparisonKey, parseSearchQuery } from '../../../git/sear
 import { splitGitCommitMessage } from '../../../git/utils/commit-utils';
 import { ReferencesQuickPickIncludes, showReferencePicker } from '../../../quickpicks/referencePicker';
 import { showRepositoryPicker } from '../../../quickpicks/repositoryPicker';
+import { createFromDateDelta } from '../../../system/date';
 import { gate } from '../../../system/decorators/gate';
 import { debug, log } from '../../../system/decorators/log';
 import type { Deferrable } from '../../../system/function';
@@ -135,6 +137,7 @@ import type {
 	DidGetCountParams,
 	DidGetRowHoverParams,
 	DidSearchParams,
+	DidSetFeaturePreviewTrialParams,
 	DoubleClickedParams,
 	GetMissingAvatarsParams,
 	GetMissingRefsMetadataParams,
@@ -205,6 +208,7 @@ import {
 	DidChangeWorkingTreeNotification,
 	DidFetchNotification,
 	DidSearchNotification,
+	DidSetFeaturePreviewTrialNotification,
 	DoubleClickedCommandType,
 	EnsureRowRequest,
 	GetCountsRequest,
@@ -293,6 +297,7 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 		[DidChangeSubscriptionNotification, this.notifyDidChangeSubscription],
 		[DidChangeWorkingTreeNotification, this.notifyDidChangeWorkingTree],
 		[DidFetchNotification, this.notifyDidFetch],
+		[DidSetFeaturePreviewTrialNotification, this.notifyDidSetFeaturePreviewTrial],
 	]);
 	private _refsMetadata: Map<string, GraphRefMetadata | null> | null | undefined;
 	private _search: GitSearch | undefined;
@@ -679,11 +684,58 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 				'gitlens.graph.copyWorkingChangesToWorktree',
 				this.copyWorkingChangesToWorktree,
 			),
+			this.host.registerWebviewCommand('gitlens.graph.startFeaturePreviewTrial', this.startFeaturePreviewTrial),
 		);
 
 		return commands;
 	}
 
+	async startFeaturePreviewTrial() {
+		const timestamp = new Date();
+		const consumedDays: { startedOn: string; expiresOn: string }[] = this.container.storage.get(
+			`plus:featurePreviewTrial:graph:consumedDays`,
+			[],
+		);
+
+		// If it's still in the 24h trial, end here
+		if (consumedDays.length > 0 && new Date(consumedDays[consumedDays.length - 1].expiresOn) > timestamp) {
+			return;
+		}
+
+		if (consumedDays.length >= proPreviewLengthInDays) {
+			void window.showInformationMessage(
+				`You have already used your ${proPreviewLengthInDays} days of previewing local Pro features.`,
+			);
+			return;
+		}
+
+		await this.container.storage.store(`plus:featurePreviewTrial:graph:consumedDays`, [
+			...(consumedDays ?? []),
+			{
+				startedOn: timestamp.toISOString(),
+				expiresOn: createFromDateDelta(timestamp, { days: 1 }).toISOString(),
+			},
+		]);
+
+		if (this.container.telemetry.enabled) {
+			this.container.telemetry.sendEvent(
+				'subscription/action',
+				{ action: `start-graph-preview-trial` },
+				{ source: 'graph' },
+			);
+		}
+
+		void window.showInformationMessage(
+			`You can now preview local Pro features for 1 day${
+				consumedDays.length + 1 < proPreviewLengthInDays
+					? `, up to ${proPreviewLengthInDays - (consumedDays.length + 1)} more days`
+					: ''
+			}, or [start your free ${proTrialLengthInDays}-day Pro trial](command:gitlens.plus.signUp "Start Pro Trial") for full access to Pro features.`,
+		);
+
+		void this.notifyDidSetFeaturePreviewTrial();
+	}
+
 	onWindowFocusChanged(focused: boolean): void {
 		this.isWindowFocused = focused;
 	}
@@ -1872,6 +1924,16 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 		});
 	}
 
+	@debug()
+	private async notifyDidSetFeaturePreviewTrial() {
+		if (!this.host.ready || !this.host.visible) {
+			this.host.addPendingIpcNotification(DidSetFeaturePreviewTrialNotification, this._ipcNotificationMap, this);
+			return false;
+		}
+
+		return this.host.notify(DidSetFeaturePreviewTrialNotification, this.getStoredGraphPreviewTrial());
+	}
+
 	@debug()
 	private async notifyDidChangeWorkingTree() {
 		if (!this.host.ready || !this.host.visible) {
@@ -2514,6 +2576,8 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 
 		const defaultSearchMode = this.container.storage.get('graph:searchMode') ?? 'normal';
 
+		const graphPreviewTrial = this.getStoredGraphPreviewTrial();
+
 		return {
 			...this.host.baseWebviewState,
 			windowFocused: this.isWindowFocused,
@@ -2561,6 +2625,7 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			nonce: this.host.cspNonce,
 			workingTreeStats: getSettledValue(workingStatsResult) ?? { added: 0, deleted: 0, modified: 0 },
 			defaultSearchMode: defaultSearchMode,
+			graphPreviewTrial: graphPreviewTrial,
 		};
 	}
 
@@ -2835,6 +2900,18 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 		return refs;
 	}
 
+	private getStoredGraphPreviewTrial(): DidSetFeaturePreviewTrialParams {
+		const storedValue = this.container.storage.get(`plus:featurePreviewTrial:graph:consumedDays`, []);
+		return {
+			feature: 'graph',
+			consumedDays: storedValue,
+			isActive:
+				storedValue.length > 0 &&
+				storedValue.length <= proPreviewLengthInDays &&
+				new Date(storedValue[storedValue.length - 1].expiresOn) > new Date(),
+		};
+	}
+
 	private updateIncludeOnlyRefs(
 		repoPath: string | undefined,
 		{ branchesVisibility, refs }: UpdateIncludedRefsParams,

src/plus/webviews/graph/protocol.ts

@@ -25,6 +25,7 @@ import type {
 import type { Config, DateStyle, GraphBranchesVisibility } from '../../../config';
 import type { SupportedCloudIntegrationIds } from '../../../constants.integrations';
 import type { SearchQuery } from '../../../constants.search';
+import type { Source, Sources } from '../../../constants.telemetry';
 import type { RepositoryVisibility } from '../../../git/gitProvider';
 import type { GitTrackingState } from '../../../git/models/branch';
 import type { GitGraphRowType } from '../../../git/models/graph';
@@ -129,6 +130,7 @@ export interface State extends WebviewState {
 		bottom: number;
 	};
 	theming?: { cssVariables: CssVariables; themeOpacityFactor: number };
+	graphPreviewTrial?: { consumedDays: { startedOn: string; expiresOn: string }[]; isActive: boolean };
 }
 
 export interface BranchState extends GitTrackingState {
@@ -380,6 +382,16 @@ export interface DidSearchParams {
 export const SearchRequest = new IpcRequest<SearchParams, DidSearchParams>(scope, 'search');
 
 // NOTIFICATIONS
+export interface DidSetFeaturePreviewTrialParams {
+	feature: Sources;
+	consumedDays: { startedOn: string; expiresOn: string }[];
+	isActive: boolean;
+}
+
+export const DidSetFeaturePreviewTrialNotification = new IpcNotification<DidSetFeaturePreviewTrialParams>(
+	scope,
+	'featurePreviewTrial/didSet',
+);
 
 export interface DidChangeRepoConnectionParams {
 	repositories?: GraphRepository[];

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -64,6 +64,7 @@ import {
 	DidChangeWorkingTreeNotification,
 	DidFetchNotification,
 	DidSearchNotification,
+	DidSetFeaturePreviewTrialNotification,
 } from '../../../../plus/webviews/graph/protocol';
 import { createCommandLink } from '../../../../system/commands';
 import { filterMap, first, groupByFilterMap, join } from '../../../../system/iterable';
@@ -282,6 +283,8 @@ export function GraphWrapper({
 	const [windowFocused, setWindowFocused] = useState(state.windowFocused);
 	const [allowed, setAllowed] = useState(state.allowed ?? false);
 	const [subscription, setSubscription] = useState<Subscription | undefined>(state.subscription);
+	const [graphPreviewTrial, setGraphPreviewTrial] = useState(state.graphPreviewTrial);
+
 	// search state
 	const searchEl = useRef<GlSearchBox>(null);
 	const [searchQuery, setSearchQuery] = useState<SearchQuery | undefined>(undefined);
@@ -318,6 +321,10 @@ export function GraphWrapper({
 					setStyleProps(state.theming);
 				}
 				break;
+			case DidSetFeaturePreviewTrialNotification:
+				setGraphPreviewTrial(state.graphPreviewTrial);
+				setAllowed(state.graphPreviewTrial?.isActive || allowed);
+				break;
 			case DidChangeAvatarsNotification:
 				setAvatars(state.avatars);
 				break;
@@ -1531,6 +1538,12 @@ export function GraphWrapper({
 			<GlFeatureGate
 				className="graph-app__gate"
 				allowFeaturePreviewTrial={true}
+				featureInPreviewTrial={graphPreviewTrial ? { graph: graphPreviewTrial } : undefined}
+				featurePreviewTrialCommandLink={createWebviewCommandLink(
+					'gitlens.graph.startFeaturePreviewTrial',
+					state.webviewId,
+					state.webviewInstanceId,
+				)}
 				appearance="alert"
 				featureWithArticleIfNeeded="the Commit Graph"
 				source={{ source: 'graph', detail: 'gate' }}

src/webviews/apps/plus/graph/graph.tsx

@@ -38,6 +38,7 @@ import {
 	DidChangeWorkingTreeNotification,
 	DidFetchNotification,
 	DidSearchNotification,
+	DidSetFeaturePreviewTrialNotification,
 	DoubleClickedCommandType,
 	EnsureRowRequest,
 	GetMissingAvatarsCommand,
@@ -165,7 +166,11 @@ export class GraphApp extends App<State> {
 				this.state.avatars = msg.params.avatars;
 				this.setState(this.state, DidChangeAvatarsNotification);
 				break;
-
+			case DidSetFeaturePreviewTrialNotification.is(msg):
+				this.state.graphPreviewTrial = { consumedDays: msg.params.consumedDays, isActive: msg.params.isActive };
+				this.state.allowed = msg.params.isActive || this.state.allowed;
+				this.setState(this.state, DidSetFeaturePreviewTrialNotification);
+				break;
 			case DidChangeBranchStateNotification.is(msg):
 				this.state.branchState = msg.params.branchState;
 				this.setState(this.state, DidChangeBranchStateNotification);

src/webviews/apps/plus/shared/components/feature-gate-plus-state.ts

@@ -2,7 +2,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { Commands } from '../../../../../constants.commands';
 import { proPreviewLengthInDays, proTrialLengthInDays, SubscriptionState } from '../../../../../constants.subscription';
-import type { Source } from '../../../../../constants.telemetry';
+import type { Source, Sources } from '../../../../../constants.telemetry';
 import type { Promo } from '../../../../../plus/gk/account/promos';
 import { getApplicablePromo } from '../../../../../plus/gk/account/promos';
 import { pluralize } from '../../../../../system/string';
@@ -72,6 +72,14 @@ export class GlFeatureGatePlusState extends LitElement {
 	@property({ type: Boolean })
 	allowFeaturePreviewTrial?: boolean;
 
+	@property({ type: Object })
+	featureInPreviewTrial?: {
+		[key in Sources]?: { consumedDays: { startedOn: string; expiresOn: string }[]; isActive: boolean };
+	};
+
+	@property({ type: String })
+	featurePreviewTrialCommandLink?: string;
+
 	@property({ type: String })
 	appearance?: 'alert' | 'welcome';
 
@@ -99,8 +107,10 @@ export class GlFeatureGatePlusState extends LitElement {
 		this.hidden = false;
 		const appearance = (this.appearance ?? 'alert') === 'alert' ? 'alert' : nothing;
 		const promo = this.state ? getApplicablePromo(this.state, 'gate') : undefined;
-		const consumedDays = 0;
-		//this.container.storage.get(`plus:featurePreviewTrial:${this.source?.source}:consumedDays`) ?? 0;
+		let consumedDaysCount = 0;
+		if (this.source?.source) {
+			consumedDaysCount = this.featureInPreviewTrial?.[this.source.source]?.consumedDays?.length ?? 0;
+		}
 
 		switch (this.state) {
 			case SubscriptionState.VerificationRequired:
@@ -124,17 +134,15 @@ export class GlFeatureGatePlusState extends LitElement {
 
 			case SubscriptionState.Community:
 				if (this.allowFeaturePreviewTrial) {
+					const daysLeft = proPreviewLengthInDays - consumedDaysCount;
 					return html`
-						<gl-button
-							appearance="${appearance}"
-							href="${generateCommandLink(Commands.PlusStartFeaturePreviewTrial, this.source)}"
+						<gl-button appearance="${appearance}" href="${this.featurePreviewTrialCommandLink}"
 							>Continue</gl-button
 						>
 						<p>
-							Continuing gives you ${proPreviewLengthInDays - consumedDays}
-							day${proPreviewLengthInDays - consumedDays !== 1 ? 's' : ''} to preview
+							Continuing gives you ${pluralize('day', daysLeft)} to preview
 							${this.featureWithArticleIfNeeded
-								? `${this.featureWithArticleIfNeeded}  and other `
+								? `${this.featureWithArticleIfNeeded} and other `
 								: ''}local
 							Pro features.<br />
 							${appearance !== 'alert' ? html`<br />` : ''} For full access to Pro features

src/webviews/apps/shared/components/feature-gate.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { SubscriptionState } from '../../../../constants.subscription';
-import type { Source } from '../../../../constants.telemetry';
+import type { Source, Sources } from '../../../../constants.telemetry';
 import { isSubscriptionStatePaidOrTrial } from '../../../../plus/gk/account/subscription';
 import '../../plus/shared/components/feature-gate-plus-state';
 
@@ -93,6 +93,14 @@ export class GlFeatureGate extends LitElement {
 	@property({ type: Boolean })
 	allowFeaturePreviewTrial?: boolean;
 
+	@property({ type: Object })
+	featureInPreviewTrial?: {
+		[key in Sources]?: { consumedDays: { startedOn: string; expiresOn: string }[]; isActive: boolean };
+	};
+
+	@property({ type: String })
+	featurePreviewTrialCommandLink?: string;
+
 	@property({ reflect: true })
 	appearance?: 'alert' | 'welcome';
 
@@ -130,6 +138,8 @@ export class GlFeatureGate extends LitElement {
 					.source=${this.source}
 					.state=${this.state}
 					.allowFeaturePreviewTrial=${this.allowFeaturePreviewTrial}
+					.featureInPreviewTrial=${this.featureInPreviewTrial}
+					featurePreviewTrialCommandLink=${this.featurePreviewTrialCommandLink}
 				></gl-feature-gate-plus-state>
 			</section>
 		`;