@commercetools-frontend/experimental-components 0.0.2

package/src/features/platform-limits/assets/graphic-limits-reached.react.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="160px" height="148px" viewBox="0 0 250 230" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>graphic-limits</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="250" height="226.69384"></rect>
+    </defs>
+    <g id="Limits-Customers---Add-customer---DRAFT-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Loading-error-page" transform="translate(-584.000000, -271.000000)">
+            <g id="graphic-limits" transform="translate(584.000000, 271.000000)">
+                <g id="Oval-Copy">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Mask"></g>
+                    <ellipse id="Oval" fill="#F2F2F2" mask="url(#mask-2)" cx="124.387255" cy="126.213327" rx="123.161765" ry="122.537211"></ellipse>
+                </g>
+                <rect id="Rectangle-Copy" stroke="#979797" fill="#FFFFFF" x="48" y="92" width="159.36" height="117.12" rx="7"></rect>
+                <line x1="48.32" y1="114.08" x2="207.68" y2="114.08" id="Line-Copy" stroke="#979797" stroke-linecap="square"></line>
+                <circle id="Oval-Copy-4" stroke="#979797" fill="#999999" cx="69.12" cy="102.88" r="3.84"></circle>
+                <circle id="Oval-Copy-6" stroke="#979797" fill="#999999" cx="58.84" cy="102.88" r="3.84"></circle>
+                <circle id="Oval-Copy-5" stroke="#979797" fill="#999999" cx="79.4" cy="102.88" r="3.84"></circle>
+                <path d="M247.553314,227.19384 C247.739262,227.19384 247.908919,227.26361 248.036806,227.379329 C248.265299,228.06387 248.190203,228.27301 248.056572,228.421661 C247.92934,228.563193 247.750534,228.644584 247.553314,228.644584 L247.553314,228.644584 L1.22119547,228.644584 C1.02183176,228.644584 0.84121588,228.564324 0.710685558,228.433348 C0.58004944,228.302265 0.5,228.120701 0.5,227.919212 C0.5,227.718806 0.581044491,227.537342 0.71197708,227.405962 C0.842411756,227.275081 1.02246456,227.19384 1.22119547,227.19384 L1.22119547,227.19384 Z" id="Rectangle-4-Copy" stroke="#000000" fill="#000000"></path>
+                <g id="warning-sign" transform="translate(154.000000, 56.000000)" fill-rule="nonzero">
+                    <polygon id="Rectangle-Copy-2" fill="#000000" transform="translate(23.905092, 79.585776) rotate(19.110000) translate(-23.905092, -79.585776) " points="21.869951 37.8820964 26.00424 37.8789301 25.7135197 119.938739 21.8059447 121.292622"></polygon>
+                    <path d="M49.2156816,2.71114701 C50.0588802,2.00929124 51.2122987,1.81021789 52.2419748,2.18882634 C53.2716509,2.56743479 54.0213752,3.46628741 54.2090715,4.54719977 L59.4175612,34.7537247 L64.6145277,64.9564086 C64.8017625,66.0386622 64.3971381,67.1385626 63.5531922,67.841463 C62.7092462,68.5443633 61.5543142,68.7433765 60.5237891,68.3634772 L31.7733867,57.7696832 L3.01146109,47.1912537 C1.98066437,46.8118237 1.23078314,45.9110299 1.04455368,44.8285088 C0.858324222,43.7459878 1.26407068,42.646383 2.10880984,41.9442912 L25.6622457,22.3315602 L49.2156816,2.71114701 Z" id="Path-Copy" fill="#FFFFFF"></path>
+                    <path d="M62.8238256,70.8820767 C62.2052202,70.8808032 61.5917192,70.7701047 61.0116915,70.5550999 L3.39275292,49.3400762 C1.65710059,48.6983938 0.393989966,47.1818854 0.07692171,45.3590428 C-0.240146546,43.5362001 0.436720111,41.6823599 1.85378554,40.4924689 L49.0500676,1.20524549 C50.4753022,0.0160005439 52.4272804,-0.321624003 54.1692618,0.319802403 C55.9112432,0.96122881 57.1779569,2.48402903 57.4913037,4.31344842 L67.9255025,64.8118487 C68.1831611,66.3185886 67.7653185,67.8624001 66.7828571,69.0336038 C65.8003957,70.2048075 64.3526569,70.8849772 62.8238256,70.893617 L62.8238256,70.8820767 Z M51.7586502,4.44423913 L4.57391038,43.7276157 C4.30916823,43.9470582 4.18174153,44.2911225 4.23969199,44.6300372 C4.29764245,44.968952 4.5321526,45.2511496 4.85477192,45.3701932 L62.4737106,66.6006041 C62.7962291,66.7197372 63.1578219,66.6576849 63.4221506,66.437844 C63.6864793,66.2180032 63.8133404,65.8738108 63.7549009,65.5350444 L53.3207021,5.021257 C53.2624555,4.68291147 53.0282259,4.40127267 52.7061286,4.28229076 C52.3840313,4.16330886 52.0229232,4.2250315 51.7586502,4.44423913 L51.7586502,4.44423913 Z" id="Shape-Copy" fill="#00B49F"></path>
+                    <path d="M49.3155177,16.917732 C51.1407767,17.6032693 50.8039263,18.7100865 49.9343824,20.6671231 L43.5851448,34.6038283 C42.9310284,36.0208607 42.1202374,37.0932095 40.3772327,36.4421406 C38.6342279,35.7910717 38.7713182,34.462125 39.2570094,32.995305 L44.0786697,18.4994465 C44.7327861,16.4619837 45.3242327,15.4355927 47.1494916,16.1326194 L49.3155177,16.917732 Z M38.371798,43.1404911 C39.9855462,43.7456022 40.4399025,44.8217809 39.8210379,46.3958358 L39.3980165,47.4720144 C38.7791519,49.0460693 37.705931,49.5477754 36.0921828,48.9426643 L34.987627,48.529044 C33.3777956,47.9239329 32.9234393,46.851584 33.5423039,45.2775291 L33.9653253,44.1975206 C34.5841899,42.6234657 35.6574108,42.1217597 37.271159,42.7268708 L38.371798,43.1404911 Z" id="Shape-Copy-2" fill="#000000"></path>
+                </g>
+                <g id="Group-3" transform="translate(156.000000, 153.000000)" fill-rule="nonzero">
+                    <path d="M16.9570235,12.8268146 C16.7464384,12.8268146 15.0606611,13.0358726 15.0606611,13.0358726 L16.5358533,11.5713778 L13.5865657,11.9905826 L15.0606611,6.76413275 L11.6902033,10.7373235 L11.0584481,3 L9.79493772,10.3192075 L8.53033055,8.22753871 L7.89857536,10.3192075 L3.47519224,6.55507475 L6.84894043,10.5260878 L2,10.5260878 L7.2,12.8268146 C7.41803618,12.7857915 7.73763933,12.7070187 8.15880945,12.5904962 C8.57997958,12.4739738 9.12535567,12.4739738 9.79493772,12.5904962 L14.4343899,13.2460194 C14.8527547,13.5970511 15.0615117,13.8046573 15.0606611,13.868838 C15.0598104,13.9330187 15.5515412,13.9330187 16.5358533,13.868838 C16.5358533,13.868838 17.1676085,12.8268146 16.9570235,12.8268146 Z" id="Path" fill="#A6DBD5"></path>
+                    <path d="M20.362223,13.6613592 C20.0814429,13.6613592 17.4142148,13.3811634 17.4142148,13.3811634 L19.3811378,11.4285037 L15.4487542,11.9874435 L17.4142148,5.01884366 L12.9202711,10.3164313 L12.0779308,-1.50990331e-14 L10.5,9.52239098 L8.7071074,6.97005161 L7.87207912,9.52239098 L1.96692298,4.74009967 L6.08691529,10.0347837 L0,10.0347837 L8.42632731,13.3811634 L10,13.3811634 L8.7071074,13 L2,10.3164313 L6.84894043,10.5260878 L5.35359382,8.13316541 L7.87207912,10.3135277 L8.7071074,8.13316541 L10.6813424,10.3135277 L11.811261,4.47803199 L12.6468029,11.4299555 L16.0423594,7.5 L14.894506,12.2676393 L15.7368463,12.5463833 L17.9830869,12.2676393 L16.5791865,13.6613592 L17.9830869,13.6613592 L19.3884498,13.9401032 C18.0734273,14.2223162 17.415349,14.4062098 17.4142148,14.491784 C17.4130806,14.5773583 17.8709273,14.5773583 18.787755,14.491784 C18.787755,14.491784 20.6430031,13.6613592 20.362223,13.6613592 Z" id="Path" fill="#008071"></path>
+                </g>
+                <g id="Group-2" transform="translate(81.525025, 166.000000)">
+                    <path d="M9,20.5171689 L57.8360183,20.5171689 L86.7353981,20.5171689 C91.7059609,20.5171689 95.7353981,16.4877316 95.7353981,11.5171689 L95.7353981,9 C95.7353981,4.02943725 91.7059609,-9.65368627e-16 86.7353981,-8.8817842e-15 L9,-8.8817842e-15 C4.02943725,-7.96870663e-15 1.62816111e-13,4.02943725 1.63424829e-13,9 L1.63424829e-13,11.5171689 C1.64033548e-13,16.4877316 4.02943725,20.5171689 9,20.5171689 Z" id="Fill-7-Copy-3" stroke="#979797" fill="#FFFFFF"></path>
+                    <path d="M9.95497504,18.2674016 L57.5921483,18.2674016 L86.2627301,18.2674016 C90.1287233,18.2674016 93.2627301,15.1333949 93.2627301,11.2674016 L93.2627301,9.88199475 C93.2627301,6.0160015 90.1287233,2.88199475 86.2627301,2.88199475 L9.95497504,2.88199475 C6.08898179,2.88199475 2.95497504,6.0160015 2.95497504,9.88199475 L2.95497504,11.2674016 C2.95497504,15.1333949 6.08898179,18.2674016 9.95497504,18.2674016 Z" id="Fill-7-Copy-4" fill="#00B49F"></path>
+                    <polygon id="Path-2-Copy-11" fill="#A8DBD5" points="19.2812927 2.88199475 8.71497504 18.2674016 11.2154165 18.2674016 22.1579081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-12" fill="#A8DBD5" points="12.2412927 2.88199475 3.50507859 15.5985955 4.74310719 17.2349969 15.1179081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-13" fill="#A8DBD5" points="27.6012927 2.88199475 17.034975 18.2674016 19.5354165 18.2674016 30.4779081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-14" fill="#A8DBD5" points="35.9212927 2.88199475 25.354975 18.2674016 27.8554165 18.2674016 38.7979081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-15" fill="#A8DBD5" points="44.8812927 2.88199475 34.314975 18.2674016 36.8154165 18.2674016 47.7579081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-16" fill="#A8DBD5" points="53.8412927 2.88199475 43.274975 18.2674016 45.7754165 18.2674016 56.7179081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-17" fill="#A8DBD5" points="73.0412927 2.88199475 62.474975 18.2674016 64.9754165 18.2674016 75.9179081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-18" fill="#A8DBD5" points="63.4412927 2.88199475 52.874975 18.2674016 55.3754165 18.2674016 66.3179081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-19" fill="#A8DBD5" points="82.6412927 2.88199475 72.074975 18.2674016 74.5754165 18.2674016 85.5179081 2.88199475"></polygon>
+                    <polygon id="Path-2-Copy-20" fill="#A8DBD5" points="90.4363744 4.4431784 81.674975 18.2674016 84.1754165 18.2674016 91.8533115 5.84140012"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/features/platform-limits/customer-groups/components/index.js

