Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/newsletter-signup.

When to use it

Use NewsletterSignup wherever the storefront needs an email capture form: footer newsletter sections, embedded editorial CTAs, campaign landing pages, and exit-intent modals. It handles the full form lifecycle (idle, loading, success, error) so you only need to wire the submit handler.

Composition notes

NewsletterSignup is a self-contained form:

• onSubmit receives the email string. Return a promise for automatic loading state.
• labels provides heading and description copy above the form.
• placeholder, buttonLabel, and successMessage customize the form elements.
• errorMessage shows an external error (e.g., from a failed API call).

Behavior and theming guidance

The form shows a loading spinner while the onSubmit promise is pending, then transitions to the success message. If the promise rejects or errorMessage is set, the error state shows instead.

Colors respond to --enad-text-primary-color, --enad-text-muted-color, and --enad-error-color. The form fits naturally in footer slots, sidebar panels, and full-width editorial sections.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=NewsletterSignup.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes