@commercetools-frontend/experimental-components 0.0.2

package/src/hooks/use-product-selections-total-fetcher/use-product-selections-total-fetcher.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@apollo/client/react/hooks';
+import { useFeatureToggle } from '@commercetools-frontend/application-shell';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { FetchProductSelectionsTotal } from './fetch-product-selections-total.ctp.graphql';
+
+const useProductSelectionsTotalFetcher = (props) => {
+  const { loading, data } = useQuery(FetchProductSelectionsTotal, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  return {
+    isLoading: loading,
+    total: data?.productSelections?.total,
+  };
+};
+
+export default useProductSelectionsTotalFetcher;

package/src/hooks/use-role-based-channels-fetcher/index.js

@@ -0,0 +1,2 @@
+export { default } from './use-role-based-channels-fetcher';
+export * from './test-utils';

package/src/hooks/use-role-based-channels-fetcher/role-based-channels-fetcher.ctp.graphql

@@ -0,0 +1,12 @@
+query FetchRoleBasedChannels($limit: Int!, $where: String!) {
+  channels(where: $where, limit: $limit) {
+    results {
+      id
+      key
+      nameAllLocales {
+        locale
+        value
+      }
+    }
+  }
+}

package/src/hooks/use-role-based-channels-fetcher/test-utils.js

@@ -0,0 +1,37 @@
+import { FetchRoleBasedChannels } from './role-based-channels-fetcher.ctp.graphql';
+
+export const createFetchStoreDistributionChannelsQueryMock = (custom) => ({
+  request: {
+    variables: {
+      where: `roles contains any ("ProductDistribution")`,
+      limit: 500,
+    },
+    query: FetchRoleBasedChannels,
+  },
+  result: {
+    data: {
+      channels: {
+        results: [],
+      },
+    },
+  },
+  ...custom,
+});
+
+export const createFetchStoreSupplyChannelsQueryMock = (custom) => ({
+  request: {
+    variables: {
+      where: `roles contains any ("InventorySupply")`,
+      limit: 500,
+    },
+    query: FetchRoleBasedChannels,
+  },
+  result: {
+    data: {
+      channels: {
+        results: [],
+      },
+    },
+  },
+  ...custom,
+});

package/src/hooks/use-role-based-channels-fetcher/use-role-based-channels-fetcher.js

@@ -0,0 +1,44 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { applyTransformedLocalizedFields } from '@commercetools-frontend/l10n';
+import { FetchRoleBasedChannels } from './role-based-channels-fetcher.ctp.graphql';
+
+const convertChannels = (channelsList) =>
+  channelsList
+    ? {
+        results: channelsList.results
+          ? channelsList.results.map((channel) =>
+              applyTransformedLocalizedFields(channel, [
+                {
+                  from: 'nameAllLocales',
+                  to: 'name',
+                },
+              ])
+            )
+          : [],
+        total: channelsList.total,
+      }
+    : {};
+
+const createQueryVariables = (channelRole) => ({
+  where: `roles contains any ("${channelRole}")`,
+  limit: 500,
+});
+
+const useRoleBasedChannelsFetcher = (channelRole) => {
+  const channelsQuery = useQuery(FetchRoleBasedChannels, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+    variables: createQueryVariables(channelRole),
+  });
+
+  const convertedChannels = convertChannels(channelsQuery.data?.channels);
+
+  return {
+    channels: convertedChannels,
+    isLoading: channelsQuery.loading,
+  };
+};
+
+export default useRoleBasedChannelsFetcher;

package/src/hooks/use-role-notification/index.js

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

package/src/hooks/use-role-notification/notification-text/index.js

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

package/src/hooks/use-role-notification/notification-text/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  profileUpdated: {
+    id: 'NotificationText.profileUpdated',
+    description: 'Label for the notification header',
+    defaultMessage: 'The profile page has been updated',
+  },
+  addMoreInformation: {
+    id: 'NotificationText.addMoreInformation',
+    description: 'Label for the notification add more information',
+    defaultMessage:
+      'It is now possible to add more<newline></newline> information to your profile.<newline></newline>',
+  },
+  informationAndProfileLink: {
+    id: 'NotificationText.informationAndProfileLink',
+    description: 'Label for more information and profile link',
+    defaultMessage:
+      'Have a look at your profile page<newline></newline> or click this link for <link>more information</link>.',
+  },
+});

