This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 218
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add no payment methods placeholder (#1998)
* Update tabs and payment methods component classnames to meet standards * Tidied up logic and added NoPaymentMethods placeholder * Consistent "NO" placeholders * frontend notices * comments * Update assets/js/base/components/payment-methods/no-payment-methods/style.scss Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com> * Address feedback * Moar bundle size * Another notice * Tweak text Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
- Loading branch information
1 parent
b727cc9
commit a0957e0
Showing
14 changed files
with
232 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,18 @@ | ||
.wc-block-checkout__no-shipping .components-placeholder__fieldset { | ||
display: block; | ||
} | ||
.components-placeholder.wc-block-checkout__no-shipping { | ||
margin-bottom: $gap; | ||
|
||
.components-placeholder__fieldset { | ||
display: block; | ||
|
||
.components-button { | ||
background-color: $black; | ||
color: $white; | ||
} | ||
|
||
.wc-block-checkout__no-shipping-description { | ||
display: block; | ||
margin: 0.25em 0 1em 0; | ||
font-size: 13px; | ||
.wc-block-checkout__no-shipping-description { | ||
display: block; | ||
margin: 0.25em 0 1em 0; | ||
font-size: 13px; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,8 @@ | ||
/** | ||
* Internal dependencies | ||
*/ | ||
import './style.scss'; | ||
|
||
export { default as PaymentMethods } from './payment-methods'; | ||
export { default as ExpressPaymentMethods } from './express-payment-methods'; | ||
export { default as ExpressCheckoutFormControl } from './express-checkout'; |
81 changes: 81 additions & 0 deletions
81
assets/js/base/components/payment-methods/no-payment-methods/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
/** | ||
* 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 { useCheckoutContext } 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 } = useCheckoutContext(); | ||
|
||
return isEditor ? ( | ||
<NoPaymentMethodsPlaceholder /> | ||
) : ( | ||
<NoPaymentMethodsNotice /> | ||
); | ||
}; | ||
|
||
/** | ||
* Renders a placeholder in the editor. | ||
*/ | ||
const NoPaymentMethodsPlaceholder = () => { | ||
return ( | ||
<Placeholder | ||
icon={ <Icon srcElement={ card } /> } | ||
label={ __( 'Payment methods', 'woo-gutenberg-products-block' ) } | ||
className="wc-block-checkout__no-payment-methods" | ||
> | ||
<span className="wc-block-checkout__no-payment-methods-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.', | ||
'woo-gutenberg-products-block' | ||
) } | ||
</span> | ||
<Button | ||
isDefault | ||
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` } | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
{ __( | ||
'Configure Payment Methods', | ||
'woo-gutenberg-products-block' | ||
) } | ||
</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.', | ||
'woo-gutenberg-products-block' | ||
) } | ||
</Notice> | ||
); | ||
}; | ||
|
||
export default NoPaymentMethods; |
22 changes: 22 additions & 0 deletions
22
assets/js/base/components/payment-methods/no-payment-methods/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
.components-placeholder.wc-block-checkout__no-payment-methods { | ||
margin-bottom: $gap; | ||
|
||
.components-placeholder__fieldset { | ||
display: block; | ||
|
||
.components-button { | ||
background-color: $black; | ||
color: $white; | ||
} | ||
|
||
.wc-block-checkout__no-payment-methods-description { | ||
display: block; | ||
margin: 0.25em 0 1em 0; | ||
font-size: 13px; | ||
} | ||
} | ||
} | ||
|
||
.components-notice.wc-block-checkout__no-payment-methods-notice { | ||
margin-bottom: $gap; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.