@commercetools-frontend/experimental-components 0.0.2

package/src/components/store-select-input/components/stores-search-select-input/stores-search-select-input.jsx

@@ -0,0 +1,261 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useApolloClient } from '@apollo/client';
+import debounce from 'debounce-promise';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+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 { FetchStoresByWherePredicate } from './fetch-stores-by-where-predicate.ctp.graphql';
+import { useStoresByFieldFetcher } from '../../hooks';
+import { mapStoresToOptions } from '../../utils';
+import messages from '../../messages';
+
+// check wether there are any errors
+const hasErrors = (errors) => errors && Object.values(errors).some(Boolean);
+
+const createQueryVariables = ({
+  searchText,
+  dataLocale,
+  allAccessibleStoreKeysThroughDataFencePermissions,
+  shouldFetchProductSelections,
+}) => {
+  const sanitizedSearchText = sanitize(searchText.trim(searchText));
+  const keyQuery = `key = "${sanitizedSearchText}"`;
+
+  // if the user has data fence permissions then we only allow stores to fetched that user has access to
+  if (allAccessibleStoreKeysThroughDataFencePermissions?.length) {
+    // if the current search term match the accessible stores keys, then proceed with fetching the store
+    if (
+      allAccessibleStoreKeysThroughDataFencePermissions.includes(
+        sanitizedSearchText
+      )
+    ) {
+      return {
+        skipFetchingStores: false,
+        where: keyQuery,
+        excludeProductSelections: !shouldFetchProductSelections,
+      };
+    }
+    // if the current search term does not matched the accessible stores keys, then skip fetching stores
+    return {
+      where: '',
+      skipFetchingStores: true,
+      excludeProductSelections: !shouldFetchProductSelections,
+    };
+  }
+  const idQuery =
+    isUUID(sanitizedSearchText) && `id = "${sanitizedSearchText}"`;
+  const nameQuery = `name(${dataLocale} = "${sanitizedSearchText}")`;
+  const searchTextQuery = [idQuery, nameQuery, keyQuery]
+    .filter(Boolean)
+    .join(' or ');
+  return {
+    skipFetchingStores: false,
+    where: searchTextQuery,
+    excludeProductSelections: !shouldFetchProductSelections,
+  };
+};
+
+const getValueFromOptions = ({
+  isMulti,
+  value,
+  dataLocale,
+  storesByFieldFetcher,
+  renderSelectInputOptionValuesByField,
+}) => {
+  if (!value) {
+    return undefined;
+  }
+  const selectedOptions = storesByFieldFetcher.stores?.results.map((store) =>
+    mapStoresToOptions({
+      store,
+      dataLocale,
+      renderSelectInputOptionValuesByField:
+        renderSelectInputOptionValuesByField,
+    })
+  );
+  if (isMulti) {
+    return selectedOptions;
+  }
+  // if the input is not multiselect, the AsyncSearchSelect is expecting an object rather than array
+  if (!isMulti) {
+    return selectedOptions[0];
+  }
+};
+
+const StoresSearchSelectInput = (props) => {
+  // hooks
+  const { dataLocale } = useApplicationContext((applicationContext) => ({
+    dataLocale: applicationContext.dataLocale,
+  }));
+  const intl = useIntl();
+  const client = useApolloClient();
+  const storesByFieldFetcher = useStoresByFieldFetcher(
+    props.value,
+    props.renderSelectInputOptionValuesByField,
+    props.projectKey,
+    props.shouldFetchProductSelections
+  );
+  const hasError =
+    AsyncSelectInput.isTouched(props.touched) && hasErrors(props.errors);
+
+  const handleLoadOptions = (searchText) => {
+    const extractMatchedStores = client
+      .query({
+        query: FetchStoresByWherePredicate,
+        variables: createQueryVariables({
+          searchText,
+          dataLocale,
+          allAccessibleStoreKeysThroughDataFencePermissions:
+            props.allAccessibleStoreKeysThroughDataFencePermissions,
+          shouldFetchProductSelections: props.shouldFetchProductSelections,
+        }),
+        context: {
+          target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+          projectKey: props.projectKey,
+        },
+        fetchPolicy: 'network-only',
+      })
+      .then(({ data }) =>
+        data.storesByWherePredicate?.results.map((store) =>
+          mapStoresToOptions({
+            store,
+            dataLocale,
+            renderSelectInputOptionValuesByField:
+              props.renderSelectInputOptionValuesByField,
+          })
+        )
+      );
+    return extractMatchedStores;
+  };
+  const loadOptionsDebounced = debounce(handleLoadOptions, 500);
+
+  if (storesByFieldFetcher.isLoading) return <CenteredLoadingSpinner />;
+  return (
+    <>
+      <SearchSelectInput
+        id={props.id}
+        name={props.name}
+        placeholder={intl.formatMessage(messages.searchSelectInputPlaceholder)}
+        horizontalConstraint={props.horizontalConstraint}
+        loadOptions={loadOptionsDebounced}
+        defaultOptions={false}
+        isMulti={props.isMulti}
+        value={getValueFromOptions({
+          isMulti: props.isMulti,
+          value: props.value,
+          dataLocale,
+          storesByFieldFetcher,
+          renderSelectInputOptionValuesByField:
+            props.renderSelectInputOptionValuesByField,
+        })}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        loadingMessage={intl.formatMessage(
+          messages.searchSelectInputLoadingMessage
+        )}
+        noOptionsMessage={() =>
+          intl.formatMessage(messages.searchSelectInputNoOptionsFoundMessage)
+        }
+        isDisabled={props.isDisabled || storesByFieldFetcher.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}
+      />
+    </>
+  );
+};
+
+StoresSearchSelectInput.displayName = 'StoresSearchSelectInput';
+StoresSearchSelectInput.defaultProps = {
+  shouldFetchProductSelections: false,
+};
+StoresSearchSelectInput.propTypes = {
+  projectKey: PropTypes.string.isRequired,
+  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',
+  ]),
+  isMulti: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  // value => store or list of stores currently available on the input (might have changes as well)
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(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),
+  // list of store keys that user has access through data fence permissions
+  allAccessibleStoreKeysThroughDataFencePermissions: PropTypes.arrayOf(
+    PropTypes.string
+  ),
+  shouldFetchProductSelections: PropTypes.bool,
+};
+
+export default StoresSearchSelectInput;

package/src/components/store-select-input/constants.js

@@ -0,0 +1,2 @@
+export const LOWER_STORES_LIMIT = 60;
+export const UPPER_STORES_LIMIT = 500;

package/src/components/store-select-input/hooks/index.js

@@ -0,0 +1,4 @@
+export { default as useTotalNumberOfStoresFetcher } from './use-total-number-of-stores-fetcher';
+export { default as useStoresByFieldFetcher } from './use-stores-by-field-fetcher';
+export { useTotalNumberOfStoresFetcherHandlers } from './use-total-number-of-stores-fetcher';
+export { useStoreByFieldFetcherHandlers } from './use-stores-by-field-fetcher';

package/src/components/store-select-input/hooks/use-stores-by-field-fetcher/fetch-stores-by-field.ctp.graphql

@@ -0,0 +1,22 @@
+query FetchStoresByField($where: String!, $excludeProductSelections: Boolean!) {
+  storesByField: stores(where: $where) {
+    results {
+      id
+      key
+      nameAllLocales {
+        locale
+        value
+      }
+      productSelections @skip(if: $excludeProductSelections) {
+        active
+        productSelection {
+          id
+          nameAllLocales {
+            locale
+            value
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/store-select-input/hooks/use-stores-by-field-fetcher/index.js

@@ -0,0 +1,2 @@
+export { default } from './use-stores-by-field-fetcher';
+export { handlers as useStoreByFieldFetcherHandlers } from './mocks';

package/src/components/store-select-input/hooks/use-stores-by-field-fetcher/mocks/handlers.js

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

package/src/components/store-select-input/hooks/use-stores-by-field-fetcher/mocks/index.js

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

package/src/components/store-select-input/hooks/use-stores-by-field-fetcher/use-stores-by-field-fetcher.js

@@ -0,0 +1,47 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { FetchStoresByField } from './fetch-stores-by-field.ctp.graphql';
+
+const createQueryVariables = (
+  stores,
+  predicateField,
+  shouldFetchProductSelections
+) => ({
+  where: `${predicateField} in (${stores
+    .map((store) => `"${store}"`)
+    .join(', ')})`,
+  limit: 500,
+  excludeProductSelections: !shouldFetchProductSelections,
+});
+
+const emptyStoresQueryResult = {
+  results: [],
+};
+
+const useStoresByFieldFetcher = (
+  stores,
+  predicateField,
+  projectKey,
+  shouldFetchProductSelections = false
+) => {
+  // incase of single select input stores are sent as single string literal
+  const storesList = Array.isArray(stores) ? stores : [stores];
+  const storesQuery = useQuery(FetchStoresByField, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      projectKey,
+    },
+    variables: createQueryVariables(
+      storesList,
+      predicateField,
+      shouldFetchProductSelections
+    ),
+    skip: storesList.length === 0,
+  });
+
+  return {
+    stores: storesQuery.data?.storesByField || emptyStoresQueryResult,
+    isLoading: storesQuery.loading,
+  };
+};
+export default useStoresByFieldFetcher;

package/src/components/store-select-input/hooks/use-total-number-of-stores-fetcher/index.js

@@ -0,0 +1,2 @@
+export { default } from './use-total-number-of-stores-fetcher';
+export { handlers as useTotalNumberOfStoresFetcherHandlers } from './mocks';

package/src/components/store-select-input/hooks/use-total-number-of-stores-fetcher/mocks/handlers.js

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

package/src/components/store-select-input/hooks/use-total-number-of-stores-fetcher/mocks/index.js

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

package/src/components/store-select-input/hooks/use-total-number-of-stores-fetcher/total-number-of-stores.ctp.graphql

@@ -0,0 +1,5 @@
+query TotalNumberOfStores {
+  totalNumberOfStores: stores {
+    total
+  }
+}

package/src/components/store-select-input/hooks/use-total-number-of-stores-fetcher/use-total-number-of-stores-fetcher.js

@@ -0,0 +1,20 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { TotalNumberOfStores } from './total-number-of-stores.ctp.graphql';
+
+const useTotalNumberOfStoresFetcher = (projectKey) => {
+  const totalNumberOfStoresQuery = useQuery(TotalNumberOfStores, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      projectKey,
+    },
+    fetchPolicy: 'network-only',
+  });
+
+  return {
+    total: totalNumberOfStoresQuery.data?.totalNumberOfStores.total,
+    isLoading: totalNumberOfStoresQuery.loading,
+  };
+};
+
+export default useTotalNumberOfStoresFetcher;

package/src/components/store-select-input/index.js

@@ -0,0 +1,4 @@
+export { default } from './store-select-input';
+export { useTotalNumberOfStoresFetcherHandlers } from './hooks';
+export { useStoreByFieldFetcherHandlers } from './hooks';
+export { useStoresByWherePredicateFetcherHandlers } from './components/stores-search-select-input';

package/src/components/store-select-input/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  basicSelectInputPlaceholder: {
+    id: 'Shared.StoreSelectInput.basicSelectInputPlaceholder',
+    description: 'The placeholder shown for basic select input',
+    defaultMessage: 'Select or type a store key',
+  },
+  asyncSelectInputPlaceholder: {
+    id: 'Shared.StoreSelectInput.asyncSelectInputPlaceholder',
+    description: 'The placeholder shown for async select input',
+    defaultMessage: 'Select or type a store key',
+  },
+  searchSelectInputPlaceholder: {
+    id: 'Shared.StoreSelectInput.searchSelectInputPlaceholder',
+    description: 'The placeholder shown for search select input',
+    defaultMessage: 'Type an exact store key',
+  },
+  searchSelectInputLoadingMessage: {
+    id: 'Shared.StoreSelectInput.searchSelectInputLoadingMessage',
+    description: 'The loading message shown for search select input',
+    defaultMessage: 'Loading exact matches',
+  },
+  searchSelectInputNoOptionsFoundMessage: {
+    id: 'Shared.StoreSelectInput.searchSelectInputNoOptionsFoundMessage',
+    description:
+      'The message shown in search select input when matches are found',
+    defaultMessage: 'No matches found for your search term',
+  },
+  asyncSelectDropdownTypeAheadPrompt: {
+    id: 'Shared.StoreSelectInput.asyncSelectDropdownTypeAheadPrompt',
+    description:
+      'Message shown telling the user to start typing to load more channels',
+    defaultMessage: 'Start typing above to load more',
+  },
+});

