Approval Screen Setup Integration Block for React

Everything. Typing a handle, choosing a location, ticking the email box and pressing Install change state in this block only, and a polite status line below the panel says so from the start and after every action. A real install sends the merchant to Shopify, which shows its own approval screen listing the scopes; this panel is only a sketch of that step. Wire Install to your own app's install URL for the handle that was typed.

read_products, read_locations, read_inventory and write_inventory are Shopify Admin API access scopes. They are locked because the sync cannot work without any of them: it matches variants, finds locations, reads stock and writes the available count. The only optional choice on the panel, the weekly email, is Tallybin's own setting, not a Shopify scope. To change the list, edit SCOPES.

A handle is lowercase letters, numbers and hyphens, and cannot start or end with a hyphen (HANDLE_OK). The input accepts a pasted address such as Pinewick.myshopify.com/admin and keeps only the handle. The note under the field says what is wrong or what would happen next, and its space is reserved so the panel does not move while you type.

Every control has a name: the handle field is "Store handle", the select is "Location that holds the reserve", and the checkbox is named by its title. The scope list reads each scope with its access word. Installing moves focus to the result's heading, and Disconnect moves it back to the handle field. The status line is a polite live region present from load. Install is genuinely disabled until the handle is valid, with the reason beside it.

The panel is a single column at every width, with the buttons full width on a phone. The handle and the suffix always read in the same direction, because an address is not mirrored; the labels, notes and buttons follow the page direction. The only motion is the entrance fade-up, and reduced motion turns it off.