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

Only validate postcode if its required or filled #9377

Merged
merged 3 commits into from
May 9, 2023

Conversation

senadir
Copy link
Member

@senadir senadir commented May 5, 2023

We are validating postcodes even if they're not required, in this PR, I change that so we only validate them if they're required or filled.

The filled check prevent adding invalid optional postcodes.

Fixes #9376

User Facing Testing

Testing optional empty fields

  1. Set country to something with an optional postcode like Vietnam
  2. Try to checkout with the field empty, it should pass fine.

Testing optional filled fields

For this one we need a turn a required country to optional, this can, add this code to make the UK's postcode optional

add_filter(
	'woocommerce_get_country_locale',
	function( $locale ) {
		$locale['GB']['postcode']['required'] = false;
		return $locale;
	},
	10,
	1
);
  • In Checkout, use an invalid postcode valid.
  • Try to checkout, validation should kick in.
  • Empty the field, you should checkout fine.

Changelog

Fix bug in which optional postcodes were still validated.

@senadir senadir self-assigned this May 5, 2023
@woocommercebot woocommercebot requested review from a team and tarhi-saad and removed request for a team May 5, 2023 12:44
@senadir senadir added type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. labels May 5, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 5, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 5, 2023

Size Change: +355 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/cart-blocks/order-summary-shipping-frontend.js 17 kB +71 B (0%)
build/cart.js 44.8 kB +69 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.73 kB +74 B (+2%)
build/checkout-blocks/order-summary-shipping-frontend.js 17.1 kB +71 B (0%)
build/checkout-frontend.js 31.3 kB +3 B (0%)
build/checkout.js 46.3 kB +67 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB
build/active-filters-wrapper-frontend.js 4.68 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 12.1 kB
build/all-products.js 38.9 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB
build/attribute-filter-wrapper-frontend.js 4.64 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 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 5.53 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 717 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.39 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 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 273 B
build/cart-blocks/order-summary-heading-frontend.js 332 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.6 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 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 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.16 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 6.35 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/customer-account.js 3.18 kB
build/featured-category.js 14.4 kB
build/featured-product.js 14.7 kB
build/filter-wrapper-frontend.js 14.2 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 8 kB
build/legacy-template.js 5.67 kB
build/mini-cart-component-frontend.js 29.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 864 B
build/mini-cart-contents-block/checkout-button-frontend.js 866 B
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 3.23 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 760 B
build/mini-cart-contents-block/title-frontend.js 1.08 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 729 B
build/mini-cart-contents-block/title-label-frontend.js 661 B
build/mini-cart-contents.js 17.9 kB
build/mini-cart-frontend.js 2.05 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-wrapper-frontend.js 5.78 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B
build/product-add-to-cart--product-rating.js 151 B
build/product-add-to-cart-frontend.js 6.5 kB
build/product-add-to-cart.js 8.87 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.18 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.35 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 4.31 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.68 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.74 kB
build/product-query.js 11.6 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 578 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 771 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 922 B
build/product-tag.js 8.97 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.75 kB
build/product-top-rated.js 8.58 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 3.04 kB
build/rating-filter.js 7.01 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.8 kB
build/stock-filter-wrapper-frontend.js 3.31 kB
build/stock-filter.js 7.72 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 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.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 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.75 kB
build/wc-blocks-style-rtl.css 27.7 kB
build/wc-blocks-style.css 27.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 65.2 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/wc-shipping-method-pickup-location.js 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@ralucaStan ralucaStan added the status: blocker Used on issues or pulls that block work from being released. label May 8, 2023
@nielslange nielslange self-requested a review May 8, 2023 09:02
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.

Thanks for working on this, @senadir.

Testing optional empty fields

While looking into the first test case Testing optional empty fields, I noticed that the postcode validation error still appeared when applying the following steps:

  1. Go to /wp-admin/admin.php?page=wc-settings and set Default customer location to No location by default.
  2. Open an incognito window.
  3. Add a product to the cart.
  4. Go to the checkout page.
  5. Provide the following credentials
Email address:          [email protected]
First name:             Jaap
Last name:              Schippers
Address:                Main Road 23
Country/Region:         Vietnam
Postal code (optional): KEEP EMPTY
City:                   Hanoi
Phone (optional):       KEEP EMPTY
  1. Click on Place Order.
  2. See that postal code validation kicks in and inline error message Please enter a valid postal code is visible.
  3. Refresh the page.
  4. Click on Place Order.
  5. See that the order can be placed now.
  6. Repeat steps 2. until 7. with a fresh incognito window.
  7. Instead of refreshing the window, add some characters in the postal code field and empty the field again.
  8. Click on Place Order.
  9. See that the order can be placed as well.

Testing optional filled fields

While looking into the second test case Testing optional filled fields, I saw the same behaviour as for the first test case. These are my testing steps for the second test case:

  1. Go to /wp-admin/admin.php?page=wc-settings and set Default customer location to No location by default.
  2. Install and activate the plugin Code Snippets.
  3. Go to /wp-admin/admin.php?page=add-snippet and add the following snippet:
add_filter(
	'woocommerce_get_country_locale',
	function( $locale ) {
		$locale['GB']['postcode']['required'] = false;
		return $locale;
	},
	10,
	1
);
  1. Ensure that the priority for the snippet is set to 1:

Screen Shot 2023-05-08 at 21 08 46

  1. Open an incognito window.
  2. Add a product to the cart.
  3. Go to the checkout page.
  4. Provide the following credentials
Email address:          [email protected]
First name:             Jaap
Last name:              Schippers
Address:                Main Road 23
Country/Region:         United Kingdom (UK)
Postal code (optional): KEEP EMPTY
City:                   London
Phone (optional):       KEEP EMPTY
  1. Click on Place Order.
  2. See that postal code validation kicks in and inline error message Please enter a valid postal code is visible.
  3. Refresh the page.
  4. Click on Place Order.
  5. See that the order can be placed now.
  6. Repeat steps 2. until 7. with a fresh incognito window.
  7. Instead of refreshing the window, add some characters in the postal code field and empty the field again.
  8. Click on Place Order.
  9. See that the order can be placed as well.

)
field.required || inputObject.value
? customValidationHandler(
inputObject,
Copy link
Contributor

Choose a reason for hiding this comment

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

I think these checks should be inside the customValidationHandler if possible. The customValidationHandler should receive another parameter isOptional, defaulted to false and should handle the logic inside.

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 the fix! It works great now. 🎉

@nielslange nielslange merged commit 344f5b4 into trunk May 9, 2023
@nielslange nielslange deleted the fix/postcode-validate-if-required branch May 9, 2023 09:54
kmanijak pushed a commit that referenced this pull request May 9, 2023
* Only validate postcode if its required

* Clear postcode validation error if postcode is not required

---------

Co-authored-by: Niels Lange <[email protected]>
kmanijak added a commit that referenced this pull request May 9, 2023
@mikejolley mikejolley modified the milestones: 10.3.0, 10.2.0 May 22, 2023
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 still require postcode even if it's not required.
5 participants