How to Implement a Multiple Selector in WooCommerce Analytics Filters

[devappsteam]

Hello everyone,

I’m trying to add a new filter to the analytics. I would like to add a multiple select. I’ve already set up the entire plugin structure, and I’m using @wordpress/scripts. Adding a single selector is working fine, but I would like to make it a multiple one. Below is the implementation:

index.js

import { addFilter } from "@wordpress/hooks";
import { __ } from '@wordpress/i18n';
import SelectSuppliers from './components/SupplierSelect';

const reports = [
  "woocommerce_admin_dashboard_filters",
  "woocommerce_admin_orders_report_filters",
  "woocommerce_admin_products_report_filters",
  "woocommerce_admin_revenue_report_filters",
  "woocommerce_admin_categories_report_filters",
  "woocommerce_admin_coupons_report_filters",
  "woocommerce_admin_stock_report_filters",
];

reports.forEach((report) => {
  addFilter(report, "cdc-analytics", (filters) => {
    return [
      ...filters,
      {
        label: __('Suppliers', 'cdc_analytics'),
        component: SelectSuppliers
      }
    ];
  });
});

Component

import { __ } from '@wordpress/i18n';
import { SelectControl } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';

const SupplierSelect = ({ path, query, updateQuery }) => {
    const [suppliers, setSuppliers] = useState([]);
    const [selectedSuppliers, setSelectedSuppliers] = useState(query.suppliers || []);
    useEffect(() => {
        setSuppliers([
            { value: 'supplier1', label: 'Fornecedor 1' },
            { value: 'supplier2', label: 'Fornecedor 2' },
            { value: 'supplier3', label: 'Fornecedor 3' },
            { value: 'supplier3', label: 'Fornecedor 4' },
        ]);
    }, []);

    const onChange = (selected) => {
        setSelectedSuppliers(selected);
        updateQuery({ suppliers: selected.length ? selected : undefined });
    };

    return (
        <SelectControl
            multiple
            label={__("Suppliers", "cdc-analytics")}
            options={suppliers}
            value={selectedSuppliers}
            onChange={onChange}
        />
    );
};

export default SupplierSelect;