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

Local Pickup: merge country and state into same field in location modal #8408

Merged

Conversation

tarhi-saad
Copy link
Contributor

@tarhi-saad tarhi-saad commented Feb 10, 2023

This PR merges the Country and State fields into the same field in the local pickup modal in WooCommerce -> Settings -> Shipping -> Local pickup -> Pickup locations -> Add pickup location

Some countries have missing states in WooCommerce. If they are selected, we display a State text field to add it manually.

Fixes #8025

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After
image image

Testing

Automated Tests

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

User Facing Testing

  1. Enable local pickup in WooCommerce -> Settings -> Shipping -> Local pickup -> General.
  2. Under Pickup locations, click on Add pickup location. The Pickup location modal should open
  3. Choose a country with a state. Ensure it's displayed in one field
  4. Fill in the other fields of the modal form, click on done, then save changes
  5. Go to your store, add a product to the cart, then go to the Checkout Block page
  6. Under the Shipping method section, select Local Pickup
  7. Ensure the correct country and state you previously selected are correctly showing under Pickup options
  8. Go back to the local pickup settings from step 1. Follow the same steps from 2 to 7, but in step 3, choose a country without a state (e.g., Cameroon) and ensure that the State text field is displayed. Fill in the form and continue with the rest of the instructions.

image

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Local Pickup: merge country and state into same field in location modal

We are merging the Country & State fields. So, we should get both
default values
We merged both fields in the Pickup Location form modal

We can see a similar example in `WooCommerce -> Settings -> General`
@github-actions
Copy link
Contributor

github-actions bot commented Feb 10, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8408.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: 487
  • Total errors: 2307

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 10, 2023

Size Change: +191 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/wc-shipping-method-pickup-location.js 29.9 kB +191 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 11.7 kB
build/all-products.js 37.7 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.35 kB
build/attribute-filter-wrapper-frontend.js 4.5 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 43.9 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-cross-sells-products-frontend.js 9.75 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
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-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 11.2 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29 kB
build/cart.js 47.7 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.84 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 330 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 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-shipping-frontend.js 11.2 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 4.04 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.47 kB
build/checkout-blocks/shipping-methods-frontend.js 5.26 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.5 kB
build/checkout.js 45.3 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.2 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.91 kB
build/legacy-template.js 5.32 kB
build/mini-cart-component-frontend.js 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/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 572 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.6 kB
build/mini-cart-frontend.js 2.02 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.39 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-frontend.js 6.69 kB
build/product-add-to-cart.js 8.62 kB
build/product-best-sellers.js 8.25 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-frontend.js 2.22 kB
build/product-button.js 4.01 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 9.24 kB
build/product-image-frontend.js 2.22 kB
build/product-image.js 4.12 kB
build/product-new.js 8.25 kB
build/product-on-sale.js 8.58 kB
build/product-price-frontend.js 2.39 kB
build/product-price.js 1.64 kB
build/product-query.js 10.9 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 919 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 819 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 707 B
build/product-sku.js 453 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 498 B
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.48 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.57 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.13 kB
build/single-product-frontend.js 17.9 kB
build/single-product.js 10.6 kB
build/stock-filter-frontend.js 21 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.7 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.82 kB
build/wc-blocks-editor-style.css 5.82 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 26.9 kB
build/wc-blocks-style.css 26.9 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.63 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/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@tarhi-saad tarhi-saad marked this pull request as ready for review February 14, 2023 18:23
@woocommercebot woocommercebot requested review from a team and opr and removed request for a team February 14, 2023 18:24
@tarhi-saad tarhi-saad changed the title [WIP] Local Pickup: merge country and state into same field in location modal Local Pickup: merge country and state into same field in location modal Feb 16, 2023
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.

Code looks pretty solid - I have some feedback however and some issues that need resolving.

  1. If you're already using the pickup locations (in my case I had a location for United States), the new select does not pickup that value. In my case it defaulted to Afganistan.

  2. When you select a country/state the summary text uses the codes:

Screenshot 2023-02-17 at 13 45 21

Do you think it's possible to show the full names?

  1. When you select a country without states the text field appears below the country. Perhaps it might be better above/before the country select.

Thats all!

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.

Same feedback as Mike. Code looks good but the country/state does not update on existing locations.

@tarhi-saad
Copy link
Contributor Author

Thank you, @opr and @mikejolley, for the review! I made the following updates:

I couldn't reproduce the bug you both mentioned! I thought maybe it was a backward compatibility issue, but I added a local pickup address while on the trunk branch, then switched to this branch, and the Country/state select input did pick up the correct values. Are there any steps I can follow to reproduce this bug?

@mikejolley
Copy link
Member

I couldn't reproduce the bug you both mentioned! I thought maybe it was a backward compatibility issue, but I added a local pickup address while on the trunk branch, then switched to this branch, and the Country/state select input did pick up the correct values. Are there any steps I can follow to reproduce this bug?

Did you populate the pickup location with a country without a state you can select, one you must type? E.g. choose United Kingdom and enter Cambs as the state/country.

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 11, 2023
@tarhi-saad tarhi-saad removed the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 11, 2023
@tarhi-saad
Copy link
Contributor Author

tarhi-saad commented Mar 13, 2023

Hello, @mikejolley! 👋 As a follow-up to my last message via Slack: p1678344985194959/1678291671.432779-slack-C8X6Q7XQU, I implemented a fix for the following bug:

Bug

  1. In the Local pickup admin page, add a new address and select a country that has states (e.g., US). But do not select a state
  2. Save your changes. Then checkout to this branch.
  3. Click on "Edit" under the new address you've added previously. You'll notice that the country defaults to "Afghanistan"

Fix

I mentioned here some potential fixes: p1678344985194959/1678291671.432779-slack-C8X6Q7XQU. I choose eventually to default to the same country (e.g. US) and the first of its states on the list (e.g., US — Alabama)! Please let me know what you think of this solution!

@tarhi-saad tarhi-saad requested a review from mikejolley March 13, 2023 15:40
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.

🚢

@tarhi-saad tarhi-saad merged commit 47fc4c9 into trunk Mar 14, 2023
@tarhi-saad tarhi-saad deleted the merge/#8025-local-pickup-country-state-into-same-field branch March 14, 2023 13:49
@tarunvijwani tarunvijwani mentioned this pull request Mar 14, 2023
11 tasks
@tarunvijwani tarunvijwani added this to the 9.9.0 milestone Mar 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Local Pickup: in location modal, merge country and state into same field.
4 participants