Components · coach-admin
Upgrade prompt
PlannedExplains a plan limit and how to upgrade.
- Source
components/ui/alert.tsx - Figma: not linked yet (Q13)
What it is for
Explains a plan limit (for example, AI meal plans or client count) when a coach reaches it, says what the next plan adds, and offers the upgrade.
Built from
- Alert inline where the limit applies.
- Dialog when an action is blocked.
- Badge (
secondary) to mark plan features. - Button for "Upgrade" and "Not now".
Guidelines so far
- Say what is limited and why in one sentence; no pressure language.
- The coach can always close it and keep working with what they have.
Replaces in coach-admin
UpgradeWarningModal, PlanRestriction and the smart-assign upgrade component (about 210 style values).
From the read-only audit of coach-admin: 124 style values, 159 uses.
Classes and selectors
.plan-restriction-view__upgrade-btn7.plan-restriction-view6.plan-restriction-view__image-section4.plan-restriction-view__image-container4.plan-restriction-view__description3.plan-restriction-view__header3.plan-restriction-view__content-section3.plan-restriction-view__image1.plan-restriction-view__content-wrapper1
Files
src/components/formComponents/formModals/UpgradeWarningModal.scss93src/reusableComponents/PlanRestriction/PlanRestrictionView.scss50src/views/Program/ProgramNewFlow/BasicInfoStep/SmartAssignUpgradeComponent.js19
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$spacing-lgnot a color: spacing, size or layout$spacing-xlnot a color: spacing, size or layout$paid-experience-muted-text-color→ nearest neutral-500 (no semantic token)$paid-experience-surface-bgnot a color: spacing, size or layout$spacing-xsnot a color: spacing, size or layout$spacing-smnot a color: spacing, size or layout$spacing-mdnot a color: spacing, size or layout$spacing-2xlnot a color: spacing, size or layout$paid-experience-radius-mdnot a color: spacing, size or layout$paid-experience-check-bg→ nearest brand-50 (no semantic token)$spacing-2xsnot a color: spacing, size or layout$paid-experience-radius-lgnot a color: spacing, size or layout