Update loading screen logic

Automattic · Jun 20, 2024 · e377690 · e377690
1 parent 7405145
commit e377690
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 73 deletions.
diff --git a/client/signup/config/steps-pure.js b/client/signup/config/steps-pure.js
@@ -466,10 +466,6 @@ export function generateSteps( {
 			dependencies: [ 'email', 'redirect_to', 'mailing_list' ],
 			providesDependencies: [],
 			optionalDependencies: [],
-			// props: {
-			// 	isDomainOnly: false,
-			// },
-			// delayApiRequestUntilComplete: true,
 		},
 		mailbox: {
 			stepName: 'mailbox',

diff --git a/client/signup/reskinned-processing-screen/index.jsx b/client/signup/reskinned-processing-screen/index.jsx
@@ -65,7 +65,11 @@ const useSteps = ( { flowName, hasPaidDomain, isDestinationSetupSiteFlow } ) =>
 			];
 			break;
 		case 'email-subscription':
-			steps = [ { title: __( 'Subscribing to magic' ) } ];
+			steps = [
+				{ title: __( 'Turning on the lights' ) },
+				{ title: __( 'Making you cookies' ) },
+				{ title: __( 'Subscribing to magic' ) },
+			];
 			break;
 		default:
 			steps = [

diff --git a/client/signup/steps/subscribing-email/content.jsx b/client/signup/steps/subscribing-email/content.jsx
@@ -3,16 +3,10 @@ import SignupForm from 'calypso/blocks/signup-form';
 import ReskinnedProcessingScreen from 'calypso/signup/reskinned-processing-screen';
 
 function SubscribingEmailStepContent( props ) {
-	const { flowName, isAttemptingSubscription, queryParams } = props;
+	const { flowName, isLoading, queryParams } = props;
 
-	if ( isAttemptingSubscription ) {
-		return (
-			<ReskinnedProcessingScreen
-				flowName={ flowName }
-				hasPaidDomain={ false }
-				// isDestinationSetupSiteFlow={ destination.startsWith( '/setup' ) }
-			/>
-		);
+	if ( isLoading ) {
+		return <ReskinnedProcessingScreen flowName={ flowName } hasPaidDomain={ false } />;
 	}
 
 	return (

diff --git a/client/signup/steps/subscribing-email/index.jsx b/client/signup/steps/subscribing-email/index.jsx
@@ -1,69 +1,68 @@
-import { getTracksAnonymousUserId } from '@automattic/calypso-analytics';
-import config from '@automattic/calypso-config';
+// import { getTracksAnonymousUserId } from '@automattic/calypso-analytics';
+// import config from '@automattic/calypso-config';
 import { useEffect, useState } from '@wordpress/element';
 import emailValidator from 'email-validator';
 import { localize } from 'i18n-calypso';
 import { connect } from 'react-redux';
-import { getLocaleSlug } from 'calypso/lib/i18n-utils';
+// import { getLocaleSlug } from 'calypso/lib/i18n-utils';
 import StepWrapper from 'calypso/signup/step-wrapper';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { submitSignupStep } from 'calypso/state/signup/progress/actions';
 import SubscribingEmailStepContent from './content';
 
-import './style.scss';
-
-const createNewAccount = async ( props ) => {
-	const email = props.queryParams.email;
-	try {
-		// eslint-disable-next-line no-undef
-		await wpcom.req.post( '/users/new', {
-			email: typeof email === 'string' ? email.trim() : '',
-			is_passwordless: true,
-			signup_flow_name: props.flowName,
-			validate: false,
-			locale: getLocaleSlug(),
-			client_id: config( 'wpcom_signup_id' ),
-			client_secret: config( 'wpcom_signup_key' ),
-			anon_id: getTracksAnonymousUserId(),
-		} );
-		// Do stuff with response and redirect
-		props.recordTracksEvent( 'calypso_signup_reader_landing_cta' );
-		props.submitSignupStep( { stepName: props.stepName } );
-		props.goToNextStep();
-	} catch ( error ) {
-		if ( ! [ 'already_taken', 'already_active', 'email_exists' ].includes( error.error ) ) {
-			// Subscribe existing user to guides emails through API endpoint
-		}
-	}
-};
+// const createNewAccount = async ( props, setIsLoading ) => {
+// 	const email = props.queryParams.email;
+// 	try {
+// 		// eslint-disable-next-line no-undef
+// 		await wpcom.req.post( '/users/new', {
+// 			email: typeof email === 'string' ? email.trim() : '',
+// 			is_passwordless: true,
+// 			signup_flow_name: props.flowName,
+// 			validate: false,
+// 			locale: getLocaleSlug(),
+// 			client_id: config( 'wpcom_signup_id' ),
+// 			client_secret: config( 'wpcom_signup_key' ),
+// 			anon_id: getTracksAnonymousUserId(),
+// 		} );
+// 		// Do stuff with response and redirect
+// 		props.recordTracksEvent( 'calypso_signup_reader_landing_cta' );
+// 		props.submitSignupStep( { stepName: props.stepName } );
+// 		props.goToNextStep();
+// 	} catch ( error ) {
+// 		if ( ! [ 'already_taken', 'already_active', 'email_exists' ].includes( error.error ) ) {
+// 			// Subscribe existing user to guides emails through API endpoint
+// 		}
+// 		setIsLoading( false );
+// 	}
+// };
 
 function SubscribingEmailStep( props ) {
 	const handleButtonClick = async () => {};
 
 	const { flowName, positionInFlow, queryParams, stepName } = props;
-	const [ isAttemptingSubscription, setIsAttemptingSubscription ] = useState( true );
+	const [ isLoading, setIsLoading ] = useState( true );
 
 	useEffect( () => {
 		const email = queryParams.email;
 
 		if ( emailValidator.validate( email ) ) {
-			// console.log( 'Creating account!' );
-			createNewAccount( props );
-			setIsAttemptingSubscription( false );
+			// TODO: Fetch request to create new account will replace this placeholder timeout
+			setTimeout( () => setIsLoading( false ), 5000 );
 		}
 	}, [] );
 
 	return (
 		<div className="subscribing-email">
 			<StepWrapper
+				hideFormattedHeader
 				flowName={ flowName }
 				stepName={ stepName }
 				positionInFlow={ positionInFlow }
 				stepContent={
 					<SubscribingEmailStepContent
 						{ ...props }
 						handleButtonClick={ handleButtonClick }
-						isAttemptingSubscription={ isAttemptingSubscription }
+						isLoading={ isLoading }
 					/>
 				}
 			/>

diff --git a/client/signup/steps/subscribing-email/style.scss b/client/signup/steps/subscribing-email/style.scss