diff --git a/assets/js/base/components/cart-checkout/form-step/style.scss b/assets/js/base/components/cart-checkout/form-step/style.scss index 9f9d8be02dc..b381ed43472 100644 --- a/assets/js/base/components/cart-checkout/form-step/style.scss +++ b/assets/js/base/components/cart-checkout/form-step/style.scss @@ -1,8 +1,8 @@ -.wc-block-components-checkout-form { +.wc-block-components-form { counter-reset: checkout-step; } -.wc-block-components-checkout-form .wc-block-components-checkout-step { +.wc-block-components-form .wc-block-components-checkout-step { position: relative; border: none; padding: 0 0 0 $gap-larger; @@ -22,7 +22,7 @@ padding-bottom: em($gap-large); } -.wc-block-components-checkout-form .wc-block-components-checkout-step:disabled { +.wc-block-components-form .wc-block-components-checkout-step:disabled { opacity: 0.6; } diff --git a/assets/js/base/components/cart-checkout/form/style.scss b/assets/js/base/components/cart-checkout/form/style.scss deleted file mode 100644 index 1e79c4f0500..00000000000 --- a/assets/js/base/components/cart-checkout/form/style.scss +++ /dev/null @@ -1,4 +0,0 @@ -.wc-block-components-checkout-form { - margin: 0; - max-width: 100%; -} diff --git a/assets/js/base/components/cart-checkout/index.js b/assets/js/base/components/cart-checkout/index.js index 2c81b4b39c7..cc8c82bfad8 100644 --- a/assets/js/base/components/cart-checkout/index.js +++ b/assets/js/base/components/cart-checkout/index.js @@ -1,5 +1,4 @@ export { default as AddressForm } from './address-form'; -export { default as CheckoutForm } from './form'; export { default as FormStep } from './form-step'; export { default as OrderSummary } from './order-summary'; export { default as PlaceOrderButton } from './place-order-button'; diff --git a/assets/js/base/components/cart-checkout/form/index.js b/assets/js/base/components/form/index.js similarity index 78% rename from assets/js/base/components/cart-checkout/form/index.js rename to assets/js/base/components/form/index.js index 35753acddb6..987f930ea04 100644 --- a/assets/js/base/components/cart-checkout/form/index.js +++ b/assets/js/base/components/form/index.js @@ -4,11 +4,6 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; -/** - * Internal dependencies - */ -import './style.scss'; - const CheckoutForm = ( { className, children, @@ -18,12 +13,10 @@ const CheckoutForm = ( { event.preventDefault(); onSubmit( event ); }; + return (
{ children } diff --git a/assets/js/blocks/cart-checkout/checkout/block.js b/assets/js/blocks/cart-checkout/checkout/block.js index 3980be822d9..342f8708afa 100644 --- a/assets/js/blocks/cart-checkout/checkout/block.js +++ b/assets/js/blocks/cart-checkout/checkout/block.js @@ -2,44 +2,21 @@ * External dependencies */ import classnames from 'classnames'; -import { useMemo, useEffect } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { - AddressForm, - FormStep, - CheckoutForm, PlaceOrderButton, Policies, ReturnToCartButton, - ShippingRatesControl, } from '@woocommerce/base-components/cart-checkout'; -import { ValidatedTextInput } from '@woocommerce/base-components/text-input'; -import CheckboxControl from '@woocommerce/base-components/checkbox-control'; -import { - getCurrencyFromPriceResponse, - getShippingRatesPackageCount, - getShippingRatesRateCount, -} from '@woocommerce/base-utils'; -import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount'; import { CheckoutProvider, useCheckoutContext, useEditorContext, - useShippingDataContext, useValidationContext, - StoreNoticesProvider, } from '@woocommerce/base-context'; -import { - useStoreCart, - usePaymentMethods, - useStoreNotices, - useCheckoutAddress, -} from '@woocommerce/base-hooks'; -import { - CheckoutExpressPayment, - PaymentMethods, -} from '@woocommerce/base-components/payment-methods'; -import { decodeEntities } from '@wordpress/html-entities'; +import { useStoreCart, useStoreNotices } from '@woocommerce/base-hooks'; +import { CheckoutExpressPayment } from '@woocommerce/base-components/payment-methods'; import { Sidebar, SidebarLayout, @@ -47,19 +24,15 @@ import { } from '@woocommerce/base-components/sidebar-layout'; import { getSetting } from '@woocommerce/settings'; import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top'; -import { - CHECKOUT_SHOW_LOGIN_REMINDER, - CHECKOUT_ALLOWS_GUEST, - DISPLAY_CART_PRICES_INCLUDING_TAX, -} from '@woocommerce/block-settings'; +import { CHECKOUT_ALLOWS_GUEST } from '@woocommerce/block-settings'; /** * Internal dependencies */ +import CheckoutForm from './form'; import CheckoutSidebar from './sidebar'; import CheckoutOrderError from './checkout-order-error'; -import CheckoutOrderNotes from './checkout-order-notes'; -import NoShippingPlaceholder from './no-shipping-placeholder'; +import { LOGIN_TO_CHECKOUT_URL } from './utils'; import './style.scss'; /** @@ -76,29 +49,6 @@ const Block = ( props ) => { ); }; -/** - * Renders a shipping rate control option. - * - * @param {Object} option Shipping Rate. - */ -const renderShippingRatesControlOption = ( option ) => { - const priceWithTaxes = DISPLAY_CART_PRICES_INCLUDING_TAX - ? parseInt( option.price, 10 ) + parseInt( option.taxes, 10 ) - : parseInt( option.price, 10 ); - return { - label: decodeEntities( option.name ), - value: option.rate_id, - description: decodeEntities( option.description ), - secondaryLabel: ( - - ), - secondaryDescription: decodeEntities( option.delivery_time ), - }; -}; - /** * Main Checkout Component. * @@ -117,49 +67,13 @@ const Checkout = ( { attributes, scrollToTop } ) => { hasOrder, hasError: checkoutHasError, isIdle: checkoutIsIdle, - isProcessing: checkoutIsProcessing, customerId, - onSubmit, - orderNotes, - dispatchActions, } = useCheckoutContext(); - const { setOrderNotes } = dispatchActions; const { hasValidationErrors, showAllValidationErrors, } = useValidationContext(); - const { - shippingRates, - shippingRatesLoading, - needsShipping, - } = useShippingDataContext(); - const { paymentMethods } = usePaymentMethods(); const { hasNoticesOfType } = useStoreNotices(); - const { - defaultAddressFields, - shippingFields, - setShippingFields, - billingFields, - setBillingFields, - setEmail, - setPhone, - shippingAsBilling, - setShippingAsBilling, - showBillingFields, - } = useCheckoutAddress(); - const addressFieldsConfig = useMemo( () => { - return { - company: { - ...defaultAddressFields.company, - hidden: ! attributes.showCompanyField, - required: attributes.requireCompanyField, - }, - address_2: { - ...defaultAddressFields.address_2, - hidden: ! attributes.showApartmentField, - }, - }; - }, [ defaultAddressFields, attributes ] ); const hasErrorsToDisplay = checkoutIsIdle && @@ -177,10 +91,6 @@ const Checkout = ( { attributes, scrollToTop } ) => { return ; } - const loginToCheckoutUrl = `/wp-login.php?redirect_to=${ encodeURIComponent( - window.location.href - ) }`; - if ( ! isEditor && ! customerId && ! CHECKOUT_ALLOWS_GUEST ) { return ( <> @@ -188,7 +98,7 @@ const Checkout = ( { attributes, scrollToTop } ) => { 'You must be logged in to checkout. ', 'woo-gutenberg-products-block' ) } - + { __( 'Click here to log in.', 'woo-gutenberg-products-block' @@ -198,20 +108,6 @@ const Checkout = ( { attributes, scrollToTop } ) => { ); } - const loginPrompt = () => - CHECKOUT_SHOW_LOGIN_REMINDER && - ! customerId && ( - <> - { __( - 'Already have an account? ', - 'woo-gutenberg-products-block' - ) } - - { __( 'Log in.', 'woo-gutenberg-products-block' ) } - - - ); - const checkoutClassName = classnames( 'wc-block-checkout', { 'has-dark-controls': attributes.hasDarkControls, } ); @@ -220,204 +116,14 @@ const Checkout = ( { attributes, scrollToTop } ) => {
{ cartNeedsPayment && } - - - - - { needsShipping && ( - - - { attributes.showPhoneField && ( - - ) } - - setShippingAsBilling( isChecked ) - } - /> - - ) } - { showBillingFields && ( - - - - ) } - { needsShipping && ( - - 1 - ? __( - 'Select shipping options below.', - 'woo-gutenberg-products-block' - ) - : '' - } - > - { isEditor && - ! getShippingRatesPackageCount( - shippingRates - ) ? ( - - ) : ( - - ) } - - ) } - { cartNeedsPayment && ( - 1 - ? __( - 'Select a payment method below.', - 'woo-gutenberg-products-block' - ) - : '' - } - > - - - - - ) } - { attributes.showOrderNotes && ( - - - - ) } - +
{ attributes.showReturnToCart && ( { + const priceWithTaxes = DISPLAY_CART_PRICES_INCLUDING_TAX + ? parseInt( option.price, 10 ) + parseInt( option.taxes, 10 ) + : parseInt( option.price, 10 ); + return { + label: decodeEntities( option.name ), + value: option.rate_id, + description: decodeEntities( option.description ), + secondaryLabel: ( + + ), + secondaryDescription: decodeEntities( option.delivery_time ), + }; +}; + +const CheckoutForm = ( { + requireCompanyField, + requirePhoneField, + showApartmentField, + showCompanyField, + showOrderNotes, + showPhoneField, +} ) => { + const { isEditor } = useEditorContext(); + const { cartNeedsPayment } = useStoreCart(); + const { + isProcessing: checkoutIsProcessing, + onSubmit, + orderNotes, + dispatchActions, + } = useCheckoutContext(); + const { setOrderNotes } = dispatchActions; + const { + shippingRates, + shippingRatesLoading, + needsShipping, + } = useShippingDataContext(); + const { paymentMethods } = usePaymentMethods(); + const { + defaultAddressFields, + shippingFields, + setShippingFields, + billingFields, + setBillingFields, + setEmail, + setPhone, + shippingAsBilling, + setShippingAsBilling, + showBillingFields, + } = useCheckoutAddress(); + const addressFieldsConfig = useMemo( () => { + return { + company: { + ...defaultAddressFields.company, + hidden: ! showCompanyField, + required: requireCompanyField, + }, + address_2: { + ...defaultAddressFields.address_2, + hidden: ! showApartmentField, + }, + }; + }, [ + defaultAddressFields, + showCompanyField, + requireCompanyField, + showApartmentField, + ] ); + + return ( + + } + > + + + { needsShipping && ( + + + { showPhoneField && ( + + ) } + + setShippingAsBilling( isChecked ) + } + /> + + ) } + { showBillingFields && ( + + + + ) } + { needsShipping && ( + 1 + ? __( + 'Select shipping options below.', + 'woo-gutenberg-products-block' + ) + : '' + } + > + { isEditor && + ! getShippingRatesPackageCount( shippingRates ) ? ( + + ) : ( + + ) } + + ) } + { cartNeedsPayment && ( + 1 + ? __( + 'Select a payment method below.', + 'woo-gutenberg-products-block' + ) + : '' + } + > + + + + + ) } + { showOrderNotes && ( + + + + ) } + + ); +}; + +CheckoutForm.propTypes = { + requireCompanyField: PropTypes.bool.isRequired, + requirePhoneField: PropTypes.bool.isRequired, + showApartmentField: PropTypes.bool.isRequired, + showCompanyField: PropTypes.bool.isRequired, + showOrderNotes: PropTypes.bool.isRequired, + showPhoneField: PropTypes.bool.isRequired, +}; + +export default CheckoutForm; diff --git a/assets/js/blocks/cart-checkout/checkout/form/login-prompt.js b/assets/js/blocks/cart-checkout/checkout/form/login-prompt.js new file mode 100644 index 00000000000..049bc4d0a57 --- /dev/null +++ b/assets/js/blocks/cart-checkout/checkout/form/login-prompt.js @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { CHECKOUT_SHOW_LOGIN_REMINDER } from '@woocommerce/block-settings'; +import { useCheckoutContext } from '@woocommerce/base-context'; + +/** + * Internal dependencies + */ +import { LOGIN_TO_CHECKOUT_URL } from '../utils'; + +const LoginPrompt = () => { + const { customerId } = useCheckoutContext(); + + if ( ! CHECKOUT_SHOW_LOGIN_REMINDER || customerId ) { + return null; + } + + return ( + <> + { __( + 'Already have an account? ', + 'woo-gutenberg-products-block' + ) } + + { __( 'Log in.', 'woo-gutenberg-products-block' ) } + + + ); +}; + +export default LoginPrompt; diff --git a/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/index.js b/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js similarity index 100% rename from assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/index.js rename to assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js diff --git a/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss b/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss similarity index 100% rename from assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss rename to assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss diff --git a/assets/js/blocks/cart-checkout/checkout/checkout-order-notes/index.js b/assets/js/blocks/cart-checkout/checkout/form/order-notes/index.js similarity index 100% rename from assets/js/blocks/cart-checkout/checkout/checkout-order-notes/index.js rename to assets/js/blocks/cart-checkout/checkout/form/order-notes/index.js diff --git a/assets/js/blocks/cart-checkout/checkout/checkout-order-notes/style.scss b/assets/js/blocks/cart-checkout/checkout/form/order-notes/style.scss similarity index 100% rename from assets/js/blocks/cart-checkout/checkout/checkout-order-notes/style.scss rename to assets/js/blocks/cart-checkout/checkout/form/order-notes/style.scss diff --git a/assets/js/blocks/cart-checkout/checkout/form/style.scss b/assets/js/blocks/cart-checkout/checkout/form/style.scss new file mode 100644 index 00000000000..cf49ab4288a --- /dev/null +++ b/assets/js/blocks/cart-checkout/checkout/form/style.scss @@ -0,0 +1,66 @@ +.wc-block-checkout__form { + margin: 0; + max-width: 100%; +} + +.wc-block-checkout__use-address-for-billing { + margin-top: em($gap-large); +} + +.wc-block-checkout__shipping-option { + .wc-block-components-shipping-rates-control__package:not(:first-of-type) { + margin-top: $gap-larger; + } +} + +.is-small, +.is-medium, +.is-large { + .wc-block-checkout__billing-fields, + .wc-block-checkout__shipping-fields { + .wc-block-components-address-form { + margin-left: #{-$gap-small / 2}; + margin-right: #{-$gap-small / 2}; + + &::after { + content: ""; + clear: both; + display: block; + } + + .wc-block-components-text-input, + .wc-block-components-country-input, + .wc-block-components-state-input { + float: left; + margin-left: #{$gap-small / 2}; + margin-right: #{$gap-small / 2}; + position: relative; + width: calc(50% - #{$gap-small}); + + &:nth-of-type(2), + &:first-of-type { + margin-top: 0; + } + } + + .wc-block-components-address-form__company, + .wc-block-components-address-form__address_1, + .wc-block-components-address-form__address_2 { + width: calc(100% - #{$gap-small}); + } + + .wc-block-components-checkbox { + clear: both; + } + + } + } +} + +.is-large { + .wc-block-checkout__shipping-option { + .wc-block-components-radio-control__input { + margin-left: -8px; + } + } +} diff --git a/assets/js/blocks/cart-checkout/checkout/style.scss b/assets/js/blocks/cart-checkout/checkout/style.scss index be9eab4e91b..a188ea76613 100644 --- a/assets/js/blocks/cart-checkout/checkout/style.scss +++ b/assets/js/blocks/cart-checkout/checkout/style.scss @@ -2,16 +2,6 @@ top: -96px; } -.wc-block-checkout__use-address-for-billing { - margin-top: em($gap-large); -} - -.wc-block-checkout__shipping-option { - .wc-block-components-shipping-rates-control__package:not(:first-of-type) { - margin-top: $gap-larger; - } -} - .wc-block-checkout__sidebar { .wc-block-components-product-name { color: inherit; @@ -62,7 +52,7 @@ @include force-content(); width: 150px; } - .wc-block-components-checkout-form { + .wc-block-checkout__form { .wc-block-components-checkout-step__title { @include placeholder(); @include force-content(); @@ -156,58 +146,8 @@ } } -.is-small, -.is-medium, -.is-large { - .wc-block-checkout__billing-fields, - .wc-block-checkout__shipping-fields { - .wc-block-components-address-form { - margin-left: #{-$gap-small / 2}; - margin-right: #{-$gap-small / 2}; - - &::after { - content: ""; - clear: both; - display: block; - } - - .wc-block-components-text-input, - .wc-block-components-country-input, - .wc-block-components-state-input { - float: left; - margin-left: #{$gap-small / 2}; - margin-right: #{$gap-small / 2}; - position: relative; - width: calc(50% - #{$gap-small}); - - &:nth-of-type(2), - &:first-of-type { - margin-top: 0; - } - } - - .wc-block-components-address-form__company, - .wc-block-components-address-form__address_1, - .wc-block-components-address-form__address_2 { - width: calc(100% - #{$gap-small}); - } - - .wc-block-components-checkbox { - clear: both; - } - - } - } -} - .is-large { .wc-block-checkout__actions { padding-right: 36px; } - - .wc-block-checkout__shipping-option { - .wc-block-components-radio-control__input { - margin-left: -8px; - } - } } diff --git a/assets/js/blocks/cart-checkout/checkout/utils.js b/assets/js/blocks/cart-checkout/checkout/utils.js new file mode 100644 index 00000000000..622d6e1a1d5 --- /dev/null +++ b/assets/js/blocks/cart-checkout/checkout/utils.js @@ -0,0 +1,3 @@ +export const LOGIN_TO_CHECKOUT_URL = `/wp-login.php?redirect_to=${ encodeURIComponent( + window.location.href +) }`; diff --git a/docs/theming/README.md b/docs/theming/README.md index f53dcb3bff0..40e27488e5a 100644 --- a/docs/theming/README.md +++ b/docs/theming/README.md @@ -72,3 +72,4 @@ WooCommerce Blocks avoids using legacy unprefixed classes as much as possible. H - [Product grid blocks style update in 2.7.0](./product-grid-270.md) - [Class names update in 2.8.0](./class-names-update-280.md) - [Class names update in 3.3.0](./class-names-update-330.md) +- [Class names update in 3.4.0](./class-names-update-340.md) diff --git a/docs/theming/class-names-update-330.md b/docs/theming/class-names-update-330.md index b28f23f004d..54dd4bb1e31 100644 --- a/docs/theming/class-names-update-330.md +++ b/docs/theming/class-names-update-330.md @@ -1,4 +1,4 @@ -# Class names update in 2.8.0 +# Class names update in 3.3.0 WC Blocks 3.3.0, introduced express payment methods in the Cart block. In order to make it easy to write styles for express payment methods for the Cart and Checkout blocks separately, we updated several class names: diff --git a/docs/theming/class-names-update-340.md b/docs/theming/class-names-update-340.md new file mode 100644 index 00000000000..0962ed18562 --- /dev/null +++ b/docs/theming/class-names-update-340.md @@ -0,0 +1,14 @@ +# Class names update in 3.4.0 + +## Replaced classes + + + + + + + + + + +
RemovedNew class
wc-block-components-checkout-formwc-block-checkout__form
diff --git a/src/BlockTypes/Checkout.php b/src/BlockTypes/Checkout.php index b08b3be7ba3..b4dc616c2f5 100644 --- a/src/BlockTypes/Checkout.php +++ b/src/BlockTypes/Checkout.php @@ -208,7 +208,7 @@ protected function get_skeleton() {
-
+