Show remaining custom-field quota on the layout menu

Jira Story: TF-3608 · Task: TF-3479 · Epic: TF-3477

Background

Several clients gave feedback that it's hard to know how many custom fields they can still add to their CDP customer layout. The remaining quota isn't shown anywhere in the UI today — to find it, users have had to inspect element (read the DOM / billing response) themselves, or they only discover the ceiling when the paywall / limit-reached modal appears after they've already hit it.

Goal: surface the remaining custom-field quota directly on the customer-layout editor (Settings › Customers › Properties) so users can see how many custom fields remain while editing, without inspect-element.

Grounding note: the design was flagged [DESIGN STILL DRAFT] in the originating Jira Task title, but the Task body shows the design is actually confirmed and merged (qontak-designer PR #123). The Jira title tag appears stale relative to the ticket body — worth a title edit on TF-3479 to stop future audits from re-flagging it as blocked on design.

The quota data already exists end-to-end (common/store/BillingStore.ts:31-42 — custom_field { limit, used, remaining } via /v1/billing/package; composable common/composables/useCustomFieldLimit.ts; feature flag custom_field_limitation; existing paywall CustomFieldLimitModal) — only the display is missing.

Scope Changes

• Frontend — qontak-customer-fe, customer-layout editor (MainModalLayoutContent.vue, LayoutFieldSection.vue, CustomFieldLimitModal.vue) and a new constants/url.ts export.

8. User Stories + Acceptance Criteria

User Story	Importance	Mockup / Technical Notes	Acceptance Criteria
[FIELDQUOTA-S01] — See remaining custom-field quota while editing the layout As a CDP admin editing my customer-layout's custom fields, I want to see how many custom fields I have left, so that I don't have to inspect-element or wait for the paywall to find out.	Should Have	Design confirmed: qontak-designer PR #123 (merged). Placement: sidebar banner (MpBanner + MpProgress) in the "Available fields" panel, above "Create field" — replaces the header-chip placement from the original draft mockup.	— Happy Path — • AC-1: Given the custom_field_limitation flag is ON, when I open the Available Fields sidebar, then I see a "Custom field usage" banner showing "X of Y used" with a progress bar, sourced from BillingStore.custom_field.remaining/.limit/.used; the count updates live as fields are added/removed in the layout. • AC-2: Given the Available Fields sidebar, when it renders, then fields are split into "Default fields" / "Custom fields" accordions, each with a count badge. • AC-3: Given "Create field" is clicked, when the action completes, then /settings/customers/properties?create=true opens in a new tab via the new URL_CREATE_FIELD constant. — At limit — • AC-4: Given remaining = 0, when the banner renders, then it switches to warning/amber styling with an "Upgrade your package for unlimited custom fields" CTA; the existing paywall modal (CustomFieldLimitModal) behavior is unchanged. • AC-5: Given a locked custom field in the picker (limit reached), when I click it, then the field renders greyed with an upgrade icon and clicking opens CustomFieldLimitModal — the same behavior as the existing drag-and-drop path. — Guard-rail — • NEG-1: Given the custom_field_limitation flag is OFF, when the sidebar renders, then no banner is shown and all existing behavior is unchanged. • NEG-2: This is display/UX only — no change to the save payload, add/remove/drag event contracts, or limit computation.

Verification

Jira status as of 2026-07-26: Story TF-3608 is To Do; implementation Task TF-3479 is READY TO DEPLOY. Design is confirmed/merged (see grounding note above). The repository PRD remains draft pending DRI review; the bucket tracker records A5 as in-review.