@commercetools-frontend/experimental-components 0.0.2

package/src/components/business-unit-select-input/business-unit-select-input.spec.js

@@ -0,0 +1,118 @@
+import { setupServer } from 'msw/node';
+import {
+  renderApp,
+  fireEvent,
+  screen,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { BusinessUnit } from '@commercetools-local/test-data';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import BusinessUnitSelectInput from './business-unit-select-input';
+import { FieldLabel } from '@commercetools-frontend/ui-kit';
+import { useTotalNumberOfBusinessUnitsFetcherHandlers as totalNumberOfBusinessUnitsFetcherHandlers } from './hooks/use-total-number-of-business-units-fetcher';
+import { useBusinessUnitsListFetcherMockHandler as businessUnitsListFetcherMockHandler } from './hooks/use-business-units-list-fetcher';
+
+const companyId = '123';
+const companyKey = 'foo-bar-company';
+const companyName = 'Foo Bar Company';
+const companyContactEmail = 'foo@bar.com';
+
+const companyObj = {
+  id: companyId,
+  key: companyKey,
+  name: companyName,
+  contactEmail: companyContactEmail,
+};
+
+const companyBusinessUnit = BusinessUnit.random()
+  .id(companyId)
+  .key(companyKey)
+  .name(companyName)
+  .contactEmail(companyContactEmail)
+  .topLevelUnit(companyObj)
+  .createdAt('2022-07-26T22:00:00.123Z')
+  .lastModifiedAt('2022-07-28T11:00:00.123Z');
+
+const mockBusinessUnits = buildGraphqlList([companyBusinessUnit], {
+  total: 3,
+  name: 'businessUnits',
+});
+
+const mockEmptyBusinessUnits = buildGraphqlList([], {
+  total: 0,
+  name: 'businessUnits',
+});
+
+const createTestProps = (custom) => ({
+  id: 'business-unit-select-input-id',
+  name: 'business-unit-select-input',
+  isClearable: true,
+  onChange: jest.fn(),
+  onError: jest.fn(),
+  ...custom,
+});
+
+const mockServer = setupServer(
+  totalNumberOfBusinessUnitsFetcherHandlers.TotalNumberOfBusinessUnits.all(2),
+  businessUnitsListFetcherMockHandler.BusinessUnits.all(mockBusinessUnits)
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => {
+  mockServer.listen({ onUnhandledRequest: 'error' });
+});
+afterAll(() => {
+  mockServer.close();
+});
+
+const render = (props) => {
+  const testProps = createTestProps(props);
+  return renderApp(
+    <>
+      <FieldLabel
+        title="Business unit"
+        htmlFor="business-unit-select-input-id"
+      />
+      <BusinessUnitSelectInput {...testProps} />
+    </>
+  );
+};
+
+describe('rendering', () => {
+  describe('when there are no business units', () => {
+    it('should render empty input', async () => {
+      mockServer.use(
+        totalNumberOfBusinessUnitsFetcherHandlers.TotalNumberOfBusinessUnits.all(
+          0
+        ),
+        businessUnitsListFetcherMockHandler.BusinessUnits.all(
+          mockEmptyBusinessUnits
+        )
+      );
+      render();
+      const businessUnitInput = await screen.findByText(
+        /Select or type a business unit key/
+      );
+      await screen.findByText(/Select or type a business unit key/);
+
+      fireEvent.focus(businessUnitInput);
+      fireEvent.keyDown(businessUnitInput, { key: 'ArrowDown' });
+
+      await screen.findByText(/No options/);
+    });
+  });
+  describe('when there are business units in the project', () => {
+    it('should render the options', async () => {
+      render();
+      const businessUnitInput = await screen.findByText(
+        /Select or type a business unit key/
+      );
+
+      fireEvent.focus(businessUnitInput);
+      fireEvent.keyDown(businessUnitInput, { key: 'ArrowDown' });
+
+      await screen.findByText(/Foo Bar Company/);
+    });
+  });
+});

package/src/components/business-unit-select-input/components/business-unit-async-select-input/business-unit-async-select-input.jsx

@@ -0,0 +1,181 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { AsyncSelectInput, FieldErrors } from '@commercetools-frontend/ui-kit';
+import { CenteredLoadingSpinner } from '../../../../internal-index';
+import useBusinessUnitsListFetcher from '../../hooks/use-business-units-list-fetcher';
+import {
+  filterDataAttributes,
+  filterAriaAttributes,
+} from '@commercetools-uikit/utils';
+import { mapBusinessUnitsToOptions, getFirst60Options } from '../../utils';
+import messages from '../../messages';
+import {
+  UPPER_BUSINESS_UNITS_LIMIT,
+  LOWER_BUSINESS_UNITS_LIMIT,
+} from './../../constants';
+
+const hasErrors = (errors) => errors && Object.values(errors).some(Boolean);
+
+const BusinessUnitAsyncSelectInput = (props) => {
+  const intl = useIntl();
+  const businessUnitsListFetcher = useBusinessUnitsListFetcher({
+    limit: UPPER_BUSINESS_UNITS_LIMIT,
+    sort: 'createdAt asc',
+    where: props?.where,
+  });
+  const hasError =
+    AsyncSelectInput.isTouched(props.touched) && hasErrors(props.errors);
+
+  const businessUnits = useMemo(
+    () => businessUnitsListFetcher.businessUnits.results,
+    [businessUnitsListFetcher.businessUnits?.results]
+  );
+
+  const mappedBusinessUnitsOptions = useMemo(
+    () =>
+      businessUnits.map((businessUnit) =>
+        mapBusinessUnitsToOptions({
+          businessUnit,
+          renderSelectInputOptionValuesByField:
+            props.renderSelectInputOptionValuesByField,
+        })
+      ),
+    [businessUnits, props.renderSelectInputOptionValuesByField]
+  );
+
+  const handleLoadOptions = async (searchTerm) => {
+    if (!searchTerm)
+      return [
+        {
+          options: getFirst60Options(mappedBusinessUnitsOptions, props.value),
+        },
+      ];
+
+    const filteredOptions = mappedBusinessUnitsOptions.filter(
+      (businessUnitOption) =>
+        businessUnitOption.label
+          .toLowerCase()
+          .includes(searchTerm.toLowerCase()) ||
+        (businessUnitOption.key &&
+          businessUnitOption.key
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase()))
+    );
+    return [{ options: getFirst60Options(filteredOptions, props.value) }];
+  };
+
+  const handleChange = (event) => {
+    const businessUnitKey = event.target.value?.value ?? event.target.value;
+    const currentBusinessUnit = businessUnits.find(
+      (businessUnit) => businessUnit.key === businessUnitKey
+    );
+
+    props.onChange(currentBusinessUnit);
+  };
+
+  const getDefaultOptions = () => {
+    return mappedBusinessUnitsOptions.slice(0, LOWER_BUSINESS_UNITS_LIMIT);
+  };
+
+  if (businessUnitsListFetcher.isLoading) return <CenteredLoadingSpinner />;
+
+  return (
+    <>
+      <AsyncSelectInput
+        id={props.id}
+        name={props.name}
+        placeholder={
+          props.placeholder ||
+          intl.formatMessage(messages.asyncSelectInputPlaceholder)
+        }
+        horizontalConstraint={props.horizontalConstraint}
+        loadOptions={handleLoadOptions}
+        defaultOptions={getDefaultOptions()}
+        value={props.value}
+        onChange={handleChange}
+        onBlur={props.onBlur}
+        isDisabled={props.isDisabled || businessUnitsListFetcher.isLoading}
+        isReadOnly={props.isReadOnly}
+        isClearable={props.isClearable}
+        isSearchable={props.isSearchable}
+        backspaceRemovesValue={props.backspaceRemovesValue}
+        hasError={hasError}
+        hasWarning={props.hasWarning}
+        errors={props.errors}
+        renderError={props.renderError}
+        touched={props.touched}
+        maxMenuHeight={props.maxMenuHeight}
+        menuPortalTarget={props.menuPortalTarget}
+        menuPortalZIndex={props.menuPortalZIndex}
+        components={props.components}
+        {...filterDataAttributes(props)}
+        {...filterAriaAttributes(props)}
+      />
+      <FieldErrors
+        errors={props.errors}
+        isVisible={hasError}
+        renderError={props.renderError}
+      />
+    </>
+  );
+};
+BusinessUnitAsyncSelectInput.displayName = 'BusinessUnitAsyncSelectInput';
+BusinessUnitAsyncSelectInput.defaultProps = {
+  shouldFetchProductSelections: false,
+};
+BusinessUnitAsyncSelectInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  horizontalConstraint: PropTypes.oneOf([
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16,
+    'scale',
+    'auto',
+  ]),
+  isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  // name of the field to which the value props should be mapped
+  // i.e. {label: some-label, value: key} OR {label: some-label, value: id}
+  renderSelectInputOptionValuesByField: PropTypes.oneOf(['key', 'id']),
+  touched: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.bool),
+  ]),
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+  errors: PropTypes.object,
+  renderError: PropTypes.func,
+  hasWarning: PropTypes.bool,
+  backspaceRemovesValue: PropTypes.bool,
+  maxMenuHeight: PropTypes.number,
+  menuPortalTarget: PropTypes.instanceOf(HTMLElement),
+  menuPortalZIndex: PropTypes.number,
+  components: PropTypes.objectOf(PropTypes.func),
+  where: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+export default BusinessUnitAsyncSelectInput;

