Respect core settings for showing the Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/7883)

* Respect core settings for showing the Checkout block

* Add account creation option from core to checkout context provider

* Fix TS errors

* Adjust display logic of <LoginPrompt />

* Update assets/js/blocks/checkout/block.tsx

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Rename <LoginPrompt> to <MustLoginPrompt>

* Show space between login text and login link

* Fix TS error

Co-authored-by: Mike Jolley <mike.jolley@me.com>
This commit is contained in:
Niels Lange 2022-12-19 21:19:52 +07:00 committed by GitHub
parent b02b7f9348
commit 7dfced254a
4 changed files with 27 additions and 16 deletions

View File

@ -47,7 +47,7 @@ export interface BlockErrorBoundaryProps extends BlockErrorBase {
* Override the default error with a function that takes the error message and returns a React component
*/
renderError?: ( props: RenderErrorProps ) => React.ReactNode;
showErrorMessage?: boolean;
showErrorMessage?: boolean | undefined;
}
export interface DerivedStateReturn {

View File

@ -4,6 +4,10 @@
margin: 0 auto $gap;
position: relative;
.wc-block-must-login-prompt {
display: block;
}
.wc-block-components-main {
box-sizing: border-box;
margin: 0;

View File

@ -35,20 +35,20 @@ import type { Attributes } from './types';
import { CheckoutBlockContext } from './context';
import { hasNoticesOfType } from '../../utils/notices';
const LoginPrompt = () => {
const MustLoginPrompt = () => {
return (
<>
<div className="wc-block-must-login-prompt">
{ __(
'You must be logged in to checkout.',
'woo-gutenberg-products-block'
) }
) }{ ' ' }
<a href={ LOGIN_TO_CHECKOUT_URL }>
{ __(
'Click here to log in.',
'woo-gutenberg-products-block'
) }
</a>
</>
</div>
);
};
@ -84,22 +84,29 @@ const Checkout = ( {
return <CheckoutOrderError />;
}
/**
* If checkout requires an account (guest checkout is turned off), render
* a notice and prevent access to the checkout, unless we explicitly allow
* account creation during the checkout flow.
*/
if (
isLoginRequired( customerId ) &&
getSetting( 'checkoutAllowsSignup', false )
! getSetting( 'checkoutAllowsSignup', false )
) {
<LoginPrompt />;
return <MustLoginPrompt />;
}
return (
<CheckoutBlockContext.Provider
value={ {
value={
{
showCompanyField,
requireCompanyField,
showApartmentField,
showPhoneField,
requirePhoneField,
} }
} as Attributes
}
>
{ children }
</CheckoutBlockContext.Provider>

View File

@ -9,7 +9,7 @@ import { allSettings } from './settings-init';
export const ADMIN_URL = allSettings.adminUrl;
export const COUNTRIES = allSettings.countries;
export const CURRENCY = allSettings.currency;
export const CURRENT_USER_IS_ADMIN = allSettings.currentUserIsAdmin;
export const CURRENT_USER_IS_ADMIN = allSettings.currentUserIsAdmin as boolean;
export const HOME_URL = allSettings.homeUrl;
export const LOCALE = allSettings.locale;
export const ORDER_STATUSES = allSettings.orderStatuses;