Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display license quantity on p2 #52199

Merged
merged 4 commits into from
Apr 23, 2021
Merged

Display license quantity on p2 #52199

merged 4 commits into from
Apr 23, 2021

Conversation

naxoc
Copy link
Member

@naxoc naxoc commented Apr 22, 2021

This PR adds some tweaks to the checkout for P2s plan:

  • It uses the current_quantity that was recently added to the API to display the price broken down in number of seats.
  • It adds the current_quantity to the ResponseCartProduct data type.
  • A helper function hasP2PlusPlan is added.
  • A section about domains was removed from the terms of service (for checking out the p2 product only).

Testing instructions

  • On a free P2 site, go to the plans page and click upgrade to P2+ (without purchasing). Your screen should look like the "After screen" from below.
  • Go add a user to the P2 site and come back to the checkout page. You should now see "2 members" instead of "1 member".

Before (for a P2 product):

before

After (for a P2 product):

after

@naxoc naxoc added the [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. label Apr 22, 2021
@naxoc naxoc self-assigned this Apr 22, 2021
@naxoc naxoc requested a review from a team as a code owner April 22, 2021 12:25
@matticbot 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 22, 2021
@github-actions
Copy link

Test live: https://calypso.live/?branch=update/p2plus-checkout

@matticbot
Copy link
Contributor

matticbot commented Apr 22, 2021 •
edited

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

Sections (~250 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
checkout                     +790 B  (+0.1%)     +250 B  (+0.1%)
themes                        +94 B  (+0.0%)      +19 B  (+0.0%)
theme                         +94 B  (+0.0%)      +19 B  (+0.0%)
site-purchases                +94 B  (+0.0%)      +19 B  (+0.0%)
signup                        +94 B  (+0.0%)      +19 B  (+0.0%)
settings-writing              +94 B  (+0.0%)      +19 B  (+0.0%)
settings-security             +94 B  (+0.0%)      +19 B  (+0.0%)
settings-performance          +94 B  (+0.0%)      +19 B  (+0.0%)
settings-jetpack              +94 B  (+0.0%)      +19 B  (+0.0%)
settings-discussion           +94 B  (+0.0%)      +19 B  (+0.0%)
settings                      +94 B  (+0.0%)      +19 B  (+0.0%)
purchases                     +94 B  (+0.0%)      +19 B  (+0.0%)
plans                         +94 B  (+0.0%)      +19 B  (+0.0%)
marketing                     +94 B  (+0.0%)      +19 B  (+0.0%)
jetpack-search                +94 B  (+0.1%)      +19 B  (+0.0%)
jetpack-connect               +94 B  (+0.0%)      +19 B  (+0.0%)
jetpack-cloud-settings        +94 B  (+0.0%)      +19 B  (+0.0%)
jetpack-cloud-pricing         +94 B  (+0.0%)      +19 B  (+0.0%)
home                          +94 B  (+0.0%)      +19 B  (+0.0%)
help                          +94 B  (+0.0%)      +19 B  (+0.0%)
email                         +94 B  (+0.0%)      +19 B  (+0.0%)
domains                       +94 B  (+0.0%)      +19 B  (+0.0%)
activity                      +94 B  (+0.0%)      +19 B  (+0.0%)
account-close                 +94 B  (+0.0%)      +19 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 (~308 bytes added 📈 [gzipped])

name                                                              parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal                       +1304 B  (+0.1%)     +308 B  (+0.1%)
async-load-design-blocks                                                +94 B  (+0.0%)      +19 B  (+0.0%)
async-load-design                                                       +94 B  (+0.0%)      +19 B  (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice        +94 B  (+0.2%)      +19 B  (+0.2%)
async-load-calypso-blocks-inline-help-popover                           +94 B  (+0.0%)      +19 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.

@naxoc naxoc requested a review from a team April 22, 2021 13:02
lamosty
lamosty approved these changes Apr 22, 2021
View reviewed changes
Copy link
Member

@lamosty lamosty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working great, nice job! 🚢

client/my-sites/checkout/composite-checkout/components/wp-checkout-order-review.tsx Outdated
@@ -8,6 +8,8 @@ import { useTranslate } from 'i18n-calypso';
import { useShoppingCart } from '@automattic/shopping-cart';
import type { RemoveProductFromCart, CouponStatus } from '@automattic/shopping-cart';
import { styled } from '@automattic/wpcom-checkout';
import { useSelector } from 'react-redux';
import getSelectedSite from 'calypso/state/ui/selectors/get-selected-site';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this one could go into the Internal dependencies block.

sirbrillig
sirbrillig approved these changes Apr 22, 2021
View reviewed changes
Copy link
Member

@sirbrillig sirbrillig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Thanks!

@sirbrillig
Copy link
Member

sirbrillig commented Apr 22, 2021 •
edited

One question: in your "after" screenshot, the math says "58 x 2 = 58". Is that correct? Or... oh, it's maybe not meant to be math. 🤷 Just a thought.

@naxoc
Copy link
Member Author

naxoc commented Apr 22, 2021

One question: in your "after" screenshot, the math says "58 x 2 = 58". Is that correct?

No, you're right. That is indeed bad math 😆 I realized I was using the wrong property and fixed it in this commit: 438ee32#diff-1426f894a8a8f515e2c6dc4d96ff640d69a9720f186e51146cc0dec974c3ed02R565

@naxoc naxoc merged commit 3d8ca89 into trunk Apr 23, 2021
@naxoc naxoc deleted the update/p2plus-checkout branch April 23, 2021 08:53
@github-actions 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 Apr 23, 2021
@a8ci18n
Copy link

a8ci18n commented Apr 23, 2021

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

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

@a8ci18n
Copy link

a8ci18n commented Apr 30, 2021

Translation for this Pull Request has now been finished.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sirbrillig sirbrillig sirbrillig approved these changes

@lamosty lamosty lamosty approved these changes

Assignees

@naxoc naxoc

Labels
[Feature] Checkout The checkout screen and process for purchases made on WordPress.com.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@naxoc @matticbot @sirbrillig @a8ci18n @lamosty