Earn: update copy and icon on the Payments splash page in Earn. #43601

donlair · 2020-06-24T01:30:59Z

This PR updates the copy and icon used on the dedicated Payments page that is shown when who has not yet connected to Stripe clicks the Payments card link in the Earn section of Calypso. Context for the changes is at pbMlHh-i6-p2.

Here are screenshots showing the changes:

Before:

After:

Testing instructions

Checkout this branch (git checkout update/earn-payments-splash-page-copy-edits)
Start calypso (yarn start)
Navigate to the Earn page using an account with a paid plan that has not connected to Stripe (/earn)
Click the recurring payments card to load the splash page (/earn/payments/)
Click the CTA button and confirm that the process to connect to Stripe is started.

matticbot · 2020-06-24T01:31:00Z

Test live: https://calypso.live/?branch=update/earn-payments-splash-page-copy-edits

matticbot · 2020-06-24T01:31:13Z

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

Sections (~87 bytes removed 📉 [gzipped])

name  parsed_size           gzip_size
earn      -1211 B  (-0.4%)      -87 B  (-0.1%)

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 · 2020-06-24T01:39:49Z

client/my-sites/earn/memberships/index.jsx

+						</div>
+						<div>
+							<Gridicon size={ 18 } icon="checkmark" />
+							{ this.props.translate( 'Collect payments in 135 countries.' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 20 times:
translate( 'Collect payments in 135 countries' ) ES Score: 14

a8ci18n · 2020-06-24T01:39:49Z

client/my-sites/earn/memberships/index.jsx

+						</div>
+						<div>
+							<Gridicon size={ 18 } icon="checkmark" />
+							{ this.props.translate( 'Easily manage subscribers.' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 21 times:
translate( 'Easily manage subscribers' ) ES Score: 11

a8ci18n · 2020-06-24T13:17:41Z

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

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

danhauk

Looking good so far @donlair. Can we do a little CSS cleanup in this PR?

The line length of the copy is really long now that the image we're using is smaller. Can we set a max width on the content area and then center the illustration in the remaining area?

Example at 66% width for the content (even this line length still feels pretty long but it's better):

Let's remove the left padding on the content div on larger viewports. The text is out of alignment with the heading elements above it.
On smaller viewports we should bump up the left and right padding to 16px to align with the rest of the elements.

The checklist could benefit from some wider line spacing. It feels a bit cramped. Also maybe less space between the checkmark and the text.
On mobile, the longer text on the checklist looks odd as the lines wrap under the checkmark. Can the text be indented and aligned with itself there with the checkmarks acting more like bullet points?

donlair · 2020-06-24T19:44:53Z

@danhauk could you take a look at the update? I added a Card component around the main content to get it closer to your updated comps. Does that also address your concerns around the heading / content alignment? I've also adjusted the spacing and wrapping on the list.

a8ci18n · 2020-06-26T17:36:16Z

client/my-sites/earn/memberships/index.jsx

 						</div>
+						<p className="memberships__onboarding-paragraph">
+							{ this.props.translate(
+								'WordPress.com Payments makes it easy to sell physical and digital goods, accept donations, charge for in-person services, build subscription newsletters, and more.'


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 9 times:
translate( 'WordPress.com Payments makes it easy to sell physical and digital goods, accept donations, charge for in-person services, build subscription newsletters, and more. One-time, monthly, and yearly credit and debit card payment options are supported.' ) ES Score: 8

a8ci18n · 2020-06-26T17:36:16Z

client/my-sites/earn/memberships/index.jsx

+						<p className="memberships__onboarding-paragraph">{ cta }</p>
+						<p className="memberships__onboarding-paragraph">
+							{ this.props.translate(
+								'Payments are securely processed by Stripe, a payment partner for all credit and debit card payments.'


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 9 times:
translate( 'Payments are safely, securely, and seamlessly processed by Stripe, a payment partner for all credit and debit card payments. Stripe provides easy access to your money and takes just minutes to set up.' ) ES Score: 6

donlair · 2020-06-29T12:51:17Z

Here's an updated screenshot of the current layout in this PR:

a8ci18n · 2020-07-01T17:53:46Z

client/my-sites/earn/memberships/index.jsx

@@ -498,7 +445,7 @@ class MembershipsSection extends Component {
 						) }
 					>
 						<NoticeAction href={ `/earn/payments-plans/${ this.props.siteSlug }` } icon="create">
-							{ this.props.translate( 'Add a payment plan' ) }
+							{ this.props.translate( 'Add a Payment Plan' ) }


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

a8ci18n · 2020-07-01T18:28:55Z

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

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

danhauk · 2020-07-01T19:16:43Z

@donlair Thanks for working to bring it closer to the proposed design. I think it's looking good. I pushed up a couple commits to tweak the styles, add mobile styles, and use some typography variables we have available.

Here's some screenshots:

…o Payments.

…n of Calypso.

This change request became irrelevant after we switched to the updated design.

donlair · 2020-07-08T12:08:21Z

@danhauk I rebased the update and your changes look good to me. Can you mark this as reviewed? I'll deploy the changes once we get a green light that the name change updates are stable.

danhauk

LGTM!

a8ci18n · 2020-07-09T18:28:40Z

Translation for this Pull Request has now been finished.

…n. (#43601)" This reverts commit 1b0c1ed.

…n. (#43601)" (#44241) This reverts commit 1b0c1ed.

donlair self-assigned this Jun 24, 2020

donlair requested a review from danhauk June 24, 2020 01:31

a8ci18n reviewed Jun 24, 2020

View reviewed changes

donlair added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jun 24, 2020

danhauk previously requested changes Jun 24, 2020

View reviewed changes

donlair requested a review from danhauk June 25, 2020 13:49

a8ci18n reviewed Jun 26, 2020

View reviewed changes

danhauk force-pushed the update/earn-payments-splash-page-copy-edits branch from 36e7c24 to 97dd0f4 Compare July 1, 2020 17:44

a8ci18n reviewed Jul 1, 2020

View reviewed changes

donlair and others added 12 commits July 7, 2020 13:56

Payments onboarding splash page copy updates, including name change t…

2d7389b

…o Payments.

Updating copy and icon on the Payments splash page in the Earn sectio…

1306b3c

…n of Calypso.

Adding click tracking to the learn more link.

cdea74d

Tweaking layout on the Payments splash page in Earn.

9edff95

Removing unused component.

7fc0ee3

Translate benefits section headings

def81ca

Some style tweaking and using the new brand font variables for headings

ad232eb

Update illustration

e670284

Some copy updates for more consistency

da5ff53

CSS tweaks for mobile

a64fcc3

Prevent windows

229f0cc

More style tweaks and fix brand font in Earn title

31b20c8

donlair force-pushed the update/earn-payments-splash-page-copy-edits branch from 8065873 to 31b20c8 Compare July 7, 2020 18:04

danhauk approved these changes Jul 8, 2020

View reviewed changes

donlair merged commit 1b0c1ed into master Jul 9, 2020

donlair deleted the update/earn-payments-splash-page-copy-edits branch July 9, 2020 17:27

matticbot removed the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jul 9, 2020

gwwar added a commit that referenced this pull request Jul 16, 2020

Revert "Earn: update copy and icon on the Payments splash page in Ear…

19d5d3e

…n. (#43601)" This reverts commit 1b0c1ed.

This was referenced Jul 16, 2020

Revert "Earn: update copy and icon on the Payments splash page in Earn." #44241

Merged

Earn: Update missed instances of Recurring Payments #44242

Closed

gwwar added a commit that referenced this pull request Jul 16, 2020

Revert "Earn: update copy and icon on the Payments splash page in Ear…

6dd0289

…n. (#43601)" (#44241) This reverts commit 1b0c1ed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Earn: update copy and icon on the Payments splash page in Earn. #43601

Earn: update copy and icon on the Payments splash page in Earn. #43601

donlair commented Jun 24, 2020

matticbot commented Jun 24, 2020

matticbot commented Jun 24, 2020 •

edited

a8ci18n Jun 24, 2020

a8ci18n Jun 24, 2020

a8ci18n commented Jun 24, 2020

danhauk left a comment

donlair commented Jun 24, 2020

a8ci18n Jun 26, 2020

a8ci18n Jun 26, 2020

donlair commented Jun 29, 2020

a8ci18n Jul 1, 2020

a8ci18n commented Jul 1, 2020 •

edited

danhauk commented Jul 1, 2020

donlair commented Jul 8, 2020

danhauk left a comment

a8ci18n commented Jul 9, 2020

Earn: update copy and icon on the Payments splash page in Earn. #43601

Earn: update copy and icon on the Payments splash page in Earn. #43601

Conversation

donlair commented Jun 24, 2020

Testing instructions

matticbot commented Jun 24, 2020

matticbot commented Jun 24, 2020 • edited

a8ci18n Jun 24, 2020

Choose a reason for hiding this comment

a8ci18n Jun 24, 2020

Choose a reason for hiding this comment

a8ci18n commented Jun 24, 2020

danhauk left a comment

Choose a reason for hiding this comment

donlair commented Jun 24, 2020

a8ci18n Jun 26, 2020

Choose a reason for hiding this comment

a8ci18n Jun 26, 2020

Choose a reason for hiding this comment

donlair commented Jun 29, 2020

a8ci18n Jul 1, 2020

Choose a reason for hiding this comment

a8ci18n commented Jul 1, 2020 • edited

danhauk commented Jul 1, 2020

donlair commented Jul 8, 2020

danhauk left a comment

Choose a reason for hiding this comment

a8ci18n commented Jul 9, 2020

matticbot commented Jun 24, 2020 •

edited

a8ci18n commented Jul 1, 2020 •

edited