@commercetools-frontend/react-notifications 0.0.0-FEC-157-preview-releases-20241126230331

package/dist/commercetools-frontend-react-notifications.cjs.prod.js

@@ -0,0 +1,816 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _pt = require('prop-types');
+var react = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+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 reactIntl = require('react-intl');
+var constants = require('@commercetools-frontend/constants');
+var hooks = require('@commercetools-uikit/hooks');
+var icons = require('@commercetools-uikit/icons');
+var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var utils = require('@commercetools-uikit/utils');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+var omitBy = require('lodash/omitBy');
+var react$1 = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
+var reactRedux = require('react-redux');
+var notifications = require('@commercetools-frontend/notifications');
+var sentry = require('@commercetools-frontend/sentry');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var has = require('lodash/has');
+var Spacings = require('@commercetools-uikit/spacings');
+var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+var reselect = require('reselect');
+var isNumber = require('lodash/isNumber');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+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 SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var has__default = /*#__PURE__*/_interopDefault(has);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
+var isNumber__default = /*#__PURE__*/_interopDefault(isNumber);
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "22.35.1";
+
+const Context = /*#__PURE__*/react.createContext(() => null);
+function NotificationProviderForCustomComponent(props) {
+  return jsxRuntime.jsx(Context.Provider, {
+    value: props.mapNotificationToComponent,
+    children: props.children
+  });
+}
+NotificationProviderForCustomComponent.propTypes = {};
+NotificationProviderForCustomComponent.displayName = 'NotificationProviderForCustomComponent';
+const useCustomNotificationComponent = () => react.useContext(Context);
+
+function filterDataAttributes(obj) {
+  return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
+}
+
+var messages = reactIntl.defineMessages({
+  hideNotification: {
+    id: 'Notification.hideNotification',
+    description: 'Label for button to hide notification',
+    defaultMessage: 'Hide notification'
+  }
+});
+
+const getColorByType = value => {
+  switch (value) {
+    case constants.NOTIFICATION_KINDS_SIDE.success:
+      return designSystem.designTokens.colorSuccess;
+    case constants.NOTIFICATION_KINDS_SIDE.info:
+      return designSystem.designTokens.colorInfo;
+    case constants.NOTIFICATION_KINDS_SIDE.error:
+      return designSystem.designTokens.colorError;
+    case constants.NOTIFICATION_KINDS_SIDE.warning:
+      return designSystem.designTokens.colorWarning60;
+    default:
+      return 'transparent';
+  }
+};
+const getBorderColor = notificationKind => {
+  switch (notificationKind) {
+    case constants.NOTIFICATION_KINDS_SIDE.success:
+      return designSystem.designTokens.colorSuccess85;
+    case constants.NOTIFICATION_KINDS_SIDE.info:
+      return designSystem.designTokens.colorInfo85;
+    case constants.NOTIFICATION_KINDS_SIDE.error:
+      return designSystem.designTokens.colorError85;
+    case constants.NOTIFICATION_KINDS_SIDE.warning:
+      return designSystem.designTokens.colorWarning85;
+    default:
+      return 'transparent';
+  }
+};
+const showNotificationAnimation = react$1.keyframes`
+  0% {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+  }
+  100% {
+    max-height: 200px;
+  }
+`;
+const showNotificationSideAnimation = react$1.keyframes`
+  0% {
+    transform: translateX(50px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+`;
+const getStylesForNotificationIcon = props => /*#__PURE__*/react$1.css("display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:0;width:48px;height:100%;color:", designSystem.designTokens.colorSurface, ";border-radius:3px 0 0 3px;background:", getColorByType(props.type), ";" + ("" ), "" );
+const getStylesForCloseIcon = props => /*#__PURE__*/react$1.css("display:flex;justify-content:center;& svg{width:16px;height:16px;}", props.domain !== constants.NOTIFICATION_DOMAINS.SIDE ? '& svg { fill: ' + designSystem.designTokens.colorSurface + '; }' : '', ";" + ("" ), "" );
+const getStylesForContent = props => {
+  const fontColor = props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? designSystem.designTokens.colorSolid : designSystem.designTokens.colorSurface;
+  return /*#__PURE__*/react$1.css("flex-basis:100%;flex-grow:1;padding:", `0 ${designSystem.designTokens.spacingM}`, ";margin:0;font-size:", props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? '1rem' : 'inherit', ";color:", fontColor, ";p{color:", fontColor, ";}ul{padding:0;margin:0;list-style:none;}" + ("" ), "" );
+};
+const getStylesForNotification = props => {
+  const baseStyles = /*#__PURE__*/react$1.css("position:relative;display:flex;align-items:center;padding:", designSystem.designTokens.spacingM, ";color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" );
+  const pageStyles = /*#__PURE__*/react$1.css(baseStyles, ";animation:", showNotificationAnimation, " 0.3s forwards;text-align:center;background-color:", props.fixed ? 'transparent' : getColorByType(props.type), ";>*+*{margin-left:", designSystem.designTokens.spacingS, ";}" + ("" ), "" );
+  switch (props.domain) {
+    case constants.NOTIFICATION_DOMAINS.GLOBAL:
+      return /*#__PURE__*/react$1.css(pageStyles, ";background-color:", getColorByType(props.type), ";" + ("" ), "" );
+    case constants.NOTIFICATION_DOMAINS.PAGE:
+      return pageStyles;
+    case constants.NOTIFICATION_DOMAINS.SIDE:
+      {
+        const sideStyles = /*#__PURE__*/react$1.css(baseStyles, ";animation:", showNotificationAnimation, " 0.3s forwards;padding:", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " 50px!important;text-align:left;background:", designSystem.designTokens.colorSurface, ";border:1px solid ", getBorderColor(props.type), ";box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.15);border-radius:", designSystem.designTokens.borderRadius6, ";word-break:break-word;hyphens:auto;" + ("" ), "" );
+        if (props.fixed) return sideStyles;
+        return /*#__PURE__*/react$1.css(sideStyles, ";animation:", showNotificationSideAnimation, " 0.3s forwards;position:relative;z-index:10000;margin-top:", designSystem.designTokens.spacingL, "!important;right:", designSystem.designTokens.spacingXl, ";float:right;clear:both;max-width:50%;" + ("" ), "" );
+      }
+    default:
+      return /*#__PURE__*/react$1.css("" , "" );
+  }
+};
+
+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; }
+const sequentialId = utils.createSequentialId('notification-');
+const NotificationIcon = props => {
+  if (props.type === constants.NOTIFICATION_KINDS_SIDE.error) {
+    return jsxRuntime.jsx(icons.ErrorIcon, {
+      color: props.color
+    });
+  }
+  if (props.type === constants.NOTIFICATION_KINDS_SIDE.info) {
+    return jsxRuntime.jsx(icons.InformationIcon, {
+      color: props.color
+    });
+  }
+  if (props.type === constants.NOTIFICATION_KINDS_SIDE.warning) {
+    return jsxRuntime.jsx(icons.WarningIcon, {
+      color: props.color
+    });
+  }
+  return jsxRuntime.jsx(icons.CheckBoldIcon, {
+    color: props.color
+  });
+};
+NotificationIcon.propTypes = {};
+NotificationIcon.displayName = 'NotificationIcon';
+const defaultProps$1 = {
+  fixed: false
+};
+const Notification = props => {
+  const intl = reactIntl.useIntl();
+  const id = hooks.useFieldId(undefined, sequentialId);
+  return jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
+    role: "alertdialog",
+    "aria-describedby": id,
+    css: getStylesForNotification(props)
+  }, filterDataAttributes(props)), {}, {
+    children: [jsxRuntime.jsx("div", {
+      id: id,
+      css: getStylesForContent(props),
+      children: props.children
+    }), props.onCloseClick ? jsxRuntime.jsx("div", {
+      css: getStylesForCloseIcon(props),
+      children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+        label: intl.formatMessage(messages.hideNotification),
+        onClick: props.onCloseClick,
+        icon: jsxRuntime.jsx(icons.CloseBoldIcon, {}),
+        size: "30"
+      })
+    }) : null, props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? jsxRuntime.jsx("div", {
+      css: getStylesForNotificationIcon(props),
+      children: jsxRuntime.jsx(NotificationIcon, {
+        type: props.type,
+        color: "surface"
+      })
+    }) : null]
+  }));
+};
+Notification.propTypes = {};
+Notification.displayName = 'Notification';
+Notification.defaultProps = defaultProps$1;
+
+var apiErrorMessages = reactIntl.defineMessages({
+  General: {
+    id: 'ApiError.General',
+    description: 'A general error message, usually because of internal application problems. The user should not know the details of the error.',
+    defaultMessage: 'Sorry, but there seems to be something wrong. Please try again. If you are seeing this message for the second time, please contact our support team.'
+  },
+  // Custom API Error messages (without a matching error.code)
+  OverlappingPrices: {
+    id: 'ApiError.OverlappingPrices',
+    description: '',
+    defaultMessage: 'Sorry, but a price with these details already exists. Please amend the price details so that they do not overlap with another price before saving.'
+  },
+  ConcurrentModificationBulkEdit: {
+    id: 'ApiError.ConcurrentModificationBulkEdit',
+    description: 'User does a bulk update but someone else has saved changes for that element',
+    defaultMessage: 'Sorry, but we were unable to save your changes as someone else made changes to this same source while you were editing.'
+  },
+  // API errors
+  ConcurrentModification: {
+    id: 'ApiError.ConcurrentModification',
+    description: 'User edits form and clicks Save but someone else has saved changes for this element while they were editing',
+    defaultMessage: 'Sorry, but we were unable to save your changes as someone else made changes to this same source while you were editing. Please refresh the page and re-enter your changes.'
+  },
+  DuplicateAttributeValue: {
+    id: 'ApiError.DuplicateAttributeValue',
+    description: 'User tries to enter the same attribute value for an attribute with the Unique constraint',
+    defaultMessage: 'This value has already been used for another variant. The "{name}" value must be unique for all variants for this product. Please enter a different value.'
+  },
+  DuplicateAttributeValues: {
+    id: 'ApiError.DuplicateAttributeValues',
+    description: 'User tries to enter existing attribute values for a combination of attributes with the CombinationUnique constraint',
+    defaultMessage: 'This combination has already been used for another variant. The combination of these attributes must be unique across all variants. Please enter a different version.'
+  },
+  DuplicateField: {
+    id: 'ApiError.DuplicateField',
+    description: 'The given field must be unique across the project',
+    defaultMessage: 'The value for the field "{field}" has already been used. Please choose another value for this field.'
+  },
+  DuplicateSlug: {
+    id: 'ApiError.DuplicateSlug',
+    description: 'User tries to create a resource with an already existing slug',
+    defaultMessage: '"{slugValue}" is already in use. Please enter a new slug value for this product.'
+  },
+  DuplicatePriceScope: {
+    id: 'ApiError.DuplicatePriceScope',
+    description: 'User tries to create a price with the exact same values as for an already existing price',
+    defaultMessage: 'A price with the same scope already exists for this product variant. Make sure that the combination of currency, country, customer group, channel and valid dates is unique per price.'
+  },
+  DuplicateStandalonePriceScope: {
+    id: 'ApiError.DuplicateStandalonePriceScope',
+    description: 'User tries to create a standalone price with the exact same values as for an already existing standalone price',
+    defaultMessage: 'A price with the same scope already exists for this product variant. The combination of currency, country, customer group, channel and validity date must be unique for each price per SKU.'
+  },
+  DuplicateVariantValues: {
+    id: 'ApiError.DuplicateVariantValues',
+    description: 'User tries to generate a variant with the same SKU or attribute values',
+    defaultMessage: 'The same variant already exists for this product. Please enter different values for the fields.'
+  },
+  InvalidDateRange: {
+    id: 'ApiError.InvalidDateRange',
+    description: 'User tries to input an invalid date range',
+    defaultMessage: 'The value entered for the field {field} is invalid. The start date must be before the end date'
+  },
+  InvalidField: {
+    id: 'ApiError.InvalidField',
+    description: 'User enters an invalid value for a field.',
+    defaultMessage: 'The value entered is not valid for the field "{field}".'
+  },
+  InvalidSlug: {
+    id: 'ApiError.InvalidSlug',
+    description: 'User enters an invalid value for the product slug',
+    defaultMessage: 'Slugs may only contain alphanumeric (0-9A-Z) characters, underscores and hyphens and must have a length between 2 and 256 characters.'
+  },
+  OverlappingPriceValidity: {
+    id: 'ApiError.OverlappingPriceValidity',
+    description: 'Returned when a given price validity period conflicts with an existing one',
+    defaultMessage: 'Another price with overlapping validity dates exists. Each price combination needs to have unique validity dates.'
+  },
+  OverlappingStandalonePriceValidity: {
+    id: 'ApiError.OverlappingStandalonePriceValidity',
+    description: 'Returned when a given standalone price validity period conflicts with an existing one',
+    defaultMessage: 'Another price with overlapping validity dates exists. Each price combination needs to have unique validity dates.'
+  },
+  PendingOperation: {
+    id: 'ApiError.PendingOperation',
+    description: 'User tries to start a new process when one is already underway',
+    defaultMessage: 'Sorry, but we are still processing the previous request. Please try again once it is complete.'
+  },
+  ResourceNotFound: {
+    id: 'ApiError.ResourceNotFound',
+    description: 'System cannot find the functionality or screen that the user is trying to access.',
+    defaultMessage: 'Sorry, but we cannot find what you are looking for.'
+  },
+  ReferenceExists: {
+    id: 'ApiError.ReferenceExists',
+    description: 'User tries to delete an element that has an existing reference to it from another element',
+    defaultMessage: 'Can not delete a source while it is referenced from at least one "{referencedBy}".'
+  },
+  RequiredField: {
+    id: 'ApiError.RequiredField',
+    description: 'User does not enter a required field',
+    defaultMessage: '"{field}" is a required field. Please enter a value.'
+  },
+  RequiredFields: {
+    // Client side validation
+    id: 'ApiError.RequiredFields',
+    description: 'User submits a form without having completed all mandatory fields',
+    defaultMessage: 'Please enter values for the following required fields: {fields}'
+  },
+  SemanticError: {
+    id: 'ApiError.SemanticError',
+    description: 'User enters a predicate query that throws a system semantic error',
+    defaultMessage: 'Semantic error: the given Predicate is not valid. Please read the documentation to define a correct predicate.'
+  },
+  SyntaxError: {
+    id: 'ApiError.SyntaxError',
+    description: 'User enters a predicate query that throws a system syntax error',
+    defaultMessage: 'Syntax error: the given Predicate is not valid. Please read the documentation to define a correct predicate.'
+  },
+  Unauthorized: {
+    id: 'ApiError.Unauthorized',
+    description: 'The access token is not valid anymore, or the user does not have a valid one',
+    defaultMessage: 'Sorry, but you are not authorized to access this feature.'
+  },
+  Forbidden: {
+    id: 'ApiError.Forbidden',
+    description: 'User tries to access a view that they do not have permission for',
+    defaultMessage: 'You are not authorized to access this feature. Please contact your system administrator with any further questions.'
+  },
+  ExtensionNoResponse: {
+    id: 'ApiError.ExtensionNoResponse',
+    description: 'User tries to access a view that they do not have permission for',
+    defaultMessage: 'Sorry, we could not perform the requested action due to an API extension not responding.'
+  },
+  ExtensionBadResponse: {
+    id: 'ApiError.ExtensionBadResponse',
+    description: 'User tries to access a view that they do not have permission for',
+    defaultMessage: 'Sorry, we could not perform the requested action due to failed processing of an API extension response.'
+  },
+  ExtensionUpdateActionsFailed: {
+    id: 'ApiError.ExtensionUpdateActionsFailed',
+    description: 'User tries to access a view that they do not have permission for',
+    defaultMessage: 'Sorry, we could not perform the requested action. It is not possible to perform the update actions as instructed by the API extension.'
+  },
+  TaxCategoryDuplicateCountry: {
+    id: 'ApiError.TaxCategoryDuplicateCountry',
+    description: 'User inputs duplicate country and/or state into tax category form',
+    defaultMessage: 'Duplicate tax rates submitted. Please remove the duplicates.'
+  },
+  MaxResourceLimitExceeded: {
+    id: 'ApiError.MaxResourceLimitExceeded',
+    description: 'User attempts to create a resource while having already reached the limit',
+    defaultMessage: 'The project reached the limit for the resource. To add more resources delete existing ones or reach out to the administrator or contact customer support.'
+  }
+});
+
+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 _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys$3(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys$3(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const regexInvalidOperationRequiredAttribute = /^Required attribute '(.*)' cannot be removed/;
+
+// `error` fields for REST errors
+// `error.extensions` fields for GraphQL errors
+
+// The values passed to the Intl message must be a map of scalar values.
+// Some of the message values are already mapped in the `getSpecialFormattedMessageByErrorCode`
+// function. Here we map other possible error properties that can be
+// used in the message.
+const mapErrorFieldsToMessageValues = error => {
+  const errorField = error.extensions?.field || error.field;
+  if (errorField) {
+    return {
+      field: errorField
+    };
+  }
+  const errorReferencedBy = error.extensions?.referencedBy || error.referencedBy;
+  if (errorReferencedBy) {
+    return {
+      referencedBy: errorReferencedBy
+    };
+  }
+  return {};
+};
+
+// Type-guard validation for error code to be included in the message object keys.
+const hasErrorCodeAMatchingMessage = errorCode => errorCode in apiErrorMessages;
+const FormattedErrorMessage = props => {
+  var _context2;
+  const intl = reactIntl.useIntl();
+  // Attempt to map the error by code
+  const extensionErrorCode = props.error.extensions?.code ?? props.error.code;
+  const messageCode = extensionErrorCode && hasErrorCodeAMatchingMessage(extensionErrorCode) ? apiErrorMessages[extensionErrorCode] : undefined;
+  react.useEffect(() => {
+    if (!messageCode) {
+      var _context;
+      // This error is not mapped / translated yet,
+      // we log, report it to sentry and show the original error, unless `error.code` is `invalid_scope`
+      // which an error code emitted for expired project(s)
+      if (extensionErrorCode !== 'invalid_scope' && !_includesInstanceProperty__default["default"](_context = props.error.message).call(_context, 'has expired')) {
+        sentry.reportErrorToSentry(new Error('Unmapped error'), {
+          extra: props.error
+        });
+      }
+    }
+  }, [extensionErrorCode, messageCode, props.error]);
+  if (messageCode) {
+    // The `error` object might contain extra fields for the specific `code`.
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: intl.formatMessage(messageCode, mapErrorFieldsToMessageValues(props.error))
+    });
+  }
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: _filterInstanceProperty__default["default"](_context2 = [props.error.message, props.error.detailedErrorMessage && `(${props.error.detailedErrorMessage})`]).call(_context2, Boolean).join(' ')
+  });
+};
+FormattedErrorMessage.propTypes = {
+  error: _pt__default["default"].any.isRequired
+};
+FormattedErrorMessage.displayName = 'FormattedErrorMessage';
+const ApiErrorMessage = props => {
+  const intl = reactIntl.useIntl();
+
+  // Attempt to map the error to a specific error message
+  const specialFormattedMessage = getSpecialFormattedMessageByErrorCode(props.error, intl);
+  if (specialFormattedMessage) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: specialFormattedMessage
+    });
+  }
+  return jsxRuntime.jsx(FormattedErrorMessage, _objectSpread$3({}, props));
+};
+ApiErrorMessage.propTypes = {};
+ApiErrorMessage.displayName = 'ApiErrorMessage';
+function getSpecialFormattedMessageByErrorCode(error, intl) {
+  var _context3, _context4, _context5;
+  const extensionErrorCode = error.extensions?.code ?? error.code;
+  if (error.errorByExtension) {
+    let extensionMessage;
+    if (error.localizedMessage) {
+      extensionMessage = error.localizedMessage[intl.locale];
+    }
+    return extensionMessage || error.message;
+  }
+  if (!extensionErrorCode || extensionErrorCode === 'InvalidInput') return intl.formatMessage(apiErrorMessages.General);
+
+  // TODO: this is a temporary solution until we have proper pages about 403
+  if (extensionErrorCode === 'insufficient_scope') return intl.formatMessage(apiErrorMessages.Forbidden);
+  if (extensionErrorCode === 'DuplicateField') {
+    const errorField = error.extensions?.field || error.field;
+    const errorDuplicateValue = error.extensions?.duplicateValue || error.duplicateValue;
+    if (errorField === 'slug') {
+      return intl.formatMessage(apiErrorMessages.DuplicateSlug, {
+        slugValue: errorDuplicateValue
+      });
+    } else {
+      return intl.formatMessage(apiErrorMessages.DuplicateField, {
+        field: errorField
+      });
+    }
+  }
+
+  // Try to match the error with a custom error message
+  if (has__default["default"](error, 'invalidValue') && has__default["default"](error.invalidValue, 'overlappingPrices')) return intl.formatMessage(apiErrorMessages.OverlappingPrices);
+  if (extensionErrorCode === 'InvalidOperation' && _includesInstanceProperty__default["default"](_context3 = error.message).call(_context3, 'validFrom') && _includesInstanceProperty__default["default"](_context4 = error.message).call(_context4, 'validUntil')) {
+    return intl.formatMessage(apiErrorMessages.InvalidDateRange, {
+      field: 'validFrom'
+    });
+  }
+  if (extensionErrorCode === 'InvalidOperation' && _includesInstanceProperty__default["default"](_context5 = error.message).call(_context5, 'Duplicate tax rate for')) {
+    return intl.formatMessage(apiErrorMessages.TaxCategoryDuplicateCountry);
+  }
+  if (extensionErrorCode === 'InvalidOperation' && regexInvalidOperationRequiredAttribute.test(error.message)) {
+    const attrName = error.message.replace(regexInvalidOperationRequiredAttribute, '$1');
+    return intl.formatMessage(apiErrorMessages.RequiredField, {
+      field: attrName
+    });
+  }
+
+  // TODO: A concern has be raised that we can't accurately distinguish
+  // this error (invalid start / end dates with prices) from other price
+  // errors. We should investigate this further.
+  if (extensionErrorCode === 'InvalidField' && error.field === 'price' && has__default["default"](error, 'invalidValue') && has__default["default"](error.invalidValue, 'validFrom') && has__default["default"](error.invalidValue, 'validUntil')) return intl.formatMessage(apiErrorMessages.InvalidDateRange, {
+    field: error.field
+  });
+  if (extensionErrorCode === 'DuplicateAttributeValue' && error.attribute) {
+    return intl.formatMessage(apiErrorMessages.DuplicateAttributeValue, {
+      name: error.attribute.name
+    });
+  }
+  if (extensionErrorCode === 'MaxResourceLimitExceeded') {
+    return intl.formatMessage(apiErrorMessages.MaxResourceLimitExceeded);
+  }
+  return;
+}
+
+const ApiErrorNotification = props => {
+  var _context;
+  return jsxRuntime.jsx(Notification, {
+    type: "error",
+    domain: props.notification.domain,
+    onCloseClick: props.dismiss,
+    children: jsxRuntime.jsx("ul", {
+      children: _valuesInstanceProperty__default["default"](props.notification) && _mapInstanceProperty__default["default"](_context = _valuesInstanceProperty__default["default"](props.notification).errors).call(_context, (error, idx) => {
+        const extensionErrorCode = error.extensions?.code ?? error.code;
+        const shouldLogErrorToConsole = !extensionErrorCode &&         "production" === 'development';
+        if (shouldLogErrorToConsole) {
+          /**
+           * NOTE: This is an API error which usually contains
+           * a `code` property such as `DuplicateField` or `InvalidOperation`.
+           * If this `code` does not exist the API is not conforming to its
+           * own error specification.
+           */
+          // eslint-disable-next-line no-console
+          console.error('Unknown API error', error);
+        }
+        return jsxRuntime.jsx("li", {
+          children: jsxRuntime.jsx(ApiErrorMessage, {
+            error: error
+          })
+        }, idx);
+      })
+    })
+  });
+};
+ApiErrorNotification.propTypes = {};
+ApiErrorNotification.displayName = 'ApiErrorNotification';
+
+const GenericNotification = props => jsxRuntime.jsx(Notification, {
+  domain: props.notification.domain,
+  type: props.notification.kind,
+  onCloseClick: props.dismiss,
+  children: props.notification.text
+});
+GenericNotification.propTypes = {};
+GenericNotification.displayName = 'GenericNotification';
+
+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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(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$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const UnexpectedErrorNotification = props => jsxRuntime.jsx(Notification, {
+  type: "error",
+  domain: props.notification.domain,
+  onCloseClick: props.dismiss,
+  children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+    children: [jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, apiErrorMessages.General))
+    }), _valuesInstanceProperty__default["default"](props.notification) && _valuesInstanceProperty__default["default"](props.notification).errorId && jsxRuntime.jsx("div", {
+      children: `ID (${_valuesInstanceProperty__default["default"](props.notification).errorId})`
+    })]
+  })
+});
+UnexpectedErrorNotification.propTypes = {};
+UnexpectedErrorNotification.displayName = 'UnexpectedErrorNotification';
+
+const getStyles = props => {
+  const baseStyles = /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorSurface, ";position:relative;width:100%;z-index:19999;" + ("" ), "" );
+  switch (props.domain) {
+    case constants.NOTIFICATION_DOMAINS.GLOBAL:
+      return /*#__PURE__*/react$1.css(baseStyles, ";text-align:center;width:100%!important;" + ("" ), "" );
+    case constants.NOTIFICATION_DOMAINS.PAGE:
+      return /*#__PURE__*/react$1.css(baseStyles, ";" + ("" ), "" );
+    case constants.NOTIFICATION_DOMAINS.SIDE:
+      return /*#__PURE__*/react$1.css(baseStyles, ";position:absolute;text-align:left;height:0;overflow:visible;" + ("" ), "" );
+    default:
+      return /*#__PURE__*/react$1.css("" , "" );
+  }
+};
+
+// These selectors are okay memoization-wise, but once a single notifications
+// is added or removed the memoization for all domain selectors is reset
+const selectNotifications = state => state.notifications;
+const selectGlobalNotifications = reselect.createSelector(selectNotifications, notifications => {
+  var _context;
+  return _sliceInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](notifications).call(notifications, notification => notification.domain === constants.NOTIFICATION_DOMAINS.GLOBAL)
+  // Return only 1 at a time
+  ).call(_context, 0, 1);
+});
+const selectPageNotifications = reselect.createSelector(selectNotifications, notifications => _filterInstanceProperty__default["default"](notifications).call(notifications, notification => notification.domain === constants.NOTIFICATION_DOMAINS.PAGE));
+const selectSideNotifications = reselect.createSelector(selectNotifications, notifications => _filterInstanceProperty__default["default"](notifications).call(notifications, notification => notification.domain === constants.NOTIFICATION_DOMAINS.SIDE));
+
+const _excluded = ["values"],
+  _excluded2 = ["text"],
+  _excluded3 = ["values"],
+  _excluded4 = ["text"],
+  _excluded5 = ["text"];
+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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(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$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const NotificationsListGlobal = props => {
+  const dispatch = reactRedux.useDispatch();
+  const mapCustomNotificationToComponent = useCustomNotificationComponent();
+  const notifications$1 = reactRedux.useSelector(selectGlobalNotifications);
+  return jsxRuntime.jsx("div", {
+    id: `notifications-${props.domain}`,
+    css: getStyles(props),
+    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
+      // 1. Check if there is a custom notification component first
+      const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
+      if (CustomNotificationComponent) {
+        return jsxRuntime.jsx(CustomNotificationComponent, {
+          notification: notification,
+          dismiss: () => {
+            dispatch(notifications.removeNotification(notification.id));
+          }
+        }, notification.id);
+      }
+      switch (notification.kind) {
+        case constants.NOTIFICATION_KINDS_GLOBAL.error:
+        case constants.NOTIFICATION_KINDS_GLOBAL.warning:
+        case constants.NOTIFICATION_KINDS_GLOBAL.info:
+        case constants.NOTIFICATION_KINDS_GLOBAL.success:
+          {
+            _valuesInstanceProperty__default["default"](notification);
+              const genericNotification = _objectWithoutProperties(notification, _excluded);
+            return jsxRuntime.jsx(GenericNotification, {
+              notification: genericNotification,
+              dismiss: () => {
+                dispatch(notifications.removeNotification(notification.id));
+              }
+            }, notification.id);
+          }
+        case constants.NOTIFICATION_KINDS_GLOBAL['unexpected-error']:
+          {
+            notification.text;
+              const errorNotification = _objectWithoutProperties(notification, _excluded2);
+            return jsxRuntime.jsx(UnexpectedErrorNotification, {
+              notification: errorNotification,
+              dismiss: () => {
+                dispatch(notifications.removeNotification(notification.id));
+              }
+            }, notification.id);
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    })
+  });
+};
+const NotificationsListPage = props => {
+  const dispatch = reactRedux.useDispatch();
+  const mapCustomNotificationToComponent = useCustomNotificationComponent();
+  const notifications$1 = reactRedux.useSelector(selectPageNotifications);
+  return jsxRuntime.jsx("div", {
+    id: `notifications-${props.domain}`,
+    css: getStyles(props),
+    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
+      // 1. Check if there is a custom notification component first
+      const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
+      if (CustomNotificationComponent) {
+        return jsxRuntime.jsx(CustomNotificationComponent, {
+          notification: notification,
+          dismiss: () => {
+            dispatch(notifications.removeNotification(notification.id));
+          }
+        }, notification.id);
+      }
+      switch (notification.kind) {
+        case constants.NOTIFICATION_KINDS_PAGE.error:
+        case constants.NOTIFICATION_KINDS_PAGE.warning:
+        case constants.NOTIFICATION_KINDS_PAGE.info:
+        case constants.NOTIFICATION_KINDS_PAGE.success:
+          {
+            _valuesInstanceProperty__default["default"](notification);
+              const genericNotification = _objectWithoutProperties(notification, _excluded3);
+            return jsxRuntime.jsx(GenericNotification, {
+              notification: _objectSpread$1(_objectSpread$1({}, genericNotification), {}, {
+                kind: notification.kind
+              }),
+              dismiss: () => {
+                dispatch(notifications.removeNotification(notification.id));
+              }
+            }, notification.id);
+          }
+        case constants.NOTIFICATION_KINDS_PAGE['api-error']:
+          {
+            notification.text;
+              const errorNotification = _objectWithoutProperties(notification, _excluded4);
+            return jsxRuntime.jsx(ApiErrorNotification, {
+              notification: errorNotification,
+              dismiss: () => {
+                dispatch(notifications.removeNotification(notification.id));
+              }
+            }, notification.id);
+          }
+        case constants.NOTIFICATION_KINDS_PAGE['unexpected-error']:
+          {
+            notification.text;
+              const errorNotification = _objectWithoutProperties(notification, _excluded5);
+            return jsxRuntime.jsx(UnexpectedErrorNotification, {
+              notification: _objectSpread$1(_objectSpread$1({}, errorNotification), {}, {
+                values: _valuesInstanceProperty__default["default"](notification)
+              }),
+              dismiss: () => {
+                dispatch(notifications.removeNotification(notification.id));
+              }
+            }, notification.id);
+          }
+        default:
+          return null;
+      }
+    })
+  });
+};
+const NotificationsListSide = props => {
+  const dispatch = reactRedux.useDispatch();
+  const mapCustomNotificationToComponent = useCustomNotificationComponent();
+  const notifications$1 = reactRedux.useSelector(selectSideNotifications);
+  return jsxRuntime.jsx("div", {
+    id: `notifications-${props.domain}`,
+    css: getStyles(props),
+    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
+      // 1. Check if there is a custom notification component first
+      const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
+      if (CustomNotificationComponent) {
+        return jsxRuntime.jsx(CustomNotificationComponent, {
+          notification: notification,
+          dismiss: () => {
+            dispatch(notifications.removeNotification(notification.id));
+          }
+        }, notification.id);
+      }
+      switch (notification.kind) {
+        case constants.NOTIFICATION_KINDS_SIDE.error:
+        case constants.NOTIFICATION_KINDS_SIDE.warning:
+        case constants.NOTIFICATION_KINDS_SIDE.info:
+        case constants.NOTIFICATION_KINDS_SIDE.success:
+          return jsxRuntime.jsx(GenericNotification, {
+            notification: notification,
+            dismiss: () => {
+              dispatch(notifications.removeNotification(notification.id));
+            }
+          }, notification.id);
+        default:
+          return null;
+      }
+    })
+  });
+};
+const NotificationsList = props => {
+  switch (props.domain) {
+    case constants.NOTIFICATION_DOMAINS.GLOBAL:
+      return jsxRuntime.jsx(NotificationsListGlobal, _objectSpread$1({}, props));
+    case constants.NOTIFICATION_DOMAINS.PAGE:
+      return jsxRuntime.jsx(NotificationsListPage, _objectSpread$1({}, props));
+    case constants.NOTIFICATION_DOMAINS.SIDE:
+      return jsxRuntime.jsx(NotificationsListSide, _objectSpread$1({}, props));
+    default:
+      return null;
+  }
+};
+NotificationsList.displayName = 'NotificationsList';
+
+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 defaultProps = {
+  domain: constants.NOTIFICATION_DOMAINS.SIDE,
+  kind: constants.NOTIFICATION_KINDS_SIDE.success
+};
+const Notifier = props => {
+  const showNotification = actionsGlobal.useShowNotification();
+  react.useEffect(() => {
+    const notification = showNotification({
+      domain: props.domain,
+      kind: props.kind,
+      text: props.text
+    }, isNumber__default["default"](props.dismissAfter) ? _objectSpread(_objectSpread({}, props.meta), {}, {
+      dismissAfter: props.dismissAfter
+    }) : props.meta);
+    return () => {
+      // Remove notification when component "unmounts"
+      notification.dismiss && notification.dismiss();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // We want to run this only once, when the component mounts the first time. Therefore we need to pass an empty array, even though the eslint rule shows a warning.
+
+  return null;
+};
+Notifier.propTypes = {
+  domain: _pt__default["default"].any.isRequired,
+  kind: _pt__default["default"].any.isRequired,
+  text: _pt__default["default"].string,
+  meta: _pt__default["default"].objectOf(_pt__default["default"].any),
+  dismissAfter: _pt__default["default"].number
+};
+Notifier.displayName = 'Notifier';
+Notifier.defaultProps = defaultProps;
+
+exports.ApiErrorMessage = ApiErrorMessage;
+exports.Notification = Notification;
+exports.NotificationProviderForCustomComponent = NotificationProviderForCustomComponent;
+exports.NotificationsList = NotificationsList;
+exports.Notifier = Notifier;
+exports.selectGlobalNotifications = selectGlobalNotifications;
+exports.selectPageNotifications = selectPageNotifications;
+exports.selectSideNotifications = selectSideNotifications;
+exports.version = version;