From 8b7e7f792ffb320c8c08a0a8f9bc0503ae39127b Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 18 Nov 2024 23:18:02 +0100
Subject: [PATCH 1/6] Abstracted table components

---
 .../workspaces/billing/PricingTable.vue       | 156 ------------------
 .../billing/PricingTable/Desktop.vue          |  78 +++++++++
 .../billing/PricingTable/Header.vue           |  74 +++++++++
 .../billing/PricingTable/PricingTable.vue     |  46 ++++++
 .../lib/billing/helpers/constants.ts          |  20 +--
 .../frontend-2/lib/billing/helpers/types.ts   |  24 +++
 .../lib/common/generated/gql/gql.ts           |   1 +
 7 files changed, 231 insertions(+), 168 deletions(-)
 delete mode 100644 packages/frontend-2/components/settings/workspaces/billing/PricingTable.vue
 create mode 100644 packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
 create mode 100644 packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
 create mode 100644 packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
 create mode 100644 packages/frontend-2/lib/billing/helpers/types.ts

diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable.vue
deleted file mode 100644
index 7470619f7d..0000000000
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div class="flex flex-col gap-y-6">
-    <div class="flex justify-between">
-      <SettingsSectionHeader
-        :title="hasTrialPlan ? 'Start your subscription' : 'Upgrade your plan'"
-        subheading
-      />
-      <div class="flex items-center gap-x-4">
-        <p class="text-foreground-3 text-body-xs">Save 20% with annual billing</p>
-        <FormSwitch v-model="isYearlyPlan" :show-label="false" name="annual billing" />
-      </div>
-    </div>
-
-    <table class="w-full flex flex-col">
-      <thead>
-        <tr class="w-full flex">
-          <th class="w-1/4 flex pl-5 pr-6 pt-4 pb-2 font-medium">
-            <h4>Compare plans</h4>
-          </th>
-          <th
-            v-for="plan in pricingPlans"
-            :key="plan.name"
-            class="w-1/4 flex flex-col gap-y-1 px-6 pt-4 pb-2 font-normal"
-            :class="[
-              plan.name === WorkspacePlans.Team
-                ? 'border border-b-0 border-outline-3 bg-foundation-2 rounded-t-lg'
-                : ''
-            ]"
-            scope="col"
-          >
-            <h4 class="text-foreground text-body-xs">
-              Workspace
-              <span class="capitalize">{{ plan.name }}</span>
-            </h4>
-            <p class="text-foreground text-heading font-normal">
-              £{{
-                isYearlyPlan
-                  ? plan.cost.yearly[Roles.Workspace.Member]
-                  : plan.cost.monthly[Roles.Workspace.Member]
-              }}
-              per seat/month
-            </p>
-            <p class="text-foreground-2 text-body-2xs pt-1">
-              Billed {{ isYearlyPlan ? 'annually' : 'monthly' }}
-            </p>
-            <FormButton
-              :color="plan.name === WorkspacePlans.Team ? 'primary' : 'outline'"
-              :disabled="!hasTrialPlan && !canUpgradeToPlan(plan.name)"
-              class="mt-3"
-              @click="onUpgradePlanClick(plan.name)"
-            >
-              {{ hasTrialPlan ? 'Subscribe' : 'Upgrade' }} to&nbsp;
-              <span class="capitalize">{{ plan.name }}</span>
-            </FormButton>
-          </th>
-        </tr>
-      </thead>
-      <tbody class="w-full flex flex-col">
-        <tr v-for="(feature, key, index) in features" :key="key" class="flex">
-          <th
-            class="font-normal text-foreground text-body-xs w-1/4 pr-3 pt-1"
-            scope="row"
-          >
-            <div class="border-b border-outline-3 min-h-[42px] pl-5 flex items-center">
-              {{ feature.name }}
-            </div>
-          </th>
-          <td
-            v-for="plan in pricingPlans"
-            :key="plan.name"
-            class="px-3 w-1/4 pt-1"
-            :class="[
-              plan.name === WorkspacePlans.Team
-                ? 'border-l border-r border-outline-3 bg-foundation-2'
-                : '',
-              plan.name === WorkspacePlans.Team &&
-              index === Object.values(features).length - 1
-                ? 'pb-6 border-b rounded-b-lg'
-                : ''
-            ]"
-          >
-            <div class="border-b border-outline-3 flex items-center px-3 min-h-[42px]">
-              <CheckIcon
-                v-if="plan.features.includes(feature.name)"
-                class="w-3 h-3 text-foreground"
-              />
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { SettingsWorkspacesBillingPricingTable_WorkspacePlanFragment } from '~/lib/common/generated/gql/graphql'
-import {
-  WorkspacePlans,
-  BillingInterval,
-  WorkspacePlanStatuses
-} from '~/lib/common/generated/gql/graphql'
-import { pricingPlansConfig } from '~/lib/billing/helpers/constants'
-import { CheckIcon } from '@heroicons/vue/24/outline'
-import { useBillingActions } from '~/lib/billing/composables/actions'
-import { graphql } from '~/lib/common/generated/gql'
-import type { MaybeNullOrUndefined } from '@speckle/shared'
-import { Roles } from '@speckle/shared'
-
-graphql(`
-  fragment SettingsWorkspacesBillingPricingTable_WorkspacePlan on WorkspacePlan {
-    name
-    status
-  }
-`)
-
-const props = defineProps<{
-  workspaceId: string
-  currentPlan: MaybeNullOrUndefined<SettingsWorkspacesBillingPricingTable_WorkspacePlanFragment>
-}>()
-
-const { upgradePlanRedirect } = useBillingActions()
-
-const pricingPlans = ref([
-  pricingPlansConfig.plans[WorkspacePlans.Team],
-  pricingPlansConfig.plans[WorkspacePlans.Pro],
-  pricingPlansConfig.plans[WorkspacePlans.Business]
-])
-const features = ref(pricingPlansConfig.features)
-const isYearlyPlan = ref(false)
-
-const onUpgradePlanClick = (plan: WorkspacePlans) => {
-  upgradePlanRedirect({
-    plan,
-    cycle: isYearlyPlan.value ? BillingInterval.Yearly : BillingInterval.Monthly,
-    workspaceId: props.workspaceId
-  })
-}
-
-const hasTrialPlan = computed(
-  () => props.currentPlan?.status === WorkspacePlanStatuses.Trial || !props.currentPlan
-)
-
-const canUpgradeToPlan = (plan: WorkspacePlans) => {
-  if (!props.currentPlan?.name) return false
-
-  const allowedUpgrades: Record<WorkspacePlans, WorkspacePlans[]> = {
-    [WorkspacePlans.Team]: [WorkspacePlans.Pro, WorkspacePlans.Business],
-    [WorkspacePlans.Pro]: [WorkspacePlans.Business],
-    [WorkspacePlans.Business]: [],
-    [WorkspacePlans.Academia]: [],
-    [WorkspacePlans.Unlimited]: []
-  }
-
-  return allowedUpgrades[props.currentPlan.name]?.includes(plan) ?? false
-}
-</script>
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
new file mode 100644
index 0000000000..cce8ba9220
--- /dev/null
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
@@ -0,0 +1,78 @@
+<template>
+  <table class="w-full flex flex-col">
+    <thead>
+      <tr class="w-full flex">
+        <th class="w-1/4 flex pl-5 pr-6 pt-4 pb-2 font-medium">
+          <h4>Compare plans</h4>
+        </th>
+        <th
+          v-for="plan in plans"
+          :key="plan.name"
+          class="w-1/4 px-6 pt-4 pb-2"
+          :class="[
+            plan.name === WorkspacePlans.Team
+              ? 'border border-b-0 border-outline-3 bg-foundation-2 rounded-t-lg'
+              : ''
+          ]"
+          scope="col"
+        >
+          <SettingsWorkspacesBillingPricingTableHeader
+            :plan="plan"
+            :is-yearly-plan="isYearlyPlan"
+            :current-plan="currentPlan"
+          />
+        </th>
+      </tr>
+    </thead>
+    <tbody class="w-full flex flex-col">
+      <tr v-for="(feature, key, index) in features" :key="key" class="flex">
+        <th
+          class="font-normal text-foreground text-body-xs w-1/4 pr-3 pt-1"
+          scope="row"
+        >
+          <div class="border-b border-outline-3 min-h-[42px] pl-5 flex items-center">
+            {{ feature.name }}
+          </div>
+        </th>
+        <td
+          v-for="plan in plans"
+          :key="plan.name"
+          class="px-3 w-1/4 pt-1"
+          :class="[
+            plan.name === WorkspacePlans.Team
+              ? 'border-l border-r border-outline-3 bg-foundation-2'
+              : '',
+            plan.name === WorkspacePlans.Team &&
+            index === Object.values(features).length - 1
+              ? 'pb-6 border-b rounded-b-lg'
+              : ''
+          ]"
+        >
+          <div class="border-b border-outline-3 flex items-center px-3 min-h-[42px]">
+            <CheckIcon
+              v-if="plan.features.includes(feature.name as PlanFeaturesList)"
+              class="w-3 h-3 text-foreground"
+            />
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import type { WorkspacePlan } from '~/lib/common/generated/gql/graphql'
+import { WorkspacePlans } from '~/lib/common/generated/gql/graphql'
+import { pricingPlansConfig } from '~/lib/billing/helpers/constants'
+import type { PlanFeaturesList } from '~/lib/billing/helpers/types'
+import { CheckIcon } from '@heroicons/vue/24/outline'
+
+defineProps<{
+  isYearlyPlan: boolean
+  currentPlan: WorkspacePlan
+  workspaceId: string
+}>()
+
+const plans = ref(pricingPlansConfig.plans)
+const features = ref(pricingPlansConfig.features)
+</script>
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
new file mode 100644
index 0000000000..1087c53f1c
--- /dev/null
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-col gap-y-1 font-normal">
+    <h4 class="text-foreground text-body-xs">
+      Workspace
+      <span class="capitalize">{{ plan.name }}</span>
+    </h4>
+    <p class="text-foreground text-heading">
+      £{{
+        isYearlyPlan
+          ? plan.cost.yearly[Roles.Workspace.Member]
+          : plan.cost.monthly[Roles.Workspace.Member]
+      }}
+      per seat/month
+    </p>
+    <p class="text-foreground-2 text-body-2xs pt-1">
+      Billed {{ isYearlyPlan ? 'annually' : 'monthly' }}
+    </p>
+    <FormButton
+      :color="plan.name === WorkspacePlans.Team ? 'primary' : 'outline'"
+      :disabled="!hasTrialPlan && !canUpgradeToPlan"
+      class="mt-3"
+      @click="onUpgradePlanClick(plan.name)"
+    >
+      {{ hasTrialPlan ? 'Subscribe' : 'Upgrade' }} to
+      <span class="capitalize">{{ plan.name }}</span>
+    </FormButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type PricingPlan } from '@/lib/billing/helpers/types'
+import { Roles } from '@speckle/shared'
+import {
+  type WorkspacePlan,
+  WorkspacePlanStatuses,
+  WorkspacePlans,
+  BillingInterval
+} from '~/lib/common/generated/gql/graphql'
+import { useBillingActions } from '~/lib/billing/composables/actions'
+
+const props = defineProps<{
+  plan: PricingPlan
+  isYearlyPlan: boolean
+  currentPlan: WorkspacePlan
+  workspaceId: string
+}>()
+
+const { upgradePlanRedirect } = useBillingActions()
+
+const canUpgradeToPlan = computed(() => {
+  if (!props.currentPlan) return false
+
+  const allowedUpgrades: Record<WorkspacePlans, WorkspacePlans[]> = {
+    [WorkspacePlans.Team]: [WorkspacePlans.Pro, WorkspacePlans.Business],
+    [WorkspacePlans.Pro]: [WorkspacePlans.Business],
+    [WorkspacePlans.Business]: [],
+    [WorkspacePlans.Academia]: [],
+    [WorkspacePlans.Unlimited]: []
+  }
+
+  return allowedUpgrades[props.currentPlan.name].includes(props.plan.name)
+})
+const hasTrialPlan = computed(
+  () => props.currentPlan?.status === WorkspacePlanStatuses.Trial || !props.currentPlan
+)
+
+const onUpgradePlanClick = (plan: WorkspacePlans) => {
+  upgradePlanRedirect({
+    plan,
+    cycle: props.isYearlyPlan ? BillingInterval.Yearly : BillingInterval.Monthly,
+    workspaceId: props.workspaceId
+  })
+}
+</script>
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
new file mode 100644
index 0000000000..4c3444d693
--- /dev/null
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col gap-y-6">
+    <div class="flex justify-between">
+      <SettingsSectionHeader
+        :title="hasTrialPlan ? 'Start your subscription' : 'Upgrade your plan'"
+        subheading
+      />
+      <div class="flex items-center gap-x-4">
+        <p class="text-foreground-3 text-body-xs">Save 20% with annual billing</p>
+        <FormSwitch v-model="isYearlyPlan" :show-label="false" name="annual billing" />
+      </div>
+    </div>
+
+    <SettingsWorkspacesBillingPricingTableDesktop
+      :is-yearly-plan="isYearlyPlan"
+      :current-plan="props.currentPlan"
+      :workspace-id="props.workspaceId"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  WorkspacePlanStatuses,
+  type WorkspacePlan
+} from '~/lib/common/generated/gql/graphql'
+import { graphql } from '~/lib/common/generated/gql'
+
+graphql(`
+  fragment SettingsWorkspacesBillingPricingTable_WorkspacePlan on WorkspacePlan {
+    name
+    status
+  }
+`)
+
+const props = defineProps<{
+  workspaceId: string
+  currentPlan: WorkspacePlan
+}>()
+
+const isYearlyPlan = ref(false)
+
+const hasTrialPlan = computed(
+  () => props.currentPlan?.status === WorkspacePlanStatuses.Trial || !props.currentPlan
+)
+</script>
diff --git a/packages/frontend-2/lib/billing/helpers/constants.ts b/packages/frontend-2/lib/billing/helpers/constants.ts
index 01a0d51c38..756959ab2c 100644
--- a/packages/frontend-2/lib/billing/helpers/constants.ts
+++ b/packages/frontend-2/lib/billing/helpers/constants.ts
@@ -1,16 +1,6 @@
 import { WorkspacePlans, BillingInterval } from '~/lib/common/generated/gql/graphql'
 import { Roles } from '@speckle/shared'
