@commercetools-frontend/experimental-components 0.0.2

package/src/components/attribute-definitions/reference-search/category-reference-search/messages.js

@@ -0,0 +1,37 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'CategoryReferenceSearch.placeholder',
+    description: 'Placeholder for search for a category',
+    defaultMessage: 'Search by name, external ID, or slug.',
+  },
+  isMissing: {
+    id: 'CategoryReferenceSearch.isMissing',
+    description: 'Label above the field for deleted reference of a category',
+    defaultMessage: 'This Category has been deleted.',
+  },
+  noResults: {
+    id: 'CategoryReferenceSearch.noResults',
+    description: 'Message for no results found for category reference',
+    defaultMessage:
+      'Sorry, but there are no categories that match your search.',
+  },
+  searchPrompt: {
+    id: 'CategoryReferenceSearch.searchPrompt',
+    description: 'Message for search prompt for category reference',
+    defaultMessage: 'Enter search term',
+  },
+  externalId: {
+    id: 'CategoryReferenceSearch.externalId',
+    description: 'external id label',
+    defaultMessage: 'External ID',
+  },
+  parentCategory: {
+    id: 'CategoryReferenceSearch.parentCategory',
+    description: 'parent category label',
+    defaultMessage: 'Parent Category',
+  },
+});
+
+export default messages;

package/src/components/attribute-definitions/reference-search/category-reference-search/option.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+import { formatLocalizedString } from '@commercetools-frontend/l10n';
+import { AsyncSelectInput, Text } from '@commercetools-frontend/ui-kit';
+import messages from './messages';
+
+function Option(props) {
+  const { language, languages } = useApplicationContext(
+    (applicationContext) => ({
+      language: applicationContext.dataLocale,
+      languages: applicationContext.project.languages,
+    })
+  );
+  const { formatMessage } = useIntl();
+
+  const category = props.data;
+
+  return (
+    <AsyncSelectInput.Option {...props}>
+      <div data-testid="category-option">
+        <Text.Body isBold={true}>
+          {formatLocalizedString(category, {
+            key: 'name',
+            locale: language,
+            fallbackOrder: languages,
+          })}
+        </Text.Body>
+        {category.parent && (
+          <Text.Detail>
+            {`${formatMessage(
+              messages.parentCategory
+            )}: ${formatLocalizedString(category.parent, {
+              key: 'name',
+              locale: language,
+              fallbackOrder: languages,
+            })}`}
+          </Text.Detail>
+        )}
+        <Text.Detail>
+          {`Slug: ${formatLocalizedString(category, {
+            key: 'slug',
+            locale: language,
+            fallbackOrder: languages,
+          })}`}
+        </Text.Detail>
+        {category.externalId && (
+          <Text.Detail>
+            {`${formatMessage(messages.externalId)}: ${
+              category.externalId || NO_VALUE_FALLBACK
+            }`}
+          </Text.Detail>
+        )}
+      </div>
+    </AsyncSelectInput.Option>
+  );
+}
+
+Option.propTypes = {
+  data: PropTypes.shape({
+    name: PropTypes.objectOf(PropTypes.string),
+    slug: PropTypes.objectOf(PropTypes.string),
+    externalId: PropTypes.string,
+    parent: PropTypes.shape({
+      name: PropTypes.objectOf(PropTypes.string),
+    }),
+  }).isRequired,
+};
+
+export default Option;

package/src/components/attribute-definitions/reference-search/category-reference-search/use-cached-category-options.js

@@ -0,0 +1,21 @@
+import { useApolloClient } from '@apollo/client';
+import { transformLocalizedFieldsForCategory } from '../../../../internal-index';
+import { CategorySearchPickerOptionFragment } from '../../../../actions/reference-search/category/category.ctp.graphql';
+
+export default function useCachedCategoryOptions(ids) {
+  const apolloClient = useApolloClient();
+
+  const fragments = ids.map((id) =>
+    apolloClient.readFragment({
+      id: `CategorySearch:${id}`,
+      fragment: CategorySearchPickerOptionFragment,
+    })
+  );
+
+  return fragments.map((category) =>
+    transformLocalizedFieldsForCategory(category, [
+      { from: 'nameAllLocales', to: 'name' },
+      { from: 'slugAllLocales', to: 'slug' },
+    ])
+  );
+}

package/src/components/attribute-definitions/reference-search/index.js

@@ -0,0 +1,10 @@
+import CategoryReferenceSearch, {
+  useCachedCategoryOptions,
+} from './category-reference-search';
+import CartDiscountReferenceSearch from './cart-discount-reference-search';
+
+export {
+  CategoryReferenceSearch,
+  CartDiscountReferenceSearch,
+  useCachedCategoryOptions,
+};

