Purchasing Power Pricing Block for React

Edit COUNTRIES at the top of the file. Each has a label, a value (the ISO code) and a discount, the percent below the list price, where 0 means the list price. LIST_PRICE is the yearly list price and MAX_DISCOUNT is the far end of the scale; the marks under the scale are in MARKS. The price in every country is LIST_PRICE reduced by its discount, so keep discounts that give whole dollars or round them in priceOf.

They're sample numbers: the block doesn't ship an index. Build yours from a published purchasing power parity table or from your own conversion data, group countries into a few tiers (it's easier to explain and to verify than one price per country), and review it once a year. The copy under the scale says the prices follow a published index, so make that true for your numbers.

The picker only previews the price. The real check belongs in your checkout: compare the country on the card's billing address or the IP address with the country the buyer picked and fall back to the list price when they don't match, as the note under the button promises. Keep the same rule for renewals so a discount doesn't outlive a move.

"Join Hillside" is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your checkout and pass the chosen country in the query string so checkout can start from the same price.

Yes. The country picker is named, the struck price is read as "List price", the discount badge as "off the list price", and the scale is decorative because the sentence beside it says the same in words. The price isn't a live region, so choosing a country doesn't interrupt a screen reader; a polite status line announces the new yearly price once.

The two halves stack: the picker and its scale first, then the price and the button, so the call to action is in the first screen and a half with nothing to scroll sideways. The price keeps its large size.