woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

/**
 * External dependencies
 */
import { Fragment, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import AddressForm from '@woocommerce/base-components/address-form';
import defaultAddressFields from '@woocommerce/base-components/address-form/default-address-fields';
import {
	FormStep,
	CheckoutForm,
	NoShipping,
	Policies,
} from '@woocommerce/base-components/checkout';
import {
	PlaceOrderButton,
	ReturnToCartButton,
} from '@woocommerce/base-components/cart-checkout';
import TextInput from '@woocommerce/base-components/text-input';
import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
import CheckboxControl from '@woocommerce/base-components/checkbox-control';
import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
import {
	CheckoutProvider,
	ValidationContextProvider,
} from '@woocommerce/base-context';
import {
	ExpressCheckoutFormControl,
	PaymentMethods,
} from '@woocommerce/base-components/payment-methods';
import { SHIPPING_ENABLED } from '@woocommerce/block-settings';
import { decodeEntities } from '@wordpress/html-entities';
import { useShippingRates } from '@woocommerce/base-hooks';
import {
	Sidebar,
	SidebarLayout,
	Main,
} from '@woocommerce/base-components/sidebar-layout';
import { getSetting } from '@woocommerce/settings';

/**
 * Internal dependencies
 */
import CheckoutSidebar from './sidebar.js';
import './style.scss';
import '../../../payment-methods-demo';

const Block = ( {
	attributes,
	cartCoupons = [],
	cartItems = [],
	cartTotals = {},
	isEditor = false,
	shippingRates = [],
} ) => {
	const [ selectedShippingRate, setSelectedShippingRate ] = useState( {} );
	const [ contactFields, setContactFields ] = useState( {} );
	const [ shouldSavePayment, setShouldSavePayment ] = useState( true );
	const [ billingFields, setBillingFields ] = useState( {} );
	const [ useShippingAsBilling, setUseShippingAsBilling ] = useState(
		attributes.useShippingAsBilling
	);

	const renderShippingRatesControlOption = ( option ) => ( {
		label: decodeEntities( option.name ),
		value: option.rate_id,
		description: decodeEntities( option.description ),
		secondaryLabel: (
			<FormattedMonetaryAmount
				currency={ getCurrencyFromPriceResponse( option ) }
				value={ option.price }
			/>
		),
		secondaryDescription: decodeEntities( option.delivery_time ),
	} );

	const useShippingAddressAsBilling = isEditor
		? attributes.useShippingAsBilling
		: useShippingAsBilling;
	const showBillingFields =
		! SHIPPING_ENABLED || ! useShippingAddressAsBilling;

	const addressFields = {
		...defaultAddressFields,
		company: {
			...defaultAddressFields.company,
			hidden: ! attributes.showCompanyField,
			required: attributes.requireCompanyField,
		},
		address_2: {
			...defaultAddressFields.address_2,
			hidden: ! attributes.showAddress2Field,
		},
	};

	const {
		shippingRatesLoading,
		shippingAddress: shippingFields,
		setShippingAddress: setShippingFields,
	} = useShippingRates();

	return (
		<ValidationContextProvider>
			<CheckoutProvider isEditor={ isEditor }>
				<SidebarLayout className="wc-block-checkout">
					<Main>
						<ExpressCheckoutFormControl />
						<CheckoutForm>
							<FormStep
								id="contact-fields"
								className="wc-block-checkout__contact-fields"
								title={ __(
									'Contact information',
									'woo-gutenberg-products-block'
								) }
								description={ __(
									"We'll use this email to send you details and updates about your order.",
									'woo-gutenberg-products-block'
								) }
								stepHeadingContent={ () => (
									<Fragment>
										{ __(
											'Already have an account? ',
											'woo-gutenberg-products-block'
										) }
										<a href="/wp-login.php">
											{ __(
												'Log in.',
												'woo-gutenberg-products-block'
											) }
										</a>
									</Fragment>
								) }
							>
								<TextInput
									type="email"
									label={ __(
										'Email address',
										'woo-gutenberg-products-block'
									) }
									value={ contactFields.email }
									autoComplete="email"
									onChange={ ( newValue ) =>
										setContactFields( {
											...contactFields,
											email: newValue,
										} )
									}
									required={ true }
								/>
								<CheckboxControl
									className="wc-block-checkout__keep-updated"
									label={ __(
										'Keep me up to date on news and exclusive offers',
										'woo-gutenberg-products-block'
									) }
									checked={ contactFields.keepUpdated }
									onChange={ () =>
										setContactFields( {
											...contactFields,
											keepUpdated: ! contactFields.keepUpdated,
										} )
									}
								/>
							</FormStep>
							{ SHIPPING_ENABLED && (
								<FormStep
									id="shipping-fields"
									className="wc-block-checkout__shipping-fields"
									title={ __(
										'Shipping address',
										'woo-gutenberg-products-block'
									) }
									description={ __(
										'Enter the physical address where you want us to deliver your order.',
										'woo-gutenberg-products-block'
									) }
								>
									<AddressForm
										onChange={ setShippingFields }
										values={ shippingFields }
										fields={ Object.keys( addressFields ) }
										fieldConfig={ addressFields }
									/>
									{ attributes.showPhoneField && (
										<TextInput
											type="tel"
											label={
												attributes.requirePhoneField
													? __(
															'Phone',
															'woo-gutenberg-products-block'
													  )
													: __(
															'Phone (optional)',
															'woo-gutenberg-products-block'
													  )
											}
											value={ shippingFields.phone }
											autoComplete="tel"
											onChange={ ( newValue ) =>
												setShippingFields( {
													...shippingFields,
													phone: newValue,
												} )
											}
											required={
												attributes.requirePhoneField
											}
										/>
									) }
									<CheckboxControl
										className="wc-block-checkout__use-address-for-billing"
										label={ __(
											'Use same address for billing',
											'woo-gutenberg-products-block'
										) }
										checked={ useShippingAddressAsBilling }
										onChange={ ( isChecked ) =>
											setUseShippingAsBilling( isChecked )
										}
									/>
								</FormStep>
							) }
							{ showBillingFields && (
								<FormStep
									id="billing-fields"
									className="wc-block-checkout__billing-fields"
									title={ __(
										'Billing address',
										'woo-gutenberg-products-block'
									) }
									description={ __(
										'Enter the address that matches your card or payment method.',
										'woo-gutenberg-products-block'
									) }
								>
									<AddressForm
										onChange={ setBillingFields }
										type="billing"
										values={ billingFields }
										fields={ Object.keys( addressFields ) }
										fieldConfig={ addressFields }
									/>
								</FormStep>
							) }
							{ SHIPPING_ENABLED && (
								<FormStep
									id="shipping-option"
									className="wc-block-checkout__shipping-option"
									title={ __(
										'Shipping options',
										'woo-gutenberg-products-block'
									) }
									description={ __(
										'Select a shipping method below.',
										'woo-gutenberg-products-block'
									) }
								>
									{ shippingRates.length === 0 && isEditor ? (
										<NoShipping />
									) : (
										<ShippingRatesControl
											address={
												shippingFields.country
													? {
															address_1:
																shippingFields.address_1,
															address_2:
																shippingFields.apartment,
															city:
																shippingFields.city,
															state:
																shippingFields.state,
															postcode:
																shippingFields.postcode,
															country:
																shippingFields.country,
													  }
													: null
											}
											noResultsMessage={ __(
												'There are no shipping options available. Please ensure that your address has been entered correctly, or contact us if you need any help.',
												'woo-gutenberg-products-block'
											) }
											renderOption={
												renderShippingRatesControlOption
											}
											shippingRates={ shippingRates }
											shippingRatesLoading={
												shippingRatesLoading
											}
										/>
									) }
									<CheckboxControl
										className="wc-block-checkout__add-note"
										label="Add order notes?"
										checked={
											selectedShippingRate.orderNote
										}
										onChange={ () =>
											setSelectedShippingRate( {
												...selectedShippingRate,
												orderNote: ! selectedShippingRate.orderNote,
											} )
										}
									/>
								</FormStep>
							) }
							<FormStep
								id="payment-method"
								className="wc-block-checkout__payment-method"
								title={ __(
									'Payment method',
									'woo-gutenberg-products-block'
								) }
								description={ __(
									'Select a payment method below.',
									'woo-gutenberg-products-block'
								) }
							>
								<PaymentMethods />
								{ /*@todo this should be something the payment method controls*/ }
								<CheckboxControl
									className="wc-block-checkout__save-card-info"
									label={ __(
										'Save payment information to my account for future purchases.',
										'woo-gutenberg-products-block'
									) }
									checked={ shouldSavePayment }
									onChange={ () =>
										setShouldSavePayment(
											! shouldSavePayment
										)
									}
								/>
							</FormStep>
							<div className="wc-block-checkout__actions">
								{ attributes.showReturnToCart && (
									<ReturnToCartButton
										link={ getSetting(
											'page-' + attributes?.cartPageId,
											false
										) }
									/>
								) }
								<PlaceOrderButton />
							</div>
							{ attributes.showPolicyLinks && <Policies /> }
						</CheckoutForm>
					</Main>
					<Sidebar className="wc-block-checkout__sidebar">
						<CheckoutSidebar
							cartCoupons={ cartCoupons }
							cartItems={ cartItems }
							cartTotals={ cartTotals }
						/>
					</Sidebar>
				</SidebarLayout>
			</CheckoutProvider>
		</ValidationContextProvider>
	);
};

export default Block;