\n ): boolean {\n const isPropsDifferent =\n this.feed !== nextProps.config.feed ||\n this.props.config.maxNotificationsCount !== nextProps.config.maxNotificationsCount ||\n this.props.config.maxTopOffset !== nextProps.config.maxTopOffset ||\n this.props.config.minTopOffset !== nextProps.config.minTopOffset ||\n this.props.config.className !== nextProps.config.className ||\n this.props.id !== nextProps.id;\n const isStateDifferent =\n this.state.top !== nextState.top ||\n this.state.notificationsComponentList.length !== nextState.notificationsComponentList.length ||\n this.state.notificationsComponentList.every(value =>\n nextState.notificationsComponentList.find(otherValue => otherValue.props.notification.id === value.props.notification.id)\n );\n return isPropsDifferent || isStateDifferent;\n }\n\n /**\n * Adds the current instance to the global list of instances so that it becomes available for the notification manager.\n * In case the list is specified to be stickable, also subscribes to the scroll event to update the offsets.\n */\n public componentDidMount(): void {\n NotificationComponentsListsManager.subscribe(this);\n\n this._instanceId = `NotificationComponentsList-${Random.Guid.generateGuid()}`;\n\n if (MsDyn365.isBrowser && this._stickyConfiguration !== undefined) {\n window.addEventListener('scroll', this._handleTopUpdate);\n }\n }\n\n /**\n * Remove the instance from the global list of instances so that it becomes unavailable for the notification manager.\n * Unsubscribes itself from the notification events and scroll event.\n */\n public componentWillUnmount(): void {\n NotificationComponentsListsManager.unsubscribe(this);\n\n this._notificationsComponentList.forEach(component =>\n component.props.notification.events.getValue(NotificationEvents.RemovedFromList)?.unsubscribe(this._instanceId!)\n );\n\n if (MsDyn365.isBrowser && this._stickyConfiguration !== undefined) {\n window.removeEventListener('scroll', this._handleTopUpdate);\n }\n }\n\n /**\n * Adds a new notification to the list.\n * @param {INotificationComponentType} notificationComponent Data required to render the notification. @see INotificationComponentType.\n */\n public addNotificationComponent(notificationComponent: INotificationComponentType): void {\n if (this._instanceId === undefined) {\n return;\n }\n\n if (\n !ObjectExtensions.isNullOrUndefined(this.props.config.maxNotificationsCount) &&\n this._notificationsComponentList.length >= this.props.config.maxNotificationsCount\n ) {\n throw new Error('Notifications limit reached, cannot show more notifications.');\n }\n\n // Subscribe to the remove event to filter the removed notifications out from the list.\n notificationComponent.props.notification.events.getValue(NotificationEvents.RemovedFromList)?.subscribe({\n instanceId: this._instanceId,\n handler: () => {\n notificationComponent.props.notification.events\n .getValue(NotificationEvents.RemovedFromList)\n ?.unsubscribe(this._instanceId!);\n const newList = this._notificationsComponentList.filter(component => component !== notificationComponent);\n this._notificationsComponentList = newList;\n this.setState({ notificationsComponentList: this._notificationsComponentList });\n }\n });\n\n // Prepend the notification as newest should come to the top.\n this._notificationsComponentList.unshift(notificationComponent);\n this.setState({ notificationsComponentList: this._notificationsComponentList });\n this._handleTopUpdate();\n }\n\n public render(): React.ReactNode {\n const className = classnames(\n NotificationComponentsList._className,\n `${NotificationComponentsList._className}__${this.feed}`,\n this.props.config.className\n );\n\n const viewProps: INotificationsListViewProps = {\n ...this.props,\n container: {\n moduleProps: this.props,\n className,\n id: this._instanceId,\n style: { top: this.state.top }\n },\n notificationsList: this._renderNotificationsList()\n };\n\n return this.props.renderView(viewProps);\n }\n\n /**\n * Renders the list of notifications.\n * @returns React node with a list of notifications.\n */\n private _renderNotificationsList(): React.ReactNode {\n const hasNotifications = ArrayExtensions.hasElements(this.state.notificationsComponentList);\n const containerClassName = classnames(\n `${NotificationComponentsList._className}__scrollable`,\n hasNotifications\n ? `${NotificationComponentsList._className}__has-notifications`\n : `${NotificationComponentsList._className}__empty`\n );\n\n return (\n \n {this.state.notificationsComponentList.map(component => {\n const ComponentClass = component.componentClass;\n return ;\n })}\n
\n );\n }\n\n /**\n * Retrieves current top offset position by looking at scroll position and rounding it to the stickable limits.\n */\n private _getCurrentTopPosition(): number | undefined {\n const configuration = this._stickyConfiguration;\n\n if (configuration === undefined) {\n return undefined;\n }\n\n let pageYOffset = 0;\n if (MsDyn365.isBrowser) {\n pageYOffset = window.pageYOffset;\n }\n\n return Math.max(Math.min(configuration.maxTopOffset, configuration.maxTopOffset - pageYOffset), configuration.minTopOffset);\n }\n\n /**\n * Updates the top offset on scroll event to make the list stickable.\n */\n private _handleTopUpdate(): void {\n const newTop = this._getCurrentTopPosition();\n this.setState({ top: newTop });\n }\n}\n\nexport default NotificationComponentsList;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as MsDyn365 from '@msdyn365-commerce/core-internal';\nimport { LogLevel } from '@msdyn365-commerce/telemetry-internal';\nimport * as React from 'react';\nimport { IScriptInjectorProps } from './script-injector.props.autogenerated';\n\n/**\n *\n * CoreComponent component\n * @extends {React.PureComponent}\n */\nclass ScriptInjector extends React.PureComponent> {\n constructor(props: IScriptInjectorProps<{}>) {\n super(props);\n }\n\n public render(): JSX.Element | null {\n const { config } = this.props;\n this._debug(`Adding html head tags for '${this.props.id}/${this.props.typeName}'`);\n\n const placeHolderPropsRegEx = RegExp('%[a-zA-Z0-9-.]*%', 'g');\n let placeHolders: RegExpExecArray | null;\n const originalSource = config && config.scriptSource;\n let resolvedSource;\n\n if (originalSource) {\n let hasMorePlaceHolders = true;\n resolvedSource = originalSource;\n\n while (hasMorePlaceHolders) {\n placeHolders = placeHolderPropsRegEx.exec(originalSource);\n\n if (placeHolders && placeHolders.length > 0) {\n this._debug(`extracted placeholder ${placeHolders[0]}`);\n resolvedSource = this._resolvePlaceHolder(resolvedSource, placeHolders[0]);\n } else {\n hasMorePlaceHolders = false;\n }\n }\n }\n\n if (!resolvedSource) {\n return null;\n }\n\n return (\n \n {this._isUrl(resolvedSource) ? (\n \n ) : (\n \n )}\n \n );\n }\n\n private _debug(debugMessage: string): void {\n if (this.props.telemetry) {\n this.props.telemetry.log(LogLevel.Debug, debugMessage);\n }\n }\n\n private _isUrl(source: string): boolean {\n // eslint-disable-next-line security/detect-unsafe-regex\n return /(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/.test(source);\n }\n\n private _resolvePlaceHolder(resolvedSource: string, placeHolderToken: string): string {\n // expect placeholder to of the format eg: %config.id%\n const placeHolderTokens = placeHolderToken.split(/[%.]/);\n\n if (placeHolderTokens.length !== 4 || !resolvedSource) {\n return resolvedSource;\n }\n\n const propertyContext = placeHolderTokens[1];\n const propertyName = placeHolderTokens[2];\n\n if (propertyContext === 'props') {\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n if (this.props[propertyName]) {\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n resolvedSource = resolvedSource.replace(placeHolderToken, this.props[propertyName]);\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n this._debug(`Replaced placeholder ${placeHolderToken} with props property ${this.props[propertyName]}`);\n }\n } else if (this.props.context && this.props.context.request) {\n switch (propertyContext) {\n case 'request':\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n if (this.props.context.request[propertyName]) {\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n resolvedSource = resolvedSource.replace(placeHolderToken, this.props.context.request[propertyName]);\n this._debug(\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n `Replaced placeholder ${placeHolderToken} with request property ${this.props.context.request[propertyName]}`\n );\n }\n\n break;\n case 'user':\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n if (this.props.context.request.user && this.props.context.request.user[propertyName]) {\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n resolvedSource = resolvedSource.replace(placeHolderToken, this.props.context.request.user[propertyName]);\n this._debug(\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n `Replaced placeholder ${placeHolderToken} with user property ${this.props.context.request.user[propertyName]}`\n );\n }\n\n break;\n case 'query':\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n if (this.props.context.request.query && this.props.context.request.query[propertyName]) {\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n resolvedSource = resolvedSource.replace(placeHolderToken, this.props.context.request.query[propertyName]);\n this._debug(\n // eslint-disable-next-line security/detect-object-injection -- bracket object notation with user input present leads to eslint security issue.\n `Replaced placeholder ${placeHolderToken} with query parameter ${this.props.context.request.query[propertyName]}`\n );\n }\n\n break;\n default:\n }\n }\n\n return resolvedSource;\n }\n}\n\nexport default ScriptInjector;\n"],"sourceRoot":""}