Feat: Improve information in upgrade modal

packages/frontend-2/components/settings/workspaces/billing/UpgradeDialog.vue

@@ -7,9 +7,12 @@
   >
     <div class="text-body-xs text-foreground">
       <p>You are about to upgrade your workspace to the following plan:</p>
-      <CommonCard class="font-medium bg-foundation !p-3 my-2">
-        Workspace {{ startCase(plan) }} plan,
-        {{ billingInterval === BillingInterval.Yearly ? 'annual' : 'monthly' }}
+      <CommonCard class="bg-foundation !p-3 my-2">
+        <p class="font-medium">Workspace {{ startCase(plan) }} plan</p>
+        <p>
+          £{{ seatPrice }}/seat/month, billed
+          {{ billingInterval === BillingInterval.Yearly ? 'annually' : 'monthly' }}
+        </p>
       </CommonCard>
       <p>Do you want to proceed?</p>
     </div>
@@ -19,12 +22,15 @@
 <script setup lang="ts">
 import type { LayoutDialogButton } from '@speckle/ui-components'
 import {
-  type PaidWorkspacePlans,
   type WorkspacePlans,
-  BillingInterval
+  BillingInterval,
+  type PaidWorkspacePlans
 } from '~/lib/common/generated/gql/graphql'
 import { useBillingActions } from '~/lib/billing/composables/actions'
 import { startCase } from 'lodash'
+import { pricingPlansConfig } from '~/lib/billing/helpers/constants'
+import { Roles } from '@speckle/shared'
+import { isPaidPlan } from '~/lib/billing/helpers/types'
 
 const props = defineProps<{
   plan: WorkspacePlans
@@ -35,6 +41,15 @@ const isOpen = defineModel<boolean>('open', { required: true })
 
 const { upgradePlan } = useBillingActions()
 
+const seatPrice = computed(() => {
+  if (isPaidPlan(props.plan)) {
+    const planConfig =
+      pricingPlansConfig.plans[props.plan as unknown as PaidWorkspacePlans]
+    return planConfig.cost[props.billingInterval][Roles.Workspace.Member]
+  }
+
+  return 0
+})
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',