@paypal/checkout-components 5.0.358 → 5.0.359

package/package.json

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

package/src/types.js

@@ -67,6 +67,7 @@ export type Experiment = {|
   isPaypalRebrandEnabled?: boolean,
   defaultBlueButtonColor?: $Values<typeof BUTTON_COLOR>,
   venmoEnableWebOnNonNativeBrowser?: boolean,
+  spbEagerOrderCreation?: boolean,
 |};
 
 export type Requires = {|

package/src/ui/buttons/button.jsx

@@ -71,6 +71,7 @@ type IndividualButtonProps = {|
   merchantFundingSource: ?$Values<typeof FUNDING>,
   instrument: ?WalletInstrument,
   showPayLabel: boolean,
+  showLoadingSpinner?: boolean,
 |};
 
 export function Button({
@@ -95,6 +96,7 @@ export function Button({
   tagline,
   userIDToken,
   vault,
+  showLoadingSpinner = false,
 }: IndividualButtonProps): ElementNode {
   const { layout, shape, borderRadius } = style;
   const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
@@ -307,6 +309,7 @@ export function Button({
         }}
         class={[
           CLASS.BUTTON,
+          `${showLoadingSpinner ? CLASS.LOADING : ""}`,
           `${CLASS.NUMBER}-${i}`,
           `${CLASS.LAYOUT}-${layout}`,
           `${CLASS.NUMBER}-${

package/src/ui/buttons/buttons.jsx

@@ -127,6 +127,7 @@ function getWalletInstruments({
 type ButtonsProps = ButtonPropsInputs & {|
   onClick?: Function,
   wallet?: ?Wallet,
+  showLoadingSpinner?: boolean,
 |};
 
 export function validateButtonProps(props: ButtonPropsInputs) {
@@ -134,7 +135,7 @@ export function validateButtonProps(props: ButtonPropsInputs) {
 }
 
 export function Buttons(props: ButtonsProps): ElementNode {
-  const { onClick = noop } = props;
+  const { onClick = noop, showLoadingSpinner = false } = props;
   const {
     applePaySupport,
     buyerCountry,
@@ -289,6 +290,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
           vault={vault}
           instrument={instruments[source]}
           showPayLabel={showPayLabel}
+          showLoadingSpinner={showLoadingSpinner}
         />
       ))}
 

package/src/ui/buttons/props.js

@@ -512,7 +512,7 @@ type HidePayPalAppSwitchOverlay = {|
 
 export type ButtonProps = {|
   // app switch properties
-  appSwitchWhenAvailable: string,
+  appSwitchWhenAvailable: boolean,
   listenForHashChanges: () => void,
   removeListenerForHashChanges: () => void,
   // Not passed to child iframe

package/src/zoid/buttons/component.jsx

@@ -102,6 +102,7 @@ import {
   getButtonExperiments,
   getModal,
   sendPostRobotMessageToButtonIframe,
+  isEagerOrderCreationEnabled,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<
@@ -613,6 +614,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
+      eagerOrderCreation: {
+        type: "boolean",
+        queryParam: true,
+        value: ({ props }) =>
+          isEagerOrderCreationEnabled(props.appSwitchWhenAvailable),
+      },
+
       enableFunding: {
         type: "array",
         queryParam: true,

package/src/zoid/buttons/prerender.jsx

@@ -20,6 +20,8 @@ import { DEFAULT_POPUP_SIZE } from "../checkout";
 import { Buttons } from "../../ui";
 import { type ButtonProps } from "../../ui/buttons/props";
 
+import { isEagerOrderCreationEnabled } from "./util";
+
 type PrerenderedButtonsProps = {|
   nonce: ?string,
   props: ZoidProps<ButtonProps>,
@@ -36,6 +38,9 @@ export function PrerenderedButtons({
   onRenderCheckout,
   props,
 }: PrerenderedButtonsProps): ChildType {
+  const eagerOrderCreation = isEagerOrderCreationEnabled(
+    props.appSwitchWhenAvailable
+  );
   let win;
   const handleClick = (
     // eslint-disable-next-line no-undef
@@ -52,6 +57,7 @@ export function PrerenderedButtons({
       .info("paypal_js_sdk_v5_button_prerender_click", {
         fundingSource,
         card,
+        eagerOrderCreation: String(eagerOrderCreation),
         buttonsSessionID: props.buttonSessionID,
       })
       .track({
@@ -62,6 +68,11 @@ export function PrerenderedButtons({
         [FPTI_KEY.CHOSEN_FUNDING]: fundingSource,
       });
 
+    if (eagerOrderCreation) {
+      // Pass this click. The buttons are rendered in disabled state
+      return;
+    }
+
     if (fundingSource === FUNDING.VENMO || fundingSource === FUNDING.APPLEPAY) {
       // wait for button to load
     } else if (supportsPopups() && !props.merchantRequestedPopupsDisabled) {
@@ -96,7 +107,11 @@ export function PrerenderedButtons({
     <html>
       <body>
         {/* $FlowFixMe */}
-        <Buttons {...props} onClick={handleClick} />
+        <Buttons
+          {...props}
+          onClick={handleClick}
+          showLoadingSpinner={eagerOrderCreation}
+        />
       </body>
     </html>
   );

package/src/zoid/buttons/util.js

@@ -8,6 +8,7 @@ import {
   isSafari,
   type Experiment,
   isDevice,
+  isWebView,
   isTablet,
   getElement,
   isStandAlone,
@@ -455,3 +456,15 @@ export const sendPostRobotMessageToButtonIframe = ({
     }
   }
 };
+
+export const isEagerOrderCreationEnabled = (
+  appSwitchWhenAvailable: boolean
+): boolean => {
+  const experiment = getButtonExperiments();
+  return Boolean(
+    !isWebView() &&
+      isDevice() &&
+      appSwitchWhenAvailable &&
+      experiment.spbEagerOrderCreation
+  );
+};