How to use the @commercetools-frontend/constants.NOTIFICATION_DOMAINS.PAGE function in @commercetools-frontend/constants

background-color: ${props.fixed
      ? 'transparent'
      : getColorByType(props.type)};

    > * + * {
      margin-left: ${customProperties.spacingS};
    }
  `;

  switch (props.domain) {
    case NOTIFICATION_DOMAINS.GLOBAL:
      return css`
        ${pageStyles};
        background-color: ${getColorByType(props.type)};
      `;
    case NOTIFICATION_DOMAINS.PAGE:
      return pageStyles;
    case NOTIFICATION_DOMAINS.SIDE: {
      const sideStyles = css`
        ${baseStyles};
        animation: ${showNotificationAnimation} 0.3s forwards;
        padding: ${customProperties.spacingM} ${customProperties.spacingM}
          ${customProperties.spacingM} 50px !important;
        text-align: left;
        background: ${customProperties.colorSurface};
        border: 1px solid ${getColorByType(props.type)};
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: ${customProperties.borderRadius6};
        word-break: break-word;
        hyphens: auto; /* still not supported on Chrome */
      `;

beforeEach(() => {
        console.error = jest.fn();
        mocked(useSelector).mockClear();
        mocked(useSelector).mockReturnValue([
          {
            id: 1,
            domain: NOTIFICATION_DOMAINS.PAGE,
            kind: NOTIFICATION_KINDS_PAGE['unexpected-error'],
            values: {},
          },
        ]);
        rendered = renderComponent(
          
        );
      });
      it('should render the UnexpectedErrorNotification notification component', async () => {

beforeEach(() => {
        console.error = jest.fn();
        mocked(useSelector).mockClear();
        mocked(useSelector).mockReturnValue([
          {
            id: 1,
            domain: NOTIFICATION_DOMAINS.PAGE,
            kind: NOTIFICATION_KINDS_PAGE['unexpected-error'],
            values: {},
          },
        ]);
        rendered = renderComponent(
          
        );
      });
      it('should render the UnexpectedErrorNotification notification component', async () => {

{
            id: 1,
            domain: NOTIFICATION_DOMAINS.PAGE,
            kind: NOTIFICATION_KINDS_PAGE['api-error'],
            values: {
              errors: [
                {
                  code: 'ConcurrentModification',
                  message: 'Concurrent modification',
                },
              ],
            },
          },
        ]);
        rendered = renderComponent(
          
        );
      });
      it('should render the ApiErrorNotification notification component', async () => {

beforeEach(() => {
      mocked(useSelector).mockClear();
      mocked(useSelector).mockReturnValue([
        {
          id: 1,
          domain: NOTIFICATION_DOMAINS.PAGE,
          kind: NOTIFICATION_KINDS_PAGE.error,
          text: 'Something went wrong',
        },
      ]);
      rendered = renderComponent(
        
          
        
      );
    });
    it('should render the  notification component', async () => {

const getStyles = (props: StyleProps) => {
  const baseStyles = css`
    color: ${customProperties.colorSurface};
    position: relative;
    width: 100%;
    z-index: 10000;
  `;

  switch (props.domain) {
    case NOTIFICATION_DOMAINS.GLOBAL:
      return css`
        ${baseStyles};
        text-align: center;
        width: 100% !important;
      `;
    case NOTIFICATION_DOMAINS.PAGE:
      return css`
        ${baseStyles};
      `;
    case NOTIFICATION_DOMAINS.SIDE:
      return css`
        ${baseStyles};
        position: absolute;
        text-align: left;
        height: 0;
        overflow: visible;
      `;
    default:
      return css``;
  }
};

const NotificationsList = (props: Props) => {
  switch (props.domain) {
    case NOTIFICATION_DOMAINS.GLOBAL:
      return ;
    case NOTIFICATION_DOMAINS.PAGE:
      return ;
    case NOTIFICATION_DOMAINS.SIDE:
      return ;
    default:
      return null;
  }
};
NotificationsList.displayName = 'NotificationsList';