From f650a984893211028d666c5aa1e80b59f57b40b3 Mon Sep 17 00:00:00 2001
From: Jeremy Yip <jeremy.yip@automattic.com>
Date: Tue, 25 Jun 2024 10:22:59 -0700
Subject: [PATCH] Add `stepName` and `flowName` props to `SignupForm`

---
 .../steps/subscribing-email/content.jsx       | 17 +++++++-------
 .../signup/steps/subscribing-email/index.jsx  | 23 ++++---------------
 2 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/client/signup/steps/subscribing-email/content.jsx b/client/signup/steps/subscribing-email/content.jsx
index a3f082caa91c66..b0482e1c7c771d 100644
--- a/client/signup/steps/subscribing-email/content.jsx
+++ b/client/signup/steps/subscribing-email/content.jsx
@@ -3,9 +3,10 @@ import SignupForm from 'calypso/blocks/signup-form';
 import ReskinnedProcessingScreen from 'calypso/signup/reskinned-processing-screen';
 
 function SubscribingEmailStepContent( props ) {
-	const { flowName, handleSubmitSignup, isLoading, submitting, queryParams } = props;
+	const { flowName, handleSubmitSignup, isLoading, stepName, step, translate, queryParams } = props;
 
 	const redirectUrl = queryParams?.redirect_to || 'https://wordpress.com';
+	const email = queryParams?.email;
 
 	if ( isLoading ) {
 		return <ReskinnedProcessingScreen flowName={ flowName } hasPaidDomain={ false } />;
@@ -14,22 +15,22 @@ function SubscribingEmailStepContent( props ) {
 	return (
 		<>
 			<SignupForm
-				step={ props.step }
-				email={ queryParams?.email || '' }
+				step={ step }
+				stepName={ stepName }
+				flowName={ flowName }
+				email={ email || '' }
 				redirectToAfterLoginUrl={ redirectUrl }
-				disabled={ submitting }
-				submitting={ submitting }
 				displayUsernameInput={ false }
 				suggestedUsername=""
 				isPasswordless
-				queryArgs={ { user_email: queryParams?.email } || {} }
+				queryArgs={ { user_email: email } || {} }
 				isSocialSignupEnabled={ false }
 				// recaptchaClientId={ this.state.recaptchaClientId }
 				isReskinned
 				shouldDisplayUserExistsError
 				isSocialFirst={ false }
-				labelText={ props.isWooPasswordless ? props.translate( 'Your email' ) : null }
-				submitButtonText={ props.translate( 'Create an account' ) }
+				labelText={ translate( 'Your email' ) }
+				submitButtonText={ translate( 'Create an account' ) }
 				submitForm={ handleSubmitSignup }
 			/>
 		</>
diff --git a/client/signup/steps/subscribing-email/index.jsx b/client/signup/steps/subscribing-email/index.jsx
index ec83ce92176d2c..1bd5f488fc3985 100644
--- a/client/signup/steps/subscribing-email/index.jsx
+++ b/client/signup/steps/subscribing-email/index.jsx
@@ -18,7 +18,7 @@ const createNewAccount = async ( {
 	goToNextStep,
 	// recordTracksEvent,
 	setIsLoading,
-	submitSignupStep,
+	// submitSignupStep,
 } ) => {
 	const { email, mailing_list, redirect_to } = queryParams;
 
@@ -34,11 +34,9 @@ const createNewAccount = async ( {
 			client_secret: config( 'wpcom_signup_key' ),
 			anon_id: getTracksAnonymousUserId(),
 		} );
-
-		// recordTracksEvent( 'calypso_signup_new_email_subscription_success', {
-		// 	mailing_list,
-		// } );
-
+		recordTracksEvent( 'calypso_signup_new_email_subscription_success', {
+			mailing_list,
+		} );
 		submitSignupStep(
 			{ stepName: 'subscribing-email' },
 			{ redirectUrl: addQueryArgs( redirect_to, { subscribed: true } ) }
@@ -68,7 +66,6 @@ function SubscribingEmailStep( props ) {
 	const { flowName, queryParams, stepName } = props;
 
 	const [ isLoading, setIsLoading ] = useState( true );
-	const [ submitting, setSubmitting ] = useState( false );
 
 	useEffect( () => {
 		if ( emailValidator.validate( queryParams.email ) ) {
@@ -83,17 +80,7 @@ function SubscribingEmailStep( props ) {
 			<StepWrapper
 				flowName={ flowName }
 				hideFormattedHeader
-				stepContent={
-					<SubscribingEmailStepContent
-						{ ...props }
-						handleSubmitSignup={ () => {
-							// setSubmitting( true );
-							// createNewAccount( { ...props, email: form.email }, setIsLoading, setSubmitting );
-						} }
-						isLoading={ isLoading }
-						submitting={ submitting }
-					/>
-				}
+				stepContent={ <SubscribingEmailStepContent { ...props } isLoading={ isLoading } /> }
 				stepName={ stepName }
 			/>
 		</div>