Respect core settings for showing the Checkout block (#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 <[email protected]>

* Rename <LoginPrompt> to <MustLoginPrompt>

* Show space between login text and login link

* Fix TS error

Co-authored-by: Mike Jolley <[email protected]>

Author: nielslange

assets/js/base/components/block-error-boundary/types.ts

@@ -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 {

assets/js/base/components/sidebar-layout/style.scss

@@ -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;

assets/js/blocks/checkout/block.tsx

@@ -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. ',
+				'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={ {
-				showCompanyField,
-				requireCompanyField,
-				showApartmentField,
-				showPhoneField,
-				requirePhoneField,
-			} }
+			value={
+				{
+					showCompanyField,
+					requireCompanyField,
+					showApartmentField,
+					showPhoneField,
+					requirePhoneField,
+				} as Attributes
+			}
 		>
 			{ children }
 		</CheckoutBlockContext.Provider>

assets/js/settings/shared/default-constants.ts

@@ -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;