A4A: add forms for new signup flow

Automattic · Feb 1, 2025 · 6ddcb0f · 6ddcb0f
1 parent 29836bc
commit 6ddcb0f
Show file tree

Hide file tree

Showing 14 changed files with 593 additions and 58 deletions.
diff --git a/...or-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx b/...or-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx
@@ -0,0 +1,180 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import { useState } from 'react';
+import Form from 'calypso/a8c-for-agencies/components/form';
+import FormField from 'calypso/a8c-for-agencies/components/form/field';
+import FormRadio from 'calypso/components/forms/form-radio';
+import FormTextarea from 'calypso/components/forms/form-textarea';
+import './style.scss';
+
+type Props = {
+	onContinue: () => void;
+};
+
+type FormData = {
+	topGoal: string;
+	mainGoal2025: string;
+	workModel: string;
+	specificApproach: string;
+};
+
+const BlueprintForm: React.FC< Props > = ( { onContinue } ) => {
+	const translate = useTranslate();
+	const [ formData, setFormData ] = useState< FormData >( {
+		topGoal: '',
+		mainGoal2025: '',
+		workModel: '',
+		specificApproach: '',
+	} );
+
+	const handleSubmit = ( e: React.FormEvent ) => {
+		e.preventDefault();
+		onContinue();
+	};
+
+	return (
+		<Form
+			className="blueprint-form"
+			title={ translate( "Let's build your blurprint" ) }
+			description={ translate(
+				"We'll send you a custom blueprint to grow your business based on your answers below."
+			) }
+		>
+			<div className="blueprint-form__fields">
+				<FormField
+					label={ translate( 'What is your top goal when partnering with a technology provider?' ) }
+					isRequired
+				>
+					<div className="blueprint-form__radio-group">
+						<FormRadio
+							label={ translate( 'Access to cutting-edge technology' ) }
+							checked={ formData.topGoal === 'cutting_edge_tech' }
+							onChange={ () => setFormData( { ...formData, topGoal: 'cutting_edge_tech' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'Comprehensive support and troubleshooting' ) }
+							checked={ formData.topGoal === 'comprehensive_support' }
+							onChange={ () => setFormData( { ...formData, topGoal: 'comprehensive_support' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'Lead generation and new business opportunities' ) }
+							checked={ formData.topGoal === 'lead_generation' }
+							onChange={ () => setFormData( { ...formData, topGoal: 'lead_generation' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'Training and education for your team' ) }
+							checked={ formData.topGoal === 'training_education' }
+							onChange={ () => setFormData( { ...formData, topGoal: 'training_education' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'Exclusive discounts or revenue-sharing options' ) }
+							checked={ formData.topGoal === 'exclusive_discounts' }
+							onChange={ () => setFormData( { ...formData, topGoal: 'exclusive_discounts' } ) }
+						/>
+					</div>
+				</FormField>
+
+				<FormField
+					label={ translate( 'What is the main goal you hope to achieve in 2025?' ) }
+					isRequired
+				>
+					<div className="blueprint-form__radio-group">
+						<FormRadio
+							label={ translate( 'Scaling the agency significantly' ) }
+							checked={ formData.mainGoal2025 === 'scaling_agency' }
+							onChange={ () => setFormData( { ...formData, mainGoal2025: 'scaling_agency' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'Diversifying offered services' ) }
+							checked={ formData.mainGoal2025 === 'diversifying_services' }
+							onChange={ () =>
+								setFormData( { ...formData, mainGoal2025: 'diversifying_services' } )
+							}
+						/>
+						<FormRadio
+							label={ translate( 'Increasing the number of long-term clients' ) }
+							checked={ formData.mainGoal2025 === 'increasing_clients' }
+							onChange={ () => setFormData( { ...formData, mainGoal2025: 'increasing_clients' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'Expanding into new markets or territories' ) }
+							checked={ formData.mainGoal2025 === 'expanding_markets' }
+							onChange={ () => setFormData( { ...formData, mainGoal2025: 'expanding_markets' } ) }
+						/>
+						<FormRadio
+							label={ translate( "Strengthening the agency's brand and reputation" ) }
+							checked={ formData.mainGoal2025 === 'strengthening_brand' }
+							onChange={ () => setFormData( { ...formData, mainGoal2025: 'strengthening_brand' } ) }
+						/>
+					</div>
+				</FormField>
+
+				<FormField
+					label={ translate(
+						"How does your agency typically work with clients regarding Automattic's solutions?"
+					) }
+					isRequired
+				>
+					<div className="blueprint-form__radio-group">
+						<FormRadio
+							label={ translate(
+								'We refer customers to Automattic products/services to purchase on their own'
+							) }
+							checked={ formData.workModel === 'refer_customers' }
+							onChange={ () => setFormData( { ...formData, workModel: 'refer_customers' } ) }
+						/>
+						<FormRadio
+							label={ translate(
+								"We purchase on our clients' behalf and resell Automattic products/services"
+							) }
+							checked={ formData.workModel === 'purchase_resell' }
+							onChange={ () => setFormData( { ...formData, workModel: 'purchase_resell' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'A combination of referring and reselling' ) }
+							checked={ formData.workModel === 'combination' }
+							onChange={ () => setFormData( { ...formData, workModel: 'combination' } ) }
+						/>
+						<FormRadio
+							label={ translate( 'Other models (please explain)' ) }
+							checked={ formData.workModel === 'other' }
+							onChange={ () => setFormData( { ...formData, workModel: 'other' } ) }
+						/>
+						{ formData.workModel === 'other' && (
+							<FormTextarea
+								value={ formData.specificApproach }
+								onChange={ () => {
+									// TODO: form data
+									return;
+								} }
+								placeholder={ translate( 'Add your explanation' ) }
+							/>
+						) }
+					</div>
+				</FormField>
+
+				<FormField
+					label={ translate(
+						`Is there anything specific about your agency's approach or any challenges you face that you would like us to consider when creating your blueprint?`
+					) }
+				>
+					<FormTextarea
+						value={ formData.specificApproach }
+						onChange={ ( e: React.ChangeEvent< HTMLTextAreaElement > ) =>
+							setFormData( { ...formData, specificApproach: e.target.value } )
+						}
+						placeholder={ translate( 'Add your approach' ) }
+					/>
+				</FormField>
+
+				<div className="blueprint-form__controls">
+					<Button variant="primary" onClick={ handleSubmit } className="blueprint-form__submit">
+						{ translate( 'Continue' ) }
+					</Button>
+				</div>
+			</div>
+		</Form>
+	);
+};
+
+export default BlueprintForm;
diff --git a/...r-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/style.scss b/...r-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/style.scss
@@ -0,0 +1,5 @@
+.blueprint-form {
+    h1 {
+        text-wrap: pretty;
+    }
+}
diff --git a/...-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx b/...-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx
@@ -0,0 +1,36 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import Form from 'calypso/a8c-for-agencies/components/form';
+import './style.scss';
+
+type Props = {
+	onContinue: () => void;
+	onSkip: () => void;
+};
+
+const ChoiceBlueprint: React.FC< Props > = ( { onContinue, onSkip } ) => {
+	const translate = useTranslate();
+
+	return (
+		<Form
+			className="choice-blueprint-form"
+			title={ translate( 'Grow your business with a free personalized blueprint' ) }
+			description={ translate(
+				'By answering a few simple questions, we’ll provide tips on maximizing your agency’s impact.'
+			) }
+		>
+			<p className="choice-blueprint__text">{ translate( 'Ready?' ) }</p>
+
+			<div className="choice-blueprint__buttons">
+				<Button className="choice-blueprint__button" variant="primary" onClick={ onContinue }>
+					{ translate( 'Yes' ) }
+				</Button>
+				<Button className="choice-blueprint__button" variant="secondary" onClick={ onSkip }>
+					{ translate( 'Not right now' ) }
+				</Button>
+			</div>
+		</Form>
+	);
+};
+
+export default ChoiceBlueprint;
diff --git a/...agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/style.scss b/...agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/style.scss
@@ -0,0 +1,22 @@
+.choice-blueprint-form {
+    h1 {
+        text-wrap: pretty;
+    }
+}
+
+.choice-blueprint__text {
+    font-size: 1rem;
+    font-weight: 400;
+    color: var(--studio-gray-60);
+    max-width: 460px;
+}
+
+.choice-blueprint__buttons {
+    display: flex;
+    gap: 24px;
+
+    .components-button {
+        width: 180px;
+        justify-content: center;
+    }
+}
diff --git a/...-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx b/...-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx
@@ -62,9 +62,9 @@ const SignupContactForm = ( { onContinue }: Props ) => {
 	return (
 		<Form
 			className="signup-contact-form"
-			title={ translate( 'Sign up' ) }
+			title={ translate( 'Sign up and unlock the blueprint to grow your agency’s business' ) }
 			description={ translate(
-				'Join 5000+ agencies and grow your business with Automattic for Agencies. It only takes two minutes!'
+				'Join 5000+ agencies and grow your business with Automattic for Agencies.'
 			) }
 		>
 			<div className="signup-multi-step-form__fields">

diff --git a/...for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/style.scss b/...for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/style.scss
@@ -5,38 +5,6 @@
 	overflow-y: auto;
 	flex: 1;
 
-	// Customize scrollbar
-	&::-webkit-scrollbar {
-		width: 8px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: var(--studio-gray-0);
-		border-radius: 4px;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--studio-gray-20);
-		border-radius: 4px;
-
-		&:hover {
-			background: var(--studio-gray-30);
-		}
-	}
-}
-
-.signup-contact-form {
-    &.a4a-form {
-        gap: 1rem;
-    }
-    & .a4a-form__heading {
-        text-align: left;
-        margin-bottom: 0;
-
-        & .a4a-form__heading-description {
-            margin: 0;
-        }
-    }
 }
 
 .contact-form__phone-input {
@@ -92,7 +60,7 @@
 
 	&-label {
 		font-size: 0.875rem;
-		font-weight: 500;
+		font-weight: 600;
 		color: var(--studio-gray-80);
 		margin-bottom: 8px;
 	}

diff --git a/...ncies/sections/signup/signup-v2/components/multi-step-form/finish-signup-survey/index.tsx b/...ncies/sections/signup/signup-v2/components/multi-step-form/finish-signup-survey/index.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import Form from 'calypso/a8c-for-agencies/components/form';
+
+type Props = {
+	onContinue: () => void;
+};
+
+const FinishSignupSurvey: React.FC< Props > = ( { onContinue } ) => {
+	const translate = useTranslate();
+
+	return (
+		<Form
+			className="finish-signup-survey-form"
+			title={ translate( 'Thank you!' ) }
+			description={ translate(
+				'We have sent you an email with more details about the program and instructions for logging in. You will also receive your blueprint in the coming days; keep an eye out for it!'
+			) }
+		>
+			<div>
+				<Button
+					className="finish-signup-survey-form__button"
+					variant="primary"
+					onClick={ onContinue }
+				>
+					{ translate( 'Close survey' ) }
+				</Button>
+			</div>
+		</Form>
+	);
+};
+
+export default FinishSignupSurvey;
diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx
@@ -1,8 +1,11 @@
 import { useTranslate } from 'i18n-calypso';
 import { useMemo, useState } from 'react';
 import StepProgress from '../step-progress';
+import BlueprintForm from './blueprint-form';
+import ChoiceBlueprint from './choice-blueprint';
 import SignupContactForm from './contact-form';
-
+import FinishSignupSurvey from './finish-signup-survey';
+import PersonalizationForm from './personalization';
 import './style.scss';
 
 const MultiStepForm = () => {
@@ -11,11 +14,15 @@ const MultiStepForm = () => {
 
 	const steps = [
 		{ label: translate( 'Sign up' ), isActive: currentStep === 1, isComplete: currentStep > 1 },
-		{ label: translate( 'Personalize' ), isActive: currentStep === 2, isComplete: currentStep > 2 },
 		{
-			label: translate( 'Complete setup' ),
-			isActive: currentStep === 3,
-			isComplete: currentStep > 3,
+			label: translate( 'Personalize' ),
+			isActive: currentStep === 2 || currentStep === 3 || currentStep === 4,
+			isComplete: currentStep > 2,
+		},
+		{
+			label: translate( 'Finish survey' ),
+			isActive: currentStep === 5,
+			isComplete: currentStep > 5,
 		},
 	];
 
@@ -24,9 +31,20 @@ const MultiStepForm = () => {
 			case 1:
 				return <SignupContactForm onContinue={ () => setCurrentStep( 2 ) } />;
 			case 2:
-				return <SignupContactForm onContinue={ () => setCurrentStep( 3 ) } />;
+				return <PersonalizationForm onContinue={ () => setCurrentStep( 3 ) } />;
 			case 3:
-				return <div>Finish</div>;
+				return (
+					<ChoiceBlueprint
+						onContinue={ () => setCurrentStep( 4 ) }
+						onSkip={ () => setCurrentStep( 5 ) }
+					/>
+				);
+			case 4:
+				return <BlueprintForm onContinue={ () => setCurrentStep( 5 ) } />;
+			case 5:
+				return <FinishSignupSurvey onContinue={ () => setCurrentStep( 6 ) } />;
+			case 6:
+				return <h1>Thank you!</h1>;
 			default:
 				return null;
 		}