From b24a108d804babf90a27e3af267315ef75cb5e39 Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Mon, 16 May 2022 18:13:59 +0100 Subject: [PATCH] Porting UI, still needs testing. --- .../src/components/billing/Usage.svelte | 55 ++++++++ .../src/pages/builder/portal/_layout.svelte | 4 + .../builder/portal/settings/billing.svelte | 127 ++++++++++++++++++ packages/builder/src/stores/portal/index.js | 1 + .../builder/src/stores/portal/licensing.js | 29 ++++ packages/frontend-core/src/api/licensing.js | 6 + 6 files changed, 222 insertions(+) create mode 100644 packages/builder/src/components/billing/Usage.svelte create mode 100644 packages/builder/src/pages/builder/portal/settings/billing.svelte create mode 100644 packages/builder/src/stores/portal/licensing.js diff --git a/packages/builder/src/components/billing/Usage.svelte b/packages/builder/src/components/billing/Usage.svelte new file mode 100644 index 0000000000..b3777007c6 --- /dev/null +++ b/packages/builder/src/components/billing/Usage.svelte @@ -0,0 +1,55 @@ + + +
+
+ + {#if unlimited} + {usage.used} + {:else} + {usage.used} / {usage.total} + {/if} +
+
+ {#if unlimited} + Unlimited + {:else} + + {/if} +
+
+ + diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 39a5def7d6..99cf84e912 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -61,6 +61,10 @@ ]) if (isEnabled(FEATURE_FLAGS.LICENSING)) { + menu = menu.concat({ + title: "Billing", + href: "/builder/portal/settings/billing", + }) menu = menu.concat({ title: "Upgrade", href: "/builder/portal/settings/upgrade", diff --git a/packages/builder/src/pages/builder/portal/settings/billing.svelte b/packages/builder/src/pages/builder/portal/settings/billing.svelte new file mode 100644 index 0000000000..12d4a587e7 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/settings/billing.svelte @@ -0,0 +1,127 @@ + + + + {#if loaded} + + Billing + Get information about your current usage and manage your plan + + + + + + + Your plan + {capitalise(license?.plan.type)} + + + Usage +
+ {#each staticUsage as usage} +
+ +
+ {/each} +
+ + {#if monthlyUsage.length} + + Monthly +
+ {#each monthlyUsage as usage} +
+ +
+ {/each} +
+ +
+ {/if} + + {/if} + + + diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js index a5d33b3b15..8810ce6b74 100644 --- a/packages/builder/src/stores/portal/index.js +++ b/packages/builder/src/stores/portal/index.js @@ -6,3 +6,4 @@ export { email } from "./email" export { auth } from "./auth" export { oidc } from "./oidc" export { templates } from "./templates" +export { licensing } from "./licensing" diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js new file mode 100644 index 0000000000..653dab52ed --- /dev/null +++ b/packages/builder/src/stores/portal/licensing.js @@ -0,0 +1,29 @@ +import { writable } from "svelte/store" +import { API } from "api" + +export const createLicensingStore = () => { + const DEFAULT = { + plans: {}, + } + + const store = writable(DEFAULT) + + const actions = { + getQuotaUsage: async () => { + const quotaUsage = await API.getQuotaUsage() + store.update(state => { + return { + ...state, + quotaUsage, + } + }) + }, + } + + return { + subscribe: store.subscribe, + ...actions, + } +} + +export const licensing = createLicensingStore() diff --git a/packages/frontend-core/src/api/licensing.js b/packages/frontend-core/src/api/licensing.js index a3e5583325..0ee04fbc0b 100644 --- a/packages/frontend-core/src/api/licensing.js +++ b/packages/frontend-core/src/api/licensing.js @@ -27,4 +27,10 @@ export const buildLicensingEndpoints = API => ({ url: "/api/global/license/refresh", }) }, + + getQuotaUsage: async () => { + return API.get({ + url: "/api/license/usage", + }) + }, })