package/src/components/attribute-definitions/reference-search/reference-search.jsx

@@ -0,0 +1,179 @@
+import PropTypes from 'prop-types';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import { deepEqual } from 'fast-equals';
+import CustomFieldTooltip from '../../../custom-fields/custom-fields/custom-field-tooltip';
+import Autocomplete from '../../../fields/autocomplete';
+import { usePrevious } from '../../../hooks';
+
+import styles from './reference-search.module.css';
+
+// This is a hashmap of loaded items used to map a value to an item
+const itemCache = new Map();
+
+// Keep track of "mounted" state to safe-guard updating React state
+// in asynchronous calls, for example within an effect.
+const useMountedState = () => {
+  const mountedRef = useRef(false);
+  const isMounted = useCallback(() => mountedRef.current, []);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  return isMounted;
+};
+
+const useReferenceSearchItems = ({
+  ids,
+  loadItemsBySearchTerm,
+  loadItemsByIds,
+}) => {
+  const isMounted = useMountedState();
+  const [items, setItems] = useState([]);
+  const [areItemsLoading, setAreItemsLoading] = useState(false);
+
+  // Used to debounce load items requests
+  const loadItemsTimeoutRef = useRef();
+
+  const putToCache = useCallback((items) => {
+    items.forEach((item) => itemCache.set(item.id, item));
+  }, []);
+
+  const prevIds = usePrevious(ids);
+
+  useEffect(() => {
+    async function loadItems() {
+      const loadedItems = ids.length > 0 ? await loadItemsByIds(ids) : [];
+      putToCache(loadedItems);
+
+      // To safe-guard against updating React state when component
+      // has been unmounted.
+      if (isMounted()) {
+        setItems(loadedItems);
+        setAreItemsLoading(false);
+      }
+    }
+
+    if (!deepEqual(prevIds, ids)) {
+      const hasAllItemsInCache = ids.every((id) => itemCache.has(id));
+      if (hasAllItemsInCache) {
+        setAreItemsLoading(false);
+        setItems(ids.map((id) => itemCache.get(id)));
+      } else {
+        setAreItemsLoading(true);
+        loadItems();
+      }
+    }
+  }, [ids, isMounted, loadItemsByIds, prevIds, putToCache]);
+
+  const handleLoadItems = useCallback(
+    (text) => {
+      if (loadItemsTimeoutRef.current)
+        clearTimeout(loadItemsTimeoutRef.current);
+
+      const loadItemsPromise = new Promise((resolve) => {
+        loadItemsTimeoutRef.current = setTimeout(async () => {
+          const items = await loadItemsBySearchTerm(text);
+          putToCache(items);
+          resolve(items);
+        }, 300);
+      });
+
+      return loadItemsPromise;
+    },
+    [loadItemsBySearchTerm, putToCache]
+  );
+
+  const areSomeItemsMissing = ids.length > items.length;
+
+  return { handleLoadItems, areItemsLoading, areSomeItemsMissing, items };
+};
+
+export default function ReferenceSearch(props) {
+  const ids = useMemo(
+    () =>
+      props.value
+        ? props.isMulti
+          ? props.value?.map(({ id }) => id)
+          : [props.value?.id]
+        : [],
+    [props.value, props.isMulti]
+  );
+
+  const { items, areItemsLoading, areSomeItemsMissing, handleLoadItems } =
+    useReferenceSearchItems({
+      loadItemsBySearchTerm: props.loadItemsBySearchTerm,
+      loadItemsByIds: props.loadItemsByIds,
+      ids,
+    });
+
+  if (areItemsLoading) return null;
+
+  const value = props.isMulti ? items : items?.[0];
+
+  const tooltipTitle =
+    value || props.value
+      ? props.mapItemToOption(value || props.value).label
+      : '';
+
+  return (
+    <div className={styles.container}>
+      {areSomeItemsMissing && (
+        <div className={styles['missing-label']}>
+          {props.referenceIsMissingLabel}
+        </div>
+      )}
+      <CustomFieldTooltip title={tooltipTitle}>
+        <Autocomplete
+          id={props.id}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          hasError={props.hasError}
+          value={value || props.value || null}
+          noResultsLabel={props.noResultsLabel}
+          placeholderLabel={props.placeholderLabel}
+          searchPromptLabel={props.searchPromptLabel}
+          loadItems={handleLoadItems}
+          mapItemToOption={props.mapItemToOption}
+          components={props.components}
+          filterOption={props.filterOption}
+          isReadOnly={props.isReadOnly}
+          disabled={props.isDisabled}
+          isClearable={props.isClearable}
+          isMulti={props.isMulti}
+        />
+      </CustomFieldTooltip>
+    </div>
+  );
+}
+ReferenceSearch.propTypes = {
+  id: PropTypes.string.isRequired,
+  components: PropTypes.object,
+  hasError: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isMulti: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+      })
+    ),
+  ]),
+  placeholderLabel: PropTypes.string.isRequired,
+  searchPromptLabel: PropTypes.string.isRequired,
+  noResultsLabel: PropTypes.string.isRequired,
+  referenceIsMissingLabel: PropTypes.string.isRequired,
+  mapItemToOption: PropTypes.func.isRequired,
+  loadItemsBySearchTerm: PropTypes.func.isRequired,
+  loadItemsByIds: PropTypes.func.isRequired,
+  filterOption: PropTypes.func.isRequired,
+};

