woocommerce/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx

98 lines
2.1 KiB
TypeScript

/**
* External dependencies
*/
import classnames from 'classnames';
import { withFilteredAttributes } from '@woocommerce/shared-hocs';
import { FormStep } from '@woocommerce/base-components/cart-checkout';
import { useDispatch, useSelect } from '@wordpress/data';
import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
import { useShippingData } from '@woocommerce/base-context/hooks';
/**
* Internal dependencies
*/
import Block from './block';
import attributes from './attributes';
const FrontendBlock = ( {
title,
description,
showStepNumber,
children,
className,
showPrice,
showIcon,
shippingText,
localPickupText,
}: {
title: string;
description: string;
showStepNumber: boolean;
children: JSX.Element;
className?: string;
showPrice: boolean;
showIcon: boolean;
shippingText: string;
localPickupText: string;
} ) => {
const { checkoutIsProcessing, prefersCollection } = useSelect(
( select ) => {
const checkoutStore = select( CHECKOUT_STORE_KEY );
return {
checkoutIsProcessing: checkoutStore.isProcessing(),
prefersCollection: checkoutStore.prefersCollection(),
};
}
);
const { setPrefersCollection } = useDispatch( CHECKOUT_STORE_KEY );
const {
shippingRates,
needsShipping,
hasCalculatedShipping,
isCollectable,
} = useShippingData();
if (
! needsShipping ||
! hasCalculatedShipping ||
! shippingRates ||
! isCollectable
) {
return null;
}
const onChange = ( method: string ) => {
if ( method === 'pickup' ) {
setPrefersCollection( true );
} else {
setPrefersCollection( false );
}
};
return (
<FormStep
id="shipping-method"
disabled={ checkoutIsProcessing }
className={ classnames(
'wc-block-checkout__shipping-method',
className
) }
title={ title }
description={ description }
showStepNumber={ showStepNumber }
>
<Block
checked={ prefersCollection ? 'pickup' : 'shipping' }
onChange={ onChange }
showPrice={ showPrice }
showIcon={ showIcon }
localPickupText={ localPickupText }
shippingText={ shippingText }
/>
{ children }
</FormStep>
);
};
export default withFilteredAttributes( attributes )( FrontendBlock );