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 @@
-

- - -

+

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,