Merge branch 'main' of https://github.com/paypal/paypal-checkout-comp…

…onents into axo-component-poc
paypal · Nov 14, 2023 · c764222 · c764222
2 parents 0fa02c0 + f754079
commit c764222
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 174 deletions.
diff --git a/.bundlemonrc.json b/.bundlemonrc.json
@@ -4,7 +4,7 @@
     {
       "path": "size.min.js",
       "compression": "gzip",
-      "maxPercentIncrease": 3,
+      "maxPercentIncrease": 3.6,
       "maxSize": "76kb"
     }
   ],

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## <small>5.0.285 (2023-11-07)</small>
+
+* Venmo overlay (#2271) ([294709b](https://github.com/paypal/paypal-checkout-components/commit/294709b)), closes [#2271](https://github.com/paypal/paypal-checkout-components/issues/2271)
+
+
+
 ## <small>5.0.284 (2023-11-02)</small>
 
 * Update CODE_OF_CONDUCT.md (#2268) ([6caee02](https://github.com/paypal/paypal-checkout-components/commit/6caee02)), closes [#2268](https://github.com/paypal/paypal-checkout-components/issues/2268)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.284",
+  "version": "5.0.285",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

diff --git a/src/zoid/checkout/component.jsx b/src/zoid/checkout/component.jsx
@@ -27,7 +27,11 @@ import {
   inlineMemoize,
 } from "@krakenjs/belter/src";
 import { FUNDING } from "@paypal/sdk-constants/src";
-import { SpinnerPage, Overlay } from "@paypal/common-components/src";
+import {
+  SpinnerPage,
+  Overlay,
+  VenmoOverlay,
+} from "@paypal/common-components/src";
 
 import { getSessionID } from "../../lib";
 import { containerContent } from "../content";
@@ -81,20 +85,38 @@ export function getCheckoutComponent(): CheckoutComponent {
         const {
           nonce,
           locale: { lang },
+          fundingSource,
         } = props;
-        const content = containerContent("PayPal")[lang];
-        return (
-          <Overlay
-            context={context}
-            close={close}
-            focus={focus}
-            event={event}
-            frame={frame}
-            prerenderFrame={prerenderFrame}
-            content={content}
-            nonce={nonce}
-          />
-        ).render(dom({ doc }));
+        const isVenmo = fundingSource === FUNDING.VENMO;
+        const browserLanguage = isVenmo ? "en" : lang;
+        const content = containerContent(fundingSource)[browserLanguage];
+        if (isVenmo) {
+          return (
+            <VenmoOverlay
+              context={context}
+              close={close}
+              focus={focus}
+              event={event}
+              frame={frame}
+              prerenderFrame={prerenderFrame}
+              content={content}
+              nonce={nonce}
+            />
+          ).render(dom({ doc }));
+        } else {
+          return (
+            <Overlay
+              context={context}
+              close={close}
+              focus={focus}
+              event={event}
+              frame={frame}
+              prerenderFrame={prerenderFrame}
+              content={content}
+              nonce={nonce}
+            />
+          ).render(dom({ doc }));
+        }
       },
 
       props: {
@@ -197,6 +219,7 @@ export function getCheckoutComponent(): CheckoutComponent {
           type: "string",
           queryParam: true,
           default: () => FUNDING.PAYPAL,
+          allowDelegate: true,
         },
 
         standaloneFundingSource: {