JezK

Edit File: blocks.js

var registerBlockType = wp.blocks.registerBlockType,
		__ = wp.i18n.__,
		el = wp.element.createElement,
		Fragment = wp.element.Fragment,
		withSelect = wp.data.withSelect,

ServerSideRender = wp.serverSideRender,
		SelectControl = wp.components.SelectControl,
		ToggleControl = wp.components.ToggleControl,
		RangeControl = wp.components.RangeControl,
		Disabled = wp.components.Disabled,
		PanelBody = wp.components.PanelBody,
		BaseControl = wp.components.BaseControl,
		ColorPicker = wp.components.ColorPicker,

InspectorControls = wp.blockEditor.InspectorControls;

registerBlockType('ivole/cusrev-trustbadge', {
		title: __( 'Trust Badge', 'customer-reviews-woocommerce'),
		icon: 'star-filled',
		description: __( 'Block showing a trust badge generated by CR plugin.', 'customer-reviews-woocommerce' ),
		category: 'widgets',

edit: withSelect( function( select ) {
			let cusrevSettings = null;
			if( select( 'core/editor' ) ) {
				cusrevSettings = select( 'core/editor' ).getEditorSettings().cusrev;
			} else {
				cusrevSettings = select( 'core/block-editor' ).getSettings().cusrev;
			}
			return {
				settings: cusrevSettings
			};
		} )( function( props ) {
			if ( ! props.settings.reviews_verified ) {
				return el(
					'div',
					{},
					el(
						'em',
						{},
						__( 'You need to enable Trust Badges in Reviews -> Settings -> Trust Badges', 'customer-reviews-woocommerce' )
					)
				);
			}

return el(
				Fragment,
				{},
				[
					el(
						InspectorControls,
						{},
						[
							el(
								PanelBody,
								{
									title: __( 'Trust Badge Settings', 'customer-reviews-woocommerce' )
								},
								[
									el(
										SelectControl,
										{
											label: __( 'Badge Size', 'customer-reviews-woocommerce' ),
											value: props.attributes.badge_size,
											options: [
												{
													label: __( 'Small', 'customer-reviews-woocommerce' ),
													value: 'small'
												},
												{
													label: __( 'Wide', 'customer-reviews-woocommerce' ),
													value: 'wide'
												},
												{
													label: __( 'Compact', 'customer-reviews-woocommerce' ),
													value: 'compact'
												}
											],
											onChange: function( size ) {
												props.setAttributes( {
													badge_size: size
												} );
											}
										}
									),
									el(
										SelectControl,
										{
											label: __( 'Badge Style', 'customer-reviews-woocommerce' ),
											value: props.attributes.badge_style,
											options: [
												{
													label: __( 'Light', 'customer-reviews-woocommerce' ),
													value: 'light'
												},
												{
													label: __( 'Dark', 'customer-reviews-woocommerce' ),
													value: 'dark'
												}
											],
											onChange: function( style ) {
												props.setAttributes( {
													badge_style: style
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Show Store Rating', 'customer-reviews-woocommerce' ),
											checked: props.attributes.store_rating,
											help: props.attributes.store_rating ? __( 'Include store rating', 'customer-reviews-woocommerce' ): __( 'Exclude store rating', 'customer-reviews-woocommerce' ),
											onChange: function() {
												props.setAttributes( {
													store_rating: ! props.attributes.store_rating
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Show Border', 'customer-reviews-woocommerce' ),
											checked: props.attributes.badge_border,
											help: props.attributes.badge_border ? __( 'Display badge border', 'customer-reviews-woocommerce' ): __( 'No badge border', 'customer-reviews-woocommerce' ),
											onChange: function() {
												props.setAttributes( {
													badge_border: ! props.attributes.badge_border
												} );
											}
										}
									),
									el(
										BaseControl,
										{
											id: 'cr_trustbadge_colorpicker',
											className: 'cr-trustbadge-colorpicker',
											label: __( 'Background color', 'customer-reviews-woocommerce' ),
											help: __( 'Set a custom background color for the badge', 'customer-reviews-woocommerce' ),
											children: el(
												ColorPicker,
												{
													id: 'cr_trustbadge_colorpicker',
													color: props.attributes.badge_color,
													disableAlpha: true,
													onChangeComplete: function( color ) {
														props.setAttributes( {
															badge_color: color.hex
														} );
													}
												}
											)
										}
									)
								]
							)
						]
					),
					el(
						Disabled,
						{},
						[
							el(
								ServerSideRender,
								{
									block: 'ivole/cusrev-trustbadge',
									attributes:  props.attributes
								}
							)
						]
					)
				]
			);
		} ),

save: function() {
			return null;
		}
	});

var _n = wp.i18n._n,
		sprintf = wp.i18n.sprintf,
		addQueryArgs = wp.url.addQueryArgs,
		apiFetch = wp.apiFetch,
		withInstanceId = wp.compose.withInstanceId,
		find = lodash.find,
		assign = lodash.assign,
		SearchListControl = wc.components.SearchListControl,
		SearchListItem = wc.components.SearchListItem;

var ProductCategoryControl = createReactClass({
		static: {
			defaultProps: {
				operator: 'any'
			}
		},

getInitialState: function() {
			return {
				list: [],
				loading: true,
			};
		},

componentDidMount: function() {
			fetch(ajaxurl + '?action=ivole_fetch_product_categories')
			.then( function( response ) {
				return response.json();
			})
			.then( (function( list ) {
				this.setState( { list: list, loading: false } );
			}).bind(this) )
			.catch( (function() {
				this.setState( { list: [], loading: false } );
			}).bind(this) );
		},

renderItem: function( args ) {
			var item = args.item,
				search = args.search,
				depth = args.depth;

var classes = [
				'woocommerce-product-categories__item',
			];

if ( search.length ) {
				classes.push( 'is-searching' );
			}

if ( depth === 0 && item.parent !== 0 ) {
				classes.push( 'is-skip-level' );
			}

var accessibleName = ! item.breadcrumbs.length ?
				item.name :
				item.breadcrumbs.join( ', ' ) + ', ' + item.name;

var searchListItemProps = assign( args, {
				className: classes.join( ' ' ),
				showCount: true,
				'aria-label': sprintf(
					_n(
						'%s, has %d product',
						'%s, has %d products',
						item.count,
						'customer-reviews-woocommerce'
					),
					accessibleName,
					item.count
				)
			} );

return el( SearchListItem, searchListItemProps );
		},

render: function() {
			var list = this.state.list,
				loading = this.state.loading,
				onChange = this.props.onChange,
				onOperatorChange = this.props.onOperatorChange,
				operator = this.props.operator,
				selected = this.props.selected;

var messages = {
				clear: __( 'Clear all product categories', 'customer-reviews-woocommerce' ),
				list: __( 'Product Categories', 'customer-reviews-woocommerce' ),
				noItems: __(
					"Your store doesn't have any product categories.",
					'customer-reviews-woocommerce'
				),
				search: __(
					'Search for product categories',
					'customer-reviews-woocommerce'
				),
				selected: function( n ) {
					return sprintf(
						_n(
							'%d category selected',
							'%d categories selected',
							n,
							'customer-reviews-woocommerce'
						),
						n
					)
				},
				updated: __(
					'Category search results updated.',
					'customer-reviews-woocommerce'
				),
			};

var comps = [
				el( SearchListControl, {
					className: "woocommerce-product-categories",
					list: list,
					isLoading: loading,
					selected: selected.map( function( id ) {
						return find( list, { id: id } );
					} ).filter( Boolean ),
					onChange: onChange,
					renderItem: this.renderItem,
					messages: messages,
					isHierarchical: true
				} )
			];

if ( !! onOperatorChange ) {
				comps.push(
					el( 'div', {
							className: selected.length < 2 ? 'screen-reader-text' : ''
				 		},
						[
							el( SelectControl, {
								className: "woocommerce-product-categories__operator",
								label: __( 'Display products matching', 'customer-reviews-woocommerce' ),
								help: __( 'Pick at least two categories to use this setting.', 'customer-reviews-woocommerce' ),
								value: operator,
								onChange: onOperatorChange,
								options: [
									{
										label: __( 'Any selected categories', 'customer-reviews-woocommerce' ),
										value: 'any',
									},
									{
										label: __( 'All selected categories', 'customer-reviews-woocommerce' ),
										value: 'all',
									},
								]
							} )
						]
					)
				);
			}

return el(
				Fragment,
				{},
				comps
			);
		}
	});

var ProductsControl = createReactClass( {
		getInitialState: function() {
			return {
				list: [],
				loading: true,
			};
		},

componentDidMount: function() {
			fetch(ajaxurl + '?action=ivole_fetch_products')
			.then( function( response ) {
				return response.json();
			})
			.then( (function( list ) {
				this.setState( { list: list, loading: false } );
			}).bind(this) )
			.catch( (function() {
				this.setState( { list: [], loading: false } );
			}).bind(this) );
		},

render: function() {
			var list = this.state.list,
				loading = this.state.loading,
				onChange = this.props.onChange,
				selected = this.props.selected;

var messages = {
				clear: __( 'Clear all products', 'woo-gutenberg-products-block' ),
				list: __( 'Products', 'woo-gutenberg-products-block' ),
				noItems: __(
					"Your store doesn't have any products.",
					'woo-gutenberg-products-block'
				),
				search: __(
					'Search for products to display',
					'woo-gutenberg-products-block'
				),
				selected: function( n ) {
					return sprintf(
						_n(
							'%d product selected',
							'%d products selected',
							n,
							'woo-gutenberg-products-block'
						),
						n
					)
				},
				updated: __(
					'Product search results updated.',
					'woo-gutenberg-products-block'
				),
			};

return el( Fragment,
				{},
				[
					el( SearchListControl,
						{
							className: "woocommerce-products",
							list: list,
							isLoading: loading,
							selected: selected.map( function( id ) {
								return find( list, { id: id } );
							} ).filter( Boolean ),
							onChange: onChange,
							messages: messages
						}
					)
				]
			);
		}
	} );

let ProductTagsControl = createReactClass( {
		getInitialState: function() {
			return {
				list: [],
				loading: true,
			};
		},

componentDidMount: function() {
			fetch(ajaxurl + '?action=cr_fetch_product_tags')
				.then( function( response ) {
					return response.json();
				})
				.then( (function( list ) {
					this.setState( { list: list, loading: false } );
				}).bind(this) )
				.catch( (function() {
					this.setState( { list: [], loading: false } );
				}).bind(this) );
		},

render: function() {
			var list = this.state.list,
				loading = this.state.loading,
				onChange = this.props.onChange,
				selected = this.props.selected;

var messages = {
				clear: __( 'Clear all tags', 'customer-reviews-woocommerce' ),
				list: __( 'Tags', 'customer-reviews-woocommerce' ),
				noItems: __(
					"Your store doesn't have any product tags.",
					'customer-reviews-woocommerce'
				),
				search: __(
					'Search for tags to display',
					'customer-reviews-woocommerce'
				),
				selected: function( n ) {
					return sprintf(
						_n(
							'%d tag selected',
							'%d tags selected',
							n,
							'customer-reviews-woocommerce'
						),
						n
					)
				},
				updated: __(
					'Tag search results updated.',
					'customer-reviews-woocommerce'
				),
			};

return el( Fragment,
				{},
				[
					el( SearchListControl,
						{
							className: "woocommerce-products",
							list: list,
							isLoading: loading,
							selected: selected.map( function( name ) {
								return find( list, { name: name } );
							} ).filter( Boolean ),
							onChange: onChange,
							messages: messages
						}
					)
				]
			);
		}
	} );

var pickerWithLabel = function( props ) {
		return el(
			BaseControl,
			{
				id: props.instanceId || Math.random(),
				label: props.label || ''
			},
			[
				el( ColorPicker, props )
			]
		);
	};

registerBlockType('ivole/cusrev-reviews-grid', {
		title: __( 'Reviews Grid', 'customer-reviews-woocommerce'),
		icon: 'screenoptions',
		description: __( 'Block showing a grid with WooCommerce product reviews.', 'customer-reviews-woocommerce' ),
		category: 'widgets',

//init after render
			let blockLoaded = false;
			let blockLoadedInterval = setInterval(function() {

if (jQuery(".cr-reviews-grid-inner").length) {

blockLoaded = true;

if (typeof crResizeAllGridItems === "function") {
						crResizeAllGridItems();
					}
				}
				if ( blockLoaded ) {
					clearInterval( blockLoadedInterval );
				}
			}, 1000);

if ( ! props.settings.reviews_shortcodes ) {
				return el(
					'div',
					{},
					el(
						'em',
						{},
						__( 'You need to enable "Reviews Shortcodes" checkbox in Reviews > Settings > Review Extensions', 'customer-reviews-woocommerce' )
					)
				);
			}

return el(
				Fragment,
				{},
				[
					el(
						InspectorControls,
						{},
						[
							el(
								PanelBody,
								{
									title: __( 'Review Grid Settings', 'customer-reviews-woocommerce' )
								},
								[
									el(
										RangeControl,
										{
											label: __( 'Number of Reviews', 'customer-reviews-woocommerce' ),
											value: props.attributes.count,
											min: 1,
											max: 6,
											onChange: function( count ) {
												props.setAttributes( {
													count: count
												} );
											}
										}
									),
									el(
										RangeControl,
										{
											label: __( 'Number of Shop Reviews', 'customer-reviews-woocommerce' ),
											value: props.attributes.count_shop_reviews,
											min: 0,
											max: 3,
											onChange: function( count_shop_reviews ) {
												props.setAttributes( {
													count_shop_reviews: count_shop_reviews
												} );
											}
										}
									),
									el(
										RangeControl,
										{
											label: __( 'Show More', 'customer-reviews-woocommerce' ),
											value: props.attributes.show_more,
											min: 0,
											max: 10,
											onChange: function( show_more ) {
												props.setAttributes( {
													show_more: show_more
												} );
											}
										}
									),
									el(
										RangeControl,
										{
											label: __( 'Minimum Number of Characters in a Review (0 = Display All Reviews)', 'customer-reviews-woocommerce' ),
											value: props.attributes.min_chars,
											min: 0,
											max: 9999,
											onChange: function( min_chars ) {
												props.setAttributes( {
													min_chars: min_chars
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Show Products', 'customer-reviews-woocommerce' ),
											checked: props.attributes.show_products,
											onChange: function() {
												props.setAttributes( {
													show_products: ! props.attributes.show_products
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Product Links', 'customer-reviews-woocommerce' ),
											checked: props.attributes.product_links,
											onChange: function() {
												props.setAttributes( {
													product_links: ! props.attributes.product_links
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Shop Reviews', 'customer-reviews-woocommerce' ),
											checked: props.attributes.shop_reviews,
											onChange: function() {
												props.setAttributes( {
													shop_reviews: ! props.attributes.shop_reviews
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Inactive Products', 'customer-reviews-woocommerce' ),
											checked: props.attributes.inactive_products,
											onChange: function() {
												props.setAttributes( {
													inactive_products: ! props.attributes.inactive_products
												} );
											}
										}
									),
									el(
										SelectControl,
										{
											label: __( 'Avatars', 'customer-reviews-woocommerce' ),
											value: props.attributes.avatars,
											options: [
												{
													label: __( 'Initials', 'customer-reviews-woocommerce' ),
													value: 'initials'
												},
												{
													label: __( 'Standard', 'customer-reviews-woocommerce' ),
													value: 'standard'
												},
												{
													label: __( 'No avatars', 'customer-reviews-woocommerce' ),
													value: 'false'
												}
											],
											onChange: function( avatars ) {
												props.setAttributes( {
													avatars: avatars
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Show Rating Bars', 'customer-reviews-woocommerce' ),
											checked: props.attributes.show_summary_bar,
											onChange: function() {
												props.setAttributes( {
													show_summary_bar: ! props.attributes.show_summary_bar
												} );
											}
										}
									),
									el(
										SelectControl,
										{
											label: __( 'Sort By', 'customer-reviews-woocommerce' ),
											value: props.attributes.sort_by,
											options: [
												{
													label: __( 'Date', 'customer-reviews-woocommerce' ),
													value: 'date'
												},
												{
													label: __( 'Rating', 'customer-reviews-woocommerce' ),
													value: 'rating'
												}
											],
											onChange: function( sort_by ) {
												props.setAttributes( {
													sort_by: sort_by
												} );
											}
										}
									),
									el(
										SelectControl,
										{
											label: __( 'Sort Order', 'customer-reviews-woocommerce' ),
											value: props.attributes.sort,
											options: [
												{
													label: __( 'Ascending', 'customer-reviews-woocommerce' ),
													value: 'ASC'
												},
												{
													label: __( 'Descending', 'customer-reviews-woocommerce' ),
													value: 'DESC'
												},
												{
													label: __( 'Random', 'customer-reviews-woocommerce' ),
													value: 'RAND'
												}
											],
											onChange: function( sort_order ) {
												props.setAttributes( {
													sort: sort_order
												} );
											}
										}
									),
								]
							),
							el(
								PanelBody,
								{
									title: __( 'Product Categories', 'customer-reviews-woocommerce' ),
									initialOpen: false
								},
								[
									el(
										'div',
										{},
										__( 'Select which product categories to show reviews for.', 'customer-reviews-woocommerce' )
									),
									el(
										ProductCategoryControl,
										{
											selected: props.attributes.categories,
											onChange: function( value ) {
												value = value || [];
												var ids = value.map( function( category ) {
													return category.id;
												} );

props.setAttributes( {
													categories: ids
												} );
											}
										}
									)
								]
							),
							el(
								PanelBody,
								{
									title: __( 'Products', 'customer-reviews-woocommerce' ),
									initialOpen: false
								},
								[
									el(
										'div',
										{},
										__( 'Select which products to show reviews for.', 'customer-reviews-woocommerce' )
									),
									el(
										ProductsControl,
										{
											selected: props.attributes.products,
											onChange: function( value ) {
												value = value || [];
												var ids = value.map( function( product ) {
													return product.id;
												} );

props.setAttributes( {
													products: ids
												} );
											}
										}
									)
								]
							),
							el(
								PanelBody,
								{
									title: __( 'Product Tags', 'customer-reviews-woocommerce' ),
									initialOpen: false
								},
								[
									el(
										'div',
										{},
										__( 'Select which product tags to show reviews for.', 'customer-reviews-woocommerce' )
									),
									el(
										ProductTagsControl,
										{
											selected: props.attributes.product_tags,
											onChange: function( value ) {
												value = value || [];
												var ids = value.map( function( tag ) {
													return tag.name;
												} );

props.setAttributes( {
													product_tags: ids
												} );
											}
										}
									)
								]
							),
							el(
								PanelBody,
								{
									title: __( 'Colors', 'customer-reviews-woocommerce' ),
									initialOpen: false
								},
								[
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_ex_brdr,
											label: __( 'External Border', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_ex_brdr: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_brdr,
											label: __( 'Review Card Border', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_brdr: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_ex_bcrd,
											label: __( 'Background', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_ex_bcrd: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_bcrd,
											label: __( 'Review Card Background', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_bcrd: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_pr_bcrd,
											label: __( 'Product Area Background', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_pr_bcrd: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_stars,
											label: __( 'Stars', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_stars: color.hex
												} );
											}
										}
									)
								]
							)
						]
					),
					el(
						Disabled,
						{},
						[
							el(
								ServerSideRender,
								{
									block: 'ivole/cusrev-reviews-grid',
									attributes:  props.attributes
								}
							)
						]
					)
				]
			);
		} ),

save: function() {
			return null;
		}
	});
	registerBlockType('ivole/cusrev-reviews-slider', {
		title: __( 'Reviews Slider', 'customer-reviews-woocommerce'),
		icon: 'slides',
		description: __( 'Block showing a slider with WooCommerce product reviews.', 'customer-reviews-woocommerce' ),
		category: 'widgets',

//init slider after render
			let blockLoaded = false;
			let blockLoadedInterval = setInterval(function() {

if (jQuery(".cr-reviews-slider").length) {

blockLoaded = true;

jQuery(".cr-reviews-slider").each(function () {
						if(!jQuery(this).hasClass("slick-initialized")) jQuery(this).slick();
					});
				}
				if ( blockLoaded ) {
					clearInterval( blockLoadedInterval );
				}
			}, 1000);

return el(
				Fragment,
				{},
				[
					el(
						InspectorControls,
						{},
						[
							el(
								PanelBody,
								{
									title: __( 'Reviews Slider Settings', 'customer-reviews-woocommerce' )
								},
								[
									el(
										RangeControl,
										{
											label: __( 'Number of Reviews', 'customer-reviews-woocommerce' ),
											value: props.attributes.count,
											min: 1,
											max: 6,
											onChange: function( count ) {
												props.setAttributes( {
													count: count
												} );
											}
										}
									),
									el(
										RangeControl,
										{
											label: __( 'Number of Slides to Show', 'customer-reviews-woocommerce' ),
											value: props.attributes.slides_to_show,
											min: 1,
											max: 6,
											onChange: function( slides_to_show ) {
												props.setAttributes( {
													slides_to_show: slides_to_show
												} );
											}
										}
									),
									el(
										RangeControl,
										{
											label: __( 'Number of Shop Reviews', 'customer-reviews-woocommerce' ),
											value: props.attributes.count_shop_reviews,
											min: 0,
											max: 3,
											onChange: function( count_shop_reviews ) {
												props.setAttributes( {
													count_shop_reviews: count_shop_reviews
												} );
											}
										}
									),
									el(
										RangeControl,
										{
											label: __( 'Maximum Number of Characters to Display (0 = Unlimited)', 'customer-reviews-woocommerce' ),
											value: props.attributes.max_chars,
											min: 0,
											max: 9999,
											onChange: function( max_chars ) {
												props.setAttributes( {
													max_chars: max_chars
												} );
											}
										}
									),
									el(
										RangeControl,
										{
											label: __( 'Minimum Number of Characters in a Review (0 = Display All Reviews)', 'customer-reviews-woocommerce' ),
											value: props.attributes.min_chars,
											min: 0,
											max: 9999,
											onChange: function( min_chars ) {
												props.setAttributes( {
													min_chars: min_chars
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Show Products', 'customer-reviews-woocommerce' ),
											checked: props.attributes.show_products,
											onChange: function() {
												props.setAttributes( {
													show_products: ! props.attributes.show_products
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Product Links', 'customer-reviews-woocommerce' ),
											checked: props.attributes.product_links,
											onChange: function() {
												props.setAttributes( {
													product_links: ! props.attributes.product_links
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Shop Reviews', 'customer-reviews-woocommerce' ),
											checked: props.attributes.shop_reviews,
											onChange: function() {
												props.setAttributes( {
													shop_reviews: ! props.attributes.shop_reviews
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Inactive Products', 'customer-reviews-woocommerce' ),
											checked: props.attributes.inactive_products,
											onChange: function() {
												props.setAttributes( {
													inactive_products: ! props.attributes.inactive_products
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Autoplay', 'customer-reviews-woocommerce' ),
											checked: props.attributes.autoplay,
											onChange: function() {
												props.setAttributes( {
													autoplay: ! props.attributes.autoplay
												} );
											}
										}
									),
									el(
										SelectControl,
										{
											label: __( 'Avatars', 'customer-reviews-woocommerce' ),
											value: props.attributes.avatars,
											options: [
												{
													label: __( 'Initials', 'customer-reviews-woocommerce' ),
													value: 'initials'
												},
												{
													label: __( 'Standard', 'customer-reviews-woocommerce' ),
													value: 'standard'
												},
												{
													label: __( 'No avatars', 'customer-reviews-woocommerce' ),
													value: 'false'
												}
											],
											onChange: function( avatars ) {
												props.setAttributes( {
													avatars: avatars
												} );
											}
										}
									),
									el(
										ToggleControl,
										{
											label: __( 'Show Dots', 'customer-reviews-woocommerce' ),
											checked: props.attributes.show_dots,
											onChange: function() {
												props.setAttributes( {
													show_dots: ! props.attributes.show_dots
												} );
											}
										}
									),
									el(
										SelectControl,
										{
											label: __( 'Sort By', 'customer-reviews-woocommerce' ),
											value: props.attributes.sort_by,
											options: [
												{
													label: __( 'Date', 'customer-reviews-woocommerce' ),
													value: 'date'
												},
												{
													label: __( 'Rating', 'customer-reviews-woocommerce' ),
													value: 'rating'
												}
											],
											onChange: function( sort_by ) {
												props.setAttributes( {
													sort_by: sort_by
												} );
											}
										}
									),
									el(
										SelectControl,
										{
											label: __( 'Sort Order', 'customer-reviews-woocommerce' ),
											value: props.attributes.sort,
											options: [
												{
													label: __( 'Ascending', 'customer-reviews-woocommerce' ),
													value: 'ASC'
												},
												{
													label: __( 'Descending', 'customer-reviews-woocommerce' ),
													value: 'DESC'
												},
												{
													label: __( 'Random', 'customer-reviews-woocommerce' ),
													value: 'RAND'
												}
											],
											onChange: function( sort_order ) {
												props.setAttributes( {
													sort: sort_order
												} );
											}
										}
									),
								]
							),
							el(
								PanelBody,
								{
									title: __( 'Product Categories', 'customer-reviews-woocommerce' ),
									initialOpen: false
								},
								[
									el(
										'div',
										{},
										__( 'Select which product categories to show reviews for.', 'customer-reviews-woocommerce' )
									),
									el(
										ProductCategoryControl,
										{
											selected: props.attributes.categories,
											onChange: function( value ) {
												value = value || [];
												var ids = value.map( function( category ) {
													return category.id;
												} );

props.setAttributes( {
													product_tags: ids
												} );
											}
										}
									)
								]
							),
							el(
								PanelBody,
								{
									title: __( 'Colors', 'customer-reviews-woocommerce' ),
									initialOpen: false
								},
								[
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_brdr,
											label: __( 'Review Card Border', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_brdr: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_bcrd,
											label: __( 'Review Card Background', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_bcrd: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_pr_bcrd,
											label: __( 'Product Area Background', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_pr_bcrd: color.hex
												} );
											}
										}
									),
									el(
										withInstanceId( pickerWithLabel ),
										{
											color: props.attributes.color_stars,
											label: __( 'Stars', 'customer-reviews-woocommerce' ),
											disableAlpha: true,
											onChangeComplete: function( color ) {
												props.setAttributes( {
													color_stars: color.hex
												} );
											}
										}
									)
								]
							)
						]
					),
					el(
						Disabled,
						{},
						[
							el(
								ServerSideRender,
								{
									block: 'ivole/cusrev-reviews-slider',
									attributes:  props.attributes
								}
							)
						]
					)
				]

);
		}),
		save: function() {
			return null;
		}
	});
})();