Group Buy Pricing With Email Chips Block for React

Edit the RATES array at the top of the file: each entry is the seat count a price starts from and the price per seat. The key in the header, the price, the total, the bar and the sentence under it are all worked out from that list, so adding a fifth rate needs no other change. START holds the teammates already on the list when the page loads, and MAX_SEATS is where the form asks for a custom quote instead.

To every seat, which is what the copy says and what the arithmetic does: the total is the seat count times the rate the team has reached. Adding the fifth seat lowers all five to $10, so five seats cost $50 against $48 for four. If you'd rather charge each bracket's seats at their own price, replace rate.price * seats with a sum over the brackets.

The call to action is a real link whose text follows the seat count. It's a ShineButton with render set to an a element and nativeButton={false}. Build its href from emails, or post them from the form to your server, create the workspace with that many seats and send each address an invitation.

Yes. The field has a visible label, the form submits on Enter, and an invalid or duplicate address puts a message under the field that the field is described by and a screen reader announces. Each chip is a list item with a remove button named for its address ("Remove maya.lindqvist@northwind.studio"), and after a removal focus returns to the field. The line under the bar is a polite live region, so each change to the rate is announced once; the stack of initials and the bar are decorative and hidden from assistive technology.

The two cells stack, the invitations first, and the chips wrap onto as many lines as they need. The price, the total, the bar and the call to action follow, and the call to action lands within the first screen and a half of an iPhone. The key in the header wraps under the headline with all four rates visible, and long addresses are cut with an ellipsis inside their chip.

A number is easy to inflate and easy to forget; a list of people is concrete. Adding a teammate is also the first step of the invitation you want them to complete, so the price drop rewards the action that makes the product stick. Keep the field optional in your real flow: let people buy with the seats they have and invite the rest later.