@paypal/checkout-components 5.0.266 → 5.0.267

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.266",
+  "version": "5.0.267",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "debug": "cross-env NODE_ENV=debug",
     "delete-size": "rm dist/size.* dist/report.html",
     "demo": "serve ./demo -l 1337",
-    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open demo/dev/index.htm --https --hot=false --static './'",
+    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open /index.htm --https --hot=false --static './demo/dev'",
     "eslint-find-rules": "eslint-find-rules --current .eslintrc.js --unused --plugin",
     "flow": "flow",
     "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",

package/src/constants/button.js

@@ -62,7 +62,3 @@ export const MENU_PLACEMENT = {
   ABOVE: ("above": "above"),
   BELOW: ("below": "below"),
 };
-
-export const EXPERIENCE = {
-  INLINE: ("inline": "inline"),
-};

package/src/constants/class.js

@@ -41,6 +41,4 @@ export const CLASS = {
   HIDDEN: ("hidden": "hidden"),
 
   IMMEDIATE: ("immediate": "immediate"),
-
-  CUSTOM: ("custom": "custom"),
 };

package/src/declarations.js

@@ -20,10 +20,5 @@ declare var __PAYPAL_CHECKOUT__: {|
   |},
 |};
 
-declare var __INLINE_CHECKOUT_ELIGIBILITY__: {|
-  eligible: boolean,
-  ineligibilityReason: string,
-|};
-
 declare var __WEB__: boolean;
 declare var __TREE_SHAKE__: boolean;

package/src/funding/card/config.jsx

@@ -156,32 +156,7 @@ export function getCardConfig(): FundingSourceConfig {
       );
     },
 