package/src/hooks/use-role-notification/notification-text/notification-text.jsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import { Text, Link, Spacings } from '@commercetools-frontend/ui-kit';
+import { useTrackingShared } from '../../../internal-index';
+import messages from './messages';
+
+const LinkToProfile = (props) => {
+  const { trackClickOnInfoNotification } = useTrackingShared();
+
+  return (
+    <Link onClick={trackClickOnInfoNotification} to="/account/profile">
+      {props.children}
+    </Link>
+  );
+};
+LinkToProfile.displayName = 'LinkToProfile';
+LinkToProfile.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+const getLinkToProfile = (msg) => <LinkToProfile>{msg}</LinkToProfile>;
+const getNewLine = () => <br />;
+
+const NotificationText = () => (
+  <Spacings.Stack>
+    <Spacings.Stack scale="xs">
+      <Text.Body as="p" isBold intlMessage={messages.profileUpdated} />
+      <Text.Body
+        intlMessage={{
+          ...messages.addMoreInformation,
+          values: { newline: getNewLine },
+        }}
+      />
+    </Spacings.Stack>
+    <Spacings.Stack scale="xs">
+      <Text.Body
+        intlMessage={{
+          ...messages.informationAndProfileLink,
+          values: { newline: getNewLine, link: getLinkToProfile },
+        }}
+      />
+    </Spacings.Stack>
+  </Spacings.Stack>
+);
+NotificationText.displayName = 'NotificationText';
+
+export default NotificationText;

package/src/hooks/use-role-notification/use-role-notification.jsx

@@ -0,0 +1,36 @@
+import { DOMAINS } from '@commercetools-frontend/constants';
+import { useShowNotification } from '@commercetools-frontend/actions-global';
+import { useFeatureToggle } from '@commercetools-frontend/application-shell';
+import { BUSINESS_ROLE_NOTIFICATION } from '../../constants';
+import NotificationText from './notification-text';
+import useTrackingShared from '../use-tracking-shared';
+
+const useRoleNotification = ({ onDismiss: dismissNotification }) => {
+  const { trackClickCloseInfoNotification, forwardHandler } =
+    useTrackingShared();
+
+  const notification = useShowNotification({
+    domain: DOMAINS.SIDE,
+    kind: 'info',
+  });
+  const isBusinessRoleNotificationEnabled = useFeatureToggle(
+    BUSINESS_ROLE_NOTIFICATION
+  );
+
+  return () => {
+    if (isBusinessRoleNotificationEnabled) {
+      notification(
+        { text: <NotificationText /> },
+        {
+          onDismiss: () =>
+            forwardHandler(
+              trackClickCloseInfoNotification(),
+              dismissNotification()
+            ),
+        }
+      );
+    }
+  };
+};
+
+export default useRoleNotification;

package/src/hooks/use-role-notification/use-role-notification.spec.js

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { renderAppWithRedux } from '@commercetools-frontend/application-shell/test-utils';
+import { BUSINESS_ROLE_NOTIFICATION } from '../../constants';
+import useRoleNotification from './use-role-notification';
+
+const mockFn = jest.fn();
+const createUser = (props = {}) => ({
+  id: '0fcb',
+  version: 1,
+  email: 'test-user@commercetools.de',
+  firstName: 'Test',
+  lastName: 'User',
+  language: 'en',
+  gravatarHash: '98e1b54af',
+  timeZone: null,
+  businessRole: null,
+  ...props,
+});
+let user;
+let componentProps;
+
+const TestComponent = (props) => {
+  const roleNotification = useRoleNotification({ onDismiss: mockFn });
+  useEffect(() => {
+    if (!props.hasChosenReminderRef.current) {
+      roleNotification();
+    }
+  });
+
+  return null;
+};
+
+describe('useRoleNotification', () => {
+  it('renders notification', async () => {
+    user = createUser();
+    componentProps = {
+      hasChosenReminderRef: { current: false },
+    };
+    const rendered = renderAppWithRedux(<TestComponent {...componentProps} />, {
+      user,
+      flags: { [BUSINESS_ROLE_NOTIFICATION]: true },
+    });
+
+    await rendered.findByText(/The profile page has been updated/i);
+  });
+});

package/src/hooks/use-role-notification-effect/index.js

@@ -0,0 +1 @@
+export { default } from './use-role-notification-effect';

package/src/hooks/use-role-notification-effect/use-role-notification-effect.js

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { useAdapterStatus } from '@commercetools-frontend/application-shell';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { REMINDER_OPTION_3_DAY } from '../../constants';
+import useRoleNotification from '../use-role-notification';
+import usePersistedReminder from '../use-persisted-reminder';
+import useTrackingShared from '../use-tracking-shared';
+
+const useRoleNotificationEffect = () => {
+  const { isReady: isFlopFlipReady } = useAdapterStatus();
+  const user = useApplicationContext((context) => context.user);
+  const storageKey = 'roleExpiry';
+  const userBusinessRole = user.businessRole;
+  const scopedStorageKey = [user.id, storageKey].join('/');
+  const { trackShowInfoNotification, forwardHandler } = useTrackingShared();
+
+  const [hasReminderExpired, hasChosenReminderRef, scheduleReminder] =
+    usePersistedReminder({
+      storageKey,
+      reminderInterval: REMINDER_OPTION_3_DAY,
+    });
+  const roleNotification = useRoleNotification({ onDismiss: scheduleReminder });
+  const isFirstTimeUser = !hasChosenReminderRef.current;
+
+  const openBusinessRoleNotification = () =>
+    forwardHandler(trackShowInfoNotification(), roleNotification());
+
+  useEffect(
+    () => {
+      /*
+      If the user does not have a business role,
+      and they close the notification, they get notified again
+      every three days until they fill the role
+    */
+      if (isFlopFlipReady) {
+        // 1. first time user
+        if (!userBusinessRole && isFirstTimeUser) {
+          openBusinessRoleNotification();
+        }
+        // 2. returning but not filled business role and has closed notification before
+        else if (!userBusinessRole && hasReminderExpired) {
+          openBusinessRoleNotification();
+        }
+        // 3. has filled business role
+        else if (userBusinessRole) {
+          localStorage.removeItem(scopedStorageKey);
+        }
+      }
+    },
+    // only listen for a change in user's business role, reminder duration has expired or flopflip is ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [userBusinessRole, hasReminderExpired, isFlopFlipReady]
+  );
+};
+
+export default useRoleNotificationEffect;

package/src/hooks/use-role-notification-effect/use-role-notification-effect.spec.js

