remove the generic incompatible notice from Checkout block. (#47475)
* remove the generic incompatible notice * Add changefile(s) from automation for the following project(s): woocommerce-blocks --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Seghir Nadir
GitHub
parent
9b1e9344e0
commit
4f348eb540
|
|
@ -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(
|
|||
<>
|
||||
<InspectorControls>
|
||||
<IncompatibleExtensionsNotice
|
||||
toggleDismissedStatus={
|
||||
toggleIncompatibleExtensionsNoticeDismissedStatus
|
||||
}
|
||||
block={
|
||||
isCart ? 'woocommerce/cart' : 'woocommerce/checkout'
|
||||
}
|
||||
|
|
@ -129,13 +113,6 @@ const withSidebarNotices = createHigherOrderComponent(
|
|||
|
||||
<DefaultNotice block={ isCheckout ? 'checkout' : 'cart' } />
|
||||
|
||||
{ isIncompatibleExtensionsNoticeDismissed ? (
|
||||
<CartCheckoutSidebarCompatibilityNotice
|
||||
block={ isCheckout ? 'checkout' : 'cart' }
|
||||
clientId={ parentId }
|
||||
/>
|
||||
) : null }
|
||||
|
||||
{ isPaymentMethodsBlock && ! hasPaymentMethods && (
|
||||
<NoPaymentMethodsNotice />
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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, <a>review the list of compatible extensions</a>.",
|
||||
'woocommerce'
|
||||
),
|
||||
{
|
||||
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-status/#section-10" />
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<Notice
|
||||
onRemove={ dismissNotice }
|
||||
className={ classnames( [
|
||||
'wc-blocks-sidebar-compatibility-notice',
|
||||
{ 'is-hidden': ! isVisible },
|
||||
] ) }
|
||||
>
|
||||
{ noticeText }
|
||||
<SwitchToClassicShortcodeButton
|
||||
block={ `woocommerce/${ block }` }
|
||||
clientId={ clientId }
|
||||
type={ 'generic' }
|
||||
/>
|
||||
</Notice>
|
||||
);
|
||||
};
|
||||
|
|
@ -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 ];
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
Comment: Removes the incompatible notice from Checkout.
|
||||
|
||||
Loading…
Reference in New Issue