Add Brand Brick (#88)

* Adding Brand Brick (#3)

* add brand bricks types

* add brand bricks

* add simple brand application

* add brand with customizations

* add unit tests

* add readme to brand

* add brandBrickController

* add properties descriptions with jsdoc

* add accepted values at descriptions

* update brand brick introductions comments

* correct brick name at comment about debounce

* correct phrase into readme files

* remove unused prop from visual customizations

* specify where brand and review step works

* correct callback doc link

* upload version adding brand brick

examples/bricks/BrandBrick/0-Simple.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Brand from '../../../src/bricks/brand';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+
+initMercadoPago('TEST-bfe30303-c7de-4da3-b765-c4be61b4f88b', {
+  locale: 'es-AR',
+});
+
+const ExampleSimpleBrandBrick = () => {
+  return <Brand />;
+};
+
+export default ExampleSimpleBrandBrick;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import Brand from '../../../src/bricks/brand';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+
+initMercadoPago('TEST-bfe30303-c7de-4da3-b765-c4be61b4f88b', {
+  locale: 'es-AR',
+});
+
+const ExampleSimpleBrandBrick = () => {
+  return (
+    <Brand
+      customization={{
+        text: {
+          valueProp: 'payment_methods_logos',
+          useCustomFont: true,
+          size: 'large',
+          fontWeight: 'semibold',
+          color: 'inverted',
+        },
+        paymentMethods: {
+          excludedPaymentMethods: ['master'],
+          excludedPaymentTypes: ['ticket'],
+          maxInstallments: 4,
+          interestFreeInstallments: false,
+        },
+        visual: {
+          hideMercadoPagoLogo: false,
+          contentAlign: 'center',
+          backgroundColor: 'mercado_pago_primary',
+          border: true,
+          borderColor: 'dark',
+          borderWidth: '2px',
+          borderRadius: '10px',
+          verticalPadding: '10px',
+          horizontalPadding: '10px',
+        },
+      }}
+      onReady={() => console.log('Brick is ready!')}
+    />
+  );
+};
+
+export default ExampleSimpleBrandBrick;

examples/bricks/Payment/3-Review-Confirm-Simple.tsx

@@ -5,6 +5,7 @@ import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
 initMercadoPago('TEST-d198443d-7e9f-4e5f-a770-e5b23ae627cb', { locale: 'es-MX' });
 
+// This feature is temporarily exclusive for MLM (México) 🇲🇽
 const App = () => {
   const initialization = {
     amount: 1000,

examples/bricks/Payment/4-Review-Confirm-Full.tsx

@@ -5,6 +5,7 @@ import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
 
 initMercadoPago('TEST-d198443d-7e9f-4e5f-a770-e5b23ae627cb', { locale: 'es-MX' });
 
+// This feature is temporarily exclusive for MLM (México) 🇲🇽
 const App = () => {
   const initialization = {
     amount: 76.98, // result of = totalItemsAmount + costs (shipping) - totalDiscountsAmount

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mercadopago/sdk-react",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Mercado Pago SDK React",
   "main": "index.js",
   "keywords": [

src/@types/global.d.ts

@@ -31,6 +31,9 @@ declare global {
     statusScreenBrickController: {
       unmount: () => void;
     };
+    brandBrickController: {
+      unmount: () => void;
+    };
     cardNumberInstance: Field | undefined;
     securityCodeInstance: Field | undefined;
     expirationMonthInstance: Field | undefined;

src/bricks/brand/brand.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MercadoPagoInstance } from '../../mercadoPago/initMercadoPago';
+import Brand from './index';
+
+describe('Test Brand Brick Component', () => {
+  test('should found the id of Brand Brick div', async () => {
+    MercadoPagoInstance.publicKey = 'PUBLIC_KEY';
+    const element = await render(<Brand />);
+
+    expect(element.container.querySelector('#brandBrick_container')).toBeTruthy();
+  });
+
+  test('should found the id of Brand Brick div', async () => {
+    MercadoPagoInstance.publicKey = 'PUBLIC_KEY';
+    const element = await render(
+      <Brand
+        customization={{
+          text: {
+            valueProp: 'payment_methods_logos',
+          },
+        }}
+        onReady={() => console.log('Brick is ready!')}
+      />,
+    );
+
+    expect(element.container.querySelector('#brandBrick_container')).toBeTruthy();
+  });
+});

src/bricks/brand/index.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { onReadyDefault } from '../util/initial';
+import { initBrick } from '../util/renderBrick';
+import { DEBOUNCE_TIME_RENDER } from '../util/constants';
+import { TBrand } from './types';
+
+/**
+ * Brand Brick allows you to communicate different messages related to the payment methods available via Mercado Pago in your store.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import Brand, {initMercadoPago} from '@mercadopago/sdk-react'
+ *
+ * initMercadoPago('YOUR_PUBLIC_KEY')
+ *
+ * const Example = () => {
+ *   return(
+ *     <Brand />
+ *   )
+ * }
+ * export default Example
+ * ```
+ *
+ * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/brand-brick/introduction Brand Brick documentation} for more information.
+ */
+const Brand = ({
+  onReady = onReadyDefault,
+  customization,
+  locale,
+}: TBrand) => {
+  useEffect(() => {
+    // Brand uses a debounce to prevent unnecessary reRenders.
+    let timer: ReturnType<typeof setTimeout>;
+    const BrandBrickConfig = {
+      settings: {
+        customization,
+        locale,
+        callbacks: {
+          onReady: onReady,
+        },
+      },
+      name: 'brand',
+      divId: 'brandBrick_container',
+      controller: 'brandBrickController',
+    };
+
+    timer = setTimeout(() => {
+      initBrick(BrandBrickConfig);
+    }, DEBOUNCE_TIME_RENDER);
+
+    return () => {
+      clearTimeout(timer);
+      window.brandBrickController?.unmount();
+    };
+  }, [customization, onReady]);
+  return <div id="brandBrick_container"></div>;
+};
+
+export default Brand;

src/bricks/brand/readme.md

@@ -0,0 +1,45 @@
+# Brand Brick
+This Brick is temporarily exclusive for MLA (Argentina) 🇦🇷
+
+## Content
+
+- [Brand Brick](#brand-brick)
+  - [Content](#content)
+  - [Intro](#intro)
+  - [How it works](#how-it-works)
+  - [How to use](#how-to-use)
+  - [External Links](#external-links)
+
+---
+
+## Intro
+
+Brand Brick communicates to the user advantages, conveniences, and information, such as: the available payment methods via Mercado Pago, accepted card networks, and the option to pay in installments with or without a credit card.
+
+---
+
+## How it works
+
+This is like a wrapper for the Brick. It breaks the main characteristics - customizations and callback - in _props_ for the component. In this way, it is possible to minimize the impact if the Bricks change and take advantage of the already existent documentation.
+
+---
+
+## How to use
+
+```ts
+import Brand, { initMercadoPago } from '@mercadopago/sdk-react';
+
+initMercadoPago('YOUR_PUBLIC_KEY');
+
+const Example = () => {
+  return <Brand />;
+};
+
+export default Example;
+```
+
+---
+
+## External Links
+
+[Brand Brick official documentation](https://www.mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/introduction)