wp-calypso Checkout: Change useCachedContactDetails to use useQuery instead of Redux

Proposed Changes

This PR refactors the useCachedContactDetails() to use useQuery instead of the Redux state for cached contact details. This will help decouple checkout from Redux so it can more easily be used outside of calypso.

[ ] Use the new hook in RegistrantExtraInfoFrForm and related components.
[x] Add mechanism to replace saveContactDetailsCache.
[ ] Can we remove the cached contact Redux state from calypso entirely?

Testing Instructions

Use an account which has cached contact details. Verify that, without this PR, when you visit checkout the billing info step gets auto-completed.
On this branch, verify that when you visit checkout the billing info step gets auto-completed.

Feb 23 '24 23:02 sirbrillig

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Feb 23 '24 23:02 github-actions[bot]

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

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

name                   parsed_size           gzip_size
entry-stepper              -2874 B  (-0.1%)     -486 B  (-0.1%)
entry-main                 -2250 B  (-0.1%)     -453 B  (-0.1%)
entry-subscriptions         -788 B  (-0.0%)     -261 B  (-0.1%)
entry-login                 -788 B  (-0.1%)     -261 B  (-0.1%)
entry-domains-landing       -453 B  (-0.1%)     -181 B  (-0.1%)
entry-browsehappy           -453 B  (-0.3%)     -181 B  (-0.4%)

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

Sections (~4062 bytes removed 📉 [gzipped])

name                             parsed_size           gzip_size
sensei-flow                         -17120 B  (-3.0%)    -5468 B  (-3.2%)
podcasts-flow                       -17038 B  (-3.9%)    -5325 B  (-4.0%)
plans                               -17003 B  (-1.3%)    -4719 B  (-1.2%)
videopress-flow                     -16990 B  (-3.1%)    -5313 B  (-3.2%)
site-purchases                      -16936 B  (-1.1%)    -6094 B  (-1.5%)
purchases                           -16740 B  (-0.8%)    -6219 B  (-1.1%)
checkout                             -9309 B  (-0.5%)    -4440 B  (-0.8%)
domains                              -4769 B  (-0.3%)    -1886 B  (-0.4%)
link-in-bio-tld-flow                 -4490 B  (-0.4%)    -1615 B  (-0.5%)
update-design-flow                   -4275 B  (-0.4%)    -1675 B  (-0.5%)
copy-site-flow                       -3961 B  (-0.7%)    -1315 B  (-0.7%)
home                                 -1216 B  (-0.1%)    -1518 B  (-0.4%)
signup                                -412 B  (-0.1%)     -146 B  (-0.2%)
plugins                               -276 B  (-0.0%)     +315 B  (+0.0%)
hundred-year-plan                     -216 B  (-0.6%)      -25 B  (-0.3%)
gutenberg-editor                      -216 B  (-0.0%)      -63 B  (-0.0%)
domain-user-transfer-flow             +180 B  (+0.1%)      +13 B  (+0.0%)
newsletter-post-setup-flow            -130 B  (-0.2%)     -122 B  (-0.5%)
link-in-bio-post-setup-flow           -130 B  (-0.2%)     -123 B  (-0.5%)
with-theme-assembler-flow             -129 B  (-0.3%)      -16 B  (-0.2%)
update-options-flow                   -129 B  (-0.4%)      -15 B  (-0.3%)
trial-wooexpress-flow                 -129 B  (-0.3%)      -19 B  (-0.3%)
site-setup-flow                       -129 B  (-0.2%)      -26 B  (-0.2%)
site-migration-flow                   -129 B  (-0.3%)      -16 B  (-0.3%)
newsletter-flow                       -129 B  (-0.7%)      -25 B  (-0.5%)
link-in-bio-flow                      -129 B  (-0.8%)      -35 B  (-0.8%)
free-post-setup-flow                  -129 B  (-0.4%)      -15 B  (-0.3%)
free-flow                             -129 B  (-0.3%)      -17 B  (-0.2%)
design-first-flow                     -129 B  (-0.7%)      -31 B  (-0.6%)
assembler-first-flow                  -129 B  (-0.2%)      -17 B  (-0.1%)
ai-assembler-flow                     -129 B  (-0.2%)      -17 B  (-0.1%)
jetpack-cloud-plugin-management       +126 B  (+0.0%)     +244 B  (+0.1%)
tailored-ecommerce-flow               -108 B  (-1.0%)      -31 B  (-1.0%)
reblogging-flow                       -108 B  (-1.3%)      -29 B  (-1.1%)
start-writing-flow                    -105 B  (-0.6%)      -26 B  (-0.5%)
jetpack-cloud-settings                +103 B  (+0.0%)       +8 B  (+0.0%)
hosting                                +97 B  (+0.0%)       +5 B  (+0.0%)
github-deployments                     +97 B  (+0.0%)       +3 B  (+0.0%)
email                                  +70 B  (+0.0%)     -734 B  (-0.4%)
write-flow                             -21 B  (-0.0%)     -291 B  (-0.6%)
build-flow                             -21 B  (-0.0%)     -281 B  (-0.6%)
marketplace                            +13 B  (+0.0%)      -90 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 (~9767 bytes removed 📉 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal     -22759 B  (-2.0%)    -7833 B  (-2.5%)
async-load-calypso-my-sites-checkout-modal          -22666 B  (-1.8%)    -7614 B  (-2.3%)
async-load-signup-steps-domains                      -4024 B  (-0.7%)    -1698 B  (-1.0%)
async-load-design-blocks                              -520 B  (-0.0%)     -128 B  (-0.0%)
async-load-signup-steps-design-picker                 -108 B  (-0.2%)      -42 B  (-0.2%)

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.