grant/keysat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.2.0:32 — Per-product policy cap pre-check + grandfather banner

Browse Source 
Closes the third tier-enforced surface (Creator caps policies at 5
per product). Same UX shape as the global products + codes pre-check
in v0.2.0:31, scoped to a single product instead of the whole
instance.

- routes.policies fetches /v1/admin/tier once on render and threads
  the status into renderPolicyCardGrid.
- renderPolicyCardGrid renders a grandfather banner above the tier
  grid when policies.length > caps.policies_per_product (per-
  product, since the cap is per-product).
- renderDraftTierCard accepts (tierStatus, productPolicyCount) and
  shows the same pre-check warning at the top of the draft form
  when used == cap - 1 (approaching) or used >= cap (over).
- Reuses existing helpers (capPreCheckCard, grandfatherBanner) by
  synthesizing a tierStatus shape with caps.policies mapped to the
  per-product cap. No new component code.

UI-only.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Grant
2026-05-11 16:43:10 -05:00
parent 3d7cf166db
commit 70ce20951b
2 changed files with 77 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
licensing-service/web/index.html
+64 -4
View File
@@ -2667,7 +2667,7 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
* bubble picker against the product's catalog (or fallback
* textarea when no catalog).
*/
function renderDraftTierCard(product, onCommit, onCancel) {
function renderDraftTierCard(product, onCommit, onCancel, tierStatus, productPolicyCount) {
// Compact inputs. Help icons replace per-field hint text to
// keep the card narrow.
const nameInput = el('input', {
@@ -2947,6 +2947,31 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
if (det) det.style.display = recurringCb.checked ? 'block' : 'none'
})
// Per-product policy cap pre-check. tierStatus.caps.policies_per_product
// is the cap (or null = unlimited). If the operator has 4/5 policies
// and they just clicked "+ Add tier", show an inline warning at the
// top of the draft so they know what to expect. If already over,
// show the "cap reached" notice instead (operator can still try; the
// existing 402 modal catches the failed submit).
let policyCapNotice = null
if (tierStatus && tierStatus.caps && tierStatus.caps.policies_per_product != null) {
const cap = tierStatus.caps.policies_per_product
const used = productPolicyCount || 0
if (used >= cap || used === cap - 1) {
// Synthesize a per-product tierStatus shape so capPreCheckCard
// can do its thing without a special case. We map the
// policies-per-product cap onto a synthetic 'policies' key.
const synth = {
tier_name: tierStatus.tier_name,
next_tier: tierStatus.next_tier,
upgrade_url: tierStatus.upgrade_url,
caps: { policies: cap },
usage: { policies: used },
}
policyCapNotice = capPreCheckCard(synth, 'policies', 'policies on this product')
}
}
return el('div', {
class: 'tier-card draft',
style:
@@ -2955,7 +2980,7 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
'padding:18px 16px; min-height:280px; ' +
'box-shadow:0 0 0 1px rgba(191,160,104,0.06); ' +
'display:flex; flex-direction:column;',
}, [body])
}, [policyCapNotice, body].filter(Boolean))
}
/**
@@ -2963,7 +2988,27 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
* as a tier card + an "+ Add tier" card on the right. Click to
* add → morphs into a draft card; multiple drafts can coexist.
*/
function renderPolicyCardGrid(product, policies, byPolicyCounts, onMutate) {
function renderPolicyCardGrid(product, policies, byPolicyCounts, onMutate, tierStatus) {
// Grandfather banner for this product, when its policy count
// strictly exceeds the per-product cap (e.g. operator downgraded
// from Pro to Creator with 6 policies on a product, Creator caps
// at 5). Renders ABOVE the grid so the operator sees the state
// before scrolling through cards.
let gfBanner = null
if (tierStatus && tierStatus.caps && tierStatus.caps.policies_per_product != null) {
const cap = tierStatus.caps.policies_per_product
const used = (policies || []).length
if (used > cap) {
const synth = {
tier_name: tierStatus.tier_name,
next_tier: tierStatus.next_tier,
upgrade_url: tierStatus.upgrade_url,
caps: { policies: cap },
usage: { policies: used },
}
gfBanner = grandfatherBanner(synth, 'policies', 'policies on this product')
}
}
const grid = el('div', {
style:
'display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); ' +
@@ -3023,6 +3068,8 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
grid.replaceChild(newCard, draft)
},
() => grid.replaceChild(makePlaceholder(), draft), // cancel → swap back
tierStatus,
(policies || []).length,
)
grid.replaceChild(draft, placeholder)
grid.appendChild(makePlaceholder())
@@ -3032,6 +3079,13 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
grid.appendChild(makePlaceholder())
wireTierGridDragAndDrop(grid, onMutate)
// If a grandfather banner exists, wrap [banner, grid] in one
// container; otherwise return the grid as before. Wrapping is the
// simplest way to render the banner inside the same product card
// body without altering the caller (which appends a single child).
if (gfBanner) {
return el('div', null, [gfBanner, grid])
}
return grid
}
@@ -3109,6 +3163,12 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
const target = document.getElementById('route-target')
target.innerHTML = ''
// Per-product policy cap state. Used by renderPolicyCardGrid +
// renderDraftTierCard to surface a grandfather banner (when over)
// and a pre-check warning (when at cap-1 or over) on each product
// card. Force-refresh so the count reflects any creates/deletes
// from the prior route.
const policiesTierStatus = await loadTierStatus({ forceRefresh: true })
const products = (await api('/v1/products').catch(() => ({ products: [] }))).products || []
if (products.length === 0) {
target.appendChild(plainCard([
@@ -3565,7 +3625,7 @@ hr.div { border:none; border-top:1px solid var(--border-1); margin:18px 0; }
previewBtn ? el('span', { style: 'margin-left:auto' }, previewBtn) : null,
]),
el('div', { class: 'card-body' }, [
renderPolicyCardGrid(p, policies, byPolicy, () => routes.policies()),
renderPolicyCardGrid(p, policies, byPolicy, () => routes.policies(), policiesTierStatus),
]),
])
target.appendChild(productCard)
startos/versions/v0.2.0.ts
+13 -1
View File
@@ -58,6 +58,18 @@ const RELEASE_NOTES = [
// in RELEASE_NOTES above (the milestone). Subsequent revisions
// append here.
const ROUTINE_NOTES = [
'0.2.0:32 — **Per-product policy cap also pre-checked + grandfathered.** Extends the v0.2.0:31 cap-handling pattern to the third tier-enforced surface (Creator caps each product at 5 policies). Same shape, just scoped to a single product instead of the whole instance.',
'',
'**Pre-check.** When the operator clicks "+ Add tier" on a product that already has 4 of 5 policies, the draft tier card opens with a gold-bordered "Approaching cap" warning at the top: "You\'re at 4/5 policies on this product. Creating one more will hit your Creator tier cap." Includes a direct upgrade link. The existing 402 → upgrade modal still fires if the operator pushes through.',
'',
'**Grandfather.** When a single product carries more policies than the current tier\'s per-product cap (e.g. operator on Pro authored 7 policies, then downgraded to Creator), that product\'s card now renders a persistent grandfather banner above its tier grid: "Grandfathered: 7 policies on this product active vs Creator tier cap of 5. Existing policies keep working. Creating new ones is blocked until you upgrade to Pro." The banner appears per-product (not page-wide) since the cap is per-product. Other products on the same instance show their own state independently.',
'',
'**Implementation note.** Reuses the v0.2.0:31 helpers (`capPreCheckCard`, `grandfatherBanner`) by synthesizing a `tierStatus` shape with `caps.policies` mapped to the per-product cap — no new component code needed, just an extra parameter threaded through `renderPolicyCardGrid` → `renderDraftTierCard`.',
'',
'**Test count: 87** (unchanged — pure UI).',
'',
'**Upgrade path.** v0.2.0:31 → v0.2.0:32 is a drop-in. No schema, no SDK breaking change.',
'',
'0.2.0:31 — **Four-item punchlist landed: cap-hit pre-check, grandfather banner, webhooks empty state, help-icon overhaul.** Clears the remaining outstanding admin-UI items.',
'',
'**Cap-hit pre-check (item #7).** Operators no longer have to submit-and-bounce off a 402 to learn they\'re about to hit a tier cap. The Products page and the Discount Codes page each call `/v1/admin/tier` on render and surface a gold-bordered "Approaching cap" warning inline above the create-form submit button whenever usage is at cap-1 (e.g. 4/5 products on Creator). The warning includes a direct upgrade link. The existing 402 → upgrade modal still fires if the operator goes ahead and submits.',
@@ -477,7 +489,7 @@ const ROUTINE_NOTES = [
].join('\n\n')
export const v0_2_0 = VersionInfo.of({
version: '0.2.0:31',
version: '0.2.0:32',
releaseNotes: { en_US: ROUTINE_NOTES },
// No on-disk transformation needed — v0.2.0:0 is a label change.
// SQLite-level migrations live separately under