Skip to content

Commit

Permalink
Enabled summary on billing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mikehrn
Mikehrn committed Dec 11, 2024
1 parent cbd8757 commit fb72eb6
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 39 deletions.
59 changes: 26 additions & 33 deletions packages/frontend-2/components/settings/workspaces/Billing.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,26 +58,17 @@
: 'Monthly bill'
}}
</h3>
<template v-if="statusIsTrial">
<p class="text-heading-lg text-foreground inline-block">
{{ billValue }} per month
</p>
<p class="text-body-xs text-foreground-2 flex gap-x-1 items-center">
{{ billDescription }}
<InformationCircleIcon
v-tippy="billTooltip"
class="w-4 h-4 text-foreground cursor-pointer"
/>
</p>
</template>
<div v-else>
<button
class="text-heading-lg text-foreground"
@click="billingPortalRedirect(workspaceId)"
>
View on Stripe &#8599;
</button>
</div>

<p class="text-heading-lg text-foreground inline-block">
{{ billValue }} per month
</p>
<p class="text-body-xs text-foreground-2 flex gap-x-1 items-center">
{{ billDescription }}
<InformationCircleIcon
v-tippy="billTooltip"
class="w-4 h-4 text-foreground cursor-pointer"
/>
</p>
</div>
<div class="p-5 pt-4 flex flex-col gap-y-1">
<h3 class="text-body-xs text-foreground-2 pb-1">
Expand Down Expand Up @@ -210,6 +201,10 @@ graphql(`
subscription {
billingInterval
currentBillingCycleEnd
seats {
guest
plan
}
}
team {
items {
Expand Down Expand Up @@ -263,13 +258,7 @@ const isActivePlan = computed(
currentPlan.value?.status !== WorkspacePlanStatuses.Trial &&
currentPlan.value?.status !== WorkspacePlanStatuses.Canceled
)
const isPurchasablePlan = computed(
() =>
currentPlan.value?.name === WorkspacePlans.Starter ||
currentPlan.value?.name === WorkspacePlans.Plus ||
currentPlan.value?.name === WorkspacePlans.Business ||
!currentPlan.value?.name // no plan equals pro trial plan
)
const isPurchasablePlan = computed(() => isPaidPlan(currentPlan.value?.name))
const seatPrice = computed(() =>
currentPlan.value && subscription.value
? seatPrices.value[currentPlan.value.name as keyof typeof seatPrices.value][
Expand All @@ -286,19 +275,23 @@ const nextPaymentDue = computed(() =>
)
const isAdmin = computed(() => workspace.value?.role === Roles.Workspace.Admin)
const guestSeatCount = computed(() =>
workspace.value
? workspace.value.team.items.filter((user) => user.role === Roles.Workspace.Guest)
.length
: 0
isActivePlan.value
? workspace.value?.subscription?.seats.guest ?? 0
: workspace.value?.team.items.filter((user) => user.role === Roles.Workspace.Guest)
.length ?? 0
)
const memberSeatCount = computed(() =>
workspace.value ? workspace.value.team.items.length - guestSeatCount.value : 0
isActivePlan.value
? workspace.value?.subscription?.seats.plan ?? 0
: workspace.value
? workspace.value.team.items.length - guestSeatCount.value
: 0
)
const billValue = computed(() => {
const guestPrice = seatPrice.value[Roles.Workspace.Guest] * guestSeatCount.value
const memberPrice = seatPrice.value[Roles.Workspace.Member] * memberSeatCount.value
const totalPrice = guestPrice + memberPrice
if (statusIsTrial.value) return `£${totalPrice}`
if (isPurchasablePlan.value) return `£${totalPrice}`
return `£0`
})
const billDescription = computed(() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend-2/lib/common/generated/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,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 role\n plan {\n name\n status\n createdAt\n }\n subscription {\n billingInterval\n currentBillingCycleEnd\n }\n team {\n items {\n id\n role\n }\n }\n }\n": types.SettingsWorkspacesBilling_WorkspaceFragmentDoc,
"\n fragment SettingsWorkspacesBilling_Workspace on Workspace {\n ...BillingAlert_Workspace\n id\n role\n plan {\n name\n status\n createdAt\n }\n subscription {\n billingInterval\n currentBillingCycleEnd\n seats {\n guest\n plan\n }\n }\n team {\n items {\n id\n role\n }\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 plan {\n status\n name\n }\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 }\n": types.SettingsWorkspacesGeneralEditAvatar_WorkspaceFragmentDoc,
Expand Down Expand Up @@ -818,7 +818,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 role\n plan {\n name\n status\n createdAt\n }\n subscription {\n billingInterval\n currentBillingCycleEnd\n }\n team {\n items {\n id\n role\n }\n }\n }\n"): (typeof documents)["\n fragment SettingsWorkspacesBilling_Workspace on Workspace {\n ...BillingAlert_Workspace\n id\n role\n plan {\n name\n status\n createdAt\n }\n subscription {\n billingInterval\n currentBillingCycleEnd\n }\n team {\n items {\n id\n role\n }\n }\n }\n"];
export function graphql(source: "\n fragment SettingsWorkspacesBilling_Workspace on Workspace {\n ...BillingAlert_Workspace\n id\n role\n plan {\n name\n status\n createdAt\n }\n subscription {\n billingInterval\n currentBillingCycleEnd\n seats {\n guest\n plan\n }\n }\n team {\n items {\n id\n role\n }\n }\n }\n"): (typeof documents)["\n fragment SettingsWorkspacesBilling_Workspace on Workspace {\n ...BillingAlert_Workspace\n id\n role\n plan {\n name\n status\n createdAt\n }\n subscription {\n billingInterval\n currentBillingCycleEnd\n seats {\n guest\n plan\n }\n }\n team {\n items {\n id\n role\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
Loading

0 comments on commit fb72eb6

Please sign in to comment.