Update billing summary (#4370)

packages/frontend-2/components/settings/workspaces/billing/Summary.vue

@@ -12,30 +12,23 @@
       </div>
 
       <div class="p-5 pt-4 flex flex-col">
-        <h3 class="text-body-xs text-foreground-2 pb-4">
-          <template v-if="isPurchasablePlan">
-            <span class="capitalize">{{ billingInterval }}</span>
-            bill
-          </template>
-          <template v-else>Bill</template>
-        </h3>
+        <h3 class="text-body-xs text-foreground-2 pb-4">Billing period</h3>
         <p class="text-heading-lg text-foreground inline-block">
-          TODO
-          <span v-if="isPurchasablePlan">per {{ billingInterval }}</span>
+          <span v-if="isPurchasablePlan">
+            {{ intervalIsYearly ? 'Yearly' : 'Monthly' }}
+          </span>
+          <span v-else>Not applicable</span>
         </p>
-        <NuxtLink
-          v-if="showBillingPortalLink"
-          class="text-body-xs text-foreground-2 underline hover:text-foreground cursor-pointer mt-1"
-          @click="billingPortalRedirect(workspaceId)"
-        >
-          View cost breakdown
-        </NuxtLink>
       </div>
 
       <div class="p-5 pt-4 flex flex-col">
-        <h3 class="text-body-xs text-foreground-2 pb-4">Billing period</h3>
+        <h3 class="text-body-xs text-foreground-2 pb-4">Next payment due</h3>
         <p class="text-heading-lg text-foreground capitalize">
-          {{ isPurchasablePlan ? billingInterval : 'Not applicable' }}
+          {{
+            currentBillingCycleEnd
+              ? dayjs(currentBillingCycleEnd).format('dd-mmmm-yyyy')
+              : 'Not applicable'
+          }}
         </p>
       </div>
     </div>
@@ -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<string>
@@ -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(
   () =>

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
   }
 })

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,