48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Notice, ExternalLink } from '@wordpress/components';
|
|
import { createInterpolateElement } from '@wordpress/element';
|
|
import { __ } from '@wordpress/i18n';
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './editor.scss';
|
|
import { useCompatibilityNotice } from './use-compatibility-notice';
|
|
|
|
export const CartCheckoutSidebarCompatibilityNotice = ( {
|
|
block,
|
|
}: {
|
|
block: 'cart' | 'checkout';
|
|
} ) => {
|
|
const [ isVisible, dismissNotice ] = useCompatibilityNotice( block );
|
|
|
|
const noticeText = createInterpolateElement(
|
|
__(
|
|
'The Cart & Checkout Blocks are a beta feature to optimize for faster checkout. To make sure this feature is right for your store, <a>review the list of compatible extensions</a>.',
|
|
'woo-gutenberg-products-block'
|
|
),
|
|
{
|
|
a: (
|
|
// Suppress the warning as this <a> will be interpolated into the string with content.
|
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
<ExternalLink href="https://woocommerce.com/document/cart-checkout-blocks-support-status/#section-3" />
|
|
),
|
|
}
|
|
);
|
|
|
|
return (
|
|
<Notice
|
|
onRemove={ dismissNotice }
|
|
className={ classnames( [
|
|
'wc-blocks-sidebar-compatibility-notice',
|
|
{ 'is-hidden': ! isVisible },
|
|
] ) }
|
|
>
|
|
{ noticeText }
|
|
</Notice>
|
|
);
|
|
};
|