Add the Pro plan badge to the account header
Angular · Angular · intermediate · modification
Refactors plan-badge resolution into an extensible, DI-driven registry: a `PlanBadgeProvider` strategy interface, one injectable provider per tier registered against a `PLAN_BADGE_PROVIDERS` multi-token, and a `PlanBadgeService` that builds its lookup from whatever providers are registered — so a new tier drops in by adding a provider, with no change to the service. Adds the Pro tier alongside Free.
`PlanBadgeService.badgeFor` is called once, by the account header, to render the current user's plan badge. `PLAN_BADGE_REGISTRY` is added to the application's root providers.
Requirements
- The account header shows a plan badge. This PR adds the second and final tier: alongside Free, a 'Pro' badge (label 'Pro', colour #7c3aed).
- There are exactly two plan tiers — free and pro. No other tiers are planned, and plans are known at build time (the `PlanTier` union is the whole set).
- PlanBadgeService is consumed in exactly one place — the account header component.
- Keep the change proportional to the requirement: this is mapping two known plans to a label and colour.
Files touched
- src/app/account/plan-badge.service.ts
--- src/app/account/plan-badge.service.ts
-import { Injectable } from '@angular/core';
+import { inject, Injectable, InjectionToken } from '@angular/core';
+
+export type PlanTier = 'free' | 'pro';
export interface PlanBadge {
}
-@Injectable({ providedIn: 'root' })
-export class PlanBadgeService {
+export interface PlanBadgeProvider {
+ readonly plan: PlanTier;
+ badge(): PlanBadge;
+}
+
+export const PLAN_BADGE_PROVIDERS = new InjectionToken<PlanBadgeProvider[]>('PLAN_BADGE_PROVIDERS');
+
+@Injectable()
+export class FreePlanBadgeProvider implements PlanBadgeProvider {
+ readonly plan: PlanTier = 'free';
badge(): PlanBadge {
return { label: 'Free', color: '#6b7280' };
}
+@Injectable()
+export class ProPlanBadgeProvider implements PlanBadgeProvider {
+ readonly plan: PlanTier = 'pro';
+ badge(): PlanBadge {
+ return { label: 'Pro', color: '#7c3aed' };