Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Adjust billing settings for Academia and Unlimited plans #3519

Merged
merged 3 commits into from
Nov 20, 2024
Merged

Feat: Adjust billing settings for Academia and Unlimited plans #3519

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6513df2
Feat: Adjust billing settings for Academia and Unlimited plans
Mikehrn Nov 19, 2024
a5ba974
Fix billing alert
Mikehrn Nov 19, 2024
1b4af36
Update conditional
Mikehrn Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 27 additions & 13 deletions packages/frontend-2/components/settings/workspaces/Billing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@
<SettingsSectionHeader title="Billing" text="Your workspace billing details" />
<template v-if="isBillingIntegrationEnabled">
<div class="flex flex-col gap-y-4 md:gap-y-6">
<BillingAlert v-if="workspaceResult" :workspace="workspaceResult.workspace" />
<BillingAlert
v-if="
workspaceResult &&
workspaceResult.workspace?.plan?.status !== WorkspacePlanStatuses.Valid
"
:workspace="workspaceResult.workspace"
/>
<SettingsSectionHeader title="Billing summary" subheading class="pt-4" />
<div class="border border-outline-3 rounded-lg">
<div
Expand All @@ -17,7 +23,7 @@
<p class="text-heading-lg text-foreground capitalize">
{{ currentPlan?.name ?? WorkspacePlans.Team }} plan
</p>
<p class="text-body-xs text-foreground-2">
<p v-if="isPurchasablePlan" class="text-body-xs text-foreground-2">
£{{ seatPrice }} per seat/month, billed
{{
subscription?.billingInterval === BillingInterval.Yearly
Expand All @@ -36,16 +42,22 @@
: 'Monthly bill'
}}
</h3>
<p class="text-heading-lg text-foreground capitalize">Coming soon</p>
<p class="text-heading-lg text-foreground capitalize">
{{ isPurchasablePlan ? 'Coming soon' : 'Not applicable' }}
</p>
</div>
<div class="p-5 pt-4 flex flex-col gap-y-1">
<h3 class="text-body-xs text-foreground-2 pb-2">
{{ isTrialPeriod ? 'First payment due' : 'Next payment due' }}
{{
isTrialPeriod && isPurchasablePlan
? 'First payment due'
: 'Next payment due'
}}
</h3>
<p class="text-heading-lg text-foreground capitalize">
{{ nextPaymentDue }}
{{ isPurchasablePlan ? nextPaymentDue : 'Not applicable' }}
</p>
<p v-if="isPaidPlan" class="text-body-xs text-foreground-2">
<p v-if="isPurchasablePlan" class="text-body-xs text-foreground-2">
<span class="capitalize">
{{
subscription?.billingInterval === BillingInterval.Yearly
Expand All @@ -58,7 +70,7 @@
</div>
</div>
<div
v-if="isActivePlan"
v-if="isActivePlan && isPurchasablePlan"
class="flex flex-row gap-x-4 p-5 items-center border-t border-outline-3"
>
<div class="text-body-xs gap-y-2 flex-1">
Expand Down Expand Up @@ -140,11 +152,6 @@ const { billingPortalRedirect, cancelCheckoutSession } = useBillingActions()

const currentPlan = computed(() => workspaceResult.value?.workspace.plan)
const subscription = computed(() => workspaceResult.value?.workspace.subscription)
const isPaidPlan = computed(
() =>
currentPlan.value?.name !== WorkspacePlans.Academia &&
currentPlan.value?.name !== WorkspacePlans.Unlimited
)
const isTrialPeriod = computed(
() =>
currentPlan.value?.status === WorkspacePlanStatuses.Trial ||
Expand All @@ -156,6 +163,13 @@ const isActivePlan = computed(
currentPlan.value?.status !== WorkspacePlanStatuses.Trial &&
currentPlan.value?.status !== WorkspacePlanStatuses.Canceled
)
const isPurchasablePlan = computed(
() =>
currentPlan.value?.name === WorkspacePlans.Team ||
currentPlan.value?.name === WorkspacePlans.Pro ||
currentPlan.value?.name === WorkspacePlans.Business ||
!currentPlan.value?.name // no plan equals pro trial plan
)
const seatPrice = computed(() =>
currentPlan.value && subscription.value
? seatPrices.value[currentPlan.value.name as keyof typeof seatPrices.value][
Expand All @@ -167,7 +181,7 @@ const seatPrice = computed(() =>
)
const nextPaymentDue = computed(() =>
currentPlan.value
? isPaidPlan.value
? isPurchasablePlan.value
? dayjs(subscription.value?.currentBillingCycleEnd).format('MMMM D, YYYY')
: 'Never'
: dayjs().add(30, 'days').format('MMMM D, YYYY')
Expand Down