[2351] [Rebranding]

examples/bricks/WalletBrick/1-Visual-Customization.tsx

@@ -10,7 +10,10 @@ const ExampleVisualCustomizationWalletBrick = () => {
   return (
     <Wallet
       initialization={{ preferenceId: 'YOUR_PREFERENCE_ID' }}
-      customization={{ visual: { buttonBackground: 'black', borderRadius: '20px' } }}
+      customization={{
+        theme: 'dark',
+        customStyle: { borderRadius: '20px' },
+      }}
     />
   );
 };

examples/bricks/WalletBrick/3-Hide-Value-Prop.tsx

@@ -10,7 +10,7 @@ const ExampleVisualCustomizationWalletBrick = () => {
   return (
     <Wallet
       initialization={{ preferenceId: 'YOUR_PREFERENCE_ID' }}
-      customization={{ visual: { hideValueProp: true } }}
+      customization={{ customStyle: { hideValueProp: true } }}
     />
   );
 };

examples/bricks/WalletBrick/4-ValueProp-Customization.tsx

@@ -10,7 +10,10 @@ const ExampleValuePropCustomizationWalletBrick = () => {
   return (
     <Wallet
       initialization={{ preferenceId: 'YOUR_PREFERENCE_ID' }}
-      customization={{ texts: { action: 'buy', valueProp: 'smart_option' } }}
+      customization={{
+        valueProp: 'convenience_all',
+        customStyle: { valuePropColor: 'blue' },
+      }}
     />
   );
 };

src/bricks/wallet/types.ts

@@ -1,110 +1,136 @@
 import { IBrickSettings } from '../util/types/common';
 
