Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 6 commits into from
Jun 24, 2021
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
655cddc
Add tracks events to Jetpack logged-out checkout.
elliottprogrammer Jun 14, 2021
370e2bd
Move Tracks events out of record-analytics.js handler.
elliottprogrammer Jun 15, 2021
8cb2143
Move 'checkoutFlow' logic into it's own function.
elliottprogrammer Jun 15, 2021
42ca766
Remove unnecessary nullish coalescing operator.
elliottprogrammer Jun 16, 2021
0581c2c
Fix uppercase letter in checkoutFlow value.
elliottprogrammer Jun 16, 2021
aefd864
Use redux version of recordTracksEvent.
elliottprogrammer Jun 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions client/my-sites/checkout/checkout-system-decider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default function CheckoutSystemDecider( {
isJetpackCheckout,
jetpackSiteSlug,
jetpackPurchaseToken,
isUserComingFromLoginForm,
} ) {
const reduxDispatch = useDispatch();
const translate = useTranslate();
Expand Down Expand Up @@ -133,6 +134,7 @@ export default function CheckoutSystemDecider( {
isJetpackCheckout={ isJetpackCheckout }
jetpackSiteSlug={ jetpackSiteSlug }
jetpackPurchaseToken={ jetpackPurchaseToken }
isUserComingFromLoginForm={ isUserComingFromLoginForm }
/>
</StripeHookProvider>
</CalypsoShoppingCartProvider>
Expand Down
20 changes: 19 additions & 1 deletion client/my-sites/checkout/composite-checkout/components/wp-checkout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import React, { useEffect, useState, useCallback } from 'react';
import { useTranslate } from 'i18n-calypso';
import { recordTracksEvent } from '@automattic/calypso-analytics';
import {
Checkout,
CheckoutStep,
Expand Down Expand Up @@ -193,11 +194,28 @@ export default function WPCheckout( {

const loginUrl = login( { redirectTo, emailAddress } );

recordTracksEvent( 'calypso_checkout_wpcom_email_exists', {
sirbrillig marked this conversation as resolved.
Show resolved Hide resolved
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={ () =>
recordTracksEvent( 'calypso_checkout_composite_login_click', {
email: emailAddress,
checkout_flow: isJetpackCheckout
? 'site_only_checkout'
: 'wpcom_registrationless',
} )
}
href={ loginUrl }
/>
),
},
}
);
Expand Down
44 changes: 38 additions & 6 deletions client/my-sites/checkout/composite-checkout/composite-checkout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ export default function CompositeCheckout( {
isJetpackCheckout,
jetpackSiteSlug,
jetpackPurchaseToken,
isUserComingFromLoginForm,
}: {
siteSlug: string | undefined;
siteId: number | undefined;
Expand All @@ -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 =
Expand Down Expand Up @@ -403,12 +405,27 @@ export default function CompositeCheckout( {
productSlug: planSlugs.length > 0 ? planSlugs[ 0 ] : undefined,
} );

let checkoutFlow = '';
sirbrillig marked this conversation as resolved.
Show resolved Hide resolved
if ( isLoggedOutCart ) {
if ( isJetpackCheckout ) {
checkoutFlow = isUserComingFromLoginForm
? 'jetpack_site_only_coming_from_login'
: 'Jetpack_site_only';
} else {
checkoutFlow = 'wpcom_registrationless';
}
} else {
checkoutFlow = isJetpackNotAtomic ? 'jetpack_checkout' : 'wpcom_checkout';
}

const { analyticsPath, analyticsProps } = getAnalyticsPath(
purchaseId,
productAliasFromUrl,
updatedSiteSlug,
feature,
plan
plan,
isJetpackCheckout,
checkoutFlow
);

const products = useSelector( ( state ) => getProductsList( state ) );
Expand Down Expand Up @@ -560,6 +577,7 @@ export default function CompositeCheckout( {
responseCart,
storedCards,
productAliasFromUrl,
checkoutFlow,
} );

const onPaymentComplete = useCreatePaymentCompleteCallback( {
Expand All @@ -573,6 +591,7 @@ export default function CompositeCheckout( {
isFocusedLaunch,
siteSlug: updatedSiteSlug,
isJetpackCheckout,
checkoutFlow,
} );

const handlePaymentComplete = useCallback(
Expand Down Expand Up @@ -678,11 +697,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 };
Expand All @@ -693,8 +723,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 };
Expand Down
9 changes: 8 additions & 1 deletion client/my-sites/checkout/composite-checkout/hooks/use-create-payment-complete-callback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export default function useCreatePaymentCompleteCallback( {
isFocusedLaunch,
siteSlug,
isJetpackCheckout = false,
checkoutFlow,
}: {
createUserAndSiteBeforeTransaction?: boolean;
productAliasFromUrl?: string | undefined;
Expand All @@ -71,7 +72,8 @@ export default function useCreatePaymentCompleteCallback( {
isComingFromUpsell?: boolean;
isFocusedLaunch?: boolean;
siteSlug: string | undefined;
isJetpackCheckout?: boolean;
isJetpackCheckout: boolean;
checkoutFlow: string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I missed this in my review, but this adds a new required argument to useCreatePaymentCompleteCallback, but doesn't change all the instances where that function is used. Notably:

wp-calypso/client/my-sites/checkout/upsell-nudge/purchase-modal/index.tsx

Line 75 in 58592f2

const onComplete = useCreatePaymentCompleteCallback( {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, thank you for spotting this @sirbrillig. I don't see why these 2 arguments, isJetpackCheckout and checkoutFlow need to be required.

I created PR #54116 to make them optional args. If you don't mind, could you give it a review? 🙂

} ): PaymentCompleteCallback {
const { responseCart } = useShoppingCart();
const reduxDispatch = useDispatch();
Expand Down Expand Up @@ -119,6 +121,7 @@ export default function useCreatePaymentCompleteCallback( {
transactionResult,
redirectUrl: url,
responseCart,
checkoutFlow,
reduxDispatch,
} );
} catch ( err ) {
Expand Down Expand Up @@ -232,6 +235,7 @@ export default function useCreatePaymentCompleteCallback( {
createUserAndSiteBeforeTransaction,
isFocusedLaunch,
isJetpackCheckout,
checkoutFlow,
]
);
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -356,6 +362,7 @@ function recordPaymentCompleteAnalytics( {
currency: responseCart.currency,
payment_method: wpcomPaymentMethod || '',
device,
checkout_flow: checkoutFlow,
} )
);
}
3 changes: 3 additions & 0 deletions client/my-sites/checkout/composite-checkout/hooks/use-record-checkout-loaded.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions client/my-sites/checkout/composite-checkout/record-analytics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {} ) );
Expand Down
8 changes: 5 additions & 3 deletions client/my-sites/checkout/controller.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,10 @@ export function checkout( context, next ) {
const jetpackPurchaseNonce = context.query.purchaseNonce;
const isUserComingFromLoginForm = context.query?.flow === 'logged-out-checkout';
const isJetpackCheckout =
context.pathname.includes( '/checkout/jetpack' ) &&
( isLoggedOut || isUserComingFromLoginForm ) &&
( !! jetpackPurchaseToken || !! jetpackPurchaseNonce );
( context.pathname.includes( '/checkout/jetpack' ) &&
( isLoggedOut || isUserComingFromLoginForm ) &&
( !! jetpackPurchaseToken || !! jetpackPurchaseNonce ) ) ??
sirbrillig marked this conversation as resolved.
Show resolved Hide resolved
false;
const jetpackSiteSlug = context.params.siteSlug;

// Do not use Jetpack checkout for Jetpack Anti Spam
Expand Down Expand Up @@ -129,6 +130,7 @@ export function checkout( context, next ) {
isJetpackCheckout={ isJetpackCheckout }
jetpackSiteSlug={ jetpackSiteSlug }
jetpackPurchaseToken={ jetpackPurchaseToken || jetpackPurchaseNonce }
isUserComingFromLoginForm={ isUserComingFromLoginForm }
/>
);

Expand Down