@@ -0,0 +1,5 @@
+export { default as CustomerGroupsNotification } from './platform-limits-customer-groups-notification';
+export { default as CustomerGroupsTooltip } from './platform-limits-customer-groups-tooltip';
+export { default as CustomerGroupsStatus } from './platform-limits-customer-groups-status';
+export { default as CustomerGroupsErrorModal } from './platform-limits-customer-groups-error-modal';
+export { default as CustomerGroupsCombined } from './platform-limits-customer-groups-combined';

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-combined/index.js

@@ -0,0 +1 @@
+export { default } from './platform-limits-customer-groups-combined';

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-combined/platform-limits-customer-groups-combined.jsx

@@ -0,0 +1,32 @@
+import { Spacings } from '@commercetools-frontend/ui-kit';
+import PlatformLimitsCustomerGroupsNotifications from '../platform-limits-customer-groups-notification';
+import PlatformLimitsCustomerGroupsStatus from '../platform-limits-customer-groups-status';
+import styles from './platform-limits-customer-groups-combined.module.css';
+import { useCustomerGroupsPlatformLimitsStatus } from '../../hooks';
+
+const PlatformLimitsCustomerGroupsCombined = () => {
+  // on the customer create only show the warning message
+  const {
+    hasReachedCustomerGroupsErrorLimit,
+    hasReachedCustomerGroupsWarningLimit,
+  } = useCustomerGroupsPlatformLimitsStatus();
+
+  return (
+    <div className={styles.combined}>
+      <Spacings.Inline scale="xl" justifyContent="space-between">
+        {hasReachedCustomerGroupsWarningLimit &&
+        !hasReachedCustomerGroupsErrorLimit ? (
+          <PlatformLimitsCustomerGroupsNotifications />
+        ) : (
+          <div />
+        )}
+        <PlatformLimitsCustomerGroupsStatus />
+      </Spacings.Inline>
+    </div>
+  );
+};
+
+PlatformLimitsCustomerGroupsCombined.displayName =
+  'PlatformLimitsCustomerGroupsCombined';
+
+export default PlatformLimitsCustomerGroupsCombined;

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-combined/platform-limits-customer-groups-combined.module.css

