@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,19 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

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

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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,56 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,85 +0,0 @@
-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;