MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add generic page for paywall features

This commit is contained in:
Peter Clement 2023-02-08 15:18:44 +00:00
parent 4c4655bb69
commit bdf381d865
1 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte Normal file
View File

@ -0,0 +1,76 @@
<script>
import {
Layout,
Heading,
Body,
Button,
Divider,
Tags,
Tag,
} from "@budibase/bbui"
import { auth, admin } from "stores/portal"
export let title
export let planType
export let description
export let enabled
export let upgradeButtonClick
</script>
<Layout noPadding>
<Layout gap="XS" noPadding>
<div class="title">
<Heading size="M">{title}</Heading>
{#if !enabled}
<Tags>
<Tag icon="LockClosed">{planType}</Tag>
</Tags>
{/if}
</div>
<Body>{description}</Body>
</Layout>
<Divider size="S" />
{#if enabled}
<slot />
{:else}
<div class="buttons">
<Button
primary
disabled={!$auth.accountPortalAccess && $admin.cloud}
on:click={async () => upgradeButtonClick()}
>
Upgrade
</Button>
<!--Show the view plans button-->
<Button
secondary
on:click={() => {
window.open("https://budibase.com/pricing/", "_blank")
}}
>
View Plans
</Button>
</div>
{/if}
</Layout>
<style>
.buttons {
display: flex;
gap: var(--spacing-l);
}
.title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: var(--spacing-m);
}
.buttons {
display: flex;
flex-direction: row;
gap: var(--spacing-m);
}
</style>