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

Add validation to local pickup fields #8007

Merged

Conversation

senadir
Copy link
Member

@senadir senadir commented Dec 21, 2022

This adds simple validation to form fields to prevent empty values from being persisted. It adds it to the modal, the general form, and the editor.

Fixes #7988
Fixes #7989
Fixes #7991

Screenshots

image

image

image

Testing

  1. On the settings screen, empty the local pickup title, attempt to save, you should get an error and it won't save.
  2. Fill the field, you can now save.
  3. In the location modal, you can't add a new location without a title.
  4. In the editor, if you empty the toggle title, you should see a placeholder with the original value. Saving regardless will show the original value in the frontend.

@senadir senadir added type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. block: checkout Issues related to the checkout block. labels Dec 21, 2022
@senadir senadir requested a review from mikejolley December 21, 2022 15:19
@woocommercebot woocommercebot requested a review from a team December 21, 2022 15:19
Comment on lines +72 to +77
const form =
formRef?.current as unknown as HTMLFormElement;
if ( form.reportValidity() ) {
onSave( values );
onClose();
}
Copy link
Member Author

Choose a reason for hiding this comment

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

Button here is outside the form, so we use the ref instead of event.target.form

Comment on lines +29 to +37
onClick={ (
event: React.MouseEvent< HTMLButtonElement, MouseEvent >
) => {
const target = event.target as HTMLButtonElement;
if ( target?.form?.reportValidity() ) {
save();
}
} }
type="submit"
Copy link
Member Author

Choose a reason for hiding this comment

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

This is all that's needed to show errors, reportValidity will return true once all fields are valid.

@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 21, 2022

TypeScript Errors Report

Files with errors: 444
Total errors: 2135

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

assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx

assets/js/base/components/cart-checkout/shipping-rates-control/types.ts

assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx

assets/js/base/components/reviews/review-list-item/index.js

assets/js/base/components/reviews/review-list/index.js

assets/js/base/components/reviews/review-sort-select/index.js

assets/js/base/context/hooks/cart/use-store-cart-coupons.ts

assets/js/base/context/hooks/use-checkout-notices.js

assets/js/base/context/providers/cart-checkout/checkout-processor.js

assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js

assets/js/base/utils/errors.js

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-error-boundary.js

assets/js/blocks/cart/block.js

assets/js/blocks/checkout/block.tsx

assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/index.tsx

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

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

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

assets/js/data/cart/controls.js

assets/js/data/cart/test/resolvers.js

assets/js/extensions/payment-methods/cod/index.js

assets/js/extensions/shipping-methods/pickup-location/edit-location/form.tsx

assets/js/extensions/shipping-methods/pickup-location/edit-location/state-control.tsx

assets/js/extensions/shipping-methods/pickup-location/save.tsx

assets/js/extensions/shipping-methods/pickup-location/settings-context.tsx

assets/js/extensions/shipping-methods/shared-components/sortable-table/index.tsx

packages/checkout/components/store-notice/index.tsx

packages/checkout/components/store-notices-container/index.tsx

@github-actions
Copy link
Contributor

github-actions bot commented Dec 21, 2022

Size Change: +127 B (0%)

Total Size: 1.06 MB

Filename Size Change
build/checkout-blocks/shipping-method-frontend.js 2.25 kB +13 B (+1%)
build/checkout-frontend.js 49 kB +2 B (0%)
build/checkout.js 42.3 kB +21 B (0%)
build/wc-shipping-method-pickup-location.js 29.6 kB +91 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 11.6 kB
build/all-products.js 33.3 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-wrapper-frontend.js 7.65 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 27.7 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 252 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.49 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB
build/cart-blocks/cart-express-payment-frontend.js 779 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.3 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.23 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 780 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping-frontend.js 6.15 kB
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.23 kB
build/cart-frontend.js 46.6 kB
build/cart.js 46.4 kB
build/checkout-blocks/actions-frontend.js 1.8 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.08 kB
build/checkout-blocks/contact-information-frontend.js 1.86 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 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.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 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 6.21 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.3 kB
build/checkout-blocks/pickup-options-frontend.js 2.76 kB
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 5.23 kB
build/checkout-blocks/terms-frontend.js 1.57 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.36 kB
build/legacy-template.js 2.88 kB
build/mini-cart-component-frontend.js 20.2 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.4 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.3 kB
build/price-filter-frontend.js 13.9 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 225 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.47 kB
build/product-add-to-cart.js 8.36 kB
build/product-best-sellers.js 7.73 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 440 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B
build/product-button-frontend.js 2.18 kB
build/product-button.js 3.85 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 503 B
build/product-category.js 8.72 kB
build/product-image-frontend.js 2.17 kB
build/product-image.js 3.93 kB
build/product-new.js 7.72 kB
build/product-on-sale.js 8.04 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.54 kB
build/product-query.js 5.97 kB
build/product-rating-frontend.js 1.48 kB
build/product-rating.js 814 B
build/product-sale-badge-frontend.js 1.39 kB
build/product-sale-badge.js 814 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 628 B
build/product-sku.js 376 B
build/product-stock-indicator-frontend.js 1.27 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 917 B
build/product-tag-list-frontend.js 1.14 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.08 kB
build/product-title-frontend.js 1.59 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.96 kB
build/products-by-attribute.js 8.64 kB
build/rating-filter-frontend.js 21.3 kB
build/rating-filter-wrapper-frontend.js 6.18 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.27 kB
build/single-product-frontend.js 17.7 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 5.84 kB
build/stock-filter.js 8.16 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart--rating-fil--b8470171-frontend.js 6.85 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-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.53 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.81 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 19 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 932 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 25.2 kB
build/wc-blocks-style.css 25.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 64.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

compressed-size-action

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.

Great, test good and code looks fine. Ship it.

@senadir senadir merged commit 1bbd7ab into add/local-pickup-tax-locations Dec 22, 2022
@senadir senadir deleted the add/field-validation-for-local-pickup branch December 22, 2022 13:36
senadir added a commit that referenced this pull request Jan 12, 2023
* add form validation for admin screen

* add types

* add validation to fields

* restore form ref
senadir added a commit that referenced this pull request Jan 12, 2023
* add form validation for admin screen

* add types

* add validation to fields

* restore form ref
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: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants