Email: Refine copy of Email Comparison pages #60303

stephanethomas · 2022-01-20T17:07:27Z

This pull request updates the copy of the Email Comparison page as well as the In-Depth Comparison page to address a number of comments made internally on Slack. I've also made a number of refinements with the aim of making this copy more consistent as well as providing users with more points of comparison, so that they can chose the most appropriate solution for their needs (some features such as real-time collaboration should make it more obvious why Google Workspace and Professional Email have different price points):

`Email Comparison` page

Before	After

`In-Depth Comparison` page (desktop)

Before	After

`In-Depth Comparison` page (mobile)

Before	After

`Purchases` page

Note I've also updated the label of Google Workspace on the Purchases page, so it mentions mailboxes rather than productivity tools first:

Before	After

Testing instructions

Note you will have to append ?flags=emails/in-depth-comparison to the url of the page (and reload it) if you're testing those changes on a live branch as this feature has not been enabled on this environment yet:

Run git checkout update/copy-in-email-comparison-pages and start your server, or access a live branch
Log into a WordPress.com account with a domain but no email
Open the Emails page
Click the Add Email button of that domain to access the Email Comparison page
Assert that the page looks like the screenshots above
Click the See how they compare link to access the In-Depth Comparison page
Assert that the page looks like the screenshots above on desktop and mobile
Navigate to the Purchases page
Assert that Google Workspace and G Suite subscriptions have the right label

github-actions · 2022-01-20T17:07:48Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

a8ci18n · 2022-01-20T17:14:30Z

client/lib/purchases/index.js

