Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix initial population of address data in useCustomerData hook #5473

Merged
merged 3 commits into from
Dec 31, 2021

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Dec 30, 2021

Fixes the issue described here where address fields are blank on mount. Traced back to this change: #5394

While we don't want to update the server on the initial mount, we do need to sync initial address data with the cart once that's finished initialising. I believe this PR fixes both cases.

  1. Changes useCustomerData so it tracks when the cart is finished loading, and then initialized itself with the updated address.
  2. Added inline documentation to useCustomerData to make it easier to maintain.
  3. Updated useCustomerData to use useDebounceCallback which is more easy to follow than debouncing several values.
  4. Fixes a small issue in useCheckoutAddress which was also tracking the initial empty address.

Fixes #5456

Testing

To avoid further regressions we need to test against all related issues.

  1. While logged in, with a customer than has checked out before, visit the checkout page
  2. Confirm shipping address fields are populated
  3. Toggle the "different billing address' box. Confirm billing fields are populated.
  4. Open the network inspector in browser tools
  5. Repeat the test above. Open the checkout page. Confirm there are no extra requests to the batch/ endpoint once the address data is populated.
  6. Change an address field such as state or country. Confirm the cart sends a request to the server after a small 1000ms delay.
  7. Smoke test the full checkout flow

Changelog

Fixed an issue where the checkout address fields would be blank for logged in customers

@mikejolley mikejolley self-assigned this Dec 30, 2021
@mikejolley mikejolley added status: needs review type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. labels Dec 30, 2021
@rubikuserbot rubikuserbot requested review from a team and ralucaStan and removed request for a team December 30, 2021 16:37
@mikejolley mikejolley added this to the 6.7.0 milestone Dec 30, 2021
@@ -27,7 +27,7 @@ export const useCheckoutAddress = () => {
} = useCustomerDataContext();

const currentShippingAsBilling = useRef( shippingAsBilling );
const previousBillingData = useRef( billingData );
const previousBillingData = useRef();
Copy link
Member Author

Choose a reason for hiding this comment

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

This prevents it storing the empty address data which will exist on mount.

@github-actions
Copy link
Contributor

Size Change: -44 B (0%)

Total Size: 819 kB

Filename Size Change
build/active-filters-frontend.js 6.21 kB -4 B (0%)
build/all-products-frontend.js 18.6 kB -4 B (0%)
build/all-products.js 34.4 kB +6 B (0%)
build/all-reviews.js 8.35 kB -2 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 6.87 kB +2 B (0%)
build/atomic-block-components/add-to-cart.js 6.43 kB +2 B (0%)
build/atomic-block-components/button-frontend.js 1.48 kB -2 B (0%)
build/atomic-block-components/category-list-frontend.js 458 B +1 B (0%)
build/atomic-block-components/price-frontend.js 1.74 kB -4 B (0%)
build/atomic-block-components/rating-frontend.js 553 B +1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 585 B +1 B (0%)
build/atomic-block-components/summary-frontend.js 874 B +2 B (0%)
build/atomic-block-components/tag-list-frontend.js 460 B +2 B (0%)
build/atomic-block-components/title-frontend.js 1.11 kB -3 B (0%)
build/attribute-filter-frontend.js 16.3 kB -1 B (0%)
build/attribute-filter.js 12.7 kB -3 B (0%)
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB -2 B (0%)
build/cart-blocks/checkout-button-frontend.js 1.14 kB -1 B (0%)
build/cart-blocks/line-items-frontend.js 5.32 kB +182 B (+4%)
build/cart-blocks/order-summary-frontend.js 8.98 kB +1 B (0%)
build/cart-frontend.js 45.4 kB -117 B (0%)
build/cart.js 44.3 kB +11 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.94 kB +2 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.15 kB -2 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -1 B (0%)
build/checkout-blocks/payment-frontend.js 7.41 kB -3 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB +2 B (0%)
build/checkout-frontend.js 47.5 kB -116 B (0%)
build/checkout.js 47.1 kB +12 B (0%)
build/featured-product.js 9.91 kB +2 B (0%)
build/handpicked-products.js 7.33 kB +5 B (0%)
build/legacy-template.js 2.08 kB +1 B (0%)
build/mini-cart-component-frontend.js 14.2 kB -5 B (0%)
build/mini-cart-contents.js 3.6 kB +3 B (0%)
build/price-filter-frontend.js 12.4 kB -1 B (0%)
build/price-filter.js 8.62 kB -2 B (0%)
build/product-best-sellers.js 7.51 kB +1 B (0%)
build/product-categories.js 3.47 kB -2 B (0%)
build/product-new.js 7.66 kB +1 B (0%)
build/product-top-rated.js 7.63 kB +1 B (0%)
build/products-by-attribute.js 8.48 kB +1 B (0%)
build/reviews-by-category.js 11.8 kB -1 B (0%)
build/reviews-frontend.js 7.24 kB -6 B (0%)
build/single-product-frontend.js 22.1 kB -3 B (0%)
build/single-product.js 10.4 kB +4 B (0%)
build/stock-filter-frontend.js 6.81 kB -6 B (0%)
build/stock-filter.js 6.82 kB -1 B (0%)
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB +1 B (0%)
build/wc-blocks-vendors.js 65.5 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters.js 7.05 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/button.js 851 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price.js 1.7 kB
build/atomic-block-components/rating.js 554 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator.js 585 B
build/atomic-block-components/summary.js 871 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title.js 1.1 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.86 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/totals-frontend.js 320 B
build/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 884 B
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/shipping-address-frontend.js 971 B
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 8.55 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.46 kB
build/price-format.js 1.18 kB
build/product-category.js 8.36 kB
build/product-on-sale.js 8.05 kB
build/product-search.js 2.47 kB
build/product-tag.js 7.76 kB
build/reviews-by-product.js 12.9 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 6.82 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.46 kB
build/wc-blocks-editor-style.css 4.46 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.6 kB
build/wc-blocks-style.css 21.6 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.61 kB

compressed-size-action

@mikejolley mikejolley added the status: blocker Used on issues or pulls that block work from being released. label Dec 31, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. status: blocker Used on issues or pulls that block work from being released. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkout Block fields are not pre-filled via Customer payment page link for Subscription Renewal Orders
2 participants