diff --git a/examples/bricks/BrandBrick/0-Simple.tsx b/examples/bricks/BrandBrick/0-Simple.tsx new file mode 100644 index 0000000..a199e31 --- /dev/null +++ b/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 ; +}; + +export default ExampleSimpleBrandBrick; diff --git a/examples/bricks/BrandBrick/1-Visual-Customization.tsx b/examples/bricks/BrandBrick/1-Visual-Customization.tsx new file mode 100644 index 0000000..fa77267 --- /dev/null +++ b/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 ( + console.log('Brick is ready!')} + /> + ); +}; + +export default ExampleSimpleBrandBrick; diff --git a/examples/bricks/Payment/3-Review-Confirm-Simple.tsx b/examples/bricks/Payment/3-Review-Confirm-Simple.tsx index 2a037c3..ad5fb1e 100644 --- a/examples/bricks/Payment/3-Review-Confirm-Simple.tsx +++ b/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, diff --git a/examples/bricks/Payment/4-Review-Confirm-Full.tsx b/examples/bricks/Payment/4-Review-Confirm-Full.tsx index 6662c99..f0554ee 100644 --- a/examples/bricks/Payment/4-Review-Confirm-Full.tsx +++ b/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 diff --git a/package.json b/package.json index 78282c7..e2777e0 100644 --- a/package.json +++ b/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": [ diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 7d85848..2b02a8d 100644 --- a/src/@types/global.d.ts +++ b/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; diff --git a/src/bricks/brand/brand.test.tsx b/src/bricks/brand/brand.test.tsx new file mode 100644 index 0000000..844a671 --- /dev/null +++ b/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(); + + 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( + console.log('Brick is ready!')} + />, + ); + + expect(element.container.querySelector('#brandBrick_container')).toBeTruthy(); + }); +}); diff --git a/src/bricks/brand/index.tsx b/src/bricks/brand/index.tsx new file mode 100644 index 0000000..1695193 --- /dev/null +++ b/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( + * + * ) + * } + * 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; + 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
; +}; + +export default Brand; diff --git a/src/bricks/brand/readme.md b/src/bricks/brand/readme.md new file mode 100644 index 0000000..72e7bde --- /dev/null +++ b/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 ; +}; + +export default Example; +``` + +--- + +## External Links + +[Brand Brick official documentation](https://www.mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/introduction) diff --git a/src/bricks/brand/types.ts b/src/bricks/brand/types.ts new file mode 100644 index 0000000..d66d224 --- /dev/null +++ b/src/bricks/brand/types.ts @@ -0,0 +1,223 @@ +export type TBrand = { + /** + * Optional. An object containing customization options. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + customization?: IBrandCustomization; + /** + * Optional. Function. Receives function to be executed just after brick rendered. + * + * @see {@link https://www.mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/callbacks Brick # Callbacks} documentation. + */ + onReady?: () => void; + /** + * 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. + */ + locale?: 'es-AR' | 'es-CL' | 'es-CO' | 'es-MX' | 'es-VE' | 'es-UY' | 'es-PE' | 'pt-BR' | 'en-US'; +}; + +export interface IBrandCustomization { + /** + * Optional. Brand Brick offers some text customizations, such as: {align, valueProp, useCustomFont, size, fontWeight, color} + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + text?: IBrandText; + /** + * Optional. Brand Brick offers some visual customizations, such as: {hideMercadoPagoLogo, contentAlign, backgroundColor, border, borderColor, borderWidth, borderRadius, verticalPadding, horizontalPadding} + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + visual?: IBrandVisual; + /** + * Optional. Brand Brick offers some payment methods customizations, as: {excludedPaymentMethods, excludedPaymentTypes, maxInstallments, interestFreeInstallments} + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/settings/payment-methods Brick # Payment methods} documentation. + */ + paymentMethods?: IBrandPaymentMethodCustomization; +} + +export interface IBrandText { + /** + * Optional. There are four value propositions available that configure the content and can allow for certain customizations. + * {'installments', 'payment_methods', 'security', 'payment_methods_logos', 'credits'}. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/settings/default-rendering Brick # Value prop} documentation. + */ + valueProp?: BrandValueProps; + /** + * Optional. It starts false, but if it changes to true, Brick inherits the parent's font. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + useCustomFont?: boolean; + /** + * Optional. Changes the font size to one of the options provided. + * {'extra_small', 'small', 'medium', 'large'}. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + size?: BrandTextSizes; + /** + * Optional. Changes the font weight to one of the options provided. + * {'regular', 'semibold'}. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + fontWeight?: BrandFontWeight; + /** + * Optional. Changes the font color to one of the options provided. Pay attention to the color contrast with the background color and allow the user to read the text. + * {'primary', 'secondary', 'inverted'}. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + color?: BrandTextColor; + /** + * Optional. Changes the text alignment to one of the options provided. + * {'left', 'center', 'right'}. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + align?: BrandAlignment; +} + +type BrandValueProps = + | 'installments' + | 'payment_methods' + | 'security' + | 'payment_methods_logos' + | 'credits'; + +type BrandTextSizes = 'extra_small' | 'small' | 'medium' | 'large'; + +type BrandFontWeight = 'regular' | 'semibold'; + +type BrandTextColor = 'primary' | 'secondary' | 'inverted'; + +type BrandAlignment = 'left' | 'center' | 'right'; + +export interface IBrandVisual { + /** + * Optional. Hides the Mercado Pago logo from the banner. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + hideMercadoPagoLogo?: boolean; + /** + * Optional. Changes all the content alignment (text and logos, when the value prop applied have it) inside banner to one of the options provided. + * {'left', 'center', 'right'}. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + contentAlign?: BrandAlignment; + /** + * Optional. Changes banner background color to one of the options provided. Pay attention to the color contrast with the background color and allow the user to read the text. + * {'white', 'mercado_pago_primary', 'mercado_pago_secondary', 'black', 'transparent'}. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + backgroundColor?: BrandBackgroundColor; + /** + * Optional. Enable border around banner. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + border?: boolean; + /** + * Optional. Changes banner border color to 'dark' or 'light'. + * {'dark', 'light'} + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + borderColor?: BrandBorderColor; + /** + * Optional. Changes banner border width to 1px or 2px. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + borderWidth?: string; + /** + * Optional. Change the roundness of the banner border. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + borderRadius?: string; + /** + * Optional. Changes the vertical padding inside banner until 40px. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + verticalPadding?: string; + /** + * Optional. Changes the horizontal padding inside banner until 40px. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/visual-customizations Brick # Visual customizations} documentation. + */ + horizontalPadding?: string; +} + +type BrandBackgroundColor = + | 'white' + | 'mercado_pago_primary' + | 'mercado_pago_secondary' + | 'black' + | 'transparent'; + +type BrandBorderColor = 'dark' | 'light'; + +export interface IBrandPaymentMethodCustomization { + /** + * Optional. Specify the payment methods you don't want to show. + * ['master', 'visa', 'amex', 'naranja', 'maestro', 'cabal', 'cencosud', 'cordobesa', 'argencard', 'diners', 'tarshop', 'cmr', 'rapipago', 'pagofacil', 'mercadopago'] + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/settings/payment-methods Brick # Payment methods} documentation. + */ + excludedPaymentMethods?: TBrandPaymentMethods[]; + /** + * Optional. Specify the payment types you don't want to show. + * ['credit_card', 'debit_card', 'ticket', 'account_money', 'mercado_credito']. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/settings/payment-methods Brick # Payment methods} documentation. + */ + excludedPaymentTypes?: TBrandPaymentTypes[]; + /** + * Optional. Add an installment limit. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/settings/payment-methods Brick # Payment methods} documentation. + */ + maxInstallments?: number; + /** + * Optional. If true, the installments will be presented interest-free. + * + * @see {@link https://mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/settings/payment-methods Brick # Payment methods} documentation. + */ + interestFreeInstallments?: boolean; +} + +type TBrandPaymentMethods = + | 'master' + | 'visa' + | 'amex' + | 'naranja' + | 'maestro' + | 'cabal' + | 'cencosud' + | 'cordobesa' + | 'argencard' + | 'diners' + | 'tarshop' + | 'cmr' + | 'rapipago' + | 'pagofacil' + | 'mercadopago'; + +type TBrandPaymentTypes = + | 'credit_card' + | 'debit_card' + | 'ticket' + | 'account_money' + | 'mercado_credito'; diff --git a/src/bricks/cardPayment/readme.md b/src/bricks/cardPayment/readme.md index 8296d07..a94d34f 100644 --- a/src/bricks/cardPayment/readme.md +++ b/src/bricks/cardPayment/readme.md @@ -2,11 +2,13 @@ ## Content -1. [Intro](#intro) -2. [How it works](#how-it-works) -3. [How to use](#how-to-use) -4. [Screenshots](#screenshots) -5. [External Links](#external-links) +- [Card Payment Brick](#card-payment-brick) + - [Content](#content) + - [Intro](#intro) + - [How it works](#how-it-works) + - [How to use](#how-to-use) + - [Screenshots](#screenshots) + - [External Links](#external-links) --- @@ -18,7 +20,7 @@ Card Payment Brick is a component for your checkout made by MercadoPago. This im ## How it works -This is like a wrapper for the brick. It breaks the main characterists - initialization, customizations and callbacks - in _props_ for the component. In this way it possible have a minimum impact if the bricks change and take advantage of the already existent documentation. +This is like a wrapper for the Brick. It breaks the main characteristics - initialization, customizations and callbacks - 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. --- diff --git a/src/bricks/payment/readme.md b/src/bricks/payment/readme.md index 578ab39..9d29a86 100644 --- a/src/bricks/payment/readme.md +++ b/src/bricks/payment/readme.md @@ -2,11 +2,13 @@ ## Content -1. [Intro](#intro) -2. [How it works](#how-it-works) -3. [How to use](#how-to-use) -4. [Screenshots](#screenshots) -5. [External Links](#external-links) +- [Payment Brick](#payment-brick) + - [Content](#content) + - [Intro](#intro) + - [How it works](#how-it-works) + - [How to use](#how-to-use) + - [Screenshots](#screenshots) + - [External Links](#external-links) --- @@ -18,7 +20,7 @@ Payment Brick is a modular and customizable solution that allows you to add seve ## How it works -This is like a wrapper for the brick. It breaks the main characterists - initialization, customizations and callbacks - in _props_ for the component. In this way it possible have a minimum impact if the bricks change and take advantage of the already existent documentation. +This is like a wrapper for the Brick. It breaks the main characteristics - initialization, customizations and callbacks - 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. --- diff --git a/src/bricks/statusScreen/index.tsx b/src/bricks/statusScreen/index.tsx index 169aa2b..28d4ff8 100644 --- a/src/bricks/statusScreen/index.tsx +++ b/src/bricks/statusScreen/index.tsx @@ -37,7 +37,7 @@ const StatusScreen = ({ locale, }: IStatusScreenBrickSettings) => { useEffect(() => { - // CardPayment uses a debounce to prevent unnecessary reRenders. + // Status Screen uses a debounce to prevent unnecessary reRenders. let timer: ReturnType; const StatusScreenBrickConfig = { settings: { diff --git a/src/bricks/statusScreen/readme.md b/src/bricks/statusScreen/readme.md index b1330d1..1b9ce58 100644 --- a/src/bricks/statusScreen/readme.md +++ b/src/bricks/statusScreen/readme.md @@ -2,11 +2,13 @@ ## Content -1. [Intro](#intro) -2. [How it works](#how-it-works) -3. [How to use](#how-to-use) -4. [Screenshots](#screenshots) -5. [External Links](#external-links) +- [Status Screen Brick](#status-screen-brick) + - [Content](#content) + - [Intro](#intro) + - [How it works](#how-it-works) + - [How to use](#how-to-use) + - [Screenshots](#screenshots) + - [External Links](#external-links) --- @@ -18,7 +20,7 @@ Status Screen Brick allows you to show the buyer the status of a purchase made w ## How it works -This is like a wrapper for the brick. It breaks the main characterists - initialization, customizations and callbacks - in _props_ for the component. In this way it possible have a minimum impact if the bricks change and take advantage of the already existent documentation. +This is like a wrapper for the Brick. It breaks the main characteristics - initialization, customizations and callbacks - 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. --- diff --git a/src/bricks/util/constants/index.ts b/src/bricks/util/constants/index.ts index cfeec53..811fde9 100644 --- a/src/bricks/util/constants/index.ts +++ b/src/bricks/util/constants/index.ts @@ -1,2 +1,2 @@ -// CardPayment uses a debounce to prevent unnecessary reRenders. +// Bricks uses a debounce to prevent unnecessary reRenders. export const DEBOUNCE_TIME_RENDER = 200; //ms diff --git a/src/bricks/wallet/readme.md b/src/bricks/wallet/readme.md index 8b83a9e..61d74ec 100644 --- a/src/bricks/wallet/readme.md +++ b/src/bricks/wallet/readme.md @@ -2,11 +2,13 @@ ## Content -1. [Intro](#intro) -2. [How it works](#how-it-works) -3. [How to use](#how-to-use) -4. [Screenshots](#screenshots) -5. [External Links](#external-links) +- [Wallet Brick](#wallet-brick) + - [Content](#content) + - [Intro](#intro) + - [How it works](#how-it-works) + - [How to use](#how-to-use) + - [Screenshots](#screenshots) + - [External Links](#external-links) --- @@ -18,7 +20,7 @@ Wallet Brick allows you to offer payments from your Mercado Pago account at any ## How it works -This is like a wrapper for the brick. It breaks the main characterists - initialization, customizations and callbacks - in _props_ for the component. In this way it possible have a minimum impact if the bricks change and take advantage of the already existent documentation. +This is like a wrapper for the Brick. It breaks the main characteristics - initialization, customizations and callbacks - 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. ---