Channel Switchboard Affiliate Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your affiliate platform or inbox: details holds the name and email, and entries holds, for each channel, whether it is on, its link and its audience.

Nowhere real. Each channel in CHANNELS has a fixed example rate in dollars a month for every 1,000 people in its audience ($18 for a newsletter, $9 for a video channel, $12 for a blog, $5 for a social feed). earnings multiplies the audience you typed by the rate, rounds to whole dollars, and totalOf adds the channels that are on. The band says "Example only, not a promise of earnings", and so does the confirmation. Replace the rates with your programme's published terms, or drop the band if you don't publish any.

So that turning a switch never moves the page. Each band keeps its link and audience fields in place; they are disabled, and dimmed by the catalog's own disabled style, until the channel's switch is on, then they take focus like any field. A line under them states the example rate, and says what the channel could earn once the switch is on and an audience is typed; both lines keep their height. Turning a switch off keeps what you typed, so turning it back on brings it back.

A name, an email shaped like one, at least one channel on, and for each channel that is on a web address (https:// is added when you leave it off, and the host needs a dot) and an audience that is a whole number of at least 1. Typing in a field clears its error. Focus goes to the first problem in reading order, which is the first switch when no channel is on.

The number input formats the number as you leave the field ("8,000"). The block strips the commas before it checks or adds anything, so what the form keeps is always plain digits. Arrow keys change the number by 100.

Every band stacks: its label and switch first, then its two fields one per row, so nothing scrolls sideways at 320 pixels. The estimate and the submit button sit at the end, and the button goes full width. On a wide screen each band puts its label in a column at the start and its fields beside it.