woocommerce/plugins/woocommerce-blocks/assets/js/product-on-sale.js

198 lines
4.7 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
import apiFetch from '@wordpress/api-fetch';
import {
BlockAlignmentToolbar,
BlockControls,
InspectorControls,
} from '@wordpress/editor';
import { Component, Fragment } from '@wordpress/element';
import Gridicon from 'gridicons';
import {
PanelBody,
Placeholder,
RangeControl,
Spinner,
} from '@wordpress/components';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import getQuery from './utils/get-query';
import ProductCategoryControl from './components/product-category-control';
import ProductOrderbyControl from './components/product-orderby-control';
import ProductPreview from './components/product-preview';
/**
* Component to handle edit mode of "On Sale Products".
*/
class ProductOnSaleBlock extends Component {
constructor() {
super( ...arguments );
this.state = {
products: [],
loaded: false,
};
}
componentDidMount() {
this.getProducts();
}
componentDidUpdate( prevProps ) {
const hasChange = [
'categories',
'catOperator',
'columns',
'orderby',
'rows',
].reduce( ( acc, key ) => {
return acc || prevProps.attributes[ key ] !== this.props.attributes[ key ];
}, false );
if ( hasChange ) {
this.getProducts();
}
}
getProducts() {
apiFetch( {
path: addQueryArgs(
'/wc-pb/v3/products',
getQuery( this.props.attributes, this.props.name )
),
} )
.then( ( products ) => {
this.setState( { products, loaded: true } );
} )
.catch( () => {
this.setState( { products: [], loaded: true } );
} );
}
getInspectorControls() {
const { attributes, setAttributes } = this.props;
const { categories, catOperator, columns, rows, orderby } = attributes;
return (
<InspectorControls key="inspector">
<PanelBody
title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
initialOpen
>
<RangeControl
label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
value={ columns }
onChange={ ( value ) => setAttributes( { columns: value } ) }
min={ wc_product_block_data.min_columns }
max={ wc_product_block_data.max_columns }
/>
<RangeControl
label={ __( 'Rows', 'woo-gutenberg-products-block' ) }
value={ rows }
onChange={ ( value ) => setAttributes( { rows: value } ) }
min={ wc_product_block_data.min_rows }
max={ wc_product_block_data.max_rows }
/>
</PanelBody>
<PanelBody
title={ __( 'Order By', 'woo-gutenberg-products-block' ) }
initialOpen={ false }
>
<ProductOrderbyControl
setAttributes={ setAttributes }
value={ orderby }
/>
</PanelBody>
<PanelBody
title={ __(
'Filter by Product Category',
'woo-gutenberg-products-block'
) }
initialOpen={ false }
>
<ProductCategoryControl
selected={ categories }
onChange={ ( value = [] ) => {
const ids = value.map( ( { id } ) => id );
setAttributes( { categories: ids } );
} }
operator={ catOperator }
onOperatorChange={ ( value = 'any' ) =>
setAttributes( { catOperator: value } )
}
/>
</PanelBody>
</InspectorControls>
);
}
render() {
const { setAttributes } = this.props;
const { columns, align } = this.props.attributes;
const { loaded, products } = this.state;
const classes = [ 'wc-block-products-grid', 'wc-block-on-sale-products' ];
if ( columns ) {
classes.push( `cols-${ columns }` );
}
if ( products && ! products.length ) {
if ( ! loaded ) {
classes.push( 'is-loading' );
} else {
classes.push( 'is-not-found' );
}
}
return (
<Fragment>
<BlockControls>
<BlockAlignmentToolbar
controls={ [ 'wide', 'full' ] }
value={ align }
onChange={ ( nextAlign ) => setAttributes( { align: nextAlign } ) }
/>
</BlockControls>
{ this.getInspectorControls() }
<div className={ classes.join( ' ' ) }>
{ products.length ? (
products.map( ( product ) => (
<ProductPreview product={ product } key={ product.id } />
) )
) : (
<Placeholder
icon={ <Gridicon icon="tag" /> }
label={ __( 'On Sale Products', 'woo-gutenberg-products-block' ) }
>
{ ! loaded ? (
<Spinner />
) : (
__( 'No products found.', 'woo-gutenberg-products-block' )
) }
</Placeholder>
) }
</div>
</Fragment>
);
}
}
ProductOnSaleBlock.propTypes = {
/**
* The attributes for this block
*/
attributes: PropTypes.object.isRequired,
/**
* The register block name.
*/
name: PropTypes.string.isRequired,
/**
* A callback to update attributes
*/
setAttributes: PropTypes.func.isRequired,
};
export default ProductOnSaleBlock;