feat: updates PayPalButtons to add message option

paypal · Jun 7, 2024 · ee7cf02 · ee7cf02
2 parents 672a48d + 8213385
commit ee7cf02
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     },
     "homepage": "https://paypal.github.io/react-paypal-js/",
     "dependencies": {
-        "@paypal/paypal-js": "^8.0.5",
+        "@paypal/paypal-js": "^8.1.0",
         "@paypal/sdk-constants": "^1.0.122"
     },
     "devDependencies": {

diff --git a/src/components/PayPalButtons.test.tsx b/src/components/PayPalButtons.test.tsx
@@ -62,13 +62,15 @@ describe("<PayPalButtons />", () => {
                 <PayPalButtons
                     fundingSource={FUNDING.CREDIT}
                     style={{ layout: "horizontal" }}
+                    message={{ amount: 100 }}
                 />
             </PayPalScriptProvider>
         );
 
         await waitFor(() =>
             expect(window.paypal?.Buttons).toHaveBeenCalledWith({
                 style: { layout: "horizontal" },
+                message: { amount: 100 },
                 fundingSource: FUNDING.CREDIT,
                 onInit: expect.any(Function),
             })

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
@@ -120,7 +120,12 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
 
         return closeButtonsComponent;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isResolved, ...forceReRender, buttonProps.fundingSource]);
+    }, [
+        isResolved,
+        ...forceReRender,
+        buttonProps.fundingSource,
+        buttonProps.message,
+    ]);
 
     // useEffect hook for managing disabled state
     useEffect(() => {

diff --git a/src/components/braintree/BraintreePayPalButtons.test.tsx b/src/components/braintree/BraintreePayPalButtons.test.tsx
@@ -316,6 +316,7 @@ describe("render Braintree PayPal button component", () => {
             >
                 <BraintreePayPalButtons
                     style={{ layout: "horizontal" }}
+                    message={{ amount: 100 }}
                     fundingSource={FUNDING.CREDIT}
                     createOrder={jest.fn()}
                     onApprove={jest.fn()}
@@ -328,6 +329,7 @@ describe("render Braintree PayPal button component", () => {
                 window.paypal.Buttons) as jest.Mock;
             expect(mockButtons).toBeCalledWith({
                 style: { layout: "horizontal" },
+                message: { amount: 100 },
                 fundingSource: FUNDING.CREDIT,
                 createOrder: expect.any(Function),
                 onApprove: expect.any(Function),

diff --git a/src/stories/braintree/BraintreePayPalButtons.stories.tsx b/src/stories/braintree/BraintreePayPalButtons.stories.tsx
@@ -39,6 +39,7 @@ import type {
 
 type StoryProps = {
     style: PayPalButtonsComponentOptions["style"];
+    message: PayPalButtonsComponentOptions["message"];
     fundingSource: FUNDING_SOURCE;
     disabled: boolean;
     amount: string;
@@ -66,6 +67,10 @@ export default {
             control: { type: "object", expanded: true },
             ...COMPONENT_PROPS_CATEGORY,
         },
+        message: {
+            control: { type: "object" },
+            ...COMPONENT_PROPS_CATEGORY,
+        },
         disabled: {
             options: [true, false],
             control: { type: "select" },
@@ -149,6 +154,7 @@ export default {
 
 export const Default: FC<StoryProps> = ({
     style,
+    message,
     fundingSource,
     disabled,
     amount,
@@ -158,6 +164,7 @@ export const Default: FC<StoryProps> = ({
     return (
         <BraintreePayPalButtons
             style={style}
+            message={message}
             disabled={disabled}
             fundingSource={fundingSource}
             forceReRender={[style, amount, currency]}

diff --git a/src/stories/payPalButtons/PayPalButtons.stories.tsx b/src/stories/payPalButtons/PayPalButtons.stories.tsx
@@ -32,6 +32,7 @@ import type { DocsContextProps } from "@storybook/addon-docs";
 
 type StoryProps = {
     style: PayPalButtonsComponentOptions["style"];
+    message: PayPalButtonsComponentOptions["message"];
     fundingSource: FUNDING_SOURCE;
     disabled: boolean;
     showSpinner: boolean;
@@ -75,6 +76,10 @@ export default {
             control: { type: "object" },
             ...COMPONENT_PROPS_CATEGORY,
         },
+        message: {
+            control: { type: "object" },
+            ...COMPONENT_PROPS_CATEGORY,
+        },
         disabled: {
             options: [true, false],
             control: { type: "select" },
@@ -136,6 +141,7 @@ export default {
 
 export const Default: FC<StoryProps> = ({
     style,
+    message,
     fundingSource,
     disabled,
     showSpinner,
@@ -157,6 +163,7 @@ export const Default: FC<StoryProps> = ({
             {showSpinner && <LoadingSpinner />}
             <PayPalButtons
                 style={style}
+                message={message}
                 disabled={disabled}
                 fundingSource={fundingSource}
                 forceReRender={[style]}