@commercetools-frontend/experimental-components 0.0.2

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@commercetools-frontend/experimental-components",
+  "version": "0.0.2",
+  "description": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/commercetools-frontend-experimental-components.cjs.js",
+  "module": "dist/commercetools-frontend-experimental-components.esm.js",
+  "dependencies": {
+    "@apollo/client": "3.7.1",
+    "@babel/runtime": "^7.19.0",
+    "@babel/runtime-corejs3": "^7.19.0",
+    "@commercetools-frontend/actions-global": "21.20.4",
+    "@commercetools-frontend/application-components": "21.20.4",
+    "@commercetools-frontend/application-shell": "21.20.4",
+    "@commercetools-frontend/application-shell-connectors": "21.20.4",
+    "@commercetools-frontend/constants": "21.20.4",
+    "@commercetools-frontend/l10n": "21.20.4",
+    "@commercetools-frontend/sdk": "21.20.4",
+    "@commercetools-frontend/sentry": "21.20.4",
+    "@commercetools-frontend/ui-kit": "15.6.0",
+    "@commercetools-uikit/select-utils": "15.6.0",
+    "@commercetools-uikit/utils": "15.6.0",
+    "@emotion/react": "11.10.5",
+    "classnames": "2.3.2",
+    "cleave.js": "1.5.10",
+    "common-tags": "1.8.2",
+    "debounce-promise": "3.1.2",
+    "fast-equals": "4.0.3",
+    "formik": "2.2.9",
+    "hoist-non-react-statics": "3.3.2",
+    "is-touch-device": "1.0.1",
+    "lodash.camelcase": "4.3.0",
+    "lodash.compact": "3.0.1",
+    "lodash.flatmap": "4.5.0",
+    "lodash.flatten": "4.4.0",
+    "lodash.flowright": "3.5.0",
+    "lodash.get": "4.4.2",
+    "lodash.has": "4.5.2",
+    "lodash.isempty": "4.4.0",
+    "lodash.isfinite": "3.3.2",
+    "lodash.isnil": "4.0.0",
+    "lodash.isundefined": "3.0.1",
+    "lodash.keyby": "4.6.0",
+    "lodash.merge": "4.6.2",
+    "lodash.omit": "4.5.0",
+    "lodash.omitby": "4.6.0",
+    "lodash.pick": "4.4.0",
+    "lodash.set": "4.3.2",
+    "lodash.sortby": "4.7.0",
+    "lodash.times": "4.3.2",
+    "lodash.uniqby": "4.7.0",
+    "memoize-one": "6.0.0",
+    "moment": "2.29.4",
+    "moment-timezone": "0.5.39",
+    "msw": "^0.49.0",
+    "omit-deep": "0.3.0",
+    "omit-empty-es": "1.1.3",
+    "prop-types": "15.8.1",
+    "react": "17.0.2",
+    "react-intl": "5.25.1",
+    "react-modal": "3.16.1",
+    "react-redux": "7.2.9",
+    "react-required-if": "1.0.3",
+    "react-router-dom": "5.3.4",
+    "react-textarea-autosize": "8.4.0",
+    "reselect": "4.1.7",
+    "tiny-invariant": "1.3.1",
+    "tiny-warning": "1.0.3",
+    "uuid": "8.3.2"
+  },
+  "devDependencies": {
+    "@commercetools-local/test-data": "workspace:*",
+    "@commercetools-local/test-utils": "workspace:*",
+    "@commercetools-test-data/channel": "4.1.1",
+    "@commercetools-test-data/commons": "4.1.1",
+    "@commercetools-test-data/core": "4.1.1",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "8.0.1",
+    "enzyme": "3.11.0",
+    "graphql-tag": "2.12.6",
+    "msw": "0.49.1",
+    "react-test-renderer": "17.0.2",
+    "xhr-mock": "2.5.1"
+  }
+}

package/src/actions/reference-search/cart-discount/cart-discount.ctp.graphql

@@ -0,0 +1,29 @@
+query SearchCartDiscount($where: String) {
+  cartDiscounts(limit: 500, where: $where) {
+    total
+    results {
+      id
+      key
+      nameAllLocales {
+        locale
+        value
+      }
+    }
+  }
+}
+
+query CartDiscountsCount {
+  cartDiscounts {
+    total
+  }
+}
+
+query FetchCartDiscountById($cartDiscountId: String!) {
+  cartDiscount(id: $cartDiscountId) {
+    id
+    nameAllLocales {
+      locale
+      value
+    }
+  }
+}

package/src/actions/reference-search/cart-discount/cart-discount.js

