woocommerce/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/edit.tsx

67 lines
1.4 KiB
TypeScript
Raw Normal View History

/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import classnames from 'classnames';
import { useBlockProps } from '@wordpress/block-editor';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import { useSelect } from '@wordpress/data';
import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
/**
* Internal dependencies
*/
import {
FormStepBlock,
AdditionalFields,
AdditionalFieldsContent,
} from '../../form-step';
import Block from './block';
export const Edit = ( {
attributes,
setAttributes,
}: {
attributes: {
title: string;
description: string;
showStepNumber: boolean;
className: string;
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element | null => {
const { prefersCollection } = useSelect( ( select ) => {
const checkoutStore = select( CHECKOUT_STORE_KEY );
return {
prefersCollection: checkoutStore.prefersCollection(),
};
} );
const { className } = attributes;
if ( ! prefersCollection ) {
return null;
}
return (
<FormStepBlock
attributes={ attributes }
setAttributes={ setAttributes }
className={ classnames(
'wc-block-checkout__shipping-method',
className
) }
>
<Block />
<AdditionalFields block={ innerBlockAreas.PICKUP_LOCATION } />
</FormStepBlock>
);
};
export const Save = (): JSX.Element => {
return (
<div { ...useBlockProps.save() }>
<AdditionalFieldsContent />
</div>
);
};