@commercetools-frontend/application-shell 0.0.0-FEC-157-preview-releases-20241126230331

package/dist/project-container-091b168d.cjs.dev.js

@@ -0,0 +1,390 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _pt = require('prop-types');
+var react = require('react');
+var isNil = require('lodash/isNil');
+var ReactDOM = require('react-dom');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var constants = require('@commercetools-frontend/constants');
+var reactNotifications = require('@commercetools-frontend/react-notifications');
+var oidc = require('./oidc-8827f9fe.cjs.dev.js');
+var applicationEntryPoint = require('./application-entry-point-547561a2.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-76b6a9ad.cjs.dev.js');
+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 _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var reactSelect = require('react-select');
+var applicationComponents = require('@commercetools-frontend/application-components');
+var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
+var designSystem = require('@commercetools-uikit/design-system');
+var IconButton = require('@commercetools-uikit/icon-button');
+var icons = require('@commercetools-uikit/icons');
+var SelectInput = require('@commercetools-uikit/select-input');
+var Spacings = require('@commercetools-uikit/spacings');
+var Text = require('@commercetools-uikit/text');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('tiny-invariant');
+require('@commercetools-frontend/application-config/ssr');
+require('@commercetools-frontend/permissions');
+require('./index-b1476d46.cjs.dev.js');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/reflect/has');
+require('@reduxjs/toolkit');
+require('lodash/mapValues');
+require('omit-empty-es');
+require('redux-thunk');
+require('@commercetools-frontend/notifications');
+require('@commercetools-frontend/sdk');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@commercetools-frontend/sentry');
+require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+require('redux-logger');
+require('@emotion/styled/base');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@emotion/react');
+require('@commercetools-frontend/i18n');
+require('@babel/runtime-corejs3/core-js-stable/url');
+require('@commercetools-uikit/flat-button');
+require('./location-c835b8df.cjs.dev.js');
+require('memoize-one');
+require('@commercetools-frontend/assets/images/ct-logo.svg');
+require('@commercetools-uikit/loading-spinner');
+require('@commercetools-frontend/browser-history');
+require('@commercetools-frontend/l10n');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
+require('@babel/runtime-corejs3/core-js-stable/instance/flags');
+require('@apollo/client/react');
+require('@flopflip/combine-adapters');
+require('@flopflip/http-adapter');
+require('@flopflip/launchdarkly-adapter');
+require('@flopflip/react-broadcast');
+require('@flopflip/types');
+require('react-redux');
+require('@commercetools-uikit/design-system/materials/resets.css');
+require('@flopflip/memory-adapter');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@commercetools-frontend/actions-global');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var isNil__default = /*#__PURE__*/_interopDefault(isNil);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var AccessibleHidden__default = /*#__PURE__*/_interopDefault(AccessibleHidden);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+
+var messages$1 = reactIntl.defineMessages({
+  localesLabel: {
+    id: 'LocaleSwitcher.localesLabel',
+    description: 'The label for project dropdown switcher',
+    defaultMessage: 'Locales'
+  },
+  dialogLocaleTitle: {
+    id: 'LocaleSwitcher.dialogLocaleTitle',
+    description: 'The title for the data locale dialog',
+    defaultMessage: 'Selecting a data locale'
+  },
+  dialogLocaleDescription: {
+    id: 'LocaleSwitcher.dialogLocaleDescription',
+    description: 'The description for the data locale dialog',
+    defaultMessage: "The selected data locale will serve as the default setting for all localized fields within the Merchant Center, including names, descriptions, and other localized attributes. <newline></newline><newline></newline> It's important to note that this selection does not affect the interface language of the Merchant Center or any data formatting options. To modify these settings, navigate to your user profile."
+  }
+});
+
+const _excluded = ["setIsOpen"];
+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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(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(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const LOCALE_SWITCHER_LABEL_ID = 'locale-switcher-label';
+const SingleValue = props => {
+  return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+    scale: "xs",
+    alignItems: "center",
+    children: [jsxRuntime.jsx(icons.WorldIcon, {
+      size: "big"
+    }), jsxRuntime.jsx(Text__default["default"].Body, {
+      fontWeight: "medium",
+      children: props.children
+    })]
+  });
+};
+SingleValue.displayName = 'SingleValue';
+const PatchedValueContainer = props => jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread(_objectSpread({}, props), {}, {
+  innerProps: {
+    style: {
+      display: 'flex',
+      fontWeight: designSystem.designTokens.fontWeight500
+    }
+  }
+}));
+PatchedValueContainer.displayName = 'PatchedValueContainer';
+const CustomMenuList = props => {
+  return jsxRuntime.jsx(reactSelect.components.MenuList, _objectSpread(_objectSpread({}, props), {}, {
+    children: props.children
+  }));
+};
+const CustomGroupHeading = props => {
+  const setIsOpen = props.setIsOpen,
+    groupProps = _objectWithoutProperties(props, _excluded);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(reactSelect.components.GroupHeading, _objectSpread(_objectSpread({}, groupProps), {}, {
+      children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+        scale: "xs",
+        alignItems: "center",
+        children: [jsxRuntime.jsx("span", {
+          children: groupProps.children
+        }), jsxRuntime.jsx(IconButton__default["default"], {
+          icon: jsxRuntime.jsx(icons.InformationIcon, {}),
+          label: "Locales info",
+          size: "10",
+          onClick: () => setIsOpen(true)
+        })]
+      })
+    }))
+  });
+};
+CustomGroupHeading.displayName = 'CustomGroupHeading';
+const LocaleSwitcher = props => {
+  var _context;
+  const _useModalState = applicationComponents.useModalState(),
+    isModalOpen = _useModalState.isModalOpen,
+    openModal = _useModalState.openModal,
+    closeModal = _useModalState.closeModal;
+  const setProjectDataLocale = props.setProjectDataLocale;
+  const getNewLine = () => jsxRuntime.jsx("br", {});
+  const intl = reactIntl.useIntl();
+  const handleSelection = react.useCallback(event => {
+    setProjectDataLocale(event.target.value);
+  }, [setProjectDataLocale]);
+  const localeOptions = [{
+    label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages$1.localesLabel)),
+    options: _mapInstanceProperty__default["default"](_context = props.availableLocales).call(_context, locale => ({
+      label: locale,
+      value: locale
+    }))
+  }];
+  return jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: LOCALE_SWITCHER_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages$1.localesLabel))
+      })
+    }), jsxRuntime.jsx(SelectInput__default["default"], {
+      value: props.projectDataLocale,
+      name: "locale-switcher",
+      "aria-labelledby": LOCALE_SWITCHER_LABEL_ID,
+      onChange: handleSelection,
+      options: localeOptions,
+      components: {
+        SingleValue,
+        ValueContainer: PatchedValueContainer,
+        MenuList: CustomMenuList,
+        GroupHeading: groupProps => jsxRuntime.jsx(CustomGroupHeading, _objectSpread(_objectSpread({}, groupProps), {}, {
+          setIsOpen: openModal
+        }))
+      },
+      isClearable: false,
+      backspaceRemovesValue: false,
+      isSearchable: false,
+      horizontalConstraint: 'auto',
+      appearance: "quiet",
+      maxMenuHeight: 360,
+      minMenuWidth: 3
+    }), jsxRuntime.jsx(applicationComponents.InfoDialog, {
+      isOpen: isModalOpen,
+      title: intl.formatMessage(messages$1.dialogLocaleTitle),
+      onClose: closeModal,
+      children: jsxRuntime.jsx(Text__default["default"].Body, {
+        intlMessage: _objectSpread(_objectSpread({}, messages$1.dialogLocaleDescription), {}, {
+          values: {
+            newline: getNewLine
+          }
+        })
+      })
+    })]
+  });
+};
+LocaleSwitcher.propTypes = process.env.NODE_ENV !== "production" ? {
+  projectDataLocale: _pt__default["default"].string.isRequired,
+  setProjectDataLocale: _pt__default["default"].func.isRequired,
+  availableLocales: _pt__default["default"].arrayOf(_pt__default["default"].string).isRequired
+} : {};
+
+const ProjectExpired = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-expired-47196b04.cjs.dev.js' /* webpackChunkName: "project-expired" */); }));
+
+const ProjectNotFound = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-found-fef5d1f1.cjs.dev.js' /* webpackChunkName: "project-not-found" */); }));
+
+const ProjectNotInitialized = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-initialized-e1b3ec3f.cjs.dev.js' /* webpackChunkName: "project-not-initialized" */); }));
+
+const ProjectSuspended = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-suspended-a29d0f56.cjs.dev.js' /* webpackChunkName: "project-suspended" */); }));
+
+var messages = reactIntl.defineMessages({
+  trialDaysLeft: {
+    id: 'Project.trialDaysLeft',
+    defaultMessage: 'Your project trial period will expire in {daysLeft} {daysLeft, plural, one {day} other {days}}. For any inquiries please contact sales@commercetools.com'
+  }
+});
+
+// A trial expire notification should be displayed from 2 weeks before the project expires
+const minDaysToDisplayNotification = 14;
+const maxDaysToDisplayNotification = 0;
+const shouldShowNotificationForTrialExpired = daysLeft => !isNil__default["default"](daysLeft) && daysLeft <= minDaysToDisplayNotification && daysLeft >= maxDaysToDisplayNotification;
+const ProjectContainer = props => {
+  const intl = reactIntl.useIntl();
+  const location = reactRouterDom.useLocation();
+  const match = reactRouterDom.useRouteMatch();
+  const _useState = react.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    localeSwitcherNode = _useState2[0],
+    setLocaleSwitcherNode = _useState2[1];
+  react.useEffect(() => {
+    /**
+     * NOTE: in order to render a component into a portal, the portal
+     * DOM node needs to exists in the DOM.
+     * If we try to get the DOM node by id before the components are
+     * actually mounted, we won't find the DOM node, hence we can't render
+     * the portal.
+     * To work around this issue, we simply wait that the component is
+     * mounted, then we render the portal.
+     *
+     * From the reactjs docs: https://reactjs.org/docs/portals.html
+     * "
+     *   If a child component requires to be attached to the DOM tree
+     *   immediately when mounted, for example to measure a
+     *   DOM node, or uses 'autoFocus' in a descendant, add
+     *   state to Modal and only render the children when Modal
+     *   is inserted in the DOM tree.
+     * "
+     */
+    setLocaleSwitcherNode(document.getElementById(oidc.CONTAINERS.LOCALE_SWITCHER));
+  }, [setLocaleSwitcherNode]);
+  const projectKey = match.params.projectKey;
+  react.useEffect(() => {
+    // Ensure to sync the `projectKey` from the URL with localStorage.
+    if (projectKey) {
+      window.localStorage.setItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY, projectKey);
+    }
+  }, [projectKey]);
+  const hasNoProjects = props.user && props.user.projects.total === 0;
+  /**
+   * Given the user does not have any projects and account creation (sign up) is not yet
+   * enabled the user will be logged out.
+   *
+   * Given the user does not have project (and as a result is not part of an organization)
+   * the account application gets control over render. If any other application
+   * is requested to render a full page redirect (to have the proxy serve the request) occurs
+   * given the application is served by the proxy.
+   *    Given the application is not served by the proxy we do not perform a redirect as
+   *    otherwise a redirect loop can occur as no application is able to handle the route.
+   */
+  if (hasNoProjects && props.environment.enableSignUp !== true && props.environment.servedByProxy) return jsxRuntime.jsx(reactRouterDom.Redirect, {
+    to: `/logout?reason=${constants.LOGOUT_REASONS.NO_PROJECTS}`
+  });
+  if (hasNoProjects && props.environment.enableSignUp) return jsxRuntime.jsxs(reactRouterDom.Switch, {
+    children: [jsxRuntime.jsx(reactRouterDom.Route, {
+      path: "/account",
+      children: props.render?.()
+    }), jsxRuntime.jsx(reactRouterDom.Route, {
+      children: jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.RedirectToProjectCreate, {})
+    })]
+  });
+  return jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.ErrorBoundary, {
+    pathname: location.pathname,
+    children: jsxRuntime.jsx(react.Suspense, {
+      fallback: jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.ApplicationLoader, {}),
+      children: jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.FetchProject, {
+        skip: !props.user || !props.user.defaultProjectKey,
+        projectKey: projectKey,
+        children: _ref => {
+          let isProjectLoading = _ref.isLoading,
+            project = _ref.project;
+          // TODO: do something if there is an `error`?
+          if (isProjectLoading) return jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.ApplicationLoader, {});
+          if (!project) return jsxRuntime.jsx(ProjectNotFound, {});
+          if (project.suspension && project.suspension.isActive) return jsxRuntime.jsx(ProjectSuspended, {
+            isTemporary: project.suspension.reason === oidc.SUSPENSION_REASONS.TEMPORARY_MAINTENANCE
+          });
+          if (project.expiry && project.expiry.isActive) return jsxRuntime.jsx(ProjectExpired, {});
+          if (project.initialized === false) return jsxRuntime.jsx(ProjectNotInitialized, {});
+          return jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.ProjectDataLocale, {
+            locales: project.languages,
+            children: _ref2 => {
+              let locale = _ref2.locale,
+                setProjectDataLocale = _ref2.setProjectDataLocale;
+              return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+                user: props.user,
+                project: project,
+                projectDataLocale: locale,
+                environment: props.environment,
+                children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                  children: [shouldShowNotificationForTrialExpired(project.expiry.daysLeft ?? undefined) && jsxRuntime.jsx(reactNotifications.Notifier, {
+                    kind: "warning",
+                    domain: constants.DOMAINS.GLOBAL,
+                    text: intl.formatMessage(messages.trialDaysLeft, {
+                      daysLeft: project.expiry.daysLeft || 0
+                    })
+                  }), localeSwitcherNode &&
+                  // Render the `<LocaleSwitcher>` only if the project has more
+                  // than one language.
+                  project.languages.length > 1 && /*#__PURE__*/ReactDOM__default["default"].createPortal(jsxRuntime.jsx(LocaleSwitcher
+                  // Be explicit on listing the props so that we can better assert it.
+                  , {
+                    projectDataLocale: locale,
+                    setProjectDataLocale: setProjectDataLocale,
+                    availableLocales: project.languages
+                  }), localeSwitcherNode), jsxRuntime.jsx(applicationEntryPoint.ApplicationEntryPoint, {
+                    environment: props.environment,
+                    disableRoutePermissionCheck: props.disableRoutePermissionCheck,
+                    render: props.render,
+                    children: props.children
+                  })]
+                })
+              });
+            }
+          });
+        }
+      })
+    })
+  });
+};
+ProjectContainer.propTypes = process.env.NODE_ENV !== "production" ? {
+  disableRoutePermissionCheck: _pt__default["default"].bool,
+  render: _pt__default["default"].func,
+  children: _pt__default["default"].node
+} : {};
+ProjectContainer.displayName = 'ProjectContainer';
+
+exports["default"] = ProjectContainer;