Skip to content

feat(ui): align credit & subscription status with Canva's monetization pattern - #31

Merged
cescox merged 2 commits into
mainfrom
feat/monetization-status-pattern
Jun 26, 2026
Merged

cescox merged 2 commits into
mainfrom
feat/monetization-status-pattern

Conversation

@cescox

@cescox cescox commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Brings the monetization-status components in line with Canva's documented Monetization Status pattern and improves the credit copy.

Changes

  • Credit copy — ActionCredits folds the refresh cadence into the credit noun ("7 of 10 App monthly credits left"), and omits the cadence word entirely when credits don't refresh (lifetime / no interval). Translations updated across all supported locales.
  • Pattern compliance — ActionCredits and SubscriptionStatus now follow the pattern: size="small" status text, the count in a bold span, and the status line tight against its CTA (Rows spacing="0") with account-details lines 1u below.
  • Example app — the reference README dropped the removed CreditCounter, the pre-split canup import, and the old error type field; updated to @canup/ui + SubscriptionStatus + error.code.

Verification

  • test, lint, typecheck, build all green locally.
  • Spacing/sizing measured against the live Canva App UI Kit storybook to confirm parity (status text size, 0u status↔CTA, bold count).

cescox added 2 commits June 26, 2026 17:04
…n pattern

ActionCredits folds the refresh cadence into the credit noun ("7 of 10 App monthly credits left"), and omits the cadence word when credits don't refresh. ActionCredits and SubscriptionStatus now follow Canva's monetization-status pattern: small text, the count in a bold span, and the status line tight against its CTA (0u) with account details 1u below.

Credit-status translations are updated across all supported locales.
…nt API

The README still referenced the removed CreditCounter component, the pre-split `canup` import, and the old error `type` field. Update it to import from `@canup/ui`, use SubscriptionStatus, and read `error.code`.
@github-actions

Copy link
Copy Markdown

Coverage Report for @canup/ui (packages/ui)

Status Category Percentage Covered / Total
🔵 Lines 98.39% (🎯 95%) 184 / 187
🔵 Statements 98.08% (🎯 95%) 205 / 209
🔵 Functions 98.11% (🎯 95%) 52 / 53
🔵 Branches 96% (🎯 85%) 120 / 125
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/ui/src/components/ActionCredits.tsx 100% 92.85% 100% 100%
packages/ui/src/components/SubscriptionStatus.tsx 100% 94.44% 100% 100%
packages/ui/src/internal/i18n/messages.ts 100% 100% 100% 100%
packages/ui/src/internal/i18n/translations.ts 100% 100% 100% 100%
Generated in workflow #43 for commit 9e0f80e by the Vitest Coverage Report Action

@github-actions

Copy link
Copy Markdown

Coverage Report for @canup/cli (packages/cli)

Status Category Percentage Covered / Total
🔵 Lines 98.9% (🎯 95%) 1082 / 1094
🔵 Statements 98.68% (🎯 95%) 1125 / 1140
🔵 Functions 98.46% (🎯 95%) 193 / 196
🔵 Branches 92.45% (🎯 85%) 515 / 557
File CoverageNo changed files found.
Generated in workflow #43 for commit 9e0f80e by the Vitest Coverage Report Action

@cescox
cescox merged commit 208d5e2 into main Jun 26, 2026
8 checks passed
@cescox
cescox deleted the feat/monetization-status-pattern branch June 26, 2026 15:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant