Skip to content

Commit

Permalink
fix: Markup is visible in checkout error notices (woocommerce#6800)
Browse files Browse the repository at this point in the history
* Enabled __unstableHTML hidden option for HTML rendering within notices.

* Fixed margin-bottom for HTML notice content

* Fixed margin-top for HTML notice content

* Attempt to fix a broken e2e test
  • Loading branch information
wavvves authored and senadir committed Nov 12, 2022
1 parent d537b51 commit 7abdd47
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -235,13 +235,18 @@ const CheckoutProcessor = () => {
}
createErrorNotice(
formatStoreApiErrorMessage( response ),
{ id: 'checkout', context: 'wc/checkout' }
{
id: 'checkout',
context: 'wc/checkout',
__unstableHTML: true,
}
);
response?.additional_errors?.forEach?.(
( additionalError ) => {
createErrorNotice( additionalError.message, {
id: additionalError.error_code,
context: 'wc/checkout',
__unstableHTML: true,
} );
}
);
Expand All @@ -261,7 +266,11 @@ const CheckoutProcessor = () => {
'woo-gutenberg-products-block'
)
),
{ id: 'checkout', context: 'wc/checkout' }
{
id: 'checkout',
context: 'wc/checkout',
__unstableHTML: true,
}
);
}
dispatchActions.setHasError( true );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@
vertical-align: text-top;
}
}
.components-notice__content > div:not(.components-notice__actions) {
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
}
.wc-block-components-notices__notice + .wc-block-components-notices__notice {
margin-top: 1em;
Expand Down
18 changes: 10 additions & 8 deletions assets/js/base/utils/errors.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Given a JS error or a fetch response error, parse and format it so it can be displayed to the user.
* Given a JS error or a fetch response error, parse and format it, so it can be displayed to the user.
*
* @param {Object} error Error object.
* @param {Function} [error.json] If a json method is specified, it will try parsing the error first.
Expand Down Expand Up @@ -36,7 +36,7 @@ export const formatError = async ( error ) => {
};

/**
* Given an API response object, formats the error message into something more human readable.
* Given an API response object, formats the error message into something more human-readable.
*
* @param {Object} response Response object.
* @return {string} Error message.
Expand All @@ -49,10 +49,12 @@ export const formatStoreApiErrorMessage = ( response ) => {
}
}

return response?.message
? decodeEntities( response.message )
: __(
'Something went wrong. Please contact us to get assistance.',
'woo-gutenberg-products-block'
);
if ( ! response?.message ) {
return __(
'Something went wrong. Please contact us to get assistance.',
'woo-gutenberg-products-block'
);
}

return decodeEntities( response.message );
};
5 changes: 4 additions & 1 deletion assets/js/blocks/checkout/empty-cart/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ const EmptyCart = () => {
size={ 100 }
/>
<strong className="wc-block-checkout-empty__title">
{ __( 'Your cart is empty!', 'woo-gutenberg-products-block' ) }
{ __(
'Your cart is currently empty!',
'woo-gutenberg-products-block'
) }
</strong>
<p className="wc-block-checkout-empty__description">
{ __(
Expand Down
4 changes: 2 additions & 2 deletions tests/e2e/specs/shopper/cart-checkout/checkout.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,11 @@ describe( 'Shopper → Checkout', () => {

it( 'User can view empty cart message', async () => {
await shopper.block.goToCheckout();
// Verify cart is empty'
// Verify cart is empty
await expect( page ).toMatchElement(
'strong.wc-block-checkout-empty__title',
{
text: 'Your cart is empty!',
text: 'Your cart is currently empty!',
}
);
} );
Expand Down

0 comments on commit 7abdd47

Please sign in to comment.