82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { __ } from '@wordpress/i18n';
|
||
|
|
import { Placeholder, Button, Notice } from 'wordpress-components';
|
||
|
|
import { Icon, card } from '@woocommerce/icons';
|
||
|
|
import { ADMIN_URL } from '@woocommerce/settings';
|
||
|
|
import { useEditorContext } from '@woocommerce/base-context';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Render content when no payment methods are found depending on context.
|
||
|
|
*/
|
||
|
|
const NoPaymentMethods = () => {
|
||
|
|
const { isEditor } = useEditorContext();
|
||
|
|
|
||
|
|
return isEditor ? (
|
||
|
|
<NoPaymentMethodsPlaceholder />
|
||
|
|
) : (
|
||
|
|
<NoPaymentMethodsNotice />
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Renders a placeholder in the editor.
|
||
|
|
*/
|
||
|
|
const NoPaymentMethodsPlaceholder = () => {
|
||
|
|
return (
|
||
|
|
<Placeholder
|
||
|
|
icon={ <Icon srcElement={ card } /> }
|
||
|
|
label={ __( 'Payment methods', 'woocommerce' ) }
|
||
|
|
className="wc-block-checkout__no-payment-methods-placeholder"
|
||
|
|
>
|
||
|
|
<span className="wc-block-checkout__no-payment-methods-placeholder-description">
|
||
|
|
{ __(
|
||
|
|
'Your store does not have any payment methods configured that support the checkout block. Once you have configured a compatible payment method (e.g. Stripe) it will be shown here.',
|
||
|
|
'woocommerce'
|
||
|
|
) }
|
||
|
|
</span>
|
||
|
|
<Button
|
||
|
|
isSecondary
|
||
|
|
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
{ __(
|
||
|
|
'Configure Payment Methods',
|
||
|
|
'woocommerce'
|
||
|
|
) }
|
||
|
|
</Button>
|
||
|
|
</Placeholder>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Renders a notice on the frontend.
|
||
|
|
*/
|
||
|
|
const NoPaymentMethodsNotice = () => {
|
||
|
|
return (
|
||
|
|
<Notice
|
||
|
|
isDismissible={ false }
|
||
|
|
className={ classnames(
|
||
|
|
'wc-block-checkout__no-payment-methods-notice',
|
||
|
|
'woocommerce-message',
|
||
|
|
'woocommerce-error'
|
||
|
|
) }
|
||
|
|
>
|
||
|
|
{ __(
|
||
|
|
'There are no payment methods available. This may be an error on our side. Please contact us if you need any help placing your order.',
|
||
|
|
'woocommerce'
|
||
|
|
) }
|
||
|
|
</Notice>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default NoPaymentMethods;
|