Adds renew monthly option for annual plan downgrades #51901

aneeshd16 · 2021-04-13T14:54:30Z

Changes proposed in this Pull Request

Context: pcbrnV-1Zt-p2#comment-3259
This change adds the "Renew Annually" and "Renew Monthly" links on the manage purchase page.
Calculates the savings % for the annual plan and displays it next to "Renew Annually".
To be deployed only after D60535-code is shipped.

Testing instructions

Purchase any annual plan.
Navigate to /purchases/subscriptions/ and click on the purchased plan.
Ensure Auto-renew is on and the plan expires < 30 days from today. (Use SA to change plan expiry)
Refresh the page and confirm that the "Renew Annually" and "Renew Monthly" links are present.
Ensure Auto-renew is off and the plan expires < 90 days from today.
Refresh the page and confirm that the "Renew Annually" and "Renew Monthly" links are present.
Confirm that the savings % is correctly calculated and shown next to the "Renew Annually" link.
Clicking on "Renew Annually" should redirect to the checkout page with the renewal for the plan in the cart.
Clicking on "Renew Monthly" should redirect to the checkout page with the monthly plan in the cart.
To test the purchase flow for "Renew Monthly", please see D60535-code

matticbot · 2021-04-13T14:54:32Z

Test live: https://calypso.live/?branch=add/annual-plans-monthly-renewal

matticbot · 2021-04-13T15:04:43Z

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

