Adds cyber week banner to home

Author: d13

src/webviews/apps/home/home.html

@@ -122,6 +122,30 @@ <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-cw2023" hidden>
+				<a
+					class="promo-banner__link"
+					href="https://www.gitkraken.com/cw23?utm_source=cyber_week&utm_medium=gitlens_banner&utm_campaign=cyber_week_2023"
+					aria-label="Cyber Week Sale: 50% off first seat of Pro — only $4/month! Includes entire GitKraken suite of dev tools."
+				>
+					<img
+						class="promo-banner__media is-dark"
+						src="#{webroot}/media/cyberweek-2023-small-dark.webp"
+						alt=""
+					/>
+					<img
+						class="promo-banner__media is-light"
+						src="#{webroot}/media/cyberweek-2023-small-light.webp"
+						alt=""
+					/><br />
+					50% off first seat of Pro — only $4/month!
+				</a>
+			</div>
+			<div class="promo-banner" id="promo-pro50" hidden>
+				<a class="promo-banner__link" href="command:gitlens.plus.purchase"
+					>Special: 50% off first seat of Pro — only $4/month!</a
+				>
+			</div>
 			<nav class="nav-list">
 				<h2 class="nav-list__title t-eyebrow">Popular views</h2>
 				<a

src/webviews/apps/home/home.scss

@@ -19,6 +19,7 @@
 	--card-background: var(--color-background--lighten-075);
 	--card-hover-background: var(--color-background--lighten-10);
 	--popover-bg: var(--color-background--lighten-15);
+	--promo-banner-dark-display: inline-block;
 }
 
 .vscode-high-contrast-light,
@@ -27,6 +28,7 @@
 	--card-background: var(--color-background--darken-075);
 	--card-hover-background: var(--color-background--darken-10);
 	--popover-bg: var(--color-background--darken-15);
+	--promo-banner-light-display: inline-block;
 }
 
 * {
@@ -141,6 +143,39 @@ ul {
 	padding-left: 1.2em;
 }
 
+.promo-banner {
+	text-align: center;
+	margin-bottom: 1rem;
+
+	&__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;
+		}
+	}
+
+	&__media {
+		// width: 100%;
+		max-width: 100%;
+		height: auto;
+
+		&.is-light {
+			display: var(--promo-banner-light-display, none);
+		}
+
+		&.is-dark {
+			display: var(--promo-banner-dark-display, none);
+		}
+	}
+}
+
 .home {
 	padding: 0;
 	height: 100%;

src/webviews/apps/home/home.ts

@@ -2,7 +2,7 @@
 import './home.scss';
 import type { Disposable } from 'vscode';
 import type { State } from '../../home/protocol';
-import { DidChangeRepositoriesType } from '../../home/protocol';
+import { DidChangeRepositoriesType, DidChangeSubscriptionType } from '../../home/protocol';
 import type { IpcMessage } from '../../protocol';
 import { ExecuteCommandType, onIpc } from '../../protocol';
 import { App } from '../shared/appBase';
@@ -48,6 +48,13 @@ export class HomeApp extends App<State> {
 					this.updateNoRepo();
 				});
 				break;
+			case DidChangeSubscriptionType.method:
+				onIpc(DidChangeSubscriptionType, msg, params => {
+					this.state.promoStates = params.promoStates;
+					this.setState(this.state);
+					this.updatePromos();
+				});
+				break;
 			default:
 				super.onMessageReceived?.(msg);
 				break;
@@ -98,8 +105,18 @@ export class HomeApp extends App<State> {
 		header.hidden = !noRepos && !hasUnsafe;
 	}
 
+	private updatePromos() {
+		const {
+			promoStates: { cw2023, pro50 },
+		} = this.state;
+
+		setElementVisibility('promo-cw2023', cw2023);
+		setElementVisibility('promo-pro50', pro50);
+	}
+
 	private updateState() {
 		this.updateNoRepo();
+		this.updatePromos();
 	}
 }
 

src/webviews/apps/media/cyberweek-2023-small-dark.png

@@ -1,9 +1,12 @@
 import { Disposable, workspace } from 'vscode';
 import type { Container } from '../../container';
