Referral Program Settings Block for React

TIERS lists the ladder (the number of referrals, the label and the months it adds), BOX is the sample first box in dollars that the sentence is worked out on, and rangeOf holds what the discount and the months may be (5 to 50 percent, 5 to 30 dollars, 1 to 3 months). The ladder cells, the calculator and the sum are all read from TIERS.

Friends times the months per friend from the rule, plus the months of every tier the number reaches. A tier shows Reached or how many more friends it needs, in words as well as in the solid bar along its top, and the sentence under the slider spells out both parts and the total. The slider is named, announces its value in friends and is not part of the saved settings.

Letters, numbers and hyphens, at least 4 and at most 12 characters. A code that breaks that shows the reason on the line under the field and in the field's description, the link below keeps the last typed text, Copy declines while the code is invalid, and Save is refused with focus on the field.

Everything: nobody is paid, the link opens nothing and the copy goes to your own clipboard. Save keeps the settings in this page and says so. To make it real, store the rule and the code with the account, check a code is unique on the server, credit the referrer when the friend's second order ships, and keep the ladder in the same table.

The rule is a group with every number field and the unit select named, the ladder is an ordered list, the copy button announces when the link is copied, and the status line is a polite live region present from the start. The code and the link read left to right inside a right-to-left page, and the amounts and counts sit in isolated runs so the sentence keeps its order.