### API Documentation for newsletter-input-email Component Props Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md Defines the configurable properties for the `newsletter-input-email` component, including placeholder text, input labels, error messages, and CSS class overrides. ```APIDOC newsletter-input-email Props: placeholderText (string): Placeholder text for the email input. Default: "Enter your email address" (translated according to the store's locale). inputLabel (string): Label for the email input. Default: null. errorMessage (string): Error message to be shown if email is invalid. Default: "Invalid email address" (translated according to the store's locale). classes (CustomCSSClasses): Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://github.com/vtex-apps/css-handles#usecustomclasses). Note that this is only useful if you're importing this block as a React component. Default: undefined. ``` -------------------------------- ### API Documentation for newsletter-input-name Component Props Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md Defines the configurable properties for the `newsletter-input-name` component, including placeholder text, input labels, error messages, and CSS class overrides. ```APIDOC newsletter-input-name Props: placeholderText (string): Placeholder text for name input. Default: "Enter your name" (translated according to the store's locale). inputLabel (string): Label for the name input. Default: null. errorMessage (string): Error message to be shown if name input is empty. Default: "Invalid name" (translated according to the store's locale). classes (CustomCSSClasses): Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://github.com/vtex-apps/css-handles#usecustomclasses). Note that this is only useful if you're importing this block as a React component. Default: undefined. ``` -------------------------------- ### Add Store Newsletter App Dependency Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md This snippet demonstrates how to add the `vtex.store-newsletter` app as a dependency in your `manifest.json` file. This step is crucial for enabling the app's blocks and functionalities within your VTEX IO project. ```diff "dependencies": { + "vtex.store-newsletter": "1.x" } ``` -------------------------------- ### Configure newsletter-input-phone Component Properties Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md Defines the configurable properties for the `newsletter-input-phone` component, allowing customization of placeholder text, input labels, error messages, and CSS handles. ```APIDOC newsletter-input-phone props: placeholderText: string description: Placeholder text for phone input. defaultValue: 'Enter your phone' (translated according to the store's locale). inputLabel: string description: Label for the phone input. defaultValue: null errorMessage: string description: Error message to be shown if phone input is empty. defaultValue: 'Invalid phone' (translated according to the store's locale). classes: CustomCSSClasses description: Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're importing this block as a React component. defaultValue: undefined ``` -------------------------------- ### Configure Newsletter Form in Store Template Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md This JSON configuration illustrates how to integrate the `newsletter-form` block into a desired store template, such as `store.home`. It also shows how to define its essential child blocks, including `newsletter-input-email`, `newsletter-input-name`, and `newsletter-submit`, to construct a functional newsletter subscription form. ```json { "store.home": { "children": ["newsletter-form"] }, "newsletter-form": { "children": [ "newsletter-input-email", "newsletter-input-name", "newsletter-submit" ] } } ``` -------------------------------- ### CSS Handles for Newsletter Component Customization Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md Lists the available CSS handles for the newsletter component, enabling developers to apply custom styling. It provides a comprehensive list of handles for various elements like input containers, labels, and form messages, facilitating granular control over the component's appearance. ```APIDOC CSS Handles: - confirmationCheckboxContainer - confirmationCheckboxLabel - defaultErrorMessage - defaultSuccessMessage - emailInputContainer - emailInputContainer--invalid - emailInputLabel - formSubmitContainer - formSubmitContainer--invalid - nameInputContainer - nameInputContainer--invalid - nameInputLabel - newsletterForm - phoneInputContainer - phoneInputContainer--invalid - phoneInputLabel ``` -------------------------------- ### Configure newsletter-checkbox-confirmation Component Properties Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md Defines the configurable properties for the `newsletter-checkbox-confirmation` component, including the checkbox label, and configuration for two interpolatable links (`firstLabelLink` and `secondLabelLink`), along with CSS handle overrides. ```APIDOC newsletter-checkbox-confirmation props: checkboxLabel: string description: Label for the confirmation checkbox. This prop supports the ICU Message Format, exposing two variables for you to interpolate: firstLink and secondLink. defaultValue: 'I agree to received this newsletter.' (translated according to the store's locale). firstLabelLink: Object description: Configures the firstLink variable to be interpolated by the text passed to checkboxLabel. defaultValue: undefined secondLabelLink: Object description: Configures the secondLink variable to be interpolated by the text passed to checkboxLabel. defaultValue: undefined classes: CustomCSSClasses description: Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're importing this block as a React component. defaultValue: undefined firstLabelLink and secondLabelLink objects: url: string description: The link's URL. defaultValue: undefined text: string description: Text displayed on the link. defaultValue: undefined ``` -------------------------------- ### Props for newsletter-submit Component Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md Documents the configurable properties for the `newsletter-submit` component, including the `submitButtonLabel` for button text and `classes` for overriding default CSS handles. It explains how to customize the submit button's appearance and behavior. ```APIDOC newsletter-submit: props: submitButtonLabel: type: "string" description: "Text displayed on the submit button." defaultValue: "Subscribe (translated according to the store's locale)." classes: type: "CustomCSSClasses" description: "Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here: https://github.com/vtex-apps/css-handles#usecustomclasses. Note that this is only useful if you're importing this block as a React component." defaultValue: "undefined" ``` -------------------------------- ### newsletter-form Block Properties Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md This section documents the configurable properties available for the `newsletter-form` block. These properties allow developers to customize the behavior and appearance of the newsletter form, including defining custom states for error, success, and loading scenarios, and overriding default CSS handles. ```APIDOC newsletter-form properties: ErrorState: Type: block Description: Block to be rendered if the submission of the form fails. If none is passed, a default error component will be rendered. Default value: undefined SuccessState: Type: block Description: Block to be rendered if form submission succeeds. If none is passed, a default success component will be rendered. Default value: undefined LoadingState: Type: block Description: Block to be rendered while the form submission is loading. If none is passed, the default behavior is for the submit button to show a spinner during this loading period. Default value: undefined classes: Type: CustomCSSClasses Description: Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're importing this block as a React component. Default value: undefined ``` -------------------------------- ### Props for newsletter-hidden-field Component Source: https://github.com/vtex-apps/store-newsletter/blob/master/docs/README.md Documents the configurable properties for the `newsletter-hidden-field` component, detailing how to save custom user data to Master Data upon form submission. It highlights the `dynamicFields` prop for specifying hidden fields like `bindingUrl` and `bindingId`, and notes the requirement for corresponding Master Data field creation. ```APIDOC newsletter-hidden-field: props: dynamicFields: type: "[enum]" description: "Desired hidden fields responsible for saving the user's custom data on Master Data once the newsletter form is submitted. Notice that the name of the fields must be written in an array and represent which user data they save. Possible values are: bindingUrl and bindingId. Caution: To properly save the data, you must also create the desired filters in the Master Data's Client entity." defaultValue: "undefined" ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.