-
-enum PlanFeaturesList {
-  Workspaces = 'Workspaces',
-  RoleManagement = 'Role management',
-  GuestUsers = 'Guest users',
-  PrivateAutomateFunctions = 'Private automate functions',
-  DomainSecurity = 'Domain security',
-  SSO = 'Single Sign-On (SSO)',
-  CustomerDataRegion = 'Customer data region',
-  PrioritySupport = 'Priority support'
-}
+import { PlanFeaturesList, type PricingPlan } from '@/lib/billing/helpers/types'
 
 const baseFeatures = [
   PlanFeaturesList.Workspaces,
@@ -20,7 +10,13 @@ const baseFeatures = [
   PlanFeaturesList.DomainSecurity
 ]
 
-export const pricingPlansConfig = {
+export const pricingPlansConfig: {
+  features: Record<PlanFeaturesList, { name: string; description: string }>
+  plans: Record<
+    WorkspacePlans.Team | WorkspacePlans.Pro | WorkspacePlans.Business,
+    PricingPlan
+  >
+} = {
   features: {
     [PlanFeaturesList.Workspaces]: {
       name: PlanFeaturesList.Workspaces,
diff --git a/packages/frontend-2/lib/billing/helpers/types.ts b/packages/frontend-2/lib/billing/helpers/types.ts
new file mode 100644
index 0000000000..a91c262991
--- /dev/null
+++ b/packages/frontend-2/lib/billing/helpers/types.ts
@@ -0,0 +1,24 @@
+import type {
+  BillingInterval,
+  WorkspacePlans
+} from '~/lib/common/generated/gql/graphql'
+import type { WorkspaceRoles } from '@speckle/shared'
+
+export enum PlanFeaturesList {
+  Workspaces = 'Workspaces',
+  RoleManagement = 'Role management',
+  GuestUsers = 'Guest users',
+  PrivateAutomateFunctions = 'Private automate functions',
+  DomainSecurity = 'Domain security',
+  SSO = 'Single Sign-On (SSO)',
+  CustomerDataRegion = 'Customer data region',
+  PrioritySupport = 'Priority support'
+}
+
+export type PricingPlan = {
+  name: WorkspacePlans
+  features: PlanFeaturesList[]
+  cost: {
+    [I in BillingInterval]: Record<WorkspaceRoles, number>
+  }
+}
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index 99ab3c500f..e401606533 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -11,6 +11,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
  * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
     "\n  fragment AuthLoginWithEmailBlock_PendingWorkspaceCollaborator on PendingWorkspaceCollaborator {\n    id\n    email\n    user {\n      id\n    }\n  }\n": types.AuthLoginWithEmailBlock_PendingWorkspaceCollaboratorFragmentDoc,

From 8ee8c147e1edb59e6c1f0686bfe4566a5cbf2b12 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 18 Nov 2024 23:44:12 +0100
Subject: [PATCH 2/6] Added mobile price plan

---
 .../settings/workspaces/Billing.vue           |  1 +
 .../billing/PricingTable/Desktop.vue          |  6 ++-
 .../billing/PricingTable/Header.vue           |  7 +--
 .../billing/PricingTable/Mobile.vue           | 46 +++++++++++++++++++
 .../billing/PricingTable/PricingTable.vue     | 24 +++++++---
 5 files changed, 73 insertions(+), 11 deletions(-)
 create mode 100644 packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue

diff --git a/packages/frontend-2/components/settings/workspaces/Billing.vue b/packages/frontend-2/components/settings/workspaces/Billing.vue
index 3c08e7e44e..82b5cb5717 100644
--- a/packages/frontend-2/components/settings/workspaces/Billing.vue
+++ b/packages/frontend-2/components/settings/workspaces/Billing.vue
@@ -99,6 +99,7 @@ import {
 import { useBillingActions } from '~/lib/billing/composables/actions'
 import { pricingPlansConfig } from '~/lib/billing/helpers/constants'
 import { Roles } from '@speckle/shared'
+
 graphql(`
   fragment SettingsWorkspacesBilling_Workspace on Workspace {
     ...BillingAlert_Workspace
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
index cce8ba9220..31e905c945 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
@@ -7,7 +7,7 @@
         </th>
         <th
           v-for="plan in plans"
-          :key="plan.name"
+          :key="`desktop-${plan.name}`"
           class="w-1/4 px-6 pt-4 pb-2"
           :class="[
             plan.name === WorkspacePlans.Team
@@ -20,6 +20,7 @@
             :plan="plan"
             :is-yearly-plan="isYearlyPlan"
             :current-plan="currentPlan"
+            :workspace-id="workspaceId"
           />
         </th>
       </tr>
@@ -66,10 +67,11 @@ import { WorkspacePlans } from '~/lib/common/generated/gql/graphql'
 import { pricingPlansConfig } from '~/lib/billing/helpers/constants'
 import type { PlanFeaturesList } from '~/lib/billing/helpers/types'
 import { CheckIcon } from '@heroicons/vue/24/outline'
+import type { MaybeNullOrUndefined } from '@speckle/shared'
 
 defineProps<{
   isYearlyPlan: boolean
-  currentPlan: WorkspacePlan
+  currentPlan: MaybeNullOrUndefined<WorkspacePlan>
   workspaceId: string
 }>()
 
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
index 1087c53f1c..7f14eb7855 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
@@ -19,9 +19,10 @@
       :color="plan.name === WorkspacePlans.Team ? 'primary' : 'outline'"
       :disabled="!hasTrialPlan && !canUpgradeToPlan"
       class="mt-3"
+      full-width
       @click="onUpgradePlanClick(plan.name)"
     >
-      {{ hasTrialPlan ? 'Subscribe' : 'Upgrade' }} to
+      {{ hasTrialPlan ? 'Subscribe' : 'Upgrade' }} to&nbsp;
       <span class="capitalize">{{ plan.name }}</span>
     </FormButton>
   </div>
@@ -37,11 +38,11 @@ import {
   BillingInterval
 } from '~/lib/common/generated/gql/graphql'
 import { useBillingActions } from '~/lib/billing/composables/actions'
-
+import type { MaybeNullOrUndefined } from '@speckle/shared'
 const props = defineProps<{
   plan: PricingPlan
   isYearlyPlan: boolean
-  currentPlan: WorkspacePlan
+  currentPlan: MaybeNullOrUndefined<WorkspacePlan>
   workspaceId: string
 }>()
 
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue
new file mode 100644
index 0000000000..7d419b7966
--- /dev/null
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col gap-y-4">
+    <div
+      v-for="plan in plans"
+      :key="`mobile-${plan.name}`"
+      class="border border-outline-3 bg-foundation rounded-lg p-4 pb-2"
+    >
+      <SettingsWorkspacesBillingPricingTableHeader
+        :plan="plan"
+        :is-yearly-plan="isYearlyPlan"
+        :current-plan="currentPlan"
+        :workspace-id="workspaceId"
+      />
+      <ul class="flex flex-col gap-y-2 mt-6">
+        <li
+          v-for="feature in features"
+          :key="feature.name"
+          class="flex items-center justify-between border-b last:border-b-0 border-outline-3 pb-2"
+        >
+          {{ feature.name }}
+          <CheckIcon
+            v-if="plan.features.includes(feature.name as PlanFeaturesList)"
+            class="w-3 h-3 text-foreground"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WorkspacePlan } from '~/lib/common/generated/gql/graphql'
+import { pricingPlansConfig } from '~/lib/billing/helpers/constants'
+import type { PlanFeaturesList } from '~/lib/billing/helpers/types'
+import { CheckIcon } from '@heroicons/vue/24/outline'
+import type { MaybeNullOrUndefined } from '@speckle/shared'
+
+defineProps<{
+  isYearlyPlan: boolean
+  currentPlan: MaybeNullOrUndefined<WorkspacePlan>
+  workspaceId: string
+}>()
+
+const plans = ref(pricingPlansConfig.plans)
+const features = ref(pricingPlansConfig.features)
+</script>
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
index 4c3444d693..8c31ee3f26 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-y-6">
-    <div class="flex justify-between">
+    <div class="flex flex-col lg:flex-row justify-between gap-y-4">
       <SettingsSectionHeader
         :title="hasTrialPlan ? 'Start your subscription' : 'Upgrade your plan'"
         subheading
@@ -10,21 +10,24 @@
         <FormSwitch v-model="isYearlyPlan" :show-label="false" name="annual billing" />
       </div>
     </div>
-
-    <SettingsWorkspacesBillingPricingTableDesktop
+    <component
+      :is="isDesktop ? DesktopTable : MobileTable"
+      :workspace-id="workspaceId"
+      :current-plan="currentPlan"
       :is-yearly-plan="isYearlyPlan"
-      :current-plan="props.currentPlan"
-      :workspace-id="props.workspaceId"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useBreakpoints } from '@vueuse/core'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import {
   WorkspacePlanStatuses,
   type WorkspacePlan
 } from '~/lib/common/generated/gql/graphql'
 import { graphql } from '~/lib/common/generated/gql'
+import type { MaybeNullOrUndefined } from '@speckle/shared'
 
 graphql(`
   fragment SettingsWorkspacesBillingPricingTable_WorkspacePlan on WorkspacePlan {
@@ -35,9 +38,18 @@ graphql(`
 
 const props = defineProps<{
   workspaceId: string
-  currentPlan: WorkspacePlan
+  currentPlan: MaybeNullOrUndefined<WorkspacePlan>
 }>()
 
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+
+const DesktopTable = defineAsyncComponent(
+  () => import('@/components/settings/workspaces/billing/PricingTable/Desktop.vue')
+)
+const MobileTable = defineAsyncComponent(
+  () => import('@/components/settings/workspaces/billing/PricingTable/Mobile.vue')
+)
+const isDesktop = breakpoints.greaterOrEqual('lg')
 const isYearlyPlan = ref(false)
 
 const hasTrialPlan = computed(

From 7e01acd871265c836bf492012ff6f72ca6a49066 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 19 Nov 2024 12:03:05 +0100
Subject: [PATCH 3/6] Added tooltips to buttons

---
 .../settings/workspaces/Billing.vue           |  7 ++++-
 .../billing/PricingTable/Desktop.vue          |  2 ++
 .../billing/PricingTable/Header.vue           | 31 +++++++++++++------
 .../billing/PricingTable/Mobile.vue           |  2 ++
 .../billing/PricingTable/PricingTable.vue     |  2 ++
 .../lib/common/generated/gql/gql.ts           |  4 +--
 .../lib/common/generated/gql/graphql.ts       |  8 ++---
 7 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/packages/frontend-2/components/settings/workspaces/Billing.vue b/packages/frontend-2/components/settings/workspaces/Billing.vue
index 82b5cb5717..7b486951f1 100644
--- a/packages/frontend-2/components/settings/workspaces/Billing.vue
+++ b/packages/frontend-2/components/settings/workspaces/Billing.vue
@@ -1,6 +1,6 @@
 <template>
   <section>
-    <div class="md:mx-auto pb-6 md:pb-0">
+    <div class="md:max-w-5xl md:mx-auto pb-6 md:pb-0">
       <SettingsSectionHeader title="Billing" text="Your workspace billing details" />
       <template v-if="isBillingIntegrationEnabled">
         <div class="flex flex-col gap-y-4 md:gap-y-6">
@@ -77,6 +77,7 @@
             class="pt-6"
             :workspace-id="workspaceId"
             :current-plan="currentPlan"
+            :is-admin="isAdmin"
           />
         </div>
       </template>
@@ -104,6 +105,7 @@ graphql(`
   fragment SettingsWorkspacesBilling_Workspace on Workspace {
     ...BillingAlert_Workspace
     id
+    role
     plan {
       ...SettingsWorkspacesBillingPricingTable_WorkspacePlan
       name
@@ -173,6 +175,9 @@ const nextPaymentDue = computed(() =>
       : 'Never'
     : dayjs().add(30, 'days').format('MMMM D, YYYY')
 )
+const isAdmin = computed(
+  () => workspaceResult.value?.workspace.role === Roles.Workspace.Admin
+)
 
 onMounted(() => {
   const paymentStatusQuery = route.query?.payment_status
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
index 31e905c945..4f7f657f75 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Desktop.vue
@@ -21,6 +21,7 @@
             :is-yearly-plan="isYearlyPlan"
             :current-plan="currentPlan"
             :workspace-id="workspaceId"
+            :is-admin="isAdmin"
           />
         </th>
       </tr>
@@ -73,6 +74,7 @@ defineProps<{
   isYearlyPlan: boolean
   currentPlan: MaybeNullOrUndefined<WorkspacePlan>
   workspaceId: string
+  isAdmin: boolean
 }>()
 
 const plans = ref(pricingPlansConfig.plans)
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
index 7f14eb7855..7fb261bf9b 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
@@ -15,16 +15,19 @@
     <p class="text-foreground-2 text-body-2xs pt-1">
       Billed {{ isYearlyPlan ? 'annually' : 'monthly' }}
     </p>
-    <FormButton
-      :color="plan.name === WorkspacePlans.Team ? 'primary' : 'outline'"
-      :disabled="!hasTrialPlan && !canUpgradeToPlan"
-      class="mt-3"
-      full-width
-      @click="onUpgradePlanClick(plan.name)"
-    >
-      {{ hasTrialPlan ? 'Subscribe' : 'Upgrade' }} to&nbsp;
-      <span class="capitalize">{{ plan.name }}</span>
-    </FormButton>
+    <div class="w-full">
+      <FormButton
+        v-tippy="tooltipText"
+        :color="plan.name === WorkspacePlans.Team ? 'primary' : 'outline'"
+        :disabled="(!hasTrialPlan && !canUpgradeToPlan) || !isAdmin"
+        class="mt-3"
+        full-width
+        @click="onUpgradePlanClick(plan.name)"
+      >
+        {{ hasTrialPlan ? 'Subscribe' : 'Upgrade' }} to&nbsp;
+        <span class="capitalize">{{ plan.name }}</span>
+      </FormButton>
+    </div>
   </div>
 </template>
 
@@ -39,11 +42,13 @@ import {
 } from '~/lib/common/generated/gql/graphql'
 import { useBillingActions } from '~/lib/billing/composables/actions'
 import type { MaybeNullOrUndefined } from '@speckle/shared'
+
 const props = defineProps<{
   plan: PricingPlan
   isYearlyPlan: boolean
   currentPlan: MaybeNullOrUndefined<WorkspacePlan>
   workspaceId: string
+  isAdmin: boolean
 }>()
 
 const { upgradePlanRedirect } = useBillingActions()
@@ -64,6 +69,12 @@ const canUpgradeToPlan = computed(() => {
 const hasTrialPlan = computed(
   () => props.currentPlan?.status === WorkspacePlanStatuses.Trial || !props.currentPlan
 )
+const tooltipText = computed(() => {
+  if (!props.isAdmin) return 'Only admins can manage plans'
+  if (!hasTrialPlan.value && !canUpgradeToPlan.value)
+    return 'You cannot downgrade your plan'
+  return null
+})
 
 const onUpgradePlanClick = (plan: WorkspacePlans) => {
   upgradePlanRedirect({
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue
index 7d419b7966..9a7b46da81 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Mobile.vue
@@ -10,6 +10,7 @@
         :is-yearly-plan="isYearlyPlan"
         :current-plan="currentPlan"
         :workspace-id="workspaceId"
+        :is-admin="isAdmin"
       />
       <ul class="flex flex-col gap-y-2 mt-6">
         <li
@@ -39,6 +40,7 @@ defineProps<{
   isYearlyPlan: boolean
   currentPlan: MaybeNullOrUndefined<WorkspacePlan>
   workspaceId: string
+  isAdmin: boolean
 }>()
 
 const plans = ref(pricingPlansConfig.plans)
diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
index 8c31ee3f26..67145fe1a8 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/PricingTable.vue
@@ -15,6 +15,7 @@
       :workspace-id="workspaceId"
       :current-plan="currentPlan"
       :is-yearly-plan="isYearlyPlan"
+      :is-admin="isAdmin"
     />
   </div>
 </template>
@@ -39,6 +40,7 @@ graphql(`
 const props = defineProps<{
   workspaceId: string
   currentPlan: MaybeNullOrUndefined<WorkspacePlan>
+  isAdmin: boolean
 }>()
 
 const breakpoints = useBreakpoints(TailwindBreakpoints)
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index e401606533..3d31d3e5c4 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -114,7 +114,7 @@ const documents = {
     "\n  fragment SettingsUserProfileDeleteAccount_User on User {\n    id\n    email\n  }\n": types.SettingsUserProfileDeleteAccount_UserFragmentDoc,
     "\n  fragment SettingsUserProfileDetails_User on User {\n    id\n    name\n    company\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.SettingsUserProfileDetails_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n": types.UserProfileEditDialogAvatar_UserFragmentDoc,
-    "\n  fragment SettingsWorkspacesBilling_Workspace on Workspace {\n    ...BillingAlert_Workspace\n    id\n    plan {\n      ...SettingsWorkspacesBillingPricingTable_WorkspacePlan\n      name\n      status\n    }\n    subscription {\n      billingInterval\n      currentBillingCycleEnd\n    }\n  }\n": types.SettingsWorkspacesBilling_WorkspaceFragmentDoc,
+    "\n  fragment SettingsWorkspacesBilling_Workspace on Workspace {\n    ...BillingAlert_Workspace\n    id\n    role\n    plan {\n      ...SettingsWorkspacesBillingPricingTable_WorkspacePlan\n      name\n      status\n    }\n    subscription {\n      billingInterval\n      currentBillingCycleEnd\n    }\n  }\n": types.SettingsWorkspacesBilling_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesGeneral_Workspace on Workspace {\n    ...SettingsWorkspacesGeneralEditAvatar_Workspace\n    ...SettingsWorkspaceGeneralDeleteDialog_Workspace\n    ...SettingsWorkspacesGeneralEditSlugDialog_Workspace\n    id\n    name\n    slug\n    description\n    logo\n    role\n    defaultProjectRole\n  }\n": types.SettingsWorkspacesGeneral_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n": types.SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n    defaultLogoIndex\n  }\n": types.SettingsWorkspacesGeneralEditAvatar_WorkspaceFragmentDoc,
@@ -770,7 +770,7 @@ export function graphql(source: "\n  fragment UserProfileEditDialogAvatar_User o
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment SettingsWorkspacesBilling_Workspace on Workspace {\n    ...BillingAlert_Workspace\n    id\n    plan {\n      ...SettingsWorkspacesBillingPricingTable_WorkspacePlan\n      name\n      status\n    }\n    subscription {\n      billingInterval\n      currentBillingCycleEnd\n    }\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesBilling_Workspace on Workspace {\n    ...BillingAlert_Workspace\n    id\n    plan {\n      ...SettingsWorkspacesBillingPricingTable_WorkspacePlan\n      name\n      status\n    }\n    subscription {\n      billingInterval\n      currentBillingCycleEnd\n    }\n  }\n"];
+export function graphql(source: "\n  fragment SettingsWorkspacesBilling_Workspace on Workspace {\n    ...BillingAlert_Workspace\n    id\n    role\n    plan {\n      ...SettingsWorkspacesBillingPricingTable_WorkspacePlan\n      name\n      status\n    }\n    subscription {\n      billingInterval\n      currentBillingCycleEnd\n    }\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesBilling_Workspace on Workspace {\n    ...BillingAlert_Workspace\n    id\n    role\n    plan {\n      ...SettingsWorkspacesBillingPricingTable_WorkspacePlan\n      name\n      status\n    }\n    subscription {\n      billingInterval\n      currentBillingCycleEnd\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index c963f94967..6eba91e395 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -4670,7 +4670,7 @@ export type SettingsUserProfileDetails_UserFragment = { __typename?: 'User', id:
 
 export type UserProfileEditDialogAvatar_UserFragment = { __typename?: 'User', id: string, avatar?: string | null, name: string };
 
-export type SettingsWorkspacesBilling_WorkspaceFragment = { __typename?: 'Workspace', id: string, plan?: { __typename?: 'WorkspacePlan', name: WorkspacePlans, status: WorkspacePlanStatuses } | null, subscription?: { __typename?: 'WorkspaceSubscription', billingInterval: BillingInterval, currentBillingCycleEnd: string } | null };
+export type SettingsWorkspacesBilling_WorkspaceFragment = { __typename?: 'Workspace', id: string, role?: string | null, plan?: { __typename?: 'WorkspacePlan', name: WorkspacePlans, status: WorkspacePlanStatuses } | null, subscription?: { __typename?: 'WorkspaceSubscription', billingInterval: BillingInterval, currentBillingCycleEnd: string } | null };
 
 export type SettingsWorkspacesGeneral_WorkspaceFragment = { __typename?: 'Workspace', id: string, name: string, slug: string, description?: string | null, logo?: string | null, role?: string | null, defaultProjectRole: string, defaultLogoIndex: number };
 
@@ -5696,7 +5696,7 @@ export type SettingsWorkspaceBillingQueryVariables = Exact<{
 }>;
 
 
-export type SettingsWorkspaceBillingQuery = { __typename?: 'Query', workspace: { __typename?: 'Workspace', id: string, plan?: { __typename?: 'WorkspacePlan', name: WorkspacePlans, status: WorkspacePlanStatuses } | null, subscription?: { __typename?: 'WorkspaceSubscription', billingInterval: BillingInterval, currentBillingCycleEnd: string } | null } };
+export type SettingsWorkspaceBillingQuery = { __typename?: 'Query', workspace: { __typename?: 'Workspace', id: string, role?: string | null, plan?: { __typename?: 'WorkspacePlan', name: WorkspacePlans, status: WorkspacePlanStatuses } | null, subscription?: { __typename?: 'WorkspaceSubscription', billingInterval: BillingInterval, currentBillingCycleEnd: string } | null } };
 
 export type SettingsWorkspaceBillingCustomerPortalQueryVariables = Exact<{
   workspaceId: Scalars['String']['input'];
@@ -6156,7 +6156,7 @@ export const SettingsUserProfileDetails_UserFragmentDoc = {"kind":"Document","de
 export const SettingsUserProfile_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsUserProfile_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsUserProfileChangePassword_User"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsUserProfileDeleteAccount_User"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsUserProfileDetails_User"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsUserProfileChangePassword_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsUserProfileDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsUserProfileDetails_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"}}]}}]} as unknown as DocumentNode<SettingsUserProfile_UserFragment, unknown>;
 export const BillingAlert_WorkspaceFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BillingAlert_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}}]} as unknown as DocumentNode<BillingAlert_WorkspaceFragment, unknown>;
 export const SettingsWorkspacesBillingPricingTable_WorkspacePlanFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspacePlan"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]} as unknown as DocumentNode<SettingsWorkspacesBillingPricingTable_WorkspacePlanFragment, unknown>;
-export const SettingsWorkspacesBilling_WorkspaceFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBilling_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BillingAlert_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BillingAlert_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspacePlan"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]} as unknown as DocumentNode<SettingsWorkspacesBilling_WorkspaceFragment, unknown>;
+export const SettingsWorkspacesBilling_WorkspaceFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBilling_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BillingAlert_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BillingAlert_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspacePlan"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]} as unknown as DocumentNode<SettingsWorkspacesBilling_WorkspaceFragment, unknown>;
 export const SettingsWorkspacesGeneralEditAvatar_WorkspaceFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesGeneralEditAvatar_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"defaultLogoIndex"}}]}}]} as unknown as DocumentNode<SettingsWorkspacesGeneralEditAvatar_WorkspaceFragment, unknown>;
 export const SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspaceGeneralDeleteDialog_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragment, unknown>;
 export const SettingsWorkspacesGeneralEditSlugDialog_WorkspaceFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesGeneralEditSlugDialog_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]} as unknown as DocumentNode<SettingsWorkspacesGeneralEditSlugDialog_WorkspaceFragment, unknown>;
@@ -6356,7 +6356,7 @@ export const SettingsLeaveWorkspaceDocument = {"kind":"Document","definitions":[
 export const SettingsBillingCancelCheckoutSessionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SettingsBillingCancelCheckoutSession"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CancelCheckoutSessionInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspaceMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billing"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cancelCheckoutSession"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]}}]}}]} as unknown as DocumentNode<SettingsBillingCancelCheckoutSessionMutation, SettingsBillingCancelCheckoutSessionMutationVariables>;
 export const SettingsSidebarDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsSidebar"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsDialog_User"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"WorkspaceAvatar_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"defaultLogoIndex"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsDialog_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"WorkspaceAvatar_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsDialog_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"workspaces"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsDialog_Workspace"}}]}}]}}]}}]} as unknown as DocumentNode<SettingsSidebarQuery, SettingsSidebarQueryVariables>;
 export const SettingsWorkspaceGeneralDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsWorkspaceGeneral"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspace"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesGeneral_Workspace"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesGeneralEditAvatar_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"defaultLogoIndex"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspaceGeneralDeleteDialog_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesGeneralEditSlugDialog_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesGeneral_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesGeneralEditAvatar_Workspace"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspaceGeneralDeleteDialog_Workspace"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesGeneralEditSlugDialog_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"defaultProjectRole"}}]}}]} as unknown as DocumentNode<SettingsWorkspaceGeneralQuery, SettingsWorkspaceGeneralQueryVariables>;
-export const SettingsWorkspaceBillingDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsWorkspaceBilling"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspace"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesBilling_Workspace"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BillingAlert_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspacePlan"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBilling_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BillingAlert_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}}]} as unknown as DocumentNode<SettingsWorkspaceBillingQuery, SettingsWorkspaceBillingQueryVariables>;
+export const SettingsWorkspaceBillingDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsWorkspaceBilling"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspace"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesBilling_Workspace"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BillingAlert_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspacePlan"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesBilling_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BillingAlert_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"plan"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesBillingPricingTable_WorkspacePlan"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subscription"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"billingInterval"}},{"kind":"Field","name":{"kind":"Name","value":"currentBillingCycleEnd"}}]}}]}}]} as unknown as DocumentNode<SettingsWorkspaceBillingQuery, SettingsWorkspaceBillingQueryVariables>;
 export const SettingsWorkspaceBillingCustomerPortalDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsWorkspaceBillingCustomerPortal"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspace"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customerPortalUrl"}}]}}]}}]} as unknown as DocumentNode<SettingsWorkspaceBillingCustomerPortalQuery, SettingsWorkspaceBillingCustomerPortalQueryVariables>;
 export const SettingsWorkspaceRegionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsWorkspaceRegions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspace"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesRegions_Workspace"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesRegionsSelect_ServerRegionItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ServerRegionItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesRegions_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"defaultRegion"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesRegionsSelect_ServerRegionItem"}}]}},{"kind":"Field","name":{"kind":"Name","value":"availableRegions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesRegionsSelect_ServerRegionItem"}}]}}]}}]} as unknown as DocumentNode<SettingsWorkspaceRegionsQuery, SettingsWorkspaceRegionsQueryVariables>;
 export const SettingsWorkspacesMembersDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsWorkspacesMembers"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"invitesFilter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PendingWorkspaceCollaboratorsFilter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspace"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembers_Workspace"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersMembersTable_Workspace"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersGuestsTable_Workspace"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersInvitesTable_Workspace"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"WorkspaceInviteDialog_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"domainBasedMembershipProtectionEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"domains"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"domain"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"invitedTeam"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"invitesFilter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembersTableHeader_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"WorkspaceInviteDialog_Workspace"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembersMembersTable_WorkspaceCollaborator"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspaceCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"verified"}},{"kind":"Field","name":{"kind":"Name","value":"workspaceDomainPolicyCompliant"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"workspaceId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}}}]}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspaceCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"verified"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectRoles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembersInvitesTable_PendingWorkspaceCollaborator"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingWorkspaceCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"inviteId"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembers_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"invitedTeam"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"invitesFilter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembersMembersTable_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersTableHeader_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersMembersTable_WorkspaceCollaborator"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembersGuestsTable_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersTableHeader_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsWorkspacesMembersInvitesTable_Workspace"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersTableHeader_Workspace"}},{"kind":"Field","name":{"kind":"Name","value":"invitedTeam"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"invitesFilter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SettingsWorkspacesMembersInvitesTable_PendingWorkspaceCollaborator"}}]}}]}}]} as unknown as DocumentNode<SettingsWorkspacesMembersQuery, SettingsWorkspacesMembersQueryVariables>;

From 80c6af04efba0ccf04dfa40605e966ad5f967bd0 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 19 Nov 2024 12:08:56 +0100
Subject: [PATCH 4/6] Fix typo

---
 packages/frontend-2/lib/billing/helpers/constants.ts | 6 +++---
 packages/frontend-2/lib/billing/helpers/types.ts     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-2/lib/billing/helpers/constants.ts b/packages/frontend-2/lib/billing/helpers/constants.ts
index 756959ab2c..1eb03cf004 100644
--- a/packages/frontend-2/lib/billing/helpers/constants.ts
+++ b/packages/frontend-2/lib/billing/helpers/constants.ts
@@ -42,8 +42,8 @@ export const pricingPlansConfig: {
       name: PlanFeaturesList.SSO,
       description: ''
     },
-    [PlanFeaturesList.CustomerDataRegion]: {
-      name: PlanFeaturesList.CustomerDataRegion,
+    [PlanFeaturesList.CustomDataRegion]: {
+      name: PlanFeaturesList.CustomDataRegion,
       description: ''
     },
     [PlanFeaturesList.PrioritySupport]: {
@@ -89,7 +89,7 @@ export const pricingPlansConfig: {
       features: [
         ...baseFeatures,
         PlanFeaturesList.SSO,
-        PlanFeaturesList.CustomerDataRegion,
+        PlanFeaturesList.CustomDataRegion,
         PlanFeaturesList.PrioritySupport
       ],
       cost: {
diff --git a/packages/frontend-2/lib/billing/helpers/types.ts b/packages/frontend-2/lib/billing/helpers/types.ts
index a91c262991..a54ce9f737 100644
--- a/packages/frontend-2/lib/billing/helpers/types.ts
+++ b/packages/frontend-2/lib/billing/helpers/types.ts
@@ -11,7 +11,7 @@ export enum PlanFeaturesList {
   PrivateAutomateFunctions = 'Private automate functions',
   DomainSecurity = 'Domain security',
   SSO = 'Single Sign-On (SSO)',
-  CustomerDataRegion = 'Customer data region',
+  CustomDataRegion = 'Custom data region',
   PrioritySupport = 'Priority support'
 }
 

From 626e7b45e16c34b36748a84310311baffca9bc24 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 19 Nov 2024 12:21:44 +0100
Subject: [PATCH 5/6] Moved tooltips

---
 .../settings/workspaces/billing/PricingTable/Header.vue    | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
index 7fb261bf9b..da0420e121 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Header.vue
@@ -17,7 +17,6 @@
     </p>
     <div class="w-full">
       <FormButton
-        v-tippy="tooltipText"
         :color="plan.name === WorkspacePlans.Team ? 'primary' : 'outline'"
         :disabled="(!hasTrialPlan && !canUpgradeToPlan) || !isAdmin"
         class="mt-3"
@@ -69,12 +68,6 @@ const canUpgradeToPlan = computed(() => {
 const hasTrialPlan = computed(
   () => props.currentPlan?.status === WorkspacePlanStatuses.Trial || !props.currentPlan
 )
-const tooltipText = computed(() => {
-  if (!props.isAdmin) return 'Only admins can manage plans'
-  if (!hasTrialPlan.value && !canUpgradeToPlan.value)
-    return 'You cannot downgrade your plan'
-  return null
-})
 
 const onUpgradePlanClick = (plan: WorkspacePlans) => {
   upgradePlanRedirect({

From 58ed4b9b7a295e01bd29c1d5099ce2f4cfeb4754 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 19 Nov 2024 16:47:37 +0100
Subject: [PATCH 6/6] Fix divide color

---
 packages/frontend-2/components/settings/workspaces/Billing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/workspaces/Billing.vue b/packages/frontend-2/components/settings/workspaces/Billing.vue
index 7b486951f1..9c411ec025 100644
--- a/packages/frontend-2/components/settings/workspaces/Billing.vue
+++ b/packages/frontend-2/components/settings/workspaces/Billing.vue
@@ -8,7 +8,7 @@
           <SettingsSectionHeader title="Billing summary" subheading class="pt-4" />
           <div class="border border-outline-3 rounded-lg">
             <div
-              class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x"
+              class="grid grid-cols-1 md:grid-cols-3 divide-y divide-outline-3 md:divide-y-0 md:divide-x"
             >
               <div class="p-5 pt-4 flex flex-col gap-y-1">
                 <h3 class="text-body-xs text-foreground-2 pb-2">