package/src/components/attribute-definitions/reference-search/reference-search.module.css

@@ -0,0 +1,13 @@
+.container {
+  width: 100%;
+}
+
+.container > div {
+  width: 100%;
+}
+
+.missing-label {
+  color: var(--color-warning);
+  font-size: 0.9rem;
+  margin-left: var(--spacing-xs);
+}

package/src/components/business-unit-select-field/business-unit-select-field.jsx

@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types';
+import requiredIf from 'react-required-if';
+import { SELECT_DROPDOWN_OPTION_TYPES } from '@commercetools-uikit/select-utils';
+import {
+  Spacings,
+  Constraints,
+  FieldLabel,
+} from '@commercetools-frontend/ui-kit';
+import {
+  filterDataAttributes,
+  filterAriaAttributes,
+} from '@commercetools-uikit/utils';
+import {
+  LOWER_BUSINESS_UNITS_LIMIT,
+  UPPER_BUSINESS_UNITS_LIMIT,
+} from '../business-unit-select-input/constants';
+import BusinessUnitSelectInput from '../business-unit-select-input';
+
+const BusinessUnitSelectField = (props) => {
+  return (
+    <Constraints.Horizontal max={props.horizontalConstraint}>
+      <Spacings.Stack scale="xs">
+        <FieldLabel
+          title={props.title}
+          hint={props.hint}
+          description={props.description}
+          hintIcon={props.hintIcon}
+          htmlFor={props.id}
+          hasRequiredIndicator={props.isRequired}
+          isBold={props.isBold}
+        />
+        <BusinessUnitSelectInput
+          id={props.id}
+          name={props.name}
+          horizontalConstraint={props.horizontalConstraint}
+          value={props.value}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadOnly}
+          isClearable={props.isClearable}
+          isSearchable={props.isSearchable}
+          backspaceRemovesValue={props.backspaceRemovesValue}
+          hasError={props.hasError}
+          hasWarning={props.hasWarning}
+          errors={props.errors}
+          renderError={props.renderError}
+          touched={props.touched}
+          title={props.title}
+          maxMenuHeight={props.maxMenuHeight}
+          menuPortalTarget={props.menuPortalTarget}
+          menuPortalZIndex={props.menuPortalZIndex}
+          optionType={props.optionType}
+          renderSelectInputOptionValuesByField={
+            props.renderSelectInputOptionValuesByField
+          }
+          lowerBusinessUnitsLimit={props.lowerBusinessUnitsLimit}
+          upperBusinessUnitsLimit={props.upperBusinessUnitsLimit}
+          {...filterDataAttributes(props)}
+          {...filterAriaAttributes(props)}
+          where={props.where}
+          placeholder={props.placeholder}
+        />
+      </Spacings.Stack>
+    </Constraints.Horizontal>
+  );
+};
+
+BusinessUnitSelectField.displayName = 'BusinessUnitSelectField';
+BusinessUnitSelectField.defaultProps = {
+  lowerBusinessUnitsLimit: LOWER_BUSINESS_UNITS_LIMIT,
+  upperBusinessUnitsLimit: UPPER_BUSINESS_UNITS_LIMIT,
+  mappedValueField: 'id',
+};
+BusinessUnitSelectField.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  hint: requiredIf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    (props) => props.hintIcon
+  ),
+  hintIcon: PropTypes.node,
+  horizontalConstraint: PropTypes.oneOf([
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16,
+    'scale',
+    'auto',
+  ]),
+  isBold: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  // value => business unit or list of business units currently available on the input (might have changes as well)
+  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']),
+  optionType: PropTypes.oneOf(Object.values(SELECT_DROPDOWN_OPTION_TYPES)),
+  touched: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.arrayOf(PropTypes.bool),
+  ]),
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  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,
+  lowerBusinessUnitsLimit: PropTypes.number,
+  upperBusinessUnitsLimit: PropTypes.number,
+  where: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+export default BusinessUnitSelectField;

