diff --git a/packages/frontend-2/components/settings/workspaces/billing/Summary.vue b/packages/frontend-2/components/settings/workspaces/billing/Summary.vue
index f34c0c7b2..85c6f7f0d 100644
--- a/packages/frontend-2/components/settings/workspaces/billing/Summary.vue
+++ b/packages/frontend-2/components/settings/workspaces/billing/Summary.vue
@@ -12,30 +12,23 @@
-
-
- {{ billingInterval }}
- bill
-
- Bill
-
+
Billing period
- TODO
- per {{ billingInterval }}
+
+ {{ intervalIsYearly ? 'Yearly' : 'Monthly' }}
+
+ Not applicable
-
- View cost breakdown
-
-
Billing period
+
Next payment due
- {{ isPurchasablePlan ? billingInterval : 'Not applicable' }}
+ {{
+ currentBillingCycleEnd
+ ? dayjs(currentBillingCycleEnd).format('dd-mmmm-yyyy')
+ : 'Not applicable'
+ }}
@@ -63,6 +56,7 @@ import { useWorkspacePlan } from '~~/lib/workspaces/composables/plan'
import { useBillingActions } from '~/lib/billing/composables/actions'
import { type MaybeNullOrUndefined, WorkspacePlanStatuses } from '@speckle/shared'
import { formatName } from '~/lib/billing/helpers/plan'
+import dayjs from 'dayjs'
defineProps<{
workspaceId?: MaybeNullOrUndefined
@@ -72,7 +66,8 @@ const { billingPortalRedirect } = useBillingActions()
const route = useRoute()
const slug = computed(() => (route.params.slug as string) || '')
-const { plan, isPurchasablePlan, billingInterval } = useWorkspacePlan(slug.value)
+const { plan, isPurchasablePlan, intervalIsYearly, currentBillingCycleEnd } =
+ useWorkspacePlan(slug.value)
const showBillingPortalLink = computed(
() =>
diff --git a/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue b/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue
index eb99a22fd..6192952a2 100644
--- a/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/actions/UpdateSeatTypeDialog.vue
@@ -59,7 +59,7 @@ const updateUserSeatType = useWorkspaceUpdateSeatType()
const {
hasAvailableEditorSeats,
editorSeatPriceFormatted,
- billingCycleEnd,
+ currentBillingCycleEnd,
isPurchasablePlan,
isFreePlan,
intervalIsYearly,
@@ -77,7 +77,7 @@ const billingMessage = computed(() => {
: `This adds an extra Editor seat to your subscription, increasing your total billing by ${editorSeatPriceFormatted.value}/${annualOrMonthly.value}.`
} else {
return isPurchasablePlan.value
- ? `The Editor seat will still be paid for until your plan renews on ${billingCycleEnd.value}. You can freely reassign it to another person.`
+ ? `The Editor seat will still be paid for until your plan renews on ${currentBillingCycleEnd.value}. You can freely reassign it to another person.`
: null
}
})
diff --git a/packages/frontend-2/lib/workspaces/composables/plan.ts b/packages/frontend-2/lib/workspaces/composables/plan.ts
index 97200dfd2..722a22c83 100644
--- a/packages/frontend-2/lib/workspaces/composables/plan.ts
+++ b/packages/frontend-2/lib/workspaces/composables/plan.ts
@@ -87,7 +87,9 @@ export const useWorkspacePlan = (slug: string) => {
const intervalIsYearly = computed(
() => billingInterval.value === BillingInterval.Yearly
)
- const billingCycleEnd = computed(() => subscription.value?.currentBillingCycleEnd)
+ const currentBillingCycleEnd = computed(
+ () => subscription.value?.currentBillingCycleEnd
+ )
// Seat information
const seats = computed(() => subscription.value?.seats)
@@ -118,7 +120,7 @@ export const useWorkspacePlan = (slug: string) => {
isFreePlan,
billingInterval,
intervalIsYearly,
- billingCycleEnd,
+ currentBillingCycleEnd,
statusIsCancelationScheduled,
subscription,
seats,