Add a Multiple Checkbox Groups filter

MultipleCheckboxGroupsFilter.jsx

import * as React from 'react'
import * as Flex from '@twilio/flex-ui'

const Title = Flex.styled('h2')`
    color: ${p => p.theme.calculated.textColor};
    padding: ${p => p.first ? '0' : '12px'} 16px 8px;
    font-weight: bold;
`

const MultipleCheckboxGroups = ({ handleChange, currentValue, fieldName, options }) => {
  // ⬇️ Creating two subsets of options
  const optionsSubsets = [
    {
      label: 'Online',
      // only online statuses
      options: options.filter(options => options.custom.online),
    },
    {
      label: 'Offline',
      // only offline statuses
      options: options.filter(options => !options.custom.online),
    },
  ]

  return (
    <div>
      {
        //  ⬇️ Creating two sets of checkboxes
        optionsSubsets.map((set, i) => (
          <div key={set.label}>
            <Title first={!i}>{set.label}</Title>
            <Flex.CheckboxGroup
              field={{
                options: set.options,
                attributes: { name: fieldName },
              }}
              handleChange={handleChange}
              error={null}
              stateData={currentValue || []}
              touched={false}
            />
          </div>
        ))
      }
    </div>
  )
}

const groupedStatusesFilter = (appState) => {
  const activitiesArray = Array.from(appState.worker.activities.values())

  const activities = activitiesArray.map((activity) => {
    return {
      value: activity.name,
      label: activity.name,
      default: false,
      //   ⬇️ Passing custom payload to options
      custom: {
        online: activity.available,
      },
    }
  })

  return {
    customStructure: {
      field: <MultipleCheckboxGroups/>,
      label: <React.Fragment/>,
    },
    id: 'data.activity_name',
    fieldName: 'activity_name',
    type: Flex.FiltersListItemType.multiValue,
    title: 'Status',
    options: activities,
  }
}

export const activateFilter = () => {
  Flex.TeamsView.defaultProps.filters = [
    groupedStatusesFilter,
  ]
}

// Run `activateFilter` method in main file

MultipleCheckboxGroupsFilter.tsx

import * as React from "react";
import * as Flex from "@twilio/flex-ui";

interface TitleInterface {
    first: boolean;
}

const Title = Flex.styled("h2")<TitleInterface>`
    color: ${p => p.theme.calculated.textColor};
    padding: ${p => p.first ? '0' : '12px' } 16px 8px;
    font-weight: bold;
`;

const MultipleCheckboxGroups: React.FC<any> = ({handleChange, currentValue, fieldName, options}) => {
    // ⬇️ Creating two subsets of options
    const optionsSubsets = [
        {
            label: "Online",
            // only online statuses
            options: options.filter(options => options.custom.online)
        },
        {
            label: "Offline",
            // only offline statuses
            options: options.filter(options => !options.custom.online)
        },
    ];

    return <div>{
        //  ⬇️ Creating two sets of checkboxes
        optionsSubsets.map((set, i) => (
            <div key={set.label}>
                <Title first={!i}>{set.label}</Title>
                <Flex.CheckboxGroup
                    field={{
                        options: set.options,
                        attributes: {name: fieldName}
                    }}
                    handleChange={handleChange}
                    error={null}
                    stateData={currentValue || []}
                    touched={false}
                />
            </div>
        ))
    }</div>;
};

const groupedStatusesFilter = (appState: Flex.AppState): Flex.FilterDefinition => {
    const activitiesArray = Array.from(appState.worker.activities.values());

    const activities = activitiesArray.map((activity: any) => {
        return {
            value: activity.name,
            label: activity.name,
            default: false,
            //   ⬇️ Passing custom payload to options
            custom: {
                online: activity.available
            }
        };
    });

    return {
        customStructure: {
            field: <MultipleCheckboxGroups/>,
            label: <React.Fragment />,
        },
        id: "data.activity_name",
        fieldName: "activity_name",
        type: Flex.FiltersListItemType.multiValue,
        title: "Status",
        options: activities
    } as Flex.FilterDefinition;
};

export const activateFilter = () => {
    Flex.TeamsView.defaultProps.filters = [
        groupedStatusesFilter,
    ];
};

// Run `activateFilter` method in main file