Outcome-Based Pricing Block for React

RATE is the price of one resolved conversation in dollars and FREE the resolutions each month that cost nothing. SEAT_PRICE and SEAT_CAPACITY describe the per-seat plan it is set against: what a seat costs a month and how many resolved conversations one seat covers. MIN, MAX and STEP set the slider's range, and FACTS fills the ticked terms.

It is worked out, not claimed. Outcomes cost the conversations past the free ones times the rate; seats are bought whole, so a seat that is part empty still costs its full price. That makes outcomes cheaper whenever seats would run partly empty and seats cheaper at volumes that fill them exactly, and the line under the bars says which one is cheaper at the volume you chose, including when it's the seats. Replace the two seat constants with your competitor's real figures.

The slider is labelled "Resolved conversations a month" and reads its value in words ("600 resolved conversations a month"). A polite live region carries the sentence under the bars ("You save $102 a month, 17% less than seats"), so the rolling digits aren't read one by one. The bars are decorative; their amounts are text beside them.

"Start free" is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your sign-up route. It's the only primary button, and the slider is drawn in your foreground colour so the two don't compete.

The two cells stack. The call to action leaves the left cell and sits in a bar at the foot of the section with the conversations and the live monthly total, so the button and the price stay in view while you move the slider. Both buttons are in the page, one hidden at a time with display, so a screen reader meets only the one you see.

That's your product's definition, not the block's: this copy says a conversation is billed only when the agent resolves it, and that hand-offs to your team cost nothing. Write the same rule down next to the price, whatever it is: how a resolution is confirmed, and whether a customer reopening a conversation is billed twice.