@@ -0,0 +1,69 @@
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import {
+  transformLocalizedFieldsForCartDiscount,
+  isUUID,
+} from '../../../internal-index';
+
+import {
+  SearchCartDiscount,
+  FetchCartDiscountById,
+} from './cart-discount.ctp.graphql';
+
+const transformCartDiscountResponse = (response) =>
+  (response.data?.cartDiscounts.results || []).map((cartDiscount) =>
+    transformLocalizedFieldsForCartDiscount(cartDiscount)
+  );
+
+export function queryCartDiscounts(apolloClient) {
+  return apolloClient
+    .query({
+      query: SearchCartDiscount,
+      context: {
+        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      },
+      fetchPolicy: 'network-only',
+    })
+    .then(transformCartDiscountResponse);
+}
+
+const getWhereClause = (searchText = '', language) => {
+  const query = JSON.stringify(searchText).trim();
+  const idQuery = isUUID(searchText) && `id = ${query}`;
+  const nameQuery = `name(${language} = ${query})`;
+  const keyQuery = `key = ${query}`;
+
+  return [idQuery, nameQuery, keyQuery].filter(Boolean).join(' or ');
+};
+
+export function searchCartDiscountsByExactMatch(apolloClient, options) {
+  return apolloClient
+    .query({
+      query: SearchCartDiscount,
+      variables: {
+        where: getWhereClause(options.searchText, options.language),
+      },
+      context: {
+        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      },
+      fetchPolicy: 'network-only',
+    })
+    .then(transformCartDiscountResponse);
+}
+
+export function getCartDiscountById(apolloClient, options) {
+  return apolloClient
+    .query({
+      query: FetchCartDiscountById,
+      variables: {
+        cartDiscountId: options.id,
+      },
+      context: {
+        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      },
+    })
+    .then((response) =>
+      response.data?.cartDiscount
+        ? transformLocalizedFieldsForCartDiscount(response.data.cartDiscount)
+        : null
+    );
+}

package/src/actions/reference-search/cart-discount/cart-discount.spec.js

@@ -0,0 +1,115 @@
+import { queryCartDiscounts, getCartDiscountById } from './cart-discount';
+
+const createCartDiscountsResponse = () => [
+  {
+    id: 'cd_01',
+    nameAllLocales: [
+      {
+        locale: 'en',
+        value: 'something_01',
+      },
+    ],
+    key: 'something-01',
+  },
+  {
+    id: 'cd_02',
+    nameAllLocales: [
+      {
+        locale: 'en',
+        value: 'something_02',
+      },
+    ],
+  },
+  {
+    id: 'cd_03',
+    nameAllLocales: [
+      {
+        locale: 'en',
+        value: 'something_03',
+      },
+    ],
+  },
+];
+
+describe('queryCartDiscounts', () => {
+  let response;
+  let apolloClient;
+  let result;
+  beforeEach(async () => {
+    response = {
+      data: {
+        cartDiscounts: {
+          results: createCartDiscountsResponse(),
+        },
+      },
+    };
+    apolloClient = {
+      query: jest.fn(() => Promise.resolve(response)),
+    };
+    result = queryCartDiscounts(apolloClient, {
+      searchText: 'something',
+      language: 'en',
+    });
+    await result;
+  });
+  it('should fetch cartDiscounts', async () => {
+    await expect(result).resolves.toEqual([
+      {
+        id: 'cd_01',
+        name: {
+          en: 'something_01',
+        },
+        key: 'something-01',
+      },
+      {
+        id: 'cd_02',
+        name: {
+          en: 'something_02',
+        },
+      },
+      {
+        id: 'cd_03',
+        name: {
+          en: 'something_03',
+        },
+      },
+    ]);
+  });
+});
+
+describe('getCartDiscountById', () => {
+  let cartDiscount;
+  let apolloClient;
+  let result;
+  beforeEach(async () => {
+    cartDiscount = {
+      id: 'cd_01',
+      nameAllLocales: [
+        {
+          locale: 'en',
+          value: 'something_01',
+        },
+      ],
+    };
+    const response = {
+      data: {
+        cartDiscount,
+      },
+    };
+    apolloClient = {
+      query: jest.fn(() => Promise.resolve(response)),
+    };
+    result = getCartDiscountById(apolloClient, {
+      cartDiscountId: 'cd_01',
+    });
+    await result;
+  });
+  it('should return cartDiscount', async () => {
+    await expect(result).resolves.toEqual({
+      id: 'cd_01',
+      name: {
+        en: 'something_01',
+      },
+    });
+  });
+});

package/src/actions/reference-search/cart-discount/index.js

