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

86 lines
2.3 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 { createInterpolateElement, useEffect } from '@wordpress/element';
import { Alert } from '@woocommerce/icons';
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
import { Icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { useIncompatiblePaymentGatewaysNotice } from './use-incompatible-payment-gateways-notice';
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
import './editor.scss';
interface PaymentGatewaysNoticeProps {
toggleDismissedStatus: ( status: boolean ) => void;
block: 'woocommerce/cart' | 'woocommerce/checkout';
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
}
export function IncompatiblePaymentGatewaysNotice( {
toggleDismissedStatus,
block,
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
}: PaymentGatewaysNoticeProps ) {
const [
isVisible,
dismissNotice,
incompatiblePaymentMethods,
numberOfIncompatiblePaymentMethods,
] = useIncompatiblePaymentGatewaysNotice( block );
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
useEffect( () => {
toggleDismissedStatus( ! isVisible );
}, [ isVisible, toggleDismissedStatus ] );
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
if ( ! isVisible ) {
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
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={ dismissNotice }
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
spokenMessage={ noticeContent }
>
<div className="wc-blocks-incompatible-extensions-notice__content">
<Icon
className="wc-blocks-incompatible-extensions-notice__warning-icon"
icon={ <Alert /> }
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
/>
<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>
);
}