/**
* 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 { 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 { TemplateNotice } from '@woocommerce/editor-components/template-notice';
import { IncompatiblePaymentGatewaysNotice } from '@woocommerce/editor-components/incompatible-payment-gateways-notice';
import { useSelect } from '@wordpress/data';
import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
import { useState } from '@wordpress/element';
import { getSetting } from '@woocommerce/settings';
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 isBlockTheme = getSetting( 'isBlockTheme' );
const [
isIncompatiblePaymentGatewaysNoticeDismissed,
setIsIncompatiblePaymentGatewaysNoticeDismissed,
] = useState( true );
const toggleIncompatiblePaymentGatewaysNoticeDismissedStatus = (
isDismissed: boolean
) => {
setIsIncompatiblePaymentGatewaysNoticeDismissed( isDismissed );
};
const { isCart, isCheckout, isPaymentMethodsBlock, hasPaymentMethods } =
useSelect( ( select ) => {
const { getBlockParentsByBlockName, getBlockName } =
select( blockEditorStore );
const parent = getBlockParentsByBlockName( clientId, [
'woocommerce/cart',
'woocommerce/checkout',
] ).map( getBlockName );
const currentBlockName = getBlockName( clientId );
return {
isCart:
parent.includes( 'woocommerce/cart' ) ||
currentBlockName === 'woocommerce/cart',
isCheckout:
parent.includes( 'woocommerce/checkout' ) ||
currentBlockName === 'woocommerce/checkout',
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 ;
}
return (
<>
{ isBlockTheme ? (
) : (
) }
{ isIncompatiblePaymentGatewaysNoticeDismissed ? (
) : null }
{ isPaymentMethodsBlock && ! hasPaymentMethods && (
) }
>
);
},
'withSidebarNotices'
);
if (
! hasFilter(
'editor.BlockEdit',
'woocommerce/add/sidebar-compatibility-notice'
)
) {
addFilter(
'editor.BlockEdit',
'woocommerce/add/sidebar-compatibility-notice',
withSidebarNotices,
11
);
}