From 35122bbd8ca4c3d7bb7c2c7c8773a277c183af49 Mon Sep 17 00:00:00 2001 From: Philip Jackson Date: Tue, 8 Oct 2024 12:00:53 +1300 Subject: [PATCH] Redirect user to `/home` after they cancel DIFM checkout (#95183) 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 --- client/signup/steps/website-content/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/signup/steps/website-content/index.tsx b/client/signup/steps/website-content/index.tsx index de0e3c6f36268..d8c181a7f3900 100644 --- a/client/signup/steps/website-content/index.tsx +++ b/client/signup/steps/website-content/index.tsx @@ -15,6 +15,7 @@ import { import StepWrapper from 'calypso/signup/step-wrapper'; import { useSelector, useDispatch } from 'calypso/state'; import { errorNotice, successNotice } from 'calypso/state/notices/actions'; +import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments'; import { saveSignupStep } from 'calypso/state/signup/progress/actions'; import { changesSaved, @@ -259,6 +260,7 @@ export default function WrapperWebsiteContent( }; } & WebsiteContentStepProps ) { + const { skippedCheckout } = useSelector( getInitialQueryArguments ) ?? {}; const { flowName, stepName, positionInFlow, queryObject } = props; const translate = useTranslate(); const siteId = useSelector( ( state ) => getSiteId( state, queryObject.siteSlug as string ) ); @@ -300,6 +302,13 @@ export default function WrapperWebsiteContent( } }, [ data, queryObject.siteSlug ] ); + useEffect( () => { + if ( skippedCheckout === '1' ) { + debug( 'User did not make a DIFM purchase, redirecting to home' ); + page( `/home/${ queryObject.siteSlug }` ); + } + }, [ skippedCheckout, queryObject.siteSlug ] ); + if ( isLoading ) { return ; }