nuxt-x-affiliate
CommissionTiers
Commission tier display with current-tier highlight and progress bar toward the next tier.
CommissionTiers
The XAFCommissionTiers component renders a visual breakdown of all commission tiers. The affiliate's current tier is highlighted and a progress bar shows how close they are to the next level.
Components
<XAFCommissionTiers />
Feed it data from useAffiliate().
<XAFCommissionTiers
:tiers="tiers"
:current-tier-id="currentTier?.id ?? null"
:next-tier="nextTier"
:progress-to-next-tier="progressToNextTier"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tiers | CommissionTier[] | required | Full list of commission tier definitions |
currentTierId | string | null | null | ID of the affiliate's current tier (highlighted) |
nextTier | CommissionTier | null | null | The next tier to reach (shown in progress bar label) |
progressToNextTier | number | 0 | Progress percentage toward the next tier (0–100) |
AI Context
component: XAFCommissionTiers
package: "@xenterprises/nuxt-x-affiliate"
use-when: Showing commission tier structure and the affiliate's current position on the landing page or dashboard