package/src/components/business-unit-select-input/components/business-unit-async-select-input/index.js

@@ -0,0 +1 @@
+export { default } from './business-unit-async-select-input';

package/src/components/business-unit-select-input/components/business-unit-basic-select-input/business-unit-basic-select-input.jsx

@@ -0,0 +1,150 @@
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { SelectInput, FieldErrors } from '@commercetools-frontend/ui-kit';
+import { CenteredLoadingSpinner } from '../../../../internal-index';
+import {
+  filterDataAttributes,
+  filterAriaAttributes,
+} from '@commercetools-uikit/utils';
+import { mapBusinessUnitsToOptions } from '../../utils';
+import messages from '../../messages';
+import { LOWER_BUSINESS_UNITS_LIMIT } from './../../constants';
+import useBusinessUnitsListFetcher from '../../hooks/use-business-units-list-fetcher';
+
+const hasErrors = (errors) => errors && Object.values(errors).some(Boolean);
+
+const BusinessUnitBasicSelectInput = (props) => {
+  const intl = useIntl();
+  const businessUnitsListFetcher = useBusinessUnitsListFetcher({
+    limit: LOWER_BUSINESS_UNITS_LIMIT,
+    sort: 'createdAt asc',
+    where: props?.where,
+  });
+  const hasError =
+    SelectInput.isTouched(props.touched) &&
+    (hasErrors(props.errors) || props.hasError);
+
+  const businessUnits = useMemo(
+    () => businessUnitsListFetcher.businessUnits.results,
+    [businessUnitsListFetcher.businessUnits?.results]
+  );
+
+  const mappedBusinessUnitsOptions = useMemo(
+    () =>
+      businessUnits.map((businessUnit) =>
+        mapBusinessUnitsToOptions({
+          businessUnit,
+          renderSelectInputOptionValuesByField:
+            props.renderSelectInputOptionValuesByField,
+        })
+      ),
+    [businessUnits, props.renderSelectInputOptionValuesByField]
+  );
+
+  const handleChange = (event) => {
+    const businessUnitKey = event.target.value?.value ?? event.target.value;
+    const currentBusinessUnit = businessUnits.find(
+      (businessUnit) => businessUnit.key === businessUnitKey
+    );
+
+    props.onChange(currentBusinessUnit);
+  };
+
+  if (businessUnitsListFetcher.isLoading) return <CenteredLoadingSpinner />;
+
+  return (
+    <>
+      <SelectInput
+        id={props.id}
+        name={props.name}
+        placeholder={
+          props.placeholder ||
+          intl.formatMessage(messages.basicSelectInputPlaceholder)
+        }
+        horizontalConstraint={props.horizontalConstraint}
+        options={mappedBusinessUnitsOptions}
+        value={props.value?.value}
+        onChange={handleChange}
+        onBlur={props.onBlur}
+        isDisabled={props.isDisabled || businessUnitsListFetcher.isLoading}
+        isReadOnly={props.isReadOnly}
+        isClearable={props.isClearable}
+        isSearchable={props.isSearchable}
+        backspaceRemovesValue={props.backspaceRemovesValue}
+        hasError={hasError}
+        hasWarning={props.hasWarning}
+        errors={props.errors}
+        renderError={props.renderError}
+        touched={props.touched}
+        maxMenuHeight={props.maxMenuHeight}
+        menuPortalTarget={props.menuPortalTarget}
+        menuPortalZIndex={props.menuPortalZIndex}
+        components={props.components}
+        {...filterDataAttributes(props)}
+        {...filterAriaAttributes(props)}
+      />
+      <FieldErrors
+        errors={props.errors}
+        isVisible={hasError}
+        renderError={props.renderError}
+      />
+    </>
+  );
+};
+BusinessUnitBasicSelectInput.displayName = 'BusinessUnitBasicSelectInput';
+BusinessUnitBasicSelectInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  horizontalConstraint: PropTypes.oneOf([
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16,
+    'scale',
+    'auto',
+  ]),
+  isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  // name of the field to which the value props should be mapped
+  // i.e. {label: some-label, value: key} OR {label: some-label, value: id}
+  renderSelectInputOptionValuesByField: PropTypes.oneOf(['key', 'id']),
+  touched: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.bool),
+  ]),
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+  errors: PropTypes.object,
+  renderError: PropTypes.func,
+  hasWarning: PropTypes.bool,
+  backspaceRemovesValue: PropTypes.bool,
+  maxMenuHeight: PropTypes.number,
+  menuPortalTarget: PropTypes.instanceOf(HTMLElement),
+  menuPortalZIndex: PropTypes.number,
+  components: PropTypes.objectOf(PropTypes.func),
+  where: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+export default BusinessUnitBasicSelectInput;

