woocommerce/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-b.../frontend.tsx

64 lines
1.5 KiB
TypeScript

/**
* External dependencies
*/
import classnames from 'classnames';
import { withFilteredAttributes } from '@woocommerce/shared-hocs';
import { FormStep } from '@woocommerce/blocks-components';
import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
import { useSelect } from '@wordpress/data';
import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
import { useCheckoutBlockContext } from '@woocommerce/blocks/checkout/context';
/**
* Internal dependencies
*/
import Block from './block';
import attributes from './attributes';
const FrontendBlock = ( {
title,
description,
children,
className,
}: {
title: string;
description: string;
showCompanyField: boolean;
requireCompanyField: boolean;
showApartmentField: boolean;
requireApartmentField: boolean;
showPhoneField: boolean;
requirePhoneField: boolean;
children: JSX.Element;
className?: string;
} ) => {
const { showFormStepNumbers } = useCheckoutBlockContext();
const checkoutIsProcessing = useSelect( ( select ) =>
select( CHECKOUT_STORE_KEY ).isProcessing()
);
const { showShippingMethods } = useCheckoutAddress();
if ( ! showShippingMethods ) {
return null;
}
return (
<FormStep
id="shipping-option"
disabled={ checkoutIsProcessing }
className={ classnames(
'wc-block-checkout__shipping-option',
className
) }
title={ title }
description={ description }
showStepNumber={ showFormStepNumbers }
>
<Block />
{ children }
</FormStep>
);
};
export default withFilteredAttributes( attributes )( FrontendBlock );