From 0037ce02df059735e2ba80feab754d80d8179e7a Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle Date: Tue, 3 Dec 2024 12:18:52 +0000 Subject: [PATCH 01/10] Add various disabled state tooltips --- .../workspaces/billing/PricingTable/Plan.vue | 51 ++++++++++++++----- 1 file changed, 38 insertions(+), 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 index 547554104f..345b779ea1 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/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)" /> Billed annually @@ -32,7 +31,7 @@ 20% off -
+
{ } return 'outline' }) +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 isMatchingInterval = computed( () => props.activeBillingInterval === @@ -172,13 +191,6 @@ 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 buttonText = computed(() => { // Trial plan case if (statusIsTrial.value) { @@ -193,15 +205,28 @@ const buttonText = computed(() => { 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) } From 04e04f3a2413d688a8838ae1161f78d694cdf128 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle Date: Tue, 3 Dec 2024 12:28:53 +0000 Subject: [PATCH 02/10] Tidy up conditionals --- .../workspaces/billing/PricingTable/Plan.vue | 41 +++++++++++-------- 1 file changed, 25 insertions(+), 16 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 index 345b779ea1..e439ec5fa0 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -132,15 +132,11 @@ 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 isDowngrade = computed(() => { return !canUpgradeToPlan.value && props.currentPlan?.name !== props.plan.name }) @@ -166,22 +162,27 @@ const isMatchingInterval = computed( props.activeBillingInterval === (props.yearlyIntervalSelected ? BillingInterval.Yearly : BillingInterval.Monthly) ) + +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 @@ -191,17 +192,25 @@ const isSelectable = computed(() => { // Allow upgrades to higher tier plans return canUpgradeToPlan.value }) + +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 From 50001b00a94694e26cc40dc1ec99d3acb4dbebd9 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle Date: Tue, 3 Dec 2024 13:02:34 +0000 Subject: [PATCH 03/10] Fix tippy reactivity bug --- .../workspaces/billing/PricingTable/Plan.vue | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 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 index e439ec5fa0..865e1bc2b8 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -31,8 +31,9 @@ 20% off
-
+
{{ buttonText }} +
+ + {{ buttonText }} + +
  • props.currentPlan?.status === WorkspacePlanStatuses.Trial || !props.currentPlan ) +const isMatchingInterval = computed( + () => + props.activeBillingInterval === + (props.yearlyIntervalSelected ? BillingInterval.Yearly : BillingInterval.Monthly) +) + const isDowngrade = computed(() => { return !canUpgradeToPlan.value && props.currentPlan?.name !== props.plan.name }) @@ -157,12 +174,6 @@ const isMonthlyToAnnual = computed(() => { ) }) -const isMatchingInterval = computed( - () => - props.activeBillingInterval === - (props.yearlyIntervalSelected ? BillingInterval.Yearly : BillingInterval.Monthly) -) - const isCurrentPlan = computed( () => isMatchingInterval.value && props.currentPlan?.name === props.plan.name ) From 9906ebb09423356d8c1a3072f749c947d3f6a07f Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle Date: Tue, 3 Dec 2024 13:06:17 +0000 Subject: [PATCH 04/10] Fix conditional --- .../settings/workspaces/billing/PricingTable/Plan.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue index 865e1bc2b8..c99d2f703d 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -33,7 +33,7 @@
Date: Tue, 3 Dec 2024 13:20:44 +0000 Subject: [PATCH 05/10] Minor changes --- .../settings/workspaces/billing/PricingTable/Plan.vue | 11 ++++------- 1 file changed, 4 insertions(+), 7 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 index c99d2f703d..d2931db244 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -158,6 +158,10 @@ const isDowngrade = computed(() => { return !canUpgradeToPlan.value && props.currentPlan?.name !== props.plan.name }) +const isCurrentPlan = computed( + () => isMatchingInterval.value && props.currentPlan?.name === props.plan.name +) + const isAnnualToMonthly = computed(() => { return ( !isMatchingInterval.value && @@ -174,10 +178,6 @@ const isMonthlyToAnnual = computed(() => { ) }) -const isCurrentPlan = computed( - () => isMatchingInterval.value && props.currentPlan?.name === props.plan.name -) - const isSelectable = computed(() => { // Always enable buttons during trial if (statusIsTrial.value) return true @@ -185,9 +185,6 @@ const isSelectable = computed(() => { // 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) { // Allow yearly upgrades from monthly plans From 0d34e1d663894c2912a77485dda1340a0846a51e Mon Sep 17 00:00:00 2001 From: Benjamin Ottensten Date: Tue, 3 Dec 2024 16:10:01 +0100 Subject: [PATCH 06/10] Fix typo --- packages/frontend-2/lib/billing/composables/actions.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend-2/lib/billing/composables/actions.ts b/packages/frontend-2/lib/billing/composables/actions.ts index 782edb02d6..aff01ae929 100644 --- a/packages/frontend-2/lib/billing/composables/actions.ts +++ b/packages/frontend-2/lib/billing/composables/actions.ts @@ -138,8 +138,8 @@ export const useBillingActions = () => { triggerNotification({ type: ToastNotificationType.Success, title: 'Workspace plan upgraded', - description: `Your workspace is now on a ${ - cycle === BillingInterval.Yearly ? 'annual' : 'monthly' + description: `Your workspace is now on ${ + cycle === BillingInterval.Yearly ? 'an annual' : 'a monthly' } ${plan} plan` }) } else { From 58d0a44e6103cbbc473c1867873e207436ade2ae Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle Date: Wed, 4 Dec 2024 09:43:15 +0000 Subject: [PATCH 07/10] Update Plan.vue --- .../workspaces/billing/PricingTable/Plan.vue | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 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 index aeb13ce7ff..5d83d0f943 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -182,17 +182,21 @@ const isSelectable = computed(() => { // Always enable buttons during trial if (statusIsTrial.value) return true - // Disable if current plan + // Allow selection if switching from monthly to yearly for the same plan + if (isMonthlyToAnnual.value && props.currentPlan?.name === props.plan.name) + return true + + // Disable if current plan and intervals match if (isCurrentPlan.value) return false // Handle billing interval changes if (!isMatchingInterval.value) { // Allow yearly upgrades from monthly plans - if (isMonthlyToAnnual.value) { - return props.currentPlan?.name === props.plan.name || canUpgradeToPlan.value - } + if (isMonthlyToAnnual.value) return 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 return canUpgradeToPlan.value } @@ -233,6 +237,8 @@ const buttonText = computed(() => { }) const buttonTooltip = computed(() => { + if (statusIsTrial.value || isCurrentPlan.value) return + if (isDowngrade.value) { return 'Downgrading is not supported at the moment. Please contact billing@speckle.systems.' } From ba5d5e45a07fb398d4144eaf4b647d5f53b20944 Mon Sep 17 00:00:00 2001 From: andrewwallacespeckle Date: Thu, 5 Dec 2024 14:34:41 +0000 Subject: [PATCH 08/10] Update tooltip conditions --- .../workspaces/billing/PricingTable/Plan.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue index c4dec42935..e201fcfa9d 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -35,8 +35,18 @@
+
+ + {{ buttonText }} + +
Date: Thu, 5 Dec 2024 16:11:27 +0000 Subject: [PATCH 09/10] v-else-if --- .../settings/workspaces/billing/PricingTable/Plan.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 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 index e201fcfa9d..3572a3681c 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -34,8 +34,10 @@
- -
+
+ +
+
Date: Thu, 5 Dec 2024 17:17:07 +0000 Subject: [PATCH 10/10] Add comment --- .../components/settings/workspaces/billing/PricingTable/Plan.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue index 3572a3681c..32f6d5e274 100644 --- a/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue +++ b/packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue @@ -34,6 +34,7 @@
+