A4A: add forms for new signup flow #99186

andrii-lysenko · 2025-02-01T05:04:16Z

Resolves https://github.com/Automattic/automattic-for-agencies-dev/issues/1728

Proposed Changes

Adds pages to new signup flow

Screen.Recording.2025-01-31.at.8.53.14.PM.mov

Screenshots for translations:

Why are these changes being made?

Testing Instructions

Navigate to /signup/wc-asia and check behavior

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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
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)?

github-actions · 2025-02-01T05:04:27Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-02-01T05:05:27Z

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

Sections (~4424 bytes added 📈 [gzipped])

name                     parsed_size            gzip_size
a8c-for-agencies-signup     +17493 B  (+12.2%)    +4424 B  (+10.3%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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.

yashwin

Thanks for working on this!

I have left some comments. Please let me know your thoughts!

...c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx

yashwin · 2025-02-03T07:39:46Z

...c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx

+						<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' } ) }
+						/>


[Non-blocker] Maybe we could thinking of creating an array with all the radio fields and map through it and render instead of repeating it.

Sure, think it's great idea. This is just a quickly bootstrapped version so I could start testing out the backend endpoints. I think we could address these in specific tasks for each page

yashwin · 2025-02-03T07:50:58Z

...c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx

+						<FormRadio
+							label={ translate( 'Access to cutting-edge technology' ) }
+							checked={ formData.topGoal === 'cutting_edge_tech' }
+							onChange={ () => setFormData( { ...formData, topGoal: 'cutting_edge_tech' } ) }
+						/>


Can we add htmlFor and id to all the fields to make the text clickable to check/uncheck the radio.

Suggested change

<FormRadio

label={ translate( 'Access to cutting-edge technology' ) }

checked={ formData.topGoal === 'cutting_edge_tech' }

onChange={ () => setFormData( { ...formData, topGoal: 'cutting_edge_tech' } ) }

/>

<FormRadio

htmlFor="cutting_edge_tech"

id="cutting_edge_tech"

label={ translate( 'Access to cutting-edge technology' ) }

checked={ formData.topGoal === 'cutting_edge_tech' }

onChange={ () => setFormData( { ...formData, topGoal: 'cutting_edge_tech' } ) }

/>

...-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/style.scss

...for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx

yashwin · 2025-02-03T08:00:27Z

client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx

+			case 5:
+				return <FinishSignupSurvey onContinue={ () => setCurrentStep( 6 ) } />;
+			case 6:
+				return <h1>Thank you!</h1>;


Should we translate this?

It's a placeholder for now. We will check if we would need this page or not.

...-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/index.tsx

...for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/style.scss

yashwin · 2025-02-03T08:10:41Z

...for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/style.scss

+            font-size: rem(14px);
+            font-weight: 600;


Can we use A4A Typography.

jkguidaven · 2025-02-03T13:35:37Z

For scroll behavior we should probably move the scrollbar at the edge.

cc @madebynoam for input

matticbot · 2025-02-03T22:49:26Z

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

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

notifications
odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug a4a/add-signup-multiple-steps-form-pages on your sandbox.

yashwin

@andrii-lysenko: It looks like you left a comment on a different PR.

I'm okay with addressing the comments in a different PR as long as we keep track of it. They are very easy to miss, as they are in 2 different PRs.

I would suggest we address the comments related to styles in this PR. But, I'll leave that to you!

I'm approving the PR now, as these changes are not live yet.

I think we should also add a feature flag for this as the page is live in production.

andrii-lysenko · 2025-02-04T17:52:11Z

@yashwin yes, sorry for confusion. So I did some updates:

Closed A4A: add signup multiple steps form #99137 to avoid confusion and merge problems.
Added feature flag a4a-wc-asia-signup-enabled so new page is only available when it's enabled.
Fixed most small issues except: Typography usage, htmlFor and id used for form fields, dark mode for pages (there's a separate task), and mapping fields as you suggested. These can be addressed in separate PRs for each page.

The main goal of this PR was to have a quick prototype ready to be able to test backend flows earlier and address all the problems and styles separately, which come out not that ideal.

cc @jkguidaven

a8ci18n · 2025-02-06T02:21:57Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17231082

Some locales (Brazilian Portuguese, Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @andrii-lysenko for including a screenshot in the description! This is really helpful for our translators.

andrii-lysenko added 2 commits January 30, 2025 17:29

A4A: add signup multiple steps form

29836bc

A4A: add forms for new signup flow

6ddcb0f

andrii-lysenko requested a review from a team February 1, 2025 05:04

andrii-lysenko self-assigned this Feb 1, 2025

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Feb 1, 2025

yashwin reviewed Feb 3, 2025

View reviewed changes

Refactor per suggestions

fc6da54

andrii-lysenko changed the base branch from a4a/add-signup-multiple-steps-form to trunk February 3, 2025 22:40

use preventWindows

79502bb

yashwin approved these changes Feb 4, 2025

View reviewed changes

andrii-lysenko mentioned this pull request Feb 4, 2025

A4A: add signup multiple steps form #99137

Closed

8 tasks

adding feature flag and refactor styles

acc23f3

andrii-lysenko merged commit 9a54ac5 into trunk Feb 5, 2025
13 checks passed

andrii-lysenko deleted the a4a/add-signup-multiple-steps-form-pages branch February 5, 2025 23:35

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 Feb 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A4A: add forms for new signup flow #99186

A4A: add forms for new signup flow #99186

andrii-lysenko commented Feb 1, 2025 •

edited

Loading

github-actions bot commented Feb 1, 2025 •

edited by matticbot

Loading

matticbot commented Feb 1, 2025 •

edited

Loading

yashwin left a comment

yashwin Feb 3, 2025

andrii-lysenko Feb 3, 2025

yashwin Feb 3, 2025

yashwin Feb 3, 2025

andrii-lysenko Feb 3, 2025

yashwin Feb 3, 2025

jkguidaven commented Feb 3, 2025 •

edited

Loading

matticbot commented Feb 3, 2025 •

edited

Loading

yashwin left a comment

andrii-lysenko commented Feb 4, 2025 •

edited

Loading

a8ci18n commented Feb 6, 2025 •

edited

Loading

A4A: add forms for new signup flow #99186

A4A: add forms for new signup flow #99186

Conversation

andrii-lysenko commented Feb 1, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Feb 1, 2025 • edited by matticbot Loading

matticbot commented Feb 1, 2025 • edited Loading

yashwin left a comment

Choose a reason for hiding this comment

yashwin Feb 3, 2025

Choose a reason for hiding this comment

andrii-lysenko Feb 3, 2025

Choose a reason for hiding this comment

yashwin Feb 3, 2025

Choose a reason for hiding this comment

yashwin Feb 3, 2025

Choose a reason for hiding this comment

andrii-lysenko Feb 3, 2025

Choose a reason for hiding this comment

yashwin Feb 3, 2025

Choose a reason for hiding this comment

jkguidaven commented Feb 3, 2025 • edited Loading

matticbot commented Feb 3, 2025 • edited Loading

yashwin left a comment

Choose a reason for hiding this comment

andrii-lysenko commented Feb 4, 2025 • edited Loading

a8ci18n commented Feb 6, 2025 • edited Loading

andrii-lysenko commented Feb 1, 2025 •

edited

Loading

github-actions bot commented Feb 1, 2025 •

edited by matticbot

Loading

matticbot commented Feb 1, 2025 •

edited

Loading

jkguidaven commented Feb 3, 2025 •

edited

Loading

matticbot commented Feb 3, 2025 •

edited

Loading

andrii-lysenko commented Feb 4, 2025 •

edited

Loading

a8ci18n commented Feb 6, 2025 •

edited

Loading