feat(fe2): Billing - Add tooltips to disabled buttons

packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue

@@ -24,7 +24,6 @@
         v-model="isYearlyIntervalSelected"
         :show-label="false"
         name="domain-protection"
-        :disabled="!toggleEnabled"
         @update:model-value="(newValue) => $emit('onYearlyIntervalSelected', newValue)"
       />
       <span class="text-body-2xs">Billed annually</span>
@@ -34,13 +33,24 @@
     </div>
     <div v-if="workspaceId" class="w-full mt-4">
       <FormButton
+        v-if="isMonthlyToAnnual || canUpgradeToPlan"
         :color="buttonColor"
         :disabled="!isSelectable"
         full-width
         @click="onCtaClick"
       >
         {{ buttonText }}
       </FormButton>
+      <div v-else v-tippy="buttonTooltip">
+        <FormButton
+          :color="buttonColor"
+          :disabled="!isSelectable"
+          full-width
+          @click="onCtaClick"
+        >
+          {{ buttonText }}
+        </FormButton>
+      </div>
     </div>
     <ul class="flex flex-col gap-y-2 mt-4 pt-3 border-t border-outline-3">
       <li
@@ -133,36 +143,57 @@ const canUpgradeToPlan = computed(() => {
 
   return allowedUpgrades[props.currentPlan.name].includes(props.plan.name)
 })
+
 const statusIsTrial = computed(
   () => props.currentPlan?.status === WorkspacePlanStatuses.Trial || !props.currentPlan
 )
-const buttonColor = computed(() => {
-  if (statusIsTrial.value) {
-    return props.plan.name === WorkspacePlans.Starter ? 'primary' : 'outline'
-  }
-  return 'outline'
-})
+
 const isMatchingInterval = computed(
   () =>
     props.activeBillingInterval ===
     (props.yearlyIntervalSelected ? BillingInterval.Yearly : BillingInterval.Monthly)
 )
+
+const isDowngrade = computed(() => {
+  return !canUpgradeToPlan.value && props.currentPlan?.name !== props.plan.name
+})
+
+const isAnnualToMonthly = computed(() => {
+  return (
+    !isMatchingInterval.value &&
+    props.currentPlan?.name === props.plan.name &&
+    !props.yearlyIntervalSelected
+  )
+})
+
+const isMonthlyToAnnual = computed(() => {
+  return (
+    !isMatchingInterval.value &&
+    props.currentPlan?.name === props.plan.name &&
+    props.yearlyIntervalSelected
+  )
+})
+
+const isCurrentPlan = computed(
+  () => isMatchingInterval.value && props.currentPlan?.name === props.plan.name
+)
+
 const isSelectable = computed(() => {
   // Always enable buttons during trial
   if (statusIsTrial.value) return true
 
-  // Disable if user is already on this plan with same billing interval
-  if (isMatchingInterval.value && props.currentPlan?.name === props.plan.name)
-    return false
+  // Disable if current plan
+  if (isCurrentPlan.value) return false
+
+  // Never allow annual to monthly changes
+  if (isAnnualToMonthly.value) return false
 
   // Handle billing interval changes
   if (!isMatchingInterval.value) {
-    const isCurrentPlan = props.currentPlan?.name === props.plan.name
-    const isMonthlyToYearly =
-      props.yearlyIntervalSelected &&
-      props.activeBillingInterval === BillingInterval.Monthly
     // Allow yearly upgrades from monthly plans
-    if (isMonthlyToYearly) return isCurrentPlan || canUpgradeToPlan.value
+    if (isMonthlyToAnnual.value) {
+      return props.currentPlan?.name === props.plan.name || canUpgradeToPlan.value
+    }
     // Never allow switching to monthly if currently on yearly billing
     if (props.activeBillingInterval === BillingInterval.Yearly) return false
     // Allow monthly plan changes only for upgrades
@@ -172,36 +203,50 @@ const isSelectable = computed(() => {
   // Allow upgrades to higher tier plans
   return canUpgradeToPlan.value
 })
-const toggleEnabled = computed(() => {
-  return statusIsTrial.value
-    ? true
-    : canUpgradeToPlan.value ||
-        (props.currentPlan?.name === props.plan.name &&
-          props.activeBillingInterval === BillingInterval.Monthly)
+
+const buttonColor = computed(() => {
+  if (statusIsTrial.value) {
+    return props.plan.name === WorkspacePlans.Starter ? 'primary' : 'outline'
+  }
+  return 'outline'
 })
+
 const buttonText = computed(() => {
   // Trial plan case
   if (statusIsTrial.value) {
     return `Subscribe to ${startCase(props.plan.name)}`
   }
   // Current plan case
-  if (isMatchingInterval.value && props.currentPlan?.name === props.plan.name) {
+  if (isCurrentPlan.value) {
     return 'Current plan'
   }
   // Billing interval and lower plan case
-  if (!canUpgradeToPlan.value && props.currentPlan?.name !== props.plan.name) {
+  if (isDowngrade.value) {
     return `Downgrade to ${props.plan.name}`
   }
   // Billing interval change and current plan
-  if (!isMatchingInterval.value && props.currentPlan?.name === props.plan.name) {
-    return props.yearlyIntervalSelected
-      ? 'Change to annual plan'
-      : 'Change to monthly plan'
+  if (isAnnualToMonthly.value) {
+    return 'Change to monthly plan'
+  }
+  if (isMonthlyToAnnual.value) {
+    return 'Change to annual plan'
   }
   // Upgrade case
   return canUpgradeToPlan.value ? `Upgrade to ${startCase(props.plan.name)}` : ''
 })
 
+const buttonTooltip = computed(() => {
+  if (isDowngrade.value) {
+    return 'Downgrading is not supported at the moment. Please contact billing@speckle.systems.'
+  }
+
+  if (isAnnualToMonthly.value) {
+    return 'Changing from an annual to a monthly plan is currently not supported. Please contact billing@speckle.systems.'
+  }
+
+  return undefined
+})
+
 const onCtaClick = () => {
   emit('onPlanSelected', props.plan.name)
 }