diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx index 59609aea150..bb766723dae 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx @@ -8,14 +8,12 @@ import { } from '@wordpress/block-editor'; import { addFilter, hasFilter } from '@wordpress/hooks'; import type { StoreDescriptor } from '@wordpress/data'; -import { CartCheckoutSidebarCompatibilityNotice } from '@woocommerce/editor-components/sidebar-compatibility-notice'; import { NoPaymentMethodsNotice } from '@woocommerce/editor-components/no-payment-methods-notice'; import { PAYMENT_STORE_KEY } from '@woocommerce/block-data'; import { DefaultNotice } from '@woocommerce/editor-components/default-notice'; import { IncompatibleExtensionsNotice } from '@woocommerce/editor-components/incompatible-extension-notice'; import { useSelect } from '@wordpress/data'; import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt'; -import { useState } from '@wordpress/element'; declare module '@wordpress/editor' { let store: StoreDescriptor; @@ -37,17 +35,6 @@ const withSidebarNotices = createHigherOrderComponent( isSelected: isBlockSelected, } = props; - const [ - isIncompatibleExtensionsNoticeDismissed, - setIsIncompatibleExtensionsNoticeDismissed, - ] = useState( true ); - - const toggleIncompatibleExtensionsNoticeDismissedStatus = ( - isDismissed: boolean - ) => { - setIsIncompatibleExtensionsNoticeDismissed( isDismissed ); - }; - const { isCart, isCheckout, @@ -118,9 +105,6 @@ const withSidebarNotices = createHigherOrderComponent( <> - { isIncompatibleExtensionsNoticeDismissed ? ( - - ) : null } - { isPaymentMethodsBlock && ! hasPaymentMethods && ( ) } diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/incompatible-extension-notice/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/incompatible-extension-notice/index.tsx index 185ad8e58de..516d223e8a1 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/incompatible-extension-notice/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/editor-components/incompatible-extension-notice/index.tsx @@ -3,7 +3,7 @@ */ import { __, _n, sprintf } from '@wordpress/i18n'; import { Notice, ExternalLink } from '@wordpress/components'; -import { createInterpolateElement, useEffect } from '@wordpress/element'; +import { createInterpolateElement } from '@wordpress/element'; import { Alert } from '@woocommerce/icons'; import { Icon, chevronDown } from '@wordpress/icons'; @@ -15,7 +15,6 @@ import { SwitchToClassicShortcodeButton } from '../switch-to-classic-shortcode-b import './editor.scss'; interface ExtensionNoticeProps { - toggleDismissedStatus: ( status: boolean ) => void; block: 'woocommerce/cart' | 'woocommerce/checkout'; clientId: string; } @@ -30,7 +29,6 @@ interface ExtensionNoticeProps { * - switch_to_classic_shortcode_undo */ export function IncompatibleExtensionsNotice( { - toggleDismissedStatus, block, clientId, }: ExtensionNoticeProps ) { @@ -41,10 +39,6 @@ export function IncompatibleExtensionsNotice( { incompatibleExtensionsCount, ] = useCombinedIncompatibilityNotice( block ); - useEffect( () => { - toggleDismissedStatus( ! isVisible ); - }, [ isVisible, toggleDismissedStatus ] ); - if ( ! isVisible ) { return null; } diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/editor.scss b/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/editor.scss deleted file mode 100644 index fb3bdf84ebf..00000000000 --- a/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/editor.scss +++ /dev/null @@ -1,25 +0,0 @@ -.wc-blocks-sidebar-compatibility-notice.is-dismissible { - margin: 0; - padding: 0 0 0 $gap; - - .components-notice__dismiss { - min-width: $gap-large; - } - - .components-notice__content { - margin: 0 0 $gap-smallest; - } - - svg { - width: $gap; - height: $gap; - } - - &.is-hidden { - display: none; - } - - button { - margin: $gap 0; - } -} diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/index.tsx deleted file mode 100644 index a71095d31fa..00000000000 --- a/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * 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'; -import { SwitchToClassicShortcodeButton } from '../switch-to-classic-shortcode-button'; - -interface CartCheckoutSidebarCompatibilityNoticeProps { - block: 'cart' | 'checkout'; - clientId: string; -} - -export const CartCheckoutSidebarCompatibilityNotice = ( { - block, - clientId, -}: CartCheckoutSidebarCompatibilityNoticeProps ) => { - const [ isVisible, dismissNotice ] = useCompatibilityNotice( block ); - - if ( ! isVisible ) { - return null; - } - - const noticeText = createInterpolateElement( - __( - "Some extensions don't yet support this block, which may impact the shopper experience. To make sure this feature is right for your store, review the list of compatible extensions.", - 'woocommerce' - ), - { - a: ( - // Suppress the warning as this will be interpolated into the string with content. - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - } - ); - - return ( - - { noticeText } - - - ); -}; diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/use-compatibility-notice.ts b/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/use-compatibility-notice.ts deleted file mode 100644 index 86aba93bbd1..00000000000 --- a/plugins/woocommerce-blocks/assets/js/editor-components/sidebar-compatibility-notice/use-compatibility-notice.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * External dependencies - */ -import { useEffect, useState } from '@wordpress/element'; -import { useLocalStorageState } from '@woocommerce/base-hooks'; - -const initialDismissedNotices: string[] = []; - -export const useCompatibilityNotice = ( - blockName: string -): [ boolean, () => void ] => { - const [ dismissedNotices, setDismissedNotices ] = useLocalStorageState( - `wc-blocks_dismissed_sidebar_compatibility_notices`, - initialDismissedNotices - ); - const [ isVisible, setIsVisible ] = useState( false ); - - const isDismissed = dismissedNotices.includes( blockName ); - const dismissNotice = () => { - const dismissedNoticesSet = new Set( dismissedNotices ); - dismissedNoticesSet.add( blockName ); - setDismissedNotices( [ ...dismissedNoticesSet ] ); - }; - - // This ensures the modal is not loaded on first render. This is required so - // Gutenberg doesn't steal the focus from the Guide and focuses the block. - useEffect( () => { - setIsVisible( ! isDismissed ); - }, [ isDismissed ] ); - - return [ isVisible, dismissNotice ]; -}; diff --git a/plugins/woocommerce/changelog/47475-remove-incompatible-notice-checkout b/plugins/woocommerce/changelog/47475-remove-incompatible-notice-checkout new file mode 100644 index 00000000000..f80470d6f12 --- /dev/null +++ b/plugins/woocommerce/changelog/47475-remove-incompatible-notice-checkout @@ -0,0 +1,4 @@ +Significance: patch +Type: fix +Comment: Removes the incompatible notice from Checkout. +