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

Update wc/store/cart to handle hidden shipping costs until address is entered #8682

Merged
merged 34 commits into from
Mar 13, 2023

Conversation

opr
Copy link
Contributor

@opr opr commented Mar 9, 2023

This PR is based on add/hide-costs-control #8680 and is part of the work required to satisfy #7895

In this PR, the changes made include updates to the wc/store/cart data store, to track when an address is complete.

These changes are required the purposes of showing shipping rates only when an address is complete, and also tracks whether the complete address has been pushed to the server. This check is required to prevent showing outdated shipping methods in the event that an address becomes complete, but has not been pushed to the server yet, and shipping methods are not updated.

This had to be done in the data store rather than the API because the setting to Hide shipping costs until an address is entered is now a block setting, and altering the API to show only local pickup options would not be possible. If it were done in the Store API and there were two Checkout blocks on the site the Store API would only return correct data for one of the blocks.

There was also a scenario where entering a complete address would instantly trigger a rate selection (when the rate radio buttons got rendered) and if the user was entering their address at that time, then the address returned by the API during the selectShippingRate action would be missing the field the user was editing (because that field was not pushed to the server yet) and that would update the form, thus deleting the user's currently entered text. To avoid this, the shipping_address and billing_address keys are removed from the response when updating the cart data following a shipping rate selection.

This PR also updates the local pickup e2e tests. The changes made here are:

  • Move the setup functions from the local pickup e2e suite to a common place (tests/utils/merchant.ts) and improve the DX of using these functions (i.e. the enableLocalPickup function also includes navigating to the settings page).
  • Tests that the Checkout block Hide shipping costs until an address is entered setting correctly prevents rates from appearing until the address is fully entered.

Testing

Automated Tests

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

User Facing Testing

  1. Go to WooCommerce -> Settings -> Shipping -> Local Pickup, enable Local Pickup and add a location.
  2. Go to the Checkout block in the editor, click on the Shipping Options block - in the block sidebar, enable the Hide shipping costs until an address is entered option.
  3. In WooCommerce -> Settings -> General change Default customer location to No location by default.
  4. In an incognito window, add an item to your cart and go to the Checkout block.
  5. Ensure no shipping rates are shown, and ensure the "Shipping" button for method selection says calculated with an address

image

  1. Enter an address (one that you have rates set up for) - as you fill in the address, be sure the rates don't populate until it's completely filled in. (address 1, city, state, country, postcode).
  2. Ensure you can change rates etc.
  3. Disable the Hide shipping costs until an address is entered in the editor and ensure the rates show as usual, even without a full address.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Ensure shipping rates do not show in the Checkout block if the "Hide shipping costs until an address is entered option is selected".

opr added 29 commits March 8, 2023 17:24
@opr opr added block: checkout Issues related to the checkout block. category: tests labels Mar 9, 2023
@opr opr self-assigned this Mar 9, 2023
@woocommercebot woocommercebot requested review from a team and nielslange and removed request for a team March 9, 2023 04:17
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8682.zip

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
product-query.js wp-compose, wp-escape-html, wp-html-entities 🎉

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

TypeScript Errors Report

  • Files with errors: 487
  • Total errors: 2316

⚠️ ⚠️ This PR introduces new TS errors on 8 files:

assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx

assets/js/data/cart/reducers.ts

assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx

assets/js/editor-components/product-attribute-term-control/index.js

assets/js/editor-components/search-list-control/search-list-control.tsx

assets/js/utils/attributes.ts

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

