@paypal/checkout-components 5.0.303-alpha.0 → 5.0.303

package/package.json

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

package/src/funding/card/config.jsx

@@ -123,7 +123,7 @@ export function getCardConfig(): FundingSourceConfig {
       BUTTON_FLOW.SUBSCRIPTION_SETUP,
     ],
 
-    layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
+    layouts: [BUTTON_LAYOUT.VERTICAL],
 
     maxCards: maxCardForCountry,
 

package/src/hosted-buttons/utils.js

@@ -7,7 +7,6 @@ import {
   getClientID,
   getMerchantID as getSDKMerchantID,
 } from "@paypal/sdk-client/src";
-import { FUNDING } from "@paypal/sdk-constants/src";
 
 import type {
   ButtonVariables,
@@ -209,14 +208,6 @@ export const buildHostedButtonOnApprove = ({
         merchant_id: merchantId,
         context_id: data.orderID,
       }),
-    }).then((response) => {
-      // The "Debit or Credit Card" button does not open a popup
-      // so we need to redirect to the thank you page for buyers who complete
-      // a checkout via "Debit or Credit Card".
-      if (data.paymentSource === FUNDING.CARD) {
-        window.location = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
-      }
-      return response;
     });
   };
 };

package/src/hosted-buttons/utils.test.js

@@ -264,28 +264,6 @@ describe("buildHostedButtonOnApprove", () => {
     );
     expect.assertions(1);
   });
-
-  describe("inline guest", () => {
-    const onApprove = buildHostedButtonOnApprove({
-      hostedButtonId,
-      merchantId,
-    });
-    // $FlowIssue
-    request.mockImplementation(() =>
-      // eslint-disable-next-line compat/compat
-      Promise.resolve({
-        body: {},
-      })
-    );
-
-    test("redirects from the merchant's site to a thank you page", async () => {
-      expect(window.location.href).toBe("http://localhost:3000/");
-      await onApprove({ orderID, paymentSource: "card" });
-      expect(window.location).toBe(
-        "https://example.com/ncp/payment/B1234567890/EC-1234567890"
-      );
-    });
-  });
 });
 
 /* eslint-enable no-restricted-globals, promise/no-native */

package/src/ui/buttons/buttons.jsx

@@ -288,10 +288,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
         />
       ))}
 
-      {tagline &&
-      layout === BUTTON_LAYOUT.HORIZONTAL &&
-      !fundingSource &&
-      !fundingSources.includes(FUNDING.CARD) ? (
+      {tagline && layout === BUTTON_LAYOUT.HORIZONTAL && !fundingSource ? (
         <TagLine
           fundingSource={fundingSources[0]}
           style={style}
@@ -313,7 +310,8 @@ export function Buttons(props: ButtonsProps): ElementNode {
         />
       ) : null}
 
-      {fundingSources.includes(FUNDING.CARD) ? (
+      {layout === BUTTON_LAYOUT.VERTICAL &&
+      fundingSources.indexOf(FUNDING.CARD) !== -1 ? (
         <PoweredByPayPal locale={locale} nonce={nonce} />
       ) : null}
 

package/src/ui/buttons/buttons.test.jsx

@@ -1,89 +0,0 @@
-/* @flow */
-
-import { describe, expect } from "vitest";
-import { dom } from "@krakenjs/jsx-pragmatic/src";
-
-import { CLASS } from "../../constants/class";
-import { ATTRIBUTE } from "../../constants/misc";
-
-import { Buttons } from "./buttons";
-
-const props = {
-  fundingEligibility: {
-    card: {
-      eligible: true,
-    },
-    paypal: {
-      eligible: true,
-    },
-    venmo: {
-      eligible: true,
-    },
-  },
-};
-
-const selectors = {
-  inlineGuest: `[${ATTRIBUTE.FUNDING_SOURCE}='card']`,
-  paypal: `[${ATTRIBUTE.FUNDING_SOURCE}='paypal'`,
-  poweredBy: `.${CLASS.POWERED_BY}`,
-  tagline: `.${CLASS.TAGLINE}`,
-  venmo: `[${ATTRIBUTE.FUNDING_SOURCE}='venmo'`,
-};
-
-const render = (buttonProps) => {
-  const container = document.createElement("div");
-  // $FlowIssue not all required props are needed for this test
-  container.appendChild(Buttons(buttonProps).render(dom()));
-  return container;
-};
-
-describe("Buttons", () => {
-  describe("style.layout = 'vertical'", () => {
-    it("renders inline guest and paypal powered by", () => {
-      const container = render(props);
-      expect(container.querySelector(selectors.inlineGuest)).toBeTruthy();
-      expect(container.querySelector(selectors.poweredBy)).toBeTruthy();
-      expect(container.querySelector(selectors.tagline)).toBeFalsy();
-    });
-  });
-
-  describe("style.layout = 'horizontal'", () => {
-    const style = {
-      layout: "horizontal",
-    };
-    it("renders the first two funding sources with a tagline", () => {
-      const container = render({
-        ...props,
-        style,
-      });
-      expect(container.querySelector(selectors.paypal)).toBeTruthy();
-      expect(container.querySelector(selectors.venmo)).toBeTruthy();
-      expect(container.querySelector(selectors.inlineGuest)).toBeFalsy();
-      expect(container.querySelector(selectors.poweredBy)).toBeFalsy();
-      expect(container.querySelector(selectors.tagline)).toBeTruthy();
-    });
-    it("renders inline guest with powered by if eligible", () => {
-      // $FlowIssue fundingEligibility props are optional
-      const { card, paypal } = props.fundingEligibility;
-      const container = render({
-        fundingEligibility: {
-          card,
-          paypal,
-        },
-        style,
-      });
-      expect(container.querySelector(selectors.inlineGuest)).toBeTruthy();
-      expect(container.querySelector(selectors.poweredBy)).toBeTruthy();
-      expect(container.querySelector(selectors.tagline)).toBeFalsy();
-    });
-    it("does not render inline guest or paypal powered by if layout is horizontal", () => {
-      const container = render({
-        ...props,
-        style,
-      });
-      expect(container.querySelector(selectors.inlineGuest)).toBeFalsy();
-      expect(container.querySelector(selectors.poweredBy)).toBeFalsy();
-      expect(container.querySelector(selectors.tagline)).toBeTruthy();
-    });
-  });
-});