Merge pull request #70 from andreagostinho-meli/main

Feature: update amount

examples/bricks/CardPayment/2-UpdateAmount.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Card, { useCardPaymentBrick } from '../../../src/bricks/cardPayment';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+
+initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+
+const App = () => {
+  const { update } = useCardPaymentBrick();
+
+  return (
+    <>
+      <button type="button" onClick={() => update({ amount: 90 })}>
+        Update amount
+      </button>
+
+      <Card
+        initialization={{ amount: 100 }}
+        onSubmit={async (param) => {
+          console.log(param);
+        }}
+      />
+    </>
+  );
+};
+
+export default App;

examples/bricks/Payment/2-UpdateAmount.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Payment, { usePaymentBrick } from '../../../src/bricks/payment';
+
+import initMercadoPago from '../../../src/mercadoPago/initMercadoPago';
+
+initMercadoPago('TEST-f4563544-ce69-40c3-b88e-6e7d1bd93a83', { locale: 'pt-BR' });
+
+const App = () => {
+  const { update } = usePaymentBrick();
+
+  const initialization = {
+    amount: 100,
+    preferenceId: '207446753-ea3adb2e-a4f2-41dd-a656-11cb01b8772c',
+  };
+
+  const customization = {
+    paymentMethods: {
+      atm: 'all',
+      ticket: 'all',
+      bankTransfer: ['pix'],
+      creditCard: 'all',
+      debitCard: 'all',
+      mercadoPago: 'all',
+    },
+  };
+
+  return (
+    <>
+      <button type="button" onClick={() => update({ amount: 90 })}>
+        Update amount
+      </button>
+
+      <Payment
+        initialization={initialization}
+        customization={customization}
+        onSubmit={async (param) => {
+          console.log(param);
+        }}
+      />
+    </>
+  );
+};
+
+export default App;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mercadopago/sdk-react",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Mercado Pago SDK React",
   "main": "index.js",
   "keywords": [
@@ -10,7 +10,7 @@
     "Checkout"
   ],
   "scripts": {
-    "start": "start-storybook -p 6006",
+    "start": "npm run build && start-storybook -p 6006",
     "build": "rm -rf ./dist && tsc -b ./tsconfig.prod.json && cp package.json ./dist && cp LICENSE ./dist && cp README.md ./dist",
     "test": "jest --c ./jest.config.ts"
   },

src/@types/global.d.ts

@@ -1,4 +1,5 @@
-import { Field } from "../secureFields/util/types";
+import { UpdateValues } from '../bricks/util/types/common';
+import { Field } from '../secureFields/util/types';
 
 export {};
 
@@ -7,10 +8,22 @@ declare global {
     MercadoPago: any;
     paymentBrickController: {
       unmount: () => void;
+      /**
+       * Updates data in Payment Brick preserving the current instance.
+       *
+       * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/payment-brick/additional-customization/update-data Payment Brick # Default rendering} documentation.
+       */
+      update: (updateValues: UpdateValues) => boolean;
     };
     cardPaymentBrickController: {
       unmount: () => void;
       getFormData: () => Promise<void>;
+      /**
+       * Updates data in Card Payment Brick preserving the current instance.
+       *
+       * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/card-payment-brick/additional-customization/update-data Payment Brick # Default rendering} documentation.
+       */
+      update: (updateValues: UpdateValues) => boolean;
     };
     walletBrickController: {
       unmount: () => void;

src/bricks/cardPayment/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '../util/initial';
 import { initBrick } from '../util/renderBrick';
 import { TCardPayment } from './type';
+import { UpdateValues } from '../util/types/common';
 
 /**
  * Card Payment Brick allows you to offer payments with credit and debit card at yout checkout.
@@ -74,4 +75,18 @@ const CardPayment = ({
   return <div id="cardPaymentBrick_container"></div>;
 };
 
+const useCardPaymentBrick = () => {
+  const update = (updateValues: UpdateValues) => {
+    if (window.cardPaymentBrickController) {
+      window.cardPaymentBrickController.update(updateValues);
+    } else {
+      console.warn(
+        '[Checkout Bricks] Card Payment Brick is not initialized yet, please try again after a few seconds.',
+      );
+    }
+  };
+  return { update };
+};
+
 export default CardPayment;
+export { useCardPaymentBrick };

src/bricks/payment/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '../util/initial';
 import { initBrick } from '../util/renderBrick';
 import { TPaymentType } from './type';
+import { UpdateValues } from '../util/types/common';
 
 /**
  * Payment Brick allows you to add several payment methods to a store and save card data for future purchases with just one Brick.
@@ -32,7 +33,7 @@ import { TPaymentType } from './type';
  *
  * @tutorial {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/payment-brick/introduction Payment Brick documentation} for more information.
  */
-const BrickPayment = ({
+const Payment = ({
   onReady = onReadyDefault,
   onError = onErrorDefault,
   onSubmit = onSubmitDefault,
@@ -42,7 +43,7 @@ const BrickPayment = ({
   locale,
 }: TPaymentType) => {
   useEffect(() => {
-    // CardPayment uses a debounce to prevent unnecessary reRenders.
+    // Payment uses a debounce to prevent unnecessary reRenders.
     let timer: ReturnType<typeof setTimeout>;
     const PaymentBrickController = {
       settings: {
@@ -73,4 +74,18 @@ const BrickPayment = ({
   return <div id="paymentBrick_container"></div>;
 };
 
-export default BrickPayment;
+const usePaymentBrick = () => {
+  const update = (updateValues: UpdateValues) => {
+    if (window.paymentBrickController) {
+      window.paymentBrickController.update(updateValues);
+    } else {
+      console.warn(
+        '[Checkout Bricks] Payment Brick is not initialized yet, please try again after a few seconds.',
+      );
+    }
+  };
+  return { update };
+};
+
+export default Payment;
+export { usePaymentBrick };

src/bricks/util/types/common.ts

@@ -152,3 +152,10 @@ export interface IBrickCustomVariables {
   borderRadiusFull?: string;
   formPadding?: string;
 }
+
+/**
+ * Available update values.
+ */
+export type UpdateValues = {
+  amount: number;
+};