Add tracks events to Jetpack logged-out checkout. (#53678)

client/my-sites/checkout/checkout-system-decider.js

@@ -41,6 +41,7 @@ export default function CheckoutSystemDecider( {
 	isJetpackCheckout,
 	jetpackSiteSlug,
 	jetpackPurchaseToken,
+	isUserComingFromLoginForm,
 } ) {
 	const reduxDispatch = useDispatch();
 	const translate = useTranslate();
@@ -133,6 +134,7 @@ export default function CheckoutSystemDecider( {
 							isJetpackCheckout={ isJetpackCheckout }
 							jetpackSiteSlug={ jetpackSiteSlug }
 							jetpackPurchaseToken={ jetpackPurchaseToken }
+							isUserComingFromLoginForm={ isUserComingFromLoginForm }
 						/>
 					</StripeHookProvider>
 				</CalypsoShoppingCartProvider>

client/my-sites/checkout/composite-checkout/components/wp-checkout.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React, { useEffect, useState, useCallback } from 'react';
+import { useDispatch as useReduxDispatch } from 'react-redux';
 import { useTranslate } from 'i18n-calypso';
 import {
 	Checkout,
@@ -57,6 +58,7 @@ import {
 	hasTransferProduct,
 } from 'calypso/lib/cart-values/cart-items';
 import { addQueryArgs } from 'calypso/lib/route';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import PaymentMethodStep from './payment-method-step';
 import CheckoutHelpLink from './checkout-help-link';
 import type { CountryListItem } from '../types/country-list-item';
@@ -161,6 +163,7 @@ export default function WPCheckout( {
 	const total = useTotal();
 	const activePaymentMethod = usePaymentMethod();
 	const onEvent = useEvents();
+	const reduxDispatch = useReduxDispatch();
 
 	const areThereDomainProductsInCart =
 		hasDomainRegistration( responseCart ) || hasTransferProduct( responseCart );
@@ -193,11 +196,32 @@ export default function WPCheckout( {
 
 		const loginUrl = login( { redirectTo, emailAddress } );
 
+		reduxDispatch(
+			recordTracksEvent( 'calypso_checkout_wpcom_email_exists', {
+				email: emailAddress,
+				checkout_flow: isJetpackCheckout ? 'site_only_checkout' : 'wpcom_registrationless',
+			} )
+		);
+
 		return translate(
 			'That email address is already in use. If you have an existing account, {{a}}please log in{{/a}}.',
 			{
 				components: {
-					a: <a href={ loginUrl } />,
+					a: (
+						<a
+							onClick={ () =>
+								reduxDispatch(
+									recordTracksEvent( 'calypso_checkout_composite_login_click', {
+										email: emailAddress,
+										checkout_flow: isJetpackCheckout
+											? 'site_only_checkout'
+											: 'wpcom_registrationless',
+									} )
+								)
+							}
+							href={ loginUrl }
+						/>
+					),
 				},
 			}
 		);

client/my-sites/checkout/composite-checkout/composite-checkout.tsx

@@ -119,6 +119,7 @@ export default function CompositeCheckout( {
 	isJetpackCheckout,
 	jetpackSiteSlug,
 	jetpackPurchaseToken,
+	isUserComingFromLoginForm,
 }: {
 	siteSlug: string | undefined;
 	siteId: number | undefined;
@@ -137,9 +138,10 @@ export default function CompositeCheckout( {
 	infoMessage?: JSX.Element;
 	onAfterPaymentComplete?: () => void;
 	isFocusedLaunch?: boolean;
-	isJetpackCheckout?: boolean;
+	isJetpackCheckout: boolean;
 	jetpackSiteSlug?: string;
 	jetpackPurchaseToken?: string;
+	isUserComingFromLoginForm?: boolean;
 } ): JSX.Element {
 	const translate = useTranslate();
 	const isJetpackNotAtomic =
@@ -200,6 +202,18 @@ export default function CompositeCheckout( {
 		[ reduxDispatch ]
 	);
 
+	const checkoutFlow: string = useMemo( () => {
+		if ( isLoggedOutCart ) {
+			if ( isJetpackCheckout ) {
+				return isUserComingFromLoginForm
+					? 'jetpack_site_only_coming_from_login'
+					: 'jetpack_site_only';
+			}
+			return 'wpcom_registrationless';
+		}
+		return isJetpackNotAtomic ? 'jetpack_checkout' : 'wpcom_checkout';
+	}, [ isLoggedOutCart, isJetpackCheckout, isUserComingFromLoginForm, isJetpackNotAtomic ] );
+
 	const countriesList = useCountryList( overrideCountryList || [] );
 
 	const {
@@ -408,7 +422,9 @@ export default function CompositeCheckout( {
 		productAliasFromUrl,
 		updatedSiteSlug,
 		feature,
-		plan
+		plan,
+		isJetpackCheckout,
+		checkoutFlow
 	);
 
 	const products = useSelector( ( state ) => getProductsList( state ) );
@@ -560,6 +576,7 @@ export default function CompositeCheckout( {
 		responseCart,
 		storedCards,
 		productAliasFromUrl,
+		checkoutFlow,
 	} );
 
 	const onPaymentComplete = useCreatePaymentCompleteCallback( {
@@ -573,6 +590,7 @@ export default function CompositeCheckout( {
 		isFocusedLaunch,
 		siteSlug: updatedSiteSlug,
 		isJetpackCheckout,
+		checkoutFlow,
 	} );
 
 	const handlePaymentComplete = useCallback(
@@ -678,11 +696,22 @@ function getAnalyticsPath(
 	product: string | undefined,
 	selectedSiteSlug: string | undefined,
 	selectedFeature: string | undefined,
-	plan: string | undefined
+	plan: string | undefined,
+	isJetpackCheckout: boolean,
+	checkoutFlow: string
 ): { analyticsPath: string; analyticsProps: Record< string, string > } {
-	debug( 'getAnalyticsPath', { purchaseId, product, selectedSiteSlug, selectedFeature, plan } );
+	debug( 'getAnalyticsPath', {
+		purchaseId,
+		product,
+		selectedSiteSlug,
+		selectedFeature,
+		plan,
+		isJetpackCheckout,
+		checkoutFlow,
+	} );
 	let analyticsPath = '';
 	let analyticsProps = {};
+
 	if ( purchaseId && product ) {
 		analyticsPath = '/checkout/:product/renew/:purchase_id/:site';
 		analyticsProps = { product, purchase_id: purchaseId, site: selectedSiteSlug };
@@ -693,8 +722,10 @@ function getAnalyticsPath(
 		analyticsPath = '/checkout/features/:feature/:site';
 		analyticsProps = { feature: selectedFeature, site: selectedSiteSlug };
 	} else if ( product && ! purchaseId ) {
-		analyticsPath = '/checkout/:site/:product';
-		analyticsProps = { product, site: selectedSiteSlug };
+		analyticsPath = isJetpackCheckout
+			? '/checkout/jetpack/:site/:product'
+			: '/checkout/:site/:product';
+		analyticsProps = { product, site: selectedSiteSlug, checkoutFlow };
 	} else if ( selectedSiteSlug ) {
 		analyticsPath = '/checkout/:site';
 		analyticsProps = { site: selectedSiteSlug };

client/my-sites/checkout/composite-checkout/hooks/use-create-payment-complete-callback.tsx

@@ -61,6 +61,7 @@ export default function useCreatePaymentCompleteCallback( {
 	isFocusedLaunch,
 	siteSlug,
 	isJetpackCheckout = false,
+	checkoutFlow,
 }: {
 	createUserAndSiteBeforeTransaction?: boolean;
 	productAliasFromUrl?: string | undefined;
@@ -71,7 +72,8 @@ export default function useCreatePaymentCompleteCallback( {
 	isComingFromUpsell?: boolean;
 	isFocusedLaunch?: boolean;
 	siteSlug: string | undefined;
-	isJetpackCheckout?: boolean;
+	isJetpackCheckout: boolean;
+	checkoutFlow: string;
 } ): PaymentCompleteCallback {
 	const { responseCart } = useShoppingCart();
 	const reduxDispatch = useDispatch();
@@ -119,6 +121,7 @@ export default function useCreatePaymentCompleteCallback( {
 					transactionResult,
 					redirectUrl: url,
 					responseCart,
+					checkoutFlow,
 					reduxDispatch,
 				} );
 			} catch ( err ) {
@@ -232,6 +235,7 @@ export default function useCreatePaymentCompleteCallback( {
 			createUserAndSiteBeforeTransaction,
 			isFocusedLaunch,
 			isJetpackCheckout,
+			checkoutFlow,
 		]
 	);
 }
@@ -314,12 +318,14 @@ function recordPaymentCompleteAnalytics( {
 	transactionResult,
 	redirectUrl,
 	responseCart,
+	checkoutFlow,
 	reduxDispatch,
 }: {
 	paymentMethodId: string | null;
 	transactionResult: WPCOMTransactionEndpointResponse | undefined;
 	redirectUrl: string;
 	responseCart: ResponseCart;
+	checkoutFlow: string;
 	reduxDispatch: ReturnType< typeof useDispatch >;
 } ) {
 	const wpcomPaymentMethod = paymentMethodId
@@ -356,6 +362,7 @@ function recordPaymentCompleteAnalytics( {
 			currency: responseCart.currency,
 			payment_method: wpcomPaymentMethod || '',
 			device,
+			checkout_flow: checkoutFlow,
 		} )
 	);
 }

client/my-sites/checkout/composite-checkout/hooks/use-record-checkout-loaded.ts

@@ -21,13 +21,15 @@ export default function useRecordCheckoutLoaded( {
 	responseCart,
 	storedCards,
 	productAliasFromUrl,
+	checkoutFlow,
 }: {
 	recordEvent: ( action: ReactStandardAction ) => void;
 	isLoading: boolean;
 	isApplePayAvailable: boolean;
 	responseCart: ResponseCart;
 	storedCards: StoredCard[];
 	productAliasFromUrl: string | undefined | null;
+	checkoutFlow: string;
 } ): void {
 	const hasRecordedCheckoutLoad = useRef( false );
 	if ( ! isLoading && ! hasRecordedCheckoutLoad.current ) {
@@ -39,6 +41,7 @@ export default function useRecordCheckoutLoaded( {
 				apple_pay_available: isApplePayAvailable,
 				product_slug: productAliasFromUrl,
 				is_renewal: hasRenewalItem( responseCart ),
+				checkout_flow: checkoutFlow,
 			},
 		} );
 		hasRecordedCheckoutLoad.current = true;

client/my-sites/checkout/composite-checkout/record-analytics.js

@@ -44,6 +44,7 @@ export default function createAnalyticsEventHandler( reduxDispatch ) {
 							apple_pay_available: action.payload?.apple_pay_available,
 							product_slug: action.payload?.product_slug,
 							is_composite: true,
+							checkout_flow: action.payload?.checkout_flow,
 						} )
 					);
 					return reduxDispatch( recordTracksEvent( 'calypso_checkout_composite_loaded', {} ) );

client/my-sites/checkout/controller.jsx

@@ -129,6 +129,7 @@ export function checkout( context, next ) {
 			isJetpackCheckout={ isJetpackCheckout }
 			jetpackSiteSlug={ jetpackSiteSlug }
 			jetpackPurchaseToken={ jetpackPurchaseToken || jetpackPurchaseNonce }
+			isUserComingFromLoginForm={ isUserComingFromLoginForm }
 		/>
 	);