add label for pay now or later

src/funding/common.jsx

@@ -73,6 +73,7 @@ export type LabelOptions = {|
   tagline: ?boolean,
   content: ?ContentType,
   experiment?: Experiment,
+  shouldApplyPayNowOrLaterLabel?: boolean,
 |};
 
 export type WalletLabelOptions = {|

src/funding/content.jsx

@@ -23,6 +23,7 @@ export type ContentMap = {
     Donate?: ({|
       logo: ChildType,
     |}) => ChildType /** Not available in `tr` language **/,
+    PayNowOrLater?: ({| logo: ChildType |}) => ChildType,
   |},
 };
 
@@ -379,6 +380,14 @@ export const componentContent: ContentMap = {
         </Text>
       </Fragment>
     ),
+    PayNowOrLater: ({ logo }) => (
+      <Fragment>
+        {logo}
+        <Text animate optional>
+          Pay Now or Later
+        </Text>
+      </Fragment>
+    ),
   },
   es: {
     Checkout: ({ logo }) => (

src/funding/paypal/template.jsx

@@ -230,6 +230,17 @@ function ButtonPersonalization(opts: LabelOptions): ?ChildType {
 }
 
 export function Label(opts: LabelOptions): ChildType {
+  const {
+    logo,
+    locale: { lang },
+    shouldApplyPayNowOrLaterLabel,
+  } = opts;
+
+  const { PayNowOrLater } = componentContent[lang];
+  if (shouldApplyPayNowOrLaterLabel && PayNowOrLater) {
+    return <PayNowOrLater logo={logo} />;
+  }
+
   return (
     <Fragment>
       <BasicLabel {...opts} />

src/types.js

@@ -68,6 +68,7 @@ export type Experiment = {|
   venmoEnableWebOnNonNativeBrowser?: boolean,
   spbEagerOrderCreation?: boolean,
   paypalCreditButtonCreateVaultSetupTokenExists?: boolean,
+  isPaylaterCobrandedLabelEnabled?: boolean,
 |};
 
 export type Requires = {|

src/ui/buttons/button.jsx

@@ -109,7 +109,13 @@ export function Button({
   const colors = fundingConfig.colors;
   const secondaryColors = fundingConfig.secondaryColors || {};
 
-  let { color, period, label, shouldApplyRebrandedStyles } = style;
+  let {
+    color,
+    period,
+    label,
+    shouldApplyRebrandedStyles,
+    shouldApplyPayNowOrLaterLabel,
+  } = style;
 
   // if no color option is passed in via style props
   if (color === "" || typeof color === "undefined") {
@@ -189,6 +195,10 @@ export function Button({
           })
         : fundingConfig.labelText || fundingSource;
 
+    if (shouldApplyPayNowOrLaterLabel) {
+      labelText = "PayPal Pay Now or Later";
+    }
+
     if (!showPayLabel && instrument?.vendor && instrument.label) {
       labelText = instrument.secondaryInstruments
         ? `${instrument.secondaryInstruments[0].type} & ${instrument.vendor} ${instrument.label}`
@@ -234,6 +244,7 @@ export function Button({
       tagline={tagline}
       content={content}
       experiment={experiment}
+      shouldApplyPayNowOrLaterLabel={shouldApplyPayNowOrLaterLabel}
     />
   );
 

src/ui/buttons/props.js

@@ -331,6 +331,8 @@ export type ButtonStyle = {|
   borderRadius?: number,
   shouldApplyRebrandedStyles: boolean,
   isButtonColorABTestMerchant: boolean,
+  isPayNowOrLaterLabelEligible: boolean,
+  shouldApplyPayNowOrLaterLabel: boolean,
 |};
 
 export type ButtonStyleInputs = {|
@@ -970,6 +972,25 @@ export function getButtonColor({
   }
 }
 
+export function getCobrandedBNPLLabelFlags(props: ?ButtonPropsInputs): {|
+  isPayNowOrLaterLabelEligible: boolean,
+  shouldApplyPayNowOrLaterLabel: boolean,
+|} {
+  const label = props?.style?.label;
+  const isPayNowOrLaterLabelEligible = Boolean(
+    props?.experiment?.isPaylaterCobrandedLabelEnabled &&
+      (props?.fundingSource === FUNDING.PAYPAL ||
+        props?.fundingSource === undefined) &&
+      props?.fundingEligibility?.paylater?.eligible &&
+      (label === undefined || label === BUTTON_LABEL.PAYPAL)
+  );
+
+  // All eligible sessions are treatment for now; future: add randomization here
+  const shouldApplyPayNowOrLaterLabel = isPayNowOrLaterLabelEligible;
+
+  return { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel };
+}
+
 const getDefaultButtonPropsInput = (): ButtonPropsInputs => {
   return {};
 };
@@ -1119,6 +1140,9 @@ export function normalizeButtonStyle(
     }
   }
 
+  const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
+    getCobrandedBNPLLabelFlags(props);
+
   return {
     label,
     layout,
@@ -1133,6 +1157,8 @@ export function normalizeButtonStyle(
     borderRadius,
     shouldApplyRebrandedStyles,
     isButtonColorABTestMerchant,
+    isPayNowOrLaterLabelEligible,
+    shouldApplyPayNowOrLaterLabel,
   };
 }
 

src/ui/buttons/props.test.js

@@ -14,6 +14,7 @@ import {
   hasInvalidScriptOptionsForFullRedesign,
   determineRandomButtonColor,
   getColorABTestFromStorage,
+  getCobrandedBNPLLabelFlags,
 } from "./props";
 
 describe("getColorABTestFromStorage", () => {
@@ -864,3 +865,85 @@ describe("HideSubmitButtonProps type validation", () => {
     expect(validButtonProps.hideSubmitButtonForCardForm).toBe(false);
   });
 });
+
+describe("getCobrandedBNPLLabelFlags", () => {
+  // $FlowFixMe - test object intentionally omits non-relevant ButtonPropsInputs fields
+  const eligibleProps = {
+    fundingSource: FUNDING.PAYPAL,
+    fundingEligibility: {
+      paylater: { eligible: true },
+    },
+    experiment: { isPaylaterCobrandedLabelEnabled: true },
+    style: {},
+  };
+
+  it("should return true when all conditions are met", () => {
+    const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags(eligibleProps);
+
+    expect(isPayNowOrLaterLabelEligible).toBe(true);
+    expect(shouldApplyPayNowOrLaterLabel).toBe(true);
+  });
+
+  it("should return false when experiment flag is disabled", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        experiment: { isPaylaterCobrandedLabelEnabled: false },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return false when paylater is not eligible", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        fundingEligibility: { paylater: { eligible: false } },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return false when fundingSource is not PAYPAL or undefined", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        fundingSource: FUNDING.VENMO,
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return false when a non-paypal label is set", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        style: { label: "checkout" },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return true when label is explicitly set to paypal", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        style: { label: "paypal" },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(true);
+  });
+
+  it("should return false when props is null", () => {
+    const { isPayNowOrLaterLabelEligible } = getCobrandedBNPLLabelFlags(null);
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+});