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/country-redirect.

When to use it

Use CountryRedirect when the storefront serves multiple country-specific stores and you want to suggest visitors switch to their local version. It detects a mismatch between the visitor's country and the current store, then shows a dismissible banner.

Composition notes

CountryRedirect is a self-contained banner:

• detectedCountry and currentCountry are objects with code, name, and optional flag. The banner only shows if they differ.
• redirectUrl is where the accept button navigates.
• onAccept and onDismiss are optional callbacks for analytics or custom behavior.
• persistKey controls the localStorage key for dismissal persistence. Set to false to disable persistence.
• labels lets you customize the message, accept, and dismiss button text.

Behavior and theming guidance

The banner renders nothing if countries match or if the visitor previously dismissed it (checked via localStorage). On accept, it navigates to redirectUrl. On dismiss, it hides and persists the dismissal.

Keep the message short and the country names localized. The banner should feel helpful, not intrusive.

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=CountryRedirect.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes