/** * External dependencies */ import classnames from 'classnames'; import { useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { PlaceOrderButton, Policies, ReturnToCartButton, } from '@woocommerce/base-components/cart-checkout'; import { CheckoutProvider, useCheckoutContext, useEditorContext, useValidationContext, } from '@woocommerce/base-context'; import { useStoreCart, useStoreNotices } from '@woocommerce/base-context/hooks'; import { Sidebar, SidebarLayout, Main, } from '@woocommerce/base-components/sidebar-layout'; import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top'; import { CHECKOUT_ALLOWS_GUEST, CHECKOUT_ALLOWS_SIGNUP, } from '@woocommerce/block-settings'; import { isWcVersion, getSetting } from '@woocommerce/settings'; /** * Internal dependencies */ import CheckoutForm from './form'; import CheckoutSidebar from './sidebar'; import CheckoutOrderError from './checkout-order-error'; import { CheckoutExpressPayment } from '../payment-methods'; import { LOGIN_TO_CHECKOUT_URL } from './utils'; import './style.scss'; /** * Renders the Checkout block wrapped within the CheckoutProvider. * * @param {Object} props Component props. * @return {*} The component. */ const Block = ( props ) => { return ( ); }; /** * Main Checkout Component. * * @param {Object} props Component props. * @param {Object} props.attributes Incoming block attributes. * @param {function(any):any} props.scrollToTop Function for scrolling to top. */ const Checkout = ( { attributes, scrollToTop } ) => { const { isEditor } = useEditorContext(); const { cartItems, cartTotals, cartCoupons, cartFees, cartNeedsPayment, } = useStoreCart(); const { hasOrder, hasError: checkoutHasError, isIdle: checkoutIsIdle, customerId, } = useCheckoutContext(); const { hasValidationErrors, showAllValidationErrors, } = useValidationContext(); const { hasNoticesOfType } = useStoreNotices(); const hasErrorsToDisplay = checkoutIsIdle && checkoutHasError && ( hasValidationErrors || hasNoticesOfType( 'default' ) ); // Checkout signup is feature gated to WooCommerce 4.7 and newer; // uses updated my-account/lost-password screen from 4.7+ for // setting initial password. const allowCreateAccount = attributes.allowCreateAccount && isWcVersion( '4.7.0', '>=' ); useEffect( () => { if ( hasErrorsToDisplay ) { showAllValidationErrors(); scrollToTop( { focusableSelector: 'input:invalid' } ); } }, [ hasErrorsToDisplay, scrollToTop, showAllValidationErrors ] ); if ( ! isEditor && ! hasOrder ) { return ; } if ( ! isEditor && ! customerId && ! CHECKOUT_ALLOWS_GUEST && ! ( allowCreateAccount && CHECKOUT_ALLOWS_SIGNUP ) ) { return ( <> { __( 'You must be logged in to checkout. ', 'woo-gutenberg-products-block' ) } { __( 'Click here to log in.', 'woo-gutenberg-products-block' ) } ); } const checkoutClassName = classnames( 'wc-block-checkout', { 'has-dark-controls': attributes.hasDarkControls, } ); return ( <>
{ cartNeedsPayment && }
{ attributes.showReturnToCart && ( ) }
{ attributes.showPolicyLinks && }
); }; export default withScrollToTop( Block );