@commercetools-frontend/experimental-components 0.0.2

package/src/features/platform-limits/customers/hooks/use-customers-platform-limits-status/use-customers-platform-limits-status.spec.js

@@ -0,0 +1,61 @@
+import {
+  screen,
+  renderApp,
+} from '@commercetools-frontend/application-shell/test-utils';
+import usePlatformLimitsFetcher from '../../../shared/hooks/use-platform-limits-fetcher';
+import useCustomersPlatformLimitsStatus from './use-customers-platform-limits-status';
+
+jest.mock('../../../shared/hooks/use-platform-limits-fetcher');
+
+const TestComponent = () => {
+  const customersPlatformLimits = useCustomersPlatformLimitsStatus();
+
+  const { hasReachedCustomersWarningLimit, hasReachedCustomersErrorLimit } =
+    customersPlatformLimits;
+
+  return (
+    <ul>
+      <li>
+        Reached warning limit: {hasReachedCustomersWarningLimit ? 'Yes' : 'No'}
+      </li>
+      <li>Has reached limit: {hasReachedCustomersErrorLimit ? 'Yes' : 'No'}</li>
+    </ul>
+  );
+};
+
+describe('useCustomersPlatformLimitsStatus', () => {
+  describe('when warning limit has not been exceeded', () => {
+    it('should not warn', () => {
+      usePlatformLimitsFetcher.withCustomersWithNonExceeded();
+      renderApp(<TestComponent />);
+
+      expect(
+        screen.getByText(/Reached warning limit: No/i)
+      ).toBeInTheDocument();
+      expect(screen.getByText(/Has reached limit: No/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('when warning limit has been exceeded', () => {
+    it('should warn', () => {
+      usePlatformLimitsFetcher.withCustomersWithWarningExceeded();
+      renderApp(<TestComponent />);
+
+      expect(
+        screen.getByText(/Reached warning limit: Yes/i)
+      ).toBeInTheDocument();
+      expect(screen.getByText(/Has reached limit: No/i)).toBeInTheDocument();
+    });
+  });
+  describe('when error limit has been exceeded', () => {
+    it('should return limit exceeded error', () => {
+      usePlatformLimitsFetcher.withCustomersWithExceeded();
+      renderApp(<TestComponent />);
+
+      expect(
+        screen.getByText(/Reached warning limit: Yes/i)
+      ).toBeInTheDocument();
+      expect(screen.getByText(/Has reached limit: Yes/i)).toBeInTheDocument();
+    });
+  });
+});

package/src/features/platform-limits/customers/index.js

@@ -0,0 +1,3 @@
+export { useCustomersPlatformLimits } from './hooks';
+
+export { injectCustomersPlatformLimits } from './hocs';

package/src/features/platform-limits/index.js

@@ -0,0 +1,21 @@
+export {
+  useShippingMethodsPlatformLimits,
+  injectShippingMethodsPlatformLimits,
+} from './shipping-methods';
+
+export {
+  useTaxCategoriesPlatformLimits,
+  injectTaxCategoriesPlatformLimits,
+} from './tax-categories';
+
+export { useZonesPlatformLimits, injectZonesPlatformLimits } from './zones';
+
+export {
+  useCustomersPlatformLimits,
+  injectCustomersPlatformLimits,
+} from './customers';
+
+export {
+  useCustomerGroupsPlatformLimits,
+  injectCustomerGroupsPlatformLimits,
+} from './customer-groups';

package/src/features/platform-limits/shared/components/index.js

@@ -0,0 +1,2 @@
+export { default as Notifications } from './notifications';
+export { default as StatusText } from './status-text';

package/src/features/platform-limits/shared/components/notifications/error/error.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { ContentNotification, Link } from '@commercetools-frontend/ui-kit';
+import messages from './messages';
+import { CUSTOMER_SUPPORT_LINK } from '../../../constants';
+
+// eslint-disable-next-line react/display-name
+const getCustomerSupportLink = (msg) => (
+  <Link isExternal to={CUSTOMER_SUPPORT_LINK} key={msg}>
+    {msg}
+  </Link>
+);
+
+const PlatformLimitErrorNotification = ({ resource, limit }) => (
+  <ContentNotification type="error">
+    <FormattedMessage
+      {...messages[resource]}
+      values={{ limit, customersupport: getCustomerSupportLink }}
+    >
+      {(message) => <div>{message}</div>}
+    </FormattedMessage>
+  </ContentNotification>
+);
+
+PlatformLimitErrorNotification.propTypes = {
+  resource: PropTypes.string.isRequired,
+  limit: PropTypes.number.isRequired,
+};
+
+PlatformLimitErrorNotification.displayName = 'PlatformLimitErrorNotification';
+
+export default PlatformLimitErrorNotification;

package/src/features/platform-limits/shared/components/notifications/error/index.js

@@ -0,0 +1 @@
+export { default } from './error';

package/src/features/platform-limits/shared/components/notifications/error/messages.js

@@ -0,0 +1,34 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  shippingMethods: {
+    id: 'PlatformLimits.Notifications.shippingMethodsError',
+    description: 'error message about platform limit exceeded',
+    defaultMessage:
+      'This project reached the limit of {limit} shipping methods. To add more shipping methods delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  customers: {
+    id: 'PlatformLimits.Notifications.customersError',
+    description: 'error message about platform limit exceeded',
+    defaultMessage:
+      'This project reached the limit of {limit} customers. To add more customers delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  customerGroups: {
+    id: 'PlatformLimits.Notifications.customerGroupsError',
+    description: 'error message about platform limit exceeded',
+    defaultMessage:
+      'This project reached the limit of {limit} customer groups. To add more customer groups delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  zones: {
+    id: 'PlatformLimits.Notifications.zonesError',
+    description: 'error message about platform limit exceeded',
+    defaultMessage:
+      'This project reached the limit of {limit} zones. To add more zones delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  taxCategories: {
+    id: 'PlatformLimits.Notifications.taxCategoriesError',
+    description: 'error message about platform limit exceeded',
+    defaultMessage:
+      'This project reached the limit of {limit} tax categories. To add more tax categories delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+});

package/src/features/platform-limits/shared/components/notifications/index.js

@@ -0,0 +1 @@
+export { default } from './notifications';

package/src/features/platform-limits/shared/components/notifications/notifications.js

@@ -0,0 +1,9 @@
+import Warning from './warning';
+import Error from './error';
+
+const Notifications = {
+  Warning,
+  Error,
+};
+
+export default Notifications;

package/src/features/platform-limits/shared/components/notifications/warning/index.js

@@ -0,0 +1 @@
+export { default } from './warning';

package/src/features/platform-limits/shared/components/notifications/warning/messages.js

@@ -0,0 +1,34 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  shippingMethods: {
+    id: 'PlatformLimits.Notifications.shippingMethodsWarning',
+    description: 'warning message about platform limit exceeded',
+    defaultMessage:
+      'This project will soon reach the limit of {limit} shipping methods. Once it has been reached, no additional shipping methods can be added. To add more shipping methods delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  customers: {
+    id: 'PlatformLimits.Notifications.customersWarning',
+    description: 'warning message about platform limit exceeded',
+    defaultMessage:
+      'This project will soon reach the limit of {limit} customers. Once it has been reached, no additional customers can be added. To add more customers delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  customerGroups: {
+    id: 'PlatformLimits.Notifications.customerGroupsWarning',
+    description: 'warning message about platform limit exceeded',
+    defaultMessage:
+      'This project will soon reach the limit of {limit} customer groups. Once it has been reached, no additional customer groups can be added. To add more customer groups delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  zones: {
+    id: 'PlatformLimits.Notifications.zonesWarning',
+    description: 'warning message about platform limit exceeded',
+    defaultMessage:
+      'This project will soon reach the limit of {limit} zones. Once it has been reached, no additional zones can be added. To add more zones delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+  taxCategories: {
+    id: 'PlatformLimits.Notifications.taxCategoriesWarning',
+    description: 'warning message about platform limit exceeded',
+    defaultMessage:
+      'This project will soon reach the limit of {limit} tax categories. Once it has been reached, no additional tax categories can be added. To add more tax categories delete existing ones, reach out to your administrator or contact <customersupport>customer support</customersupport>.',
+  },
+});

package/src/features/platform-limits/shared/components/notifications/warning/warning.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import {
+  Text,
+  Spacings,
+  WarningIcon,
+  Link,
+} from '@commercetools-frontend/ui-kit';
+import messages from './messages';
+import { CUSTOMER_SUPPORT_LINK } from '../../../constants';
+
+// eslint-disable-next-line react/display-name
+const getCustomerSupportLink = (msg) => (
+  <Link isExternal to={CUSTOMER_SUPPORT_LINK}>
+    {msg}
+  </Link>
+);
+
+const PlatformLimitWarningNotification = ({ resource, limit }) => (
+  <Spacings.Inline scale="xs">
+    <WarningIcon color="warning" size="medium" />
+    <Text.Body
+      intlMessage={{
+        ...messages[resource],
+        values: {
+          limit,
+          customersupport: getCustomerSupportLink,
+        },
+      }}
+    />
+  </Spacings.Inline>
+);
+
+PlatformLimitWarningNotification.propTypes = {
+  resource: PropTypes.string.isRequired,
+  limit: PropTypes.number.isRequired,
+};
+
+PlatformLimitWarningNotification.displayName =
+  'PlatformLimitWarningNotification';
+
+export default PlatformLimitWarningNotification;

package/src/features/platform-limits/shared/components/status-text/index.js

@@ -0,0 +1 @@
+export { default } from './status-text';

package/src/features/platform-limits/shared/components/status-text/status-text.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Text } from '@commercetools-frontend/ui-kit';
+
+const PlatformLimitsStatusText = ({ intlMessage, children }) => (
+  <Text.Subheadline as="h4">
+    {intlMessage && <FormattedMessage {...intlMessage} />}
+    {children}
+  </Text.Subheadline>
+);
+
+PlatformLimitsStatusText.propTypes = {
+  intlMessage: PropTypes.object,
+  children: PropTypes.node,
+};
+
+PlatformLimitsStatusText.displayName = 'PlatformLimitsStatusText';
+
+export default PlatformLimitsStatusText;

package/src/features/platform-limits/shared/constants.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/prefer-default-export
+export const RESOURCES_WITH_PLATFORM_LIMITS = {
+  shoppingLists: 'shoppingLists',
+  productDiscounts: 'productDiscounts',
+  cartDiscounts: 'cartDiscounts',
+  stores: 'stores',
+  customers: 'customers',
+  customerGroups: 'customerGroups',
+  zones: 'zones',
+  taxCategories: 'taxCategories',
+  shippingMethods: 'shippingMethods',
+  carts: 'carts',
+};
+
+export const CUSTOMER_SUPPORT_LINK =
+  'https://jira.commercetools.com/servicedesk/customer/portal/1';

package/src/features/platform-limits/shared/hooks/index.js

@@ -0,0 +1,5 @@
+export { default as usePlatformLimitsFetcher } from './use-platform-limits-fetcher';
+
+export { default as useLimitsModalState } from './use-limits-modal-state';
+
+export { default as useInterceptNavigation } from './use-intercept-navigation';

package/src/features/platform-limits/shared/hooks/use-intercept-navigation/index.js

@@ -0,0 +1 @@
+export { default } from './use-intercept-navigation';

package/src/features/platform-limits/shared/hooks/use-intercept-navigation/use-intercept-navigation.js

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+
+const useInterceptNavigation = (hasReachedErrorLimit) => {
+  const [isPlatformLimitExceeded, setIsPlatformLimitExceeded] = useState(false);
+
+  const setPlatformLimitToBeExceeded = useCallback(
+    () => setIsPlatformLimitExceeded(true),
+    []
+  );
+  const setPlatformLimitToBeNotExceeded = useCallback(
+    () => setIsPlatformLimitExceeded(false),
+    []
+  );
+
+  return {
+    wrap:
+      (handler) =>
+      (...args) => {
+        if (!isPlatformLimitExceeded && hasReachedErrorLimit) {
+          setPlatformLimitToBeExceeded();
+          return () => ({});
+        }
+        return handler(...args);
+      },
+    isPlatformLimitExceeded,
+    setPlatformLimitToBeExceeded,
+    setPlatformLimitToBeNotExceeded,
+  };
+};
+
+export default useInterceptNavigation;

package/src/features/platform-limits/shared/hooks/use-intercept-navigation/use-intercept-navigation.spec.js

@@ -0,0 +1,76 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-test-renderer';
+import useInterceptNavigation from './use-intercept-navigation';
+
+describe('useInterceptNavigation', () => {
+  const handler = jest.fn((argName) => argName);
+
+  describe('when platform limit is not exceeded', () => {
+    it('should not intercept navigation', () => {
+      const { result } = renderHook(() => useInterceptNavigation(false));
+
+      act(() => {
+        expect(result.current.wrap(handler)('test-arg')).toBe(
+          handler('test-arg')
+        );
+      });
+    });
+
+    it('should indicate platform limit is not exceeded', () => {
+      const { result } = renderHook(() => useInterceptNavigation(false));
+      expect(result.current.isPlatformLimitExceeded).toBe(false);
+    });
+  });
+
+  describe('when platform limit is exceeded', () => {
+    it('should intercept navigation', () => {
+      const { result } = renderHook(() => useInterceptNavigation(true));
+
+      act(() => {
+        expect(result.current.wrap(handler)('test-arg')).toEqual(
+          expect.any(Function)
+        );
+      });
+    });
+
+    describe('when navigation has been intercepted', () => {
+      it('should indicate platform limit is exceeded', () => {
+        const { result } = renderHook(() => useInterceptNavigation(true));
+
+        act(() => {
+          result.current.wrap(handler)('test-arg');
+        });
+
+        expect(result.current.isPlatformLimitExceeded).toBe(true);
+      });
+    });
+
+    describe('when calling setPlatformLimitToBeExceeded', () => {
+      it('should update platform limit is exceeded', () => {
+        const { result } = renderHook(() => useInterceptNavigation(true));
+
+        expect(result.current.isPlatformLimitExceeded).toBe(false);
+
+        act(() => {
+          result.current.setPlatformLimitToBeExceeded();
+        });
+
+        expect(result.current.isPlatformLimitExceeded).toBe(true);
+      });
+    });
+
+    describe('when calling setPlatformLimitToBeNotExceeded', () => {
+      it('should update platform limit is exceeded', () => {
+        const { result } = renderHook(() => useInterceptNavigation(true));
+
+        expect(result.current.isPlatformLimitExceeded).toBe(false);
+
+        act(() => {
+          result.current.setPlatformLimitToBeNotExceeded();
+        });
+
+        expect(result.current.isPlatformLimitExceeded).toBe(false);
+      });
+    });
+  });
+});

package/src/features/platform-limits/shared/hooks/use-limits-modal-state/index.js

@@ -0,0 +1 @@
+export { default } from './use-limits-modal-state';

package/src/features/platform-limits/shared/hooks/use-limits-modal-state/use-limits-modal-state.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+const useLimitsModalState = (isInitiallyOpen = false) => {
+  const [isModalOpen, setIsModalOpen] = useState(isInitiallyOpen);
+
+  const closeModal = useCallback(() => setIsModalOpen(false), []);
+
+  const openModal = useCallback(() => setIsModalOpen(true), []);
+
+  return {
+    isModalOpen,
+    closeModal,
+    openModal,
+  };
+};
+
+export default useLimitsModalState;

package/src/features/platform-limits/shared/hooks/use-limits-modal-state/use-limits-modal-state.spec.js

@@ -0,0 +1,33 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-test-renderer';
+import useLimitsModalState from './use-limits-modal-state';
+
+describe('useLimitsModalState', () => {
+  it('should return a closed modal state by default', () => {
+    const { result } = renderHook(() => useLimitsModalState());
+
+    expect(result.current.isModalOpen).toBe(false);
+  });
+
+  it('should return open toggle state when passing "true" as prop', () => {
+    const { result } = renderHook(() => useLimitsModalState(true));
+
+    expect(result.current.isModalOpen).toBe(true);
+  });
+
+  describe('useLimitsModalState setters', () => {
+    it('should open modal  when calling "openModal"', () => {
+      const { result } = renderHook(() => useLimitsModalState());
+      expect(result.current.isModalOpen).toBe(false);
+      act(() => result.current.openModal());
+      expect(result.current.isModalOpen).toBe(true);
+    });
+
+    it('should close modal  when calling "closeModal"', () => {
+      const { result } = renderHook(() => useLimitsModalState());
+      expect(result.current.isModalOpen).toBe(false);
+      act(() => result.current.closeModal());
+      expect(result.current.isModalOpen).toBe(false);
+    });
+  });
+});