Browse Source

Adds cyber week banner to welcome

main
Keith Daulton 1 year ago
parent
commit
69269d5ac2
7 changed files with 65 additions and 2 deletions
  1. BIN
      src/webviews/apps/media/cyberweek-2023-wide-dark.png
  2. BIN
      src/webviews/apps/media/cyberweek-2023-wide-light.png
  3. +17
    -0
      src/webviews/apps/welcome/welcome.html
  4. +28
    -0
      src/webviews/apps/welcome/welcome.scss
  5. +6
    -0
      src/webviews/apps/welcome/welcome.ts
  6. +2
    -1
      src/webviews/welcome/protocol.ts
  7. +12
    -1
      src/webviews/welcome/welcomeWebview.ts

BIN
src/webviews/apps/media/cyberweek-2023-wide-dark.png View File

Before After
Width: 1342  |  Height: 112  |  Size: 33 KiB

BIN
src/webviews/apps/media/cyberweek-2023-wide-light.png View File

Before After
Width: 1342  |  Height: 112  |  Size: 35 KiB

+ 17
- 0
src/webviews/apps/welcome/welcome.html View File

@ -55,6 +55,23 @@
<strong>understand</strong>, <strong>write</strong>, and <strong>review</strong> code. Focus,
collaborate, accelerate.
</p>
<div class="promo-banner" id="promo" hidden>
<a
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-wide-dark.webp"
alt=""
/>
<img
class="promo-banner__media is-light"
src="#{webroot}/media/cyberweek-2023-wide-light.webp"
alt=""
/>
</a>
</div>
</section>
<section class="welcome__section">
<h2>Powerful Features</h2>

+ 28
- 0
src/webviews/apps/welcome/welcome.scss View File

@ -3,6 +3,16 @@
@use '../shared/styles/normalize';
@use '../shared/styles/theme';
.vscode-high-contrast,
.vscode-dark {
--promo-banner-dark-display: inline-block;
}
.vscode-high-contrast-light,
.vscode-light {
--promo-banner-light-display: inline-block;
}
// normalize type
body {
line-height: 1.4;
@ -183,6 +193,24 @@ gk-card p {
margin: 0;
}
.promo-banner {
text-align: center;
&__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);
}
}
}
.welcome {
padding: var(--gitlens-gutter-width);

+ 6
- 0
src/webviews/apps/welcome/welcome.ts View File

@ -93,6 +93,12 @@ export class WelcomeApp extends App {
this.updateFeatures();
this.updateRepoState();
this.updateAccountState();
this.updatePromo();
}
private updatePromo() {
const { canShowPromo } = this.state;
document.getElementById('promo')!.hidden = !(canShowPromo ?? false);
}
private updateVersion() {

+ 2
- 1
src/webviews/welcome/protocol.ts View File

@ -9,7 +9,8 @@ export interface State extends WebviewState {
currentLine: Config['currentLine']['enabled'];
};
repoFeaturesBlocked?: boolean;
isTrialOrPaid?: boolean;
isTrialOrPaid: boolean;
canShowPromo: boolean;
}
export interface UpdateConfigurationParams {

+ 12
- 1
src/webviews/welcome/welcomeWebview.ts View File

@ -2,7 +2,7 @@ import type { ConfigurationChangeEvent } from 'vscode';
import { Disposable, workspace } from 'vscode';
import type { Container } from '../../container';
import type { Subscription } from '../../plus/gk/account/subscription';
import { SubscriptionState } from '../../plus/gk/account/subscription';
import { isSubscriptionPaid, SubscriptionState } from '../../plus/gk/account/subscription';
import type { SubscriptionChangeEvent } from '../../plus/gk/account/subscriptionService';
import { configuration } from '../../system/configuration';
import type { IpcMessage } from '../protocol';
@ -77,6 +77,7 @@ export class WelcomeWebviewProvider implements WebviewProvider {
this.container.git.openRepositoryCount === 0 ||
this.container.git.hasUnsafeRepositories(),
isTrialOrPaid: await this.getTrialOrPaidState(subscription),
canShowPromo: await this.getCanShowPromo(subscription),
};
}
@ -90,6 +91,16 @@ export class WelcomeWebviewProvider implements WebviewProvider {
return false;
}
private async getCanShowPromo(subscription?: Subscription): Promise<boolean> {
const expiresTime = new Date('2023-12-06T07:59:00.000Z').getTime(); // 2023-12-05 23:59:00 PST-0800
if (Date.now() > expiresTime) {
return false;
}
const sub = subscription ?? (await this.container.subscription.getSubscription(true));
return !isSubscriptionPaid(sub);
}
private updateConfiguration(params: UpdateConfigurationParams) {
void configuration.updateEffective(`${params.type}.enabled`, params.value);
}

Loading…
Cancel
Save