[DTPPCPSDK-2824] [DTPRP-1734] [DTPRP-1751] Limit eligible button to Paypal when new createSubscription is used

src/ui/buttons/buttons.jsx

@@ -134,7 +134,7 @@ export function validateButtonProps(props: ButtonPropsInputs) {
 }
 
 export function Buttons(props: ButtonsProps): ElementNode {
-  const { onClick = noop } = props;
+  const { onClick = noop, isFsSubscription } = props;
   const {
     applePaySupport,
     buyerCountry,
@@ -190,7 +190,6 @@ export function Buttons(props: ButtonsProps): ElementNode {
     experiment,
     displayOnly,
   });
-  const multiple = fundingSources.length > 1;
 
   if (!fundingSources.length) {
     throw new ValidationError(
@@ -209,13 +208,20 @@ export function Buttons(props: ButtonsProps): ElementNode {
     ];
   }
 
-  const isAPM = fundingSources.some((src) => {
+  // Set the value of the FINAL fundingSource we want to use
+  const finalFundingSources = isFsSubscription
+    ? fundingSources.filter((src) => src === FUNDING.PAYPAL)
+    : fundingSources;
+
+  const multiple = finalFundingSources.length > 1;
+
+  const isAPM = finalFundingSources.some((src) => {
     return APM_LIST.includes(src);
   });
 
   const instruments = getWalletInstruments({
     wallet,
-    fundingSources,
+    fundingSources: finalFundingSources,
     layout,
     hasShippingCallback,
   });
@@ -234,7 +240,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     !fundingSource &&
     !message;
 
-  const showPoweredBy = calculateShowPoweredBy(layout, fundingSources);
+  const showPoweredBy = calculateShowPoweredBy(layout, finalFundingSources);
 
   return (
     <div
@@ -260,7 +266,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
         <Message markup={messageMarkup} position={message.position} />
       ) : null}
 
-      {fundingSources.map((source, i) => (
+      {finalFundingSources.map((source, i) => (
         <Button
           content={content}
           i={index(i)}
@@ -293,7 +299,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
 
       {showTagline ? (
         <TagLine
-          fundingSource={fundingSources[0]}
+          fundingSource={finalFundingSources[0]}
           style={style}
           locale={locale}
           multiple={multiple}
@@ -302,7 +308,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
         />
       ) : null}
 
-      {fundingSources.indexOf(FUNDING.CARD) !== -1 ? (
+      {finalFundingSources.indexOf(FUNDING.CARD) !== -1 ? (
         <div id="card-fields-container" class="card-fields-container" />
       ) : null}
 

src/ui/buttons/buttons.test.js

@@ -0,0 +1,202 @@
+/* @flow */
+import { describe, expect } from "vitest";
+
+import { Buttons } from "./buttons";
+
+/* NOTE: We want to give a "complete" fundingEligibility object since this is what determines how many buttons there will be to start with, before we try to limit the buttons */
+const fundingEligibility = {
+  paypal: {
+    eligible: true,
+    vaultable: true,
+  },
+  paylater: {
+    eligible: true,
+    vaultable: true,
+    products: {
+      payIn3: {
+        eligible: false,
+        variant: null,
+      },
+      payIn4: {
+        eligible: false,
+        variant: null,
+      },
+      paylater: {
+        eligible: true,
+        variant: null,
+      },
+    },
+  },
+  card: {
+    eligible: true,
+    branded: false,
+    installments: false,
+    vendors: {
+      visa: {
+        eligible: true,
+        vaultable: true,
+      },
+      mastercard: {
+        eligible: true,
+        vaultable: true,
+      },
+      amex: {
+        eligible: true,
+        vaultable: true,
+      },
+      discover: {
+        eligible: true,
+        vaultable: true,
+      },
+      hiper: {
+        eligible: false,
+        vaultable: false,
+      },
+      elo: {
+        eligible: false,
+        vaultable: true,
+      },
+      jcb: {
+        eligible: false,
+        vaultable: true,
+      },
+      maestro: {
+        eligible: true,
+        vaultable: true,
+      },
+      diners: {
+        eligible: true,
+        vaultable: true,
+      },
+      cup: {
+        eligible: true,
+        vaultable: true,
+      },
+    },
+    guestEnabled: false,
+  },
+  venmo: {
+    eligible: false,
+    vaultable: false,
+  },
+  itau: {
+    eligible: false,
+  },
+  credit: {
+    eligible: false,
+  },
+  applepay: {
+    eligible: true,
+  },
+  sepa: {
+    eligible: false,
+  },
+  ideal: {
+    eligible: false,
+  },
+  bancontact: {
+    eligible: false,
+  },
+  giropay: {
+    eligible: false,
+  },
+  eps: {
+    eligible: false,
+  },
+  sofort: {
+    eligible: false,
+  },
+  mybank: {
+    eligible: false,
+  },
+  p24: {
+    eligible: false,
+  },
+  wechatpay: {
+    eligible: false,
+  },
+  payu: {
+    eligible: false,
+  },
+  blik: {
+    eligible: false,
+  },
+  trustly: {
+    eligible: false,
+  },
+  oxxo: {
+    eligible: false,
+  },
+  boleto: {
+    eligible: false,
+  },
+  boletobancario: {
+    eligible: false,
+  },
+  mercadopago: {
+    eligible: false,
+  },
+  multibanco: {
+    eligible: false,
+  },
+  satispay: {
+    eligible: false,
+  },
+  paidy: {
+    eligible: false,
+  },
+};
+
+describe("Smart Payment Buttons - limit button to PayPal for FSS", () => {
+  test("should return only 1 PayPal button if isFsSubscription=true", () => {
+    const mockedButtonProps = {
+      // isFsSubscription is the determinant of how many buttons get shown
+      isFsSubscription: true,
+      flow: "subscription_setup",
+      fundingEligibility,
+    };
+
+    // $FlowFixMe
+    const jsxElems = Buttons(mockedButtonProps);
+
+    const allButtonsTotalCount = jsxElems?.children.filter(
+      // $FlowFixMe
+      (elem) => elem?.component?.name === "Button"
+    ).length;
+
+    const hasPayPalButton =
+      jsxElems?.children.filter(
+        // $FlowFixMe
+        (elem) => elem?.props?.fundingSource === "paypal"
+      ).length === 1;
+
+    expect(allButtonsTotalCount).toBe(1);
+    expect(hasPayPalButton).toBe(true);
+  });
+
+  test("should return 1 or more buttons if not isFsSubscription", () => {
+    const mockedButtonProps = {
+      // isFsSubscription is the determinant of how many buttons get shown
+      isFsSubscription: false,
+      flow: "subscription_setup",
+      fundingEligibility,
+    };
+
+    // $FlowFixMe
+    const jsxElems = Buttons(mockedButtonProps);
+
+    const allButtonsTotalCount = jsxElems?.children.filter(
+      // $FlowFixMe
+      (elem) => elem?.component?.name === "Button"
+    ).length;
+
+    const hasPayPalButton =
+      jsxElems?.children.filter(
+        // $FlowFixMe
+        (elem) => elem?.props?.fundingSource === "paypal"
+      ).length === 1;
+
+    expect(allButtonsTotalCount).toBeGreaterThanOrEqual(1);
+    expect(hasPayPalButton).toBe(true);
+  });
+});

src/ui/buttons/props.js

@@ -597,6 +597,7 @@ export type ButtonPropsInputs = {
   message?: ButtonMessageInputs | void,
   messageMarkup?: string | void,
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  isFsSubscription: boolean,
 };
 
 export const DEFAULT_STYLE = {

src/zoid/buttons/component.jsx

@@ -42,6 +42,7 @@ import {
   getSDKAttribute,
   getJsSdkLibrary,
   wasShopperInsightsUsed,
+  getSDKToken,
 } from "@paypal/sdk-client/src";
 import {
   rememberFunding,
@@ -613,6 +614,16 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getIntent,
       },
 
+      isFsSubscription: {
+        type: "boolean",
+        queryParam: true,
+        required: false,
+        value: ({ props }) =>
+          props.createSubscription &&
+          Boolean(getSDKToken()) &&
+          props.intent !== "subscription",
+      },
+
       jsSdkLibrary: {
         type: "string",
         queryParam: true,
@@ -933,6 +944,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getSDKMeta,
       },
 
+      sdkToken: {
+        type: "string",
+        required: false,
+        value: getSDKToken,
+      },
+
       /**
        * Version of the SDK used in first render.
        * This is passed to the `/smart/buttons` endpoint in order for the second render