Explain features in the plan component (#3606)

* Explain features in the plan component * Update copy and correct the guest prices * Make description function * Changed to only guest --------- Co-authored-by: Mike Tasset <[email protected]>
specklesystems · Dec 3, 2024 · 256a43f · 256a43f
1 parent 114c762
commit 256a43f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue
@@ -57,6 +57,14 @@
         />
         <XMarkIcon v-else class="w-4 h-4 mx-2 text-danger" />
         <span
+          v-tippy="
+            feature.description(
+              yearlyIntervalSelected
+                ? plan.cost.yearly[Roles.Workspace.Guest]
+                : plan.cost.monthly[Roles.Workspace.Guest]
+            )
+          "
+          class="underline decoration-outline-5 decoration-dashed underline-offset-4 cursor-help"
           :class="{
             'text-foreground-2': !plan.features.includes(feature.name as PlanFeaturesList)
           }"

diff --git a/packages/frontend-2/lib/billing/helpers/constants.ts b/packages/frontend-2/lib/billing/helpers/constants.ts
@@ -11,7 +11,10 @@ const baseFeatures = [
 ]
 
 export const pricingPlansConfig: {
-  features: Record<PlanFeaturesList, { name: string; description: string }>
+  features: Record<
+    PlanFeaturesList,
+    { name: string; description: (price?: number) => string }
+  >
   plans: Record<
     WorkspacePlans.Starter | WorkspacePlans.Plus | WorkspacePlans.Business,
     PricingPlan
@@ -20,35 +23,37 @@ export const pricingPlansConfig: {
   features: {
     [PlanFeaturesList.Workspaces]: {
       name: PlanFeaturesList.Workspaces,
-      description: ''
+      description: () => `A shared space for your team and projects`
     },
     [PlanFeaturesList.RoleManagement]: {
       name: PlanFeaturesList.RoleManagement,
-      description: ''
+      description: () => `Control individual members' access and edit rights`
     },
     [PlanFeaturesList.GuestUsers]: {
       name: PlanFeaturesList.GuestUsers,
-      description: ''
+      description: (price?: number) =>
+        `Give guests access to specific projects £${price}/month/guest`
     },
     [PlanFeaturesList.PrivateAutomateFunctions]: {
       name: PlanFeaturesList.PrivateAutomateFunctions,
-      description: ''
+      description: () =>
+        `Create and manage private automation functions securely within your workspace`
     },
     [PlanFeaturesList.DomainSecurity]: {
       name: PlanFeaturesList.DomainSecurity,
-      description: ''
+      description: () => `Require workspace members to use a verified company email`
     },
     [PlanFeaturesList.SSO]: {
       name: PlanFeaturesList.SSO,
-      description: ''
+      description: () => `Require workspace members to log in with your SSO provider`
     },
     [PlanFeaturesList.CustomDataRegion]: {
       name: PlanFeaturesList.CustomDataRegion,
-      description: ''
+      description: () => `Store the workspace data in a custom region of choice`
     },
     [PlanFeaturesList.PrioritySupport]: {
       name: PlanFeaturesList.PrioritySupport,
-      description: ''
+      description: () => `Personal and fast support`
     }
   },
   plans: {
@@ -73,12 +78,12 @@ export const pricingPlansConfig: {
       features: [...baseFeatures, PlanFeaturesList.SSO],
       cost: {
         [BillingInterval.Monthly]: {
-          [Roles.Workspace.Guest]: 50,
+          [Roles.Workspace.Guest]: 15,
           [Roles.Workspace.Member]: 50,
           [Roles.Workspace.Admin]: 50
         },
         [BillingInterval.Yearly]: {
-          [Roles.Workspace.Guest]: 40,
+          [Roles.Workspace.Guest]: 12,
           [Roles.Workspace.Member]: 40,
           [Roles.Workspace.Admin]: 40
         }
@@ -94,12 +99,12 @@ export const pricingPlansConfig: {
       ],
       cost: {
         [BillingInterval.Monthly]: {
-          [Roles.Workspace.Guest]: 75,
+          [Roles.Workspace.Guest]: 15,
           [Roles.Workspace.Member]: 75,
           [Roles.Workspace.Admin]: 75
         },
         [BillingInterval.Yearly]: {
-          [Roles.Workspace.Guest]: 60,
+          [Roles.Workspace.Guest]: 12,
           [Roles.Workspace.Member]: 60,
           [Roles.Workspace.Admin]: 60
         }