@@ -0,0 +1,3 @@
+.combined {
+  margin-bottom: var(--spacing-s);
+}

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-error-modal/index.js

@@ -0,0 +1 @@
+export { default } from './platform-limits-customer-groups-error-modal';

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-error-modal/messages.js

@@ -0,0 +1,15 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  title: {
+    id: 'PlatformLimits.CustomerGroups.modalTitle',
+    description:
+      'The modal title for the customer groups platform limits error',
+    defaultMessage: 'Add Customer group',
+  },
+  backToList: {
+    id: 'PlatformLimits.CustomerGroups.backToList',
+    description: 'The button label for going back to the list view',
+    defaultMessage: 'To customer groups list',
+  },
+});

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-error-modal/platform-limits-customer-groups-error-modal.jsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { InfoDialog } from '@commercetools-frontend/application-components';
+import { Spacings, FlatButton, ListIcon } from '@commercetools-frontend/ui-kit';
+import messages from './messages';
+import PlatformLimitsCustomerGroupsNotifications from '../platform-limits-customer-groups-notification';
+import LimitsReachedErrorGraphic from '../../../assets/graphic-limits-reached.react.svg';
+import { useCustomerGroupsPlatormLimitsModalState } from '../../hooks';
+
+const PlatformLimitsCustomerGroupsErrorModal = ({ onClose }) => {
+  const intl = useIntl();
+  const customerGroupsPlatformLimitsModalState =
+    useCustomerGroupsPlatormLimitsModalState();
+
+  return (
+    <InfoDialog
+      isOpen={customerGroupsPlatformLimitsModalState.isModalOpen}
+      onClose={onClose}
+      title={intl.formatMessage(messages.title)}
+    >
+      <Spacings.Stack scale="m" alignItems="center">
+        <LimitsReachedErrorGraphic />
+        <Spacings.Stack scale="l" alignItems="center">
+          <PlatformLimitsCustomerGroupsNotifications />
+          <FlatButton
+            onClick={onClose}
+            label={intl.formatMessage(messages.backToList)}
+            icon={<ListIcon size="medium" color="primary" />}
+          />
+        </Spacings.Stack>
+      </Spacings.Stack>
+    </InfoDialog>
+  );
+};
+
+PlatformLimitsCustomerGroupsErrorModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+PlatformLimitsCustomerGroupsErrorModal.displayName =
+  'PlatformLimitsCustomerGroupsErrorModal';
+
+export default PlatformLimitsCustomerGroupsErrorModal;

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-notification/index.js