package/src/components/store-select-input/store-select-input.jsx

@@ -0,0 +1,163 @@
+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 StoresAsyncSelectInput from './components/stores-async-select-input';
+import StoresBasicSelectInput from './components/stores-basic-select-input';
+import StoresSearchSelectInput from './components/stores-search-select-input';
+import { LOWER_STORES_LIMIT, UPPER_STORES_LIMIT } from './constants';
+import { useTotalNumberOfStoresFetcher } from './hooks';
+
+const StoreSelectInput = (props) => {
+  const totalNumberOfStoresFetcher = useTotalNumberOfStoresFetcher(
+    props.projectKey
+  );
+  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 (totalNumberOfStoresFetcher.isLoading) return <CenteredLoadingSpinner />;
+  const CustomStoreSelectInput = do {
+    // GIVEN total number of available stores <= lowerStoresLimit
+    // THEN render basic SelectField with all available stores as options
+    if (totalNumberOfStoresFetcher.total <= props.lowerStoresLimit)
+      StoresBasicSelectInput;
+    // GIVEN lowerStoresLimit > total number of available stores <= upperStoresLimit
+    // THEN render AsyncSelectField with option list containing only first lowerStoresLimit stores options
+    // AND hinting the user to start typing to load more
+    else if (totalNumberOfStoresFetcher.total <= props.upperStoresLimit)
+      StoresAsyncSelectInput;
+    // GIVEN total number of available stores > 500
+    // THEN render search input to search based on key.
+    else StoresSearchSelectInput;
+  };
+
+  return (
+    <CustomStoreSelectInput
+      projectKey={props.projectKey}
+      id={props.id}
+      name={props.name}
+      components={components}
+      horizontalConstraint={props.horizontalConstraint}
+      isMulti={props.isMulti}
+      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}
+      maxMenuHeight={props.maxMenuHeight}
+      menuPortalTarget={props.menuPortalTarget}
+      menuPortalZIndex={props.menuPortalZIndex}
+      renderSelectInputOptionValuesByField={
+        props.renderSelectInputOptionValuesByField
+      }
+      lowerStoresLimit={props.lowerStoresLimit}
+      upperStoresLimit={props.upperStoresLimit}
+      allAccessibleStoreKeysThroughDataFencePermissions={
+        props.allAccessibleStoreKeysThroughDataFencePermissions
+      }
+      shouldFetchProductSelections={props.shouldFetchProductSelections}
+      {...filterDataAttributes(props)}
+      {...filterAriaAttributes(props)}
+    />
+  );
+};
+
+StoreSelectInput.displayName = 'StoreSelectInput';
+StoreSelectInput.defaultProps = {
+  lowerStoresLimit: LOWER_STORES_LIMIT,
+  upperStoresLimit: UPPER_STORES_LIMIT,
+  renderSelectInputOptionValuesByField: 'id',
+  optionType: 'double-property',
+  shouldFetchProductSelections: false,
+};
+StoreSelectInput.propTypes = {
+  projectKey: PropTypes.string.isRequired,
+  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',
+  ]),
+  isMulti: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  // value => store or list of stores currently available on the input (might have changes as well)
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string.isRequired),
+    PropTypes.arrayOf(PropTypes.object.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,
+  lowerStoresLimit: PropTypes.number,
+  upperStoresLimit: PropTypes.number,
+  // list of store keys that user has access through data fence permissions
+  allAccessibleStoreKeysThroughDataFencePermissions: PropTypes.arrayOf(
+    PropTypes.string
+  ),
+  shouldFetchProductSelections: PropTypes.bool,
+};
+
+export default StoreSelectInput;