@commercetools-frontend/application-shell-connectors 0.0.0-CRAFT-1791-20251006162610

package/dist/commercetools-frontend-application-shell-connectors.cjs.dev.js

@@ -0,0 +1,1105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var react = require('react');
+var moment = require('moment-timezone');
+var sentry = require('@commercetools-frontend/sentry');
+var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var constants = require('@commercetools-frontend/constants');
+var react$1 = require('@apollo/client/react');
+var warning = require('tiny-warning');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var client = require('@apollo/client');
+var loggerLink = require('apollo-link-logger');
+var error = require('@apollo/client/link/error');
+var history = require('@commercetools-frontend/browser-history');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var createHttpUserAgent = require('@commercetools/http-user-agent');
+var omitEmpty = require('omit-empty-es');
+var uuid = require('uuid');
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var _wrapNativeSuper = require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var retry = require('@apollo/client/link/retry');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var moment__default = /*#__PURE__*/_interopDefault(moment);
+var _URL__default = /*#__PURE__*/_interopDefault(_URL);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var warning__default = /*#__PURE__*/_interopDefault(warning);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var loggerLink__default = /*#__PURE__*/_interopDefault(loggerLink);
+var history__default = /*#__PURE__*/_interopDefault(history);
+var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var createHttpUserAgent__default = /*#__PURE__*/_interopDefault(createHttpUserAgent);
+var omitEmpty__default = /*#__PURE__*/_interopDefault(omitEmpty);
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "24.7.2";
+
+// From https://github.com/acdlite/recompose/blob/master/src/packages/recompose/getDisplayName.js
+const getDisplayName = Component => {
+  if (typeof Component === 'string') {
+    return Component;
+  }
+  if (!Component) {
+    return undefined;
+  }
+  return Component.displayName || Component.name || 'Component';
+};
+
+const mcHostnameRegex = /^mc(-(\d){4,})?\.(.*)$/;
+const mcPreviewHostnameRegex = /^.*\.mc-preview\.(.*)$/;
+const getMcOriginTld = host => {
+  if (host.match(mcPreviewHostnameRegex)) {
+    return host.replace(mcPreviewHostnameRegex, '$1');
+  }
+  return host.replace(mcHostnameRegex, '$3');
+};
+const getMcApiUrlFromOrigin = origin => {
+  const url = new _URL__default["default"](origin);
+  const originTld = getMcOriginTld(url.host);
+  return `${url.protocol}//mc-api.${originTld}`;
+};
+const parseAsBoolean = value => value === true || value === 'true';
+function getMcApiUrl() {
+  let environment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.app;
+  let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.origin;
+  const isServedByProxy = parseAsBoolean(environment.servedByProxy);
+
+  /**
+   * Prefer using the origin URL for the MC API based on the origin value
+   * of the browser's `window.location`.
+   * This ensures that the application always uses the correct URL associated
+   * with that environment, instead of relying on the config value.
+   */
+  if (isServedByProxy) {
+    return getMcApiUrlFromOrigin(origin);
+  }
+  return environment.mcApiUrl;
+}
+
+function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$7(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+// Menu visibilities
+
+// Permissions
+
+// Action rights
+
+// Data fences
+
+/**
+ * NOTE:
+ *
+ * Permissions and menu visibilities are being fetched though the `allAppliedPermissions`
+ * and the `allAppliedMenuVisibilities` which both return an array of `{ name: string, value: boolean }`.
+ * This gives more flexibility to introduce new values to apps without having to release
+ * the merchant-center-app-kit by adding/exposing them from the mc-be (our proxy service).
+ *
+ * The application below however expects both permissions an menu visibilities to be of the shape
+ * `[name: string]: boolean` which is what the shape above is mapped into here. This object shape is easier
+ * to work with in application level code (while be a non breaking change to other packages) as you can just
+ * do `canViewProducts`.
+ *
+ * This function considering its concern belongs into the `permissions` package. However,
+ * for now it doesn't have to be shared and as a result can be co-located with
+ * the fetching logic. Given this mapping needs to be used elsewere feel free
+ * to move this over to `permissions` and export it there.
+ */
+const normalizeAllAppliedPermissions = allAppliedPermissions => {
+  if (!allAppliedPermissions || allAppliedPermissions.length === 0) {
+    return null;
+  }
+  return _reduceInstanceProperty__default["default"](allAppliedPermissions).call(allAppliedPermissions, (transformedAllApplied, allApplied) => {
+    if (!allApplied) return transformedAllApplied;
+    return _objectSpread$7(_objectSpread$7({}, transformedAllApplied), {}, {
+      [allApplied.name]: allApplied.value
+    });
+  }, {});
+};
+const normalizeAllAppliedMenuVisibilities = allAppliedMenuVisibilities => {
+  if (!allAppliedMenuVisibilities || allAppliedMenuVisibilities.length === 0) {
+    return null;
+  }
+  return _reduceInstanceProperty__default["default"](allAppliedMenuVisibilities).call(allAppliedMenuVisibilities, (transformedAllApplied, allApplied) => {
+    if (!allApplied) return transformedAllApplied;
+    return _objectSpread$7(_objectSpread$7({}, transformedAllApplied), {}, {
+      [allApplied.name]: allApplied.value
+    });
+  }, {});
+};
+const normalizeAllAppliedActionRights = allAppliedActionRights => {
+  if (!allAppliedActionRights || allAppliedActionRights.length === 0) {
+    return null;
+  }
+  return _reduceInstanceProperty__default["default"](allAppliedActionRights).call(allAppliedActionRights, (transformedAllApplied, allApplied) => {
+    if (!allApplied) return transformedAllApplied;
+    const previousAllAppliedGroup = transformedAllApplied[allApplied.group];
+    return _objectSpread$7(_objectSpread$7({}, transformedAllApplied), {}, {
+      [allApplied.group]: _objectSpread$7(_objectSpread$7({}, previousAllAppliedGroup), {}, {
+        [allApplied.name]: allApplied.value
+      })
+    });
+  }, {});
+};
+const normalizeAppliedDataFencesForStoresByResourceType = dataFences => {
+  var _context;
+  const groupedByResourceType = _reduceInstanceProperty__default["default"](dataFences).call(dataFences, (previousGroupsOfSameType, appliedDataFence) => {
+    if (!appliedDataFence) return previousGroupsOfSameType;
+    const previousGroup = previousGroupsOfSameType[appliedDataFence.group];
+    return _objectSpread$7(_objectSpread$7({}, previousGroupsOfSameType), {}, {
+      [appliedDataFence.group]: [...(previousGroup || []), appliedDataFence]
+    });
+  }, {});
+  return _reduceInstanceProperty__default["default"](_context = _Object$entries__default["default"](groupedByResourceType)).call(_context, (previousGroupedByResourceType, _ref) => {
+    let _ref2 = _slicedToArray(_ref, 2),
+      resourceType = _ref2[0],
+      dataFences = _ref2[1];
+    const groupByDataFenceName = _reduceInstanceProperty__default["default"](dataFences).call(dataFences, (nextDataFenceValues, dataFence) => {
+      const dataFenceByName = nextDataFenceValues[dataFence.name] || {
+        values: []
+      };
+      return _objectSpread$7(_objectSpread$7({}, nextDataFenceValues), {}, {
+        [dataFence.name]: _objectSpread$7(_objectSpread$7({}, dataFenceByName), {}, {
+          values: [..._valuesInstanceProperty__default["default"](dataFenceByName), dataFence.value]
+        })
+      });
+    }, {});
+    return _objectSpread$7(_objectSpread$7({}, previousGroupedByResourceType), {}, {
+      [resourceType]: groupByDataFenceName
+    });
+  }, {});
+};
+
+// input:
+// [
+//   {
+//     type: 'store',
+//     name: 'canManageOrders',
+//     value: 'usa',
+//     group: 'orders',
+//   },
+//   {
+//     type: 'store',
+//     name: 'canManageOrders',
+//     value: 'germany',
+//     group: 'orders',
+//   },
+//   {
+//     type: 'store',
+//     name: 'canViewOrders',
+//     value: 'canada',
+//     group: 'orders',
+//   },
+// ]
+// output:
+// {
+//   store: {
+//     orders: {
+//       canManageOrders: { values: ['usa', 'germany'] },
+//       canViewOrders: { values: ['canada'] },
+//     }
+//   }
+// }
+
+const normalizeAllAppliedDataFences = allAppliedDataFences => {
+  if (!allAppliedDataFences || allAppliedDataFences.length === 0) {
+    return null;
+  }
+  const groupedByType = _reduceInstanceProperty__default["default"](allAppliedDataFences).call(allAppliedDataFences, (previousGroupsOfSameType, appliedDataFence) => {
+    if (!appliedDataFence) return previousGroupsOfSameType;
+    const previousGroup = previousGroupsOfSameType[appliedDataFence.type];
+    return _objectSpread$7(_objectSpread$7({}, previousGroupsOfSameType), {}, {
+      [appliedDataFence.type]: [...(previousGroup || []), appliedDataFence]
+    });
+  }, {});
+  const normalizedDataFences = _objectSpread$7({}, 'store' in groupedByType ? {
+    store: normalizeAppliedDataFencesForStoresByResourceType(groupedByType.store)
+  } : {});
+  if (_Object$keys__default["default"](normalizedDataFences).length > 0) return normalizedDataFences;
+  return null;
+};
+
+function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const Context$2 = /*#__PURE__*/react.createContext({});
+const defaultTimeZone = moment__default["default"].tz.guess() || 'Etc/UTC';
+
+// Expose only certain fields as some of them are only meant to
+// be used internally in the AppShell
+const mapUserToApplicationContextUser = user => {
+  if (!user) return null;
+  let applicationContextUser = {
+    id: user.id,
+    email: user.email,
+    createdAt: user.createdAt,
+    firstName: user.firstName,
+    lastName: user.lastName,
+    businessRole: user.businessRole,
+    // NOTE: this is an alias for the original field `user.language` but it's actually
+    // a locale (language + country).
+    locale: user.language,
+    timeZone: user.timeZone || defaultTimeZone,
+    projects: user.projects
+  };
+
+  // This property will only be populated when user has logged in using SSO
+  if (user.idTokenUserInfo) {
+    let additionalClaims = {};
+    try {
+      additionalClaims = JSON.parse(user.idTokenUserInfo.additionalClaims || '{}');
+    } catch (error) {
+      sentry.reportErrorToSentry(new Error('@commercetools-frontend/application-shell-connectors: Could not parse received user sso token additional claims from server.'), {
+        extra: {
+          receivedAdditionalClaims: user.idTokenUserInfo.additionalClaims
+        }
+      });
+    }
+    applicationContextUser.idTokenUserInfo = _objectSpread$6(_objectSpread$6({}, user.idTokenUserInfo), {}, {
+      additionalClaims
+    });
+  }
+  return applicationContextUser;
+};
+
+// Adjust certain fields which depend e.g. on the origin
+const mapEnvironmentToApplicationContextEnvironment = (environment, origin) => _objectSpread$6(_objectSpread$6({}, environment), {}, {
+  // NOTE: The `mcApiUrl` depends on `servedByProxy`
+  mcApiUrl: getMcApiUrl(environment, origin)
+});
+
+// Expose only certain fields as some of them are only meant to
+// be used internally in the AppShell
+const mapProjectToApplicationContextProject = project => {
+  if (!project) return null;
+  return {
+    key: project.key,
+    version: project.version,
+    name: project.name,
+    countries: project.countries,
+    currencies: project.currencies,
+    languages: project.languages,
+    ownerId: project.owner.id,
+    ownerName: project.owner.name,
+    sampleDataImportDataset: project.sampleDataImportDataset,
+    isUserAdminOfCurrentProject: project.isUserAdminOfCurrentProject,
+    isProductionProject: project.isProductionProject
+  };
+};
+const createApplicationContext = (environment, user, project, projectDataLocale) => ({
+  environment: mapEnvironmentToApplicationContextEnvironment(environment),
+  user: mapUserToApplicationContextUser(user),
+  project: mapProjectToApplicationContextProject(project),
+  permissions: normalizeAllAppliedPermissions(project?.allAppliedPermissions),
+  actionRights: normalizeAllAppliedActionRights(project?.allAppliedActionRights),
+  dataFences: normalizeAllAppliedDataFences(project?.allAppliedDataFences),
+  dataLocale: projectDataLocale || null
+});
+const ApplicationContextProvider = props => jsxRuntime.jsx(Context$2.Provider, {
+  value: createApplicationContext(props.environment, props.user, props.project, props.projectDataLocale),
+  children: props.children
+});
+ApplicationContextProvider.displayName = 'ApplicationContextProvider';
+const ApplicationContext = props => jsxRuntime.jsx(Context$2.Consumer, {
+  children: context => {
+    // Because of the way the ApplicationShell configures the Context.Provider,
+    // we ensure that, when we read from the context, we always get actual
+    // context object and not the initial value.
+    // Therefore, we can safely cast the value to be out `TApplicationContext` type.
+    const applicationContext = context;
+    return props.render(applicationContext);
+  }
+});
+ApplicationContext.displayName = 'ApplicationContext';
+function withApplicationContext(mapApplicationContextToProps) {
+  return Component => {
+    const WrappedComponent = props => jsxRuntime.jsx(ApplicationContext, {
+      render: applicationContext => {
+        const mappedProps = mapApplicationContextToProps ? mapApplicationContextToProps(applicationContext) : {
+          applicationContext
+        };
+        // @ts-ignore: relates to https://github.com/emotion-js/emotion/issues/3245
+        return jsxRuntime.jsx(Component, _objectSpread$6(_objectSpread$6({}, props), mappedProps));
+      }
+    });
+    WrappedComponent.displayName = `withApplicationContext(${getDisplayName(Component)})`;
+    return WrappedComponent;
+  };
+}
+
+// Use function overloading to declare two possible signatures with two
+// distict return types, based on the selector function argument.
+
+// Then implement the function. Typescript will pick the appropriate signature
+// based on the function arguments.
+function useApplicationContextHook(selector) {
+  const context = react.useContext(Context$2);
+  // Because of the way the ApplicationShell configures the Context.Provider,
+  // we ensure that, when we read from the context, we always get actual
+  // context object and not the initial value.
+  // Therefore, we can safely cast the value to be out `TApplicationContext` type.
+  const applicationContext = context;
+  return selector ? selector(applicationContext) : applicationContext;
+}
+
+// This is a workaround to trick babel/rollup to correctly export the function.
+// Most likely the problem arises with the use of overloading.
+// See related issue: https://github.com/babel/babel/issues/8361
+const useApplicationContext = useApplicationContextHook;
+
+const useCustomViewParentDataRefresher = params => {
+  const onCustomViewEventHandler = react.useCallback(event => {
+    var _context;
+    const originLocatorCode = event.detail.originLocatorCode;
+    if (_includesInstanceProperty__default["default"](_context = params.locators).call(_context, originLocatorCode)) {
+      params.onRefreshDataRequested(event.detail);
+    }
+  }, []);
+  react.useEffect(() => {
+    window.addEventListener(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_ON_CLOSE_AFTER, onCustomViewEventHandler);
+    return () => {
+      window.removeEventListener(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_ON_CLOSE_AFTER, onCustomViewEventHandler);
+    };
+  }, [onCustomViewEventHandler]);
+};
+
+function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const Context$1 = /*#__PURE__*/react.createContext({});
+const CustomViewContextProvider = props => {
+  const contextValue = react.useMemo(() => ({
+    hostUrl: props.hostUrl,
+    customViewConfig: props.customViewConfig
+  }), [props.hostUrl, props.customViewConfig]);
+  return jsxRuntime.jsx(Context$1.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+
+// Use function overloading to declare two possible signatures with two
+// distict return types, based on the selector function argument.
+
+// Then implement the function. Typescript will pick the appropriate signature
+// based on the function arguments.
+function useCustomViewContextHook(selector) {
+  // Because of the way the CustomViewShell configures the Context.Provider,
+  // we ensure that, when we read from the context, we always get actual
+  // context object and not the initial value.
+  // Therefore, we can safely cast the value to be out `TCustomViewContext` type.
+  const customViewContext = react.useContext(Context$1);
+  const applicationContext = useApplicationContext();
+  const mergedContext = _objectSpread$5(_objectSpread$5({}, applicationContext), customViewContext);
+  return selector ? selector(mergedContext) : mergedContext;
+}
+
+// This is a workaround to trick babel/rollup to correctly export the function.
+// Most likely the problem arises with the use of overloading.
+// See related issue: https://github.com/babel/babel/issues/8361
+const useCustomViewContext = useCustomViewContextHook;
+
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+var FetchProjectExtensionImageRegex = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProjectExtensionImageRegex" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "projectExtension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "imageRegex" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "thumb" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "ImageRegex" }, directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "small" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "ImageRegex" }, directives: [] }] } }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "ImageRegex" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "ImageRegexOptions" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "flag" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "search" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "replace" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 256, source: { body: "query FetchProjectExtensionImageRegex {\n  projectExtension {\n    id\n    imageRegex {\n      thumb {\n        ...ImageRegex\n      }\n      small {\n        ...ImageRegex\n      }\n    }\n  }\n}\nfragment ImageRegex on ImageRegexOptions {\n  flag\n  search\n  replace\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const useWarning = (condition, message) => {
+  react.useEffect(() => {
+    process.env.NODE_ENV !== "production" ? warning__default["default"](condition, message) : void 0;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+const Context = /*#__PURE__*/react.createContext({
+  isLoading: false
+});
+const useProjectExtensionImageRegex = () => {
+  const _useContext = react.useContext(Context),
+    isLoading = _useContext.isLoading,
+    imageRegex = _useContext.imageRegex;
+  return {
+    isLoading,
+    imageRegex
+  };
+};
+const ProjectExtensionProviderForImageRegex = props => {
+  const _useQuery = react$1.useQuery(FetchProjectExtensionImageRegex, {
+      skip: props.skip,
+      context: {
+        target: constants.GRAPHQL_TARGETS.SETTINGS_SERVICE
+      }
+    }),
+    loading = _useQuery.loading,
+    data = _useQuery.data;
+  return jsxRuntime.jsx(Context.Provider, {
+    value: {
+      isLoading: loading,
+      imageRegex: data && data.projectExtension && data.projectExtension.imageRegex
+    },
+    children: props.children
+  });
+};
+ProjectExtensionProviderForImageRegex.displayName = 'ProjectExtensionProviderForImageRegex';
+const GetProjectExtensionImageRegex = props => {
+  useWarning(false, `@commercetools-frontend/application-shell-connectors: It is not recommended to use the 'GetProjectExtensionImageRegex' anymore. Please use the 'useProjectExtensionImageRegex' hook instead.`);
+  return jsxRuntime.jsx(Context.Consumer, {
+    children: imageRegexContext => props.render(imageRegexContext)
+  });
+};
+GetProjectExtensionImageRegex.displayName = 'GetProjectExtensionImageRegex';
+function withProjectExtensionImageRegex() {
+  let propKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'imageRegexData';
+  return Component => {
+    const WrappedComponent = props => {
+      useWarning(false, `@commercetools-frontend/application-shell-connectors: It is not recommended to use the 'withProjectExtensionImageRegex' high order component anymore. Please use the 'useProjectExtensionImageRegex' hook instead.`);
+      const imageregexContext = useProjectExtensionImageRegex();
+      return jsxRuntime.jsx(GetProjectExtensionImageRegex, {
+        render: () =>
+        // @ts-ignore: relates to https://github.com/emotion-js/emotion/issues/3245
+        jsxRuntime.jsx(Component, _objectSpread$4(_objectSpread$4({}, props), {}, {
+          [propKey]: imageregexContext
+        }))
+      });
+    };
+    WrappedComponent.displayName = `withProjectExtensionImageRegex(${getDisplayName(Component)})`;
+    return WrappedComponent;
+  };
+}
+
+function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getSkipTokenRetry = context => {
+  const skipTokenRetry = Boolean(context.skipTokenRetry);
+  return skipTokenRetry;
+};
+const forwardTokenRetryHeader = headers => _objectSpread$3(_objectSpread$3({}, headers), {}, {
+  [constants.SUPPORTED_HEADERS.X_TOKEN_RETRY]: 'true'
+});
+
+// This link retries requests to the CTP API that have been rejected
+// because of an invalid/expired oauth token.
+// To do so, we resend the request with the header "X-Force-Token: true"
+// so that the MC BE can issue a new token.
+// NOTE: the retry is not meant to work for the MC access token.
+const getDoesGraphQLTargetSupportTokenRetry = context => {
+  var _context;
+  const graphQLTarget = context.headers?.[constants.SUPPORTED_HEADERS.X_GRAPHQL_TARGET] || context.headers?.[constants.SUPPORTED_HEADERS.X_GRAPHQL_TARGET.toLowerCase()];
+  return Boolean(graphQLTarget && _includesInstanceProperty__default["default"](_context = [constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM, constants.GRAPHQL_TARGETS.ADMINISTRATION_SERVICE, constants.GRAPHQL_TARGETS.SETTINGS_SERVICE, constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND]).call(_context, graphQLTarget));
+};
+const isHttpError = error => error.statusCode !== undefined || error.statusCode !== undefined;
+const isGraphQLError = error => _Array$isArray__default["default"](error) && _someInstanceProperty__default["default"](error).call(error, err => err.message !== undefined || err.extensions !== undefined);
+
+// Checks response from GraphQL in order to scan 401 errors and redirect the
+// user to the login page resetting the store and showing the proper message
+const errorLink = error.onError(_ref => {
+  let graphQLErrors = _ref.graphQLErrors,
+    networkError = _ref.networkError,
+    operation = _ref.operation,
+    forward = _ref.forward;
+  if (networkError && isHttpError(networkError) && networkError.statusCode === constants.STATUS_CODES.UNAUTHORIZED) {
+    history__default["default"].push(`/logout?reason=${constants.LOGOUT_REASONS.UNAUTHORIZED}`);
+    return;
+  }
+
+  // In case of graphql errors, we want to retry unauthenticated requests by
+  // forcing our API to fetch a new token, using the `X-Force-Token` header.
+  // https://www.apollographql.com/docs/link/links/error/#retrying-failed-requests
+  // We need to do this as the `token-retry-link` only works for network errors.
+  // https://www.apollographql.com/docs/link/links/retry/
+  const context = operation.getContext();
+  if (graphQLErrors && isGraphQLError(graphQLErrors)) {
+    for (const err of graphQLErrors) {
+      const isNonAuthenticatedViaExtensionCode = err?.extensions?.code === 'UNAUTHENTICATED';
+      /**
+       * NOTE:
+       *   Not not all GraphQL APIs expose an `extensions` field in
+       *   each error. For those we have to use the `message`
+       *   property until they introduced support for the `extensions`
+       *   field.
+       */
+      const isNonAuthenticatedViaCode = err?.message === 'invalid_token';
+      if ((isNonAuthenticatedViaExtensionCode || isNonAuthenticatedViaCode) && getDoesGraphQLTargetSupportTokenRetry(context) && !getSkipTokenRetry(context)) {
+        operation.setContext(_ref2 => {
+          let headers = _ref2.headers;
+          return {
+            headers: forwardTokenRetryHeader(headers)
+          };
+        });
+        // retry the request, returning the new observable
+        return forward(operation);
+      }
+    }
+  }
+
+  // Report unhandled errors to Sentry
+  if (context.enableSentryErrorReporting && networkError) {
+    sentry.reportErrorToSentry(networkError, {
+      extra: {
+        operationName: operation.operationName
+      }
+    });
+  }
+  if (context.enableSentryErrorReporting && graphQLErrors) {
+    for (const err of graphQLErrors) {
+      sentry.reportErrorToSentry(err, {
+        extra: {
+          operationName: operation.operationName
+        }
+      });
+    }
+  }
+  return;
+});
+
+// Attempt to load the `teamId` from sessionStorage
+function selectTeamIdFromStorage() {
+  return window.sessionStorage.getItem(constants.STORAGE_KEYS.ACTIVE_TEAM_ID) || window.app.__DEVELOPMENT__?.oidc?.teamId;
+}
+
+const staticUrlPathsInPositionOfProjectKey = ['login', 'logout', 'account'];
+
+// Attempt to extract the `:projectKey` from the URL.
+// If the value matches one of the values in the list above,
+// return `undefined` as we're not within a project context.
+function selectProjectKeyFromUrl() {
+  let locationPath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.location.pathname;
+  let possibleProjectKey = '';
+  const pathParts = locationPath.split('/');
+  if (pathParts[1] === 'custom-views') {
+    // Custom Views paths: /custom-views/:customViewId/projects/:projectKey
+    possibleProjectKey = pathParts[4];
+  } else {
+    // Application paths: /:projectKey/:applicationId
+    possibleProjectKey = pathParts[1];
+  }
+  return _includesInstanceProperty__default["default"](staticUrlPathsInPositionOfProjectKey).call(staticUrlPathsInPositionOfProjectKey, possibleProjectKey) ? undefined : possibleProjectKey;
+}
+
+// Keep an in-memory reference to the apollo client that would be initialized
+// by the application. This is useful to retrieve on runtime the reference
+// to the apollo client in other static modules.
+let cachedApolloClient;
+const setCachedApolloClient = apolloClient => {
+  cachedApolloClient = apolloClient;
+};
+const getCachedApolloClient = () => cachedApolloClient;
+
+var FetchUserId = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchUserId" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 46, source: { body: "query FetchUserId {\n  user: me {\n    id\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+function selectUserId() {
+  const apolloClient = getCachedApolloClient();
+  if (!apolloClient) {
+    return null;
+  }
+  try {
+    const queryResult = apolloClient.readQuery({
+      query: FetchUserId
+    });
+    if (queryResult && queryResult.user) {
+      return queryResult.user.id;
+    }
+  } catch (e) {
+    return null;
+  }
+  return null;
+}
+
+const VALID_ID_PART_FORMAT = /^[\w-/]+$/;
+const skipMalformedPart = part => part && VALID_ID_PART_FORMAT.test(part);
+function getCorrelationId() {
+  var _context;
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    userId = _ref.userId;
+  return _filterInstanceProperty__default["default"](_context = ['mc', selectProjectKeyFromUrl(), userId, uuid.v4()]).call(_context, skipMalformedPart).join('/');
+}
+
+const createApolloContextForProxyForwardTo = proxyForwardTocontext => ({
+  // Send the request to the forward-to endpoint.
+  uri: `${getMcApiUrl()}/proxy/forward-to`,
+  // Custom properties to be used by the "header-link".
+  forwardToConfig: proxyForwardTocontext,
+  skipGraphQlTargetCheck: true
+});
+
+/* eslint-disable no-console */
+
+const isLoggerEnabled = () => {
+  if (process.env.DEBUG === 'true') return true;
+  if (process.env.NODE_ENV === 'development') return true;
+  const queryParams = new _URL__default["default"](window.location.href);
+  if (process.env.NODE_ENV === 'production' && queryParams.searchParams.get('debug') === 'true') return true;
+  return false;
+};
+const logger = {
+  groupCollapsed: function () {
+    return isLoggerEnabled() && console.groupCollapsed(...arguments);
+  },
+  groupEnd: () => isLoggerEnabled() && console.groupEnd(),
+  info: function () {
+    return isLoggerEnabled() && console.info(...arguments);
+  },
+  log: function () {
+    return isLoggerEnabled() && console.log(...arguments);
+  },
+  error: function () {
+    return isLoggerEnabled() && console.error(...arguments);
+  },
+  warn: function () {
+    return isLoggerEnabled() && console.warn(...arguments);
+  }
+};
+
+const getSessionToken = () => window.sessionStorage.getItem(constants.STORAGE_KEYS.SESSION_TOKEN);
+const setActiveSession = sessionToken => {
+  if (!sessionToken) return;
+  window.sessionStorage.setItem(constants.STORAGE_KEYS.SESSION_TOKEN, sessionToken ?? '');
+  window.localStorage.setItem(constants.STORAGE_KEYS.LOGIN_STRATEGY, constants.LOGIN_STRATEGY_OIDC);
+  // Remove flag for original workflow
+  window.localStorage.removeItem(constants.STORAGE_KEYS.IS_AUTHENTICATED);
+};
+const clearSession = () => {
+  window.sessionStorage.removeItem(constants.STORAGE_KEYS.SESSION_TOKEN);
+  window.sessionStorage.removeItem(constants.STORAGE_KEYS.SESSION_SCOPE);
+  window.sessionStorage.removeItem(constants.STORAGE_KEYS.IS_AUTHENTICATED);
+};
+const getActiveProjectKey = () => window.localStorage.getItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY);
+const removeActiveProjectKey = () => {
+  window.localStorage.removeItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY);
+};
+const setActiveProjectKey = projectKey => {
+  window.localStorage.setItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY, projectKey);
+};
+const getSessionScope = () => window.sessionStorage.getItem(constants.STORAGE_KEYS.SESSION_SCOPE);
+const setSessionScope = scope => {
+  window.sessionStorage.setItem(constants.STORAGE_KEYS.SESSION_SCOPE, scope);
+};
+const getSessionState = stateId => {
+  const sessionStateKey = `${constants.STORAGE_KEYS.NONCE}_${stateId}`;
+  const unparsedSessionState = window.sessionStorage.getItem(sessionStateKey);
+  if (unparsedSessionState) {
+    try {
+      const parsedSessionState = JSON.parse(unparsedSessionState);
+      return parsedSessionState;
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(`Cannot parse session state for "${sessionStateKey}".\n${unparsedSessionState}`);
+      }
+    }
+  }
+  return null;
+};
+const setSessionState = (stateId, state) => {
+  const sessionStateKey = `${constants.STORAGE_KEYS.NONCE}_${stateId}`;
+  window.sessionStorage.setItem(sessionStateKey, _JSON$stringify__default["default"](state));
+};
+const removeSessionState = stateId => {
+  const sessionStateKey = `${constants.STORAGE_KEYS.NONCE}_${stateId}`;
+  window.sessionStorage.removeItem(sessionStateKey);
+};
+
+var oidcStorage = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getSessionToken: getSessionToken,
+  setActiveSession: setActiveSession,
+  clearSession: clearSession,
+  getSessionState: getSessionState,
+  setSessionState: setSessionState,
+  removeSessionState: removeSessionState,
+  getActiveProjectKey: getActiveProjectKey,
+  setActiveProjectKey: setActiveProjectKey,
+  removeActiveProjectKey: removeActiveProjectKey,
+  getSessionScope: getSessionScope,
+  setSessionScope: setSessionScope
+});
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+let _userAgent$1;
+const getUserAgent$1 = () => {
+  if (!_userAgent$1) {
+    _userAgent$1 = createHttpUserAgent__default["default"]({
+      name: 'unknown-http-client',
+      libraryName: typeof window !== 'undefined' ? window.app?.applicationName ?? 'unknown-application-name' : undefined
+    });
+  }
+  return _userAgent$1;
+};
+const defaultForwardToVersion = 'v2';
+const defaultForwardToAudiencePolicy = 'forward-url-full-path';
+function buildApiUrl(endpoint) {
+  const apiUrl = getMcApiUrl().replace(/\/$/, '');
+  return `${apiUrl}${endpoint}`;
+}
+const getAppliedForwardToHeaders = forwardToConfig => {
+  var _context;
+  if (!forwardToConfig) {
+    return {};
+  }
+  if (!forwardToConfig.uri) {
+    throw new Error(`Missing required "uri" option.`);
+  }
+  const exchangeTokenClaims = [];
+  if (forwardToConfig.includeUserPermissions) {
+    exchangeTokenClaims.push('permissions');
+  }
+  return _objectSpread$2(_objectSpread$2({}, _reduceInstanceProperty__default["default"](_context = _Object$entries__default["default"](forwardToConfig.headers ?? {})).call(_context, (customForwardHeaders, _ref) => {
+    let _ref2 = _slicedToArray(_ref, 2),
+      headerName = _ref2[0],
+      headerValue = _ref2[1];
+    return _objectSpread$2(_objectSpread$2({}, customForwardHeaders), {}, {
+      // Prefix headers so that the MC API can allow and forward them.
+      [`x-forward-header-${headerName}`]: headerValue
+    });
+  }, {})), {}, {
+    [constants.SUPPORTED_HEADERS.ACCEPT_VERSION]: forwardToConfig.version ?? defaultForwardToVersion,
+    [constants.SUPPORTED_HEADERS.X_FORWARD_TO]: forwardToConfig.uri,
+    [constants.SUPPORTED_HEADERS.X_FORWARD_TO_AUDIENCE_POLICY]: forwardToConfig.audiencePolicy ?? defaultForwardToAudiencePolicy,
+    [constants.SUPPORTED_HEADERS.X_FORWARD_TO_CLAIMS]: exchangeTokenClaims.join(' ')
+  });
+};
+function createHttpClientOptions() {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const sessionToken = getSessionToken();
+  const projectKey = config.projectKey ?? selectProjectKeyFromUrl();
+  const userId = selectUserId();
+  const userAgent = config?.userAgent || getUserAgent$1();
+  return {
+    credentials: 'include',
+    headers: omitEmpty__default["default"](_objectSpread$2(_objectSpread$2({}, config.headers), {}, {
+      // Required headers
+      [constants.SUPPORTED_HEADERS.ACCEPT]: 'application/json',
+      [constants.SUPPORTED_HEADERS.AUTHORIZATION]: sessionToken ? `Bearer ${sessionToken}` : undefined,
+      [constants.SUPPORTED_HEADERS.X_APPLICATION_ID]: window.app.applicationIdentifier,
+      [constants.SUPPORTED_HEADERS.X_CUSTOM_VIEW_ID]: window.app.customViewId,
+      [constants.SUPPORTED_HEADERS.X_CORRELATION_ID]: getCorrelationId({
+        userId
+      }),
+      [constants.SUPPORTED_HEADERS.X_PROJECT_KEY]: projectKey,
+      [constants.SUPPORTED_HEADERS.X_USER_AGENT]: userAgent
+    }, getAppliedForwardToHeaders(config.forwardToConfig)))
+  };
+}
+let RenewTokenError = /*#__PURE__*/function (_Error) {
+  function RenewTokenError(message) {
+    var _this;
+    _classCallCheck(this, RenewTokenError);
+    _this = _callSuper(this, RenewTokenError, [message]);
+    _Object$defineProperty__default["default"](_this, 'name', {
+      value: 'RenewTokenError'
+    });
+    return _this;
+  }
+  _inherits(RenewTokenError, _Error);
+  return _createClass(RenewTokenError);
+}(/*#__PURE__*/_wrapNativeSuper(Error));
+async function executeHttpClientRequest(fetcher) {
+  let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // Wrapper function to be called again (once) on retry.
+  async function sendRequest() {
+    let _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      shouldRenewToken = _ref3.shouldRenewToken;
+    const requestOptions = createHttpClientOptions(config);
+    const response = await fetcher(_objectSpread$2(_objectSpread$2({}, requestOptions), {}, {
+      headers: omitEmpty__default["default"](_objectSpread$2(_objectSpread$2({}, requestOptions.headers), {}, {
+        // Passing this header forces a token renewal.
+        [constants.SUPPORTED_HEADERS.X_TOKEN_RETRY]: shouldRenewToken
+      }))
+    }));
+    if (response.statusCode === constants.STATUS_CODES.UNAUTHORIZED) {
+      throw new RenewTokenError(`Unauthorized response, attempting retry.`);
+    }
+
+    // In case a new session token is returned from the server, save it.
+    const refreshedSessionToken = response.getHeader('x-refreshed-session-token');
+    if (refreshedSessionToken) {
+      setActiveSession(refreshedSessionToken);
+    }
+    return response.data;
+  }
+
+  // Attempt to send the request.
+  return sendRequest().catch(error => {
+    if (error instanceof RenewTokenError) {
+      // Retry the request and ask to renew the token.
+      return sendRequest({
+        shouldRenewToken: true
+      });
+    }
+    throw error;
+  });
+}
+
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$1(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$1(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+let _userAgent;
+const getUserAgent = () => {
+  if (!_userAgent) {
+    var _context;
+    _userAgent = createHttpUserAgent__default["default"]({
+      name: 'apollo-client',
+      // version: apolloVersion,
+      libraryName: _filterInstanceProperty__default["default"](_context = [typeof window !== 'undefined' ? window.app?.applicationName ?? 'unknown-application-name' : undefined, 'application-shell']).call(_context, Boolean).join('/'),
+      libraryVersion: version,
+      contactUrl: 'https://git.io/fjuyC',
+      // points to the appkit repo issues
+      contactEmail: 'support@commercetools.com'
+    });
+  }
+  return _userAgent;
+};
+const isKnownGraphQlTarget = target => {
+  var _context2;
+  return target ? _includesInstanceProperty__default["default"](_context2 = _Object$values__default["default"](constants.GRAPHQL_TARGETS)).call(_context2, target) : false;
+};
+const extractSessionTokenFromResponse = context => {
+  const refreshedSessionToken = context.response?.headers?.get('x-refreshed-session-token');
+  if (refreshedSessionToken) {
+    return refreshedSessionToken ?? null;
+  }
+  const restResponseWithRefreshTokenHeader = context.restResponses?.find(response => response.headers?.has('x-refreshed-session-token'));
+  if (restResponseWithRefreshTokenHeader) {
+    return restResponseWithRefreshTokenHeader.headers.get('x-refreshed-session-token') ?? null;
+  }
+  return null;
+};
+
+/* eslint-disable import/prefer-default-export */
+// Use a middleware to update the request headers with the correct params.
+const headerLink = new client.ApolloLink((operation, forward) => {
+  var _context3;
+  const apolloContext = operation.getContext();
+  const variables = operation.variables;
+  const graphQlTarget = apolloContext.target || variables.target;
+  if (!apolloContext.skipGraphQlTargetCheck && !isKnownGraphQlTarget(graphQlTarget)) throw new Error(`GraphQL target "${graphQlTarget}" is missing (or is not supported) in operation "${operation.operationName}"`);
+
+  /**
+   * NOTE:
+   *   The project key is read from the url in a project related application context.
+   *   This holds for most applications like `application-categories`, `application-discounts` etc.
+   *   However, the `application-account` does not run with the project key being part of the url.
+   *   As a result we allow passing the project key as a variable on the operation allowing
+   *   it to be the fallback.
+   */
+  const projectKey = apolloContext.projectKey || variables.projectKey || selectProjectKeyFromUrl();
+  const teamId = apolloContext.teamId || variables.teamId || selectTeamIdFromStorage();
+  const featureFlag = apolloContext.featureFlag || variables.featureFlag;
+  operation.setContext(createHttpClientOptions({
+    userAgent: getUserAgent(),
+    headers: omitEmpty__default["default"](_objectSpread$1(_objectSpread$1({}, apolloContext.headers), {}, {
+      // Required headers for GraphQL API.
+      [constants.SUPPORTED_HEADERS.X_GRAPHQL_TARGET]: graphQlTarget,
+      // For logging/debugging purposes.
+      [constants.SUPPORTED_HEADERS.X_GRAPHQL_OPERATION_NAME]: operation.operationName,
+      // Experimental features, use with caution.
+      [constants.SUPPORTED_HEADERS.X_TEAM_ID]: teamId,
+      [constants.SUPPORTED_HEADERS.X_FEATURE_FLAG]: featureFlag
+    })),
+    forwardToConfig: apolloContext.forwardToConfig,
+    projectKey
+  }));
+  return _mapInstanceProperty__default["default"](_context3 = forward(operation)).call(_context3, response => {
+    const context = operation.getContext();
+    const refreshedSessionToken = extractSessionTokenFromResponse(context);
+    if (refreshedSessionToken) {
+      setActiveSession(refreshedSessionToken);
+    }
+    return response;
+  });
+});
+
+const tokenRetryLink = new retry.RetryLink({
+  attempts: (count, operation, error) => {
+    const context = operation.getContext();
+    if (error?.statusCode === constants.STATUS_CODES.UNAUTHORIZED && count === 1 && getDoesGraphQLTargetSupportTokenRetry(context) && !getSkipTokenRetry(context)) {
+      operation.setContext(_ref => {
+        let headers = _ref.headers;
+        return {
+          headers: forwardTokenRetryHeader(headers)
+        };
+      });
+      return true;
+    }
+    return false;
+  }
+});
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const createApolloLink = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const httpLink = client.createHttpLink({
+    uri: `${getMcApiUrl()}/graphql`,
+    fetch
+  });
+
+  // The order of links is IMPORTANT!
+  // In the request-phase they are executed top to bottom.
+  // In the response/phase they are executed bottom to top.
+  // The `httpLink` is terminating so it must be last, while `tokenRetryLink` and `errorLink`
+  // wrap the links the their right.
+  return client.from([headerLink,
+  // See https://www.apollographql.com/docs/react/api/link/apollo-link-rest/#link-order
+  // State & context links should happen before (to the left of) `restLink`.
+  ...(options.restLink ? [options.restLink] : []),
+  // Must be before `tokenRetryLink`.
+  errorLink,
+  // Avoid logging queries in test environment
+  ...(isLoggerEnabled() ? [loggerLink__default["default"]] : []),
+  // Must be after `errorLink`.
+  tokenRetryLink,
+  // Must be last.
+  httpLink]);
+};
+
+// This custom merge function allows to merge two arrays of objects.
+// The incoming list is what we need to update to, but we still need
+// to ensure that existing cache elements are not removed but updated.
+// This is usually the case when elements get removed.
+const mergeArraysObjects = function () {
+  let existing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let incoming = arguments.length > 1 ? arguments[1] : undefined;
+  let _ref = arguments.length > 2 ? arguments[2] : undefined,
+    mergeObjects = _ref.mergeObjects;
+  return _reduceInstanceProperty__default["default"](incoming).call(incoming, (mergedElements, elem) => {
+    const existingElem = _findInstanceProperty__default["default"](existing).call(existing, el => el.__ref === elem.__ref);
+    if (existingElem) {
+      const updatedElem = mergeObjects(existingElem, elem);
+      if (updatedElem) {
+        return [...mergedElements, updatedElem];
+      }
+    }
+    return [...mergedElements, elem];
+  }, []);
+};
+const createApolloClient = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const customCacheConfig = options?.cache ?? {};
+  return new client.ApolloClient({
+    link: createApolloLink(options),
+    // https://www.apollographql.com/docs/react/caching/cache-configuration/
+    cache: new client.InMemoryCache(_objectSpread(_objectSpread({}, customCacheConfig), {}, {
+      // https://www.apollographql.com/docs/react/caching/cache-configuration/#generating-unique-identifiers
+      typePolicies: _objectSpread({
+        // CTP types with `key` as identifier
+        Project: {
+          keyFields: ['key'],
+          fields: {
+            expiry: {
+              merge: (existing, incoming, _ref2) => {
+                let mergeObjects = _ref2.mergeObjects;
+                return mergeObjects(existing, incoming);
+              }
+            },
+            suspension: {
+              merge: (existing, incoming, _ref3) => {
+                let mergeObjects = _ref3.mergeObjects;
+                return mergeObjects(existing, incoming);
+              }
+            }
+          }
+        },
+        Store: {
+          keyFields: ['key']
+        },
+        // Internal apps menu links representations
+        ApplicationsMenu: {
+          fields: {
+            appBar: {
+              merge: mergeArraysObjects
+            },
+            navBarGroups: {
+              merge: mergeArraysObjects
+            }
+          }
+        }
+      }, customCacheConfig.typePolicies ?? {})
+    }))
+  });
+};
+
+function useMcQuery(query, options) {
+  return react$1.useQuery(query, options);
+}
+function useMcLazyQuery(query, options) {
+  return react$1.useLazyQuery(query, options);
+}
+function useMcMutation(mutation, options) {
+  return react$1.useMutation(mutation, options);
+}
+
+exports.ApplicationContext = ApplicationContext;
+exports.ApplicationContextProvider = ApplicationContextProvider;
+exports.Context = Context$2;
+exports.CustomViewContextProvider = CustomViewContextProvider;
+exports.GetProjectExtensionImageRegex = GetProjectExtensionImageRegex;
+exports.ProjectExtensionProviderForImageRegex = ProjectExtensionProviderForImageRegex;
+exports.buildApiUrl = buildApiUrl;
+exports.createApolloClient = createApolloClient;
+exports.createApolloContextForProxyForwardTo = createApolloContextForProxyForwardTo;
+exports.createHttpClientOptions = createHttpClientOptions;
+exports.executeHttpClientRequest = executeHttpClientRequest;
+exports.getCachedApolloClient = getCachedApolloClient;
+exports.getCorrelationId = getCorrelationId;
+exports.getMcApiUrl = getMcApiUrl;
+exports.isLoggerEnabled = isLoggerEnabled;
+exports.logger = logger;
+exports.normalizeAllAppliedActionRights = normalizeAllAppliedActionRights;
+exports.normalizeAllAppliedDataFences = normalizeAllAppliedDataFences;
+exports.normalizeAllAppliedMenuVisibilities = normalizeAllAppliedMenuVisibilities;
+exports.normalizeAllAppliedPermissions = normalizeAllAppliedPermissions;
+exports.oidcStorage = oidcStorage;
+exports.selectProjectKeyFromUrl = selectProjectKeyFromUrl;
+exports.selectTeamIdFromStorage = selectTeamIdFromStorage;
+exports.selectUserId = selectUserId;
+exports.setCachedApolloClient = setCachedApolloClient;
+exports.useApplicationContext = useApplicationContext;
+exports.useCustomViewContext = useCustomViewContext;
+exports.useCustomViewParentDataRefresher = useCustomViewParentDataRefresher;
+exports.useMcLazyQuery = useMcLazyQuery;
+exports.useMcMutation = useMcMutation;
+exports.useMcQuery = useMcQuery;
+exports.useProjectExtensionImageRegex = useProjectExtensionImageRegex;
+exports.version = version;
+exports.withApplicationContext = withApplicationContext;
+exports.withProjectExtensionImageRegex = withProjectExtensionImageRegex;