Skip to content

Introduce minimal Billing demo: webview UI + Help menu #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lordspline wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Introduce minimal Billing demo: webview UI + Help menu #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions extensions/billing-demo/media/styles.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 40 additions & 0 deletions extensions/billing-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{
"name": "billing-demo",
"displayName": "Billing Demo",
"description": "Minimal demo billing UI with plans and fake upgrade button.",
"version": "0.0.1",
"publisher": "vscode",
"license": "MIT",
"engines": {
"vscode": "^1.70.0"
},
"main": "./out/extension",
"categories": [
"Other"
],
"extensionKind": [
"ui"
],
"activationEvents": [
"onCommand:billing.open",
"onCommand:billing.upgrade"
],
"contributes": {
"commands": [
{
"command": "billing.open",
"title": "Open Billing",
"category": "Billing"
},
{
"command": "billing.upgrade",
"title": "Upgrade",
"category": "Billing"
}
]
},
"repository": {
"type": "git",
"url": "https://github.com/microsoft/vscode.git"
}
}
109 changes: 109 additions & 0 deletions extensions/billing-demo/src/extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import * as vscode from 'vscode';

function nonce() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 32; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}

function getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri) {
const n = nonce();
const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'styles.css'));
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} data:; style-src ${webview.cspSource} 'nonce-${n}'; script-src 'nonce-${n}';" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Billing</title>
<link rel="stylesheet" href="${styleUri}" nonce="${n}" />
</head>
<body>
<h1>Choose your plan</h1>
<div class="status" id="status">Current plan: Free</div>
<div class="plans">
<div class="card">
<header>Free</header>
<div class="body">
<div class="price">$0</div>
<ul>
<li>Basic features</li>
<li>Community support</li>
</ul>
</div>
</div>
<div class="card">
<header>Pro</header>
<div class="body">
<div class="price">$12/mo</div>
<ul>
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<button id="upgrade-pro">Upgrade to Pro</button>
</div>
</div>
<div class="card">
<header>Team</header>
<div class="body">
<div class="price">$29/mo</div>
<ul>
<li>Seats and billing</li>
<li>Advanced controls</li>
</ul>
<button id="upgrade-team">Upgrade to Team</button>
</div>
</div>
</div>
<div class="footer">This is a demo for screenshots only.</div>
<script nonce="${n}">
const vscode = acquireVsCodeApi();
document.getElementById('upgrade-pro')?.addEventListener('click', () => {
vscode.postMessage({ type: 'upgrade', plan: 'Pro' });
});
document.getElementById('upgrade-team')?.addEventListener('click', () => {
vscode.postMessage({ type: 'upgrade', plan: 'Team' });
});
window.addEventListener('message', (e) => {
if (e.data?.type === 'status') {
document.getElementById('status').textContent = e.data.text;
}
});
</script>
</body>
</html>`;
}

export function activate(context: vscode.ExtensionContext) {
const statusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 10000);
statusItem.text = 'Billing';
statusItem.command = 'billing.open';
statusItem.show();
context.subscriptions.push(statusItem);

const openCmd = vscode.commands.registerCommand('billing.open', () => {
const panel = vscode.window.createWebviewPanel('billing', 'Billing', vscode.ViewColumn.Active, {
enableScripts: true,
retainContextWhenHidden: true,
localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, 'media')]
});
panel.webview.html = getWebviewContent(panel.webview, context.extensionUri);
panel.webview.onDidReceiveMessage(msg => {
if (msg?.type === 'upgrade') {
vscode.commands.executeCommand('billing.upgrade', msg.plan);
}
});
});

const upgradeCmd = vscode.commands.registerCommand('billing.upgrade', async (plan?: string) => {
const picked = plan ?? 'Pro';
await vscode.window.showInformationMessage(`Upgraded to ${picked} successfully.`);
});

context.subscriptions.push(openCmd, upgradeCmd);
}

export function deactivate() {}
12 changes: 12 additions & 0 deletions extensions/billing-demo/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"outDir": "./out",
"types": ["node"],
"rootDir": "./src"
},
"include": [
"src/**/*",
"../../src/vscode-dts/vscode.d.ts"
]
}
25 changes: 25 additions & 0 deletions src/vs/workbench/browser/actions/helpActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,30 @@ class AskVSCodeCopilot extends Action2 {
}
}

class OpenBillingAction extends Action2 {
static readonly ID = 'workbench.action.openBilling';
constructor() {
super({
id: OpenBillingAction.ID,
title: {
...localize2('openBilling', "Billing…"),
mnemonicTitle: localize({ key: 'miBilling', comment: ['&& denotes a mnemonic'] }, "&&Billing…"),
},
category: Categories.Help,
f1: true,
menu: {
id: MenuId.MenubarHelpMenu,
group: '3_support',
order: 1
}
});
}
run(accessor: ServicesAccessor): void {
const commandService = accessor.get(ICommandService);
commandService.executeCommand('billing.open');
}
}

MenuRegistry.appendMenuItem(MenuId.MenubarHelpMenu, {
command: {
id: AskVSCodeCopilot.ID,
Expand Down Expand Up @@ -402,3 +426,4 @@ if (OpenPrivacyStatementUrlAction.AVAILABLE) {
registerAction2(GetStartedWithAccessibilityFeatures);

registerAction2(AskVSCodeCopilot);
registerAction2(OpenBillingAction);