+import type { Subscription } from '../../plus/gk/account/subscription';
+import { isSubscriptionExpired, isSubscriptionPaid, isSubscriptionTrial } from '../../plus/gk/account/subscription';
+import type { SubscriptionChangeEvent } from '../../plus/gk/account/subscriptionService';
 import { registerCommand } from '../../system/command';
 import type { WebviewController, WebviewProvider } from '../webviewController';
 import type { DidChangeRepositoriesParams, State } from './protocol';
-import { DidChangeRepositoriesType } from './protocol';
+import { DidChangeRepositoriesType, DidChangeSubscriptionType } from './protocol';
 
 const emptyDisposable = Object.freeze({
 	dispose: () => {
@@ -23,6 +26,7 @@ export class HomeWebviewProvider implements WebviewProvider<State> {
 			!workspace.isTrusted
 				? workspace.onDidGrantWorkspaceTrust(this.notifyDidChangeRepositories, this)
 				: emptyDisposable,
+			this.container.subscription.onDidChange(this.onSubscriptionChanged, this),
 		);
 	}
 
@@ -38,19 +42,24 @@ export class HomeWebviewProvider implements WebviewProvider<State> {
 		return [registerCommand(`${this.host.id}.refresh`, () => this.host.refresh(true), this)];
 	}
 
-	includeBootstrap(): State {
+	includeBootstrap(): Promise<State> {
 		return this.getState();
 	}
 
 	onReloaded() {
 		this.notifyDidChangeRepositories();
 	}
 
-	private getState(): State {
+	private onSubscriptionChanged(e: SubscriptionChangeEvent) {
+		void this.notifyDidChangeSubscription(e.current);
+	}
+
+	private async getState(subscription?: Subscription): Promise<State> {
 		return {
 			...this.host.baseWebviewState,
 			repositories: this.getRepositoriesState(),
 			webroot: this.host.getWebRoot(),
+			promoStates: await this.getCanShowPromos(subscription),
 		};
 	}
 
@@ -63,7 +72,30 @@ export class HomeWebviewProvider implements WebviewProvider<State> {
 		};
 	}
 
+	private async getCanShowPromos(subscription?: Subscription): Promise<Record<string, boolean>> {
+		const promos = {
+			cw2023: false,
+			pro50: false,
+		};
+
+		const sub = subscription ?? (await this.container.subscription.getSubscription(true));
+		const expiresTime = new Date('2023-12-06T07:59:00.000Z').getTime(); // 2023-12-05 23:59:00 PST-0800
+		if (Date.now() < expiresTime && !isSubscriptionPaid(sub)) {
+			promos.cw2023 = true;
+		} else if (subscription != null && (isSubscriptionTrial(subscription) || isSubscriptionExpired(subscription))) {
+			promos.pro50 = true;
+		}
+
+		return promos;
+	}
+
 	private notifyDidChangeRepositories() {
 		void this.host.notify(DidChangeRepositoriesType, this.getRepositoriesState());
 	}
+
+	private async notifyDidChangeSubscription(subscription?: Subscription) {
+		void this.host.notify(DidChangeSubscriptionType, {
+			promoStates: await this.getCanShowPromos(subscription),
+		});
+	}
 }

src/webviews/apps/media/cyberweek-2023-small-light.png

@@ -4,6 +4,7 @@ import { IpcNotificationType } from '../protocol';
 export interface State extends WebviewState {
 	repositories: DidChangeRepositoriesParams;
 	webroot?: string;
+	promoStates: Record<string, boolean>;
 }
 
 export interface DidChangeRepositoriesParams {
@@ -13,3 +14,8 @@ export interface DidChangeRepositoriesParams {
 	trusted: boolean;
 }
 export const DidChangeRepositoriesType = new IpcNotificationType<DidChangeRepositoriesParams>('repositories/didChange');
+
+export interface DidChangeSubscriptionParams {
+	promoStates: Record<string, boolean>;
+}
+export const DidChangeSubscriptionType = new IpcNotificationType<DidChangeSubscriptionParams>('subscription/didChange');