Paypal: Add prop for blocking paypal button (#3597)

* feat(paypal): add prop for blocking paypal button

* feat(paypal): add changeset for block paypal button prop

Author: johnayeni

.changeset/heavy-falcons-tickle.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Add prop to enable blocking paypal button

packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx

@@ -65,6 +65,17 @@ describe('PaypalButtons', () => {
         expect(renderedButtons).toEqual(['paypal', 'credit', 'pay-later', 'venmo']);
     });
 
+    test('should not call paypalRef.Buttons().render for blocked paypal button', () => {
+        jest.clearAllMocks();
+        const buttonPropsMock = mock<PayPalButtonsProps>({
+            paypalRef: paypalRefMock
+        });
+        renderWithCoreProvider(<PaypalButtons {...buttonPropsMock} blockPayPalButton />);
+        // eslint-disable-next-line testing-library/render-result-naming-convention
+        const renderedButtons = getRenderedButtons(paypalRenderMock.mock.calls);
+        expect(renderedButtons).toEqual(['credit', 'pay-later', 'venmo']);
+    });
+
     test('should not call paypalRef.Buttons().render for blocked paypal credit button', () => {
         jest.clearAllMocks();
         const buttonPropsMock = mock<PayPalButtonsProps>({

packages/lib/src/components/PayPal/components/PaypalButtons.tsx

@@ -54,8 +54,7 @@ export default function PaypalButtons({
     useEffect(() => {
         const { PAYPAL, CREDIT, PAYLATER, VENMO } = paypalRef.FUNDING;
 
-        createButton(PAYPAL, paypalButtonRef);
-
+        if (!props.blockPayPalButton) createButton(PAYPAL, paypalButtonRef);
         if (!props.blockPayPalCreditButton) createButton(CREDIT, creditButtonRef);
         if (!props.blockPayPalPayLaterButton) createButton(PAYLATER, payLaterButtonRef);
         if (!props.blockPayPalVenmoButton) createButton(VENMO, venmoButtonRef);

packages/lib/src/components/PayPal/defaultProps.ts

@@ -9,6 +9,7 @@ const defaultProps: Partial<PayPalConfiguration> = {
     style: {
         height: 50 // The height of the buttons is set to 50px to align with the default size of our Pay buttons.
     },
+    blockPayPalButton: false,
     blockPayPalCreditButton: false,
     blockPayPalPayLaterButton: false,
     blockPayPalVenmoButton: false

packages/lib/src/components/PayPal/types.ts

@@ -29,6 +29,12 @@ export interface PayPalConfiguration extends UIElementProps {
      */
     expressPage?: 'cart' | 'minicart' | 'pdp' | 'checkout';
 
+    /**
+     * Set to true to force the UI to not render PayPal button
+     * @default false
+     */
+    blockPayPalButton?: boolean;
+
     /**
      * Set to true to force the UI to not render PayPal Credit button
      * @default false