@paypal/checkout-components 5.0.265 → 5.0.266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.265",
+  "version": "5.0.266",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/funding/card/config.jsx

@@ -59,9 +59,6 @@ export function getCardConfig(): FundingSourceConfig {
     eligible: ({ components, fundingSource, fundingEligibility, wallet }) => {
       const cardEligibility = fundingEligibility.card;
 
-      const hostedFieldsRequested = Boolean(
-        components.indexOf(COMPONENTS.HOSTED_FIELDS) !== -1
-      );
       const cardEligible = Boolean(cardEligibility && cardEligibility.eligible);
       const cardBranded = Boolean(cardEligibility && cardEligibility.branded);
       const cardVaulted = Boolean(
@@ -76,23 +73,43 @@ export function getCardConfig(): FundingSourceConfig {
         return false;
       }
 
-      // If card is branded, always show card buttons
+      /*
+       *
+       * the next 5 if statements are in a very important order. Each if statement relies on the one above
+       * to verify we are not in a situation where card fields should or should not be shown. Switching the
+       * order of these if statements could break merchant integrations
+       *
+       * 1. If funding eligibility says branded: true for card, it means that the merchant is not
+       *    eligible for unbranded experiences. In that case, the card button should always be eligible
+       * 2. If the merchant is attempting to render a standalone card, we should mark it as eligible
+       *    since it is outside of the smart stack
+       * 3. If the merchant is using the new card-fields component, the card button should be ineligible
+       *    because we should not mix branded and unbranded experiences
+       * 4. If there is a vaulted card in the buyer's wallet we should show the button. This is very important
+       *    because the old hosted card fields (hosted-fields) uses the card button as its return buyer experience
+       *    this is why this check happens before checking if hosted-fields was requested
+       * 5. If hosted-fields were requested, we shouldn't show the card button because we shouldn't mix branded and
+       *    unbranded experience. The exception is for vaulted cards explained in the point above
+       *
+       */
+
       if (cardBranded) {
         return true;
       }
 
-      // If there's a vaulted card, always show card button
-      if (cardVaulted) {
+      if (fundingSource === FUNDING.CARD) {
         return true;
       }
 
-      // If standalone card is selected, always show card button
-      if (fundingSource === FUNDING.CARD) {
+      if (components.includes("card-fields")) {
+        return false;
+      }
+
+      if (cardVaulted) {
         return true;
       }
 
-      // If hosted fields is requested, do not show card buttons
-      if (hostedFieldsRequested) {
+      if (components.includes(COMPONENTS.HOSTED_FIELDS)) {
         return false;
       }
 

package/src/funding/card/config.test.jsx

@@ -0,0 +1,132 @@
+/* @flow */
+import { describe, test, expect } from "vitest";
+import { FUNDING, COMPONENTS } from "@paypal/sdk-constants/src";
+
+import { getCardConfig } from "./config";
+
+const getEligibility = ({
+  eligible = true,
+  branded = false,
+  vendors = {},
+} = {}) => ({
+  card: {
+    eligible,
+    branded,
+    vendors,
+  },
+});
+
+const getWallet = ({ card = [] } = {}) => ({
+  card: {
+    instruments: card,
+  },
+  credit: {
+    instruments: [],
+  },
+  paypal: {
+    instruments: [],
+  },
+  venmo: {
+    instruments: [],
+  },
+});
+
+describe("card eligibility", () => {
+  // $FlowIssue .eligible is marked as optional in type
+  const getCardConfigEligible = (...args) => getCardConfig().eligible(...args);
+
+  test("should not be eligible when funding eligibility is false", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility({ eligible: false }),
+        // $FlowIssue
+        wallet: getWallet(),
+      })
+    ).toEqual(false);
+  });
+
+  test("should be eligible if card funding eligibility says branded is true", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility({ branded: true }),
+        wallet: getWallet(),
+      })
+    ).toEqual(true);
+  });
+
+  test("should be eligible if standalone card was rendered", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.CARD,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(true);
+  });
+
+  test("should be ineligible if card-fields were requested", () => {
+    expect(
+      getCardConfigEligible({
+        // $FlowIssue need to add the new card fields as a constant
+        components: ["card-fields"],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(false);
+  });
+
+  test("should be ineligible if card-fields were requested, even if there is a vaulted instrument", () => {
+    expect(
+      getCardConfigEligible({
+        // $FlowIssue need to add the new card fields as a constant
+        components: ["card-fields"],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet({
+          card: ["some instrument"],
+        }),
+      })
+    ).toEqual(false);
+  });
+
+  test("should be eligible if there is a vaulted card", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet({
+          card: ["some instrument"],
+        }),
+      })
+    ).toEqual(true);
+  });
+
+  test("should be ineligible if hosted-fields was requested", () => {
+    expect(
+      getCardConfigEligible({
+        components: [COMPONENTS.HOSTED_FIELDS],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(false);
+  });
+
+  test("should default to true", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(true);
+  });
+});

package/src/funding/common.jsx

@@ -126,10 +126,10 @@ export type FundingSourceConfig = {|
   vendors?: { [$Values<typeof CARD>]: ?CardConfig },
   eligible?: ({|
     components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
-    experiment: ?Experiment,
+    experiment?: ?Experiment,
     fundingEligibility: FundingEligibilityType,
     fundingSource: ?$Values<typeof FUNDING>,
-    layout: ?$Values<typeof BUTTON_LAYOUT>,
+    layout?: ?$Values<typeof BUTTON_LAYOUT>,
     wallet: ?Wallet,
   |}) => boolean,
   Logo: (LogoOptions) => ChildType,