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

Hide "collection from" text when a location has an incomplete address. #9808

Merged
merged 8 commits into from
Jul 3, 2023

Conversation

mikejolley
Copy link
Member

Hides the "collection from

" section when a local pickup location has no defined address. This prevents repetition of the local pickup rate name, or nonsensical text.

Fixes #9789

User Facing Testing

  1. Go to WooCommerce > Settings > Shipping > Local Pickup. Create 2 pickup locations—one should have a full address/pickup location, and one should have no address like so:

Screenshot 2023-06-13 at 12 48 21

  1. Add items to your cart and go to checkout.
  2. Select Local Pickup
  3. Select the pickup location with an address. it should show "collection from" like so:

Screenshot 2023-06-13 at 12 50 13

  1. Select the pickup location with no address. It should not show the collection from section:

Screenshot 2023-06-13 at 12 50 19

  1. Place the order and check the confirmation displays correctly without an address also:

Screenshot 2023-06-13 at 12 56 19

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Local Pickup - Only show collection address when set.

@mikejolley mikejolley added status: needs review type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. labels Jun 13, 2023
@mikejolley mikejolley self-assigned this Jun 13, 2023
@woocommercebot woocommercebot requested review from a team and tarunvijwani and removed request for a team June 13, 2023 11:57
@github-actions
Copy link
Contributor

github-actions bot commented Jun 13, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 461
  • Total errors: 2229

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 13, 2023

Size Change: +1.33 kB (0%)

Total Size: 1.17 MB

