License Activation Success Block for React

Nothing was activated: the key is a made-up sample, and the seats and features are typed in LICENSE and ENTITLEMENTS. The one live control is the copy button, which really puts the whole key on the clipboard and says so in a polite status message, with the words "It is a sample key". To wire it, fill LICENSE from your license server (plan, key, expiry, seats bought and in use) and ENTITLEMENTS from the plan's feature list, and send the Shine Button to your seat management. Keep the real key out of the page's HTML if it's secret: show it masked and fetch it when the user presses Copy.

A helper keeps the first and last group and hides the groups between ("WLFT-••••-••••-••••-8J3N"), enough to recognise a key by without showing it. It's set in a monospace code element with a left-to-right direction, so the groups and the hyphens never reorder in a right-to-left layout, and on a narrow screen the Copy button drops under it rather than the key being cut.

Two numbers: the seats bought and the seats in use. The headline "12 of 50", the free count and the bar's share (24%) are all worked out from them, so changing either updates all three. The bar is decoration and is hidden from assistive technology; the figure beside it says the same.

Below the small breakpoint the Limit column goes and each limit is written under its feature's name, while the Included column keeps its check or bar and only the icon shows (the words stay for assistive technology). Above it, all three columns show. The table has a caption and the feature names are its row headers.

A panel: it sits inside your account area under a compact header, the way the billing blocks do, with no page rails or band. That's why its file says so in its doc comment, and why its one primary action is in the header rather than at the foot of a page.

The Shine Button is a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.