React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

MarketingConsent

A checkbox component for collecting marketing consent with internationalization support

Interactive Playground

Customize the component properties and see the changes in real-time

CheckedDisabled

I agree to receive marketing emails.

States

Different component states

Default (Unchecked)

I agree to receive marketing emails.

Checked

I agree to receive marketing emails.

Disabled (Unchecked)

I agree to receive marketing emails.

Disabled (Checked)

I agree to receive marketing emails.

API Reference

Props

id

string - Custom ID for the checkbox (optional)

checked

boolean - Controlled checked state (optional, makes component controlled)

defaultChecked

boolean - Initial checked state for uncontrolled component (default: false)

disabled

boolean - Disables the checkbox (default: false)

className

string - Additional CSS classes (optional)

onStateChanged

(checked: boolean) => void - Callback when checked state changes (optional)

onSendAnalytic

(event: string) => void - Analytics callback (optional)

Usage Notes

Controlled vs Uncontrolled

The component can be used in both controlled and uncontrolled modes. Use the checked prop for controlled mode, or defaultChecked for uncontrolled mode.

Internationalization

The component uses the useTranslation hook to display localized text. The label text is retrieved from the translation key shared.marketing_consent.check_box_text.

Analytics Events

When the checkbox state changes, the component triggers analytics events:product-purchase-marketing-consent-agreedwhen checked, andproduct-purchase-marketing-consent-rejectedwhen unchecked.

Accessibility

The component uses the StoreCheckboxGroup component which provides proper accessibility features including label association and keyboard navigation.