Skip to content

feat(billing): add 'Manage subscription' link in meterDrawer footer #4056

Closed

Description

@PierreBrisorgueil

Context

The compute mini-bar opens a drawer (billing.meterDrawer.component.vue) that shows :

  • usage progress
  • breakdown chart
  • "Buy extras" button (opens checkout modal)

But there is no link to navigate to the full /billing page to manage subscription, change plan, view invoices, etc.

Today's only nav surfaces toward /billing are :

  1. <organization-detail> page → "Manage subscription" button (visible only to org owners/admins, gated on serverConfig.billing.* — currently broken upstream, see pierreb-devkit/Node#XXX)
  2. Direct URL typed manually

So a user who clicks the mini-bar gauge sees the drawer but has no obvious path to the broader billing surface — they end up using the back button or typing the URL.

Proposal

Add a footer with a "Manage subscription" link button in the drawer, after the breakdown + extras CTA. Clicking it :

  • Closes the drawer (emit('update:modelValue', false))
  • Routes to /billing
<!-- billing.meterDrawer.component.vue, before </v-card> closing tag -->
<v-divider class="my-4" />
<v-card-actions class="px-6 pb-6">
  <v-btn
    variant="text"
    color="primary"
    :class="config.vuetify.theme.rounded"
    class="text-none"
    to="/billing"
    @click="$emit('update:modelValue', false)"
  >
    <v-icon icon="fa-solid fa-credit-card" size="small" class="mr-2" />
    {{ t('billing.usage.manageSubscription') }}
  </v-btn>
</v-card-actions>

Plus the i18n key in src/modules/billing/lang/{en,fr}.js :

  billing: {
    usage: {
      title: 'Usage',
+     manageSubscription: 'Manage subscription',
      ...

Rationale

  • Discoverability : the gauge is the most visible billing affordance for users on a meterMode plan. Not having a path from gauge → billing settings forces a non-obvious detour through the org page.
  • Consistency : the <organization-detail> page already has "Manage subscription" button. The drawer should mirror that affordance.
  • Low risk : single component edit + i18n + 1 unit test that the link exists.

Out of scope

  • Adding billing to main nav / sidebar : explicitly NOT desired (per architectural decision — billing belongs to org context, not user nav).
  • Adding billing to user profile : also out of scope (billing is org-level).

Effort

~10 min implementation + i18n + unit test, ~30 min PR convergence cycle.

Related

  • pierreb-devkit/Node issue : exposing billing.{enabled,meterMode} in /api/auth/config (companion fix — without that, the drawer never appears in the first place because the mini-bar is hidden)
  • comes-io/trawl_vue PR-T-V2 #819 — the original implementation that landed the drawer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions