@commercetools-frontend/experimental-components 0.0.2

package/src/features/picker/shared/hooks/use-handlers.js

@@ -0,0 +1,42 @@
+import { useCallback, useState } from 'react';
+import { useEventCallback, useTracking } from '../../../../internal-index';
+
+const useHandlers = (onChange, getTrackingEvent) => {
+  const { track } = useTracking();
+  const [inputValue, setInputValue] = useState();
+
+  const handleInputChange = useCallback((changedValue) => {
+    setInputValue(changedValue);
+  }, []);
+
+  const handleChange = useEventCallback(
+    (event) => {
+      const doTrack = () => {
+        const trackingEvent = getTrackingEvent(inputValue, event.target.value);
+        if (trackingEvent) {
+          const { action, category, label } = trackingEvent;
+          track(action, category, label);
+        }
+      };
+
+      if (event.target.value) {
+        doTrack();
+      }
+
+      const eventWithExtractedValue = {
+        ...event,
+        target: {
+          ...event.target,
+          value: event.target.value?.value,
+        },
+      };
+
+      onChange(eventWithExtractedValue);
+    },
+    [onChange, getTrackingEvent, inputValue, track]
+  );
+
+  return [handleInputChange, handleChange];
+};
+
+export default useHandlers;

package/src/features/picker/shared/hooks/use-load-options.js

@@ -0,0 +1,63 @@
+import { useApolloClient } from '@apollo/client';
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants';
+import { getPrefixSearchBounds, isUUID } from '../../../../internal-index';
+
+import { useCallback } from 'react';
+
+const constructPrefixSearchPredicate = (
+  prefixSearchFields = [],
+  lowerBound,
+  upperBound
+) => {
+  const constructPrefixSearchExpression = (field) => {
+    const path = field.split('.');
+    const [finalValueInPath, ...remainPathInReverse] = path.slice().reverse();
+    const comparison = `${finalValueInPath} >= "${lowerBound}" and ${finalValueInPath} < "${upperBound}"`;
+    if (remainPathInReverse.length) {
+      return remainPathInReverse.reduce(
+        (nestedPath, nextPath) => `${nextPath}(${nestedPath})`,
+        comparison
+      );
+    }
+    return comparison;
+  };
+  return prefixSearchFields.map(constructPrefixSearchExpression).join(' or ');
+};
+
+const useLoadOptions = ({ query, variables, prefixSearchFields }) => {
+  const client = useApolloClient();
+
+  const loadOptions = useCallback(
+    (inputValue = '') => {
+      const where = do {
+        if (inputValue.length) {
+          if (isUUID(inputValue)) `id = "${inputValue}"`;
+          else {
+            const [lowerBound, upperBound] = getPrefixSearchBounds(inputValue);
+            constructPrefixSearchPredicate(
+              prefixSearchFields,
+              lowerBound,
+              upperBound
+            );
+          }
+        }
+      };
+      return client.query({
+        query,
+        variables: {
+          where,
+          ...variables,
+        },
+        context: {
+          target: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM,
+        },
+        fetchPolicy: 'network-only',
+      });
+    },
+    [client, query, variables, prefixSearchFields]
+  );
+
+  return loadOptions;
+};
+
+export default useLoadOptions;

package/src/features/picker/shared/hooks/use-load-options.spec.js

@@ -0,0 +1,63 @@
+import { ApolloProvider } from '@apollo/client';
+import { renderHook } from '@testing-library/react-hooks';
+import PropTypes from 'prop-types';
+import { IntlProvider } from 'react-intl';
+import useLoadOptions from './use-load-options';
+
+jest.mock(
+  '@commercetools-frontend/experimental-components/src/hooks/use-format-localized-field-to-string',
+  () => () => jest.fn()
+);
+
+const render = (renderHookCallback, { query = () => Promise.resolve() }) => {
+  const Wrapper = ({ children }) => (
+    <ApolloProvider client={{ query }}>
+      <IntlProvider locale="en">{children}</IntlProvider>
+    </ApolloProvider>
+  );
+  Wrapper.propTypes = {
+    children: PropTypes.element.isRequired,
+  };
+
+  return renderHook(renderHookCallback, {
+    wrapper: Wrapper,
+  });
+};
+
+it('should load options with full text id search', async () => {
+  const query = jest.fn(() => Promise.resolve());
+  const { result } = render(() => useLoadOptions({ query: {} }), {
+    query,
+  });
+  const loadOptions = result.current;
+
+  const id = '085b9ede-9b52-4f08-b848-b868aa6c9880';
+  await loadOptions(id);
+
+  expect(query.mock.calls[0][0].variables.where).toBe(`id = "${id}"`);
+});
+
+it.each`
+  prefixSearchFields                       | inputValue | predicate
+  ${['name.en', 'key']}                    | ${'s'}     | ${'name(en >= "s" and en < "t") or key >= "s" and key < "t"'}
+  ${['masterData.current.name.en', 'key']} | ${'s'}     | ${'masterData(current(name(en >= "s" and en < "t"))) or key >= "s" and key < "t"'}
+  ${['name.en']}                           | ${'s'}     | ${'name(en >= "s" and en < "t")'}
+  ${['key']}                               | ${'s'}     | ${'key >= "s" and key < "t"'}
+  ${[]}                                    | ${'s'}     | ${''}
+`(
+  'should load options with prefix search using $prefixSearchFields search fields',
+  async ({ prefixSearchFields, inputValue, predicate }) => {
+    const query = jest.fn(() => Promise.resolve());
+    const { result } = render(
+      () => useLoadOptions({ query: {}, prefixSearchFields }),
+      {
+        query,
+      }
+    );
+
+    const loadOptions = result.current;
+
+    await loadOptions(inputValue);
+    expect(query.mock.calls[0][0].variables.where).toBe(predicate);
+  }
+);

package/src/features/picker/shared/hooks/use-product-type-options.js

@@ -0,0 +1,190 @@
+import { useCallback } from 'react';
+import { useApolloClient, useQuery } from '@apollo/client/react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import {
+  GRAPHQL_TARGETS,
+  MC_API_PROXY_TARGETS,
+} from '@commercetools-frontend/constants';
+import {
+  actions as sdkActions,
+  useAsyncDispatch,
+} from '@commercetools-frontend/sdk';
+import { FetchIndicesExist } from '../../../pim-indexer/components/pim-indexer-provider/fetch-indices-exist.pim-indexer.graphql';
+import {
+  isUUID,
+  GetProductTypesQuery,
+  getPrefixSearchBounds,
+  setToArray,
+} from '../../../../internal-index';
+
+const useExecuteGraphQLRequest = () => {
+  const apolloClient = useApolloClient();
+  return useCallback(
+    (query, variables, context, fetchPolicy) => {
+      return apolloClient.query({
+        query,
+        variables,
+        context,
+        fetchPolicy,
+      });
+    },
+    [apolloClient]
+  );
+};
+
+const createSearchProductsFromPIMAction = (searchTerm, projectKey) =>
+  sdkActions.post({
+    mcApiProxyTarget: MC_API_PROXY_TARGETS.PIM_SEARCH,
+    uri: `/${projectKey}/search/product-types`,
+    payload: {
+      query: {
+        wildcard: {
+          field: 'name',
+          value: `*${searchTerm}*`,
+          caseInsensitive: true,
+        },
+      },
+      limit: 10,
+      offset: 0,
+    },
+  });
+
+const useFetchProductTypesFromPIM = ({ dataLocale, projectKey }) => {
+  const dispatch = useAsyncDispatch();
+  const executeGraphQLRequest = useExecuteGraphQLRequest();
+  const fetchProductTypesFromPim = useCallback(
+    async (searchTerm) => {
+      const result = await dispatch(
+        createSearchProductsFromPIMAction(searchTerm, projectKey)
+      );
+      const ids = result?.hits?.map((hit) => hit.id) ?? [];
+      // Avoid sending any requests if it's clear that nothing is found
+      if (ids.length === 0) {
+        return {
+          data: { productType: { results: [] } },
+          loading: false,
+        };
+      }
+      const variables = {
+        // ids of recentFilters is a Set so we transform it to array
+        where: setToArray(ids),
+      };
+      return executeGraphQLRequest(GetProductTypesQuery, variables, {
+        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+      });
+    },
+    [dispatch, executeGraphQLRequest, projectKey]
+  );
+
+  return fetchProductTypesFromPim;
+};
+
+/**
+ *
+ * @param reversedPath string[]
+ * e.g [name, current, masterData], which is the reverse path of a Product
+ * @param predicate
+ * predicate expression, e.g `en="Hej"`
+ *
+ * @return nestedExpression string
+ * e.g masterData(current(name(en="Hej")))
+ */
+const constructNestedExpression = (reversedPath, predicate) => {
+  if (reversedPath.length > 0) {
+    return reversedPath.reduce(
+      (nextNestedValue, nestedSelection) =>
+        `${nestedSelection}(${nextNestedValue})`,
+      predicate
+    );
+  }
+  return predicate;
+};
+
+const constructPrefixSearchPredicate = (
+  prefixSearchFields,
+  lowerBound,
+  upperBound
+) => {
+  const constructPrefixSearchExpression = (field) => {
+    const parts = field.split('.');
+    const [valueToNest, ...reversedPathToNestedValue] = parts.slice().reverse();
+    const predicateExpression = `${valueToNest} >= "${lowerBound}" and ${valueToNest} < "${upperBound}"`;
+    return constructNestedExpression(
+      reversedPathToNestedValue,
+      predicateExpression
+    );
+  };
+  return prefixSearchFields.map(constructPrefixSearchExpression).join(' or ');
+};
+
+const constructWherePredicate = (inputValue, prefixSearchFields) => {
+  const wherePredicate = do {
+    if (inputValue.length) {
+      if (isUUID(inputValue)) `id = "${inputValue}"`;
+      else {
+        const [lowerBound, upperBound] = getPrefixSearchBounds(inputValue);
+        constructPrefixSearchPredicate(
+          prefixSearchFields,
+          lowerBound,
+          upperBound
+        );
+      }
+    }
+  };
+
+  return wherePredicate;
+};
+
+const useFetchProductTypessFromCTP = ({ prefixSearchFields }) => {
+  const executeGraphQLRequest = useExecuteGraphQLRequest();
+  return useCallback(
+    (inputValue = '') => {
+      const where = constructWherePredicate(inputValue, prefixSearchFields);
+      return executeGraphQLRequest(
+        GetProductTypesQuery,
+        { where },
+        { target: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM },
+        'network-only'
+      );
+    },
+    [prefixSearchFields, executeGraphQLRequest]
+  );
+};
+
+export const usePimStatus = () => {
+  const { data } = useQuery(FetchIndicesExist, {
+    context: { target: GRAPHQL_TARGETS.PIM_INDEXER },
+    fetchPolicy: 'cache-and-network',
+  });
+  return {
+    data,
+    isProjectIndexed: Boolean(
+      data?.indicesExist?.productTypes?.searchableIndexExists
+    ),
+  };
+};
+
+const useProductTypeOptions = ({ prefixSearchFields }) => {
+  const { isProjectIndexed } = usePimStatus();
+  const { dataLocale, projectKey } = useApplicationContext((context) => ({
+    dataLocale: context.dataLocale,
+    projectKey: context.project?.key,
+  }));
+
+  const fetchProductTypesFromPim = useFetchProductTypesFromPIM({
+    dataLocale,
+    projectKey,
+  });
+  const fetchProductTypessFromCTP = useFetchProductTypessFromCTP({
+    prefixSearchFields,
+  });
+
+  return {
+    isProjectIndexed,
+    loadProductTypes: isProjectIndexed
+      ? fetchProductTypesFromPim
+      : fetchProductTypessFromCTP,
+  };
+};
+
+export default useProductTypeOptions;

package/src/features/picker/shared/hooks/use-product-type-options.spec.js

@@ -0,0 +1,151 @@
+import { hooks } from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { ProductType } from '@commercetools-local/test-data';
+import useProductTypeOptions from './use-product-type-options';
+import { graphql, rest } from 'msw';
+import { setupServer } from 'msw/node';
+
+const mcGraphqlApi = graphql.link('*/graphql');
+
+const mockServer = setupServer(
+  mcGraphqlApi.query('FetchIndicesExist', (req, res, ctx) =>
+    res(
+      ctx.data({
+        indicesExist: {
+          products: {
+            searchableIndexExists: false,
+            newInProgress: false,
+          },
+          productTypes: {
+            searchableIndexExists: false,
+            newInProgress: false,
+          },
+        },
+      })
+    )
+  ),
+  mcGraphqlApi.query('GetProductTypesQuery', (req, res, ctx) => {
+    const { where } = req.body.variables;
+    const foundProductTypes =
+      where === 'id in ("91ca7360-48d6-4b07-a03c-3360383ae6c0")'
+        ? [
+            ProductType.random()
+              .id('91ca7360-48d6-4b07-a03c-3360383ae6c0')
+              .name('Product Type found via PIM'),
+          ]
+        : [
+            ProductType.random()
+              .id('"ad1b5f7f-97b2-4164-a460-0730272e970c"')
+              .name('Product Type found via CTP'),
+          ];
+
+    return res(
+      ctx.data({
+        productTypes: buildGraphqlList(foundProductTypes, {
+          name: 'ProductTypes',
+          total: foundProductTypes.length,
+        }),
+      })
+    );
+  }),
+  rest.post(
+    'http://localhost:8080/proxy/pim-search/test-with-big-data/search/product-types',
+    (req, res, ctx) => {
+      return res(
+        ctx.json({
+          total: 1,
+          offset: 0,
+          limit: 10,
+          hits: [
+            {
+              id: '91ca7360-48d6-4b07-a03c-3360383ae6c0',
+              version: 1,
+              relevance: 1.0,
+            },
+          ],
+          facets: null,
+          suggestions: null,
+        })
+      );
+    }
+  )
+);
+afterEach(() => mockServer.resetHandlers());
+beforeAll(() => {
+  console.config.addSilencedWarning(/Failed to intercept a GraphQL request/i);
+  mockServer.listen({ onUnhandledRequest: 'warn' });
+});
+afterAll(() => mockServer.close());
+
+const render = async () => {
+  const prefixSearchFields = ['name'];
+  return hooks.renderHook(() => useProductTypeOptions({ prefixSearchFields }));
+};
+
+describe('useProductTypeOptions', () => {
+  it('should fetch using CTP for non indexed projects', async () => {
+    const { result, waitFor } = await render();
+    await waitFor(() => expect(result.current.isProjectIndexed).toBe(false));
+    await hooks.act(async () => {
+      try {
+        const response = await result.current.loadProductTypes('a');
+        expect(response.data).toMatchInlineSnapshot(`
+        Object {
+          "productTypes": Object {
+            "__typename": "ProductTypesQueryResult",
+            "results": Array [
+              Object {
+                "__typename": "ProductTypeDefinition",
+                "id": "\\"ad1b5f7f-97b2-4164-a460-0730272e970c\\"",
+                "name": "Product Type found via CTP",
+              },
+            ],
+          },
+        }
+      `);
+      } catch (e) {
+        console.log({ e });
+      }
+    });
+  });
+
+  it('should fetch using PIM for indexed projects', async () => {
+    mockServer.use(
+      mcGraphqlApi.query('FetchIndicesExist', (req, res, ctx) =>
+        res(
+          ctx.data({
+            indicesExist: {
+              products: {
+                searchableIndexExists: false,
+                newInProgress: false,
+              },
+              productTypes: {
+                searchableIndexExists: true,
+                newInProgress: false,
+              },
+            },
+          })
+        )
+      )
+    );
+    const { result, waitFor } = await render();
+    await waitFor(() => expect(result.current.isProjectIndexed).toBe(true));
+    await hooks.act(async () => {
+      const response = await result.current.loadProductTypes('a');
+      expect(response.data).toMatchInlineSnapshot(`
+        Object {
+          "productTypes": Object {
+            "__typename": "ProductTypesQueryResult",
+            "results": Array [
+              Object {
+                "__typename": "ProductTypeDefinition",
+                "id": "91ca7360-48d6-4b07-a03c-3360383ae6c0",
+                "name": "Product Type found via PIM",
+              },
+            ],
+          },
+        }
+      `);
+    });
+  });
+});

package/src/features/pim-indexer/components/index.js

@@ -0,0 +1,5 @@
+export { default as PimIndexerProvider } from './pim-indexer-provider';
+
+export { default as WithPimIndexer } from './with-pim-indexer';
+
+export { default as PimIndexerContext } from './pim-indexer-context';

package/src/features/pim-indexer/components/pim-indexer-context/index.js

@@ -0,0 +1 @@
+export { default } from './pim-indexer-context';

package/src/features/pim-indexer/components/pim-indexer-context/pim-indexer-context.js

@@ -0,0 +1,28 @@
+import { createContext } from 'react';
+
+/**
+ * @typedef {object} TPimIndexer
+ * @property {boolean} isLoading
+ * @property {boolean} isPimIndexerUnreachable
+ * @property {boolean} isProjectIndexedByPim
+ * @property {boolean} isProjectBeingIndexedByPim
+ * @property {function} attemptToRefreshProducts
+ * @property {function} indexProject
+ */
+
+/** @type TPimIndexer */
+const defaultValue = {
+  isLoading: false,
+  isPimIndexerUnreachable: false,
+  isProjectIndexedByPim: false,
+  isProjectBeingIndexedByPim: false,
+  attemptToRefreshProducts: () => {},
+  indexProject: () => {},
+};
+
+/**
+ * @type {import('react').Context<TPimIndexer>}
+ */
+const PimIndexerContext = createContext(defaultValue);
+
+export default PimIndexerContext;

package/src/features/pim-indexer/components/pim-indexer-provider/fetch-indices-exist.pim-indexer.graphql

@@ -0,0 +1,12 @@
+query FetchIndicesExist {
+  indicesExist {
+    products {
+      searchableIndexExists
+      newInProgress
+    }
+    productTypes {
+      searchableIndexExists
+      newInProgress
+    }
+  }
+}

package/src/features/pim-indexer/components/pim-indexer-provider/fetch-pim-index-status.js

@@ -0,0 +1,42 @@
+import {
+  GRAPHQL_TARGETS,
+  MC_API_PROXY_TARGETS,
+} from '@commercetools-frontend/constants';
+import { actions as sdkActions } from '@commercetools-frontend/sdk';
+import { FetchIndicesExist } from './fetch-indices-exist.pim-indexer.graphql';
+
+export default (apolloClient, projectKey) => async (dispatch) => {
+  try {
+    await dispatch(
+      sdkActions.head({
+        mcApiProxyTarget: MC_API_PROXY_TARGETS.PIM_SEARCH,
+        uri: `/${projectKey}/search/products`,
+      })
+    );
+
+    return { status: 'indexed' };
+  } catch (error) {
+    if (error.code === 404) {
+      const { data } = await apolloClient.query({
+        query: FetchIndicesExist,
+        context: {
+          target: GRAPHQL_TARGETS.PIM_INDEXER,
+        },
+        fetchPolicy: 'network-only',
+      });
+      if (
+        data.indicesExist.products.newInProgress ||
+        data.indicesExist.productTypes.newInProgress
+      ) {
+        return {
+          status: 'indexing',
+          isIndexingProducts: !data.indicesExist.products.searchableIndexExists,
+          isIndexingProductTypes:
+            !data.indicesExist.productTypes.searchableIndexExists,
+        };
+      }
+      return { status: 'unindexed' };
+    }
+    return { status: 'unreachable' };
+  }
+};