Filename Size Change
build/active-filters-frontend.js 8.64 kB +12 B (0%)
build/active-filters-wrapper-frontend.js 7.58 kB +7 B (0%)
build/active-filters.js 7.49 kB +5 B (0%)
build/all-products.js 40.3 kB +3 B (0%)
build/all-reviews.js 7.87 kB +3 B (0%)
build/attribute-filter-frontend.js 23 kB +7 B (0%)
build/attribute-filter-wrapper-frontend.js 7.73 kB +7 B (0%)
build/attribute-filter.js 13.3 kB +4 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB +2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 3.78 kB +11 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB -5 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.48 kB -98 B (-2%)
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB +2 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/filled-cart-frontend.js 656 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -2 B (-1%)
build/cart-blocks/order-summary-heading-frontend.js 334 B +1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 17 kB -31 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/cart-frontend.js 29.9 kB -100 B (0%)
build/cart.js 45 kB -289 B (-1%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.88 kB -1 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB -2 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.04 kB -7 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.14 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 kB +4 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB -2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.28 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB -31 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 435 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 9.27 kB +976 B (+12%) ⚠️
build/checkout-blocks/shipping-address-frontend.js 1.17 kB -1 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.63 kB -4 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB -2 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB +2 B (0%)
build/checkout-blocks/totals-frontend.js 361 B +1 B (0%)
build/checkout-frontend.js 31.8 kB -103 B (0%)
build/checkout.js 47.6 kB +954 B (+2%)
build/customer-account.js 3.19 kB +1 B (0%)
build/featured-category.js 15.1 kB +13 B (0%)
build/featured-product.js 15.3 kB +9 B (0%)
build/filter-wrapper-frontend.js 14.3 kB -27 B (0%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/handpicked-products.js 8.04 kB -2 B (0%)
build/legacy-template.js 6.82 kB +19 B (0%)
build/mini-cart-component-frontend.js 30.7 kB -14 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB +1 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB +2 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 587 B -1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 531 B +1 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB +3 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB +3 B (0%)
build/mini-cart-contents.js 18.1 kB -66 B (0%)
build/mini-cart-frontend.js 2.84 kB -1 B (0%)
build/mini-cart.js 5.93 kB +12 B (0%)
build/price-filter-frontend.js 14.7 kB +25 B (0%)
build/price-filter-wrapper-frontend.js 6.79 kB +17 B (0%)
build/price-filter.js 8.56 kB +6 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 272 B +22 B (+9%) 🔍
build/product-add-to-cart-frontend.js 6.52 kB +2 B (0%)
build/product-add-to-cart.js 8.84 kB -7 B (0%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B -1 B (0%)
build/product-button-frontend.js 2.67 kB +16 B (+1%)
build/product-categories.js 2.72 kB +12 B (0%)
build/product-category.js 9.37 kB -3 B (0%)
build/product-image-frontend.js 2.63 kB +19 B (+1%)
build/product-image.js 4.14 kB -3 B (0%)
build/product-new.js 8.65 kB -3 B (0%)
build/product-on-sale.js 8.65 kB -3 B (0%)
build/product-price-frontend.js 231 B +27 B (+13%) ⚠️
build/product-price.js 1.68 kB +1 B (0%)
build/product-query.js 11.9 kB +11 B (0%)
build/product-rating-frontend.js 2.35 kB +17 B (+1%)
build/product-rating.js 1.04 kB +6 B (+1%)
build/product-results-count.js 1.65 kB -4 B (0%)
build/product-sale-badge-frontend.js 1.8 kB +15 B (+1%)
build/product-sale-badge.js 665 B -1 B (0%)
build/product-sku-frontend.js 1.85 kB +18 B (+1%)
build/product-stock-indicator-frontend.js 2.04 kB +12 B (+1%)
build/product-stock-indicator.js 730 B -1 B (0%)
build/product-summary-frontend.js 2.26 kB +16 B (+1%)
build/product-summary.js 1.01 kB +4 B (0%)
build/product-tag.js 9.01 kB -7 B (0%)
build/product-template.js 3.34 kB -2 B (0%)
build/product-title-frontend.js 2.22 kB +12 B (+1%)
build/product-title.js 3.66 kB +1 B (0%)
build/product-top-rated.js 8.91 kB +2 B (0%)
build/products-by-attribute.js 9.76 kB +11 B (0%)
build/rating-filter-frontend.js 21.5 kB +10 B (0%)
build/rating-filter-wrapper-frontend.js 6.25 kB +18 B (0%)
build/rating-filter.js 6.94 kB +6 B (0%)
build/reviews-by-category.js 12.1 kB +4 B (0%)
build/reviews-by-product.js 13.3 kB -2 B (0%)
build/reviews-frontend.js 7.17 kB -1 B (0%)
build/single-product.js 11.1 kB -1 B (0%)
build/stock-filter-frontend.js 21.7 kB +4 B (0%)
build/stock-filter-wrapper-frontend.js 6.5 kB +16 B (0%)
build/stock-filter.js 7.67 kB +12 B (0%)
build/store-notices.js 1.69 kB +5 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB -3 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB +2 B (0%)
build/vendors--attribute-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB -1 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB -5 B (0%)
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB -1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB -5 B (0%)
build/vendors--price-filter-wrapper-frontend.js 2.2 kB +1 B (0%)
build/vendors--product-add-to-cart-frontend.js 7.25 kB -1 B (0%)
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/wc-blocks-data.js 22.4 kB +37 B (0%)
build/wc-blocks-style-rtl.css 28 kB -34 B (0%)
build/wc-blocks-style.css 27.9 kB -34 B (0%)
build/wc-blocks-vendors.js 65.1 kB +11 B (0%)
build/wc-blocks.js 3.71 kB +11 B (0%)
build/woo-directives-runtime.js 0 B -2.73 kB (removed) 🏆
build/woo-directives-vendors.js 0 B -7.91 kB (removed) 🏆
build/wc-interactivity.js 10.4 kB +10.4 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/all-products-frontend.js 12.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-best-sellers.js 8.36 kB
build/product-button.js 3.97 kB
build/product-collection.js 12.3 kB
build/product-search.js 2.63 kB
build/product-sku.js 535 B
build/wc-blocks-editor-style-rtl.css 6.21 kB
build/wc-blocks-editor-style.css 6.21 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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.6 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

This isn't working for me. Am I missing anything?

Screen.Recording.2023-06-16.at.11.39.52.AM.mov

@mikejolley
Copy link
Member Author

@tarunvijwani thats the trunk behaviour. I just retested and its fine in this branch. Suggest rebuilding and clearing caches, or someone else from @woocommerce/rubik can try it.

@nielslange nielslange self-requested a review June 18, 2023 15:38
@nielslange
Copy link
Member

@tarunvijwani thats the trunk behaviour. I just retested and its fine in this branch. Suggest rebuilding and clearing caches, or someone else from @woocommerce/rubik can try it.

@mikejolley I'm getting the same result as @tarunvijwani. To ensure that I'm starting with a fresh environment, I ran the following commands:

rm composer.lock
rm package-lock.json
rm -rf node_modules
rm -rf vendor
nvm use
composer i
npm i
npm run build
Local Pickup address:

Screenshot 2023-06-18 at 17 52 06
Cart block:

Screenshot 2023-06-18 at 17 53 29
Checkout block:

Screenshot 2023-06-18 at 17 54 12

Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

You were right! I was testing it on WooCommerce 7.9. Forgot to enable the WC Blocks plugin after the release.😃
It works as expected. Great work! 🎉
I left one suggestion for the countries where state is an optional field. Let me know your thoughts about it.

@@ -42,6 +56,7 @@ public function calculate_shipping( $package = array() ) {
if ( ! $location['enabled'] ) {
continue;
}
$has_pickup_address = ! empty( $location['address'] ) && ! empty( $location['address']['city'] ) && ! empty( $location['address']['state'] ) && ! empty( $location['address']['country'] );

Choose a reason for hiding this comment

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

Some countries like UAE don't have a state. This condition will hide the Collection from for them as well.
I feel we should have helper function that will check the address completeness based on the country.
We have one similar function: isAddressComplete in utils. Do you think we should utilize it here?
You can test that with the below address:
image

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.

Code wise it looks great, Tarun's suggestion is valid though! We should avoid checking for fields that may are not required for that locale.

What do you think of this?

$required_address_fields_for_country = [];
if ( ! empty( $location['address']['country'] ) ) {
	$shipping_address_fields = wc()->countries->get_address_fields( $location['address']['country'], 'shipping_' );
	foreach ( $shipping_address_fields as $field_name => $field ) {
		if ( true === $field['required'] ) {
			$required_address_fields_for_country[] = str_replace( 'shipping_', '', $field_name );
		}
	}
}

$has_pickup_address = ! empty( $location['address'] ) &&
	( ! empty( $location['address']['city'] ) || ! in_array( 'city', $required_address_fields_for_country, true ) ) &&
	( ! empty( $location['address']['state'] ) || ! in_array( 'state', $required_address_fields_for_country, true ) ) &&
	( ! empty( $location['address']['country'] ) );

@nielslange nielslange removed their request for review June 27, 2023 12:08
@mikejolley
Copy link
Member Author

I added a helper in b4bfc94

@mikejolley mikejolley requested review from opr and tarunvijwani June 28, 2023 09:05
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.

That helper function is a much cleaner way of doing it than I suggested, nice one!

Do you think we should add tests for it? We could add an issue for this and write them later.

Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

Thank you for updating the code. It seems it is still returning null for the UAE address.

image

The variable $country_address_fields is returning the correct data though:

Address country_address_fields value
image image

@mikejolley
Copy link
Member Author

@tarunvijwani missed a check to see if the field was included in address_fields. Try now.

Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

Works great! Thank you for the changes! 🎉

@mikejolley mikejolley merged commit 6e9b47c into trunk Jul 3, 2023
@mikejolley mikejolley deleted the fix/collection-address-display branch July 3, 2023 09:10
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
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. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Local Pickup Title shows twice
4 participants