-export interface IWalletBrickVisual {
+export interface IWalletBrickBaseCustomStyle {
   /**
    * Optional. Customizing the button background. Default: 'default'. Options: default, black, blue, white.
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
   buttonBackground?: 'default' | 'black' | 'blue' | 'white';
   /**
    * Optional. Customizing the button height. Default: '48px'. Minimum: 48px. Maximum: free choice.
    *
-   *  @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
   buttonHeight?: string;
   /**
    * Optional. Customizing the button border-radius. Default: 6px.
    *
-   *  @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
   borderRadius?: string;
-  /**
-   * Optional. Customizing the button vertical padding. Default: grey. Options grey or white.
-   *
-   *  @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
-   */
-  valuePropColor?: 'grey' | 'white';
   /**
    * Optional. Customizing the button vertical padding. Default: '16px'. Minimum: 16px. Maximum: free choice.
    *
-   *  @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
   verticalPadding?: string;
   /**
    * Optional. Customizing the butto horizontal padding. Default: '0px'. Minimum: 0px. Maximum: free choice.
    *
-   *  @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
   horizontalPadding?: string;
   /**
    * Optional. Property that allows hiding the value proposition text (below the button). Default: false.
    *
-   *  @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
   hideValueProp?: boolean;
 }
 
-export interface IWalletBrickTexts {
+export interface IWalletBrickDarkCustomStyle extends IWalletBrickBaseCustomStyle {
   /**
-   * Optional. Call to action verb. Default: 'pay'
+   * Optional. Customizing the value prop text color. Default: black. Only black currently available.
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-texts Wallet Brick# Visual Customizations # Change Texts} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#value-prop-color-availability Wallet Brick# Customization # Value Prop Color} documentation.
    */
-  action?: 'pay' | 'buy';
+  valuePropColor?: 'black';
+}
+
+export interface IWalletBrickDefaultCustomStyle extends IWalletBrickBaseCustomStyle {
   /**
-   * Optional. Complement to be concatenated with the call to action verb. Default: 'brand'
+   * Optional. Customizing the value prop text color. Default: blue. Options: blue, white.
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-texts Wallet Brick# Additional Settings # Change Texts} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#value-prop-color-availability Wallet Brick# Customization # Value Prop Color} documentation.
    */
-  actionComplement?: 'brand' | 'amount';
+  valuePropColor?: 'blue' | 'white';
+}
+
+interface IWalletBrickBaseCustomization {
+  /**
+   * Optional. Defines the visual theme of the Button.
+   *
+   *
+  * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
+  */
+  theme?: 'default' | 'dark';
   /**
    * Optional. Text that will be rendered below the Wallet button
    *
    * Note: 'convenience' is DEPRECATED. Use 'convenience_all' instead.
    * Note: when using 'payment_methods_logos', logos will be rendered instead of text.
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-texts Wallet Brick# Visual Customizations # Change Texts} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#value-prop-availability Wallet Brick# Customization # Value Prop} documentation.
    */
   valueProp?:
-    | 'practicality'
-    | 'convenience'
-    | 'convenience_all'
-    | 'security_details'
-    | 'security_safety'
-    | 'convenience_credits'
-    | 'smart_option'
-    | 'payment_methods_logos';
+  | 'practicality'
+  | 'convenience'
+  | 'convenience_all'
+  | 'security_details'
+  | 'security_safety'
+  | 'convenience_credits'
+  | 'smart_option'
+  | 'payment_methods_logos';
+  /**
+   * Optional. Wallet Brick offers some customization over the Checkout Experience.
+   *
+   *
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/checkout-pro.md#the-customization-object Checkout Pro# Customization } documentation.
+   */
+  checkout?: IWalletBrickCheckoutCustomization;
 }
 
-export interface IWalletBrickCustomization {
+export interface IWalletBrickDarkCustomization extends IWalletBrickBaseCustomization {
   /**
-   * Optional. Wallet Brick offers two reading levels: the call to action (button) and the value proposition.
-   * In both cases, the text can be customized according to the options provided by Mercado Pago.
+   * Optional. Defines the visual theme of the Button.
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-texts Wallet Brick# Visual Customizations # Change Texts} documentation.
+   *
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
-  texts?: IWalletBrickTexts;
+  theme: 'dark';
   /**
-   * Optional. Wallet Brick offers some levels of visual customization:
-   * {buttonBackground, buttonHeight, borderRadius, valuePropColor, verticalPadding, horizontalPadding}
+   * Optional. Wallet Bricks allow customization of some additional styles. The available options are dependent on the chosen theme.
+   *
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance Wallet Brick# Visual Customizations # Change appearance} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
-  visual?: IWalletBrickVisual;
+  customStyle?: IWalletBrickDarkCustomStyle;
+}
+
+export interface IWalletBrickDefaultCustomization extends IWalletBrickBaseCustomization {
   /**
-   * Optional. Wallet Brick offers some customization over the Checkout Experience.
+   * Optional. Defines the visual theme of the Button.
+   *
    *
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
-  checkout?: IWalletBrickCheckoutCustomization;
+  theme?: 'default';
+  /**
+   * Optional. Wallet Bricks allow customization of some additional styles. The available options are dependent on the chosen theme.
+   *
+   *
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
+   */
+  customStyle?: IWalletBrickDefaultCustomStyle;
 }
 
 interface IWalletBrickCheckoutCustomization {
   /**
    * Optional. Wallet Brick offers two optional customizable theme variables that receive hexadecimal values:
    * {elementsColor, headerColor}
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-pro/checkout-customization/user-interface/color-style Checkout Theme customization} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/checkout-pro.md#the-customization-object Checkout Pro# Customization } documentation.
    */
   theme?: {
     elementsColor?: string;
@@ -113,28 +139,31 @@ interface IWalletBrickCheckoutCustomization {
 }
 
 export interface PreferenceOnSubmit extends IBrickSettings {
-  brand?: string;
   /**
    * Optional. An object containing initialization options.
+   *
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#initialization Initialization} documentation
    */
   initialization?: {
     /**
      * Optional. The opening scheme allows you to define how the checkout will open for the user. For example blank. Default 'self'
      *
-     * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/advanced-features/opening-mode Redirect Mode} documentation.
+     * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#opening-scheme Redirect Mode} documentation.
      * */
     redirectMode?: 'blank' | 'self';
   };
   /**
    * Optional. An object containing customization options.
+   *
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
-  customization?: IWalletBrickCustomization;
+  customization?: IWalletBrickDarkCustomization | IWalletBrickDefaultCustomization;
   onSubmit: () => Promise<unknown>;
   /**
    * Optional. Language selection for the Brick, options are:
    * {pt, es, es-AR, es-MX, es-UY, es-PE, es-CL, es-CO, en}
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/additional-content/select-language Bricks language customization} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#parameters Wallet Brick# Parameters} documentation.
    */
   locale?: 'es-AR' | 'es-CL' | 'es-CO' | 'es-MX' | 'es-VE' | 'es-UY' | 'es-PE' | 'pt-BR' | 'en-US';
   /**
@@ -144,39 +173,37 @@ export interface PreferenceOnSubmit extends IBrickSettings {
 }
 
 export interface PreferenceOnInitialization extends IBrickSettings {
-  brand?: string;
-  /**
-   * Required. An object containing initialization options.
-   */
   initialization: {
     /**
      * Required. Autogenerated unique ID that identifies the preference. For example 036151801-2484cd71-7140-4c51-985a-d4cfcf133baf
      *
-     * @see {@link https://www.mercadopago.com/developers/en/reference/preferences/_checkout_preferences/post Create preference} documentation.
+     * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#initialization Initialization} documentation
      * */
     preferenceId: string;
     /**
      * Optional. The opening scheme allows you to define how the checkout will open for the user. For example blank. Default 'self'
      *
-     * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/wallet-brick/advanced-features/opening-mode Redirect Mode} documentation.
+     * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#opening-scheme Redirect Mode} documentation.
      * */
     redirectMode?: 'blank' | 'self';
     /**
      * Optional. This parameter enables the use of Wallet Brick in Marketplace mode
      *
+     * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#initialization Initialization} documentation
      * */
     marketplace?: boolean;
   };
   /**
    * Optional. An object containing customization options.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#customization Wallet Brick# Customization} documentation.
    */
-  customization?: IWalletBrickCustomization;
+  customization?: IWalletBrickDarkCustomization | IWalletBrickDefaultCustomization;
   onSubmit?: never;
   /**
    * Optional. Language selection for the Brick, options are:
    * {pt, es, es-AR, es-MX, es-UY, es-PE, es-CL, es-CO, en}
    *
-   * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/additional-content/select-language Bricks language customization} documentation.
+   * @see {@link https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/wallet.md#parameters Wallet Brick# Parameters} documentation.
    */
   locale?: 'es-AR' | 'es-CL' | 'es-CO' | 'es-MX' | 'es-VE' | 'es-UY' | 'es-PE' | 'pt-BR' | 'en-US';
   /**