@@ -0,0 +1 @@
+export * from './cart-discount';

package/src/actions/reference-search/category/category.ctp.graphql

@@ -0,0 +1,44 @@
+query SearchCategoryReference($locale: Locale!, $text: String!) {
+  categories: categoryAutocomplete(locale: $locale, text: $text) {
+    results {
+      ...CategorySearchPickerOptionFragment
+    }
+  }
+}
+
+query FetchCategoriesByIds($where: String!) {
+  categories(where: $where) {
+    results {
+      id
+      nameAllLocales {
+        locale
+        value
+      }
+    }
+  }
+}
+
+fragment CategorySearchPickerOptionFragment on CategorySearch {
+  id
+  externalId
+  nameAllLocales {
+    locale
+    value
+  }
+  slugAllLocales {
+    locale
+    value
+  }
+  parent {
+    nameAllLocales {
+      locale
+      value
+    }
+  }
+  ancestors {
+    nameAllLocales {
+      locale
+      value
+    }
+  }
+}

package/src/actions/reference-search/category/category.js

@@ -0,0 +1,50 @@
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { transformLocalizedFieldsForCategory } from '../../../internal-index';
+import {
+  SearchCategoryReference,
+  FetchCategoriesByIds,
+} from './category.ctp.graphql';
+
+export function searchCategories(apolloClient, options) {
+  return apolloClient
+    .query({
+      query: SearchCategoryReference,
+      variables: {
+        locale: options.language,
+        text: options.searchText,
+      },
+      context: {
+        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      },
+      fetchPolicy: 'network-only',
+    })
+    .then((response) =>
+      response.data.categories.results.map((category) =>
+        transformLocalizedFieldsForCategory(category, [
+          { from: 'nameAllLocales', to: 'name' },
+          { from: 'slugAllLocales', to: 'slug' },
+        ])
+      )
+    );
+}
+
+export function getCategoriesByIds(apolloClient, options) {
+  return apolloClient
+    .query({
+      query: FetchCategoriesByIds,
+      variables: {
+        where: `id in (${options.ids.map((id) => `"${id}"`).join(', ')})`,
+      },
+      context: {
+        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      },
+    })
+    .then((response) =>
+      response.data.categories.results.map((category) =>
+        transformLocalizedFieldsForCategory(category, [
+          { from: 'nameAllLocales', to: 'name' },
+          { from: 'slugAllLocales', to: 'slug' },
+        ])
+      )
+    );
+}

package/src/actions/reference-search/category/category.spec.js

@@ -0,0 +1,82 @@
+import { searchCategories, getCategoriesByIds } from './category';
+
+const createCategoriesResponse = () => [
+  { id: 'cat_01', nameAllLocales: [{ locale: 'en', value: 'something_01' }] },
+  { id: 'cat_02', nameAllLocales: [{ locale: 'en', value: 'something_02' }] },
+  { id: 'cat_03', nameAllLocales: [{ locale: 'en', value: 'something_03' }] },
+];
+
+describe('searchCategories', () => {
+  let response;
+  let apolloClient;
+  let result;
+  beforeEach(async () => {
+    response = {
+      data: { categories: { results: createCategoriesResponse() } },
+    };
+    apolloClient = { query: jest.fn(() => Promise.resolve(response)) };
+    result = searchCategories(apolloClient, {
+      searchText: 'something',
+      language: 'en',
+    });
+    await result;
+  });
+  it('should fetch categories', async () => {
+    await expect(result).resolves.toEqual([
+      {
+        id: 'cat_01',
+        name: { en: 'something_01' },
+        slug: null,
+      },
+      {
+        id: 'cat_02',
+        name: { en: 'something_02' },
+        slug: null,
+      },
+      {
+        id: 'cat_03',
+        name: { en: 'something_03' },
+        slug: null,
+      },
+    ]);
+  });
+});
+
+describe('getCategoriesByIds', () => {
+  let categories;
+  let apolloClient;
+  let result;
+  beforeEach(async () => {
+    categories = {
+      results: [
+        {
+          id: 'cat_01',
+          nameAllLocales: [{ locale: 'en', value: 'something_01' }],
+        },
+        {
+          id: 'cat_02',
+          nameAllLocales: [{ locale: 'en', value: 'something_02' }],
+        },
+      ],
+    };
+    const response = { data: { categories } };
+    apolloClient = { query: jest.fn(() => Promise.resolve(response)) };
+    result = getCategoriesByIds(apolloClient, { ids: ['cat_01', 'cat_02'] });
+    await result;
+  });
+
+  it('should return categories', async () => {
+    await expect(result).resolves.toEqual([
+      {
+        id: 'cat_01',
+        name: { en: 'something_01' },
+        slug: null,
+      },
+      {
+        id: 'cat_02',
+        name: { en: 'something_02' },
+        slug: null,
+      },
+    ]);
+  });
+});

