diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/default-notice/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/default-notice/index.tsx index bb008f06dad..8dadecca0d9 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/default-notice/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/editor-components/default-notice/index.tsx @@ -5,10 +5,15 @@ import { __ } from '@wordpress/i18n'; import { store as editorStore } from '@wordpress/editor'; import triggerFetch from '@wordpress/api-fetch'; import { store as coreStore } from '@wordpress/core-data'; -import { Notice, Button } from '@wordpress/components'; +import { Notice } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { CHECKOUT_PAGE_ID, CART_PAGE_ID } from '@woocommerce/block-settings'; -import { useCallback, useState } from '@wordpress/element'; +import { + useCallback, + useState, + createInterpolateElement, +} from '@wordpress/element'; + /** * Internal dependencies */ @@ -23,40 +28,21 @@ export function DefaultNotice( { block }: { block: string } ) { ? 'woocommerce_checkout_page_id' : 'woocommerce_cart_page_id'; - const noticeContent = - block === 'checkout' - ? __( - 'If you would like to use this block as your default checkout, update your page settings', - 'woo-gutenberg-products-block' - ) - : __( - 'If you would like to use this block as your default cart, update your page settings', - 'woo-gutenberg-products-block' - ); - // Everything below works the same for Cart/Checkout const { saveEntityRecord } = useDispatch( coreStore ); const { editPost, savePost } = useDispatch( editorStore ); - const { slug, isLoadingPage, postPublished, currentPostId } = useSelect( - ( select ) => { - const { getEntityRecord, isResolving } = select( coreStore ); - const { isCurrentPostPublished, getCurrentPostId } = - select( editorStore ); - return { - slug: - getEntityRecord( 'postType', 'page', ORIGINAL_PAGE_ID ) - ?.slug || block, - isLoadingPage: isResolving( 'getEntityRecord', [ - 'postType', - 'page', - ORIGINAL_PAGE_ID, - ] ), - postPublished: isCurrentPostPublished(), - currentPostId: getCurrentPostId(), - }; - }, - [] - ); + const { slug, postPublished, currentPostId } = useSelect( ( select ) => { + const { getEntityRecord } = select( coreStore ); + const { isCurrentPostPublished, getCurrentPostId } = + select( editorStore ); + return { + slug: + getEntityRecord( 'postType', 'page', ORIGINAL_PAGE_ID )?.slug || + block, + postPublished: isCurrentPostPublished(), + currentPostId: getCurrentPostId(), + }; + }, [] ); const [ settingStatus, setStatus ] = useState( 'pristine' ); const updatePage = useCallback( () => { setStatus( 'updating' ); @@ -112,6 +98,46 @@ export function DefaultNotice( { block }: { block: string } ) { saveEntityRecord, slug, ] ); + + let noticeContent; + if ( block === 'checkout' ) { + noticeContent = createInterpolateElement( + __( + 'If you would like to use this block as your default checkout, update your page settings.', + 'woo-gutenberg-products-block' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-is-valid + + { __( + 'update your page settings', + 'woo-gutenberg-products-block' + ) } + + ), + } + ); + } else { + noticeContent = createInterpolateElement( + __( + 'If you would like to use this block as your default cart, update your page settings.', + 'woo-gutenberg-products-block' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-is-valid + + { __( + 'update your page settings', + 'woo-gutenberg-products-block' + ) } + + ), + } + ); + } + // Avoid showing the notice on the site editor, if already set, or if dismissed earlier. if ( ( typeof pagenow === 'string' && pagenow === 'site-editor' ) || @@ -123,7 +149,7 @@ export function DefaultNotice( { block }: { block: string } ) { return ( setStatus( 'dismissed' ) } spokenMessage={ settingStatus === 'updated' @@ -139,18 +165,6 @@ export function DefaultNotice( { block }: { block: string } ) { ) : ( <>

{ noticeContent }

- ) }