Update the email comparison page to use a stacked card layout and embed account creation #51062

daledupreez · 2021-03-15T11:48:41Z

Changes proposed in this Pull Request

This PR implements the basic design for the new Email Comparison page from pcDL0W-79-p2, which includes a stacked card layout and account creation from within the page.
Note that this PR depends on Implement mailbox provisioning components for Email/Titan #51217 for the Email account creation component in that PR, and existing logic for Google Workspace. As such, some of the form fields from that PR may change slightly. (The most likely change is to increase the height to support the password reset field.)

You can access the new layout by navigating to the email comparison page for a domain without email (/email/:domain/manage/:siteSlug?titan/provision-mailboxes or via Upgrades -> Domains -> Add (next to a domain), and then adding ?flags=titan/provision-mailboxes to the URL.) Note: this flag has been updated from an earlier version of this PR

The following implementation items are not covered by this PR:

Implement Email Forwarding creation logic -- we may take this on in a later PR, but it's not critical
Implement state to indicate email can't be purchased for the domain
Implement states where one or more of the options can't be purchased
Implement handling for cases where the domain isn't eligible for the free trial -- we'll take this on later this week, as we don't need this to launch this functionality to users as-is

Screenshots

Before:

After:

Initial, unexpanded state

Google Workspace expanded

Email Forwarding expanded

Testing instructions

Verify that you can add all three types of email account via this UI.

matticbot · 2021-03-15T11:48:43Z

Test live: https://calypso.live/?branch=add/updated-email-comparison-page

a8ci18n · 2021-03-15T11:57:07Z

client/my-sites/email/email-providers-comparison/index.jsx

+			translate( '30GB storage' ),
+			translate( 'Email, calendars, and contacts' ),
+			translate( 'One-click import of existing emails and contacts' ),
+			translate( 'Apps for Android and iOS' ),


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 4 times:
translate( 'Jetpack for Android and iOS' ) ES Score: 7

a8ci18n · 2021-03-15T11:57:08Z

client/my-sites/email/email-providers-comparison/index.jsx

