From df629effb6cfa43f543f06d6fbba30016928627d Mon Sep 17 00:00:00 2001
From: Guilherme Ribeiro <guilhermemrr@gmail.com>
Date: Thu, 16 Dec 2021 14:11:23 +0100
Subject: [PATCH] Paypal PayLater button (#1420)

* feat: paypal pay later

* fix: test
---
 .../components/PayPal/components/PaypalButtons.test.tsx  | 7 ++++---
 .../src/components/PayPal/components/PaypalButtons.tsx   | 9 ++++++---
 packages/lib/src/components/PayPal/defaultProps.ts       | 2 ++
 packages/lib/src/components/PayPal/types.ts              | 6 ++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx b/packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx
index e1e8c49ec7..c728e3547b 100644
--- a/packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx
+++ b/packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx
@@ -8,7 +8,8 @@ const render = jest.fn(() => Promise.resolve());
 const paypalRefMock = {
     FUNDING: {
         PAYPAL: 'paypal',
-        CREDIT: 'credit'
+        CREDIT: 'credit',
+        PAYLATER: 'paylater'
     },
     Buttons: jest.fn(() => ({ isEligible, render }))
 };
@@ -19,12 +20,12 @@ describe('PaypalButtons', () => {
     test('Calls to paypalRef.Buttons', async () => {
         jest.clearAllMocks();
         getWrapper();
-        expect(paypalRefMock.Buttons).toHaveBeenCalledTimes(2);
+        expect(paypalRefMock.Buttons).toHaveBeenCalledTimes(3);
     });
 
     test('Calls to paypalRef.Buttons().render', async () => {
         jest.clearAllMocks();
         getWrapper();
-        expect(paypalRefMock.Buttons().render).toHaveBeenCalledTimes(2);
+        expect(paypalRefMock.Buttons().render).toHaveBeenCalledTimes(3);
     });
 });
diff --git a/packages/lib/src/components/PayPal/components/PaypalButtons.tsx b/packages/lib/src/components/PayPal/components/PaypalButtons.tsx
index a806f1e03c..223e7e9b64 100644
--- a/packages/lib/src/components/PayPal/components/PaypalButtons.tsx
+++ b/packages/lib/src/components/PayPal/components/PaypalButtons.tsx
@@ -6,8 +6,9 @@ import { getStyle } from '../utils';
 export default function PaypalButtons(props: PayPalButtonsProps) {
     const { onInit, onComplete, onClick, onCancel, onError, onShippingChange, onSubmit, paypalRef, style } = props;
     const isTokenize = props.configuration?.intent === 'tokenize';
-    const paypalButtonRef = useRef(null);
-    const creditButtonRef = useRef(null);
+    const paypalButtonRef = useRef<HTMLDivElement>(null);
+    const creditButtonRef = useRef<HTMLDivElement>(null);
+    const payLaterButtonRef = useRef<HTMLDivElement>(null);
 
     const createButton = (fundingSource: FundingSource, buttonRef) => {
         const button = paypalRef.Buttons({
@@ -31,15 +32,17 @@ export default function PaypalButtons(props: PayPalButtonsProps) {
     };
 
     useEffect(() => {
-        const { PAYPAL, CREDIT } = paypalRef.FUNDING;
+        const { PAYPAL, CREDIT, PAYLATER } = paypalRef.FUNDING;
         createButton(PAYPAL, paypalButtonRef);
         if (!props.blockPayPalCreditButton) createButton(CREDIT, creditButtonRef);
+        if (!props.blockPayPalPayLaterButton) createButton(PAYLATER, payLaterButtonRef);
     }, []);
 
     return (
         <div className="adyen-checkout__paypal__buttons">
             <div className="adyen-checkout__paypal__button adyen-checkout__paypal__button--paypal" ref={paypalButtonRef} />
             <div className="adyen-checkout__paypal__button adyen-checkout__paypal__button--credit" ref={creditButtonRef} />
+            <div className="adyen-checkout__paypal__button adyen-checkout__paypal__button--pay-later" ref={payLaterButtonRef} />
         </div>
     );
 }
diff --git a/packages/lib/src/components/PayPal/defaultProps.ts b/packages/lib/src/components/PayPal/defaultProps.ts
index 9af71e197b..447557aa2d 100644
--- a/packages/lib/src/components/PayPal/defaultProps.ts
+++ b/packages/lib/src/components/PayPal/defaultProps.ts
@@ -43,6 +43,8 @@ const defaultProps: PayPalElementProps = {
 
     blockPayPalCreditButton: false,
 
+    blockPayPalPayLaterButton: false,
+
     configuration: {
         /**
          * @see {@link https://developer.paypal.com/docs/checkout/reference/customize-sdk/#merchant-id}
diff --git a/packages/lib/src/components/PayPal/types.ts b/packages/lib/src/components/PayPal/types.ts
index 3bf9966840..edfc9f86ae 100644
--- a/packages/lib/src/components/PayPal/types.ts
+++ b/packages/lib/src/components/PayPal/types.ts
@@ -74,6 +74,12 @@ interface PayPalCommonProps {
 
     blockPayPalCreditButton?: boolean;
 
+    /**
+     * Set to true to force the UI to not render PayPal Pay Later button
+     * @defaultValue false
+     */
+    blockPayPalPayLaterButton?: boolean;
+
     /**
      * @see {@link https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-configuration/#csp-nonce}
      */