diff --git a/packages/backend-core/src/constants.js b/packages/backend-core/src/constants.js index 172e66e603..44c271a4f8 100644 --- a/packages/backend-core/src/constants.js +++ b/packages/backend-core/src/constants.js @@ -7,6 +7,7 @@ exports.Cookies = { CurrentApp: "budibase:currentapp", Auth: "budibase:auth", Init: "budibase:init", + ACCOUNT_RETURN_URL: "budibase:account:returnurl", DatasourceAuth: "budibase:datasourceauth", OIDC_CONFIG: "budibase:oidc:config", } diff --git a/packages/backend-core/src/db/views.ts b/packages/backend-core/src/db/views.ts index de313e8190..c337d26eaa 100644 --- a/packages/backend-core/src/db/views.ts +++ b/packages/backend-core/src/db/views.ts @@ -1,5 +1,6 @@ import { DocumentType, ViewName, DeprecatedViews, SEPARATOR } from "./utils" import { getGlobalDB } from "../context" +import PouchDB from "pouchdb" import { StaticDatabases } from "./constants" import { doWithDB } from "./" @@ -201,13 +202,13 @@ export const queryView = async ( try { let response = await db.query(`database/${viewName}`, params) const rows = response.rows - const docs = rows.map((resp: any) => - params.include_docs ? resp.doc : resp.value - ) + const docs = rows.map(row => (params.include_docs ? row.doc : row.value)) + // if arrayResponse has been requested, always return array regardless of length if (opts?.arrayResponse) { return docs } else { + // return the single document if there is only one return docs.length <= 1 ? docs[0] : docs } } catch (err: any) { diff --git a/packages/backend-core/src/environment.ts b/packages/backend-core/src/environment.ts index b979635fcc..be1e1eacfc 100644 --- a/packages/backend-core/src/environment.ts +++ b/packages/backend-core/src/environment.ts @@ -37,7 +37,7 @@ const env = { MULTI_TENANCY: process.env.MULTI_TENANCY, ACCOUNT_PORTAL_URL: process.env.ACCOUNT_PORTAL_URL || "https://account.budibase.app", - ACCOUNT_PORTAL_API_KEY: process.env.ACCOUNT_PORTAL_API_KEY, + ACCOUNT_PORTAL_API_KEY: process.env.ACCOUNT_PORTAL_API_KEY || "", DISABLE_ACCOUNT_PORTAL: process.env.DISABLE_ACCOUNT_PORTAL, SELF_HOSTED: !!parseInt(process.env.SELF_HOSTED || ""), COOKIE_DOMAIN: process.env.COOKIE_DOMAIN, diff --git a/packages/backend-core/src/errors/base.js b/packages/backend-core/src/errors/base.js deleted file mode 100644 index 7cb0c0fc23..0000000000 --- a/packages/backend-core/src/errors/base.js +++ /dev/null @@ -1,11 +0,0 @@ -class BudibaseError extends Error { - constructor(message, code, type) { - super(message) - this.code = code - this.type = type - } -} - -module.exports = { - BudibaseError, -} diff --git a/packages/backend-core/src/errors/base.ts b/packages/backend-core/src/errors/base.ts new file mode 100644 index 0000000000..801dcf168d --- /dev/null +++ b/packages/backend-core/src/errors/base.ts @@ -0,0 +1,10 @@ +export class BudibaseError extends Error { + code: string + type: string + + constructor(message: string, code: string, type: string) { + super(message) + this.code = code + this.type = type + } +} diff --git a/packages/backend-core/src/errors/generic.js b/packages/backend-core/src/errors/generic.js deleted file mode 100644 index 5c7661f035..0000000000 --- a/packages/backend-core/src/errors/generic.js +++ /dev/null @@ -1,11 +0,0 @@ -const { BudibaseError } = require("./base") - -class GenericError extends BudibaseError { - constructor(message, code, type) { - super(message, code, type ? type : "generic") - } -} - -module.exports = { - GenericError, -} diff --git a/packages/backend-core/src/errors/generic.ts b/packages/backend-core/src/errors/generic.ts new file mode 100644 index 0000000000..71b3352438 --- /dev/null +++ b/packages/backend-core/src/errors/generic.ts @@ -0,0 +1,7 @@ +import { BudibaseError } from "./base" + +export class GenericError extends BudibaseError { + constructor(message: string, code: string, type: string) { + super(message, code, type ? type : "generic") + } +} diff --git a/packages/backend-core/src/errors/http.js b/packages/backend-core/src/errors/http.js deleted file mode 100644 index 8e7cab4638..0000000000 --- a/packages/backend-core/src/errors/http.js +++ /dev/null @@ -1,12 +0,0 @@ -const { GenericError } = require("./generic") - -class HTTPError extends GenericError { - constructor(message, httpStatus, code = "http", type = "generic") { - super(message, code, type) - this.status = httpStatus - } -} - -module.exports = { - HTTPError, -} diff --git a/packages/backend-core/src/errors/http.ts b/packages/backend-core/src/errors/http.ts new file mode 100644 index 0000000000..182e009f58 --- /dev/null +++ b/packages/backend-core/src/errors/http.ts @@ -0,0 +1,15 @@ +import { GenericError } from "./generic" + +export class HTTPError extends GenericError { + status: number + + constructor( + message: string, + httpStatus: number, + code = "http", + type = "generic" + ) { + super(message, code, type) + this.status = httpStatus + } +} diff --git a/packages/backend-core/src/errors/index.js b/packages/backend-core/src/errors/index.ts similarity index 65% rename from packages/backend-core/src/errors/index.js rename to packages/backend-core/src/errors/index.ts index 31ffd739a0..be6657093d 100644 --- a/packages/backend-core/src/errors/index.js +++ b/packages/backend-core/src/errors/index.ts @@ -1,5 +1,6 @@ -const http = require("./http") -const licensing = require("./licensing") +import { HTTPError } from "./http" +import { UsageLimitError, FeatureDisabledError } from "./licensing" +import * as licensing from "./licensing" const codes = { ...licensing.codes, @@ -11,7 +12,7 @@ const context = { ...licensing.context, } -const getPublicError = err => { +const getPublicError = (err: any) => { let error if (err.code || err.type) { // add generic error information @@ -32,13 +33,15 @@ const getPublicError = err => { return error } -module.exports = { +const pkg = { codes, types, errors: { - UsageLimitError: licensing.UsageLimitError, - FeatureDisabledError: licensing.FeatureDisabledError, - HTTPError: http.HTTPError, + UsageLimitError, + FeatureDisabledError, + HTTPError, }, getPublicError, } + +export = pkg diff --git a/packages/backend-core/src/errors/licensing.js b/packages/backend-core/src/errors/licensing.js deleted file mode 100644 index 85d207ac35..0000000000 --- a/packages/backend-core/src/errors/licensing.js +++ /dev/null @@ -1,43 +0,0 @@ -const { HTTPError } = require("./http") - -const type = "license_error" - -const codes = { - USAGE_LIMIT_EXCEEDED: "usage_limit_exceeded", - FEATURE_DISABLED: "feature_disabled", -} - -const context = { - [codes.USAGE_LIMIT_EXCEEDED]: err => { - return { - limitName: err.limitName, - } - }, - [codes.FEATURE_DISABLED]: err => { - return { - featureName: err.featureName, - } - }, -} - -class UsageLimitError extends HTTPError { - constructor(message, limitName) { - super(message, 400, codes.USAGE_LIMIT_EXCEEDED, type) - this.limitName = limitName - } -} - -class FeatureDisabledError extends HTTPError { - constructor(message, featureName) { - super(message, 400, codes.FEATURE_DISABLED, type) - this.featureName = featureName - } -} - -module.exports = { - type, - codes, - context, - UsageLimitError, - FeatureDisabledError, -} diff --git a/packages/backend-core/src/errors/licensing.ts b/packages/backend-core/src/errors/licensing.ts new file mode 100644 index 0000000000..7ffcefa167 --- /dev/null +++ b/packages/backend-core/src/errors/licensing.ts @@ -0,0 +1,39 @@ +import { HTTPError } from "./http" + +export const type = "license_error" + +export const codes = { + USAGE_LIMIT_EXCEEDED: "usage_limit_exceeded", + FEATURE_DISABLED: "feature_disabled", +} + +export const context = { + [codes.USAGE_LIMIT_EXCEEDED]: (err: any) => { + return { + limitName: err.limitName, + } + }, + [codes.FEATURE_DISABLED]: (err: any) => { + return { + featureName: err.featureName, + } + }, +} + +export class UsageLimitError extends HTTPError { + limitName: string + + constructor(message: string, limitName: string) { + super(message, 400, codes.USAGE_LIMIT_EXCEEDED, type) + this.limitName = limitName + } +} + +export class FeatureDisabledError extends HTTPError { + featureName: string + + constructor(message: string, featureName: string) { + super(message, 400, codes.FEATURE_DISABLED, type) + this.featureName = featureName + } +} diff --git a/packages/backend-core/src/featureFlags/index.js b/packages/backend-core/src/featureFlags/index.js index 103ac4df59..b328839fda 100644 --- a/packages/backend-core/src/featureFlags/index.js +++ b/packages/backend-core/src/featureFlags/index.js @@ -31,20 +31,26 @@ const TENANT_FEATURE_FLAGS = getFeatureFlags() exports.isEnabled = featureFlag => { const tenantId = tenancy.getTenantId() - - return ( - TENANT_FEATURE_FLAGS && - TENANT_FEATURE_FLAGS[tenantId] && - TENANT_FEATURE_FLAGS[tenantId].includes(featureFlag) - ) + const flags = exports.getTenantFeatureFlags(tenantId) + return flags.includes(featureFlag) } exports.getTenantFeatureFlags = tenantId => { - if (TENANT_FEATURE_FLAGS && TENANT_FEATURE_FLAGS[tenantId]) { - return TENANT_FEATURE_FLAGS[tenantId] + const flags = [] + + if (TENANT_FEATURE_FLAGS) { + const globalFlags = TENANT_FEATURE_FLAGS["*"] + const tenantFlags = TENANT_FEATURE_FLAGS[tenantId] + + if (globalFlags) { + flags.push(...globalFlags) + } + if (tenantFlags) { + flags.push(...tenantFlags) + } } - return [] + return flags } exports.FeatureFlag = { diff --git a/packages/backend-core/src/index.ts b/packages/backend-core/src/index.ts index d9dbe58264..2c234bd4b8 100644 --- a/packages/backend-core/src/index.ts +++ b/packages/backend-core/src/index.ts @@ -1,5 +1,4 @@ import errors from "./errors" - const errorClasses = errors.errors import * as events from "./events" import * as migrations from "./migrations" @@ -15,7 +14,7 @@ import deprovisioning from "./context/deprovision" import auth from "./auth" import constants from "./constants" import * as dbConstants from "./db/constants" -import logging from "./logging" +import * as logging from "./logging" import pino from "./pino" import * as middleware from "./middleware" import plugins from "./plugin" diff --git a/packages/backend-core/src/middleware/authenticated.ts b/packages/backend-core/src/middleware/authenticated.ts index 062070785d..a3c6b67cde 100644 --- a/packages/backend-core/src/middleware/authenticated.ts +++ b/packages/backend-core/src/middleware/authenticated.ts @@ -106,6 +106,7 @@ export = ( user = await getUser(userId, session.tenantId) } user.csrfToken = session.csrfToken + if (session?.lastAccessedAt < timeMinusOneMinute()) { // make sure we denote that the session is still in use await updateSessionTTL(session) diff --git a/packages/backend-core/src/migrations/definitions.ts b/packages/backend-core/src/migrations/definitions.ts index 34ec0f0cad..0eea946be8 100644 --- a/packages/backend-core/src/migrations/definitions.ts +++ b/packages/backend-core/src/migrations/definitions.ts @@ -17,14 +17,6 @@ export const DEFINITIONS: MigrationDefinition[] = [ type: MigrationType.APP, name: MigrationName.APP_URLS, }, - { - type: MigrationType.GLOBAL, - name: MigrationName.DEVELOPER_QUOTA, - }, - { - type: MigrationType.GLOBAL, - name: MigrationName.PUBLISHED_APP_QUOTA, - }, { type: MigrationType.APP, name: MigrationName.EVENT_APP_BACKFILL, diff --git a/packages/backend-core/src/security/sessions.ts b/packages/backend-core/src/security/sessions.ts index f621b99dc2..33230afc60 100644 --- a/packages/backend-core/src/security/sessions.ts +++ b/packages/backend-core/src/security/sessions.ts @@ -2,28 +2,12 @@ const redis = require("../redis/init") const { v4: uuidv4 } = require("uuid") const { logWarn } = require("../logging") const env = require("../environment") - -interface CreateSession { - sessionId: string - tenantId: string - csrfToken?: string -} - -interface Session extends CreateSession { - userId: string - lastAccessedAt: string - createdAt: string - // make optional attributes required - csrfToken: string -} - -interface SessionKey { - key: string -} - -interface ScannedSession { - value: Session -} +import { + Session, + ScannedSession, + SessionKey, + CreateSession, +} from "@budibase/types" // a week in seconds const EXPIRY_SECONDS = 86400 * 7 diff --git a/packages/backend-core/src/users.js b/packages/backend-core/src/users.ts similarity index 60% rename from packages/backend-core/src/users.js rename to packages/backend-core/src/users.ts index 81bf28bb46..0793eeb1d9 100644 --- a/packages/backend-core/src/users.js +++ b/packages/backend-core/src/users.ts @@ -1,29 +1,39 @@ -const { +import { ViewName, getUsersByAppParams, getProdAppID, generateAppUserID, -} = require("./db/utils") -const { queryGlobalView } = require("./db/views") -const { UNICODE_MAX } = require("./db/constants") +} from "./db/utils" +import { queryGlobalView } from "./db/views" +import { UNICODE_MAX } from "./db/constants" +import { User } from "@budibase/types" /** * Given an email address this will use a view to search through * all the users to find one with this email address. * @param {string} email the email to lookup the user by. */ -exports.getGlobalUserByEmail = async email => { +export const getGlobalUserByEmail = async ( + email: String +): Promise => { if (email == null) { throw "Must supply an email address to view" } - return await queryGlobalView(ViewName.USER_BY_EMAIL, { + const response = await queryGlobalView(ViewName.USER_BY_EMAIL, { key: email.toLowerCase(), include_docs: true, }) + + if (Array.isArray(response)) { + // shouldn't be able to happen, but need to handle just in case + throw new Error(`Multiple users found with email address: ${email}`) + } + + return response } -exports.searchGlobalUsersByApp = async (appId, opts) => { +export const searchGlobalUsersByApp = async (appId: any, opts: any) => { if (typeof appId !== "string") { throw new Error("Must provide a string based app ID") } @@ -38,24 +48,24 @@ exports.searchGlobalUsersByApp = async (appId, opts) => { return Array.isArray(response) ? response : [response] } -exports.getGlobalUserByAppPage = (appId, user) => { +export const getGlobalUserByAppPage = (appId: string, user: User) => { if (!user) { return } - return generateAppUserID(getProdAppID(appId), user._id) + return generateAppUserID(getProdAppID(appId), user._id!) } /** * Performs a starts with search on the global email view. */ -exports.searchGlobalUsersByEmail = async (email, opts) => { +export const searchGlobalUsersByEmail = async (email: string, opts: any) => { if (typeof email !== "string") { throw new Error("Must provide a string to search by") } const lcEmail = email.toLowerCase() // handle if passing up startkey for pagination const startkey = opts && opts.startkey ? opts.startkey : lcEmail - let response = await queryGlobalView(ViewName.USER_BY_EMAIL, { + let response = await queryGlobalView(ViewName.USER_BY_EMAIL, { ...opts, startkey, endkey: `${lcEmail}${UNICODE_MAX}`, diff --git a/packages/backend-core/src/utils.js b/packages/backend-core/src/utils.js index 0587267e9a..6b59c7cb72 100644 --- a/packages/backend-core/src/utils.js +++ b/packages/backend-core/src/utils.js @@ -42,6 +42,18 @@ async function resolveAppUrl(ctx) { return app && app.appId ? app.appId : undefined } +exports.isServingApp = ctx => { + // dev app + if (ctx.path.startsWith(`/${APP_PREFIX}`)) { + return true + } + // prod app + if (ctx.path.startsWith(PROD_APP_PREFIX)) { + return true + } + return false +} + /** * Given a request tries to find the appId, which can be located in various places * @param {object} ctx The main request body to look through. diff --git a/packages/bbui/src/Banner/BannerDisplay.svelte b/packages/bbui/src/Banner/BannerDisplay.svelte index aad742b1bd..9ea2eaf2ec 100644 --- a/packages/bbui/src/Banner/BannerDisplay.svelte +++ b/packages/bbui/src/Banner/BannerDisplay.svelte @@ -4,22 +4,32 @@ import { banner } from "../Stores/banner" import Banner from "./Banner.svelte" import { fly } from "svelte/transition" + import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte" diff --git a/packages/bbui/src/InlineAlert/InlineAlert.svelte b/packages/bbui/src/InlineAlert/InlineAlert.svelte index 25e14b7caf..94ac6b2c2a 100644 --- a/packages/bbui/src/InlineAlert/InlineAlert.svelte +++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte @@ -6,6 +6,7 @@ export let header = "" export let message = "" export let onConfirm = undefined + export let buttonText = "" $: icon = selectIcon(type) // if newlines used, convert them to different elements @@ -39,13 +40,16 @@
{splitMsg}
{/each} {#if onConfirm} -
- +
+
{/if}
diff --git a/packages/bbui/src/SideNavigation/Item.svelte b/packages/bbui/src/SideNavigation/Item.svelte index 30da1fa172..aa86fc02a8 100644 --- a/packages/bbui/src/SideNavigation/Item.svelte +++ b/packages/bbui/src/SideNavigation/Item.svelte @@ -1,6 +1,7 @@
  • {/if} + {#if badge} +
    + {badge} +
    + {/if} + {#if multilevel && $$slots.subnav}
    {/if}
    • + + diff --git a/packages/bbui/src/Stores/banner.js b/packages/bbui/src/Stores/banner.js index 81a9ee2204..ba6d187d97 100644 --- a/packages/bbui/src/Stores/banner.js +++ b/packages/bbui/src/Stores/banner.js @@ -1,7 +1,14 @@ import { writable } from "svelte/store" +export const BANNER_TYPES = { + INFO: "info", + NEGATIVE: "negative", +} + export function createBannerStore() { - const DEFAULT_CONFIG = {} + const DEFAULT_CONFIG = { + messages: [], + } const banner = writable(DEFAULT_CONFIG) @@ -20,17 +27,38 @@ export function createBannerStore() { const showStatus = async () => { const config = { message: "Some systems are experiencing issues", - type: "negative", + type: BANNER_TYPES.NEGATIVE, extraButtonText: "View Status", extraButtonAction: () => window.open("https://status.budibase.com/"), } - await show(config) + await queue([config]) + } + + const queue = async entries => { + const priority = { + [BANNER_TYPES.NEGATIVE]: 0, + [BANNER_TYPES.INFO]: 1, + } + banner.update(store => { + const sorted = [...store.messages, ...entries].sort((a, b) => { + if (priority[a.type] == priority[b.type]) { + return 0 + } + return priority[a.type] < priority[b.type] ? -1 : 1 + }) + return { + ...store, + messages: sorted, + } + }) } return { subscribe: banner.subscribe, showStatus, + show, + queue, } } diff --git a/packages/bbui/src/Tooltip/TooltipWrapper.svelte b/packages/bbui/src/Tooltip/TooltipWrapper.svelte index 92f5c6f474..e7a96f6cd8 100644 --- a/packages/bbui/src/Tooltip/TooltipWrapper.svelte +++ b/packages/bbui/src/Tooltip/TooltipWrapper.svelte @@ -4,6 +4,7 @@ export let tooltip = "" export let size = "M" + export let disabled = true let showTooltip = false @@ -19,7 +20,7 @@ on:mouseleave={() => (showTooltip = false)} on:focus > - + {#if showTooltip}
    @@ -54,7 +55,6 @@ transform: scale(0.75); } .icon-small { - margin-top: -2px; - margin-bottom: -5px; + margin-bottom: -2px; } diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index b45f3e9ed6..ead226bdc3 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -34,6 +34,7 @@ export { default as Layout } from "./Layout/Layout.svelte" export { default as Page } from "./Layout/Page.svelte" export { default as Link } from "./Link/Link.svelte" export { default as Tooltip } from "./Tooltip/Tooltip.svelte" +export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte" export { default as Menu } from "./Menu/Menu.svelte" export { default as MenuSection } from "./Menu/Section.svelte" export { default as MenuSeparator } from "./Menu/Separator.svelte" @@ -94,7 +95,7 @@ export { default as clickOutside } from "./Actions/click_outside" // Stores export { notifications, createNotificationStore } from "./Stores/notifications" -export { banner } from "./Stores/banner" +export { banner, BANNER_TYPES } from "./Stores/banner" // Helpers export * as Helpers from "./helpers" diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index 0fb0fe59d5..4d193df104 100644 --- a/packages/builder/src/App.svelte +++ b/packages/builder/src/App.svelte @@ -4,6 +4,7 @@ import { NotificationDisplay, BannerDisplay } from "@budibase/bbui" import { parse, stringify } from "qs" import HelpIcon from "components/common/HelpIcon.svelte" + import LicensingOverlays from "components/portal/licensing/LicensingOverlays.svelte" const queryHandler = { parse, stringify } @@ -12,6 +13,9 @@ + + +
    diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 35c4587874..69bca7eac3 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -1,5 +1,6 @@ import { getFrontendStore } from "./store/frontend" import { getAutomationStore } from "./store/automation" +import { getTemporalStore } from "./store/temporal" import { getThemeStore } from "./store/theme" import { derived } from "svelte/store" import { findComponent, findComponentPath } from "./componentUtils" @@ -8,6 +9,7 @@ import { RoleUtils } from "@budibase/frontend-core" export const store = getFrontendStore() export const automationStore = getAutomationStore() export const themeStore = getThemeStore() +export const temporalStore = getTemporalStore() export const selectedScreen = derived(store, $store => { return $store.screens.find(screen => screen._id === $store.selectedScreenId) diff --git a/packages/builder/src/builderStore/store/temporal.js b/packages/builder/src/builderStore/store/temporal.js new file mode 100644 index 0000000000..ca70fd6293 --- /dev/null +++ b/packages/builder/src/builderStore/store/temporal.js @@ -0,0 +1,43 @@ +import { createLocalStorageStore } from "@budibase/frontend-core" +import { get } from "svelte/store" + +export const getTemporalStore = () => { + const initialValue = {} + + const localStorageKey = `bb-temporal` + const store = createLocalStorageStore(localStorageKey, initialValue) + + const setExpiring = (key, data, duration) => { + const updated = { + ...data, + expiry: Date.now() + duration * 1000, + } + + store.update(state => ({ + ...state, + [key]: updated, + })) + } + + const getExpiring = key => { + const entry = get(store)[key] + if (!entry) { + return + } + const currentExpiry = entry.expiry + if (currentExpiry < Date.now()) { + store.update(state => { + delete state[key] + return state + }) + return null + } else { + return entry + } + } + + return { + subscribe: store.subscribe, + actions: { setExpiring, getExpiring }, + } +} diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte index c96bff8d5e..6041a904fd 100644 --- a/packages/builder/src/components/common/TemplateDisplay.svelte +++ b/packages/builder/src/components/common/TemplateDisplay.svelte @@ -10,6 +10,7 @@ } from "@budibase/bbui" import TemplateCard from "components/common/TemplateCard.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte" + import { licensing } from "stores/portal" export let templates @@ -96,15 +97,17 @@ backgroundColour={templateEntry.background} icon={templateEntry.icon} > - + {#if $licensing?.usageMetrics?.apps < 100} + + {/if} + import { Modal, ModalContent, Body } from "@budibase/bbui" + import { auth, admin } from "stores/portal" + + export let onDismiss = () => {} + export let onShow = () => {} + + let accountDowngradeModal + + $: accountUrl = $admin.accountPortalUrl + $: upgradeUrl = `${accountUrl}/portal/upgrade` + + export function show() { + accountDowngradeModal.show() + } + + export function hide() { + accountDowngradeModal.hide() + } + + + + { + window.location.href = upgradeUrl + } + : null} + > + + The payment for your subscription has failed and we have downgraded your + account to the Free plan. + + Upgrade to restore full functionality. + {#if !$auth.user.accountPortalAccess} + Please contact the account holder to upgrade. + {/if} + + + + diff --git a/packages/builder/src/components/portal/licensing/AppLimitModal.svelte b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte new file mode 100644 index 0000000000..39f553517e --- /dev/null +++ b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte @@ -0,0 +1,47 @@ + + + + { + window.location.href = upgradeUrl + } + : null} + > + + You are currently on our Free plan. Upgrade + to our Pro plan to get unlimited apps and additional features. + + {#if !$auth.user.accountPortalAccess} + Please contact the account holder to upgrade. + {/if} + + + + diff --git a/packages/builder/src/components/portal/licensing/DayPassWarningModal.svelte b/packages/builder/src/components/portal/licensing/DayPassWarningModal.svelte new file mode 100644 index 0000000000..b1aade2ca5 --- /dev/null +++ b/packages/builder/src/components/portal/licensing/DayPassWarningModal.svelte @@ -0,0 +1,78 @@ + + + + {#if $auth.user.accountPortalAccess} + { + window.location.href = upgradeUrl + }} + > + + You have used {dayPassesUsed}% of + your plans Day Passes with {daysRemaining} day{daysRemaining == 1 + ? "" + : "s"} remaining. + + + + + {dayPassesBody} + + {:else} + + + You have used {dayPassesUsed}% of + your plans Day Passes with {daysRemaining} day{daysRemaining == 1 + ? "" + : "s"} remaining. + + + + + Please contact your account holder to upgrade. + + {/if} + + + diff --git a/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte b/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte new file mode 100644 index 0000000000..8431b860e8 --- /dev/null +++ b/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte @@ -0,0 +1,112 @@ + + + + + diff --git a/packages/builder/src/components/portal/licensing/PaymentFailedModal.svelte b/packages/builder/src/components/portal/licensing/PaymentFailedModal.svelte new file mode 100644 index 0000000000..21a3c2dcd9 --- /dev/null +++ b/packages/builder/src/components/portal/licensing/PaymentFailedModal.svelte @@ -0,0 +1,84 @@ + + + + {#if $auth.user.accountPortalAccess} + { + window.location.href = upgradeUrl + }} + > + The payment for your subscription has failed + + Please upgrade your billing details before your account gets downgraded + to the free plan + + +
    + {`${$licensing.pastDueDaysRemaining} day${ + $licensing.pastDueDaysRemaining == 1 ? "" : "s" + } remaining`} + + + +
    + +     + {:else} + + The payment for your subscription has failed + + Please upgrade your billing details before your account gets downgraded + to the free plan + + Please contact your account holder. + +
    + {`${$licensing.pastDueDaysRemaining} day${ + $licensing.pastDueDaysRemaining == 1 ? "" : "s" + } remaining`} + + + +
    + +     + {/if} +     + + diff --git a/packages/builder/src/components/portal/licensing/constants.js b/packages/builder/src/components/portal/licensing/constants.js new file mode 100644 index 0000000000..57f3a36709 --- /dev/null +++ b/packages/builder/src/components/portal/licensing/constants.js @@ -0,0 +1,15 @@ +export const ExpiringKeys = { + LICENSING_DAYPASS_WARNING_MODAL: "licensing_daypass_warning_90_modal", + LICENSING_DAYPASS_WARNING_BANNER: "licensing_daypass_warning_90_banner", + LICENSING_PAYMENT_FAILED: "licensing_payment_failed", + LICENSING_ACCOUNT_DOWNGRADED_MODAL: "licensing_account_downgraded_modal", + LICENSING_APP_LIMIT_MODAL: "licensing_app_limit_modal", + LICENSING_ROWS_WARNING_BANNER: "licensing_rows_warning_banner", + LICENSING_AUTOMATIONS_WARNING_BANNER: "licensing_automations_warning_banner", + LICENSING_QUERIES_WARNING_BANNER: "licensing_queries_warning_banner", +} + +export const StripeStatus = { + PAST_DUE: "past_due", + ACTIVE: "active", +} diff --git a/packages/builder/src/components/portal/licensing/licensingBanners.js b/packages/builder/src/components/portal/licensing/licensingBanners.js new file mode 100644 index 0000000000..37d8e4a540 --- /dev/null +++ b/packages/builder/src/components/portal/licensing/licensingBanners.js @@ -0,0 +1,156 @@ +import { ExpiringKeys } from "./constants" +import { temporalStore } from "builderStore" +import { admin, auth, licensing } from "stores/portal" +import { get } from "svelte/store" +import { BANNER_TYPES } from "@budibase/bbui" + +const oneDayInSeconds = 86400 + +const defaultCacheFn = key => { + temporalStore.actions.setExpiring(key, {}, oneDayInSeconds) +} + +const defaultAction = key => { + if (!get(auth).user.accountPortalAccess) { + return {} + } + return { + extraButtonText: "Upgrade Plan", + extraButtonAction: () => { + defaultCacheFn(key) + window.location.href = `${get(admin).accountPortalUrl}/portal/upgrade` + }, + } +} + +const buildUsageInfoBanner = ( + metricKey, + metricLabel, + cacheKey, + percentageThreshold, + customMessage +) => { + const appAuth = get(auth) + const appLicensing = get(licensing) + + const displayPercent = + appLicensing?.usageMetrics[metricKey] > 100 + ? 100 + : appLicensing?.usageMetrics[metricKey] + + let bannerConfig = { + key: cacheKey, + type: BANNER_TYPES.INFO, + onChange: () => { + defaultCacheFn(cacheKey) + }, + message: customMessage + ? customMessage + : `You have used ${displayPercent}% of your monthly usage of ${metricLabel} with ${ + appLicensing.quotaResetDaysRemaining + } day${ + appLicensing.quotaResetDaysRemaining == 1 ? "" : "s" + } remaining. ${ + appAuth.user.accountPortalAccess + ? "" + : "Please contact your account holder to upgrade" + }`, + criteria: () => { + return appLicensing?.usageMetrics[metricKey] >= percentageThreshold + }, + tooltip: appLicensing?.quotaResetDate, + } + + return !get(auth).user.accountPortalAccess + ? bannerConfig + : { + ...bannerConfig, + ...defaultAction(cacheKey), + } +} + +const buildDayPassBanner = () => { + const appAuth = get(auth) + const appLicensing = get(licensing) + if (get(licensing)?.usageMetrics["dayPasses"] >= 100) { + return { + key: "max_dayPasses", + type: BANNER_TYPES.NEGATIVE, + criteria: () => { + return true + }, + message: `Your apps are currently offline. You have exceeded your plans limit for Day Passes. ${ + appAuth.user.accountPortalAccess + ? "" + : "Please contact your account holder to upgrade." + }`, + ...defaultAction(), + showCloseButton: false, + } + } + + return buildUsageInfoBanner( + "dayPasses", + "Day Passes", + ExpiringKeys.LICENSING_DAYPASS_WARNING_BANNER, + 90, + `You have used ${ + appLicensing?.usageMetrics["dayPasses"] + }% of your monthly usage of Day Passes with ${ + appLicensing?.quotaResetDaysRemaining + } day${ + get(licensing).quotaResetDaysRemaining == 1 ? "" : "s" + } remaining. All apps will be taken offline if this limit is reached. ${ + appAuth.user.accountPortalAccess + ? "" + : "Please contact your account holder to upgrade." + }` + ) +} + +const buildPaymentFailedBanner = () => { + return { + key: "payment_Failed", + type: BANNER_TYPES.NEGATIVE, + criteria: () => { + return get(licensing)?.accountPastDue && !get(licensing).isFreePlan() + }, + message: `Payment Failed - Please update your billing details or your account will be downgrades in + ${get(licensing)?.pastDueDaysRemaining} day${ + get(licensing)?.pastDueDaysRemaining == 1 ? "" : "s" + }`, + ...defaultAction(), + showCloseButton: false, + tooltip: get(licensing).pastDueEndDate, + } +} + +export const getBanners = () => { + return [ + buildPaymentFailedBanner(), + buildDayPassBanner(ExpiringKeys.LICENSING_DAYPASS_WARNING_BANNER), + buildUsageInfoBanner( + "rows", + "Rows", + ExpiringKeys.LICENSING_ROWS_WARNING_BANNER, + 90 + ), + buildUsageInfoBanner( + "automations", + "Automations", + ExpiringKeys.LICENSING_AUTOMATIONS_WARNING_BANNER, + 90 + ), + buildUsageInfoBanner( + "queries", + "Queries", + ExpiringKeys.LICENSING_QUERIES_WARNING_BANNER, + 90 + ), + ].filter(licensingBanner => { + return ( + !temporalStore.actions.getExpiring(licensingBanner.key) && + licensingBanner.criteria() + ) + }) +} diff --git a/packages/builder/src/components/usage/Usage.svelte b/packages/builder/src/components/usage/Usage.svelte index cd9071785d..49c4205a4c 100644 --- a/packages/builder/src/components/usage/Usage.svelte +++ b/packages/builder/src/components/usage/Usage.svelte @@ -1,10 +1,15 @@
    - +
    + {#if showWarning} + + {/if} +
    + {usage.name} +
    +
    {#if unlimited} - {usage.used} + {usage.used} / Unlimited {:else} {usage.used} / {usage.total} {/if}
    {#if unlimited} - Unlimited + {:else} - + + {/if} + {#if showWarning} + + To get more {usage.name.toLowerCase()} + {#if accountPortalAccess} + upgrade your plan + {:else} + contact your account holder + {/if} + {/if}
    @@ -51,6 +89,13 @@ display: flex; flex-direction: row; justify-content: space-between; - gap: var(--spacing-m); + margin-bottom: 12px; + } + .header-container { + display: flex; + } + .heading { + margin-top: 3px; + margin-left: 5px; } diff --git a/packages/builder/src/components/usage/UsageDashCard.svelte b/packages/builder/src/components/usage/UsageDashCard.svelte new file mode 100644 index 0000000000..6dd0b3d969 --- /dev/null +++ b/packages/builder/src/components/usage/UsageDashCard.svelte @@ -0,0 +1,119 @@ + + +
    +
    +
    + +
    + {description} +
    + {title} + {#if textRows.length} +
    + {#each textRows as row} + {#if row.tooltip} + + {row.message} + + {:else} + {row.message} + {/if} + {/each} +
    + {/if} +     +
    +
    + {#if secondaryDefined} +
    + +
    + {/if} + {#if primaryDefined} +
    + +
    + {/if} +
    +
    +
    + +
    +
    + + diff --git a/packages/builder/src/components/usage/index.js b/packages/builder/src/components/usage/index.js new file mode 100644 index 0000000000..48c0e2ea2c --- /dev/null +++ b/packages/builder/src/components/usage/index.js @@ -0,0 +1,2 @@ +export { default as Usage } from "./Usage.svelte" +export { default as DashCard } from "./UsageDashCard.svelte" diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js index 151a0cdf8d..49054ae247 100644 --- a/packages/builder/src/constants/index.js +++ b/packages/builder/src/constants/index.js @@ -58,6 +58,13 @@ export const DefaultAppTheme = { navTextColor: "var(--spectrum-global-color-gray-800)", } +export const PlanType = { + FREE: "free", + PRO: "pro", + BUSINESS: "business", + ENTERPRISE: "enterprise", +} + export const PluginSource = { URL: "URL", NPM: "NPM", diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte index 2e8ea2ef0a..8d604e8790 100644 --- a/packages/builder/src/pages/builder/_layout.svelte +++ b/packages/builder/src/pages/builder/_layout.svelte @@ -1,6 +1,6 @@ @@ -121,6 +133,7 @@ > + diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js index 653dab52ed..9d63a9edb5 100644 --- a/packages/builder/src/stores/portal/licensing.js +++ b/packages/builder/src/stores/portal/licensing.js @@ -1,14 +1,22 @@ -import { writable } from "svelte/store" +import { writable, get } from "svelte/store" import { API } from "api" +import { auth } from "stores/portal" +import { Constants } from "@budibase/frontend-core" +import { StripeStatus } from "components/portal/licensing/constants" export const createLicensingStore = () => { const DEFAULT = { plans: {}, } + const oneDayInMilliseconds = 86400000 const store = writable(DEFAULT) const actions = { + init: async () => { + await actions.getQuotaUsage() + await actions.getUsageMetrics() + }, getQuotaUsage: async () => { const quotaUsage = await API.getQuotaUsage() store.update(state => { @@ -18,6 +26,80 @@ export const createLicensingStore = () => { } }) }, + getUsageMetrics: async () => { + const quota = get(store).quotaUsage + const license = get(auth).user.license + const now = new Date() + + const getMetrics = (keys, license, quota) => { + if (!license || !quota || !keys) { + return {} + } + return keys.reduce((acc, key) => { + const quotaLimit = license[key].value + const quotaUsed = (quota[key] / quotaLimit) * 100 + acc[key] = quotaLimit > -1 ? Math.round(quotaUsed) : -1 + return acc + }, {}) + } + const monthlyMetrics = getMetrics( + ["dayPasses", "queries", "automations"], + license.quotas.usage.monthly, + quota.monthly.current + ) + const staticMetrics = getMetrics( + ["apps", "rows"], + license.quotas.usage.static, + quota.usageQuota + ) + + const getDaysBetween = (dateStart, dateEnd) => { + return dateEnd > dateStart + ? Math.round( + (dateEnd.getTime() - dateStart.getTime()) / oneDayInMilliseconds + ) + : 0 + } + + const quotaResetDate = new Date(quota.quotaReset) + const quotaResetDaysRemaining = getDaysBetween(now, quotaResetDate) + + const accountDowngraded = + license?.billing?.subscription?.downgradeAt && + license?.billing?.subscription?.downgradeAt <= now.getTime() && + license?.billing?.subscription?.status === StripeStatus.PAST_DUE && + license?.plan.type === Constants.PlanType.FREE + + const pastDueAtMilliseconds = license?.billing?.subscription?.pastDueAt + const downgradeAtMilliseconds = + license?.billing?.subscription?.downgradeAt + let pastDueDaysRemaining + let pastDueEndDate + + if (pastDueAtMilliseconds && downgradeAtMilliseconds) { + pastDueEndDate = new Date(downgradeAtMilliseconds) + pastDueDaysRemaining = getDaysBetween( + new Date(pastDueAtMilliseconds), + pastDueEndDate + ) + } + + store.update(state => { + return { + ...state, + usageMetrics: { ...monthlyMetrics, ...staticMetrics }, + quotaResetDaysRemaining, + quotaResetDate, + accountDowngraded, + accountPastDue: pastDueAtMilliseconds != null, + pastDueEndDate, + pastDueDaysRemaining, + isFreePlan: () => { + return license?.plan.type === Constants.PlanType.FREE + }, + } + }) + }, } return { diff --git a/packages/client/src/components/MadeInBudibase.svelte b/packages/client/src/components/MadeInBudibase.svelte index 2e5d6336f1..ef31a9cfb5 100644 --- a/packages/client/src/components/MadeInBudibase.svelte +++ b/packages/client/src/components/MadeInBudibase.svelte @@ -1,15 +1,20 @@ -     + import { Link } from "@budibase/bbui" + + +
    Budibase

    Made In Budibase

    -     +