hunk.code_window: | `tabs`                       | `object[]` | The array of items that do describe the tabs/feeds, they are bound with the `stores` property. More information can be found [here](./react/react-components/#multiple-tab-layout).                                                                                                                                    |
   | `showUserPreferences`        | `boolean`  | The flag indicating whether the user preference settings should be visible or not.                                                                                                                                                                                                                                     |
   | `allowedNotificationActions` | `boolean`  | The flag indicating whether to show/hide the dots menu for actions performed on a notification.                                                                                                                                                                                                                        |
   | `popover`                    | `object`   | The object defining how the popover should be positioned. It's properties are position and offset.                                                                                                                                                                                                                     |
   | `theme`                      | `object`   | The object defining the the light/dark styles of the Notification Center component, more info [here](./react/react-components#customizing-the-notification-center-theme). We discourage you to use this prop to do the styling, instead it's recommended to use the `styles` property.                                 |
   | `styles`                     | `object`   | The object allows you to define the custom CSS code. Check the details [here](./custom-styling).                                                                                                                                                                                                                       |
   | `colorScheme`                | `string`   | The prop defining which color version of the styles the component should set. The options are `light` and `dark`.                                                                                                                                                                                                      |
  
hunk.labels: keep keep keep replace keep keep keep
hunk.after_edit: | `popoverConfig`              | `object`   | The object defining how the popover should be positioned. It's properties are position and offset.                                                                                                                                                                                                                     |
  
hunk.file_path: docs/docs/notification-center/web-component.md
hunk.type: replace
file: import React, { FunctionComponent } from 'react';
  import { IMessage, MessageActionStatusEnum, ButtonTypeEnum } from '@novu/shared';
  
  import { NovuProvider } from '../novu-provider';
  import { PopoverNotificationCenter } from '../popover-notification-center';
  import { NotificationBell } from '../notification-bell';
  import { reactToWebComponent } from '../../utils';
  import type { NotificationCenterComponentProps, PopoverWrapperProps } from './notification-center-component.types';
  import { useUpdateAction } from '../../hooks';
  
  /*
   * This array represents the public API of the web component.
   * All the props defined in the NotificationCenterComponentProps should be added here.
   */
  export const NOTIFICATION_CENTER_PROPS = [
    'backendUrl',
    'socketUrl',
    'subscriberId',
    'applicationIdentifier',
    'subscriberHash',
    'stores',
    'tabs',
    'showUserPreferences',
    'allowedNotificationActions',
    'popover',
    'theme',
    'styles',
    'colorScheme',
    'i18n',
    'onLoad',
    'sessionLoaded',
    'onNotificationClick',
    'notificationClicked',
    'onUnseenCountChanged',
    'unseenCountChanged',
    'onActionClick',
    'actionClicked',
    'onTabClick',
    'tabClicked',
  ];
  
  export const NotificationCenterComponent: FunctionComponent<NotificationCenterComponentProps> = ({
    backendUrl,
    socketUrl,
    subscriberId,
    applicationIdentifier,
    subscriberHash,
    stores,
    tabs,
    showUserPreferences,
    allowedNotificationActions,
    popover,
    theme,
    styles,
    colorScheme = 'dark',
    i18n,
    sessionLoaded,
    onLoad = sessionLoaded,
    notificationClicked,
    onNotificationClick = notificationClicked,
    unseenCountChanged,
    onUnseenCountChanged = unseenCountChanged,
    actionClicked,
    onActionClick = actionClicked,
    tabClicked,
    onTabClick = tabClicked,
  }) => {
    return (
      <NovuProvider
        onLoad={onLoad}
        stores={stores}
        backendUrl={backendUrl}
        socketUrl={socketUrl}
        subscriberId={subscriberId}
        applicationIdentifier={applicationIdentifier}
        subscriberHash={subscriberHash}
        styles={styles}
        i18n={i18n}
      >
        <PopoverWrapper
          onNotificationClick={onNotificationClick}
          onUnseenCountChanged={onUnseenCountChanged}
          onActionClick={onActionClick}
          onTabClick={onTabClick}
          colorScheme={colorScheme}
          theme={theme}
          tabs={tabs}
          showUserPreferences={showUserPreferences}
          allowedNotificationActions={allowedNotificationActions}
          popover={popover}
        />
      </NovuProvider>
    );
  };
  
  function PopoverWrapper({
    onNotificationClick,
    onUnseenCountChanged,
    onActionClick,
    onTabClick,
    colorScheme = 'dark',
    theme,
    tabs,
    showUserPreferences,
    allowedNotificationActions,
    popover,
    unseenBadgeColor,
    unseenBadgeBackgroundColor,
  }: PopoverWrapperProps) {
    const { updateAction } = useUpdateAction();
  
    function handlerOnActionClick(templateIdentifier: string, type: ButtonTypeEnum, message: IMessage) {
      updateAction({ messageId: message._id, actionButtonType: type, status: MessageActionStatusEnum.DONE });
      onActionClick?.(templateIdentifier, type, message);
    }
  
    return (
      <PopoverNotificationCenter
        onNotificationClick={onNotificationClick}
        onUnseenCountChanged={onUnseenCountChanged}
        onActionClick={handlerOnActionClick}
        onTabClick={onTabClick}
        colorScheme={colorScheme}
        theme={theme}
        tabs={tabs}
        showUserPreferences={showUserPreferences}
        allowedNotificationActions={allowedNotificationActions}
        offset={popover?.offset}
        position={popover?.position}
      >
        {({ unseenCount }) => (
          <NotificationBell
            colorScheme={colorScheme}
            unseenCount={unseenCount}
            unseenBadgeColor={unseenBadgeColor}
            unseenBadgeBackgroundColor={unseenBadgeBackgroundColor}
          />
        )}
      </PopoverNotificationCenter>
    );
  }
  
  export const NotificationCenterWebComponent = reactToWebComponent(NotificationCenterComponent, {
    props: NOTIFICATION_CENTER_PROPS,
  });
  