Stepper: Do not clear flowName in step-route tracker #97369

alshakero · 2024-12-11T21:49:24Z

Proposed Changes

This keeps the flow name persisted after reading it in step-route-tracking hook. This hook assumed it was the only part of the code that relied on this value and this deleted it. This corrects that assumption.

Why are these changes being made?

To prevent sites from being recreated when coming back from checkout to domains step.

Testing Instructions

Go to /setup/onboarding.
Make a site with a paid domain.
When you land at checkout, note the siteSlug param.
Go back to the domains step and continue to checkout again.
The site slug should be the same.

Regression testing

@daledupreez would really appreciate it if you can take a look. I'm curious to find out if you picked the andClear variants for a reason.

github-actions · 2024-12-11T21:49:36Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:commit-bc1363dbf3465713da1393be41ed618c725a97fd

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:commit-bc1363dbf3465713da1393be41ed618c725a97fd&env=a8c-for-agencies

matticbot · 2024-12-11T21:54:33Z

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

App Entrypoints (~30 bytes removed 📉 [gzipped])

name           parsed_size           gzip_size
entry-stepper        -40 B  (-0.0%)      -30 B  (-0.0%)

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

Sections (~83 bytes removed 📉 [gzipped])

name             parsed_size           gzip_size
site-settings          -40 B  (-0.0%)      -13 B  (-0.0%)
signup                 -40 B  (-0.0%)      -15 B  (-0.0%)
settings               -40 B  (-0.0%)      -13 B  (-0.0%)
jetpack-connect        -40 B  (-0.0%)      -12 B  (-0.0%)
home                   -40 B  (-0.0%)      -13 B  (-0.0%)
checkout               -40 B  (-0.0%)      -14 B  (-0.0%)
accept-invite          -40 B  (-0.0%)      -16 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 (~74 bytes removed 📉 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-purchase-modal-wrapper                                                       -40 B  (-0.0%)      -14 B  (-0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        -40 B  (-0.0%)      -17 B  (-0.0%)
async-load-calypso-lib-analytics-signup                                                 -40 B  (-0.3%)      -13 B  (-0.3%)
async-load-calypso-layout-masterbar-checkout                                            -40 B  (-0.1%)      -15 B  (-0.1%)
async-load-calypso-blocks-editor-checkout-modal                                         -40 B  (-0.0%)      -15 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.

…#97077

gabrielcaires · 2024-12-12T18:41:16Z

the andClear variants for a reason.
We just moved the code to another module, so we don't have thoughts about this logic. (Dale and I talked about it when we introduced these changes).

gabrielcaires · 2024-12-12T18:52:37Z

@alshakero
I tried sometimes, but when I follow the steps until the checkout page and click on the browser back button twice to go back to the domains page, I see these errors:

cart-items.ts:688 Uncaught TypeError: Cannot read properties of undefined (reading 'product_slug')
    at shouldBundleDomainWithPlan (cart-items.ts:688:54)
    at getDomainPriceRule (cart-items.ts:756:7)
    at DomainRegistrationSuggestion.getPriceRule (index.jsx:237:98)
    at DomainRegistrationSuggestion.render (index.jsx:429:23)
    at finishClassComponent (react-dom.development.js:19776:31)
    at updateClassComponent (react-dom.development.js:19722:24)
    at beginWork (react-dom.development.js:21645:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)Understand this errorAI
2hook.js:608 The above error occurred in the <DomainRegistrationSuggestion> component:

    at DomainRegistrationSuggestion (app:///./components/domains/domain-registration-suggestion/index.jsx:68:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at div
    at FeaturedDomainSuggestions (app:///./components/domains/featured-domain-suggestions/index.jsx:31:1)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at div
    at div
    at DomainSearchResults (app:///./components/domains/domain-search-results/index.jsx:62:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at div
    at RegisterDomainStep (app:///./components/domains/register-domain-step/index.jsx:130:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ShoppingCartWrapper (app:///../packages/shopping-cart/src/with-shopping-cart.tsx:18:74)
    at CartKeyWrapper (app:///./my-sites/checkout/with-cart-key.tsx:16:78)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at div
    at div
    at div
    at div
    at StepContainer (app:///../packages/onboarding/src/step-container/index.tsx:25:3)
    at Suspense
    at AsyncLoad (app:///./components/async-load/index.tsx:20:3)
    at RenderDomainsStep (app:///./signup/steps/domains/index.jsx:117:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ShoppingCartWrapper (app:///../packages/shopping-cart/src/with-shopping-cart.tsx:18:74)
    at CartKeyWrapper (app:///./my-sites/checkout/with-cart-key.tsx:16:78)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at ShoppingCartProvider (app:///../packages/shopping-cart/src/shopping-cart-provider.tsx:23:3)
    at CalypsoShoppingCartProvider (app:///./my-sites/checkout/calypso-shopping-cart-provider.tsx:26:3)
    at DomainsStep (app:///./landing/stepper/declarative-flow/internals/steps-repository/unified-domains/index.tsx:107:115)
    at div
    at StepRoute (app:///./landing/stepper/declarative-flow/internals/components/step-route/index.tsx:32:3)
    at RenderedRoute (app:///../node_modules/react-router/dist/index.js:577:5)
    at Routes (app:///../node_modules/react-router/dist/index.js:1267:5)
    at Suspense
    at Boot (app:///./landing/stepper/declarative-flow/internals/components/boot/index.tsx:20:3)
    at FlowRenderer (app:///./landing/stepper/declarative-flow/internals/index.tsx:97:3)
    at FlowSwitch (app:///./landing/stepper/index.tsx:102:3)
    at Router (app:///../node_modules/react-router/dist/index.js:1201:15)
    at BrowserRouter (app:///../node_modules/react-router-dom/dist/index.js:697:5)
    at QueryClientProvider (app:///../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:26:3)
    at Provider (app:///../node_modules/react-redux/dist/react-redux.mjs:1053:3)
    at I18nProvider (app:///../node_modules/@wordpress/react-i18n/build-module/index.js:62:5)
    at LocaleProvider (app:///../packages/i18n-utils/src/locale-context.tsx:31:3)
    at CalypsoI18nProvider (app:///./components/calypso-i18n-provider/index.tsx:25:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ hook.js:608Understand this errorAI
8hook.js:608 The above error occurred in the <DomainRegistrationSuggestion> component:

    at DomainRegistrationSuggestion (app:///./components/domains/domain-registration-suggestion/index.jsx:68:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at div
    at div
    at DomainSearchResults (app:///./components/domains/domain-search-results/index.jsx:62:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at div
    at RegisterDomainStep (app:///./components/domains/register-domain-step/index.jsx:130:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ShoppingCartWrapper (app:///../packages/shopping-cart/src/with-shopping-cart.tsx:18:74)
    at CartKeyWrapper (app:///./my-sites/checkout/with-cart-key.tsx:16:78)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at div
    at div
    at div
    at div
    at StepContainer (app:///../packages/onboarding/src/step-container/index.tsx:25:3)
    at Suspense
    at AsyncLoad (app:///./components/async-load/index.tsx:20:3)
    at RenderDomainsStep (app:///./signup/steps/domains/index.jsx:117:5)
    at eval (app:///../packages/i18n-calypso/src/localize.js:32:67)
    at ShoppingCartWrapper (app:///../packages/shopping-cart/src/with-shopping-cart.tsx:18:74)
    at CartKeyWrapper (app:///./my-sites/checkout/with-cart-key.tsx:16:78)
    at ConnectFunction (app:///../node_modules/react-redux/dist/react-redux.mjs:876:74)
    at ShoppingCartProvider (app:///../packages/shopping-cart/src/shopping-cart-provider.tsx:23:3)
    at CalypsoShoppingCartProvider (app:///./my-sites/checkout/calypso-shopping-cart-provider.tsx:26:3)
    at DomainsStep (app:///./landing/stepper/declarative-flow/internals/steps-repository/unified-domains/index.tsx:107:115)
    at div
    at StepRoute (app:///./landing/stepper/declarative-flow/internals/components/step-route/index.tsx:32:3)
    at RenderedRoute (app:///../node_modules/react-router/dist/index.js:577:5)
    at Routes (app:///../node_modules/react-router/dist/index.js:1267:5)
    at Suspense
    at Boot (app:///./landing/stepper/declarative-flow/internals/components/boot/index.tsx:20:3)
    at FlowRenderer (app:///./landing/stepper/declarative-flow/internals/index.tsx:97:3)
    at FlowSwitch (app:///./landing/stepper/index.tsx:102:3)
    at Router (app:///../node_modules/react-router/dist/index.js:1201:15)
    at BrowserRouter (app:///../node_modules/react-router-dom/dist/index.js:697:5)
    at QueryClientProvider (app:///../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:26:3)
    at Provider (app:///../node_modules/react-redux/dist/react-redux.mjs:1053:3)
    at I18nProvider (app:///../node_modules/@wordpress/react-i18n/build-module/index.js:62:5)
    at LocaleProvider (app:///../packages/i18n-utils/src/locale-context.tsx:31:3)
    at CalypsoI18nProvider (app:///./components/calypso-i18n-provider/index.tsx:25:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ hook.js:608Understand this errorAI
react-dom.development.js:26957 Uncaught TypeError: Cannot read properties of undefined (reading 'product_slug')
    at shouldBundleDomainWithPlan (cart-items.ts:688:54)
    at getDomainPriceRule (cart-items.ts:756:7)
    at DomainRegistrationSuggestion.getPriceRule (index.jsx:237:98)
    at DomainRegistrationSuggestion.render (index.jsx:429:23)
    at finishClassComponent (react-dom.development.js:19776:31)
    at updateClassComponent (react-dom.development.js:19722:24)
    at beginWork (react-dom.development.js:21645:16)
    at beginWork$1 (react-dom.development.js:27460:14)
    at performUnitOfWork (react-dom.development.js:26591:12)
    at workLoopSync (react-dom.development.js:26500:5)

gabrielcaires

I couldn't complete the test instructions.

alshakero · 2024-12-12T21:34:20Z

Hi @gabrielcaires. Thank you for testing, I somehow missed this issue. It should be good now.

alshakero · 2024-12-16T16:31:31Z

Hi @gabrielcaires, would really apprecite a spin 🙏🏼

escapemanuele · 2024-12-18T10:49:31Z

@alshakero I find that if I have the wpcom_signup_complete_destination cookie set, since it is not cleared now, I cannot select the free domain in the domains step.

escapemanuele

Let's gooo

Do not clear flowName in step-route tracker

bc1363d

alshakero added the Stepper label Dec 11, 2024

alshakero requested review from daledupreez and a team December 11, 2024 21:49

alshakero self-assigned this Dec 11, 2024

alshakero requested a review from a team as a code owner December 11, 2024 21:49

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

alshakero mentioned this pull request Dec 11, 2024

Stepper: Back from Checkout to Domains resets the website #97077

Closed

alshakero added 5 commits December 11, 2024 23:03

Merge branch 'trunk' into fix/#97077

79c815e

Merge branch 'trunk' into fix/#97077

f67d062

Update tests

364bc32

Merge branch 'fix/#97077' of github.com:Automattic/wp-calypso into fix/…

e46a70f

…#97077

Merge branch 'trunk' into fix/#97077

b0fe3d0

gabrielcaires requested changes Dec 12, 2024

View reviewed changes

alshakero added 2 commits December 12, 2024 21:44

Merge branch 'trunk' into fix/#97077

0ee5829

Fix contradiction with the domain step

701c392

alshakero mentioned this pull request Dec 12, 2024

Stepper: Show "your plan" when back from checkout #97358

Closed

escapemanuele requested a review from gabrielcaires December 13, 2024 15:11

Merge branch 'trunk' into fix/#97077

793f503

escapemanuele approved these changes Dec 18, 2024

View reviewed changes

alshakero merged commit 07ac15f into trunk Dec 18, 2024
10 of 11 checks passed

alshakero deleted the fix/#97077 branch December 18, 2024 14:57

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 Dec 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stepper: Do not clear flowName in step-route tracker #97369

Stepper: Do not clear flowName in step-route tracker #97369

alshakero commented Dec 11, 2024 •

edited

Loading

github-actions bot commented Dec 11, 2024

matticbot commented Dec 11, 2024 •

edited

Loading

gabrielcaires commented Dec 12, 2024

gabrielcaires commented Dec 12, 2024

gabrielcaires left a comment

alshakero commented Dec 12, 2024

alshakero commented Dec 16, 2024

escapemanuele commented Dec 18, 2024

escapemanuele left a comment

Stepper: Do not clear flowName in step-route tracker #97369

Stepper: Do not clear flowName in step-route tracker #97369

Conversation

alshakero commented Dec 11, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Regression testing

github-actions bot commented Dec 11, 2024

matticbot commented Dec 11, 2024 • edited Loading

gabrielcaires commented Dec 12, 2024

gabrielcaires commented Dec 12, 2024

gabrielcaires left a comment

Choose a reason for hiding this comment

alshakero commented Dec 12, 2024

alshakero commented Dec 16, 2024

escapemanuele commented Dec 18, 2024

escapemanuele left a comment

Choose a reason for hiding this comment

alshakero commented Dec 11, 2024 •

edited

Loading

matticbot commented Dec 11, 2024 •

edited

Loading