NewsletterSwitch

The shopper's newsletter opt-in as a switch that saves on toggle. Reads the signed-in customer and shows the chosen state while the save is in flight; a failed save falls back to the stored state and says so.

import { NewsletterSwitch } from "@evolve-storefront/feature-account/newsletter-switch";

Renders inside AccountProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The shopper opted in at checkout; switching it off saves at once.

<section>
  <h2>{t("preferences")}</h2>
  <NewsletterSwitch />
</section>;

Props

Prop	Type	Description
children?	ReactNode	The visible label; it is also the switch's accessible name.
value?	string
data-component?	undefined	Not a caller's to rename — see controlProps.
onSaved?	((newsletter: boolean) => void)	Called once the server has stored the new choice.

Any other props go to the root element, like on a plain HTML element.

Examples

With ErrorThe server refuses the save: toggling the switch puts it back to the stored choice and shows the error below it.

// A refused save reverts the switch and renders its own alert;
// `onSaved` only runs once the server has stored the choice.
<NewsletterSwitch onSaved={(newsletter) => track({ newsletter })} />;

Open in Storybook ↗