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

Move notices to corresponding context #8228

Merged
merged 25 commits into from
Jan 24, 2023

Conversation

nielslange
Copy link
Member

Fixes #7731

Currently, the error message There was a problem with your payment option. appears above the Checkout block. In #7711, @mikejolley added new contexts for StoreNoticesContainer. This issue introduces the following changes:

  • Move There was a problem with your payment option. from wc/checkout to wc/checkout/payments.
  • Move There was a problem with your shipping option. from wc/checkout to wc/checkout/shipping-methods.
  • Enhance __internalEmitValidateEvent to except context as an optional parameter.

Additional notes

As mentioned before, this PR introduces context as an optional parameter, which enables us (and 3PD) to define in which context an error message shall appear.

Screenshots

There was a problem with your payment option.

Before:

7731-payment-before

After:

7731-payment-after

There was a problem with your shipping option.

Before:

7731-shipping-before

After:

7731-shipping-after

Testing

User Facing Testing

  1. Head over to /assets/js/base/context/providers/cart-checkout/checkout-processor.ts and change
if ( hasPaymentError ) {
	return {
		errorMessage: __(
			'There was a problem with your payment option.',
			'woo-gutenberg-products-block'
		),
		context: 'wc/checkout/payments',
	};
}

to

if ( true ) {
	return {
		errorMessage: __(
			'There was a problem with your payment option.',
			'woo-gutenberg-products-block'
		),
		context: 'wc/checkout/payments',
	};
}
  1. Add a product to the cart and go to the Checkout page.
  2. Click on Place Order and verify that the error message There was a problem with your payment option. appears within the Payment options section.
  3. Head over to /assets/js/base/context/providers/cart-checkout/checkout-processor.ts and change
if ( shippingErrorStatus.hasError ) {
	return {
		errorMessage: __(
			'There was a problem with your shipping option.',
			'woo-gutenberg-products-block'
		),
		context: 'wc/checkout/shipping-methods',
	};
}

to

if ( true ) {
	return {
		errorMessage: __(
			'There was a problem with your shipping option.',
			'woo-gutenberg-products-block'
		),
		context: 'wc/checkout/shipping-methods',
	};
}
  1. Go to the Checkout page again.
  2. Click on Place Order and verify that the error message There was a problem with your shipping option. appears within the Shipping options section.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@nielslange nielslange added type: enhancement The issue is a request for an enhancement. type: refactor The issue/PR is related to refactoring. block: checkout Issues related to the checkout block. labels Jan 18, 2023
@nielslange nielslange self-assigned this Jan 18, 2023
@woocommercebot woocommercebot requested review from a team and wavvves and removed request for a team January 18, 2023 05:42
@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2023

Size Change: +97 B (0%)

Total Size: 1.08 MB

Filename Size Change
build/cart-frontend.js 28.5 kB +21 B (0%)
build/cart.js 47.6 kB +22 B (0%)
build/checkout-frontend.js 30.1 kB +25 B (0%)
build/checkout.js 43.3 kB +21 B (0%)
build/wc-blocks-data.js 21.8 kB +8 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.99 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.31 kB
build/all-products-frontend.js 11.6 kB
build/all-products.js 33.5 kB
build/all-reviews.js 7.67 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-wrapper-frontend.js 7.68 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 41 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.64 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.25 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 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.69 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 456 B
build/cart-blocks/order-summary-shipping-frontend.js 14.9 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.91 kB
build/checkout-blocks/billing-address-frontend.js 1.15 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 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.85 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.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 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.32 kB
build/checkout-blocks/pickup-options-frontend.js 2.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.11 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/shipping-methods-frontend.js 4.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/customer-account.js 3.08 kB
build/featured-category.js 13.1 kB
build/featured-product.js 13.4 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.24 kB
build/legacy-template.js 2.87 kB
build/mini-cart-component-frontend.js 27.7 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.82 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 367 B
build/mini-cart-contents.js 16.9 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.4 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 226 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.71 kB
build/product-add-to-cart.js 8.47 kB
build/product-best-sellers.js 7.61 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 439 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 257 B
build/product-button-frontend.js 2.14 kB
build/product-button.js 3.84 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.6 kB
build/product-image-frontend.js 2.14 kB
build/product-image.js 3.94 kB
build/product-new.js 7.6 kB
build/product-on-sale.js 7.93 kB
build/product-price-frontend.js 2.23 kB
build/product-price.js 1.58 kB
build/product-query.js 5.97 kB
build/product-rating-frontend.js 1.57 kB
build/product-rating.js 920 B
build/product-results-count.js 1.68 kB
build/product-sale-badge-frontend.js 1.37 kB
build/product-sale-badge.js 814 B
build/product-search.js 2.61 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.13 kB
build/product-tag-list.js 496 B
build/product-tag.js 8.08 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.31 kB
build/product-top-rated.js 7.84 kB
build/products-by-attribute.js 8.52 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.21 kB
build/rating-filter.js 7.44 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.14 kB
build/single-product-frontend.js 17.7 kB
build/single-product.js 9.99 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.87 kB
build/stock-filter.js 8.17 kB
build/store-notices.js 1.64 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.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.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-editor-style-rtl.css 5.41 kB
build/wc-blocks-editor-style.css 5.41 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.16 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.7 kB
build/wc-blocks-style.css 25.6 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.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 29.7 kB

compressed-size-action

Copy link
Member Author

@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.

@alexflorisca During our call yesterday, you suggested changing context to errorMessageContext to increase the readability. I noticed that createErrorNotice() expects that parameter to be called context. To use errorMessageContext instead, we'd have to apply the following changes:

Change

to errorMessageContext: 'wc/checkout/payments',

Change

to errorMessageContext

Change

( {
errorMessage,
validationErrors,
context = 'wc/checkout',
} ) => {
createErrorNotice( errorMessage, { context } );
setValidationErrors( validationErrors );
}
to

response.forEach(
	( {
		errorMessage,
		validationErrors,
		errorMessageCcontext = 'wc/checkout',
	} ) => {
		createErrorNotice( errorMessage, {
			context: errorMessageContext,
		} );
		setValidationErrors( validationErrors );
	}
);

With that in mind, I find the current implementation easier to read, but I'm keen to hearing your thoughts on that.

…f github.com:woocommerce/woocommerce-blocks into 7731-remove-hardcoded-payment-notice

# Conflicts:
#	.github/workflows/unit-tests.yml
#	package-lock.json
@alexflorisca
Copy link
Member

Yep you're right @nielslange , let's leave it as it is.

Copy link
Contributor

@wavvves wavvves left a comment

Choose a reason for hiding this comment

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

Working as described 👍🏼

@github-actions github-actions bot added this to the 9.5.0 milestone Jan 20, 2023
…commerce/woocommerce-blocks into 7731-remove-hardcoded-payment-notice

# Conflicts:
#	docs/third-party-developers/extensibility/checkout-payment-methods/payment-method-integration.md
@nielslange nielslange mentioned this pull request Jan 24, 2023
3 tasks
@nielslange nielslange merged commit 2751425 into trunk Jan 24, 2023
@nielslange nielslange deleted the 7731-remove-hardcoded-payment-notice branch January 24, 2023 04:58
@nielslange nielslange added the skip-changelog PRs that you don't want to appear in the changelog. label Jan 30, 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. skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement. type: refactor The issue/PR is related to refactoring.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Remove Hardcoded Notices: There was a problem with your payment option
3 participants