Add DIFM Price breakdown in page picker page #67391

ddc22 · 2022-09-05T14:14:38Z

Proposed Changes

Adds a dummy basket to the page picker step so that the customer has some feedback of the cost incurred when purchasing extra pages.

Implementation Details

New site
- Show a dummy basket with a premium plan, the DIFM product with a price breakdown when available
Existing site
- Existing site will add items to the calypso cart and then show the items with the exact dummy UI design same as above
- Existing site which has a paid plan will not show the pro plan in the basket (done in the backend)
- Existing site which does not have a paid plan will show the premium plan in the basket basket
Common
- Implementation is mobile ready
- The DIFM breakdown and the total will be updated as the relevant number of extra pages area selected
- Hide all changes behind the difm/allow-extra-pages feature flag

Without Extra Pages

Mobile	Desktop

With Extra Pages

Mobile	Desktop

Testing Instructions

Apply DIFF D87491-code
Sandbox public API
Go through the flow /start/do-it-for-me
On the page picker step apply the feature flag and make sure the extra page features are visible
- /start/do-it-for-me/difm-page-picker?flags=no-force-sympathy,difm/allow-extra-pages
Remove the feature flag and make sure no changes are visible to the page when comparing with production
- /start/do-it-for-me/difm-page-picker?flags=no-force-sympathy,-difm/allow-extra-pages
Make sure Implementation Details are working properly

Pre-merge Checklist

Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

Related to #

github-actions · 2022-09-05T14:14:52Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-09-05T14:23:08Z

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

App Entrypoints (~76 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                  +238 B  (+0.0%)      +76 B  (+0.0%)
entry-stepper               +126 B  (+0.0%)      +28 B  (+0.0%)
entry-login                 +126 B  (+0.0%)      +28 B  (+0.0%)
entry-gutenboarding         +126 B  (+0.0%)      +28 B  (+0.0%)
entry-domains-landing       +126 B  (+0.0%)      +28 B  (+0.0%)
entry-browsehappy           +126 B  (+0.1%)      +28 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~287 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
signup                                +683 B  (+0.2%)      +84 B  (+0.1%)
jetpack-connect                       +683 B  (+0.1%)      +84 B  (+0.0%)
accept-invite                         +683 B  (+0.1%)      +84 B  (+0.1%)
site-purchases                        +122 B  (+0.0%)      +25 B  (+0.0%)
purchases                             +122 B  (+0.0%)      +25 B  (+0.0%)
plans                                 +122 B  (+0.0%)      +27 B  (+0.0%)
marketplace                           +122 B  (+0.0%)      +37 B  (+0.0%)
jetpack-cloud-plugin-management       +122 B  (+0.0%)      +33 B  (+0.0%)
jetpack-cloud-agency-dashboard        +122 B  (+0.0%)      +27 B  (+0.0%)
email                                 +122 B  (+0.0%)      +26 B  (+0.0%)
domains                               +122 B  (+0.0%)      +25 B  (+0.0%)
checkout                              +122 B  (+0.0%)      +28 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 (~7240 bytes added 📈 [gzipped])

name                                                            parsed_size            gzip_size
async-load-signup-steps-page-picker                                +33395 B  (+37.5%)    +9161 B  (+31.8%)
async-load-signup-steps-plans                                        +314 B   (+0.1%)      +53 B   (+0.1%)
async-load-signup-steps-plans-atomic-store                           +211 B   (+0.1%)      +48 B   (+0.1%)
async-load-signup-steps-emails                                       +211 B   (+0.2%)      +36 B   (+0.1%)
async-load-signup-steps-domains                                      +211 B   (+0.1%)      +32 B   (+0.0%)
async-load-masterbar-cart-masterbar-cart-wrapper                     +122 B   (+0.1%)      +28 B   (+0.1%)
async-load-calypso-my-sites-sidebar                                  +122 B   (+0.1%)      +27 B   (+0.1%)
async-load-calypso-my-sites-checkout-modal                           +122 B   (+0.0%)      +28 B   (+0.0%)
async-load-calypso-layout-masterbar-checkout-tsx                     +122 B   (+0.1%)      +28 B   (+0.1%)
async-load-calypso-layout-masterbar-checkout                         +122 B   (+0.2%)      +28 B   (+0.1%)
async-load-calypso-components-jetpack-sidebar                        +122 B   (+0.1%)      +27 B   (+0.1%)
async-load-calypso-blocks-editor-checkout-modal                      +122 B   (+0.0%)      +28 B   (+0.0%)
async-load-signup-steps-woocommerce-install-transfer                  +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-woocommerce-install-step-store-address        +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-woocommerce-install-step-business-info        +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-woocommerce-install-confirm                   +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-website-content                               +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-videopress-site                               +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-user                                          +89 B   (+0.0%)      +13 B   (+0.0%)
async-load-signup-steps-theme-selection                               +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-test-step                                     +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-store-features                                +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-starting-point                                +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-social-profiles                               +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-site-type                                     +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-site-title                                    +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-site-picker                                   +89 B   (+0.0%)      +13 B   (+0.0%)
async-load-signup-steps-site-or-domain                                +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-site-options                                  +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-site                                          +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-rewind-were-backing                           +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-rewind-migrate                                +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-rewind-form-creds                             +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-reader-landing                                +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-p2-site                                       +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-p2-join-workspace                             +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-p2-get-started                                +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-p2-details                                    +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-p2-confirm-email                              +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-p2-complete-profile                           +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-new-or-existing-site                          +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-intent                                        +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-difm-site-picker                              +89 B   (+0.0%)      +13 B   (+0.0%)
async-load-signup-steps-design-picker                                 +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-creds-permission                              +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-creds-confirm                                 +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-creds-complete                                +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-courses                                       +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-clone-start                                   +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-clone-ready                                   +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-clone-point                                   +89 B   (+0.0%)      +13 B   (+0.0%)
async-load-signup-steps-clone-jetpack                                 +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-clone-destination                             +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-clone-credentials                             +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-clone-cloning                                 +89 B   (+0.1%)      +13 B   (+0.0%)
async-load-signup-steps-add-ons                                       +89 B   (+0.1%)      +13 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.

client/utils.ts

client/signup/steps/page-picker/use-cart-for-difm.tsx

packages/calypso-products/src/get-price-tier-for-units.ts

packages/calypso-products/src/get-difm-tiered-price-details.ts

client/utils.ts

review feedback Co-authored-by: Payton Swick <payton@foolord.com>

aneeshd16

I tested the different flows - new site, existing site and from onboarding. There are a few small bugs which I have listed below, but nothing that is serious. 🎉 I'll do a code review shortly!

The plan's cost is shown without the regional discount in the new site flow. This could be okay since we mentioned that the final price will be calculated at checkout. Flagging it here so that it is a known issue for the CfT.

Page Picker	Checkout

In the existing site flow, while the network request is ongoing, the cost of the extra page shown in the subheading has the incorrect currency:

Kapture.2022-09-13.at.15.57.29.mp4

In the existing site flow, if there is a regional discount for the plan, there is a mismatch between the price shown in the sublabel and in the price column:

In the existing site flow, I noticed that there is a network request to /me/shopping-cart/no-site. I was wondering if this is intentional/required.

Kapture.2022-09-13.at.16.15.25.mp4

client/utils.ts

sirbrillig

I haven't run through the testing instructions but the code looks good to me from a Payments perspective. Thanks for addressing my concerns about the price calculation! I think this approach will work much better.

:

aneeshd16

Tests well! Awesome work in getting this complicated change through!

I have added some minor code feedback, once that is resolved, this is good to go.

client/signup/steps/page-picker/use-cart-for-difm.tsx

client/signup/steps/page-picker/shopping-cart-for-difm.tsx

aneeshd16

Tests well, LGTM!

a8ci18n · 2022-09-14T09:18:12Z

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

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

a8ci18n · 2022-09-21T12:31:37Z

Translation for this Pull Request has now been finished.

* Add DIFM Price breakdown in page picker page * Temp change might have to be removed * Fixes to price breakdown * Enforce order * Fix sub header price display * Typescript Fixes * Type fixes * Mobile layout fixes for sub label * Comment fix * Add sub label to mobile cart * Update to backend param minimum_price_in_display_unit s * Update client/signup/steps/page-picker/use-cart-for-difm.tsx review feedback Co-authored-by: Payton Swick <payton@foolord.com> * Review type fixes * Minor cleanup * USe effect fixes * Type fixes * Fix smallest unit change * Review fixeS: : * Review fixes and adding feature flag to page picker * Enable extra pages in wpcalypso and remove pro plan refferences * Checkout pressed loader Co-authored-by: Payton Swick <payton@foolord.com>

ddc22 added the DIFM Express Built By Express Onboarding Pipeline related tasks label Sep 6, 2022

ddc22 force-pushed the add/difm-extra-page-breakdown-page-picker branch 2 times, most recently from 2b6f64c to 7cc336d Compare September 7, 2022 12:27

ddc22 requested a review from aneeshd16 September 8, 2022 04:15

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

ddc22 commented Sep 12, 2022

View reviewed changes

client/utils.ts Outdated Show resolved Hide resolved

ddc22 marked this pull request as ready for review September 12, 2022 09:13

ddc22 requested a review from a team as a code owner September 12, 2022 09:13

ddc22 self-assigned this Sep 12, 2022

sirbrillig reviewed Sep 12, 2022

View reviewed changes

ddc22 requested a review from sirbrillig September 12, 2022 18:04

ddc22 and others added 17 commits September 13, 2022 14:23

Add DIFM Price breakdown in page picker page

e9dc055

Temp change might have to be removed

0976bb3

Fixes to price breakdown

6fe8a7a

Enforce order

5c6ecba

Fix sub header price display

afdd9ef

Typescript Fixes

6fc7366

Type fixes

1c3c2cf

Mobile layout fixes for sub label

5fdf5b4

Comment fix

89acd0b

Add sub label to mobile cart

30bf10a

Update to backend param minimum_price_in_display_unit s

6ddabf9

Update client/signup/steps/page-picker/use-cart-for-difm.tsx

c1d0929

review feedback Co-authored-by: Payton Swick <payton@foolord.com>

Review type fixes

f32a5ca

Minor cleanup

006df12

USe effect fixes

e92eb68

Type fixes

6d69890

Fix smallest unit change

667c9b3

ddc22 force-pushed the add/difm-extra-page-breakdown-page-picker branch from b30941f to 667c9b3 Compare September 13, 2022 10:23

aneeshd16 reviewed Sep 13, 2022

View reviewed changes

client/utils.ts Outdated Show resolved Hide resolved

sirbrillig reviewed Sep 13, 2022

View reviewed changes

Review fixeS:

31c5a7a

:

aneeshd16 approved these changes Sep 14, 2022

View reviewed changes

client/signup/steps/page-picker/use-cart-for-difm.tsx Outdated Show resolved Hide resolved

client/signup/steps/page-picker/shopping-cart-for-difm.tsx Outdated Show resolved Hide resolved

Review fixes and adding feature flag to page picker

d0fb0e1

ddc22 force-pushed the add/difm-extra-page-breakdown-page-picker branch from 475dd70 to d0fb0e1 Compare September 14, 2022 06:14

ddc22 added 2 commits September 14, 2022 10:29

Enable extra pages in wpcalypso and remove pro plan refferences

5b10192

Checkout pressed loader

8dbf5af

ddc22 requested a review from aneeshd16 September 14, 2022 07:16

aneeshd16 approved these changes Sep 14, 2022

View reviewed changes

ddc22 merged commit b12a4de into trunk Sep 14, 2022

ddc22 deleted the add/difm-extra-page-breakdown-page-picker branch September 14, 2022 07:27

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 Sep 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add DIFM Price breakdown in page picker page #67391

Add DIFM Price breakdown in page picker page #67391

ddc22 commented Sep 5, 2022 •

edited

Loading

github-actions bot commented Sep 5, 2022 •

edited by matticbot

Loading

matticbot commented Sep 5, 2022 •

edited

Loading

aneeshd16 left a comment

sirbrillig left a comment •

edited

Loading

aneeshd16 left a comment

aneeshd16 left a comment

a8ci18n commented Sep 14, 2022

a8ci18n commented Sep 21, 2022

Add DIFM Price breakdown in page picker page #67391

Add DIFM Price breakdown in page picker page #67391

Conversation

ddc22 commented Sep 5, 2022 • edited Loading

Proposed Changes

Implementation Details

Without Extra Pages

With Extra Pages

Testing Instructions

Pre-merge Checklist

github-actions bot commented Sep 5, 2022 • edited by matticbot Loading

matticbot commented Sep 5, 2022 • edited Loading

aneeshd16 left a comment

Choose a reason for hiding this comment

sirbrillig left a comment • edited Loading

Choose a reason for hiding this comment

aneeshd16 left a comment

Choose a reason for hiding this comment

aneeshd16 left a comment

Choose a reason for hiding this comment

a8ci18n commented Sep 14, 2022

a8ci18n commented Sep 21, 2022

ddc22 commented Sep 5, 2022 •

edited

Loading

github-actions bot commented Sep 5, 2022 •

edited by matticbot

Loading

matticbot commented Sep 5, 2022 •

edited

Loading

sirbrillig left a comment •

edited

Loading