Referral Code Onboarding Block for React

Edit CODES. Each has a name, what it gives (as the chip says it), the percent it takes off, how many invoices it applies to and an ended day (ISO) for a code that no longer works. PLAN is the plan's price in cents; every amount is worked out from it in whole cents, so the figures always add up.

Its ended day is compared with a typed AS_OF date, never with the clock, so it reads the same for everyone. The answer says the day ("That code ended on 30 Sep.") and the field keeps what was typed and keeps focus.

It puts the code on the real clipboard and says so ("Copied MEAL20. Paste it in the field."). If the browser refuses, it says "Copy blocked. Select the code by hand." instead. The sample codes are fiction for trying the demo; in your app drop that band.

Referred (the invite's code applied), typed (a code you applied), and none (the field and Apply). The field and the applied chip share one cell, so changing between them changes nothing else. Removing a code, with the chip's X or "Use a different code", puts focus in the field.

Continue does not guess: it says "Press Apply to use MEAL20, or clear the field." and puts focus on Apply. With a code applied, or with the field empty and no code, it simply saves.

Everything: codes are checked against the typed list in the tab, nothing is sent, and no invite link is read. In your app check the code on your server where apply says so, take a referral from the invite link's address, and keep the code on the new account when Continue is pressed.