@@ -0,0 +1,72 @@
+import {
+  renderAppWithRedux,
+  screen,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { BUSINESS_ROLE_NOTIFICATION } from '../../constants';
+import useRoleNotificationEffect from './use-role-notification-effect';
+
+const createUser = (props = {}) => ({
+  id: '0fcb',
+  version: 1,
+  email: 'test-user@commercetools.de',
+  firstName: 'Test',
+  lastName: 'User',
+  language: 'en',
+  gravatarHash: '98e1b54af',
+  timeZone: null,
+  businessRole: null,
+  ...props,
+});
+const storageKey = 'roleExpiry';
+
+const TestComponent = () => {
+  useRoleNotificationEffect();
+
+  return <div />;
+};
+
+const renderApp = ({ user, flag }) =>
+  renderAppWithRedux(<TestComponent />, {
+    user,
+    flags: { [BUSINESS_ROLE_NOTIFICATION]: flag },
+  });
+
+let user;
+
+describe('Role notification', () => {
+  it('should show notification for a first time or returning user without a business role', async () => {
+    window.localStorage.clear();
+    user = createUser();
+    renderApp({ user, flag: true });
+
+    await screen.findByLabelText(/Hide notification/i);
+    await screen.findByText(/The profile page has been updated/i);
+  });
+
+  it('should not render notification if user has a business role', async () => {
+    user = createUser();
+    user.businessRole = 'Other';
+
+    const scopedStorageKey = [user.id, storageKey].join('/');
+
+    window.localStorage.removeItem(scopedStorageKey);
+
+    expect(
+      screen.queryByText(/The profile page has been updated/i)
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText(/Hide notification/i)
+    ).not.toBeInTheDocument();
+  });
+
+  it('should not render notification if business role feature toggle is false', async () => {
+    user = createUser();
+
+    expect(
+      screen.queryByText(/The profile page has been updated/i)
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText(/Hide notification/i)
+    ).not.toBeInTheDocument();
+  });
+});

package/src/hooks/use-storage/__mocks__/index.js

@@ -0,0 +1,26 @@
+const mockNames = {
+  withData: 'withData',
+};
+const mockState = {
+  writeToStorage: jest.fn(),
+  readFromStorage: jest.fn(),
+  data: undefined,
+};
+const mocks = {
+  [mockNames.withData]: () => [
+    mockState.data,
+    mockState.writeToStorage,
+    mockState.readToStorage,
+  ],
+};
+let mockName = mockNames.withData;
+
+const useStorage = () => mocks[mockName]();
+useStorage.withData = (data) => {
+  mockState.data = data;
+  mockName = mockNames.withData;
+};
+useStorage.writeToStorage = mockState.writeToStorage;
+useStorage.readFromStorage = mockState.readFromStorage;
+
+export default useStorage;

package/src/hooks/use-storage/index.js

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

package/src/hooks/use-storage/use-storage.js

@@ -0,0 +1,85 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+
+const safeParse = (value) => {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+};
+const serialize = (value) => JSON.stringify(value);
+const getStorage = (storageType) =>
+  storageType === 'session' ? sessionStorage : localStorage;
+
+const defaultOptions = { storageType: 'local', segregateByUser: true };
+const isNil = (value) => typeof value === 'undefined' || value === null;
+
+const useStorage = (storageKey, initialStorageValue, options = {}) => {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+  const userId = useApplicationContext((context) => context.user?.id);
+  const scopedStorageKey = [mergedOptions.segregateByUser && userId, storageKey]
+    .filter(Boolean)
+    .join('/');
+  const readFromStorage = useCallback(() => {
+    const rawStorageValue = getStorage(mergedOptions.storageType).getItem(
+      scopedStorageKey
+    );
+
+    /**
+     * NOTE:
+     *    We prior wrote `undefined` or `null` to storage which when written
+     *    to storage via `setItem` results in `"undefined"` or `"null"`
+     *    being written polluting the storage.
+     */
+    if (rawStorageValue === 'undefined' || rawStorageValue === 'null') {
+      getStorage(mergedOptions.storageType).removeItem(scopedStorageKey);
+
+      return null;
+    }
+
+    const parsedStorageValue = safeParse(rawStorageValue);
+
+    return parsedStorageValue;
+  }, [mergedOptions.storageType, scopedStorageKey]);
+  const initializeStorageValue = () => {
+    // default the storage value to the initial provided value when provided
+    return readFromStorage() ?? initialStorageValue ?? null;
+  };
+  const [actualStorageValue, setActualStorageValue] = useState(
+    initializeStorageValue
+  );
+  const writeToStorage = useCallback(
+    (nextStorageValue) => {
+      getStorage(mergedOptions.storageType).setItem(
+        scopedStorageKey,
+        serialize(nextStorageValue)
+      );
+
+      setActualStorageValue(nextStorageValue);
+    },
+    [scopedStorageKey, mergedOptions.storageType]
+  );
+
+  // set the initial storage value in the storage. The reason why this is not
+  // done in initializeStorageValue is the state initializer function should
+  // be pure.
+  // https://beta.reactjs.org/apis/react/useState#my-initializer-or-updater-function-runs-twice
+  useEffect(() => {
+    if (isNil(readFromStorage()) && !isNil(initialStorageValue)) {
+      writeToStorage(initialStorageValue);
+    }
+  }, [
+    actualStorageValue,
+    initialStorageValue,
+    readFromStorage,
+    writeToStorage,
+  ]);
+
+  return [actualStorageValue, writeToStorage, readFromStorage];
+};
+
+export default useStorage;