Add new tracking events and update Stripe connect library (#9607)

changelog/dev-readd-tracking-event

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Improvements to events during onboarding flow.

client/onboarding/steps/embedded-kyc.tsx

@@ -25,6 +25,10 @@ import {
 	isPoEligible,
 } from 'wcpay/onboarding/utils';
 import { getConnectUrl, getOverviewUrl } from 'wcpay/utils';
+import {
+	trackEmbeddedStepChange,
+	trackRedirected,
+} from 'wcpay/onboarding/tracking';
 
 interface Props {
 	continueKyc?: boolean;
@@ -57,6 +61,7 @@ const EmbeddedKyc: React.FC< Props > = ( {
 				isEligible
 			);
 			if ( accountSession && accountSession.clientSecret ) {
+				trackRedirected( isEligible, true );
 				return accountSession; // Return the full account session object
 			}
 
@@ -139,6 +144,10 @@ const EmbeddedKyc: React.FC< Props > = ( {
 		locale,
 	] );
 
+	const handleStepChange = ( step: string ) => {
+		trackEmbeddedStepChange( step );
+	};
+
 	const handleOnExit = async () => {
 		const urlParams = new URLSearchParams( window.location.search );
 		const urlSource =
@@ -192,6 +201,9 @@ const EmbeddedKyc: React.FC< Props > = ( {
 							)
 						}
 						onExit={ handleOnExit }
+						onStepChange={ ( stepChange ) =>
+							handleStepChange( stepChange.step )
+						}
 						collectionOptions={ {
 							fields: collectPayoutRequirements
 								? 'eventually_due'

client/onboarding/tracking.ts

@@ -46,11 +46,32 @@ export const trackStepCompleted = ( step: string ): void => {
 	trackedSteps.add( step );
 };
 
-export const trackRedirected = ( isPoEligible: boolean ): void => {
+export const trackRedirected = (
+	isPoEligible: boolean,
+	isEmbedded = false
+): void => {
 	const urlParams = new URLSearchParams( window.location.search );
 
 	recordEvent( 'wcpay_onboarding_flow_redirected', {
 		is_po_eligible: isPoEligible,
+		is_embedded_onboarding: isEmbedded,
+		elapsed: elapsed( startTime ),
+		source:
+			urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) || 'unknown',
+	} );
+};
+
+/**
+ * Track a change in the embedded onboarding step.
+ *
+ * @param step The current step in the embedded onboarding flow. See:
+ * https://docs.stripe.com/connect/supported-embedded-components/account-onboarding#step-values
+ */
+export const trackEmbeddedStepChange = ( step: string ): void => {
+	const urlParams = new URLSearchParams( window.location.search );
+
+	recordEvent( 'wcpay_onboarding_flow_embedded_step_change', {
+		step: step,
 		elapsed: elapsed( startTime ),
 		source:
 			urlParams.get( 'source' )?.replace( /[^\w-]+/g, '' ) || 'unknown',

client/tracks/event.d.ts

@@ -60,6 +60,7 @@ export type Event =
 	| 'wcpay_onboarding_flow_reset'
 	| 'wcpay_onboarding_flow_eligibility_modal_closed'
 	| 'wcpay_onboarding_flow_setup_live_payments'
+	| 'wcpay_onboarding_flow_embedded_step_change'
 	| 'wcpay_overview_balances_currency_tab_click'
 	| 'wcpay_overview_deposits_view_history_click'
 	| 'wcpay_overview_deposits_change_schedule_click'

package.json

@@ -77,8 +77,8 @@
   "dependencies": {
     "@automattic/interpolate-components": "1.2.1",
     "@fingerprintjs/fingerprintjs": "3.4.1",
-    "@stripe/connect-js": "3.3.12",
-    "@stripe/react-connect-js": "3.3.13",
+    "@stripe/connect-js": "3.3.16",
+    "@stripe/react-connect-js": "3.3.17",
     "@stripe/react-stripe-js": "2.5.1",
     "@stripe/stripe-js": "1.15.1",
     "@woocommerce/explat": "2.3.0",