DIFM Signup: Redirect user to `/home` after they cancel DIFM checkout #95183

p-jackson · 2024-10-07T07:35:56Z

Proposed Changes

This diff hijacks the 'website-content' step in order to check the value of the ?skippedCheckout=1 query param. If it's set then we go straight to My Home otherwise an error is shown - since the purchase is never completed, the DIFM data isn't set up and that's why there's an error on this page.

The checkout page usually supports both ?redirect_to and ?cancel_to query params that let you go to a different location if the user cancels the checkout. Unfortunately the signup framework only gives the ability to set a single "destination" for a flow.

wp-calypso/client/signup/config/flows-pure.js

Line 506 in cf0aa1a

destination: getDIFMSignupDestination,

For reference, the ?skippedCheckout=1 param is set here:

wp-calypso/client/signup/config/flows.js

Line 58 in cf0aa1a

checkoutBackUrl: addQueryArgs( { skippedCheckout: 1 }, checkoutBackUrl ),

Testing Instructions

For reference, the DIFM flows are linked to from the logged-out landing page https://wordpress.com/website-design-service/

Test /start/do-it-for-me/new-or-existing-site?ref=do-it-for-me-lp flow
Test /start/do-it-for-me-store/?utm_campaign=happiness flow
Test cancelling at the checkout (with the cross in the top-left) and also completing the purchase

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

This diff hijacks the 'website-content' step in order to check the value of the `?skippedCheckout=1` query param. If it's set then we go straight to My Home otherwise an error is shown - since the purchase is never completed, the DIFM data isn't set up and that's why there's an error on this page. The checkout page usually supports both `?redirect_to` and `?cancel_to` query params that let you go to a different location if the user cancels the checkout. Unfortunately the signup framework only gives the ability to set a single "destination" for a flow. https://github.com/Automattic/wp-calypso/blob/cf0aa1a007213a6cfcf40b420acd7f4b9c1d8441/client/signup/config/flows-pure.js#L506 For reference, the `?skippedCheckout=1` param is set here: https://github.com/Automattic/wp-calypso/blob/cf0aa1a007213a6cfcf40b420acd7f4b9c1d8441/client/signup/config/flows.js#L58

github-actions · 2024-10-07T07:36:08Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-121287

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-121287&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-121287&env=a8c-for-agencies

matticbot · 2024-10-07T07:39:22Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/error-when-cancel-difm-checkout on your sandbox.

matticbot · 2024-10-07T07:42:36Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~84 bytes added 📈 [gzipped])

name                                     parsed_size           gzip_size
async-load-signup-steps-website-content       +236 B  (+0.2%)      +84 B  (+0.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

candy02058912

✅ Tested and redirects backs to /home/:site

jeyip · 2024-10-07T22:16:38Z

Testing

Requirements

For each of the flows listed below:

When reaching checkout from DIFM flow for a new site and purchase is cancelled, user is redirected to my home ( redirects as expected in local dev but not calypso.live )
When reaching checkout from DIFM flow for an existing site and purchase is cancelled, user is redirected to my home ( redirects as expected in local dev but not calypso.live )
When reaching checkout from DIFM flow, user can complete purchase as expected

Browsers

Chrome

Notes

I'm having trouble getting this to work with calypso.live. I'm going to try things locally. 🤔

Edit: Things work as expected locally

jeyip · 2024-10-07T22:25:02Z

client/signup/steps/website-content/index.tsx

@@ -300,6 +302,13 @@ export default function WrapperWebsiteContent(
 		}
 	}, [ data, queryObject.siteSlug ] );

