Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Split Checkout block component into smaller files (https://github.com/woocommerce/woocommerce-blocks/pull/3062) 

* Rename CheckoutForm to Form

* Create CheckoutForm component

* Simplify directory structure

* Add docs about class name changes

* Add PropTypes to CheckoutForm

* Update skeleton class name

* Extract LoginPrompt

* Move loginToCheckoutUrl to a constant

* Move replaced class name docs to 3.4.0 specific file
This commit is contained in:
Albert Juhé Lluveras 2020-08-31 12:17:42 +02:00 committed by GitHub
parent 93e493bef9
commit 80400e50da
18 changed files with 459 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
View File

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

4
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/style.scss
View File

@ -1,4 +0,0 @@
.wc-block-components-checkout-form {
margin: 0;
max-width: 100%;
}

1
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js
View File

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

11
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/index.js → plugins/woocommerce-blocks/assets/js/base/components/form/index.js
View File

@ -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 (
<form
className={ classnames(
'wc-block-components-checkout-form',
className
) }
className={ classnames( 'wc-block-components-form', className ) }
onSubmit={ formOnSubmit }
>
{ children }

322
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
View File

@ -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: (
<FormattedMonetaryAmount
currency={ getCurrencyFromPriceResponse( option ) }
value={ priceWithTaxes }
/>
),
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 <CheckoutOrderError />;
}
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'
) }
<a href={ loginToCheckoutUrl }>
<a href={ LOGIN_TO_CHECKOUT_URL }>
{ __(
'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'
) }
<a href={ loginToCheckoutUrl }>
{ __( 'Log in.', 'woo-gutenberg-products-block' ) }
</a>
</>
);
const checkoutClassName = classnames( 'wc-block-checkout', {
'has-dark-controls': attributes.hasDarkControls,
} );
@ -220,204 +116,14 @@ const Checkout = ( { attributes, scrollToTop } ) => {
<SidebarLayout className={ checkoutClassName }>
<Main className="wc-block-checkout__main">
{ cartNeedsPayment && <CheckoutExpressPayment /> }
<CheckoutForm onSubmit={ onSubmit }>
<FormStep
id="contact-fields"
disabled={ checkoutIsProcessing }
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={ loginPrompt }
>
<ValidatedTextInput
id="email"
type="email"
label={ __(
'Email address',
'woo-gutenberg-products-block'
) }
value={ billingFields.email }
autoComplete="email"
onChange={ setEmail }
required={ true }
<CheckoutForm
showApartmentField={ attributes.showApartmentField }
showCompanyField={ attributes.showCompanyField }
showOrderNotes={ attributes.showOrderNotes }
showPhoneField={ attributes.showPhoneField }
requireCompanyField={ attributes.requireCompanyField }
requirePhoneField={ attributes.requirePhoneField }
/>
</FormStep>
{ needsShipping && (
<FormStep
id="shipping-fields"
disabled={ checkoutIsProcessing }
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
id="shipping"
onChange={ setShippingFields }
values={ shippingFields }
fields={ Object.keys(
defaultAddressFields
) }
fieldConfig={ addressFieldsConfig }
/>
{ attributes.showPhoneField && (
<ValidatedTextInput
id="phone"
type="tel"
label={
attributes.requirePhoneField
? __(
'Phone',
'woo-gutenberg-products-block'
)
: __(
'Phone (optional)',
'woo-gutenberg-products-block'
)
}
value={ billingFields.phone }
autoComplete="tel"
onChange={ setPhone }
required={
attributes.requirePhoneField
}
/>
) }
<CheckboxControl
className="wc-block-checkout__use-address-for-billing"
label={ __(
'Use same address for billing',
'woo-gutenberg-products-block'
) }
checked={ shippingAsBilling }
onChange={ ( isChecked ) =>
setShippingAsBilling( isChecked )
}
/>
</FormStep>
) }
{ showBillingFields && (
<FormStep
id="billing-fields"
disabled={ checkoutIsProcessing }
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
id="billing"
onChange={ setBillingFields }
type="billing"
values={ billingFields }
fields={ Object.keys(
defaultAddressFields
) }
fieldConfig={ addressFieldsConfig }
/>
</FormStep>
) }
{ needsShipping && (
<FormStep
id="shipping-option"
disabled={ checkoutIsProcessing }
className="wc-block-checkout__shipping-option"
title={ __(
'Shipping options',
'woo-gutenberg-products-block'
) }
description={
getShippingRatesRateCount( shippingRates ) >
1
? __(
'Select shipping options below.',
'woo-gutenberg-products-block'
)
: ''
}
>
{ isEditor &&
! getShippingRatesPackageCount(
shippingRates
) ? (
<NoShippingPlaceholder />
) : (
<ShippingRatesControl
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
}
/>
) }
</FormStep>
) }
{ cartNeedsPayment && (
<FormStep
id="payment-method"
disabled={ checkoutIsProcessing }
className="wc-block-checkout__payment-method"
title={ __(
'Payment method',
'woo-gutenberg-products-block'
) }
description={
Object.keys( paymentMethods ).length > 1
? __(
'Select a payment method below.',
'woo-gutenberg-products-block'
)
: ''
}
>
<StoreNoticesProvider context="wc/payment-area">
<PaymentMethods />
</StoreNoticesProvider>
</FormStep>
) }
{ attributes.showOrderNotes && (
<FormStep id="order-notes" showStepNumber={ false }>
<CheckoutOrderNotes
disabled={ checkoutIsProcessing }
onChange={ setOrderNotes }
placeholder={
needsShipping
? __(
'Notes about your order, e.g. special notes for delivery.',
'woo-gutenberg-products-block'
)
: __(
'Notes about your order.',
'woo-gutenberg-products-block'
)
}
value={ orderNotes }
/>
</FormStep>
) }
</CheckoutForm>
<div className="wc-block-checkout__actions">
{ attributes.showReturnToCart && (
<ReturnToCartButton

319
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/index.js Normal file
View File

@ -0,0 +1,319 @@
/**
* External dependencies
*/
import { useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
AddressForm,
FormStep,
ShippingRatesControl,
} from '@woocommerce/base-components/cart-checkout';
import Form from '@woocommerce/base-components/form';
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 {
useCheckoutContext,
useEditorContext,
useShippingDataContext,
StoreNoticesProvider,
} from '@woocommerce/base-context';
import {
usePaymentMethods,
useCheckoutAddress,
useStoreCart,
} from '@woocommerce/base-hooks';
import { PaymentMethods } from '@woocommerce/base-components/payment-methods';
import { decodeEntities } from '@wordpress/html-entities';
import { DISPLAY_CART_PRICES_INCLUDING_TAX } from '@woocommerce/block-settings';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import CheckoutOrderNotes from './order-notes';
import LoginPrompt from './login-prompt';
import NoShippingPlaceholder from './no-shipping-placeholder';
import './style.scss';
/**
* 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: (
<FormattedMonetaryAmount
currency={ getCurrencyFromPriceResponse( option ) }
value={ priceWithTaxes }
/>
),
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 (
<Form className="wc-block-checkout__form" onSubmit={ onSubmit }>
<FormStep
id="contact-fields"
disabled={ checkoutIsProcessing }
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={ () => <LoginPrompt /> }
>
<ValidatedTextInput
id="email"
type="email"
label={ __(
'Email address',
'woo-gutenberg-products-block'
) }
value={ billingFields.email }
autoComplete="email"
onChange={ setEmail }
required={ true }
/>
</FormStep>
{ needsShipping && (
<FormStep
id="shipping-fields"
disabled={ checkoutIsProcessing }
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
id="shipping"
onChange={ setShippingFields }
values={ shippingFields }
fields={ Object.keys( defaultAddressFields ) }
fieldConfig={ addressFieldsConfig }
/>
{ showPhoneField && (
<ValidatedTextInput
id="phone"
type="tel"
label={
requirePhoneField
? __(
'Phone',
'woo-gutenberg-products-block'
)
: __(
'Phone (optional)',
'woo-gutenberg-products-block'
)
}
value={ billingFields.phone }
autoComplete="tel"
onChange={ setPhone }
required={ requirePhoneField }
/>
) }
<CheckboxControl
className="wc-block-checkout__use-address-for-billing"
label={ __(
'Use same address for billing',
'woo-gutenberg-products-block'
) }
checked={ shippingAsBilling }
onChange={ ( isChecked ) =>
setShippingAsBilling( isChecked )
}
/>
</FormStep>
) }
{ showBillingFields && (
<FormStep
id="billing-fields"
disabled={ checkoutIsProcessing }
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
id="billing"
onChange={ setBillingFields }
type="billing"
values={ billingFields }
fields={ Object.keys( defaultAddressFields ) }
fieldConfig={ addressFieldsConfig }
/>
</FormStep>
) }
{ needsShipping && (
<FormStep
id="shipping-option"
disabled={ checkoutIsProcessing }
className="wc-block-checkout__shipping-option"
title={ __(
'Shipping options',
'woo-gutenberg-products-block'
) }
description={
getShippingRatesRateCount( shippingRates ) > 1
? __(
'Select shipping options below.',
'woo-gutenberg-products-block'
)
: ''
}
>
{ isEditor &&
! getShippingRatesPackageCount( shippingRates ) ? (
<NoShippingPlaceholder />
) : (
<ShippingRatesControl
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 }
/>
) }
</FormStep>
) }
{ cartNeedsPayment && (
<FormStep
id="payment-method"
disabled={ checkoutIsProcessing }
className="wc-block-checkout__payment-method"
title={ __(
'Payment method',
'woo-gutenberg-products-block'
) }
description={
Object.keys( paymentMethods ).length > 1
? __(
'Select a payment method below.',
'woo-gutenberg-products-block'
)
: ''
}
>
<StoreNoticesProvider context="wc/payment-area">
<PaymentMethods />
</StoreNoticesProvider>
</FormStep>
) }
{ showOrderNotes && (
<FormStep id="order-notes" showStepNumber={ false }>
<CheckoutOrderNotes
disabled={ checkoutIsProcessing }
onChange={ setOrderNotes }
placeholder={
needsShipping
? __(
'Notes about your order, e.g. special notes for delivery.',
'woo-gutenberg-products-block'
)
: __(
'Notes about your order.',
'woo-gutenberg-products-block'
)
}
value={ orderNotes }
/>
</FormStep>
) }
</Form>
);
};
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;

33
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/login-prompt.js Normal file
View File

@ -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'
) }
<a href={ LOGIN_TO_CHECKOUT_URL }>
{ __( 'Log in.', 'woo-gutenberg-products-block' ) }
</a>
</>
);
};
export default LoginPrompt;

0
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/index.js → plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js
View File

0
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss → plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss
View File

0
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/checkout-order-notes/index.js → plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/order-notes/index.js
View File

0
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/checkout-order-notes/style.scss → plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/order-notes/style.scss
View File

66
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/style.scss Normal file
View File

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

62
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
View File

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

3
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/utils.js Normal file
View File

@ -0,0 +1,3 @@
export const LOGIN_TO_CHECKOUT_URL = `/wp-login.php?redirect_to=${ encodeURIComponent(
window.location.href
) }`;

1
plugins/woocommerce-blocks/docs/theming/README.md
View File

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

2
plugins/woocommerce-blocks/docs/theming/class-names-update-330.md
View File

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

14
plugins/woocommerce-blocks/docs/theming/class-names-update-340.md Normal file
View File

@ -0,0 +1,14 @@
# Class names update in 3.4.0
## Replaced classes
<table>
<tr>
<th>Removed</th>
<th>New class</th>
</tr>
<tr>
<td><code>wc-block-components-checkout-form</code></td>
<td><code>wc-block-checkout__form</code></td>
</tr>
</table>

2
plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
View File

@ -208,7 +208,7 @@ class Checkout extends AbstractBlock {
<div class="wc-block-components-main wc-block-checkout__main">
<div class="wc-block-components-express-payment wc-block-components-express-payment--checkout"></div>
<div class="wc-block-components-express-payment-continue-rule wc-block-components-express-payment-continue-rule--checkout"><span></span></div>
<form class="wc-block-components-checkout-form">
<form class="wc-block-checkout__form">
<fieldset class="wc-block-checkout__contact-fields wc-block-components-checkout-step">
<div class="wc-block-components-checkout-step__heading">
<div class="wc-block-components-checkout-step__title"></div>