@@ -0,0 +1 @@
+export { default } from './platform-limits-customer-groups-notification';

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-notification/platform-limits-customer-groups-notification.jsx

@@ -0,0 +1,42 @@
+import {
+  useCustomerGroupsPlatformLimitsStatus,
+  useCustomerGroupsPlatformLimitsFetcher,
+} from '../../hooks';
+import { Notifications, RESOURCES_WITH_PLATFORM_LIMITS } from '../../../shared';
+
+const PlatformLimitsCustomerGroupsNotifications = () => {
+  const { platformLimits } = useCustomerGroupsPlatformLimitsFetcher();
+  const {
+    hasReachedCustomerGroupsWarningLimit,
+    hasReachedCustomerGroupsErrorLimit,
+  } = useCustomerGroupsPlatformLimitsStatus();
+
+  if (!platformLimits?.customerGroups?.total) {
+    return <div />;
+  }
+
+  if (hasReachedCustomerGroupsErrorLimit) {
+    return (
+      <Notifications.Error
+        resource={RESOURCES_WITH_PLATFORM_LIMITS.customerGroups}
+        limit={platformLimits.customerGroups.total.limit}
+      />
+    );
+  }
+
+  if (hasReachedCustomerGroupsWarningLimit) {
+    return (
+      <Notifications.Warning
+        resource={RESOURCES_WITH_PLATFORM_LIMITS.customerGroups}
+        limit={platformLimits.customerGroups.total.limit}
+      />
+    );
+  }
+
+  return <div />;
+};
+
+PlatformLimitsCustomerGroupsNotifications.displayName =
+  'PlatformLimitsCustomerGroupsNotifications';
+
+export default PlatformLimitsCustomerGroupsNotifications;

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-notification/platform-limits-customer-groups-notification.spec.js

