diff --git a/docs/api/10-widget/custom-styles/custom-styles.md b/docs/api/10-widget/custom-styles/custom-styles.md index c48edcc..f090fbf 100644 --- a/docs/api/10-widget/custom-styles/custom-styles.md +++ b/docs/api/10-widget/custom-styles/custom-styles.md @@ -32,6 +32,7 @@ Para personalizar los estilos del widget vía CSS hay que incluir la opción `da ### Configurador - data-aplazame-widget-instalments + data-option-legal-advice="true" +/> diff --git a/docs/api/10-widget/installment-payment.mdx b/docs/api/10-widget/installment-payment.mdx index 91c520c..06fa406 100644 --- a/docs/api/10-widget/installment-payment.mdx +++ b/docs/api/10-widget/installment-payment.mdx @@ -36,7 +36,7 @@ sidebar_position: 1 data-view="product"> ```
-
- data-aplazame-widget-instalments + data-option-out-of-limits="hide" +/> diff --git a/docs/api/10-widget/pay-in-4.mdx b/docs/api/10-widget/pay-in-4.mdx index 5e3fb0b..38f966a 100644 --- a/docs/api/10-widget/pay-in-4.mdx +++ b/docs/api/10-widget/pay-in-4.mdx @@ -23,7 +23,7 @@ En caso de que el merchant soporte el producto **'Pago en 4'**, se puede añadir
- data-aplazame-widget-paylater + data-option-align="center" +/> diff --git a/docs/api/10-widget/widget-v4/widget-v4.md b/docs/api/10-widget/widget-v4/widget-v4.md index 50def8f..70a00f5 100644 --- a/docs/api/10-widget/widget-v4/widget-v4.md +++ b/docs/api/10-widget/widget-v4/widget-v4.md @@ -72,6 +72,7 @@ Si deseas configurar el widget de acuerdo a tus necesidades, puedes usar el conf ### Configurador - data-aplazame-widget-instalments="v4" + data-option-max-amount-desired="false" +/> diff --git a/docs/api/10-widget/widget-v5/widget-v5.md b/docs/api/10-widget/widget-v5/widget-v5.md index 75c5ada..3d7e4f8 100644 --- a/docs/api/10-widget/widget-v5/widget-v5.md +++ b/docs/api/10-widget/widget-v5/widget-v5.md @@ -64,11 +64,11 @@ Si deseas configurar el widget de acuerdo a tus necesidades, puedes usar el conf ### Configurador - data-aplazame-widget-instalments="v5" +/> diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/custom-styles/custom-styles.md b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/custom-styles/custom-styles.md index e031d2b..550e51c 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/custom-styles/custom-styles.md +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/custom-styles/custom-styles.md @@ -33,6 +33,7 @@ To customize the styles of the widget via CSS you must include the `data-option- ### Configurator - data-aplazame-widget-instalments + data-option-legal-advice="true" +/> diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/installment-payment.mdx b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/installment-payment.mdx index 7ea91c0..ed07d89 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/installment-payment.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/installment-payment.mdx @@ -36,7 +36,7 @@ keywords: [installments widget] data-view="product">
```
-
- data-aplazame-widget-instalments + data-option-out-of-limits="hide" +/> diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/pay-later.mdx b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/pay-later.mdx index 1726d9e..33312d8 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/pay-later.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/pay-later.mdx @@ -46,11 +46,12 @@ If you want to configure the widget according to your requirements you can use t ### Configurator - data-aplazame-widget-paylater + data-option-align="center" +/> diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v4/widget-v4.md b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v4/widget-v4.md index 45bf14b..e36a8b1 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v4/widget-v4.md +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v4/widget-v4.md @@ -76,6 +76,7 @@ If you want to configure the widget according to your requirements you can use t ### Configurator - data-aplazame-widget-instalments="v4" + data-option-max-amount-desired="false" +/> diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v5/widget-v5.md b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v5/widget-v5.md index 1920f18..5d8ea50 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v5/widget-v5.md +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/10-widget/widget-v5/widget-v5.md @@ -18,7 +18,8 @@ There is the possibility of integrating a new version of the widget, for this, y This version aims to simplify the integration for the installment payment widget.
-
- data-aplazame-widget-instalments="v5" + data-option-slider="true" +/> diff --git a/src/components/WidgetSimulator.js b/src/components/WidgetSimulator.js index 844c6a5..87b8404 100644 --- a/src/components/WidgetSimulator.js +++ b/src/components/WidgetSimulator.js @@ -11,7 +11,9 @@ class WidgetSimulator extends React.Component { state = { values: { - widgetType: this.props.children, + isPayLater: this.props['data-aplazame-widget-paylater'] === '', + version: this.props['data-aplazame-widget-instalments'] || '', + // widgetType: this.props.children, amount: this.props['data-amount'], country: this.props['data-country'], type: this.props['data-type'], @@ -51,7 +53,8 @@ class WidgetSimulator extends React.Component { } rawHTML = () => { - const text = `
', this.props) + const text = `
{ - if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v4"') { - inputProps['data-aplazame-widget-instalments'] = 'v4' - } else if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v5"') { - inputProps['data-aplazame-widget-instalments'] = 'v5' - } else { - inputProps[this.state.values.widgetType] = '' - } - return inputProps - } + // const calculateWidgetType = (inputProps) => { + // if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v4"') { + // inputProps['data-aplazame-widget-instalments'] = 'v4' + // } else if (this.state.values.widgetType === 'data-aplazame-widget-instalments="v5"') { + // inputProps['data-aplazame-widget-instalments'] = 'v5' + // } else { + // inputProps[this.state.values.widgetType] = '' + // } + // return inputProps + // } let inputProps = { + ...this.state.values.isPayLater && { + 'data-aplazame-widget-paylater': '' + }, + ...!this.state.values.isPayLater && { + 'data-aplazame-widget-instalments': this.state.values.version, + }, 'data-pay-in-4' : this.state.values.optionPayIn !== undefined } - inputProps = calculateWidgetType(inputProps) + // inputProps = calculateWidgetType(inputProps) return (
@@ -434,6 +443,8 @@ class WidgetSimulator extends React.Component {
+

+ {this.rawHTML()}
);