woocommerce/plugins/woocommerce-blocks/assets/js/editor-components/incompatible-payment-gatewa.../index.tsx

98 lines
2.7 KiB
TypeScript
Raw Normal View History

Highlight incompatible payment gateways (https://github.com/woocommerce/woocommerce-blocks/pull/7412) * Set up incompatiblePaymentMethods in data store * Save incompatible payment methods in data store * Create the IncompatibilityPaymentGatewaysNotice * Fix hidden notice bug * Rename "paymentAdminLink" to GlobalPaymentMethod and move to types dir * Add all registered methods to incompatiblePaymentMethods state * Rename selector to getIncompatiblePaymentMethods * Remove incompatible methods when adding available ones * Remove unused reducer cases * Stop adding incompatible methods now that we add them in default state * Display incompatible methods in the notice from the data store * Refactor incompatible payment gateways notice * Update the incompatible extensions notice's design * Hide Make as default notice We hide this notice while the notification for incompatible payment gateways is visible * Hide the sidebar compatibility notice Hide this notice while the notification for incompatible payment gateways is visible. And show it otherwise. * Capitalize the label for the button on the page settings notice * Fix missing 'globalPaymentMethods' bug on frontend * Highlight incompatible payments in sidebar Highlight incompatible payment gateways within the Payment Options Block * Rename the incompatible gateways notice's component * Support plural and singular forms for the notice * Update incompatible extensions notice's design * Use the simplified types import Co-authored-by: Niels Lange <info@nielslange.de> * Add translation support to notice message * Fix failing unit tests Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> Co-authored-by: Niels Lange <info@nielslange.de>
2022-12-28 16:30:46 +00:00
/**
* External dependencies
*/
import { _n } from '@wordpress/i18n';
import { Notice, ExternalLink } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import {
useState,
createInterpolateElement,
useEffect,
} from '@wordpress/element';
import { alert } from '@woocommerce/icons';
import { Icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { STORE_KEY as PAYMENT_STORE_KEY } from '../../data/payment/constants';
import './editor.scss';
interface PaymentGatewaysNoticeProps {
toggleDismissedStatus: ( status: boolean ) => void;
}
export function IncompatiblePaymentGatewaysNotice( {
toggleDismissedStatus,
}: PaymentGatewaysNoticeProps ) {
// Everything below works the same for Cart/Checkout
const { incompatiblePaymentMethods } = useSelect( ( select ) => {
const { getIncompatiblePaymentMethods } = select( PAYMENT_STORE_KEY );
return {
incompatiblePaymentMethods: getIncompatiblePaymentMethods(),
};
}, [] );
const [ settingStatus, setStatus ] = useState( 'pristine' );
const numberOfIncompatiblePaymentMethods = Object.keys(
incompatiblePaymentMethods
).length;
const isNoticeDismissed =
numberOfIncompatiblePaymentMethods === 0 ||
settingStatus === 'dismissed';
useEffect( () => {
toggleDismissedStatus( isNoticeDismissed );
}, [ isNoticeDismissed, toggleDismissedStatus ] );
if ( isNoticeDismissed ) {
return null;
}
const noticeContent = createInterpolateElement(
_n(
'The following extension is incompatible with the block-based checkout. <a>Learn more</a>',
'The following extensions are incompatible with the block-based checkout. <a>Learn more</a>',
numberOfIncompatiblePaymentMethods,
'woo-gutenberg-products-block'
),
{
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-support-status/" />
),
}
);
return (
<Notice
className="wc-blocks-incompatible-extensions-notice"
status={ 'warning' }
onRemove={ () => setStatus( 'dismissed' ) }
spokenMessage={ noticeContent }
>
<div className="wc-blocks-incompatible-extensions-notice__content">
<Icon
className="wc-blocks-incompatible-extensions-notice__warning-icon"
icon={ alert }
/>
<div>
<p>{ noticeContent }</p>
<ul>
{ Object.entries( incompatiblePaymentMethods ).map(
( [ id, title ] ) => (
<li
key={ id }
className="wc-blocks-incompatible-extensions-notice__element"
>
{ title }
</li>
)
) }
</ul>
</div>
</div>
</Notice>
);
}