package/src/components/business-unit-select-field/index.js

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

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

@@ -0,0 +1,160 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import {
+  CustomSelectInputOption,
+  SELECT_DROPDOWN_OPTION_TYPES,
+} from '@commercetools-uikit/select-utils';
+import { SelectInput } from '@commercetools-frontend/ui-kit';
+import {
+  filterDataAttributes,
+  filterAriaAttributes,
+} from '@commercetools-uikit/utils';
+import { CenteredLoadingSpinner } from '../../internal-index';
+import BusinessUnitAsyncSelectInput from './components/business-unit-async-select-input';
+import BusinessUnitBasicSelectInput from './components/business-unit-basic-select-input';
+import BusinessUnitSearchSelectInput from './components/business-unit-search-select-input';
+import {
+  LOWER_BUSINESS_UNITS_LIMIT,
+  UPPER_BUSINESS_UNITS_LIMIT,
+} from './constants';
+import { useTotalNumberOfBusinessUnitsFetcher } from './hooks';
+
+const BusinessUnitSelectInput = (props) => {
+  const totalNumberOfBusinessUnitsFetcher =
+    useTotalNumberOfBusinessUnitsFetcher();
+  const components = useMemo(() => {
+    return {
+      // eslint-disable-next-line react/display-name
+      Option: (optionInnerProps) => {
+        if (optionInnerProps.isDisabled) {
+          return <SelectInput.Option {...optionInnerProps} />;
+        }
+
+        return (
+          <CustomSelectInputOption
+            optionType={props.optionType}
+            optionInnerProps={optionInnerProps}
+          />
+        );
+      },
+    };
+  }, [props.optionType]);
+  if (totalNumberOfBusinessUnitsFetcher.isLoading)
+    return <CenteredLoadingSpinner />;
+
+  const CustomSelectInput = do {
+    if (
+      totalNumberOfBusinessUnitsFetcher.total <= props.lowerBusinessUnitsLimit
+    ) {
+      BusinessUnitBasicSelectInput;
+    } else if (
+      totalNumberOfBusinessUnitsFetcher.total <= props.upperBusinessUnitsLimit
+    ) {
+      BusinessUnitAsyncSelectInput;
+    } else {
+      BusinessUnitSearchSelectInput;
+    }
+  };
+
+  return (
+    <CustomSelectInput
+      id={props.id}
+      name={props.name}
+      components={components}
+      horizontalConstraint={props.horizontalConstraint}
+      value={props.value}
+      onChange={props.onChange}
+      onBlur={props.onBlur}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+      isClearable={props.isClearable}
+      isSearchable={props.isSearchable}
+      backspaceRemovesValue={props.backspaceRemovesValue}
+      hasError={props.hasError}
+      hasWarning={props.hasWarning}
+      errors={props.errors}
+      renderError={props.renderError}
+      touched={props.touched}
+      title={props.title}
+      maxMenuHeight={props.maxMenuHeight}
+      menuPortalTarget={props.menuPortalTarget}
+      menuPortalZIndex={props.menuPortalZIndex}
+      renderSelectInputOptionValuesByField={
+        props.renderSelectInputOptionValuesByField
+      }
+      lowerBusinessUnitsLimit={props.lowerBusinessUnitsLimit}
+      upperBusinessUnitsLimit={props.upperBusinessUnitsLimit}
+      where={props.where}
+      placeholder={props.placeholder}
+      {...filterDataAttributes(props)}
+      {...filterAriaAttributes(props)}
+    />
+  );
+};
+
+BusinessUnitSelectInput.displayName = 'BusinessUnitSelectInput';
+BusinessUnitSelectInput.defaultProps = {
+  lowerBusinessUnitsLimit: LOWER_BUSINESS_UNITS_LIMIT,
+  upperBusinessUnitsLimit: UPPER_BUSINESS_UNITS_LIMIT,
+  renderSelectInputOptionValuesByField: 'id',
+  optionType: 'double-property',
+};
+BusinessUnitSelectInput.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 => business unit or list of business units currently available on the input (might have changes as well)
+  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']),
+  optionType: PropTypes.oneOf(Object.values(SELECT_DROPDOWN_OPTION_TYPES)),
+  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,
+  lowerBusinessUnitsLimit: PropTypes.number,
+  upperBusinessUnitsLimit: PropTypes.number,
+  where: PropTypes.string,
+  placeholder: PropTypes.string,
+  title: PropTypes.node,
+};
+
+export default BusinessUnitSelectInput;