Size Change: +682 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters-wrapper-frontend.js 5.99 kB -1 B (0%)
build/all-products-frontend.js 11.7 kB +7 B (0%)
build/all-products.js 36.8 kB +2 B (0%)
build/blocks-checkout.js 41.2 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.74 kB -1 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB +2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 720 B +1 B (0%)
build/cart-blocks/cart-items-frontend.js 301 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +3 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +1 B (0%)
build/cart-blocks/cart-totals-frontend.js 307 B -1 B (0%)
build/cart-blocks/empty-cart-frontend.js 346 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB -1 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 454 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB +11 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 435 B +1 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB -1 B (0%)
build/cart-frontend.js 28.9 kB +3 B (0%)
build/cart.js 47.7 kB +2 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB +3 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB +1 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.05 kB -1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB +1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB +9 B (0%)
build/checkout-blocks/payment-frontend.js 8.43 kB +1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 2.8 kB +2 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.47 kB +173 B (+8%) 🔍
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB +159 B (+3%)
build/checkout-blocks/terms-frontend.js 1.56 kB +2 B (0%)
build/checkout-frontend.js 30.5 kB -1 B (0%)
build/checkout.js 44.7 kB +111 B (0%)
build/filter-wrapper-frontend.js 14.1 kB -3 B (0%)
build/mini-cart-component-frontend.js 28 kB -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.86 kB -1 B (0%)
build/mini-cart-contents-block/items-frontend.js 237 B -1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 572 B -1 B (0%)
build/mini-cart-contents-block/title-frontend.js 368 B +1 B (0%)
build/product-add-to-cart-frontend.js 6.69 kB -1 B (0%)
build/product-button-frontend.js 2.22 kB -1 B (0%)
build/product-price-frontend.js 2.38 kB +1 B (0%)
build/product-stock-indicator-frontend.js 1.32 kB -2 B (0%)
build/product-summary-frontend.js 1.58 kB +1 B (0%)
build/product-tag-list-frontend.js 1.18 kB -1 B (0%)
build/product-title-frontend.js 1.65 kB +3 B (0%)
build/rating-filter-wrapper-frontend.js 5.61 kB -2 B (0%)
build/single-product-frontend.js 17.9 kB +8 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB -3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB -2 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB -4 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB +2 B (0%)
build/wc-blocks-data.js 21.7 kB +208 B (+1%)
build/wc-blocks-registry.js 3.15 kB +2 B (0%)
build/wc-blocks-shared-hocs.js 1.73 kB -4 B (0%)
build/wc-settings.js 2.6 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters.js 7.42 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.36 kB
build/attribute-filter-wrapper-frontend.js 4.46 kB
build/attribute-filter.js 12.5 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/totals-frontend.js 311 B
build/customer-account.js 3.17 kB
build/featured-category.js 13.3 kB
build/featured-product.js 13.6 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.24 kB
build/legacy-template.js 5.28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents.js 16.6 kB
build/mini-cart-frontend.js 2 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.38 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 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart.js 8.61 kB
build/product-best-sellers.js 7.6 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button.js 3.99 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 501 B
build/product-category.js 8.58 kB
build/product-image-frontend.js 2.22 kB
build/product-image.js 4.09 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.91 kB
build/product-price.js 1.64 kB
build/product-query.js 6.6 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 920 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 818 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 376 B
build/product-stock-indicator.js 644 B
build/product-summary.js 920 B
build/product-tag-list.js 497 B
build/product-tag.js 8.07 kB
build/product-title.js 3.46 kB
build/product-top-rated.js 7.82 kB
build/products-by-attribute.js 8.53 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.12 kB
build/single-product.js 9.97 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/stock-filter.js 8.13 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-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--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 5.68 kB
build/wc-blocks-editor-style.css 5.68 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-style-rtl.css 26.8 kB
build/wc-blocks-style.css 26.7 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.4 kB
build/wc-blocks.js 2.62 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-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@opr
Copy link
Contributor Author

opr commented Mar 10, 2023

I believe the test failure in https://github.com/woocommerce/woocommerce-blocks/actions/runs/4379470384/jobs/7665457556 is not related to this PR.

Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

I've successfully tested the PR, but noticed that isAddressComplete() seems to be defined, but not used. I've added a note on that.

assets/js/base/utils/address.ts Outdated Show resolved Hide resolved
@nielslange nielslange assigned mikejolley and unassigned opr Mar 13, 2023
@nielslange nielslange self-requested a review March 13, 2023 03:42
Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

After the recent change, I tested this PR again, and it's still working as expected. Let's ⛴ this change.

@github-actions github-actions bot added this to the 9.8.0 milestone Mar 13, 2023
@Aljullu Aljullu modified the milestones: 9.8.0, 9.9.0 Mar 13, 2023
@mikejolley
Copy link
Member

I'm not going to block this work being merged but I should point out, if we end up going with a modal or step based flow on the checkout, tracking whether the address has been pushed will no longer be necessary because the shipping step won't be refreshed until the user has input their address cc @ralucaStan

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Tested as described.

@mikejolley mikejolley merged commit 4a5c088 into add/hide-costs-control Mar 13, 2023
@mikejolley mikejolley deleted the add/hidden-shipping-data-store branch March 13, 2023 11:30
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. focus: blocks Specific work involving or impacting how blocks behave. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants