App Switch in New Tab

Author: Nader Chehab

dist/button.js

@@ -567,7 +567,9 @@ type ThrowErrorForInvalidButtonColorArgs = {|
 
 export type ButtonProps = {|
   // app switch properties
-  appSwitchWhenAvailable: boolean,
+  appSwitchWhenAvailable:
+    | boolean
+    | {| enabled?: boolean, mode?: "sameTab" | "newTab" |},
   listenForHashChanges: () => void,
   removeListenerForHashChanges: () => void,
   // Not passed to child iframe

dist/test/button.js

@@ -325,10 +325,44 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     },
 
     props: {
+      // New nested shape with backward compatibility.
+      // Accepts boolean (legacy) OR object { enabled, mode }
       appSwitchWhenAvailable: {
-        type: "boolean",
+        type: "object",
         queryParam: true,
         required: false,
+        validate: ({ value }) => {
+          if (
+            typeof value === "boolean" ||
+            value === null ||
+            value === undefined ||
+            typeof value === "string"
+          ) {
+            return;
+          }
+          if (typeof value === "object") {
+            // no-op: checked in value()
+            return;
+          }
+          throw new Error("Invalid appSwitchWhenAvailable value");
+        },
+        value: ({ props }) => {
+          // Backwards compatibility: if merchant passed a boolean or string,
+          // convert to nested shape with default mode 'sameTab'.
+          const { appSwitchWhenAvailable } = props;
+          if (
+            typeof appSwitchWhenAvailable === "boolean" ||
+            typeof appSwitchWhenAvailable === "string"
+          ) {
+            const enabled =
+              String(appSwitchWhenAvailable) === "true" ||
+              appSwitchWhenAvailable === true;
+            return { enabled, mode: "sameTab" };
+          }
+          // If already an object, pass through
+          return appSwitchWhenAvailable;
+        },
+        serialization: "json",
       },
 
       showPayPalAppSwitchOverlay: {
@@ -639,8 +673,15 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
       eagerOrderCreation: {
         type: "boolean",
         queryParam: true,
-        value: ({ props }) =>
-          isEagerOrderCreationEnabled(props.appSwitchWhenAvailable),
+        value: ({ props }) => {
+          const enabled = Boolean(
+            props?.appSwitchWhenAvailable &&
+              (typeof props.appSwitchWhenAvailable === "object"
+                ? props.appSwitchWhenAvailable.enabled
+                : props.appSwitchWhenAvailable)
+          );
+          return isEagerOrderCreationEnabled(enabled);
+        },
       },
 
       enableFunding: {

src/ui/buttons/props.js

@@ -39,7 +39,11 @@ export function PrerenderedButtons({
   props,
 }: PrerenderedButtonsProps): ChildType {
   const eagerOrderCreation = isEagerOrderCreationEnabled(
-    props.appSwitchWhenAvailable
+    // appSwitchWhenAvailable is now an object
+    // @ts-ignore Flow types: treat object as truthy
+    Boolean(
+      props?.appSwitchWhenAvailable && props.appSwitchWhenAvailable.enabled
+    )
   );
   let win;
   const handleClick = (