@@ -0,0 +1,51 @@
+import {
+  screen,
+  renderApp,
+} from '@commercetools-frontend/application-shell/test-utils';
+import usePlatformLimitsFetcher from '../../../shared/hooks/use-platform-limits-fetcher';
+import PlatformLimitsCustomerGroupsNotification from './platform-limits-customer-groups-notification';
+
+jest.mock('../../../shared/hooks/use-platform-limits-fetcher');
+
+describe('customerGroupsNotification', () => {
+  describe('when warning limit has not been exceeded', () => {
+    it('should not render warning or error notifcation', () => {
+      usePlatformLimitsFetcher.withCustomerGroupsWithNonExceeded();
+      renderApp(<PlatformLimitsCustomerGroupsNotification />);
+
+      expect(
+        screen.queryByText(
+          /This project will soon reach the limit of 10 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/
+        )
+      ).not.toBeInTheDocument();
+
+      expect(
+        screen.queryByText(
+          /This project reached the limit of 10 customer groups. To add more customer groups delete existing ones, reach out to your administrator or contact/
+        )
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when warning limit has been exceeded', () => {
+    it('should render warning notifcation', () => {
+      usePlatformLimitsFetcher.withCustomerGroupsWithWarningExceeded();
+      renderApp(<PlatformLimitsCustomerGroupsNotification />);
+
+      screen.getByText(
+        /This project will soon reach the limit of 10 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/
+      );
+    });
+  });
+
+  describe('when error limit has been exceeded', () => {
+    it('should render error notifcation', () => {
+      usePlatformLimitsFetcher.withCustomerGroupsWithExceeded();
+      renderApp(<PlatformLimitsCustomerGroupsNotification />);
+
+      screen.getByText(
+        /This project reached the limit of 10 customer groups. To add more customer groups delete existing ones, reach out to your administrator or contact/
+      );
+    });
+  });
+});

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-status/index.js

@@ -0,0 +1 @@
+export { default } from './platform-limits-customer-groups-status';

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-status/messages.js

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  customerGroupsStatus: {
+    id: 'PlatformLimits.Status.customerGroups',
+    description: 'The message for customer groups platform limit values',
+    defaultMessage: 'Customer groups: {current}/{limit}',
+  },
+});

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-status/platform-limits-customer-groups-status.jsx

@@ -0,0 +1,37 @@
+import { Text } from '@commercetools-frontend/ui-kit';
+import { useIntl } from 'react-intl';
+import { useCustomerGroupsPlatformLimitsFetcher } from '../../hooks';
+import messages from './messages';
+import styles from './platform-limits-customer-groups-status.module.css';
+
+const PlatformLimitsCustomerGroupsStatus = () => {
+  const intl = useIntl();
+  const { platformLimits } = useCustomerGroupsPlatformLimitsFetcher();
+
+  if (!platformLimits?.customerGroups?.total) {
+    return null;
+  }
+
+  const { current, limit } = platformLimits.customerGroups.total;
+
+  return (
+    <div className={styles.status}>
+      <Text.Detail
+        tone="secondary"
+        isInline
+        intlMessage={{
+          ...messages.customerGroupsStatus,
+          values: {
+            current: intl.formatNumber(current),
+            limit: intl.formatNumber(limit),
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+PlatformLimitsCustomerGroupsStatus.displayName =
+  'PlatformLimitsCustomerGroupsStatus';
+
+export default PlatformLimitsCustomerGroupsStatus;

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-status/platform-limits-customer-groups-status.module.css

@@ -0,0 +1,3 @@
+.status {
+  min-width: max-content;
+}

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-tooltip/index.js

@@ -0,0 +1 @@
+export { default } from './platform-limits-customer-groups-tooltip';

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-tooltip/messages.js

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  customerGroupsPlatformLimitReached: {
+    id: 'PlatformLimits.Tooltip.customerGroupsLimitReached',
+    description: 'The message for custome groups platform limit being reached',
+    defaultMessage: 'customer groups limit has been reached',
+  },
+});

package/src/features/platform-limits/customer-groups/components/platform-limits-customer-groups-tooltip/platform-limits-customer-groups-tooltip.jsx

@@ -0,0 +1,18 @@
+import { useIntl } from 'react-intl';
+import { Tooltip } from '@commercetools-frontend/ui-kit';
+import messages from './messages';
+
+const PlatformLimitsCustomerGroupsTooltip = (props) => {
+  const intl = useIntl();
+  return (
+    <Tooltip
+      {...props}
+      title={intl.formatMessage(messages.customerGroupsPlatformLimitReached)}
+    />
+  );
+};
+
+PlatformLimitsCustomerGroupsTooltip.displayName =
+  'PlatformLimitsCustomerGroupsTooltip';
+
+export default PlatformLimitsCustomerGroupsTooltip;

package/src/features/platform-limits/customer-groups/hocs/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as injectCustomerGroupsPlatformLimits } from './inject-customer-groups-platform-limits';

package/src/features/platform-limits/customer-groups/hocs/inject-customer-groups-platform-limits/index.js

@@ -0,0 +1 @@
+export { default } from './inject-customer-groups-platform-limits';

package/src/features/platform-limits/customer-groups/hocs/inject-customer-groups-platform-limits/inject-customer-groups-platform-limits.jsx

@@ -0,0 +1,23 @@
+import { wrapDisplayName } from '../../../../../internal-index';
+import { useCustomerGroupsPlatformLimits } from '../../hooks';
+
+const injectCustomerGroupsPlatformLimits = () => (WrappedComponent) => {
+  const WithCustomerGroupsPlatformLimits = (props) => {
+    const CustomerGroupsPlatformLimits = useCustomerGroupsPlatformLimits();
+
+    const customersProps = {
+      platformLimits: CustomerGroupsPlatformLimits,
+    };
+
+    return <WrappedComponent {...props} {...customersProps} />;
+  };
+
+  WithCustomerGroupsPlatformLimits.displayName = wrapDisplayName(
+    WrappedComponent,
+    'WithCustomerGroupsPlatformLimits'
+  );
+
+  return WithCustomerGroupsPlatformLimits;
+};
+
+export default injectCustomerGroupsPlatformLimits;

package/src/features/platform-limits/customer-groups/hooks/index.js

@@ -0,0 +1,4 @@
+export { default as useCustomerGroupsPlatformLimitsFetcher } from './use-customer-groups-platform-limits-fetcher';
+export { default as useCustomerGroupsPlatformLimitsStatus } from './use-customer-groups-platform-limits-status';
+export { default as useCustomerGroupsPlatormLimitsModalState } from './use-customer-groups-platform-limits-modal-state';
+export { default as useCustomerGroupsPlatformLimits } from './use-customer-groups-platform-limits';

package/src/features/platform-limits/customer-groups/hooks/use-customer-groups-platform-limits/index.js

@@ -0,0 +1 @@
+export { default } from './use-customer-groups-platform-limits';

package/src/features/platform-limits/customer-groups/hooks/use-customer-groups-platform-limits/use-customer-groups-platform-limits.js

@@ -0,0 +1,40 @@
+import useCustomerGroupsPlatformLimitsFetcher from '../use-customer-groups-platform-limits-fetcher';
+import useCustomerGroupsPlatformLimitsStatus from '../use-customer-groups-platform-limits-status';
+import {
+  CustomerGroupsNotification,
+  CustomerGroupsTooltip,
+  CustomerGroupsStatus,
+  CustomerGroupsCombined,
+  CustomerGroupsErrorModal,
+} from '../../components';
+import { useInterceptNavigation } from '../../../shared';
+
+const useCustomerGroupsPlatformLimits = () => {
+  const { refetch } = useCustomerGroupsPlatformLimitsFetcher();
+  const {
+    hasReachedCustomerGroupsWarningLimit,
+    hasReachedCustomerGroupsErrorLimit,
+  } = useCustomerGroupsPlatformLimitsStatus();
+
+  const interceptNavigation = useInterceptNavigation(
+    hasReachedCustomerGroupsErrorLimit
+  );
+
+  return {
+    CustomerGroupsLimits: {
+      Notifications: CustomerGroupsNotification,
+      Status: CustomerGroupsStatus,
+      Combined: CustomerGroupsCombined,
+      Tooltip: CustomerGroupsTooltip,
+      ErrorModal: CustomerGroupsErrorModal,
+    },
+    refetchCustomerGroupsPlatformLimits: refetch,
+    interceptNavigation,
+    status: {
+      hasReachedCustomerGroupsWarningLimit,
+      hasReachedCustomerGroupsErrorLimit,
+    },
+  };
+};
+
+export default useCustomerGroupsPlatformLimits;

package/src/features/platform-limits/customer-groups/hooks/use-customer-groups-platform-limits-fetcher/index.js

@@ -0,0 +1 @@
+export { default } from './use-customer-groups-platform-limits-fetcher';

package/src/features/platform-limits/customer-groups/hooks/use-customer-groups-platform-limits-fetcher/use-customer-groups-platform-limits-fetcher.js

@@ -0,0 +1,18 @@
+import {
+  usePlatformLimitsFetcher,
+  RESOURCES_WITH_PLATFORM_LIMITS,
+} from '../../../shared';
+
+const useCustomerGroupsPlatformLimitsFetcher = () => {
+  const { isLoading, error, platformLimits, refetch } =
+    usePlatformLimitsFetcher(RESOURCES_WITH_PLATFORM_LIMITS.customerGroups);
+
+  return {
+    isLoading,
+    error,
+    platformLimits,
+    refetch,
+  };
+};
+
+export default useCustomerGroupsPlatformLimitsFetcher;

package/src/features/platform-limits/customer-groups/hooks/use-customer-groups-platform-limits-fetcher/use-customer-groups-platform-limits-fetcher.spec.js

@@ -0,0 +1,45 @@
+import {
+  screen,
+  renderApp,
+} from '@commercetools-frontend/application-shell/test-utils';
+import usePlatformLimitsFetcher from '../../../shared/hooks/use-platform-limits-fetcher';
+import useCustomerGroupsPlatformLimitsFetcher from './use-customer-groups-platform-limits-fetcher';
+
+jest.mock('../../../shared/hooks/use-platform-limits-fetcher');
+
+const TestComponent = () => {
+  const customerGroupsPlatformLimits = useCustomerGroupsPlatformLimitsFetcher();
+
+  const { limit, current } =
+    customerGroupsPlatformLimits.platformLimits.customerGroups.total;
+
+  return (
+    <ul>
+      <li>
+        Has customer groups platform limit:{' '}
+        {customerGroupsPlatformLimits.platformLimits.customerGroups
+          ? 'Yes'
+          : 'No'}
+      </li>
+      <li>Customer groups platform limit is: {limit}</li>
+      <li>Customer groups platform current is: {current}</li>
+    </ul>
+  );
+};
+
+describe('useCustomerGroupsPlatformLimitsFetcher', () => {
+  it('should return {limit} and {current} for customers platform limit', async () => {
+    usePlatformLimitsFetcher.withCustomerGroupsWithNonExceeded();
+    renderApp(<TestComponent />);
+
+    expect(
+      screen.getByText(/Has customer groups platform limit: Yes/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Customer groups platform limit is: 10/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Customer groups platform current is: 2/i)
+    ).toBeInTheDocument();
+  });
+});

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

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

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

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useLimitsModalState } from '../../../shared/hooks';
+import useCustomerGroupsPlatformLimitsStatus from '../use-customer-groups-platform-limits-status';
+
+const useCustomerGroupsPlatormLimitsModalState = () => {
+  const customerGroupsPlatformLimitsStatus =
+    useCustomerGroupsPlatformLimitsStatus();
+  const limitsModalState = useLimitsModalState(false);
+
+  useEffect(() => {
+    if (customerGroupsPlatformLimitsStatus.hasReachedCustomerGroupsErrorLimit) {
+      limitsModalState.openModal();
+    }
+  }, [customerGroupsPlatformLimitsStatus, limitsModalState]);
+
+  return {
+    isModalOpen: limitsModalState.isModalOpen,
+  };
+};
+
+export default useCustomerGroupsPlatormLimitsModalState;

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

@@ -0,0 +1,39 @@
+import {
+  screen,
+  renderApp,
+} from '@commercetools-frontend/application-shell/test-utils';
+import usePlatformLimitsFetcher from '../../../shared/hooks/use-platform-limits-fetcher';
+import useCustomerGroupsPlatormLimitsModalState from './use-customer-groups-platform-limits-modal-state';
+
+jest.mock('../../../shared/hooks/use-platform-limits-fetcher');
+
+const TestComponent = () => {
+  const customerGroupsPlatformLimitsModalState =
+    useCustomerGroupsPlatormLimitsModalState();
+
+  return (
+    <div>
+      Is modal open:{' '}
+      {customerGroupsPlatformLimitsModalState.isModalOpen ? 'Yes' : 'No'}
+    </div>
+  );
+};
+
+describe('useCustomerGroupsPlatormLimitsModalState', () => {
+  describe('when error limit has not been exceeded', () => {
+    it('should not show modal', () => {
+      usePlatformLimitsFetcher.withCustomerGroupsWithNonExceeded();
+      renderApp(<TestComponent />);
+
+      expect(screen.getByText(/Is modal open: No/i)).toBeInTheDocument();
+    });
+  });
+  describe('when error limit has been exceeded', () => {
+    it('should show modal', () => {
+      usePlatformLimitsFetcher.withCustomerGroupsWithExceeded();
+      renderApp(<TestComponent />);
+
+      expect(screen.getByText(/Is modal open: Yes/i)).toBeInTheDocument();
+    });
+  });
+});

package/src/features/platform-limits/customer-groups/hooks/use-customer-groups-platform-limits-status/index.js

@@ -0,0 +1 @@
+export { default } from './use-customer-groups-platform-limits-status';

package/src/features/platform-limits/customer-groups/hooks/use-customer-groups-platform-limits-status/use-customer-groups-platform-limits-status.js

@@ -0,0 +1,35 @@
+import useCustomerGroupsPlatformLimitsFetcher from '../use-customer-groups-platform-limits-fetcher';
+import {
+  getHasExceededWarningThreshold,
+  getHasExceededLimit,
+} from '../../../shared';
+
+const useCustomerGroupsPlatformLimitsStatus = () => {
+  const { platformLimits } = useCustomerGroupsPlatformLimitsFetcher();
+
+  if (!platformLimits?.customerGroups?.total) {
+    return {
+      hasReachedCustomerGroupsWarningLimit: false,
+      hasReachedCustomerGroupsErrorLimit: false,
+    };
+  }
+
+  const { limit, current } = platformLimits.customerGroups.total;
+
+  const hasReachedCustomerGroupsWarningLimit = getHasExceededWarningThreshold({
+    limit,
+    current,
+  });
+
+  const hasReachedCustomerGroupsErrorLimit = getHasExceededLimit({
+    limit,
+    current,
+  });
+
+  return {
+    hasReachedCustomerGroupsWarningLimit,
+    hasReachedCustomerGroupsErrorLimit,
+  };
+};
+
+export default useCustomerGroupsPlatformLimitsStatus;