Add free trial modal (#13609)

* Add free_trial to deploy camunda script

* WIP FreeTrial modal

* Handle free trial modal via self endpoint

* Set correct plan title for trial

* Remove catch

* lint

* Refactor

* Remove unnecessary code

* Rename to EnterpriseBasicTrialModal

packages/builder/src/components/portal/onboarding/EnterpriseBasicTrialModal.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { Modal, ModalContent } from "@budibase/bbui"
+  import FreeTrial from "../../../../assets/FreeTrial.svelte"
+  import { get } from "svelte/store"
+  import { auth, licensing } from "stores/portal"
+  import { API } from "api"
+  import { PlanType } from "@budibase/types"
+
+  let freeTrialModal
+
+  $: planType = $licensing?.license?.plan?.type
+  $: showFreeTrialModal(planType, freeTrialModal)
+
+  const showFreeTrialModal = (planType, freeTrialModal) => {
+    if (
+      planType === PlanType.ENTERPRISE_BASIC_TRIAL &&
+      !$auth.user?.freeTrialConfirmedAt
+    ) {
+      freeTrialModal?.show()
+    }
+  }
+</script>
+
+<Modal bind:this={freeTrialModal} disableCancel={true}>
+  <ModalContent
+    confirmText="Get started"
+    size="M"
+    showCancelButton={false}
+    showCloseIcon={false}
+    onConfirm={async () => {
+      if (get(auth).user) {
+        try {
+          await API.updateSelf({
+            freeTrialConfirmedAt: new Date().toISOString(),
+          })
+          // Update the cached user
+          await auth.getSelf()
+        } finally {
+          freeTrialModal.hide()
+        }
+      }
+    }}
+  >
+    <h1>Experience all of Budibase with a free 14-day trial</h1>
+    <div class="free-trial-text">
+      We've upgraded you to a free 14-day trial that allows you to try all our
+      features before deciding which plan is right for you.
+      <p>
+        At the end of your trial, we'll automatically downgrade you to the Free
+        plan unless you choose to upgrade.
+      </p>
+    </div>
+    <FreeTrial />
+  </ModalContent>
+</Modal>
+
+<style>
+  h1 {
+    font-size: 26px;
+  }
+  .free-trial-text {
+    font-size: 16px;
+  }
+</style>

packages/builder/src/helpers/planTitle.js

@@ -20,6 +20,9 @@ export function getFormattedPlanName(userPlanType) {
     case PlanType.ENTERPRISE:
       planName = "Enterprise"
       break
+    case PlanType.ENTERPRISE_BASIC_TRIAL:
+      planName = "Trial"
+      break
     default:
       planName = "Free" // Default to "Free" if the type is not explicitly handled
   }

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -32,6 +32,7 @@
   import { UserAvatars } from "@budibase/frontend-core"
   import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
   import PreviewOverlay from "./_components/PreviewOverlay.svelte"
+  import EnterpriseBasicTrialModal from "components/portal/onboarding/EnterpriseBasicTrialModal.svelte"
 
   export let application
 
@@ -192,6 +193,8 @@
   <CommandPalette />
 </Modal>
 
+<EnterpriseBasicTrialModal />
+
 <style>
   .back-to-apps {
     display: contents;

packages/builder/src/stores/portal/licensing.js

@@ -103,6 +103,8 @@ export const createLicensingStore = () => {
       const isEnterprisePlan = planType === Constants.PlanType.ENTERPRISE
       const isFreePlan = planType === Constants.PlanType.FREE
       const isBusinessPlan = planType === Constants.PlanType.BUSINESS
+      const isEnterpriseTrial =
+        planType === Constants.PlanType.ENTERPRISE_BASIC_TRIAL
       const groupsEnabled = license.features.includes(
         Constants.Features.USER_GROUPS
       )
@@ -143,6 +145,7 @@ export const createLicensingStore = () => {
           isEnterprisePlan,
           isFreePlan,
           isBusinessPlan,
+          isEnterpriseTrial,
           groupsEnabled,
           backupsEnabled,
           brandingEnabled,

packages/frontend-core/src/constants.js

@@ -57,6 +57,7 @@ export const PlanType = {
   PRO: "pro",
   BUSINESS: "business",
   ENTERPRISE: "enterprise",
+  ENTERPRISE_BASIC_TRIAL: "enterprise_basic_trial",
 }
 
 /**

packages/types/src/api/web/auth.ts

@@ -18,6 +18,7 @@ export interface UpdateSelfRequest {
   password?: string
   forceResetPassword?: boolean
   onboardedAt?: string
+  freeTrialConfirmedAt?: string
   appFavourites?: string[]
   tours?: Record<string, Date>
 }

packages/types/src/documents/global/user.ts

@@ -62,6 +62,7 @@ export interface User extends Document {
   dayPassRecordedAt?: string
   userGroups?: string[]
   onboardedAt?: string
+  freeTrialConfirmedAt?: string
   tours?: Record<string, Date>
   scimInfo?: { isSync: true } & Record<string, any>
   appFavourites?: string[]

packages/worker/src/api/routes/global/tests/self.spec.ts

@@ -55,6 +55,7 @@ describe("/api/global/self", () => {
     const res = await config.api.self
       .updateSelf(user, {
         onboardedAt: "2023-03-07T14:10:54.869Z",
+        freeTrialConfirmedAt: "2024-03-17T14:10:54.869Z",
       })
       .expect(200)
 
@@ -63,6 +64,7 @@ describe("/api/global/self", () => {
     user._rev = dbUser._rev
     user.dayPassRecordedAt = mocks.date.MOCK_DATE.toISOString()
     expect(dbUser.onboardedAt).toBe("2023-03-07T14:10:54.869Z")
+    expect(dbUser.freeTrialConfirmedAt).toBe("2024-03-17T14:10:54.869Z")
     expect(res.body._id).toBe(user._id)
   })
 })

packages/worker/src/api/routes/validation/users.ts

@@ -26,6 +26,7 @@ export const buildSelfSaveValidation = () => {
     firstName: OPTIONAL_STRING,
     lastName: OPTIONAL_STRING,
     onboardedAt: Joi.string().optional(),
+    freeTrialConfirmedAt: Joi.string().optional(),
     appFavourites: Joi.array().optional(),
     tours: Joi.object().optional(),
   }

scripts/deploy-camunda.sh

@@ -22,6 +22,7 @@ cd src/main/resources/models
 echo "deploy processes..."
 zbctl deploy resource offboarding.bpmn --insecure
 zbctl deploy resource onboarding.bpmn --insecure
+zbctl deploy resource free_trial.bpmn --insecure
 
 cd ../../../../../budibase/packages/account-portal/packages/server