+	useEffect( () => {
+		if ( skippedCheckout === '1' ) {


Nonblocking:

This seems totally reasonable for a patch.

I'm a bit surprised this isn't already handled at a level above individual steps 🤔 It sounds like Philip already pinpointed the reason in the PR description. "Unfortunately the signup framework only gives the ability to set a single "destination" for a flow."

What we want to do here seems like a valid use case though. ~~@alshakero wondering if you have thoughts.~~

Ah just realized that this isn't part of the stepper onboarding framework. Apologies for the premature ping Omar 🙏 In that case, barring a rework of the signup framework, this seems like a good solution for the time being.

Yeah it's not necessarily a bad thing to expect the checkout destination to handle both the the success and cancelation cases. You could imagine the flow doing something nice like acknowledging they didn't pay, offering a discount, giving them alternative solutions etc.
On the other hand, it could save a redirect bounce if you could set the cancel_to param up front 🤷‍♂️

autumnfjeld · 2024-10-20T21:58:22Z

@p-jackson can you add a reference to the original issue? :)

p-jackson · 2024-10-21T21:01:14Z

@autumnfjeld no original issue, I discovered during my own testing. But I can create a dummy issue if that makes it easier for counting the bug fixes?

autumnfjeld · 2024-10-21T21:27:15Z

Ah ok. I made an assumption this was related to other work since Quake had recently worked on issues with the DIFM flow. No need to add create a dummy issue.

autumnfjeld · 2024-10-21T22:12:32Z

Actually, for GK tracking it might be wise to always create a dummy issue. Let's discuss a convention for the team. :) p1729548316342259/1729545282.865209-slack-C04H4NY6STW

p-jackson added the [Type] Bug label Oct 7, 2024

p-jackson requested a review from a team October 7, 2024 07:35

p-jackson self-assigned this Oct 7, 2024

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 7, 2024

candy02058912 approved these changes Oct 7, 2024

View reviewed changes

jeyip reviewed Oct 7, 2024

View reviewed changes

jeyip approved these changes Oct 7, 2024

View reviewed changes

p-jackson merged commit 35122bb into trunk Oct 7, 2024
15 of 16 checks passed

p-jackson deleted the fix/error-when-cancel-difm-checkout branch October 7, 2024 23:00

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 7, 2024

autumnfjeld mentioned this pull request Oct 20, 2024

Purchasing the Commerce plan and DIFM Express breaks the connection to DIFM Express tools #94517

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DIFM Signup: Redirect user to `/home` after they cancel DIFM checkout #95183

DIFM Signup: Redirect user to `/home` after they cancel DIFM checkout #95183

p-jackson commented Oct 7, 2024 •

edited

Loading

github-actions bot commented Oct 7, 2024 •

edited by matticbot

Loading

matticbot commented Oct 7, 2024

matticbot commented Oct 7, 2024

candy02058912 left a comment •

edited

Loading

jeyip commented Oct 7, 2024 •

edited

Loading

jeyip Oct 7, 2024 •

edited

Loading

p-jackson Oct 7, 2024

autumnfjeld commented Oct 20, 2024

p-jackson commented Oct 21, 2024

autumnfjeld commented Oct 21, 2024

autumnfjeld commented Oct 21, 2024

DIFM Signup: Redirect user to /home after they cancel DIFM checkout #95183

DIFM Signup: Redirect user to /home after they cancel DIFM checkout #95183

Conversation

p-jackson commented Oct 7, 2024 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 7, 2024 • edited by matticbot Loading

matticbot commented Oct 7, 2024

matticbot commented Oct 7, 2024

candy02058912 left a comment • edited Loading

Choose a reason for hiding this comment

jeyip commented Oct 7, 2024 • edited Loading

Testing

Requirements

Browsers

Notes

jeyip Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

p-jackson Oct 7, 2024

Choose a reason for hiding this comment

autumnfjeld commented Oct 20, 2024

p-jackson commented Oct 21, 2024

autumnfjeld commented Oct 21, 2024

autumnfjeld commented Oct 21, 2024

DIFM Signup: Redirect user to `/home` after they cancel DIFM checkout #95183

DIFM Signup: Redirect user to `/home` after they cancel DIFM checkout #95183

p-jackson commented Oct 7, 2024 •

edited

Loading

github-actions bot commented Oct 7, 2024 •

edited by matticbot

Loading

candy02058912 left a comment •

edited

Loading

jeyip commented Oct 7, 2024 •

edited

Loading

jeyip Oct 7, 2024 •

edited

Loading