Feature Flag Eligibility Error Block for React

From the typed RULES list and a function, metOf, that says whether each is met. In your app, evaluate the same conditions on the server (plan, region, a list membership) and pass the results in. The page never decides who gets a feature: the flag service does, and this page only explains its answer, so show the real reasons and not a generic "not available".

It flips the third condition to met, turns the count to "All three conditions are met", fills the next wave on the meter and says "On the list: you'll see it in the next wave, about two weeks". It is a real Switch: Space toggles it, turning it off takes you back off the list, and the status line is a polite live region present from load. Nothing is saved: wire the Switch to an endpoint that adds the workspace to your list.

The solid part is the share of workspaces the feature is on for (35%); the dashed part is the next wave (20% more). Both are typed in ON_NOW and NEXT_WAVE, and the text beside the bar says the same, since the bar is decorative. Don't promise a date a rollout can't keep: the sentence says "about two weeks" because that is an estimate.

A met condition is a check in a circle with the word "Met", and an unmet one a cross in a circle with "Not met", so the page reads the same for people who can't tell colors apart and in every theme. Nothing here is red or green.

To #: point it at your dashboard. It's a Shine Button with render set to an a element and nativeButton={false}. If this page replaces the feature at its own address, answer with a 403 so crawlers skip it; if it is part of the app, render it with a 200.

The conditions stack with their words at the end, the Switch and the meter follow, and Back to dashboard stays pinned at the foot of the screen so it is always on the first screen, then sits in the flow from the small breakpoint.