Support Venmo vault without purchase with a feature flag

package.json

@@ -69,8 +69,8 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@bunchtogether/vite-plugin-flow": "^1.0.2",
-    "@krakenjs/grumbler-scripts": "^8.1.5",
     "@krakenjs/eslint-config-grumbler": "8.1.3",
+    "@krakenjs/grumbler-scripts": "^8.1.5",
     "@krakenjs/sync-browser-mocks": "^3.0.0",
     "@percy/cli": "1.28.5",
     "@percy/playwright": "^1.0.4",
@@ -114,7 +114,7 @@
     "@paypal/common-components": "^1.0.35",
     "@paypal/connect-loader-component": "1.1.1",
     "@paypal/funding-components": "^1.0.31",
-    "@paypal/sdk-client": "^4.0.184",
+    "@paypal/sdk-client": "^4.0.191",
     "@paypal/sdk-constants": "^1.0.146",
     "@paypal/sdk-logos": "^2.2.6"
   },

src/funding/card/config.test.jsx

@@ -2,6 +2,8 @@
 import { describe, test, expect } from "vitest";
 import { FUNDING, COMPONENTS } from "@paypal/sdk-constants/src";
 
+import { BUTTON_FLOW } from "../../constants";
+
 import { getCardConfig } from "./config";
 
 const getEligibility = ({
@@ -43,6 +45,7 @@ describe("card eligibility", () => {
         fundingEligibility: getEligibility({ eligible: false }),
         // $FlowIssue
         wallet: getWallet(),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(false);
   });
@@ -54,6 +57,7 @@ describe("card eligibility", () => {
         fundingSource: FUNDING.PAYPAL,
         fundingEligibility: getEligibility({ branded: true }),
         wallet: getWallet(),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(true);
   });
@@ -65,6 +69,7 @@ describe("card eligibility", () => {
         fundingSource: FUNDING.CARD,
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(true);
   });
@@ -77,6 +82,7 @@ describe("card eligibility", () => {
         fundingSource: FUNDING.PAYPAL,
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(false);
   });
@@ -91,6 +97,7 @@ describe("card eligibility", () => {
         wallet: getWallet({
           card: ["some instrument"],
         }),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(false);
   });
@@ -104,6 +111,7 @@ describe("card eligibility", () => {
         wallet: getWallet({
           card: ["some instrument"],
         }),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(true);
   });
@@ -115,6 +123,7 @@ describe("card eligibility", () => {
         fundingSource: FUNDING.PAYPAL,
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(false);
   });
@@ -126,6 +135,7 @@ describe("card eligibility", () => {
         fundingSource: FUNDING.PAYPAL,
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
+        flow: BUTTON_FLOW.PURCHASE,
       })
     ).toEqual(true);
   });

src/funding/common.jsx

@@ -109,6 +109,7 @@ export type FundingSourceConfig = {|
   eligible?: ({|
     components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
     experiment?: ?Experiment,
+    flow: $Values<typeof BUTTON_FLOW>,
     enableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
     fundingEligibility: FundingEligibilityType,
     fundingSource: ?$Values<typeof FUNDING>,

src/funding/funding.js

@@ -125,6 +125,7 @@ export function isFundingEligible(
       enableFunding,
       components,
       experiment,
+      flow,
       fundingSource,
       fundingEligibility,
       layout,

src/funding/venmo/config.jsx

@@ -8,7 +8,7 @@ import {
 } from "@paypal/sdk-logos/src";
 import { DISPLAY_ONLY_VALUES, PLATFORM } from "@paypal/sdk-constants/src";
 
-import { BUTTON_COLOR, BUTTON_LAYOUT } from "../../constants";
+import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW } from "../../constants";
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 
 import { WalletLabel, Label } from "./template";
@@ -17,9 +17,11 @@ export function getVenmoConfig(): FundingSourceConfig {
   return {
     ...DEFAULT_FUNDING_CONFIG,
 
+    flows: [BUTTON_FLOW.PURCHASE, BUTTON_FLOW.VAULT_WITHOUT_PURCHASE],
+
     layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
 
-    eligible: ({ experiment, shippingChange, displayOnly }) => {
+    eligible: ({ experiment, shippingChange, displayOnly, flow }) => {
       if (experiment && experiment.enableVenmo === false) {
         return false;
       }
@@ -39,6 +41,13 @@ export function getVenmoConfig(): FundingSourceConfig {
         return false;
       }
 
+      if (
+        flow === BUTTON_FLOW.VAULT_WITHOUT_PURCHASE &&
+        experiment?.venmoVaultWithoutPurchase !== true
+      ) {
+        return false;
+      }
+
       return true;
     },
 

src/funding/venmo/config.test.js

@@ -2,6 +2,8 @@
 
 import { describe, expect } from "vitest";
 
+import { BUTTON_FLOW } from "../../constants";
+
 import { getVenmoConfig } from "./config";
 
 describe("Venmo eligibility", () => {
@@ -10,6 +12,7 @@ describe("Venmo eligibility", () => {
     components: ["buttons"],
     fundingEligibility: {},
     wallet: expect.any,
+    flow: BUTTON_FLOW.PURCHASE,
   };
   const venmoConfig = getVenmoConfig();
 
@@ -46,4 +49,25 @@ describe("Venmo eligibility", () => {
 
     expect(isVenmoEligible).toEqual(true);
   });
+
+  test("should not be eligible if flow is VAULT_WITHOUT_PURCHASE and venmoVaultWithoutPurchase is false", () => {
+    const isVenmoEligible = venmoConfig.eligible?.({
+      ...baseEligibilityProps,
+      flow: BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
+    });
+
+    expect(isVenmoEligible).toEqual(false);
+  });
+
+  test("should be eligible if flow is VAULT_WITHOUT_PURCHASE and venmoVaultWithoutPurchase is true", () => {
+    const isVenmoEligible = venmoConfig.eligible?.({
+      ...baseEligibilityProps,
+      flow: BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
+      experiment: {
+        venmoVaultWithoutPurchase: true,
+      },
+    });
+
+    expect(isVenmoEligible).toEqual(true);
+  });
 });

src/types.js

@@ -60,6 +60,8 @@ export type Experiment = {|
   enableVenmo?: boolean,
   disablePaylater?: boolean,
   venmoWebEnabled?: boolean,
+  // first render experiments
+  venmoVaultWithoutPurchase?: boolean,
 |};
 
 export type Requires = {|

src/zoid/buttons/component.jsx

@@ -39,6 +39,7 @@ import {
   getVersion,
   getDisableSetCookie,
   getExperimentation,
+  getFirstRenderExperiments,
   getSDKAttribute,
   getJsSdkLibrary,
 } from "@paypal/sdk-client/src";
@@ -472,12 +473,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
       experiment: {
         type: "object",
         queryParam: true,
-        value: () => {
-          const experiments = getButtonExperiments();
-          return experiments;
-        },
+        value: () => ({
+          ...getButtonExperiments(),
+          ...getFirstRenderExperiments(),
+        }),
       },
-
+      // TODO first-render-experiment-cleanup
+      // verify if this is needed/used now that were putting the first render experiments in experiment param above
       experimentation: {
         type: "object",
         queryParam: true,