package/src/actions/reference-search/category/index.js

@@ -0,0 +1 @@
+export * from './category';

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

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import { useApolloClient } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
+import { LoadingSpinner, Constraints } from '@commercetools-frontend/ui-kit';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { QUERY_MAX_LIMIT } from '../../../../constants';
+import {
+  getCartDiscountById,
+  queryCartDiscounts,
+  searchCartDiscountsByExactMatch,
+} from '../../../../actions/reference-search/cart-discount';
+import { CartDiscountsCount } from '../../../../actions/reference-search/cart-discount/cart-discount.ctp.graphql';
+import { useCallback } from 'react';
+import { formatLocalizedString } from '@commercetools-frontend/l10n';
+import { useIntl } from 'react-intl';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import ReferenceSearch from '../reference-search';
+import messages from './messages';
+import Option from './option';
+
+const returnNullIfEmpty = (value) => (value && value.id === '' ? null : value);
+
+const filterOption = (option, text) =>
+  option.label.toLocaleLowerCase().includes(text.toLowerCase()) ||
+  option.value === text ||
+  option.data.key === text;
+
+export default function CartDiscountReferenceSearch(props) {
+  const { loading, data } = useQuery(CartDiscountsCount, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+    fetchPolicy: 'network-only',
+  });
+
+  const isExactMatch = data?.cartDiscounts.total > QUERY_MAX_LIMIT;
+
+  const { formatMessage } = useIntl();
+
+  const apolloClient = useApolloClient();
+
+  const { language, languages } = useApplicationContext(
+    (applicationContext) => ({
+      language: applicationContext.dataLocale,
+      languages: applicationContext.project.languages,
+    })
+  );
+
+  const mapItemToOption = useCallback(
+    (cartDiscount) => ({
+      ...cartDiscount,
+      value: cartDiscount.id,
+      key: cartDiscount.key,
+      label: formatLocalizedString(cartDiscount, {
+        key: 'name',
+        locale: language,
+        fallback: cartDiscount.id,
+        fallbackOrder: languages,
+      }),
+    }),
+    [languages, language]
+  );
+
+  const loadItemsBySearchTerm = useCallback(
+    (searchText) => {
+      const searchItemsHandler = isExactMatch
+        ? searchCartDiscountsByExactMatch
+        : queryCartDiscounts;
+      return searchItemsHandler(apolloClient, { searchText, language });
+    },
+    [apolloClient, language, isExactMatch]
+  );
+
+  // Underlying <ReferenceSearch /> supports multi-selection and hence
+  // uses `loadItemsByIds` where `ids` is an array of item ids to be loaded.
+  // We don't need <CartDiscountReferenceSearch /> to support multi-selection at
+  // the moment. That why mapping to array and back is implemented here.
+  const loadItemsByIds = useCallback(
+    (ids) =>
+      getCartDiscountById(apolloClient, { id: ids[0] }).then((cartDiscount) =>
+        cartDiscount ? [cartDiscount] : []
+      ),
+    [apolloClient]
+  );
+
+  if (loading)
+    return (
+      <div data-testid="loading-spinner">
+        <LoadingSpinner />
+      </div>
+    );
+
+  return (
+    <Constraints.Horizontal
+      max="scale"
+      data-testid={isExactMatch ? 'reference-by-id' : 'reference-by-name'}
+    >
+      <ReferenceSearch
+        id={props.id}
+        components={{ Option }}
+        isClearable={props.isClearable}
+        isDisabled={props.isDisabled}
+        hasError={props.hasError}
+        onBlur={props.onBlur}
+        onChange={props.onChange}
+        value={returnNullIfEmpty(props.value)}
+        placeholderLabel={formatMessage(messages.placeholder)}
+        searchPromptLabel={formatMessage(messages.searchPrompt)}
+        noResultsLabel={formatMessage(messages.noResults)}
+        referenceIsMissingLabel={formatMessage(messages.isMissing)}
+        mapItemToOption={mapItemToOption}
+        loadItemsBySearchTerm={loadItemsBySearchTerm}
+        loadItemsByIds={loadItemsByIds}
+        filterOption={filterOption}
+      />
+    </Constraints.Horizontal>
+  );
+}
+
+CartDiscountReferenceSearch.propTypes = {
+  id: PropTypes.string.isRequired,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  hasError: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }),
+  ]),
+};