Add ExPlat experiment: Payments task onboarding flow skips Connect page (#9383)

Author: vladolaru

changelog/add-9382-explat-experiment-payments-task-onboarding-flow-skips-connect-page

@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Add ExPlat experiment for Payments task originated onboarding flows.
+
+

client/onboarding/index.tsx

@@ -85,10 +85,7 @@ const initialData = {
 
 const OnboardingPage: React.FC = () => {
 	useEffect( () => {
-		const urlParams = new URLSearchParams( window.location.search );
-		const source =
-			urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) || 'unknown';
-		trackStarted( source );
+		trackStarted();
 
 		// Remove loading class and add those required for full screen.
 		document.body.classList.remove( 'woocommerce-admin-is-loading' );

client/onboarding/step.tsx

@@ -24,11 +24,7 @@ const Step: React.FC< Props > = ( { name, children, showHeading = true } ) => {
 	const { trackAbandoned } = useTrackAbandoned();
 	const { prevStep, exit } = useStepperContext();
 	const handleExit = () => {
-		const urlParams = new URLSearchParams( window.location.search );
-		const source =
-			urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) || 'unknown';
-
-		trackAbandoned( 'exit', source );
+		trackAbandoned( 'exit' );
 		exit();
 	};
 

client/onboarding/steps/embedded-kyc.tsx

@@ -132,7 +132,7 @@ const EmbeddedKyc: React.FC< Props > = ( { continueKyc = false } ) => {
 				setLoading( false );
 				setLoadErrorMessage(
 					__(
-						"Failed to create account session. Please check that you're using the latest version of WooCommerce Payments.",
+						"Failed to create account session. Please check that you're using the latest version of WooPayments.",
 						'woocommerce-payments'
 					)
 				);

client/onboarding/steps/loading.tsx

@@ -57,26 +57,26 @@ const LoadingStep: React.FC< Props > = () => {
 	const handleComplete = async () => {
 		const { connectUrl } = wcpaySettings;
 
-		const urlParams = new URLSearchParams( window.location.search );
-		const urlSource =
-			urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) || 'unknown';
-
-		let isEligible;
+		let isPoEligible;
 		try {
-			isEligible = await isEligibleForPo();
+			isPoEligible = await isEligibleForPo();
 		} catch ( error ) {
 			// fall back to full KYC scenario.
 			// TODO maybe log these errors in future, e.g. with tracks.
-			isEligible = false;
+			isPoEligible = false;
 		}
 
-		trackRedirected( isEligible, urlSource );
+		trackRedirected( isPoEligible );
 		removeTrackListener();
 
+		const urlParams = new URLSearchParams( window.location.search );
+
 		window.location.href = addQueryArgs( connectUrl, {
 			self_assessment: fromDotNotation( data ),
-			progressive: isEligible,
-			source: urlSource,
+			progressive: isPoEligible,
+			source:
+				urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) ||
+				'unknown',
 			from: 'WCPAY_ONBOARDING_WIZARD',
 		} );
 	};

client/onboarding/tracking.ts

@@ -23,11 +23,15 @@ const stepElapsed = () => {
 	return result;
 };
 
-export const trackStarted = ( source: string ): void => {
+export const trackStarted = (): void => {
+	// Initialize the elapsed time tracking
 	startTime = stepStartTime = Date.now();
 
+	const urlParams = new URLSearchParams( window.location.search );
+
 	recordEvent( 'wcpay_onboarding_flow_started', {
-		source,
+		source:
+			urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) || 'unknown',
 	} );
 };
 
@@ -42,14 +46,14 @@ export const trackStepCompleted = ( step: string ): void => {
 	trackedSteps.add( step );
 };
 
-export const trackRedirected = (
-	isEligible: boolean,
-	source: string
-): void => {
+export const trackRedirected = ( isPoEligible: boolean ): void => {
+	const urlParams = new URLSearchParams( window.location.search );
+
 	recordEvent( 'wcpay_onboarding_flow_redirected', {
-		is_po_eligible: isEligible,
+		is_po_eligible: isPoEligible,
 		elapsed: elapsed( startTime ),
-		source,
+		source:
+			urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) || 'unknown',
 	} );
 };
 
@@ -66,13 +70,13 @@ export const trackEligibilityModalClosed = (
 	} );
 
 export const useTrackAbandoned = (): {
-	trackAbandoned: ( method: 'hide' | 'exit', source: string ) => void;
+	trackAbandoned: ( method: 'hide' | 'exit' ) => void;
 	removeTrackListener: () => void;
 } => {
 	const { errors, touched } = useOnboardingContext();
 	const { currentStep: step } = useStepperContext();
 
-	const trackEvent = ( method = 'hide', source = 'unknown' ) => {
+	const trackEvent = ( method = 'hide' ) => {
 		const event =
 			method === 'hide'
 				? 'wcpay_onboarding_flow_hidden'
@@ -81,21 +85,21 @@ export const useTrackAbandoned = (): {
 			( field ) => touched[ field as keyof OnboardingFields ]
 		);
 
+		const urlParams = new URLSearchParams( window.location.search );
+
 		recordEvent( event, {
 			step,
 			errored,
 			elapsed: elapsed( startTime ),
-			source,
+			source:
+				urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) ||
+				'unknown',
 		} );
 	};
 
 	const listener = () => {
 		if ( document.visibilityState === 'hidden' ) {
-			const urlParams = new URLSearchParams( window.location.search );
-			const source =
-				urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) ||
-				'unknown';
-			trackEvent( 'hide', source );
+			trackEvent( 'hide' );
 		}
 	};
 
@@ -108,8 +112,8 @@ export const useTrackAbandoned = (): {
 	}, [ step, errors, touched ] );
 
 	return {
-		trackAbandoned: ( method: string, source = 'unknown' ) => {
-			trackEvent( method, source );
+		trackAbandoned: ( method: string ) => {
+			trackEvent( method );
 			document.removeEventListener( 'visibilitychange', listener );
 		},
 		removeTrackListener: () =>

client/utils/index.js

@@ -310,3 +310,15 @@ export const getExportLanguageOptions = () => {
 		},
 	];
 };
+
+/**
+ * Given an object, remove all properties with null or undefined values.
+ *
+ * @param {Object} obj The object to remove empty properties from.
+ * @return {Object|any} A new object with all properties with null or undefined values removed.
+ */
+export const objectRemoveEmptyProperties = ( obj ) => {
+	return Object.keys( obj )
+		.filter( ( k ) => obj[ k ] !== null && obj[ k ] !== undefined )
+		.reduce( ( a, k ) => ( { ...a, [ k ]: obj[ k ] } ), {} );
+};

includes/class-wc-payments-account.php

@@ -899,8 +899,9 @@ public function maybe_redirect_from_onboarding_wizard_page(): bool {
 	}
 
 	/**
-	 * Redirects connect page (payments/connect) to the overview page for stores that
-	 * have a working Jetpack connection and a valid Stripe account.
+	 * Maybe redirects the connect page (payments/connect)
+	 *
+	 * We redirect to the overview page for stores that have a working Jetpack connection and a valid Stripe account.
 	 *
 	 * Note: Connect _page_ links are not the same as connect links.
 	 *       Connect links are used to start/re-start/continue the onboarding flow and they are independent of
@@ -953,6 +954,28 @@ public function maybe_redirect_from_connect_page(): bool {
 			return true;
 		}
 
+		// Determine from where the merchant was directed to the Connect page.
+		$from = WC_Payments_Onboarding_Service::get_from();
+
+		// If the user came from the core Payments task list item,
+		// we run an experiment to skip the Connect page
+		// and go directly to the Jetpack connection flow and/or onboarding wizard.
+		if ( WC_Payments_Onboarding_Service::FROM_WCADMIN_PAYMENTS_TASK === $from
+			&& WC_Payments_Utils::is_in_core_payments_task_onboarding_flow_treatment_mode() ) {
+
+			// We use a connect link to allow our logic to determine what comes next:
+			// the Jetpack connection setup and/or onboarding wizard (MOX).
+			$this->redirect_service->redirect_to_wcpay_connect(
+				// The next step should treat the merchant as coming from the Payments task list item,
+				// not the Connect page.
+				WC_Payments_Onboarding_Service::FROM_WCADMIN_PAYMENTS_TASK,
+				[
+					'source' => WC_Payments_Onboarding_Service::get_source(),
+				]
+			);
+			return true;
+		}
+
 		return false;
 	}
 
@@ -1274,7 +1297,9 @@ public function maybe_handle_onboarding() {
 							'WooPayments'
 						),
 						WC_Payments_Onboarding_Service::FROM_WPCOM_CONNECTION,
-						[ 'source' => $onboarding_source ]
+						[
+							'source' => $onboarding_source,
+						]
 					);
 
 					return;
@@ -1315,11 +1340,18 @@ public function maybe_handle_onboarding() {
 					$from,
 					[
 						WC_Payments_Onboarding_Service::FROM_WCADMIN_PAYMENTS_SETTINGS,
-						WC_Payments_Onboarding_Service::FROM_WCADMIN_PAYMENTS_TASK,
 						WC_Payments_Onboarding_Service::FROM_STRIPE,
 					],
 					true
 				)
+				/**
+				 * We are running an experiment to skip the Connect page for Payments Task flows.
+				 * Only redirect to the Connect page if the user is not in the experiment's treatment mode.
+				 *
+				 * @see self::maybe_redirect_from_connect_page()
+				 */
+				|| ( WC_Payments_Onboarding_Service::FROM_WCADMIN_PAYMENTS_TASK === $from
+					&& ! WC_Payments_Utils::is_in_core_payments_task_onboarding_flow_treatment_mode() )
 				// This is a weird case, but it is best to handle it.
 				|| ( WC_Payments_Onboarding_Service::FROM_ONBOARDING_WIZARD === $from && ! $this->has_working_jetpack_connection() )
 			) {
@@ -1376,7 +1408,9 @@ public function maybe_handle_onboarding() {
 				/* translators: %s: error message. */
 					sprintf( __( 'There was a problem connecting your store to WordPress.com: "%s"', 'woocommerce-payments' ), $e->getMessage() ),
 					WC_Payments_Onboarding_Service::FROM_WPCOM_CONNECTION,
-					[ 'source' => $onboarding_source ]
+					[
+						'source' => $onboarding_source,
+					]
 				);
 				return;
 			}
@@ -1392,7 +1426,9 @@ public function maybe_handle_onboarding() {
 					// When we redirect to the onboarding wizard, we carry over the `from`, if we have it.
 					// This is because there is no interim step between the user clicking the connect link and the onboarding wizard.
 					! empty( $from ) ? $from : $next_step_from,
-					[ 'source' => $onboarding_source ]
+					[
+						'source' => $onboarding_source,
+					]
 				);
 				return;
 			}
