85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { Guide } from '@wordpress/components';
|
||
|
|
import { __ } from '@wordpress/i18n';
|
||
|
|
import { createInterpolateElement } from '@wordpress/element';
|
||
|
|
import { isWpVersion } from '@woocommerce/settings';
|
||
|
|
import type { ReactElement } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import { useCompatibilityNotice } from './use-compatibility-notice';
|
||
|
|
import WooImage from './woo-image';
|
||
|
|
|
||
|
|
interface CartCheckoutCompatibilityNoticeProps {
|
||
|
|
blockName: 'cart' | 'checkout';
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CartCheckoutCompatibilityNotice( {
|
||
|
|
blockName,
|
||
|
|
}: CartCheckoutCompatibilityNoticeProps ): ReactElement | null {
|
||
|
|
const [ isVisible, dismissNotice ] = useCompatibilityNotice( blockName );
|
||
|
|
|
||
|
|
if ( isWpVersion( '5.4', '<=' ) || ! isVisible ) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Guide
|
||
|
|
className="edit-post-welcome-guide"
|
||
|
|
contentLabel={ __(
|
||
|
|
'Compatibility notice',
|
||
|
|
'woo-gutenberg-products-block'
|
||
|
|
) }
|
||
|
|
onFinish={ () => dismissNotice() }
|
||
|
|
finishButtonText={ __( 'Got it!', 'woo-gutenberg-products-block' ) }
|
||
|
|
pages={ [
|
||
|
|
{
|
||
|
|
image: <WooImage />,
|
||
|
|
content: (
|
||
|
|
<>
|
||
|
|
<h1 className="edit-post-welcome-guide__heading">
|
||
|
|
{ __(
|
||
|
|
'Compatibility notice',
|
||
|
|
'woo-gutenberg-products-block'
|
||
|
|
) }
|
||
|
|
</h1>
|
||
|
|
<p className="edit-post-welcome-guide__text">
|
||
|
|
{ createInterpolateElement(
|
||
|
|
__(
|
||
|
|
'This block may not be compatible with <em>all</em> checkout extensions and integrations.',
|
||
|
|
'woo-gutenberg-products-block'
|
||
|
|
),
|
||
|
|
{
|
||
|
|
em: <em />,
|
||
|
|
}
|
||
|
|
) }
|
||
|
|
</p>
|
||
|
|
<p className="edit-post-welcome-guide__text">
|
||
|
|
{ createInterpolateElement(
|
||
|
|
__(
|
||
|
|
'We recommend reviewing our <a>expanding list</a> of compatible extensions prior to using this block on a live store.',
|
||
|
|
'woo-gutenberg-products-block'
|
||
|
|
),
|
||
|
|
{
|
||
|
|
a: (
|
||
|
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
||
|
|
<a
|
||
|
|
href="https://docs.woocommerce.com/document/cart-checkout-blocks-support-status/"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
}
|
||
|
|
) }
|
||
|
|
</p>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
] }
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|