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

145 lines
3.7 KiB
TypeScript

/**
* External dependencies
*/
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, ExternalLink } from '@wordpress/components';
import { ADMIN_URL, getSetting } from '@woocommerce/settings';
import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
import Noninteractive from '@woocommerce/base-components/noninteractive';
/**
* Internal dependencies
*/
import {
FormStepBlock,
AdditionalFields,
AdditionalFieldsContent,
} from '../../form-step';
import Block from './block';
import './editor.scss';
type shippingAdminLink = {
id: number;
title: string;
description: string;
};
export const Edit = ( {
attributes,
setAttributes,
}: {
attributes: {
title: string;
description: string;
showStepNumber: boolean;
className: string;
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element | null => {
const globalShippingMethods = getSetting(
'globalShippingMethods'
) as shippingAdminLink[];
const activeShippingZones = getSetting(
'activeShippingZones'
) as shippingAdminLink[];
const { showShippingMethods } = useCheckoutAddress();
if ( ! showShippingMethods ) {
return null;
}
return (
<FormStepBlock
attributes={ attributes }
setAttributes={ setAttributes }
className={ classnames(
'wc-block-checkout__shipping-option',
attributes?.className
) }
>
<InspectorControls>
{ globalShippingMethods.length > 0 && (
<PanelBody
title={ __(
'Methods',
'woo-gutenberg-products-block'
) }
>
<p className="wc-block-checkout__controls-text">
{ __(
'The following shipping integrations are active on your store.',
'woo-gutenberg-products-block'
) }
</p>
{ globalShippingMethods.map( ( method ) => {
return (
<ExternalLinkCard
key={ method.id }
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping&section=${ method.id }` }
title={ method.title }
description={ method.description }
/>
);
} ) }
<ExternalLink
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping` }
>
{ __(
'Manage shipping methods',
'woo-gutenberg-products-block'
) }
</ExternalLink>
</PanelBody>
) }
{ activeShippingZones.length && (
<PanelBody
title={ __( 'Zones', 'woo-gutenberg-products-block' ) }
>
<p className="wc-block-checkout__controls-text">
{ __(
'You currently have the following shipping zones active.',
'woo-gutenberg-products-block'
) }
</p>
{ activeShippingZones.map( ( zone ) => {
return (
<ExternalLinkCard
key={ zone.id }
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping&zone_id=${ zone.id }` }
title={ zone.title }
description={ zone.description }
/>
);
} ) }
<ExternalLink
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping` }
>
{ __(
'Manage shipping zones',
'woo-gutenberg-products-block'
) }
</ExternalLink>
</PanelBody>
) }
</InspectorControls>
<Noninteractive>
<Block />
</Noninteractive>
<AdditionalFields block={ innerBlockAreas.SHIPPING_METHODS } />
</FormStepBlock>
);
};
export const Save = (): JSX.Element => {
return (
<div { ...useBlockProps.save() }>
<AdditionalFieldsContent />
</div>
);
};