@@ -1516,7 +1552,9 @@ public function maybe_handle_onboarding() {
 						'WooPayments'
 					),
 					null,
-					[ 'source' => $onboarding_source ]
+					[
+						'source' => $onboarding_source,
+					]
 				);
 				return;
 			}
@@ -1984,16 +2022,16 @@ private function finalize_connection( string $state, string $mode, array $additi
 		update_option( '_wcpay_onboarding_stripe_connected', [ 'is_existing_stripe_account' => false ] );
 
 		// Track account connection finish.
-		$incentive_id     = ! empty( $_GET['promo'] ) ? sanitize_text_field( wp_unslash( $_GET['promo'] ) ) : '';
-		$event_properties = [
+		$incentive_id = ! empty( $_GET['promo'] ) ? sanitize_text_field( wp_unslash( $_GET['promo'] ) ) : '';
+		$tracks_props = [
 			'incentive' => $incentive_id,
 			'mode'      => 'live' !== $mode ? 'test' : 'live',
 			'from'      => $additional_args['from'] ?? '',
 			'source'    => $additional_args['source'] ?? '',
 		];
 		$this->tracks_event(
 			self::TRACKS_EVENT_ACCOUNT_CONNECT_FINISHED,
-			$event_properties
+			$tracks_props
 		);
 
 		$params = $additional_args;

includes/class-wc-payments-redirect-service.php

@@ -49,22 +49,23 @@ public function redirect_to( string $location ): void {
 	}
 
 	/**
-	 * Redirects to the wcpay-connect URL, which then redirects to the KYC flow.
+	 * Redirects to a wcpay-connect URL which then handles the next step for the onboarding flow.
 	 *
-	 * This URL is used by the KYC reminder email. We can't take the merchant
-	 * directly to the wcpay-connect URL because it's nonced, and the
-	 * nonce will likely be expired by the time the user follows the link.
-	 * That's why we need this middleman instead.
+	 * This is a sure way to ensure that the user is redirected to the correct URL to continue their onboarding.
 	 *
-	 * @param string $from Source of the redirect.
+	 * @param string $from              Source of the redirect.
+	 * @param array  $additional_params Optional. Additional URL params to add to the redirect URL.
 	 */
-	public function redirect_to_wcpay_connect( string $from = '' ): void {
+	public function redirect_to_wcpay_connect( string $from = '', array $additional_params = [] ): void {
 		// Take the user to the 'wcpay-connect' URL.
 		// We handle creating and redirecting to the account link there.
 		$params = [
 			'wcpay-connect' => '1',
 			'_wpnonce'      => wp_create_nonce( 'wcpay-connect' ),
 		];
+
+		$params = array_merge( $params, $additional_params );
+
 		if ( '' !== $from ) {
 			$params['from'] = $from;
 		}

includes/class-wc-payments-utils.php

@@ -910,6 +910,25 @@ public static function get_last_refund_from_order_id( $order_id ) {
 		return null;
 	}
 
+	/**
+	 * Check to see if the current user is in Core Payments task onboarding flow experiment treatment mode.
+	 *
+	 * @return bool
+	 */
+	public static function is_in_core_payments_task_onboarding_flow_treatment_mode(): bool {
+		if ( ! isset( $_COOKIE['tk_ai'] ) ) {
+			return false;
+		}
+
+		$abtest = new \WCPay\Experimental_Abtest(
+			sanitize_text_field( wp_unslash( $_COOKIE['tk_ai'] ) ),
+			'woocommerce',
+			'yes' === get_option( 'woocommerce_allow_tracking', 'no' )
+		);
+
+		return 'treatment' === $abtest->get_variation( 'woopayments_core_payments_task_onboarding_flow_2024_v1' );
+	}
+
 	/**
 	 * Helper function to check whether to show default new onboarding flow or as an exception disable it (if specific constant is set) .
 	 *