Adds <gl-promo> element & refactors promo handling

Author: eamodio

package.json

@@ -17493,18 +17493,23 @@
 			},
 			{
 				"view": "gitlens.views.worktrees",
-				"contents": "[Upgrade to Pro](command:gitlens.plus.upgrade?%7B%22source%22%3A%22worktrees%22%7D)\n\nYour Pro trial has ended. Please upgrade for full access to Worktrees and other Pro features.",
+				"contents": "[Upgrade to Pro](command:gitlens.plus.upgrade?%7B%22source%22%3A%22worktrees%22%7D)",
 				"when": "gitlens:plus:required && gitlens:plus:state == 4"
 			},
 			{
 				"view": "gitlens.views.worktrees",
-				"contents": "Special: 1st seat of Pro is now 50%+ off.",
+				"contents": "Special: 1st seat of Pro is now 50%+ off",
 				"when": "gitlens:plus:required && gitlens:plus:state == 4 && (gitlens:promo == pro50 || !gitlens:promo)"
 			},
 			{
 				"view": "gitlens.views.worktrees",
-				"contents": "Sale: Save up to 80% on GitLens Pro - lowest price of the year!",
-				"when": "gitlens:plus:required && gitlens:plus:state == 4 && gitlens:promo == devex-days"
+				"contents": "DevEx Days 24 Sale: Save up to 80% on GitLens Pro - lowest price of the year!",
+				"when": "gitlens:plus:required && gitlens:plus:state == 4 && gitlens:promo == devexdays24"
+			},
+			{
+				"view": "gitlens.views.worktrees",
+				"contents": "Your Pro trial has ended. Please upgrade for full access to Worktrees and other Pro features.",
+				"when": "gitlens:plus:required && gitlens:plus:state == 4"
 			},
 			{
 				"view": "gitlens.views.worktrees",

src/constants.ts

@@ -703,7 +703,7 @@ export type ContextKeys = {
 	'gitlens:plus:required': boolean;
 	'gitlens:plus:state': SubscriptionState;
 	'gitlens:prerelease': boolean;
-	'gitlens:promo': string;
+	'gitlens:promo': PromoKeys;
 	'gitlens:readonly': boolean;
 	'gitlens:repos:withRemotes': string[];
 	'gitlens:repos:withHostingIntegrations': string[];
@@ -840,6 +840,8 @@ export const keys = [
 ] as const;
 export type Keys = (typeof keys)[number];
 
+export type PromoKeys = 'devexdays24' | 'pro50';
+
 export const enum Schemes {
 	DebugConsole = 'debug',
 	File = 'file',

src/plus/gk/account/promos.ts

@@ -1,35 +1,30 @@
+import type { PromoKeys } from '../../../constants';
 import { SubscriptionState } from './subscription';
 
 export interface Promo {
-	readonly key: string;
+	readonly key: PromoKeys;
+	readonly code?: string;
 	readonly states?: SubscriptionState[];
 	readonly expiresOn?: number;
 	readonly startsOn?: number;
 
-	readonly code?: string;
-	readonly title?: string;
-	readonly description?: string;
-	readonly descriptionCTA?: string;
-	readonly descriptionIntro?: string;
-	readonly url?: string;
-	readonly command?: string;
+	readonly command?: `command:${string}`;
+	readonly linkTooltip?: string;
 }
 
 // Must be ordered by applicable order
 const promos: Promo[] = [
 	{
-		key: 'devex-days',
-		expiresOn: new Date('2024-09-05T06:59:00.000Z').getTime(),
+		key: 'devexdays24',
+		code: 'DEVEXDAYS24',
 		states: [
 			SubscriptionState.FreePlusInTrial,
 			SubscriptionState.FreePlusTrialExpired,
 			SubscriptionState.FreePlusTrialReactivationEligible,
 		],
-		code: 'DEVEXDAYS24',
-		description: 'Save up to 80% on GitLens Pro - lowest price of the year!',
-		descriptionIntro: 'Sale',
+		expiresOn: new Date('2024-09-05T06:59:00.000Z').getTime(),
+		linkTooltip: 'Sale: Save up to 80% on GitLens Pro - lowest price of the year!',
 	},
-
 	{
 		key: 'pro50',
 		states: [
@@ -39,12 +34,13 @@ const promos: Promo[] = [
 			SubscriptionState.FreePlusTrialExpired,
 			SubscriptionState.FreePlusTrialReactivationEligible,
 		],
-		description: '1st seat of Pro is now 50%+ off.',
-		descriptionCTA: 'See your special price.',
+		linkTooltip: 'Special: 1st seat of Pro is now 50%+ off. See your special price.',
 	},
 ];
 
-export function getApplicablePromo(state: number): Promo | undefined {
+export function getApplicablePromo(state: number | undefined): Promo | undefined {
+	if (state == null) return undefined;
+
 	const now = Date.now();
 	for (const promo of promos) {
 		if (

src/webviews/apps/home/home.html

@@ -22,23 +22,7 @@
 		data-vscode-context='{ "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
 	>
 		<div class="home__nav">
-			<div class="promo-banner promo-banner--eyebrow" id="promo-pro50" hidden>
-				<a
-					class="promo-banner__link"
-					href="command:gitlens.plus.upgrade"
-					title="Special: 1st seat of Pro is now 50%+ off. See your special price."
-					>Special: 1st seat of Pro is now 50%+ off. See your special price.</a
-				>
-			</div>
-			<div class="promo-banner promo-banner--eyebrow" id="promo-devex-days" hidden>
-				<a
-					class="promo-banner__link"
-					href="command:gitlens.plus.upgrade"
-					title="Sale: Save up to 80% on GitLens Pro - lowest price of the year!"
-					><gl-devex-days-svg></gl-devex-days-svg>Sale: Save up to 80% on GitLens Pro - lowest price of the
-					year!</a
-				>
-			</div>
+			<gl-promo class="promo-banner promo-banner--eyebrow" id="promo" type="link"></gl-promo>
 			<nav class="inline-nav" id="links" aria-label="Help and Resources">
 				<div class="inline-nav__group">
 					<gl-tooltip hoist>
@@ -156,25 +140,6 @@ <h1 class="alert__title">Untrusted workspace</h1>
 			<p data-requires="norepo">
 				<code-icon icon="question"></code-icon> Features which need a repository are currently unavailable
 			</p>
-			<div class="promo-banner" id="promo-hs2023" hidden>
-				<a
-					class="promo-banner__link"
-					href="https://gitkraken.com/hs23?utm_source=holiday_special&utm_medium=gitlens_banner&utm_campaign=holiday_special_2023"
-					aria-label="Holiday Special: 1st seat of Pro (plus the entire GitKraken DevEx platform) is now 50%+ off. Includes all Pro versions: GitLens, GitKraken Client, CLI, Browser Extension & more! See your special price."
-				>
-					<img
-						class="promo-banner__media is-dark"
-						src="#{webroot}/media/holiday-2023-small-dark.webp"
-						alt=""
-					/>
-					<img
-						class="promo-banner__media is-light"
-						src="#{webroot}/media/holiday-2023-small-light.webp"
-						alt=""
-					/><br />
-					1st seat of Pro (plus the entire GitKraken DevEx platform) is now 50%+ off. See your special price.
-				</a>
-			</div>
 			<div id="section-walkthrough" data-section-expand="walkthrough" class="alert">
 				<h1 class="alert__title">Get Started with GitLens</h1>
 				<div class="alert__description">

src/webviews/apps/home/home.scss

@@ -112,43 +112,6 @@ ul {
 		color: var(--color-foreground--50);
 		margin-bottom: 0.2rem;
 	}
-
-	&__link {
-		display: inline-block;
-		font-size: 1.1rem;
-		font-weight: bold;
-		color: inherit;
-		text-align: center;
-		text-decoration: none;
-
-		&:hover {
-			color: inherit;
-			text-decoration: underline;
-		}
-	}
-
-	&--eyebrow &__link {
-		display: block;
-		white-space: nowrap;
-		font-weight: normal;
-		max-width: 100%;
-		text-overflow: ellipsis;
-		overflow: hidden;
-	}
-
-	&__media {
-		// width: 100%;
-		max-width: 9.9rem;
-		height: auto;
-
-		&.is-light {
-			display: var(--promo-banner-light-display, none);
-		}
-
-		&.is-dark {
-			display: var(--promo-banner-dark-display, none);
-		}
-	}
 }
 
 .home {

src/webviews/apps/home/home.ts

@@ -1,6 +1,7 @@
 /*global*/
 import './home.scss';
 import type { Disposable } from 'vscode';
+import { getApplicablePromo } from '../../../plus/gk/account/promos';
 import type { State } from '../../home/protocol';
 import {
 	CollapseSectionCommand,
@@ -13,12 +14,13 @@ import type { IpcMessage } from '../../protocol';
 import { ExecuteCommand } from '../../protocol';
 import { App } from '../shared/appBase';
 import type { GlFeatureBadge } from '../shared/components/feature-badge';
+import type { GlPromo } from '../shared/components/promo';
 import { DOM } from '../shared/dom';
 import '../shared/components/button';
 import '../shared/components/code-icon';
 import '../shared/components/feature-badge';
 import '../shared/components/overlays/tooltip';
-import '../shared/components/svg-devExDays';
+import '../shared/components/promo';
 
 export class HomeApp extends App<State> {
 	constructor() {
@@ -64,7 +66,6 @@ export class HomeApp extends App<State> {
 				break;
 
 			case DidChangeSubscription.is(msg):
-				this.state.promoKey = msg.params.promoKey;
 				this.state.subscription = msg.params.subscription;
 				this.setState(this.state);
 				this.updatePromos();
@@ -153,11 +154,10 @@ export class HomeApp extends App<State> {
 	}
 
 	private updatePromos() {
-		const { promoKey } = this.state;
+		const promo = getApplicablePromo(this.state.subscription.state);
 
-		setElementVisibility('promo-hs2023', promoKey === 'hs2023');
-		setElementVisibility('promo-pro50', promoKey === 'pro50');
-		setElementVisibility('promo-devex-days', promoKey === 'devex-days');
+		const $promo = document.getElementById('promo') as GlPromo;
+		$promo.promo = promo;
 	}
 
 	private updateOrgSettings() {

src/webviews/apps/plus/account/components/account-content.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { urls } from '../../../../../constants';
+import type { Promo } from '../../../../../plus/gk/account/promos';
 import { getApplicablePromo } from '../../../../../plus/gk/account/promos';
 import type { Subscription } from '../../../../../plus/gk/account/subscription';
 import {
@@ -16,7 +17,7 @@ import { elementBase, linkBase } from '../../../shared/components/styles/lit/bas
 import '../../../shared/components/button';
 import '../../../shared/components/button-container';
 import '../../../shared/components/code-icon';
-import '../../../shared/components/svg-devExDays';
+import '../../../shared/components/promo';
 
 @customElement('account-content')
 export class AccountContent extends LitElement {
@@ -247,7 +248,7 @@ export class AccountContent extends LitElement {
 	}
 
 	private renderAccountState() {
-		const promo = this.state ? getApplicablePromo(this.state) : undefined;
+		const promo = getApplicablePromo(this.state);
 
 		switch (this.state) {
 			case SubscriptionState.Paid:
@@ -302,13 +303,7 @@ export class AccountContent extends LitElement {
 					<button-container>
 						<gl-button full href="command:gitlens.plus.upgrade">Upgrade to Pro</gl-button>
 					</button-container>
-					${promo?.description
-						? html`<p class="special ${promo.key === 'pro50' ? 'special-dim' : ''}">
-								${promo.key === 'devex-days' ? html`<gl-devex-days-svg></gl-devex-days-svg>` : nothing}
-								${promo.descriptionIntro ?? 'Special'}: <b>${promo.description}</b><br />
-						  </p>`
-						: nothing}
-					${this.renderIncludesDevEx()}
+					${this.renderPromo(promo)} ${this.renderIncludesDevEx()}
 				`;
 			}
 
@@ -318,13 +313,7 @@ export class AccountContent extends LitElement {
 					<button-container>
 						<gl-button full href="command:gitlens.plus.upgrade">Upgrade to Pro</gl-button>
 					</button-container>
-					${promo?.description
-						? html`<p class="special ${promo.key === 'pro50' ? 'special-dim' : ''}">
-								${promo.key === 'devex-days' ? html`<gl-devex-days-svg></gl-devex-days-svg>` : nothing}
-								${promo.descriptionIntro ?? 'Special'}: <b>${promo.description}</b><br />
-						  </p>`
-						: nothing}
-					${this.renderIncludesDevEx()}
+					${this.renderPromo(promo)} ${this.renderIncludesDevEx()}
 				`;
 
 			case SubscriptionState.FreePlusTrialReactivationEligible:
@@ -361,4 +350,8 @@ export class AccountContent extends LitElement {
 			</p>
 		`;
 	}
+
+	private renderPromo(promo: Promo | undefined) {
+		return html`<gl-promo .promo=${promo}></gl-promo>`;
+	}
 }

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

@@ -2,12 +2,13 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import type { Source } from '../../../../../constants';
 import { Commands } from '../../../../../constants';
+import type { Promo } from '../../../../../plus/gk/account/promos';
 import { getApplicablePromo } from '../../../../../plus/gk/account/promos';
 import { SubscriptionState } from '../../../../../plus/gk/account/subscription';
 import type { GlButton } from '../../../shared/components/button';
 import { linkStyles } from './vscode.css';
 import '../../../shared/components/button';
-import '../../../shared/components/svg-devExDays';
+import '../../../shared/components/promo';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -61,15 +62,6 @@ export class GlFeatureGatePlusState extends LitElement {
 			.hint {
 				border-bottom: 1px dashed currentColor;
 			}
-
-			.special {
-				text-align: center;
-			}
-
-			:host([appearance='welcome']) .special-dim {
-				font-size: smaller;
-				opacity: 0.6;
-			}
 		`,
 	];
 
@@ -165,17 +157,12 @@ export class GlFeatureGatePlusState extends LitElement {
 						href="${generateCommandLink(Commands.PlusUpgrade, this.source)}"
 						>Upgrade to Pro</gl-button
 					>
+					${this.renderPromo(promo)}
 					<p>
 						Your Pro trial has ended. Please upgrade for full access to
 						${this.featureWithArticleIfNeeded ? `${this.featureWithArticleIfNeeded} and other ` : ''}Pro
 						features.
-					</p>
-					${promo?.description
-						? html`<p class="special ${promo.key === 'pro50' ? 'special-dim' : ''}">
-								${promo.key === 'devex-days' ? html`<gl-devex-days-svg></gl-devex-days-svg>` : nothing}
-								${promo.descriptionIntro ?? 'Special'}: <b>${promo.description}</b><br />
-						  </p>`
-						: nothing}`;
+					</p>`;
 
 			case SubscriptionState.FreePlusTrialReactivationEligible:
 				return html`
@@ -194,6 +181,10 @@ export class GlFeatureGatePlusState extends LitElement {
 
 		return undefined;
 	}
+
+	private renderPromo(promo: Promo | undefined) {
+		return html`<gl-promo .promo=${promo}></gl-promo>`;
+	}
 }
 
 function generateCommandLink(command: Commands, source: Source | undefined) {