+				? newUsers( domain.name )
+				: this.state.googleUsers;
+
+		const formattedPrice = translate( '{{price/}} /user /month billed yearly', {


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 29 times:
translate( '%(price)s per month, billed yearly' ) ES Score: 8
See 1 additional suggestions in the PR translation status page

matticbot · 2021-03-15T11:58:20Z

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

Sections (~1122 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
email      +6355 B  (+1.5%)    +1122 B  (+0.9%)

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.

a8ci18n · 2021-03-15T13:36:32Z

client/my-sites/email/email-providers-comparison/index.jsx

+			comment: '{{price/}} is the formatted price, e.g. $20',
+		};
+		const formattedPrice = config.isEnabled( 'email/centralized-home' )
+			? translate( '{{price/}} /user /month billed annually', priceArguments )


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 3 times:
translate( 'per month{{br/}}billed yearly' ) ES Score: 6

a8ci18n · 2021-03-16T11:34:47Z

client/my-sites/email/email-providers-comparison/index.jsx

+			<>
+				<FormFieldset>
+					<FormLabel>
+						{ translate( 'Emails sent to' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 30 times:
translate( 'Emails sent to', { context: 'Form label: Email sent to [address] (will arrive at...)'} ) ES Score: 12
See 1 additional suggestions in the PR translation status page

a8ci18n · 2021-03-16T11:34:47Z

client/my-sites/email/email-providers-comparison/index.jsx

+				</FormFieldset>
+				<FormFieldset>
+					<FormLabel>
+						{ translate( 'Will be forwarded to' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 22 times:
translate( 'Will be forwarded to', { context: 'Form label: (Email sent to [address]) will arrive at [address]'} ) ES Score: 15
See 1 additional suggestions in the PR translation status page

a8ci18n · 2021-03-21T19:53:37Z

client/lib/titan/new-mailbox.js

+	value,
+	error:
+		! error && ! /^[0-9a-z_-](\.?[0-9a-z_-])*$/i.test( value )
+			? translate( 'Only numbers, letters, dashes, underscores, and periods are allowed.' )


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 18 times:
translate( 'Only numbers, letters, dashes, underscores, apostrophes and periods are allowed.' ) ES Score: 12
See 2 additional suggestions in the PR translation status page

hambai

Hmm - I tried testing this but the areAllMailboxesValid returns false (I guess because alternativeEmail is empty). Is that intentional?

daledupreez · 2021-03-22T19:55:02Z

Hmm - I tried testing this but the areAllMailboxesValid returns false (I guess because alternativeEmail is empty). Is that intentional?

Definitely not intentional -- the validation should allow alternativeEmail to be empty if we're not showing the field (which is the case while we're adding it on the back end.

I'll do some testing and exploring in the morning to see what's going on.

…components

daledupreez · 2021-03-24T07:59:32Z

I am closing this massive PR in favour of #51298 and #51307.

daledupreez added the Professional Email Issues with Professional Email powered by Titan label Mar 15, 2021

daledupreez requested a review from a team March 15, 2021 11:48

daledupreez self-assigned this Mar 15, 2021

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 15, 2021

a8ci18n reviewed Mar 15, 2021

View reviewed changes

daledupreez force-pushed the add/updated-email-comparison-page branch from 306c643 to 95309df Compare March 15, 2021 13:28

a8ci18n reviewed Mar 15, 2021

View reviewed changes

a8ci18n reviewed Mar 16, 2021

View reviewed changes

daledupreez mentioned this pull request Mar 16, 2021

Update domain email upsell to promote Email and G Suite #50152

Closed

daledupreez force-pushed the add/updated-email-comparison-page branch from ad94fa3 to 458c207 Compare March 19, 2021 14:20

daledupreez changed the base branch from trunk to add/titan-mailbox-provisioning-new-components March 21, 2021 18:58

daledupreez force-pushed the add/updated-email-comparison-page branch from ce80d96 to f502056 Compare March 21, 2021 19:46

a8ci18n reviewed Mar 21, 2021

View reviewed changes

daledupreez force-pushed the add/titan-mailbox-provisioning-new-components branch 2 times, most recently from 82d420c to 3231985 Compare March 22, 2021 10:02

daledupreez force-pushed the add/updated-email-comparison-page branch from ab5507b to 5607008 Compare March 22, 2021 10:25

daledupreez changed the title ~~[WIP] Update the email comparison page to use a stacked card layout~~ Update the email comparison page to use a stacked card layout and embed account creation Mar 22, 2021

daledupreez marked this pull request as ready for review March 22, 2021 11:13

hambai reviewed Mar 22, 2021

View reviewed changes

Base automatically changed from add/titan-mailbox-provisioning-new-components to trunk March 22, 2021 18:13

daledupreez added 5 commits March 22, 2021 21:55

Refactor pricing and existing email forwarding notices into separate …

2191331

…components

Refactor unused mailbox notice into separate component

00b003f

Rename directory

fd5e87a

Refactor pricing and existing email forwarding notices into separate …

eb363cd

…components

Refactor unused mailbox notice into separate component

0828651

daledupreez added 24 commits March 22, 2021 22:11

Rename directory

0c87a33

Initial skeleton for cards and content

1a4cae7

Fix top alignment of features

828141e

Initial work to add G Suite users from comparison page

965eedd

Refactor based on changes from PR #50983

d32d96d

Add expansion logic

9702776

Add starter content for Email Forwarding

b36d61a

Reduce whitespace below card titles

30ed224

Fix event handling bugs

456c081

Fix text weight for domain suffix fields

f930e7e

Remove proposed wording for now

138a4f9

Use account provisioning feature flag for new Email Comparison page

911f9b0

Don't require button label - it may be in the form fields

6629c6d

Show errors adding G Suite/Google Workspace on the same page

c72e521

Wire in component for managing users

599668a

Don't disable button for validation failures

e71f359

Fix conflation of expand button and the post-form button

39a479e

Minor style updates for Titan form

cf0fdc0

Implement expand toggles for cards

95a24d6

Fix expand button for Email

5c78d67

Rename ctaLabel to expandButtonLabel

515b7c1

Fix style issues on mobile

4b2b7e2

Fix style for non-mobile expand button

673a23e

Just show button without a form for Email Forwarding

fa1b86b

daledupreez force-pushed the add/updated-email-comparison-page branch from 4f596cd to fa1b86b Compare March 22, 2021 20:11

daledupreez mentioned this pull request Mar 23, 2021

Update email comparison page layout #51307

Merged

daledupreez closed this Mar 24, 2021

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update the email comparison page to use a stacked card layout and embed account creation #51062

Update the email comparison page to use a stacked card layout and embed account creation #51062

daledupreez commented Mar 15, 2021 •

edited

matticbot commented Mar 15, 2021

a8ci18n Mar 15, 2021

a8ci18n Mar 15, 2021

matticbot commented Mar 15, 2021 •

edited

a8ci18n Mar 15, 2021

a8ci18n Mar 16, 2021

a8ci18n Mar 16, 2021

a8ci18n Mar 21, 2021

hambai left a comment

daledupreez commented Mar 22, 2021

daledupreez commented Mar 24, 2021

Update the email comparison page to use a stacked card layout and embed account creation #51062

Update the email comparison page to use a stacked card layout and embed account creation #51062

Conversation

daledupreez commented Mar 15, 2021 • edited

Changes proposed in this Pull Request

Screenshots

Testing instructions

matticbot commented Mar 15, 2021

a8ci18n Mar 15, 2021

Choose a reason for hiding this comment

a8ci18n Mar 15, 2021

Choose a reason for hiding this comment

matticbot commented Mar 15, 2021 • edited

a8ci18n Mar 15, 2021

Choose a reason for hiding this comment

a8ci18n Mar 16, 2021

Choose a reason for hiding this comment

a8ci18n Mar 16, 2021

Choose a reason for hiding this comment

a8ci18n Mar 21, 2021

Choose a reason for hiding this comment

hambai left a comment

Choose a reason for hiding this comment

daledupreez commented Mar 22, 2021

daledupreez commented Mar 24, 2021

daledupreez commented Mar 15, 2021 •

edited

matticbot commented Mar 15, 2021 •

edited