Sections (~399 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
site-purchases             +2288 B  (+0.2%)     +532 B  (+0.2%)
purchases                  +2288 B  (+0.2%)     +532 B  (+0.1%)
themes                      +313 B  (+0.1%)      +77 B  (+0.1%)
plans                       +313 B  (+0.0%)      +80 B  (+0.0%)
jetpack-connect             +313 B  (+0.0%)      +80 B  (+0.0%)
jetpack-cloud-pricing       +313 B  (+0.1%)      +80 B  (+0.1%)
email                       +313 B  (+0.1%)      +80 B  (+0.1%)
domains                     +313 B  (+0.0%)       +9 B  (+0.0%)
checkout                    +313 B  (+0.0%)      +15 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.

Async-loaded Components (~224 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans                         +313 B  (+0.1%)      +67 B  (+0.1%)
async-load-design-blocks                              +313 B  (+0.0%)      +78 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal       +313 B  (+0.0%)      +79 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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-04-13T15:05:07Z

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

+		);
+		return this.renderRenewalNavItem(
+			<div>
+				{ translate( 'Renew Annually' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 29 times:
translate( 'renews annually', { context: 'Informative text for renewals in /checkout'} ) ES Score: 11

a8ci18n · 2021-04-13T15:05:08Z

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

+
+	renderRenewMonthlyNavItem() {
+		const { translate } = this.props;
+		return this.renderRenewalNavItem( translate( 'Renew Monthly' ), this.handleRenewMonthly );


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 21 times:
translate( 'Renew monthly' ) ES Score: 13
See 1 additional suggestions in the PR translation status page

client/lib/purchases/index.js

dzver · 2021-05-05T07:58:43Z

client/lib/purchases/index.js

+		return false;
+	}
+
+	if ( ! isWpComPlan( purchase.productSlug ) ) {


Jetpack plans can also renew monthly?

Yes:

wp-calypso/packages/calypso-products/src/constants/jetpack.ts

Line 136 in dbedda1

export const PLAN_JETPACK_PERSONAL_MONTHLY = 'jetpack_personal_monthly';

Jetpack plans are currently out of scope for this change, and I think we can discuss adding support for Jetpack plans separately. Unless I misunderstood your question 🙂

No, just wanted to make sure it's considered.

dzver · 2021-05-05T14:37:05Z

client/lib/purchases/index.js

+		return false;
+	}
+
+	const isAutorenewalEnabled = ! isExpiring( purchase );


I checked the backend code for these statuses and it looks like the values can be:

manual-renew (auto-renew turned off but not expiring)

expiring (auto renew turned off and expiring)

auto-renewing (auto-renew turned on)

active (auto-renew turned on)

expired

Does it make sense to display the manual renew options to expired subscriptions with auto-renew on?

Does it make sense to display the manual renew options to expired subscriptions with auto-renew on?

IMO, yes, since it is a lower commitment renewal option, it might be attractive to users with expired subscriptions. @paulbonahora, can you please confirm?

dzver · 2021-05-05T14:47:15Z

I tried to follow the test plan but the monthly renewal didn't work for me. I see

aneeshd16 · 2021-05-06T11:26:50Z

I tried to follow the test plan but the monthly renewal didn't work for me. I see

Good catch! This happens when clicking on the "Renew Monthly" option on /me/purchases/<siteSlug>/<purchaseId>. I have fixed this in 2c0c269.

dzver

If no further changes are needed around expired subscriptions, LGTM.

Otherwise happy to review again when the PR is updated.

DavidRothstein · 2021-05-14T03:24:59Z

If switching from annual to monthly billing is going to take away plan features (like live chat) then we still need something here to inform the user of that in a very clear way. Especially since the switch happens immediately (even though the user may still have time on their annual subscription and thus be otherwise entitled to keep those features for a while longer).

The way a similar situation is handled for Premium-to-Personal downgrades is like this (screenshot shown for the case where the downgrade happens on a Premium plan that is no longer refundable, which is most comparable to the case here):

Something similarly clear would need to be in place here; if you just click "Renew Monthly" and go to checkout you don't really understand you're about to lose something, let alone lose something you already paid for.

Alternatively, we could change things on the server so that these users won't actually lose any features (which still seems like a potentially better solution to me). But if not then I think the user interface here needs to change.

More internal discussion at pcbrnV-1Zt-p2#comment-3452 (and elsewhere).

paulbonahora · 2021-05-14T12:33:35Z

Users would still be reminded of the fact they'll lose live chat at checkout. While I agree we could improve the way this is communicated, in the interest of time and shipping the feature, my recommendation would be to ship this in this state and make a note to improve this experience in case we realize it causes further issues. For the record, this has been discussed here - we believe volume for this user segment might not be all that significant and having parity with regards features for users on monthly plans is a preference.

a8ci18n · 2021-05-14T13:16:30Z

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

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

a8ci18n · 2021-05-21T10:32:59Z

Translation for this Pull Request has now been finished.

a8ci18n reviewed Apr 13, 2021

View reviewed changes

sirbrillig reviewed Apr 14, 2021

View reviewed changes

client/lib/purchases/index.js Outdated Show resolved Hide resolved

aneeshd16 force-pushed the add/annual-plans-monthly-renewal branch from 0c2849a to 0fb8b7e Compare April 23, 2021 09:45

aneeshd16 marked this pull request as ready for review April 23, 2021 09:46

aneeshd16 requested a review from a team as a code owner April 23, 2021 09:46

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

aneeshd16 requested review from a team, southp and sirbrillig and removed request for a team April 23, 2021 09:46

aneeshd16 force-pushed the add/annual-plans-monthly-renewal branch 2 times, most recently from 19bc150 to d22c0b0 Compare April 27, 2021 08:43

southp requested review from taggon and dzver April 28, 2021 03:54

dzver reviewed May 5, 2021

View reviewed changes

aneeshd16 added 4 commits May 5, 2021 21:06

Adds renew monthly option for annual plan downgrades

baab2ed

Fixes comment typo

2a2284f

Refactors handleRenewMonthly

63a94fb

Refactors and add tests

0d0343a

aneeshd16 force-pushed the add/annual-plans-monthly-renewal branch from d22c0b0 to 0d0343a Compare May 5, 2021 15:36

aneeshd16 added 2 commits May 6, 2021 14:28

Show option for biennial plans also

586101b

Fixes error when renewing monthly on me/purchases

2c0c269

dzver approved these changes May 6, 2021

View reviewed changes

aneeshd16 merged commit 31869cf into trunk May 14, 2021

aneeshd16 deleted the add/annual-plans-monthly-renewal branch May 14, 2021 12:38

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 May 14, 2021

DavidRothstein mentioned this pull request Feb 3, 2022

Feature Request: Allow Customers to switch between from Annual to Monthly or Multi-Annual to Annual plans #55815

Open

sirbrillig mentioned this pull request Aug 22, 2022

E2E: Also check for the "Renew Annually" button in case "Renew Now" is not rendered #66813

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds renew monthly option for annual plan downgrades #51901

Adds renew monthly option for annual plan downgrades #51901

aneeshd16 commented Apr 13, 2021 •

edited

Loading

matticbot commented Apr 13, 2021

matticbot commented Apr 13, 2021 •

edited

Loading

a8ci18n Apr 13, 2021

a8ci18n Apr 13, 2021

dzver May 5, 2021

aneeshd16 May 6, 2021

dzver May 6, 2021

dzver May 5, 2021

aneeshd16 May 6, 2021

dzver commented May 5, 2021

aneeshd16 commented May 6, 2021

dzver left a comment

DavidRothstein commented May 14, 2021

paulbonahora commented May 14, 2021 •

edited by aneeshd16

Loading

a8ci18n commented May 14, 2021

a8ci18n commented May 21, 2021

Adds renew monthly option for annual plan downgrades #51901

Adds renew monthly option for annual plan downgrades #51901

Conversation

aneeshd16 commented Apr 13, 2021 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Apr 13, 2021

matticbot commented Apr 13, 2021 • edited Loading

a8ci18n Apr 13, 2021

Choose a reason for hiding this comment

a8ci18n Apr 13, 2021

Choose a reason for hiding this comment

dzver May 5, 2021

Choose a reason for hiding this comment

aneeshd16 May 6, 2021

Choose a reason for hiding this comment

dzver May 6, 2021

Choose a reason for hiding this comment

dzver May 5, 2021

Choose a reason for hiding this comment

aneeshd16 May 6, 2021

Choose a reason for hiding this comment

dzver commented May 5, 2021

aneeshd16 commented May 6, 2021

dzver left a comment

Choose a reason for hiding this comment

DavidRothstein commented May 14, 2021

paulbonahora commented May 14, 2021 • edited by aneeshd16 Loading

a8ci18n commented May 14, 2021

a8ci18n commented May 21, 2021

aneeshd16 commented Apr 13, 2021 •

edited

Loading

matticbot commented Apr 13, 2021 •

edited

Loading

paulbonahora commented May 14, 2021 •

edited by aneeshd16

Loading