woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx

/**
 * External dependencies
 */
import { createHigherOrderComponent } from '@wordpress/compose';
import {
	InspectorControls,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import { addFilter, hasFilter } from '@wordpress/hooks';
import type { StoreDescriptor } from '@wordpress/data';
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';

declare module '@wordpress/editor' {
	let store: StoreDescriptor;
}

declare module '@wordpress/core-data' {
	let store: StoreDescriptor;
}

declare module '@wordpress/block-editor' {
	let store: StoreDescriptor;
}

const withSidebarNotices = createHigherOrderComponent(
	( BlockEdit ) => ( props ) => {
		const {
			clientId,
			name: blockName,
			isSelected: isBlockSelected,
		} = props;

		const {
			isCart,
			isCheckout,
			isPaymentMethodsBlock,
			hasPaymentMethods,
			parentId,
		} = useSelect( ( select ) => {
			const { getBlockParentsByBlockName, getBlockName } =
				select( blockEditorStore );

			const parents = getBlockParentsByBlockName( clientId, [
				'woocommerce/cart',
				'woocommerce/checkout',
			] ).reduce(
				(
					accumulator: Record< string, string >,
					parentClientId: string
				) => {
					const parentName = getBlockName( parentClientId );
					accumulator[ parentName ] = parentClientId;
					return accumulator;
				},
				{}
			);

			const currentBlockName = getBlockName( clientId );
			const parentBlockIsCart =
				Object.keys( parents ).includes( 'woocommerce/cart' );
			const parentBlockIsCheckout = Object.keys( parents ).includes(
				'woocommerce/checkout'
			);
			const currentBlockIsCart =
				currentBlockName === 'woocommerce/cart' || parentBlockIsCart;
			const currentBlockIsCheckout =
				currentBlockName === 'woocommerce/checkout' ||
				parentBlockIsCheckout;
			const targetParentBlock = currentBlockIsCart
				? 'woocommerce/cart'
				: 'woocommerce/checkout';

			return {
				isCart: currentBlockIsCart,
				isCheckout: currentBlockIsCheckout,
				parentId:
					currentBlockName === targetParentBlock
						? clientId
						: parents[ targetParentBlock ],
				isPaymentMethodsBlock:
					currentBlockName === 'woocommerce/checkout-payment-block',
				hasPaymentMethods:
					select( PAYMENT_STORE_KEY ).paymentMethodsInitialized() &&
					Object.keys(
						select( PAYMENT_STORE_KEY ).getAvailablePaymentMethods()
					).length > 0,
			};
		} );

		// Show sidebar notices only when a WooCommerce block is selected.
		if (
			! blockName.startsWith( 'woocommerce/' ) ||
			! isBlockSelected ||
			! ( isCart || isCheckout )
		) {
			return <BlockEdit key="edit" { ...props } />;
		}

		return (
			<>
				<InspectorControls>
					<IncompatibleExtensionsNotice
						block={
							isCart ? 'woocommerce/cart' : 'woocommerce/checkout'
						}
						clientId={ parentId }
					/>

					<DefaultNotice block={ isCheckout ? 'checkout' : 'cart' } />

					{ isPaymentMethodsBlock && ! hasPaymentMethods && (
						<NoPaymentMethodsNotice />
					) }

					<CartCheckoutFeedbackPrompt />
				</InspectorControls>
				<BlockEdit key="edit" { ...props } />
			</>
		);
	},
	'withSidebarNotices'
);

if (
	! hasFilter(
		'editor.BlockEdit',
		'woocommerce/add/sidebar-compatibility-notice'
	)
) {
	addFilter(
		'editor.BlockEdit',
		'woocommerce/add/sidebar-compatibility-notice',
		withSidebarNotices,
		11
	);
}