-    Label: ({ logo, locale, content, custom }) => {
-      if (custom && custom.label && custom.label.length) {
-        const validLabels = {
-          buy: "Buy",
-          checkout: "Checkout",
-          pay: "Pay",
-          "buy now": "Buy Now",
-          "pay now": "Pay Now",
-          "checkout now": "Checkout Now",
-          "proceed to checkout": "Proceed to checkout",
-        };
-
-        let label = validLabels.checkout;
-
-        const lowerCaseLabel = custom.label.toLowerCase();
-        if (validLabels[lowerCaseLabel]) {
-          label = validLabels[lowerCaseLabel];
-        }
-
-        return (
-          <Fragment>
-            <Text>{label}</Text>
-            <Space />
-          </Fragment>
-        );
-      }
+    Label: ({ logo, locale, content }) => {
       const { lang } = locale;
       const isRTL = isRTLLanguage(lang);
       return (

package/src/funding/common.jsx

@@ -17,7 +17,6 @@ import { LOGO_COLOR } from "@paypal/sdk-logos/src";
 
 import type {
   ContentType,
-  CustomStyle,
   WalletInstrument,
   Experiment,
   Requires,
@@ -71,7 +70,6 @@ export type LabelOptions = {|
   tagline: ?boolean,
   content: ?ContentType,
   experiment?: Experiment,
-  custom?: ?CustomStyle,
 |};
 
 export type DesignExperimentLabelOptions = {|

package/src/types.js

@@ -62,13 +62,6 @@ export type Requires = {|
   native?: boolean,
 |};
 
-export type CustomStyle = {|
-  css?: {|
-    [string]: string,
-  |},
-  label?: string,
-|};
-
 export type LazyExport<T> = {|
   __get__: () => T,
 |};
@@ -76,8 +69,3 @@ export type LazyExport<T> = {|
 export type LazyProtectedExport<T> = {|
   __get__: () => ?T,
 |};
-
-export type InlineXOEligibilityType = {|
-  eligible: boolean,
-  ineligibilityReason: string,
-|};

package/src/ui/buttons/button.jsx

@@ -23,7 +23,6 @@ import {
   CLASS,
   BUTTON_COLOR,
   BUTTON_NUMBER,
-  EXPERIENCE,
   TEXT_COLOR,
   BUTTON_FLOW,
 } from "../../constants";
@@ -65,7 +64,6 @@ type IndividualButtonProps = {|
   vault: boolean,
   merchantFundingSource: ?$Values<typeof FUNDING>,
   instrument: ?WalletInstrument,
-  experience?: string,
   showPayLabel: boolean,
 |};
 
@@ -88,12 +86,10 @@ export function Button({
   commit,
   experiment,
   instrument,
-  experience,
   showPayLabel,
 }: IndividualButtonProps): ElementNode {
-  const { custom, layout, shape } = style;
-  const inlineExperience =
-    experience === EXPERIENCE.INLINE && custom && custom.label;
+  const { layout, shape } = style;
+
   const fundingConfig = getFundingConfig()[fundingSource];
 
   if (!fundingConfig) {
@@ -193,7 +189,6 @@ export function Button({
       personalization={personalization}
       tagline={tagline}
       content={content}
-      custom={inlineExperience ? custom : undefined}
       experiment={experiment}
     />
   );
@@ -266,7 +261,6 @@ export function Button({
     <div
       class={[
         CLASS.BUTTON_ROW,
-        inlineExperience && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : "",
         `${CLASS.NUMBER}-${i}`,
         `${CLASS.LAYOUT}-${layout}`,
         `${CLASS.SHAPE}-${shape}`,
@@ -299,9 +293,6 @@ export function Button({
         }}
         class={[
           CLASS.BUTTON,
-          inlineExperience && fundingSource === FUNDING.CARD
-            ? CLASS.CUSTOM
-            : "",
           `${CLASS.NUMBER}-${i}`,
           `${CLASS.LAYOUT}-${layout}`,
           `${CLASS.SHAPE}-${shape}`,

package/src/ui/buttons/buttons.jsx

@@ -15,7 +15,6 @@ import {
   BUTTON_NUMBER,
   BUTTON_LAYOUT,
   BUTTON_FLOW,
-  EXPERIENCE,
 } from "../../constants";
 import {
   determineEligibleFunding,
@@ -177,16 +176,9 @@ export function Buttons(props: ButtonsProps): ElementNode {
     applePaySupport,
     supportsPopups,
     supportedNativeBrowser,
-    experience,
     showPayLabel,
   } = normalizeButtonProps(props);
-  const { custom, layout, shape, tagline } = style;
-
-  const inlineExperience =
-    experience === EXPERIENCE.INLINE &&
-    custom &&
-    custom.label &&
-    custom.label.length !== 0;
+  const { layout, shape, tagline } = style;
 
   let fundingSources = determineEligibleFunding({
     fundingSource,
@@ -216,17 +208,10 @@ export function Buttons(props: ButtonsProps): ElementNode {
   }
 
   if (fundingSources.indexOf(FUNDING.CARD) !== -1) {
-    if (inlineExperience) {
-      fundingSources = [
-        FUNDING.CARD,
-        ...fundingSources.filter((src) => src !== FUNDING.CARD),
-      ];
-    } else {
-      fundingSources = [
-        ...fundingSources.filter((src) => src !== FUNDING.CARD),
-        FUNDING.CARD,
-      ];
-    }
+    fundingSources = [
+      ...fundingSources.filter((src) => src !== FUNDING.CARD),
+      FUNDING.CARD,
+    ];
   }
 
   const isAPM = fundingSources.some((src) => {
@@ -248,16 +233,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
 
   const { buttonDesignScript = "" } = getButtonDesign(personalization);
   const index = (i) => {
-    if (!inlineExperience) {
-      return i;
-    }
-
-    // InlineXO: Need to change color indexing because we bring Cards to the top
-    if (i === 0) {
-      return fundingSources.length - 1;
-    } else {
-      return i - 1;
-    }
+    return i;
   };
 
   return (
@@ -304,7 +280,6 @@ export function Buttons(props: ButtonsProps): ElementNode {
           flow={flow}
           vault={vault}
           instrument={instruments[source]}
-          experience={experience}
           showPayLabel={showPayLabel}
         />
       ))}
@@ -332,8 +307,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
       ) : null}
 
       {layout === BUTTON_LAYOUT.VERTICAL &&
-      fundingSources.indexOf(FUNDING.CARD) !== -1 &&
-      !inlineExperience ? (
+      fundingSources.indexOf(FUNDING.CARD) !== -1 ? (
         <PoweredByPayPal locale={locale} nonce={nonce} />
       ) : null}
 

package/src/ui/buttons/props.js

@@ -30,7 +30,7 @@ import { LOGO_COLOR } from "@paypal/sdk-logos/src";
 import { SUPPORTED_FUNDING_SOURCES } from "@paypal/funding-components/src";
 import type { ComponentFunctionType } from "@krakenjs/jsx-pragmatic/src";
 
-import type { ContentType, CustomStyle, Wallet, Experiment } from "../../types";
+import type { ContentType, Wallet, Experiment } from "../../types";
 import {
   BUTTON_LABEL,
   BUTTON_COLOR,
@@ -317,7 +317,6 @@ export type ButtonStyle = {|
   menuPlacement: $Values<typeof MENU_PLACEMENT>,
   period?: number,
   height?: number,
-  custom?: ?CustomStyle,
 |};
 
 export type ButtonStyleInputs = {|
@@ -328,7 +327,6 @@ export type ButtonStyleInputs = {|
   layout?: $Values<typeof BUTTON_LAYOUT> | void,
   period?: number | void,
   height?: number | void,
-  custom?: ?CustomStyle,
 |};
 
 type PersonalizationComponentProps = {|
@@ -459,7 +457,6 @@ export type RenderButtonProps = {|
   applePaySupport: boolean,
   supportsPopups: boolean,
   supportedNativeBrowser: boolean,
-  experience: string,
   showPayLabel: boolean,
 |};
 
@@ -516,7 +513,6 @@ export type ButtonProps = {|
   applePay: ApplePaySessionConfigRequest,
   meta: {||},
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
-  experience: string,
   createVaultSetupToken: CreateVaultSetupToken,
 |};
 
@@ -557,7 +553,6 @@ export type ButtonPropsInputs = {
   applePaySupport: boolean,
   supportsPopups: boolean,
   supportedNativeBrowser: boolean,
-  experience: string,
   showPayLabel: boolean,
 };
 
@@ -615,7 +610,6 @@ export function normalizeButtonStyle(
     height,
     period,
     menuPlacement = MENU_PLACEMENT.BELOW,
-    custom,
   } = style;
 
   // $FlowFixMe
@@ -678,32 +672,7 @@ export function normalizeButtonStyle(
     }
   }
 
-  if (custom) {
-    if (custom.label && typeof custom.label !== "string") {
-      throw new Error(`style.custom.label is expected to be a String.`);
-    }
-
-    if (custom.css && typeof custom.css !== "object") {
-      throw new Error(`style.custom.css is expected to be JSON.`);
-    }
-
-    if (custom.css && custom.label && custom.label.length === 0) {
-      throw new Error(
-        `Expected style.custom.label to be used with style.custom.css`
-      );
-    }
-
-    if (custom.label && custom.label.length > 0 && !custom.css) {
-      custom.css = {
-        "background-color": "black",
-        height: "48px",
-        "margin-bottom": "15px",
-      };
-    }
-  }
-
   return {
-    custom,
     label,
     layout,
     color,
@@ -766,7 +735,6 @@ export function normalizeButtonProps(
     applePaySupport = false,
     supportsPopups = false,
     supportedNativeBrowser = false,
-    experience = "",
     showPayLabel = true,
   } = props;
 
@@ -854,7 +822,6 @@ export function normalizeButtonProps(
     applePaySupport,
     supportsPopups,
     supportedNativeBrowser,
-    experience,
     showPayLabel,
   };
 }

package/src/ui/buttons/style.jsx

@@ -18,8 +18,8 @@ export function Style({
   nonce,
   fundingEligibility,
 }: StyleProps): ElementNode {
-  const { custom = { label: undefined, css: undefined }, height } = style;
-  const css = componentStyle({ custom, height, fundingEligibility });
+  const { height } = style;
+  const css = componentStyle({ height, fundingEligibility });
 
   return <style nonce={nonce} innerHTML={css} />;
 }

package/src/ui/buttons/styles/base.js

@@ -2,21 +2,16 @@
 
 import { type FundingEligibilityType } from "@paypal/sdk-constants/src";
 
-import type { CustomStyle } from "../../../types";
-
 import { pageStyle } from "./page";
 import { buttonStyle } from "./button";
 import { labelStyle } from "./labels";
 import { buttonResponsiveStyle } from "./responsive";
 import { buttonColorStyle } from "./color";
-import { customStyle } from "./custom";
 
 export function componentStyle({
-  custom,
   height,
   fundingEligibility,
 }: {|
-  custom?: ?CustomStyle,
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
 |}): string {
@@ -26,6 +21,5 @@ export function componentStyle({
         ${buttonColorStyle}
         ${labelStyle}
         ${buttonResponsiveStyle({ height, fundingEligibility })}
-        ${customStyle({ custom })}
     `;
 }

package/src/zoid/buttons/component.jsx

@@ -70,8 +70,6 @@ import {
 } from "../../lib";
 import { normalizeButtonStyle, type ButtonProps } from "../../ui/buttons/props";
 import { isFundingEligible } from "../../funding";
-import { EXPERIENCE } from "../../constants";
-import { type InlineXOEligibilityType } from "../../types";
 
 import { containerTemplate } from "./container";
 import { PrerenderedButtons } from "./prerender";
@@ -83,7 +81,6 @@ import {
   getRenderedButtons,
   getButtonSize,
   getButtonExperiments,
-  isInlineXOEligible,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
@@ -798,53 +795,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: applePaySession,
       },
 
-      experience: {
-        queryParam: true,
-        required: false,
-        type: "string",
-        value: ({ props }) => {
-          const {
-            commit,
-            createBillingAgreement,
-            currency,
-            disableFunding = [],
-            experience,
-            fundingEligibility,
-            onComplete,
-            style: { custom = {}, layout },
-            vault,
-          } = props || {};
-
-          if (experience === "accelerated") {
-            return EXPERIENCE.INLINE;
-          }
-
-          const inlineCheckoutEligibility: InlineXOEligibilityType =
-            __INLINE_CHECKOUT_ELIGIBILITY__ || {
-              eligible: false,
-            };
-
-          const eligible =
-            inlineCheckoutEligibility &&
-            inlineCheckoutEligibility.eligible &&
-            isInlineXOEligible({
-              props: {
-                commit,
-                createBillingAgreement,
-                currency,
-                custom,
-                disableFunding,
-                fundingEligibility,
-                layout,
-                onComplete,
-                vault,
-              },
-            });
-
-          return eligible ? EXPERIENCE.INLINE : "";
-        },
-      },
-
       // allowBillingPayments prop is used by Honey Extension to render the one-click button
       // with payment methods & to use the payment methods instead of the Billing Agreement
       allowBillingPayments: {

package/src/zoid/buttons/prerender.jsx

@@ -17,7 +17,6 @@ import { getLogger } from "@paypal/sdk-client/src";
 import type { ZoidProps } from "@krakenjs/zoid/src";
 
 import { DEFAULT_POPUP_SIZE } from "../checkout";
-import { EXPERIENCE } from "../../constants";
 import { Buttons } from "../../ui";
 import { type ButtonProps } from "../../ui/buttons/props";
 
@@ -59,11 +58,7 @@ export function PrerenderedButtons({
       })
       .flush();
 
-    if (
-      fundingSource === FUNDING.VENMO ||
-      fundingSource === FUNDING.APPLEPAY ||
-      (fundingSource === FUNDING.CARD && props.experience === EXPERIENCE.INLINE)
-    ) {
+    if (fundingSource === FUNDING.VENMO || fundingSource === FUNDING.APPLEPAY) {
       // wait for button to load
     } else if (supportsPopups() && !props.merchantRequestedPopupsDisabled) {
       // remember the popup window to prevent showing a new popup window on every click in the prerender state

package/src/zoid/buttons/util.js

@@ -15,7 +15,7 @@ import {
   isStandAlone,
   once,
 } from "@krakenjs/belter/src";
-import { CURRENCY, ENV, FUNDING } from "@paypal/sdk-constants/src";
+import { ENV, FUNDING } from "@paypal/sdk-constants/src";
 import {
   getEnableFunding,
   getLogger,
@@ -24,7 +24,6 @@ import {
   getPlatform,
   getComponents,
   getEnv,
-  type FundingEligibilityType,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -374,52 +373,3 @@ export function getButtonSize(
     }
   }
 }
-
-type InlineCheckoutEligibilityProps = {|
-  commit: boolean,
-  createBillingAgreement?: Function,
-  currency: string,
-  disableFunding: $ReadOnlyArray<$Values<typeof FUNDING>>,
-  fundingEligibility: FundingEligibilityType,
-  layout: $Values<typeof BUTTON_LAYOUT>,
-  merchantID?: $ReadOnlyArray<string>,
-  onComplete: Function,
-  custom?: ?{|
-    css?: {|
-      [string]: string,
-    |},
-    label?: string,
-  |},
-  vault: boolean,
-|};
-
-export function isInlineXOEligible({
-  props,
-}: {|
-  props: InlineCheckoutEligibilityProps,
-|}): boolean {
-  const {
-    commit,
-    currency,
-    custom,
-    createBillingAgreement,
-    disableFunding,
-    fundingEligibility,
-    layout,
-    onComplete,
-    vault,
-  } = props;
-
-  const isEligible =
-    (custom?.label && custom.label.length > 0,
-    onComplete &&
-      commit === true &&
-      !createBillingAgreement &&
-      currency === CURRENCY.USD &&
-      disableFunding?.indexOf(FUNDING.CARD) === -1 &&
-      (fundingEligibility?.card?.eligible || false) &&
-      layout === BUTTON_LAYOUT.VERTICAL &&
-      vault === false);
-
-  return isEligible;
-}

package/src/zoid/checkout/component.jsx

@@ -75,7 +75,6 @@ export function getCheckoutComponent(): CheckoutComponent {
         const {
           nonce,
           locale: { lang },
-          inlinexo,
         } = props;
         const content = containerContent[lang];
         return (
@@ -88,7 +87,6 @@ export function getCheckoutComponent(): CheckoutComponent {
             prerenderFrame={prerenderFrame}
             content={content}
             nonce={nonce}
-            fullScreen={inlinexo === true}
           />
         ).render(dom({ doc }));
       },
@@ -279,13 +277,6 @@ export function getCheckoutComponent(): CheckoutComponent {
           default: () => window.__test__ || { action: "checkout" },
         },
 
-        inlinexo: {
-          type: "boolean",
-          required: false,
-          queryParam: true,
-          allowDelegate: true,
-        },
-
         smokeHash: {
           type: "string",
           required: false,

package/src/zoid/checkout/props.js

@@ -39,5 +39,4 @@ export type CheckoutPropsType = {|
   csp: {|
     nonce: string,
   |},
-  inlinexo: boolean,
 |};

package/src/ui/buttons/styles/custom.js

@@ -1,37 +0,0 @@
-/* @flow */
-
-import type { CustomStyle } from "../../../types";
-import { CLASS } from "../../../constants";
-
-export const customStyle = ({
-  custom,
-}: {|
-  custom?: ?CustomStyle,
-|}): string => {
-  const { css } = custom || {};
-
-  if (!css) {
-    return "";
-  }
-
-  let heightStyle = "";
-  let marginStyle = "";
-  let style = Object.keys(css).reduce((acc, key) => {
-    if (key === "height") {
-      heightStyle = `
-                    height: ${css[key]};
-                    max-height: ${css[key]};
-            `;
-    } else if (key.indexOf("margin") !== -1) {
-      marginStyle = `${key}: ${css[key]};`;
-    }
-
-    acc += `${key}: ${css[key]};`;
-    return acc;
-  }, "");
-  style = `.${CLASS.BUTTON}.${CLASS.CUSTOM} { ${style} } .${CLASS.BUTTON_ROW}.${
-    CLASS.CUSTOM
-  } { ${heightStyle + marginStyle}}`;
-
-  return style;
-};