67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Disabled, Placeholder } from '@wordpress/components';
|
|
import ServerSideRender from '@wordpress/server-side-render';
|
|
import { gridBlockPreview } from '@woocommerce/resource-previews';
|
|
import { Icon, percent } from '@wordpress/icons';
|
|
import { useBlockProps } from '@wordpress/block-editor';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { Attributes } from './types';
|
|
import { ProductOnSaleInspectorControls } from './inspector-controls';
|
|
|
|
interface Props {
|
|
attributes: Attributes;
|
|
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
|
name: string;
|
|
}
|
|
|
|
const EmptyPlaceholder = () => (
|
|
<Placeholder
|
|
icon={ <Icon icon={ percent } /> }
|
|
label={ __( 'On Sale Products', 'woocommerce' ) }
|
|
className="wc-block-product-on-sale"
|
|
>
|
|
{ __(
|
|
'This block shows on-sale products. There are currently no discounted products in your store.',
|
|
'woocommerce'
|
|
) }
|
|
</Placeholder>
|
|
);
|
|
|
|
/**
|
|
* Component to handle edit mode of "On Sale Products".
|
|
*/
|
|
const ProductOnSaleBlock: React.FunctionComponent< Props > = (
|
|
props: Props
|
|
) => {
|
|
const { attributes, setAttributes, name } = props;
|
|
const blockProps = useBlockProps();
|
|
|
|
if ( attributes.isPreview ) {
|
|
return <div { ...blockProps }>{ gridBlockPreview }</div>;
|
|
}
|
|
|
|
return (
|
|
<div { ...blockProps }>
|
|
<ProductOnSaleInspectorControls
|
|
attributes={ attributes }
|
|
setAttributes={ setAttributes }
|
|
/>
|
|
<Disabled>
|
|
<ServerSideRender
|
|
block={ name }
|
|
attributes={ attributes }
|
|
EmptyResponsePlaceholder={ EmptyPlaceholder }
|
|
/>
|
|
</Disabled>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductOnSaleBlock;
|