@@ -673,7 +673,7 @@ function purchaseType( purchase ) {
 	}

 	if ( isGSuiteOrGoogleWorkspace( purchase ) ) {
-		return i18n.translate( 'Productivity Tools and Mailboxes at %(domain)s', {
+		return i18n.translate( 'Mailboxes and Productivity Tools at %(domain)s', {


⚠️ This change will be queued for retranslation. We'll display the English text until then.

a8ci18n · 2022-01-20T17:14:31Z

packages/wpcom-checkout/src/checkout-labels.ts

@@ -41,10 +41,10 @@ export function getSublabel( serverCartItem: ResponseCartProduct ): string {

 	if ( isGoogleWorkspace( serverCartItem ) || isGSuiteOrExtraLicenseProductSlug( productSlug ) ) {
 		if ( isRenewalItem ) {
-			return String( translate( 'Productivity Tools and Mailboxes Renewal' ) );
+			return String( translate( 'Mailboxes and Productivity Tools Renewal' ) );


⚠️ This change will be queued for retranslation. We'll display the English text until then.
ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 18 times:
translate( 'Productivity Tools and Mailboxes' ) ES Score: 9

a8ci18n · 2022-01-20T17:14:31Z

packages/wpcom-checkout/src/checkout-labels.ts

 		}

-		return String( translate( 'Productivity Tools and Mailboxes' ) );
+		return String( translate( 'Mailboxes and Productivity Tools' ) );


⚠️ This change will be queued for retranslation. We'll display the English text until then.
ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 18 times:
translate( 'Productivity Tools and Mailboxes Renewal' ) ES Score: 12

matticbot · 2022-01-20T17:18:55Z

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

Sections (~129 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
email        +1209 B  (+0.2%)     +122 B  (+0.1%)
domains        +46 B  (+0.0%)      +10 B  (+0.0%)

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 · 2022-01-24T14:11:30Z

client/my-sites/email/email-providers-comparison/in-depth/comparison-table.tsx

+
+				<tr className="email-providers-in-depth-comparison-table__separator">
+					<td className="email-providers-in-depth-comparison-table__feature">
+						{ translate( 'Collaboration' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 36 times:
translate( 'Collaboration', { context: 'Theme Showcase term name'} ) ES Score: 18
See 1 additional suggestions in the PR translation status page

a8ci18n · 2022-01-24T14:11:31Z

client/my-sites/email/email-providers-comparison/in-depth/data.tsx

 		support: translate( '24/7 support via email' ),
-		tools: translate( 'Gmail, Calendar, Meet, Chat, Drive, Docs, Sheets, Slides and more' ),
+		tools: translate(
+			'Gmail, Calendar, Contacts, Meet, Chat, Drive, Docs, Sheets, Slides and more'


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2022-01-24T14:11:32Z

client/my-sites/email/email-providers-comparison/in-depth/data.tsx

 	},
 	supportUrl: ADDING_GSUITE_TO_YOUR_SITE,
+	table: {
+		access: translate( 'Online & offline' ),
+		collaboration: translate( 'Real-time' ),


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 22 times:
translate( 'Real-time', { context: 'Real-time VaultPress Backups'} ) ES Score: 14
See 1 additional suggestions in the PR translation status page

poligilad-auto

Looks good to me 👍
WDYT @semihakocer?

Actually, one thing that bothers me, when adding new comparison points to emphasize why Google is a good solution, it seems like we are showing Professional email as a partial/not so good solution.

daledupreez

Functionally, this is working as noted, but I do have some comments on the content.

daledupreez · 2022-01-25T10:08:56Z

client/my-sites/email/email-provider-features/index.js

 EmailProviderFeatures.propTypes = {
-	features: PropTypes.oneOfType( [ PropTypes.node, PropTypes.string ] ),
+	features: PropTypes.arrayOf( PropTypes.oneOfType( [ PropTypes.node, PropTypes.string ] ) )
+		.isRequired,
 	logos: PropTypes.arrayOf( PropTypes.object ),
 };


Minor note, but it may be worth using TS-in-JSDoc comments rather than PropTypes, especially for functional components. As an example, this could be something like:

/** * @param { { features: TranslateResult[], logos?: Component[] }} features should be a list of features to list, and logos should be a list of logo objects. */ function EmailProviderFeatures( { features, logos } ) {

Thank you for providing an example. I think it would be better to convert this component to TypeScript but that's for another day 🙂.

client/my-sites/email/email-providers-comparison/in-depth/data.tsx

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

...providers-stacked-comparison/email-provider-stacked-card/email-provider-stacked-features.tsx

daledupreez · 2022-01-25T11:23:43Z

...my-sites/email/email-providers-stacked-comparison/provider-cards/professional-email-card.tsx

 		translate( '30GB storage' ),
+		translate( 'Email, calendars, and contacts' ),


Should we call out that users can access their email from WordPress.com as a feature? We may need to wait for the embedded inbox to ship before we promote that feature.

We can add it for now without highlighting it maybe.

I would vote for waiting to avoid confusing users.

Sounds good

a8ci18n · 2022-02-02T15:13:05Z

...my-sites/email/email-providers-stacked-comparison/provider-cards/professional-email-card.tsx

@@ -64,7 +65,9 @@ const professionalEmailCardInformation: ProviderCardProps = {
 	expandButtonLabel: translate( 'Select' ),
 	providerKey: 'titan',
 	showExpandButton: true,
-	description: translate( 'Integrated email solution for your WordPress.com site.' ),
+	description: translate(
+		'Integrated email solution with powerful features. Manage your email and more on any device.'


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Easy-to-use email with incredibly powerful features. Manage your email and more on any device.' ) ES Score: 6

a8ci18n · 2022-02-02T15:13:06Z

client/my-sites/email/email-providers-comparison/in-depth/data.tsx

 		support: translate( '24/7 support via email' ),
-		tools: translate( 'Integrated email management, Inbox, Calendar and Contacts' ),
+		tools: translate( 'Inbox, Calendar and Contacts' ),


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 18 times:
translate( 'Inbox, calendars, and contacts' ) ES Score: 11

I've removed Integrated email management as it's not a tool per see. Or maybe I don't understand what it refers to? If that means that we can manage mailboxes from Calypso then it's also the case for Google Workspace.

a8ci18n · 2022-02-02T15:13:06Z

client/my-sites/email/email-providers-comparison/in-depth/data.tsx

 		importing: translate( 'Easy to import your existing emails and contacts' ),
-		storage: translate( '30GB storage' ),
+		storage: translate( '30GB storage for emails and cloud storage' ),


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 22 times:
translate( '30GB or unlimited cloud storage' ) ES Score: 7
See 1 additional suggestions in the PR translation status page

stephanethomas · 2022-02-02T15:18:11Z

client/my-sites/email/email-provider-features/list.js

@@ -64,7 +66,7 @@ const getTitanFeatures = ( isMonthlyProduct = true ) => {
 		translate( 'Send and receive from your custom domain' ),
 		translate( '30GB storage' ),
 		translate( 'Email, calendars, and contacts' ),
-		translate( 'One-click import of existing emails and contacts' ),
+		translate( '24/7 support via email' ),


These changes are for the old Email Comparison page that we only show in the domain upsell flow. I'm just making sure that we use the same list of features here.

stephanethomas · 2022-02-02T15:25:12Z

client/my-sites/email/email-providers-comparison/price/google-workspace.tsx

+	if ( ! domain ) {
+		return <></>;
+	}
+


This fixes an error triggered when refreshing the In-Depth Comparison page.

stephanethomas · 2022-02-02T15:37:24Z

@daledupreez @semihakocer : I've took your feedback into account, and refined the copy again. This is still open for debate, so do not hesitate to comment 🙂. I've also made some very minor CSS tweaks.

semihakocer · 2022-02-02T22:42:52Z

The changes look good to me @stephanethomas! Thanks for all your work 🚢

daledupreez

This LGTM! My only request is that we change two uses of "Include" to "Includes" before we request translation.

I also want to note that we have additional comments for the Professional Email features that we should look at in a follow-up PR, possibly after further discussion: p1643385695547649/1643101084.008900-slack-C01QR3S1QJH

client/me/purchases/manage-purchase/index.jsx

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

a8ci18n · 2022-02-03T11:17:00Z

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

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

a8ci18n · 2022-02-11T10:28:59Z

Translation for this Pull Request has now been finished.

…light email before the rest

…Email Comparison page

…parison page

…price component This fixes the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'type') at isRegisteredDomain (registered-domains.js:13:17) at eval (gsuite-supported-domain.js:28:100) at Array.filter (<anonymous>) at getGSuiteSupportedDomains (gsuite-supported-domain.js:23:18) at hasGSuiteSupportedDomain (gsuite-supported-domain.js:45:10) at GoogleWorkspacePrice (google-workspace.tsx:51:127) at renderWithHooks (react-dom.development.js:14985:18) at mountIndeterminateComponent (react-dom.development.js:17811:13) at beginWork (react-dom.development.js:19049:16) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14)

stephanethomas added G Suite Professional Email Issues with Professional Email powered by Titan labels Jan 20, 2022

stephanethomas self-assigned this Jan 20, 2022

stephanethomas force-pushed the update/copy-in-email-comparison-pages branch from 7dfe5b1 to 515dcf0 Compare January 20, 2022 17:08

a8ci18n reviewed Jan 20, 2022

View reviewed changes

stephanethomas force-pushed the update/copy-in-email-comparison-pages branch from 515dcf0 to b4a4f44 Compare January 24, 2022 14:05

a8ci18n reviewed Jan 24, 2022

View reviewed changes

stephanethomas marked this pull request as ready for review January 24, 2022 14:28

stephanethomas requested review from a team as code owners January 24, 2022 14:28

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

stephanethomas requested review from poligilad-auto and semihakocer January 24, 2022 14:42

sirbrillig removed the request for review from a team January 24, 2022 16:53

poligilad-auto approved these changes Jan 25, 2022

View reviewed changes

daledupreez reviewed Jan 25, 2022

View reviewed changes

stephanethomas force-pushed the update/copy-in-email-comparison-pages branch from b4a4f44 to 522faa4 Compare February 2, 2022 15:06

a8ci18n reviewed Feb 2, 2022

View reviewed changes

stephanethomas commented Feb 2, 2022

View reviewed changes

semihakocer approved these changes Feb 2, 2022

View reviewed changes

daledupreez approved these changes Feb 3, 2022

View reviewed changes

client/me/purchases/manage-purchase/index.jsx Outdated Show resolved Hide resolved

client/my-sites/email/email-providers-comparison/index.jsx Outdated Show resolved Hide resolved

stephanethomas force-pushed the update/copy-in-email-comparison-pages branch from 522faa4 to 8ffd43a Compare February 3, 2022 11:03

stephanethomas added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Feb 3, 2022

stephanethomas added 7 commits February 15, 2022 13:05

G Suite: Update product label of Google Workspace and G Suite to high…

7434519

…light email before the rest

Emails: Use different toggle label when list of features is shown on …

2f82e71

…Email Comparison page

Emails: Refine display of list of features and app logos on Email Com…

350b1fa

…parison page

Emails: Refine copy and list of features on Email Comparison pages

c25b987

Emails: Refine copy and alignments on Email Comparison pages

29e9c83

Emails: Fix typo for Google Workspace description

0da85c9

stephanethomas force-pushed the update/copy-in-email-comparison-pages branch from 8ffd43a to 0da85c9 Compare February 15, 2022 13:05

stephanethomas merged commit 957609d into trunk Feb 15, 2022

stephanethomas deleted the update/copy-in-email-comparison-pages branch February 15, 2022 13:33

github-actions bot removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Feb 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Email: Refine copy of Email Comparison pages #60303

Email: Refine copy of Email Comparison pages #60303

stephanethomas commented Jan 20, 2022 •

edited

Loading

github-actions bot commented Jan 20, 2022 •

edited by matticbot

Loading

a8ci18n Jan 20, 2022

a8ci18n Jan 20, 2022

a8ci18n Jan 20, 2022

matticbot commented Jan 20, 2022 •

edited

Loading

a8ci18n Jan 24, 2022

a8ci18n Jan 24, 2022

a8ci18n Jan 24, 2022

poligilad-auto left a comment •

edited

Loading

daledupreez left a comment

daledupreez Jan 25, 2022

stephanethomas Feb 2, 2022

daledupreez Jan 25, 2022

semihakocer Jan 31, 2022

stephanethomas Feb 2, 2022

semihakocer Feb 2, 2022

a8ci18n Feb 2, 2022

a8ci18n Feb 2, 2022

stephanethomas Feb 2, 2022

a8ci18n Feb 2, 2022

stephanethomas Feb 2, 2022

stephanethomas Feb 2, 2022

stephanethomas commented Feb 2, 2022

semihakocer commented Feb 2, 2022

daledupreez left a comment

a8ci18n commented Feb 3, 2022

a8ci18n commented Feb 11, 2022

		translate( '30GB storage' ),
		translate( 'Email, calendars, and contacts' ),

Email: Refine copy of Email Comparison pages #60303

Email: Refine copy of Email Comparison pages #60303

Conversation

stephanethomas commented Jan 20, 2022 • edited Loading

Email Comparison page

In-Depth Comparison page (desktop)

In-Depth Comparison page (mobile)

Purchases page

Testing instructions

github-actions bot commented Jan 20, 2022 • edited by matticbot Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matticbot commented Jan 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

poligilad-auto left a comment • edited Loading

Choose a reason for hiding this comment

daledupreez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephanethomas commented Feb 2, 2022

semihakocer commented Feb 2, 2022

daledupreez left a comment

Choose a reason for hiding this comment

a8ci18n commented Feb 3, 2022

a8ci18n commented Feb 11, 2022

stephanethomas commented Jan 20, 2022 •

edited

Loading

`Email Comparison` page

`In-Depth Comparison` page (desktop)

`In-Depth Comparison` page (mobile)

`Purchases` page

github-actions bot commented Jan 20, 2022 •

edited by matticbot

Loading

matticbot commented Jan 20, 2022 •

edited

Loading

poligilad-auto left a comment •

edited

Loading