package/src/components/business-unit-select-input/components/business-unit-basic-select-input/index.js

@@ -0,0 +1 @@
+export { default } from './business-unit-basic-select-input';

package/src/components/business-unit-select-input/components/business-unit-search-select-input/business-unit-search-select-input.jsx

@@ -0,0 +1,187 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useApolloClient } from '@apollo/client';
+import debounce from 'debounce-promise';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import {
+  SearchSelectInput,
+  FieldErrors,
+  AsyncSelectInput,
+} from '@commercetools-frontend/ui-kit';
+import {
+  filterDataAttributes,
+  filterAriaAttributes,
+} from '@commercetools-uikit/utils';
+import {
+  CenteredLoadingSpinner,
+  isUUID,
+  sanitize,
+} from '../../../../internal-index';
+import { FetchBusinessUnitsByWherePredicate } from './fetch-business-units-by-where-predicate.ctp.graphql';
+import { useBusinessUnitsByFieldFetcher } from '../../hooks';
+import { mapBusinessUnitsToOptions } from '../../utils';
+import messages from '../../messages';
+
+const hasErrors = (errors) => errors && Object.values(errors).some(Boolean);
+
+const createQueryVariables = ({ searchText }) => {
+  const sanitizedSearchText = sanitize(searchText.trim(searchText));
+  const keyQuery = `key = "${sanitizedSearchText}"`;
+
+  const idQuery =
+    isUUID(sanitizedSearchText) && `id = "${sanitizedSearchText}"`;
+  const nameQuery = `name = "${sanitizedSearchText}"`;
+  const searchTextQuery = [idQuery, nameQuery, keyQuery]
+    .filter(Boolean)
+    .join(' or ');
+  return {
+    where: searchTextQuery,
+  };
+};
+
+const BusinessUnitSearchSelectInput = (props) => {
+  const intl = useIntl();
+  const client = useApolloClient();
+  const businessUnitsByFieldFetcher = useBusinessUnitsByFieldFetcher(
+    props.value
+  );
+  const hasError =
+    AsyncSelectInput.isTouched(props.touched) && hasErrors(props.errors);
+
+  const handleLoadOptions = (searchText) => {
+    const extractMatchedBusinessUnits = client
+      .query({
+        query: FetchBusinessUnitsByWherePredicate,
+        variables: createQueryVariables({
+          searchText,
+        }),
+        context: {
+          target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+        },
+        fetchPolicy: 'network-only',
+      })
+      .then(({ data }) =>
+        data.businessUnitsByWherePredicate?.results.map((businessUnit) =>
+          mapBusinessUnitsToOptions({
+            businessUnit,
+            renderSelectInputOptionValuesByField:
+              props.renderSelectInputOptionValuesByField,
+          })
+        )
+      );
+    return extractMatchedBusinessUnits;
+  };
+
+  const handleChange = (event) => {
+    props.onChange(event.target.value);
+  };
+
+  const loadOptionsDebounced = debounce(handleLoadOptions, 500);
+
+  if (businessUnitsByFieldFetcher.isLoading) return <CenteredLoadingSpinner />;
+  return (
+    <>
+      <SearchSelectInput
+        id={props.id}
+        name={props.name}
+        placeholder={
+          props.placeholder ||
+          intl.formatMessage(messages.searchSelectInputPlaceholder)
+        }
+        horizontalConstraint={props.horizontalConstraint}
+        loadOptions={loadOptionsDebounced}
+        defaultOptions={false}
+        value={props.value}
+        onChange={handleChange}
+        onBlur={props.onBlur}
+        loadingMessage={intl.formatMessage(
+          messages.searchSelectInputLoadingMessage
+        )}
+        noOptionsMessage={() =>
+          intl.formatMessage(messages.searchSelectInputNoOptionsFoundMessage)
+        }
+        isDisabled={props.isDisabled || businessUnitsByFieldFetcher.isLoading}
+        isReadOnly={props.isReadOnly}
+        isClearable={props.isClearable}
+        isSearchable={props.isSearchable}
+        backspaceRemovesValue={props.backspaceRemovesValue}
+        hasError={hasError}
+        hasWarning={props.hasWarning}
+        errors={props.errors}
+        renderError={props.renderError}
+        touched={props.touched}
+        maxMenuHeight={props.maxMenuHeight}
+        menuPortalTarget={props.menuPortalTarget}
+        menuPortalZIndex={props.menuPortalZIndex}
+        components={props.components}
+        {...filterDataAttributes(props)}
+        {...filterAriaAttributes(props)}
+      />
+      <FieldErrors
+        errors={props.errors}
+        isVisible={hasError}
+        renderError={props.renderError}
+      />
+    </>
+  );
+};
+
+BusinessUnitSearchSelectInput.displayName = 'BusinessUnitSearchSelectInput';
+BusinessUnitSearchSelectInput.defaultProps = {
+  shouldFetchProductSelections: false,
+};
+BusinessUnitSearchSelectInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  horizontalConstraint: PropTypes.oneOf([
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16,
+    'scale',
+    'auto',
+  ]),
+  isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+    PropTypes.string,
+  ]),
+  // name of the field to which the value props should be mapped
+  // i.e. {label: some-label, value: key} OR {label: some-label, value: id}
+  renderSelectInputOptionValuesByField: PropTypes.oneOf(['key', 'id']),
+  touched: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.bool),
+  ]),
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+  errors: PropTypes.object,
+  renderError: PropTypes.func,
+  hasWarning: PropTypes.bool,
+  backspaceRemovesValue: PropTypes.bool,
+  maxMenuHeight: PropTypes.number,
+  menuPortalTarget: PropTypes.instanceOf(HTMLElement),
+  menuPortalZIndex: PropTypes.number,
+  components: PropTypes.objectOf(PropTypes.func),
+  shouldFetchProductSelections: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+
+export default BusinessUnitSearchSelectInput;

package/src/components/business-unit-select-input/components/business-unit-search-select-input/fetch-business-units-by-where-predicate.ctp.graphql

@@ -0,0 +1,9 @@
+query FetchBusinessUnitsByWherePredicate($where: String!) {
+  businessUnitsByWherePredicate: businessUnits(where: $where) {
+    results {
+      id
+      key
+      name
+    }
+  }
+}

package/src/components/business-unit-select-input/components/business-unit-search-select-input/index.js

@@ -0,0 +1 @@
+export { default } from './business-unit-search-select-input';

package/src/components/business-unit-select-input/components/business-unit-search-select-input/mocks/handlers.js

@@ -0,0 +1,16 @@
+import { graphql } from 'msw';
+
+const handlers = {
+  FetchBusinessUnitsByWherePredicate: {
+    all: (total) =>
+      graphql.query('FetchBusinessUnitsByWherePredicate', (req, res, ctx) => {
+        return res(
+          ctx.data({
+            businessUnitsByWherePredicate: { total },
+          })
+        );
+      }),
+  },
+};
+
+export default handlers;

package/src/components/business-unit-select-input/components/business-unit-search-select-input/mocks/index.js

@@ -0,0 +1,3 @@
+import handlers from './handlers';
+
+export { handlers };

package/src/components/business-unit-select-input/constants.js

@@ -0,0 +1,2 @@
+export const LOWER_BUSINESS_UNITS_LIMIT = 60;
+export const UPPER_BUSINESS_UNITS_LIMIT = 500;

package/src/components/business-unit-select-input/hooks/index.js

@@ -0,0 +1,5 @@
+export { default as useBusinessUnitsListFetcher } from './use-business-units-list-fetcher';
+export { default as useBusinessUnitsByFieldFetcher } from './use-business-units-by-field-fetcher';
+export { default as useTotalNumberOfBusinessUnitsFetcher } from './use-total-number-of-business-units-fetcher';
+export { useBusinessUnitsListFetcherMockHandler } from './use-business-units-list-fetcher';
+export { useTotalNumberOfBusinessUnitsFetcherHandlers } from './use-total-number-of-business-units-fetcher';

package/src/components/business-unit-select-input/hooks/use-business-units-by-field-fetcher/fetch-business-units-by-field.ctp.graphql

@@ -0,0 +1,9 @@
+query FetchBusinessUnitsByField($where: String!) {
+  businessUnitsByField: businessUnits(where: $where) {
+    results {
+      id
+      key
+      name
+    }
+  }
+}