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

Conversation

@nielslange
Copy link
Contributor

@nielslange nielslange commented May 4, 2022

Fixes #5811

In our codebase, we were using billingData and shippingAddress, which both contains the address object. To increase the maintainability of the codebase, we changed billingData to billingAddress.

As some extensions are already using billingData via useStoreCart, this PR ensures that the change is backwards compatible.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

For automatic testing, you can either run the entire unit tests using npm t, the individual unit test that covers this PR using npm t -- assets/js/base/context/hooks/cart/test/use-store-cart.js and the individual integration test using npm t -- npm t -- slots.js.

User Facing Testing

Regular payments

  1. Place a test order with the default payment method, e.g. Cash on Delivery.
  2. Place a test order with an external payment gateways, e.g. WooCommerce Stripe Payment Gateway.

Deprecation gate

  1. Install the plugin woocommerce-test-extension.zip
  2. Go to the Checkout page and open the console. (https://kb.mailster.co/how-can-i-open-the-browsers-console/ contains instructions on how to open the console.)
  3. Verify that the warning billingData is deprecated. Please use billingAddress instead. See: https://github.com/woocommerce/woocommerce-blocks/pull/6369 is visible.

Screenshot 2022-06-10 at 18 18 40

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@nielslange nielslange added type: refactor The issue/PR is related to refactoring. skip-changelog PRs that you don't want to appear in the changelog. type: dependencies Pull requests that update a dependency file (used by renovate). block: checkout Issues related to the checkout block. labels May 4, 2022
@rubikuserbot rubikuserbot requested review from a team and wavvves and removed request for a team May 4, 2022 11:39
@github-actions
Copy link
Contributor

github-actions bot commented May 4, 2022

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
wc-blocks.js wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives ⚠️
handpicked-products.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-best-sellers.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-category.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-categories.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
product-new.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-on-sale.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-top-rated.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
products-by-attribute.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
featured-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-reviews.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives ⚠️
reviews-by-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
reviews-by-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
product-search.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-tag.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
featured-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products.js lodash, react, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
price-filter.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
attribute-filter.js lodash, react, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
stock-filter.js lodash, react, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
active-filters.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
cart.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
mini-cart.js react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart-contents.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
single-product.js lodash, react, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
legacy-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

github-actions bot commented May 4, 2022

Size Change: +692 B (0%)

Total Size: 864 kB

Filename Size Change
build/active-filters-frontend.js 6.59 kB -1 B (0%)
build/active-filters.js 7.57 kB -1 B (0%)
build/all-products-frontend.js 18.1 kB +9 B (0%)
build/all-products.js 33.5 kB +21 B (0%)
build/all-reviews.js 7.79 kB +1 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.06 kB +2 B (0%)
build/cart-blocks/cart-line-items-frontend.js 433 B +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB -1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB -2 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 427 B -1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 432 B -1 B (0%)
build/cart-frontend.js 45.4 kB +104 B (0%)
build/cart.js 44.2 kB +101 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB -1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB -2 B (0%)
build/checkout-blocks/billing-address-frontend.js 891 B -1 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.83 kB +1 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.35 kB +3 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB -1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.77 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.11 kB -1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 604 B +1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 431 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 7.67 kB +2 B (0%)
build/checkout-blocks/shipping-address-frontend.js 995 B -2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.71 kB +3 B (0%)
build/checkout-frontend.js 47.6 kB +116 B (0%)
build/checkout.js 45.5 kB +64 B (0%)
build/featured-category.js 13.2 kB +2 B (0%)
build/featured-product.js 13.5 kB +2 B (0%)
build/mini-cart-component-frontend.js 16.6 kB +10 B (0%)
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB +1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 5.74 kB +110 B (+2%)
build/mini-cart-contents-block/title-frontend.js 367 B +1 B (0%)
build/mini-cart-contents.js 22.9 kB +108 B (0%)
build/price-filter.js 8.9 kB +1 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB +11 B (0%)
build/product-add-to-cart-frontend.js 6.96 kB +2 B (0%)
build/product-add-to-cart.js 6.64 kB +4 B (0%)
build/product-button-frontend.js 1.85 kB +2 B (0%)
build/product-image.js 1.08 kB +2 B (0%)
build/product-new.js 7.76 kB +2 B (0%)
build/product-on-sale.js 8.08 kB +1 B (0%)
build/product-sale-badge.js 679 B +1 B (0%)
build/product-stock-indicator.js 620 B -1 B (0%)
build/product-summary.js 918 B +1 B (0%)
build/product-tag-list.js 494 B -1 B (0%)
build/product-tag.js 8.12 kB +1 B (0%)
build/products-by-attribute.js 8.69 kB +1 B (0%)
build/reviews-by-category.js 11.3 kB +2 B (0%)
build/reviews-by-product.js 12.4 kB +2 B (0%)
build/single-product-frontend.js 21.5 kB +14 B (0%)
build/single-product.js 10.1 kB +1 B (0%)
build/stock-filter.js 7.13 kB +2 B (0%)
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB -1 B (0%)
build/wc-blocks-data.js 9.87 kB -3 B (0%)
build/wc-blocks-vendors.js 59 kB +1 B (0%)
build/wc-blocks.js 2.63 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/attribute-filter-frontend.js 17.7 kB
build/attribute-filter.js 13.9 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.34 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/handpicked-products.js 7.39 kB
build/legacy-template.js 2.45 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/items-frontend.js 225 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.62 kB
build/price-filter-frontend.js 12.5 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart--product-button.js 565 B
build/product-best-sellers.js 7.47 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 499 B
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 923 B
build/product-category-list.js 501 B
build/product-category.js 8.58 kB
build/product-image-frontend.js 1.84 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 731 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-summary-frontend.js 1.33 kB
build/product-tag-list-frontend.js 917 B
build/product-title-frontend.js 1.3 kB
build/product-title.js 909 B
build/product-top-rated.js 8 kB
build/reviews-frontend.js 7.02 kB
build/stock-filter-frontend.js 6.87 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.75 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-editor-style-rtl.css 5.07 kB
build/wc-blocks-editor-style.css 5.07 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.2 kB
build/wc-blocks-style.css 22.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

@nielslange nielslange marked this pull request as ready for review May 5, 2022 05:38
@nielslange nielslange marked this pull request as draft May 5, 2022 09:41
@nielslange nielslange marked this pull request as ready for review May 6, 2022 11:16
cartIsLoading: false,
cartItemErrors: [],
cartErrors: [],
billingData: {
Copy link
Contributor

Choose a reason for hiding this comment

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

@opr suggested we could also use this instead of accessing the property directly. That way we could warn about deprecated usage, something along the lines of this maybe

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@wavvves I see that you referred to the file assets/js/base/context/hooks/cart/test/use-store-cart.js, which only contains the test. I assume that the deprecation gate should be added to assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-registration.ts instead, correct?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, sorry my bad, I picked up the wrong file after a search. Yes, I didn't want to mention the test file, thanks for noticing 👍

@nielslange nielslange requested a review from wavvves May 26, 2022 09:36
@nielslange
Copy link
Contributor Author

@wavvves I addressed your feedback from #6369 (review). Would you mind reviewing this PR again?

cart,
cartTotals,
cartNeedsShipping,
billingData,
Copy link
Contributor

Choose a reason for hiding this comment

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

After a bit of reviewing with @opr, we found this is being used by registerPaymentMethodExtensionCallbacks (PR and more info here) so billingData should probably still being carried up to this point.

At this point, I wonder if we should weigh all the work involved against the task purpose of just renaming this for consistency 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

@wavvves I see you approved the PR but the highlighted code you mentioned is going to cause errors with payment methods if they try to access billingData won't it?

Copy link
Contributor

@wavvves wavvves Jun 8, 2022

Choose a reason for hiding this comment

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

@opr billingData support was added by @nielslange on the latest commit, can you have a look and see if you spot any problem?

@github-actions github-actions bot modified the milestone: 7.8.0 May 30, 2022
@gigitux gigitux modified the milestones: 7.8.0, 7.9.0 Jun 6, 2022
billingData,
get billingData() {
/* eslint no-console: ["error", { allow: ["warn"] }] */
console.warn(
Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@opr I changed the section before to:

get billingData() {
  // prettier-ignore
  deprecated(
    'billingData',
    {
      alternative: 'billingAddress',
      plugin: 'woocommerce-gutenberg-products-block',
      link:
        'https://github.com/woocommerce/woocommerce-blocks/pull/6369',
    }
  );
  return this.billingAddress;
},

Is that what you had in mind?

…o update/5811-rename-billingData-to-billingAddress-internally

# Conflicts:
#	package-lock.json
@nielslange nielslange requested a review from opr June 10, 2022 04:14
Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

thanks Niels, I tested and it works! 🙌🏼

The user-facing testing instructions in this PR are incorrect, a user won't be checking out PRs or adding any code to their site, could we come up with an alternative testing strategy, for example using and verifying there are no errors (this plugin accesses billingData on this line: https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/extend-cart-checkout-block/src/js/filters.js.mustache#L17)

woocommerce-test-extension.zip

I approved so you can merge, but please update the instructions!

@nielslange nielslange merged commit 296ccef into trunk Jun 10, 2022
@nielslange nielslange deleted the update/5811-rename-billingData-to-billingAddress-internally branch June 10, 2022 16:59
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. skip-changelog PRs that you don't want to appear in the changelog. type: dependencies Pull requests that update a dependency file (used by renovate). type: refactor The issue/PR is related to refactoring.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Rename billingData to billingAddress internally (ensure it remains available as billingData when passed to extensions)

6 participants