Add ability to paywall component settings

packages/builder/src/components/design/settings/componentSettings.js

@@ -1,4 +1,6 @@
 import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
+import { licensing } from "stores/portal"
+import { get } from "svelte/store"
 import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
@@ -26,7 +28,8 @@ import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration
 import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte"
 import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"
 import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
-import FormStepControls from "components/design/settings/controls/FormStepControls.svelte"
+import FormStepControls from "./controls/FormStepControls.svelte"
+import PaywalledSetting from "./controls/PaywalledSetting.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -86,11 +89,16 @@ const componentMap = {
 }
 
 export const getComponentForSetting = setting => {
-  const { type, showInBar, barStyle } = setting || {}
+  const { type, showInBar, barStyle, license } = setting || {}
   if (!type) {
     return null
   }
 
+  // Check for paywalled settings
+  if (license && get(licensing).isFreePlan) {
+    return PaywalledSetting
+  }
+
   // We can show a clone of the bar settings for certain select settings
   if (showInBar && type === "select" && barStyle === "buttons") {
     return BarButtonList

packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Tag, Tags } from "@budibase/bbui"
+  import { getFormattedPlanName } from "helpers/planTitle"
+
+  export let license
+
+  $: title = getFormattedPlanName(license)
+</script>
+
+<div>
+  <Tags>
+    <Tag icon="LockClosed">{title}</Tag>
+  </Tags>
+</div>
+
+<style>
+  div {
+    height: 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -183,6 +183,7 @@
               props={{
                 // Generic settings
                 placeholder: setting.placeholder || null,
+                license: setting.license,
 
                 // Select settings
                 options: setting.options || [],

packages/client/manifest.json

@@ -4614,6 +4614,7 @@
         "type": "select",
         "label": "Auto-refresh",
         "key": "autoRefresh",
+        "license": "premium",
         "placeholder": "Never",
         "options": [
           {