\r\n \r\n \r\n {secondaryButtonText}\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nMobileAppInstallPromptRaw.propTypes = {\r\n classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types\r\n instrumentation: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n hidden: PropTypes.func.isRequired,\r\n handleClickCancelButton: PropTypes.func.isRequired,\r\n onDismiss: PropTypes.func,\r\n onClose: PropTypes.func,\r\n secondaryButtonText: PropTypes.string,\r\n isMobileUnderDevlelopment: PropTypes.bool,\r\n isMobileViewOnly: PropTypes.bool,\r\n isESC: PropTypes.bool,\r\n};\r\n\r\nMobileAppInstallPromptRaw.defaultProps = {\r\n onDismiss: noop,\r\n onClose: noop,\r\n secondaryButtonText: '',\r\n isMobileUnderDevlelopment: false,\r\n isMobileViewOnly: false,\r\n isESC: false,\r\n};\r\n\r\nexport const MobileAppInstallPrompt = compose(\r\n WrappedComponent => withLock(WrappedComponent, {\r\n priority: priorityLevel.mobilePrompt,\r\n lockKey: keyVault.mobilePrompt,\r\n }),\r\n WrappedComponent => withDefaultStyles(WrappedComponent, getMobileAppInstallPromptStyles),\r\n withInstrumentation,\r\n withI18nConsumer\r\n)(MobileAppInstallPromptRaw);\r\n\r\nexport const MobileAppInstallPromptWithUserGovernance = withUserGovernance(MobileAppInstallPrompt);\r\n","import _ from 'underscore';\r\n\r\nexport const MS_STORE_PROVIDER_ID_MAP = {\r\n SI: [10624440, 5104030, 5353239],\r\n PROD: [182978],\r\n CI: [108],\r\n};\r\n\r\nexport function getMSStoreIdByEnv(url) {\r\n if (url.includes('redmond.corp.microsoft.com')) {\r\n return MS_STORE_PROVIDER_ID_MAP.CI;\r\n }\r\n if (url.includes('ads-int.microsoft.com') || url.includes('si.bingads.microsoft.com')) {\r\n return MS_STORE_PROVIDER_ID_MAP.SI;\r\n }\r\n return MS_STORE_PROVIDER_ID_MAP.PROD;\r\n}\r\n\r\nexport const isMSStoreProviderId = (providerId, url = window.location.href) => {\r\n const id = +providerId;\r\n\r\n const msStoreIds = getMSStoreIdByEnv(url);\r\n return msStoreIds.includes(id);\r\n};\r\n\r\nexport function isMSStoreAdsCampaign(campaign) {\r\n const msStoreIds = getMSStoreIdByEnv(window.location.href);\r\n const providerId = _.chain(campaign).result('CampaignSettings').result('0').result('ProviderId')\r\n .value();\r\n return !!(msStoreIds.some(id => String(id) === String(providerId)));\r\n}\r\n","import { DirectionalHint } from '@fluentui/react';\r\nimport { defaultUserGovernanceConfig } from '@bingads-webui-campaign-react/multi-step-teaching-bubble';\r\n\r\nexport const TeachingBubbleConfigs = {\r\n featureName: 'navigation-refresh',\r\n userGovernanceConfig: defaultUserGovernanceConfig,\r\n steps: [\r\n {\r\n title: _TL_('View all your campaigns'),\r\n content: _TL_('Congratulations! As you now have more than one campaign, you can access the \"All Campaigns\" view. To switch to a specific campaign, use the dropdown beside and change your scope accordingly.'),\r\n primaryButtonText: _TL_('Next'),\r\n secondaryButtonText: _TL_(''),\r\n targetElement: '.scope-bar-left .scope-selector-dropdown',\r\n directionalHint: DirectionalHint.rightCenter,\r\n },\r\n {\r\n title: _TL_('New navigation items for campaign management'),\r\n content: _TL_('We have updated your navigation to enhance the efficiency of your campaign management. You may notice that the menu items change when you switch to different types of campaigns.'),\r\n primaryButtonText: _TL_('Next'),\r\n secondaryButtonText: _TL_(''),\r\n targetElement: '.side-navigation-L2-container [role=\"tablist\"]',\r\n directionalHint: DirectionalHint.rightTopEdge,\r\n },\r\n {\r\n title: _TL_('Expand your navigation with customization'),\r\n content: _TL_(' Discover an array of tools beyond what meets the eye. Explore all the available options, take them for a spin, and simply pin the most frequently used one to keep it readily accessible on your navigation.'),\r\n primaryButtonText: _TL_('Got it'),\r\n secondaryButtonText: _TL_(''),\r\n targetElement: 'div[data-overflow-group=\"trailling_0\"]',\r\n directionalHint: DirectionalHint.rightCenter,\r\n },\r\n ],\r\n};\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { getUNQIndex } from '@bingads-webui-react/unified-notification-queue';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nexport const Placeholder = withDefaultStyles(({ i18n, classes }) => {\r\n const btnClassNames = classNames('unified-notification-queue-trigger-btn', 'trigger-queue-close');\r\n const bellClassNames = classNames('alert-icon', 'notification-bell-inactive');\r\n\r\n return (\r\n \r\n {title}\r\n
\r\n \r\n
\r\n \r\n {`${i18n.getString(_TL_('Monitor performance, improve your account on the go, and so much more!'))}`}\r\n
\r\n \r\n
\r\n \r\n {`${i18n.getString(_TL_('Just scan this code:'))}`}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {`${i18n.getString(_TL_('1. Open your phone\\'s camera'))}`}\r\n
\r\n \r\n {`${i18n.getString(_TL_('2. Scan the QR code'))}`}\r\n
\r\n \r\n {`${i18n.getString(_TL_('3. Get the app'))}`}\r\n
\r\n \r\n
\r\n \r\n {`${i18n.getString(_TL_('For your best experience, we recommend managing your campaign on the desktop browser'))}`}\r\n
\r\n \r\n
\r\n \r\n );\r\n}, getUNQIndex);\r\n\r\n\r\nPlaceholder.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import React from 'react';\r\nimport { withPageReadyAsync } from '@bingads-webui-react/with-page-ready';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { Placeholder } from './placeholder';\r\n\r\nexport const getNotificationsBar = (store, config = {}) => withPageReadyAsync(\r\n () => import(/* webpackMode: 'eager' */'@bingads-webui-campaign/notification-center')\r\n .then(({ getUnifiedNotificationQueue }) => ({\r\n default: getUnifiedNotificationQueue(store, config),\r\n })),\r\n withI18nConsumer(({ i18n }) => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {CustomCardView == null && (\r\n \r\n \r\n {name} \r\n {CardHeaderContent &&
\r\n }\r\n className={classNames('card-header', styles.cardHeader)}\r\n action={\r\n \r\n {children}\r\n
\r\n \r\n )}\r\n {CustomCardView != null && \r\n \r\n
\r\n );\r\n}\r\n\r\nDefaultHeaderDropdown.propTypes = {\r\n // eslint-disable-next-line react/forbid-prop-types\r\n state: PropTypes.object,\r\n setState: PropTypes.func.isRequired,\r\n options: PropTypes.arrayOf(PropTypes.shape({\r\n value: PropTypes.string,\r\n displayName: PropTypes.string,\r\n })).isRequired,\r\n initialSelectedValue: PropTypes.string.isRequired,\r\n onOptionSelected: PropTypes.func,\r\n};\r\n\r\nDefaultHeaderDropdown.defaultProps = {\r\n state: undefined,\r\n onOptionSelected: _.noop,\r\n};\r\n\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect } from 'react';\r\nimport {\r\n withSiteMap,\r\n withCampaignSiteMap,\r\n siteMapPropType,\r\n processor,\r\n processorSet,\r\n Configs,\r\n} from '@bingads-webui-campaign-react/with-site-map';\r\nimport { DetailListPageMenu } from '@bingads-webui-campaign-react/page-menu';\r\nimport { Activity, Scenario } from '@bingads-webui-react/hoc-with-signal';\r\nimport config from '@bingads-webui-component-legacy/config/index';\r\n\r\nconst dynamicPermissions = _.result(config.get('permissions'), 'dynamic', {});\r\nconst { IsRenameHotelToLodgingEnabled } = dynamicPermissions;\r\n\r\nexport const campaignPageGroups = [\r\n ['overview', 'recommendations', 'query-insights'],\r\n ['campaigns', 'adgroups'],\r\n ['appads-asset-groups', 'asset-groups', 'listing-groups', 'products', 'ads-and-extensions', 'assets-report', IsRenameHotelToLodgingEnabled ? 'properties' : 'hotels', 'landing-pages', 'feeds-items'],\r\n ['keywords', 'dsa', 'product-groups', IsRenameHotelToLodgingEnabled ? 'property-groups' : 'hotel-groups', 'audiences', 'demographics'],\r\n ['settings', 'locations', 'ad-schedule', 'devices'],\r\n ['change-history'],\r\n ['competition'],\r\n ['experiments'],\r\n];\r\n\r\nexport const noExpandGroups = ['recommendations', 'query-insights'];\r\n\r\nconst DetailListPageMenuWithSiteMap = withCampaignSiteMap(DetailListPageMenu, _.union(processorSet.all, [processor.processPmaxCampaignPageMenu, processor.processPmaxRetailCampaignPageMenu]));\r\n\r\nexport const Loader = (props) => {\r\n const {\r\n siteMap,\r\n updateAvailability,\r\n ...others\r\n } = props;\r\n\r\n const selectedParent = _.findWhere(siteMap, { selected: true });\r\n\r\n useEffect(() => {\r\n updateAvailability(!_.isEmpty(selectedParent));\r\n });\r\n\r\n if (!props.isVisible) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return null;\r\n };\r\n\r\n const { children: assetLibrarySiteMap = [] } = selectedParent || {};\r\n return props.isVisible\r\n ? \r\n
: ''}\r\n \r\n\r\n);\r\n\r\nconst PageMenuItem = ({\r\n classes,\r\n pageItem,\r\n setLandingPage,\r\n pageItemUrl = '',\r\n withRelationLine = false,\r\n showLabel = false,\r\n renderIcon = null,\r\n collapsed = false,\r\n}) => {\r\n const classNameArray = [\r\n classes.baseMenuItem,\r\n pageItem.isSelected\r\n ? [classes.selectedPageMenuItem, 'page-menu-item-selected']\r\n : classes.pageMenuItem,\r\n `bingads-campaign-react-page-menu-item-${pageItem.id}`,\r\n 'bingads-campaign-react-page-menu-item',\r\n `bingads-campaign-react-page-menu-item-${withRelationLine ? 'sub' : 'top'}`,\r\n ];\r\n\r\n if (!pageItem.isPageEnabled) {\r\n classNameArray.push(classes.notEnabledPageMenuItem);\r\n\r\n if (pageItem.isFallbackSelected) {\r\n classNameArray.push(classes.notEnabledSelectedPageMenuItem);\r\n }\r\n }\r\n\r\n const className = classNames(classNameArray);\r\n\r\n return (\r\n {renderIcon(pageItem)}
}\r\n {(!renderIcon || !collapsed) && \r\n
\r\n );\r\n };\r\n\r\n const onToggleCollapse = listprops => () => {\r\n activity.signal(`toggle icon clicked, ori: ${!!listprops.group.isCollapsed}`);\r\n listprops.onToggleCollapse(listprops.group);\r\n };\r\n\r\n const onGroupHeaderclick = listprops => (e) => {\r\n activity.signal(`group header clicked, name: ${listprops.group.keyId}`);\r\n if (listprops.group.isSelected) {\r\n listprops.onToggleCollapse(listprops.group);\r\n } else {\r\n onSelect(items[listprops.group.startIndex])(e, true);\r\n }\r\n };\r\n\r\n const onRenderGroupHeader = (listprops) => {\r\n if (listprops && listprops.group) {\r\n if (listprops.group.count > 1) {\r\n const { group } = listprops;\r\n const iconLabel = group.isCollapsed ? iconExpandLabel : iconCollapseLabel;\r\n const isSettingBannerExist = document.querySelector('.bingads-campaign-react-page-menu-item-settings') && (document.querySelector('.bingads-campaign-react-page-menu-item-settings').offsetHeight > 0);\r\n const MarketName = (serverContext && serverContext.HelpModel && serverContext.HelpModel.MarketName) || 'en-US';\r\n const language = (MarketName && MarketName.includes('-')) ? MarketName.split('-')[0] : 'en';\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n\r\n renderHeader() {\r\n const { title } = this.props;\r\n\r\n // return early to in case empty panel-header show out\r\n if (!title) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n renderDescription() {\r\n const { description } = this.props;\r\n\r\n return (\r\n {title}
\r\n{description}
: null}\r\n \r\n {children}\r\n
\r\n \r\n \r\n );\r\n }\r\n\r\n render() {\r\n const {\r\n direction,\r\n showMask,\r\n isOpen,\r\n } = this.props;\r\n currentPanel[this.panelId] = isOpen && this.container;\r\n const panelClassname = classnames('panel', this.props.panelClassName, {\r\n [`panel-${direction}`]: true,\r\n isOpen,\r\n });\r\n\r\n if (isOpen && !this.container) {\r\n this.initContainer(this.props);\r\n }\r\n\r\n // return early to in case no needed rendering\r\n if (!this.container || !isOpen) {\r\n return null;\r\n }\r\n\r\n // Update classname when rerender, otherwise style could broke if jss hash name changed by parent\r\n this.container.className = this.props.classes.panelContainer;\r\n\r\n const panel = (\r\n \r\n {showMask && this.renderMask()}\r\n {this.renderPanel()}\r\n
);\r\n\r\n return ReactDOM.createPortal(panel, this.container);\r\n }\r\n}\r\n\r\nPanel.propTypes = {\r\n /**\r\n * Define the classes for Panel container, Panel container name can be customized.\r\n * Default value is 'panelContainer'\r\n */\r\n classes: PropTypes.shape(mapObject(\r\n getPanelStyles({}, {}),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n /**\r\n * Custom class name for panel.\r\n */\r\n panelClassName: PropTypes.string,\r\n /**\r\n * Return the mounted node for Panel.\r\n * Default value is 'body'\r\n * Type: Selectors | HTMLElement | () => HTMLElement\r\n */\r\n getContainer: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.object,\r\n PropTypes.func,\r\n ]),\r\n /**\r\n * Whether to show mask or not\r\n * Default value is true\r\n */\r\n showMask: PropTypes.bool,\r\n /**\r\n * Whether the Panel dialog is open or not.\r\n * Default value is false\r\n */\r\n isOpen: PropTypes.bool,\r\n /**\r\n * The direction of the Panel.\r\n * 'left', 'right', 'top', 'bottom'\r\n * Default value is 'right'\r\n */\r\n direction: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),\r\n /**\r\n * Width of the Panel\r\n * Default value is null (100%)\r\n */\r\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n /**\r\n * Height of the Panel\r\n * Default value is null (100%)\r\n */\r\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n /**\r\n * The title for Panel\r\n * Default value is null\r\n */\r\n title: PropTypes.node,\r\n /**\r\n * The description for Panel\r\n * Default value is null\r\n */\r\n description: PropTypes.node,\r\n /**\r\n * The children for Panel, also the content for the panel\r\n */\r\n children: PropTypes.node.isRequired,\r\n /**\r\n * Whether the Panel show close icon\r\n * Default value is true\r\n */\r\n showCloseIcon: PropTypes.bool,\r\n /**\r\n * Specify a callback that will be called when a user clicks mask, close button\r\n * onClose is required to close the panel\r\n */\r\n onClose: PropTypes.func.isRequired,\r\n /**\r\n * panel ready aria label text\r\n */\r\n panelReadyAriaLabel: PropTypes.string,\r\n /**\r\n * i18n for localization\r\n */\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nPanel.defaultProps = {\r\n getContainer: 'body',\r\n isOpen: false,\r\n showMask: true,\r\n direction: 'right',\r\n width: null,\r\n height: null,\r\n title: null,\r\n description: null,\r\n panelClassName: null,\r\n showCloseIcon: true,\r\n panelReadyAriaLabel: '',\r\n};\r\n\r\nexport const StyledPanel = withDefaultStyles(Panel, getPanelStyles);\r\n","export const getErrorMarkStyle = (_, { palette }) => ({\r\n error: {\r\n color: '#A80000',\r\n textDecoration: 'underline dashed #A80000',\r\n\r\n '&:focus': {\r\n outline: `1px solid ${palette.neutralPrimary}`,\r\n },\r\n\r\n '@media screen and (-ms-high-contrast: active), (forced-colors: active)': {\r\n color: 'buttontext',\r\n '&:active': {\r\n color: 'buttontext',\r\n },\r\n\r\n '&:hover, &:active:hover': {\r\n color: 'highlight',\r\n },\r\n\r\n '&:focus': {\r\n color: 'buttontext',\r\n outline: '1px solid buttontext',\r\n },\r\n },\r\n },\r\n icon: {\r\n color: '#A80000',\r\n marginRight: '8px',\r\n },\r\n});\r\n\r\nexport const calloutStyles = {\r\n label: {\r\n root: {\r\n fontWeight: 'bold',\r\n fontSize: '14px',\r\n maxWidth: '400px',\r\n paddingRight: '10px',\r\n paddingLeft: '10px',\r\n },\r\n },\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useState, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Callout, FontIcon, Label } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getErrorMarkStyle, calloutStyles } from '../styles/get-error-mark-style';\r\n\r\nexport const ErrorMark = (props) => {\r\n const {\r\n component: Component,\r\n messages,\r\n } = props;\r\n const classes = useDefaultStyles(getErrorMarkStyle);\r\n\r\n const [isCalloutVisible, setIsCalloutVisible] = useState(false);\r\n const [target, setTarget] = useState(null);\r\n\r\n const openCallout = useCallback((event) => {\r\n setTarget(event.target);\r\n setIsCalloutVisible(true);\r\n }, []);\r\n\r\n const dismissCallout = useCallback(() => {\r\n setIsCalloutVisible(false);\r\n setTarget(null);\r\n }, []);\r\n\r\n const onKeyDown = useCallback((event) => {\r\n if (event.key === 'Enter' ||\r\n event.key === ' ') {\r\n openCallout(event);\r\n } else if (event.key === 'Escape') {\r\n dismissCallout();\r\n }\r\n }, [dismissCallout, openCallout]);\r\n\r\n const a11yProps = useMemo(() => (\r\n !_.isEmpty(messages) ?\r\n {\r\n role: 'button',\r\n tabIndex: 0,\r\n onClick: openCallout,\r\n onKeyDown,\r\n onMouseEnter: openCallout,\r\n onMouseLeave: dismissCallout,\r\n className: classNames([classes.error, 'error-mark']),\r\n } : {}\r\n ), [classes.error, dismissCallout, messages, onKeyDown, openCallout]);\r\n\r\n const renderContent = properties => (\r\n \r\n {_.isFunction(onRenderText) ? onRenderText(itemText, itemTitle) : onRenderDefaultText(itemText, itemTitle)}\r\n {\r\n _.isFunction(onDelete) &&\r\n
\r\n );\r\n};\r\n\r\nSelectedItem.propTypes = {\r\n itemText: PropTypes.string.isRequired,\r\n itemTitle: PropTypes.string,\r\n onDelete: PropTypes.func,\r\n itemIndex: PropTypes.number.isRequired,\r\n onRenderText: PropTypes.func,\r\n errors: PropTypes.arrayOf(PropTypes.string),\r\n maxContentWidth: PropTypes.bool,\r\n};\r\n\r\nSelectedItem.defaultProps = {\r\n itemTitle: undefined,\r\n onDelete: undefined,\r\n onRenderText: undefined,\r\n errors: [],\r\n maxContentWidth: false,\r\n};\r\n","export const getSuggestedItemStyle = (_, { palette }) => ({\r\n suggestedItem: {\r\n height: '36px',\r\n padding: '0px 8px',\r\n color: palette.themePrimary,\r\n border: `1px solid ${palette.themePrimary}`,\r\n '&:hover, &:focus': {\r\n backgroundColor: palette.themePrimary,\r\n color: palette.white,\r\n border: '1px solid transparent',\r\n },\r\n '& .ms-Button-label': {\r\n fontWeight: 'normal',\r\n textOverflow: 'ellipsis',\r\n overflow: 'hidden',\r\n maxWidth: '500px',\r\n whiteSpace: 'nowrap',\r\n display: 'block',\r\n lineHeight: '22px',\r\n },\r\n },\r\n selectedItem: {\r\n backgroundColor: `${palette.themePrimary}1a`,\r\n },\r\n});\r\n\r\nexport const getSuggestedItemButtonStyleFluent2 = (_, { palette }) => ({\r\n root: {\r\n height: 32,\r\n padding: '0px 12px',\r\n border: '1px solid #8DBBF8',\r\n borderRadius: 8,\r\n color: palette.neutralPrimary,\r\n maxWidth: '100%', // Needed for the button to not overflow its container, truncate text instead\r\n },\r\n rootHovered: {\r\n color: palette.white,\r\n backgroundColor: palette.themePrimary,\r\n },\r\n rootDisabled: {\r\n backgroundColor: palette.neutralLighter,\r\n color: palette.neutralTertiary,\r\n },\r\n textContainer: {\r\n overflow: 'hidden',\r\n },\r\n label: {\r\n fontWeight: 'normal',\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n lineHeight: 'unset',\r\n },\r\n iconDisabled: {\r\n color: palette.neutralTertiaryAlt,\r\n },\r\n});\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { useTheme } from 'react-jss';\r\nimport { useId } from '@fluentui/react-hooks';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { TooltipHost } from '@bingads-webui-react/fabric-control';\r\nimport { DefaultButton } from '@bingads-webui-react/fabric-with-signal';\r\n\r\nimport { getSuggestedItemStyle, getSuggestedItemButtonStyleFluent2 } from '../styles/get-suggested-item-style';\r\n\r\nexport const SuggestedItem = (props) => {\r\n const {\r\n itemText,\r\n itemIndex,\r\n onAdd,\r\n isDisabled,\r\n tooltipContent,\r\n useStyleFluent2,\r\n useCustomStyle,\r\n getCustomStyle,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getSuggestedItemStyle);\r\n const theme = useTheme();\r\n const { components, core } = theme;\r\n const buttonStyles = useCustomStyle ? getCustomStyle(components, core) : getSuggestedItemButtonStyleFluent2(components, core);\r\n\r\n const addItem = useCallback(() => {\r\n onAdd(itemIndex, itemText);\r\n }, [itemIndex, itemText, onAdd]);\r\n\r\n const tooltipId = useId('tooltip');\r\n\r\n const TooltipContainer = tooltipContent ? TooltipHost : React.Fragment;\r\n const tooltipProps = tooltipContent ? { content: tooltipContent, id: tooltipId } : {};\r\n\r\n return (\r\n \r\n {noSuggestionsDescription || i18n.getString(_TL_('No suggestions available at this time.'))}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n\r\n {suggestedSectionDescription}\r\n
\r\n }\r\n\r\n {i18n.getString(_TL_('Finding suggestions...'))}\r\n
\r\n }\r\n\r\n {\r\n _.size(suggestions) > 0 &&\r\n \r\n \r\n \r\n
\r\n }\r\n \r\n );\r\n}\r\n\r\nSuggestionListCallout.propTypes = {\r\n target: PropTypes.shape({}).isRequired,\r\n currentInput: PropTypes.string.isRequired,\r\n setInputTarget: PropTypes.func.isRequired,\r\n onSelectSuggestion: PropTypes.func.isRequired,\r\n getSuggestionsFunc: PropTypes.func.isRequired,\r\n};\r\n","\r\nexport const getManualInputStyle = (_, { palette }) => ({\r\n textField: {\r\n width: '220px',\r\n display: 'inline-block',\r\n '& .ms-TextField-fieldGroup': {\r\n borderRadius: '2px 0px 0px 2px',\r\n },\r\n },\r\n addButton: {\r\n height: '34px',\r\n },\r\n confirmButton: {\r\n background: palette.themePrimary,\r\n color: palette.white,\r\n borderRadius: '0px 2px 2px 0px',\r\n verticalAlign: 'top',\r\n '&:hover, &:focus': {\r\n backgroundColor: palette.themeDarkAlt,\r\n color: palette.white,\r\n },\r\n '&:active': {\r\n backgroundColor: palette.themeDark,\r\n color: palette.white,\r\n },\r\n '&.manual-input-confirm-button:focus::after': {\r\n border: `1px solid ${palette.white}`,\r\n outline: 'none',\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useContext, useState, useCallback, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { ActionButton, TextField, IconButton } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nimport { SuggestionListCallout } from './suggestion-list-callout';\r\nimport { getManualInputStyle } from '../styles/get-manual-input-style';\r\n\r\nconst KEY_ESCAPE = 'Escape';\r\nconst KEY_ENTER = 'Enter';\r\n\r\nexport const ManualInput = (props) => {\r\n const {\r\n onAdd,\r\n disabled,\r\n addButtonText,\r\n onTriggerInput,\r\n manualInputError,\r\n setManualInputError,\r\n getManualInputError,\r\n getSuggestionsFunc,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getManualInputStyle);\r\n\r\n const [inputTriggered, setInputTriggered] = useState(false);\r\n const [inputTarget, setInputTarget] = useState(undefined);\r\n const [currentInput, setCurrentInput] = useState('');\r\n\r\n const reset = useCallback(() => {\r\n setInputTriggered(false);\r\n setCurrentInput('');\r\n setManualInputError('');\r\n setInputTarget(undefined);\r\n }, [setManualInputError]);\r\n\r\n useEffect(() => {\r\n if (disabled && inputTriggered) {\r\n reset();\r\n }\r\n }, [disabled, inputTriggered, reset]);\r\n\r\n const triggerInput = useCallback(() => {\r\n setInputTriggered(true);\r\n onTriggerInput();\r\n }, [onTriggerInput]);\r\n\r\n const handleConfirmAction = useCallback((trimmedInput, inputError) => {\r\n if (inputError.length > 0) {\r\n return;\r\n }\r\n if (inputError.length === 0 && trimmedInput.length > 0) {\r\n onAdd(trimmedInput);\r\n }\r\n reset();\r\n }, [onAdd, reset]);\r\n\r\n const handleOnChange = useCallback((event, value) => {\r\n setInputTarget(event.target);\r\n setCurrentInput(value);\r\n const input = value.trim();\r\n setManualInputError(getManualInputError(input));\r\n }, [getManualInputError, setManualInputError]);\r\n\r\n const onConfirmManualInput = useCallback(() => {\r\n const trimmedInput = currentInput.trim();\r\n handleConfirmAction(trimmedInput, manualInputError);\r\n }, [handleConfirmAction, currentInput, manualInputError]);\r\n\r\n const handleKeyDown = useCallback((event) => {\r\n if (event.key === KEY_ENTER) {\r\n onConfirmManualInput();\r\n }\r\n if (event.key === KEY_ESCAPE) {\r\n reset();\r\n event.preventDefault();\r\n event.stopPropagation();\r\n }\r\n }, [onConfirmManualInput, reset]);\r\n\r\n const onSelectSuggestion = useCallback((selectedSuggestion) => {\r\n setInputTarget(undefined);\r\n const trimmedSuggestion = (selectedSuggestion && selectedSuggestion.trim()) || '';\r\n const inputError = getManualInputError(trimmedSuggestion);\r\n setManualInputError(inputError);\r\n handleConfirmAction(trimmedSuggestion, inputError);\r\n }, [getManualInputError, handleConfirmAction, setManualInputError]);\r\n\r\n const manualInputTextField = useMemo(() => (\r\n \r\n
\r\n ), [classes.confirmButton, classes.textField, currentInput, getSuggestionsFunc, handleKeyDown,\r\n handleOnChange, i18n, inputTarget, manualInputError, onConfirmManualInput, onSelectSuggestion]);\r\n\r\n const addButton = useMemo(() => (\r\n \r\n {inputTriggered ? manualInputTextField : addButton}\r\n
\r\n );\r\n};\r\n\r\nManualInput.propTypes = {\r\n onAdd: PropTypes.func.isRequired,\r\n disabled: PropTypes.bool.isRequired,\r\n addButtonText: PropTypes.string,\r\n onTriggerInput: PropTypes.func,\r\n manualInputError: PropTypes.string.isRequired,\r\n setManualInputError: PropTypes.func,\r\n getManualInputError: PropTypes.func,\r\n getSuggestionsFunc: PropTypes.func,\r\n};\r\n\r\nManualInput.defaultProps = {\r\n addButtonText: undefined,\r\n onTriggerInput: _.noop,\r\n setManualInputError: _.noop,\r\n getManualInputError: _.noop,\r\n getSuggestionsFunc: undefined,\r\n};\r\n","import React, { useContext, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { IconButton } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { getSuggestedKeywordItemStyle } from './styles/get-suggested-keyword-item-style';\r\n\r\n// The different between SuggestedKeywordItem and SuggestedItem is that -\r\n// SuggestedKeywordItem uses IconButton instead of DefaultButton, so only the icon is clickable not the text.\r\n// SuggestedKeywordItem is used in keywords part of ExpertRevamp Signup flow\r\nexport const SuggestedKeywordItem = (props) => {\r\n const {\r\n word,\r\n onAdd,\r\n keywordIndex,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getSuggestedKeywordItemStyle);\r\n const i18n = useContext(I18nContext);\r\n const addKeyword = useCallback(() => {\r\n onAdd(keywordIndex);\r\n }, [onAdd, keywordIndex]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nSuggestedKeywordItem.propTypes = {\r\n word: PropTypes.string.isRequired,\r\n onAdd: PropTypes.func.isRequired,\r\n keywordIndex: PropTypes.number.isRequired,\r\n};\r\n","export const getSuggestionSectionStyle = () => ({\r\n suggestedItemsContainer: {\r\n marginTop: '60px',\r\n },\r\n sectionTitle: {\r\n fontWeight: '600',\r\n height: '20px',\r\n },\r\n sectionDescription: {\r\n marginBottom: '16px',\r\n fontWeight: 'normal',\r\n },\r\n});\r\n","import React from 'react';\r\nimport { Stack, Shimmer } from '@fluentui/react';\r\n\r\nexport const SectionShimmer = () => (\r\n \r\n {\r\n suggestedSectionTitle &&\r\n
\r\n );\r\n};\r\n\r\nSuggestionSection.propTypes = {\r\n className: PropTypes.string,\r\n suggestedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onAddSuggestedItem: PropTypes.func.isRequired,\r\n disableAllSuggestions: PropTypes.bool,\r\n disabledSuggestionTooltip: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.element,\r\n PropTypes.arrayOf(PropTypes.element),\r\n ]),\r\n renderSuggestedItem: PropTypes.func,\r\n suggestedSectionTitle: PropTypes.string,\r\n suggestedSectionDescription: PropTypes.string,\r\n noSuggestionsDescription: PropTypes.string,\r\n showSuggestionsSectionShimmer: PropTypes.bool,\r\n\r\n showMoreSuggestionsInlineButton: PropTypes.bool,\r\n renderMoreSuggestionsInlineButton: PropTypes.func,\r\n onMoreSuggestionsInlineButtonClick: PropTypes.func,\r\n\r\n suggestedItemsFooter: PropTypes.node,\r\n useStyleFluent2: PropTypes.bool,\r\n};\r\n\r\nSuggestionSection.defaultProps = {\r\n className: undefined,\r\n disableAllSuggestions: false,\r\n disabledSuggestionTooltip: undefined,\r\n renderSuggestedItem: SuggestedItems.defaultProps.renderSuggestedItem,\r\n suggestedSectionTitle: '',\r\n suggestedSectionDescription: '',\r\n noSuggestionsDescription: '',\r\n showSuggestionsSectionShimmer: false,\r\n showMoreSuggestionsInlineButton: false,\r\n renderMoreSuggestionsInlineButton: SuggestedItems.defaultProps.renderMoreSuggestionsInlineButton,\r\n onMoreSuggestionsInlineButtonClick: noop,\r\n\r\n suggestedItemsFooter: undefined,\r\n useStyleFluent2: false,\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { noop } from 'underscore';\r\nimport React, { useMemo, useCallback, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@fluentui/react';\r\nimport { Link } from '@bingads-webui-react/fabric-with-signal';\r\nimport { Collapsible } from '@bingads-webui-campaign-react/collapsible-nav';\r\nimport { SectionShimmer } from './components/section-shimmer';\r\nimport { SuggestedItems } from './components/suggested-items';\r\n\r\nconst headerStyleOverrides = {\r\n collapseIcon: {\r\n root: {\r\n color: 'unset',\r\n fontSize: 12,\r\n },\r\n },\r\n container: {\r\n root: {\r\n marginBottom: 18,\r\n },\r\n },\r\n containerCollapsed: {\r\n root: {\r\n marginBottom: 'unset',\r\n },\r\n },\r\n label: {\r\n root: {\r\n fontSize: 12,\r\n color: 'unset',\r\n },\r\n },\r\n};\r\n\r\nexport const SuggestionSectionCollapse = ({\r\n // className,\r\n topicKey,\r\n topicAriaLabel,\r\n icon,\r\n iconAltText,\r\n\r\n suggestedItems,\r\n onAddSuggestedItem,\r\n disableAllSuggestions,\r\n disabledSuggestionTooltip,\r\n\r\n renderSuggestedItem,\r\n\r\n suggestedSectionTitle,\r\n suggestedSectionDescription,\r\n noSuggestionsDescription,\r\n showSuggestionsSectionShimmer,\r\n\r\n showMoreSuggestionsInlineButton,\r\n renderMoreSuggestionsInlineButton,\r\n onMoreSuggestionsInlineButtonClick,\r\n\r\n showAddAllSuggestionsButton,\r\n addAllSuggestionsButtonText,\r\n onAddAllSuggestedItems,\r\n showMoreSuggestionsButton,\r\n moreSuggestionsButtonText,\r\n onMoreSuggestionsButtonClick,\r\n\r\n useStyleFluent2,\r\n forceClose,\r\n}) => {\r\n const suggestedItemsFooter = useMemo(() => (\r\n <>\r\n {(showAddAllSuggestionsButton || showMoreSuggestionsButton) &&\r\n \r\n {suggestedSectionTitle}\r\n
\r\n }\r\n {showSuggestionsSectionShimmer ?\r\n\r\n {noSuggestionsDescription || i18n.getString(_TL_('No suggestions available at this time.'))}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n\r\n {suggestedSectionDescription}\r\n
\r\n }\r\n\r\n \r\n {columnProps.column.name}\r\n \r\n {columnProps.column.helpTopic &&
\r\n );\r\n\r\n return {\r\n ...column,\r\n onRenderHeader,\r\n };\r\n};\r\n","import React from 'react';\r\nimport { map, get, isEmpty } from 'underscore';\r\nimport { CommandButton } from '@fluentui/react';\r\nimport { HelpIcon } from '@bingads-webui-campaign-react/help';\r\n\r\nimport { YourMetrics, Metrics } from '../../enums/metrics';\r\nimport { formatChangeRatio, formatDecimal } from '../../utils/format';\r\n\r\nexport const KPIColumn = ({\r\n i18n,\r\n logger,\r\n logContext,\r\n selectedMetricIndex,\r\n setSelectedMetricIndex,\r\n}) => {\r\n const { key, value } = YourMetrics[selectedMetricIndex] || {};\r\n\r\n return {\r\n key,\r\n name: i18n.getString(value),\r\n fieldName: `${key}.CurrentValue`,\r\n className: 'qi-column-kpi',\r\n headerClassName: 'qi-header-kpi',\r\n helpTopic: 'Pop_BA_SearchInsights_ClickImpSpend',\r\n minWidth: 160,\r\n sortable: true,\r\n isMultiline: true,\r\n isResizable: true,\r\n onRender: (item, index, column) => {\r\n const currentValue = formatDecimal(i18n, get(item, [column.key, 'CurrentValue']));\r\n const changeRatio = formatChangeRatio(i18n, get(item, [column.key, 'ChangeRatio']));\r\n return (\r\n \r\n {isEmpty(changeRatio) ? currentValue : i18n.getString(_TL_('{{value}} ({{ratio}})'), {\r\n value: currentValue,\r\n ratio: changeRatio,\r\n })}\r\n \r\n );\r\n },\r\n // eslint-disable-next-line react/prop-types\r\n onRenderHeader: ({ column }) => (\r\n \r\n {column.name}\r\n ({\r\n key: metric.key,\r\n text: i18n.getString(metric.value),\r\n onClick: () => {\r\n logger.log(logContext, 'MetricsPicker', 'Selection', Metrics[index], Metrics[selectedMetricIndex]);\r\n setSelectedMetricIndex(index);\r\n },\r\n })),\r\n }}\r\n />\r\n
\r\n ),\r\n };\r\n};\r\n","import React from 'react';\r\nimport { result } from 'underscore';\r\n\r\nimport { formatChangeRatio, formatSearchInterest } from '../../utils/format';\r\n\r\nexport const SearchInterestColumn = ({ i18n }) => ({\r\n key: 'SearchInterest',\r\n name: i18n.getString(_TL_('Search interest')),\r\n fieldName: 'SearchInterest.CurrentValue',\r\n className: 'qi-column-search-interest',\r\n headerClassName: 'qi-header-search-interest',\r\n helpTopic: 'Pop_BA_SearchInsights_SearchInterest',\r\n minWidth: 150,\r\n sortable: true,\r\n isMultiline: true,\r\n isResizable: true,\r\n onRender: item => (\r\n \r\n {i18n.getString(_TL_('{{value}} ({{ratio}})'), {\r\n value: formatSearchInterest(i18n, result(item.SearchInterest, 'CurrentValue')),\r\n ratio: formatChangeRatio(i18n, result(item.SearchInterest, 'ChangeRatio'), false) || i18n.getString(_TL_('>1000%')),\r\n })}\r\n \r\n ),\r\n});\r\n","export const cardStyle = ({ palette = {} }) => ({\r\n border: `1px solid ${palette.neutralLighter}`,\r\n fontSize: 14,\r\n marginBottom: 32,\r\n width: '100%',\r\n\r\n '& .qi-card-content': {\r\n position: 'relative',\r\n padding: '12px 16px 16px 16px',\r\n\r\n '& .qi-card-title': {\r\n fontSize: 16,\r\n fontWeight: 600,\r\n },\r\n\r\n '& .qi-card-description': {\r\n color: palette.neutralSecondary,\r\n padding: '12px 0',\r\n },\r\n\r\n '& .qi-card-feedback': {\r\n position: 'absolute',\r\n right: 16,\r\n top: 12,\r\n },\r\n },\r\n});\r\n","export const gridStyle = ({ palette = {} }) => ({\r\n fontSize: 12,\r\n maxHeight: 264,\r\n overflow: 'hidden auto',\r\n\r\n '& .ms-DetailsHeader': {\r\n borderTop: 'none',\r\n borderBottom: '1px solid #979797',\r\n },\r\n\r\n '& .ms-DetailsRow': {\r\n borderBottom: `1px solid ${palette.neutralLighter}`,\r\n },\r\n\r\n '& .ms-DetailsHeader-cell, .ms-DetailsRow-cell': {\r\n borderRight: 'none',\r\n },\r\n\r\n '& .ms-DetailsHeader-cellTitle': {\r\n flexDirection: 'row-reverse',\r\n justifyContent: 'flex-end',\r\n\r\n '& i.ms-Icon': {\r\n paddingRight: 4,\r\n },\r\n },\r\n\r\n '& .ms-DetailsRow-cell': {\r\n alignSelf: 'center',\r\n },\r\n\r\n '& .qi-column-kpi, & .qi-column-search-interest': {\r\n textAlign: 'end',\r\n },\r\n\r\n '& .qi-header-kpi, & .qi-header-search-interest': {\r\n '& .ms-DetailsHeader-cellTitle': {\r\n justifyContent: 'flex-start',\r\n },\r\n },\r\n\r\n '& .qi-header-kpi .ms-DetailsHeader-cellTitle': {\r\n paddingRight: 0,\r\n },\r\n\r\n '& .qi-header-metrics': {\r\n display: 'flex',\r\n\r\n '& .qi-metrics-name': {\r\n flexGrow: 1,\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n },\r\n});\r\n","import { result } from 'lodash';\r\n\r\nexport const copyAndSort = (items, key, isSortedDescending) => {\r\n if (!key) {\r\n return items;\r\n }\r\n\r\n return items.slice(0).sort((a, b) => ((isSortedDescending ?\r\n result(a, key) < result(b, key) :\r\n result(a, key) > result(b, key)) ? 1 : -1));\r\n};\r\n","import $ from 'jquery';\r\nimport React, { useCallback, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { map } from 'underscore';\r\nimport { ContextualMenu } from '@fluentui/react';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getStyle } from './style';\r\n\r\nconst MetricsPicker = (props) => {\r\n const {\r\n i18n,\r\n classes,\r\n metrics,\r\n } = props;\r\n\r\n const buttonRef = useRef(null);\r\n\r\n const [selectedMetricIndex, setSelectedMetricIndex] = useState(0);\r\n const [showContextualMenu, setShowContextualMenu] = useState(false);\r\n\r\n const onHideContextualMenu = useCallback(() => setShowContextualMenu(false), []);\r\n\r\n return (\r\n \r\n setShowContextualMenu(true)}\r\n ref={buttonRef}\r\n >\r\n {i18n.getString(_TL_('Your performance'))}\r\n
\r\n );\r\n};\r\n\r\nMetricsPicker.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n }).isRequired,\r\n metrics: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n};\r\n\r\nexport const SummaryBarMetricsPicker = withDefaultStyles(MetricsPicker, getStyle);\r\n","export const getStyle = () => ({\r\n container: {\r\n position: 'relative',\r\n\r\n '& button': {\r\n background: 'none',\r\n border: 'none',\r\n },\r\n\r\n '& .iconba': {\r\n marginLeft: 8,\r\n },\r\n },\r\n});\r\n","import React, { memo, useCallback, useLayoutEffect, useContext, useRef } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const FocusContext = React.createContext({\r\n focusElement: _.noop,\r\n suscribeFocusElement: _.noop,\r\n});\r\n\r\n\r\nexport const FocusContextProvider = memo((props) => {\r\n const elements = useRef({}).current;\r\n\r\n const focusElement = useCallback(({ scenario }) => {\r\n if (elements[scenario] && elements[scenario].current) {\r\n elements[scenario].current.focus();\r\n }\r\n }, [elements]);\r\n\r\n const suscribeFocusElement = useCallback(({ scenario, componentRef }) => {\r\n if (componentRef && scenario) {\r\n elements[scenario] = componentRef;\r\n } else if (scenario) {\r\n delete elements[scenario];\r\n }\r\n }, [elements]);\r\n\r\n return (\r\n \r\n ({\r\n key: metric,\r\n text: i18n.getString(metric),\r\n onClick: () => {\r\n $(document).trigger('qiMetricsChanged', { metric, index });\r\n setSelectedMetricIndex(index);\r\n },\r\n }))}\r\n target={buttonRef}\r\n onItemClick={onHideContextualMenu}\r\n onDismiss={onHideContextualMenu}\r\n />}\r\n
\r\n \r\n \r\n {i18n.getString(metrics[selectedMetricIndex])}\r\n
\r\n {showContextualMenu && \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const StyledRecommendationAlertPopup =\r\n withDefaultStyles(RecommendationAlertPopup, getStyle);\r\n\r\n\r\nexport function addRecommendationAlertPopup({\r\n container,\r\n alertMsg,\r\n position,\r\n iconClass,\r\n}) {\r\n ReactDOM.render(\r\n (\r\n {alertMsg}\r\n {children}\r\n
\r\n \r\n \r\n \r\n {autoApplyString}\r\n {!isFromSummary &&\r\n \r\n {` ${newI18n.getString(_TL_('Manage auto-apply preferences in'))}`}\r\n viewSettings(_.contains(SUPPORT_ADINSIGHT_AUTO_APPLY_TYPES, type))}\r\n >\r\n {isAutoApplyRecommendationEnabled &&\r\n _.contains(SUPPORT_ADINSIGHT_AUTO_APPLY_TYPES, type) ?\r\n newI18n.getString(_TL_('Auto-apply recommendation settings.')) : newI18n.getString(_TL_('Account settings.'))\r\n }\r\n \r\n \r\n }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const StyledRecommendationAutpApplyBanner =\r\n withDefaultStyles(RecommendationAutpApplyBanner, getAutpApplyBannerStyle);\r\n","/* eslint-disable no-unused-vars */\r\nexport const getAutpApplyBannerStyle = (_, { palette = {} }) => ({\r\n recommendationAutoApplyBanner: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n background: '#F7F7F7',\r\n paddingLeft: 24,\r\n '& .iconba': {\r\n marginRight: 5,\r\n },\r\n '& button.settings-page-link.btn-link': {\r\n color: palette.themePrimary,\r\n },\r\n },\r\n});\r\n","import { RECOMMENDATION_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\n\r\n// This is traditional reasons for reject single/multiple with multiple choices (log in aria).\r\nexport const reasonsMapping = {\r\n [RECOMMENDATION_TYPES.NEW_KEYWORD_OPPORTUNITY]: [\r\n 'KwdDoNotAdopt',\r\n 'KwdNotRelevant',\r\n 'KwdHighSpend',\r\n 'KwdOther',\r\n ],\r\n [RECOMMENDATION_TYPES.BROAD_MATCH_KEYWORD]: [\r\n 'BmaDoNotAdd',\r\n 'BmaNotRelevant',\r\n 'BmaHighSpend',\r\n 'BmaOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REMOVE_CONFLICTING_NEGATIVE_KEYWORD]: [\r\n 'RcnkwIntentional',\r\n 'RcnkwRatherAdj',\r\n 'RcnkwNotInterested',\r\n 'RcnkwOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_ADS]: [\r\n 'HaveAddressed',\r\n 'PendingEditoria',\r\n 'DynamicSearch',\r\n 'NotLikeAdgroup',\r\n 'AddressOutsideRecs',\r\n 'RepairOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_KEYWORD]: [\r\n 'HaveAddressed',\r\n 'PendingEditoria',\r\n 'DynamicSearch',\r\n 'NotLikeAdgroup',\r\n 'AddressOutsideRecs',\r\n 'RepairOther',\r\n ],\r\n [RECOMMENDATION_TYPES.RESPONSIVE_SEARCH_ADS]: [\r\n 'RsaNeedApprovalBeforeApply',\r\n 'RSAHasCompetitorInfo',\r\n 'RSATooSensitive',\r\n 'RSAOutdated',\r\n 'RSANotLikeWording',\r\n 'RsaAddRecommendedAdsLater',\r\n 'RsaNeedOptOutAAR',\r\n 'RSAOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_AD_TEXT]: [\r\n 'WIP',\r\n 'WontFix',\r\n 'ResolveOutsideAds',\r\n 'RepairOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_AD_DESTINATION]: [\r\n 'WIP',\r\n 'WontFix',\r\n 'ResolveOutsideAds',\r\n 'RepairOther',\r\n ],\r\n [RECOMMENDATION_TYPES.SETUP_CONVERSION_TRACKING_OPPORTUNITY]: [\r\n 'SetupConvDoItLater',\r\n 'SetupConvNeedAssistance',\r\n 'SetupConvWorking',\r\n 'SetupConvCannotMakeChanges',\r\n 'SetupConvUseOtherTool',\r\n 'SetupConvNotRelevant',\r\n 'RepairOther',\r\n ],\r\n [RECOMMENDATION_TYPES.TRENDING_QUERY]: [\r\n 'KwdDoNotAdopt',\r\n 'KwdNotRelevant',\r\n 'KwdHighSpend',\r\n 'KwdOther',\r\n ],\r\n [RECOMMENDATION_TYPES.MULTIMEDIA_ADS]: [\r\n 'MmaNotAddToAdGroup',\r\n 'MmaNotLikeImages',\r\n 'MmaNotLikeHeadlinesOrAdText',\r\n 'MmaBadCombinations',\r\n ],\r\n [RECOMMENDATION_TYPES.IMAGE_EXTENSION]: [\r\n 'ImageAdExtNotAddToAdGroup',\r\n 'ImageAdExtNotLikeImages',\r\n 'ImageAdExtConcernQuality',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_MISSING_KEYWORD_PARAMS]: [\r\n 'FixRepairMissingKeywordParamsFixItLater',\r\n 'FixRepairMissingKeywordParamsDoNotLikeSuggestedParamValues',\r\n 'FixRepairMissingKeywordParamsNotSignificant',\r\n 'FixRepairMissingKeywordParamsAlreadyFixedThisIssue',\r\n 'FixRepairMissingKeywordParamsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_NO_IMPRESSION_BID]: [\r\n 'FixNoImpressionBidSuggestTooHigh',\r\n 'FixNoImpressionBidSuggestNotSignificant',\r\n 'FixNoImpressionBidHaveAdjusted',\r\n 'FixNoImpressionBidOther',\r\n ],\r\n [RECOMMENDATION_TYPES.IMPROVE_RESPONSIVE_SEARCH_ADS]: [\r\n 'FixImproveResponsiveSearchAdsImproveLater',\r\n 'FixImproveResponsiveSearchAdsNotSignificant',\r\n 'FixImproveResponsiveSearchAdsDoNotLikeHeadlineDescription',\r\n 'FixImproveResponsiveSearchAdsSpendIncreaseTooMuch',\r\n 'FixImproveResponsiveSearchAdsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_UNTARGETED_OFFER]: [\r\n 'FixRepairUntargetedOfferNotRelevant',\r\n 'FixRepairUntargetedOfferManageInconvenient',\r\n 'FixRepairUntargetedOfferExcludedIntentionally',\r\n 'FixRepairUntargetedOfferNotUnderstand',\r\n 'FixRepairUntargetedOfferImprovementLater',\r\n 'FixRepairUntargetedOfferOther',\r\n ],\r\n [RECOMMENDATION_TYPES.IMPROVE_MULTIMEDIA_ADS]: [\r\n 'ImproveMultiMediaAdsImprovementLater',\r\n 'ImproveMultiMediaAdsNotSignificant',\r\n 'ImproveMultiMediaAdsNotLikeRecommendedImages',\r\n 'ImproveMultiMediaAdsNotLikeRecommendedTextOrHeadlines',\r\n 'ImproveMultiMediaAdsIncreaseMySpendTooMuch',\r\n 'ImproveMultiMediaAdsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.DSA_2_PMAX_MIGRATION]: [\r\n 'DSA2PMaxMigrationNoApplyUntilAttributesReviewed',\r\n 'DSA2PMaxMigrationUnsureRecommendedCampaignIsImprovement',\r\n 'DSA2PMaxMigrationCreatePerformanceMaxCampaignByMyOwn',\r\n 'DSA2PMAxMigrationOther',\r\n ],\r\n [RECOMMENDATION_TYPES.SYNDICATION_GAP]: [\r\n 'SyndicationGapCannotDisplayOnMicrosoftAdsNetwork',\r\n 'SyndicationGapNotInterestedOnEntireMicrosoftAdsNetwork',\r\n 'SyndicationGapOther',\r\n ],\r\n};\r\n\r\nexport const reasonsMappingNewI18n = {\r\n [RECOMMENDATION_TYPES.REPAIR_MISSING_KEYWORD_PARAMS]: {\r\n FixRepairMissingKeywordParamsFixItLater: _TL_('I will fix this issue later.'),\r\n FixRepairMissingKeywordParamsDoNotLikeSuggestedParamValues: _TL_('I don\\'t like the suggested param values.'),\r\n FixRepairMissingKeywordParamsNotSignificant: _TL_('The estimates show no significant improvement.'),\r\n FixRepairMissingKeywordParamsAlreadyFixedThisIssue: _TL_('I have already fixed this issue.'),\r\n FixRepairMissingKeywordParamsOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.FIX_NO_IMPRESSION_BID]: {\r\n FixNoImpressionBidSuggestTooHigh: _TL_('The suggested bids are higher than expected.'),\r\n FixNoImpressionBidSuggestNotSignificant: _TL_('The suggestion shows no significant improvement.'),\r\n FixNoImpressionBidHaveAdjusted: _TL_('I have recently adjusted the bid.'),\r\n FixNoImpressionBidOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.IMPROVE_RESPONSIVE_SEARCH_ADS]: {\r\n FixImproveResponsiveSearchAdsImproveLater: _TL_('I will make the improvement later.'),\r\n FixImproveResponsiveSearchAdsNotSignificant: _TL_('The performance of responsive search ads show no significant improvement.'),\r\n FixImproveResponsiveSearchAdsDoNotLikeHeadlineDescription: _TL_('I don\\'t like the suggested headlines or descriptions.'),\r\n FixImproveResponsiveSearchAdsSpendIncreaseTooMuch: _TL_('The estimated increase of spend by adopting the recommendation is too high.'),\r\n FixImproveResponsiveSearchAdsOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.REPAIR_UNTARGETED_OFFER]: {\r\n FixRepairUntargetedOfferNotRelevant: _TL_('The suggested campaigns do not align with my business goal.'),\r\n FixRepairUntargetedOfferManageInconvenient: _TL_('Managing a catch-all campaign is inconvenient.'),\r\n FixRepairUntargetedOfferExcludedIntentionally: _TL_('I want to exclude some product offers from my shopping campaign.'),\r\n FixRepairUntargetedOfferNotUnderstand: _TL_('I don\\'t know why this has been recommended to me.'),\r\n FixRepairUntargetedOfferImprovementLater: _TL_('I\\'ll create a catch-all shopping campaign later.'),\r\n FixRepairUntargetedOfferOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.IMPROVE_MULTIMEDIA_ADS]: {\r\n ImproveMultiMediaAdsImprovementLater: _TL_('I\\'ll apply this recommendation later.'),\r\n ImproveMultiMediaAdsNotSignificant: _TL_('The recommendation doesn\\'t improve my multimedia ad performance.'),\r\n ImproveMultiMediaAdsNotLikeRecommendedImages: _TL_('I don\\'t like the recommended images.'),\r\n ImproveMultiMediaAdsNotLikeRecommendedTextOrHeadlines: _TL_('I don\\'t like the recommended ad texts or headlines.'),\r\n ImproveMultiMediaAdsIncreaseMySpendTooMuch: _TL_('The recommendation will likely increase my spend too much.'),\r\n ImproveMultiMediaAdsOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.DSA_2_PMAX_MIGRATION]: {\r\n DSA2PMaxMigrationNoApplyUntilAttributesReviewed: _TL_('I don\\'t want to apply the recommendation unless I can review the recommended attributes for the Performance Max campaign.'),\r\n DSA2PMaxMigrationUnsureRecommendedCampaignIsImprovement: _TL_('I\\'m unsure that the recommended campaign will be an improvement.'),\r\n DSA2PMaxMigrationCreatePerformanceMaxCampaignByMyOwn: _TL_('I\\'ll create my own Performance Max campaign.'),\r\n DSA2PMAxMigrationOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.SYNDICATION_GAP]: {\r\n SyndicationGapCannotDisplayOnMicrosoftAdsNetwork: _TL_('The ads from the selected ad groups cannot be displayed on the Microsoft Advertising Network.'),\r\n SyndicationGapNotInterestedOnEntireMicrosoftAdsNetwork: _TL_('I don\\'t want the ads from the selected ad groups to be shown on the entire Microsoft Advertising Network.'),\r\n SyndicationGapOther: _TL_('Other'),\r\n },\r\n};\r\n\r\nexport const reasonsMappingAutoApplyFeedback = [\r\n 'NewAdsReviewAds',\r\n 'NewAdsConcernQuality',\r\n 'NewAdsConcernPerformance',\r\n 'NewAdsOther',\r\n];\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { CheckboxGroup } from '@bingads-webui-react/checkbox';\r\n\r\nimport { CommentsField } from '@bingads-webui-campaign-react/recommendation-feedback-modal';\r\nimport {\r\n reasonsMapping,\r\n reasonsMappingNewI18n,\r\n reasonsMappingAutoApplyFeedback,\r\n} from './dismiss-feedback-const';\r\n\r\nexport class DismissFeedbackForm extends React.PureComponent {\r\n static propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n recommendationType: PropTypes.string.isRequired,\r\n changeState: PropTypes.func,\r\n onSubmit: PropTypes.func.isRequired,\r\n rejectAutoApplySuggestedAds: PropTypes.bool,\r\n isAccountSettings: PropTypes.bool,\r\n };\r\n static defaultProps = {\r\n changeState: null,\r\n rejectAutoApplySuggestedAds: false,\r\n isAccountSettings: false,\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n if (!_.isUndefined(reasonsMappingNewI18n[props.recommendationType])) {\r\n this.useNewI18n = true;\r\n this.reasonWithNewI18n = reasonsMappingNewI18n[props.recommendationType];\r\n }\r\n }\r\n\r\n state = {\r\n reasonIds: [],\r\n reasonNote: '',\r\n notshowagain: false,\r\n };\r\n\r\n onReasonChange = (checked) => {\r\n this.setState({\r\n reasonIds: checked,\r\n }, this.submitStateChange);\r\n }\r\n\r\n onSubmit = () => {\r\n // todo: in discussion.\r\n const { reasonIds, reasonNote, notshowagain } = this.state;\r\n const expireTime = Date.now() + (notshowagain ? (30 * 24 * 60 * 60 * 1000) : 0);\r\n const reasons = _.map(reasonIds, id => (this.useNewI18n ?\r\n this.props.newI18n.getString(this.reasonWithNewI18n[id]) :\r\n this.props.i18n.getString(`Recommendation_Dismiss_Feedback_${id}`)));\r\n this.props.onSubmit({\r\n reason: JSON.stringify({ reasons, reasonNote, reasonIds }),\r\n preference: {\r\n type: this.props.recommendationType,\r\n expireTime,\r\n },\r\n });\r\n }\r\n\r\n onCommentChange = (value) => {\r\n this.setState({\r\n reasonNote: value,\r\n }, this.submitStateChange);\r\n }\r\n onPreferenceChange = (e) => {\r\n const { checked } = e.target;\r\n this.setState({\r\n notshowagain: checked,\r\n }, this.submitStateChange);\r\n }\r\n submitStateChange() {\r\n if (this.props.changeState) {\r\n const submitDisabled = !this.state.notshowagain && this.state.reasonNote === '' && _.isEmpty(this.state.reasonIds);\r\n this.props.changeState(submitDisabled);\r\n }\r\n }\r\n\r\n renderCheckbox = reasonId => (this.useNewI18n ?\r\n this.props.newI18n.getString(this.reasonWithNewI18n[reasonId]) :\r\n this.props.i18n.getString(`Recommendation_Dismiss_Feedback_${reasonId}`));\r\n\r\n renderReasons() {\r\n const { rejectAutoApplySuggestedAds, isAccountSettings } = this.props;\r\n let reasons = rejectAutoApplySuggestedAds ?\r\n undefined :\r\n reasonsMapping[this.props.recommendationType];\r\n if (isAccountSettings) {\r\n reasons = reasonsMappingAutoApplyFeedback;\r\n }\r\n if (_.isEmpty(reasons)) {\r\n return null;\r\n }\r\n return (\r\n \r\n
);\r\n }\r\n\r\n render() {\r\n const { i18n, rejectAutoApplySuggestedAds, isAccountSettings } = this.props;\r\n const submitDisabled = !this.state.notshowagain && this.state.reasonNote === '' && _.isEmpty(this.state.reasonIds);\r\n const title = rejectAutoApplySuggestedAds ?\r\n i18n.getString('Recommendation_Dismiss_Feedback_Popup_Title_NotToAutoApplySuggestedAds') :\r\n i18n.getString('Recommendation_Dismiss_Feedback_Popup_Title');\r\n const blurb = rejectAutoApplySuggestedAds ?\r\n i18n.getString('Recommendation_Dismiss_Feedback_Popup_Blurb_NotToAutoApplySuggestedAds') :\r\n i18n.getString('Recommendation_Dismiss_Feedback_Popup_Blurb');\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport { RECOMMENDATION_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\nimport { reasonsMapping } from './dismiss-feedback-const';\r\n\r\nexport const OTHER_REASON = 'Other';\r\nexport const REASON_TABLE = {\r\n [RECOMMENDATION_TYPES.BUDGET_OPPORTUNITY]: [\r\n 'BudgetNoBudget',\r\n 'BudgetTooHigh',\r\n 'BudgetCpcTooHigh',\r\n 'BudgetDoLater',\r\n 'BudgetOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_CONVERSION_GOAL_SETTINGS]: [\r\n 'FixConvGoalFixItLater',\r\n 'FixConvGoalCurrentSettingCorrect',\r\n 'FixConvGoalNeedAssistanceToFix',\r\n 'FixConvGoalAlreadyFixed',\r\n 'FixConvGoalGoalNotUse',\r\n 'FixConvGoalOther',\r\n ],\r\n [RECOMMENDATION_TYPES.CREATE_CONVERSION_GOAL]: [\r\n 'CreateConvGoalCreateItLater',\r\n 'CreateConvGoalNotInterested',\r\n 'CreateConvGoalGoalTypeNotMatched',\r\n 'CreateConvGoalAlreadyExist',\r\n 'CreateConvGoalInappropriateSuggestion',\r\n 'CreateConvGoalOther',\r\n ],\r\n budgetLandscape: [\r\n 'NoBudget',\r\n 'RecommendedBudgetHigh',\r\n 'CPCHigh',\r\n OTHER_REASON,\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_ADS]: [\r\n 'RepairAdsAlreadyAddressed',\r\n 'RepairAdsPendingEditorial',\r\n 'RepairAdsDsaAsSearch',\r\n 'RepairAdsIntentional',\r\n 'RepairAdsAddressOutside',\r\n 'RepairAdsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_KEYWORD]: [\r\n 'RepairKeywordsAlreadyAddressed',\r\n 'RepairKeywordsPendingEditorial',\r\n 'RepairKeywordsDsaAsSearch',\r\n 'RepairKeywordsIntentional',\r\n 'RepairKeywordsAddressOutside',\r\n 'RepairKeywordsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_AD_TEXT]: [\r\n 'FixAdContWIP',\r\n 'FixAdContWontFix',\r\n 'FixAdContResolveOutsideAds',\r\n 'FixAdContOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_AD_DESTINATION]: [\r\n 'FixAdDestWIP',\r\n 'FixAdDestWontFix',\r\n 'FixAdDestResolveOutsideAds',\r\n 'FixAdDestOther',\r\n ],\r\n [RECOMMENDATION_TYPES.SETUP_CONVERSION_TRACKING_OPPORTUNITY]: [\r\n 'SetupConvDoItLater',\r\n 'SetupConvNeedAssistance',\r\n 'SetupConvWorking',\r\n 'SetupConvCannotMakeChanges',\r\n 'SetupConvUseOtherTool',\r\n 'SetupConvNotRelevant',\r\n 'SetupConvOther',\r\n ],\r\n};\r\n\r\n// don't have to know which opt those reasons belong to\r\nexport const PERCENT_INPUT_REASON_LIST = [\r\n 'BudgetTooHigh',\r\n 'RecommendedBudgetHigh',\r\n];\r\n\r\nexport const NUMBER_INPUT_REASON_LIST = [\r\n 'BudgetCpcTooHigh',\r\n 'CPCHigh',\r\n];\r\n\r\nexport const COMMENT_ONLY_REASON_LIST = [\r\n 'FixConvGoalGoalNotUse',\r\n];\r\n\r\nexport const COMMENT_WITH_URL_REASON_LIST = [\r\n 'FixConvGoalNeedAssistanceToFix',\r\n];\r\n\r\nexport const URL_FOR_COMMENT_WITH_URL_REASON_LIST = {\r\n [COMMENT_WITH_URL_REASON_LIST.FixConvGoalNeedAssistanceToFix]: 'http://go.microsoft.com/fwlink/?LinkId=258669',\r\n};\r\n\r\nexport const RECOMMENDATION_TYPES_SUPPORT_NEW_DISMISS_FORM = {\r\n [RECOMMENDATION_TYPES.BUDGET_OPPORTUNITY]: true,\r\n [RECOMMENDATION_TYPES.FIX_CONVERSION_GOAL_SETTINGS]: true,\r\n [RECOMMENDATION_TYPES.CREATE_CONVERSION_GOAL]: true,\r\n budgetLandscape: true,\r\n};\r\n\r\nexport const RECOMMENDATION_REASON_TO_COMMENT_TRANSLATOR = {\r\n BudgetTooHigh: 'Recommendation_Feedback_Reason_BudgetHigh_Comment',\r\n BudgetCpcTooHigh: 'Recommendation_Feedback_Reason_CPCHigh_Comment',\r\n RecommendedBudgetHigh: 'Recommendation_Feedback_Reason_BudgetHigh_Comment',\r\n CPCHigh: 'Recommendation_Feedback_Reason_CPCHigh_Comment',\r\n FixConvGoalNeedAssistanceToFix: 'Recommendation_Dismiss_Feedback_NeedAssistanceToFix_Comment',\r\n FixConvGoalGoalNotUse: 'Recommendation_Dismiss_Feedback_GoalNotUse_Comment',\r\n};\r\n\r\nexport function isNewFeedbackOpportunity(RecommendationType) {\r\n return RecommendationType in REASON_TABLE;\r\n}\r\n\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Input } from '@bingads-webui-react/primitive-validation';\r\n\r\nexport class PercentInput extends React.PureComponent {\r\n static propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n reasonId: PropTypes.string.isRequired,\r\n callback: PropTypes.func.isRequired,\r\n comment: PropTypes.string,\r\n };\r\n\r\n static defaultProps = {\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n comment: '',\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = { value: '' };\r\n this.isNewI18n = props.newI18n.getString !== _.noop;\r\n }\r\n\r\n onValidate = ({ data }) => {\r\n this.setState({\r\n value: data.percent,\r\n });\r\n }\r\n\r\n handleChange = (e) => {\r\n this.setState({\r\n value: e.target.value,\r\n });\r\n this.props.callback(e.target.value);\r\n }\r\n\r\n percentValidator = (percent) => {\r\n const { i18n, newI18n } = this.props;\r\n const errorText = this.isNewI18n ? newI18n.getString(_TL_('invalid input')) : i18n.getString('Budget_Landscape_Validator_Invalid_Input');\r\n const numStr = Number(percent);\r\n if (!_.isNaN(numStr) && numStr > 0) {\r\n return [];\r\n }\r\n return [errorText];\r\n }\r\n\r\n render() {\r\n const {\r\n reasonId, newI18n, i18n, comment,\r\n } = this.props;\r\n const { value } = this.state;\r\n\r\n return (\r\n {title}
\r\n{blurb}
\r\n {this.renderReasons()}\r\n\r\n
\r\n\r\n \r\n \r\n {i18n.getString('Recommendation_Feedback_Submit_Action')}\r\n \r\n
\r\n {!isAccountSettings && }\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Input, ValidationGroup } from '@bingads-webui-react/primitive-validation';\r\n\r\nexport class NumberInput extends React.PureComponent {\r\n static propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n reasonId: PropTypes.string.isRequired,\r\n callback: PropTypes.func.isRequired,\r\n comment: PropTypes.string,\r\n };\r\n\r\n static defaultProps = {\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n comment: '',\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = { value: '' };\r\n this.schema = {\r\n properties: {\r\n Number: {\r\n blockInput: false,\r\n type: 'number',\r\n nullable: true,\r\n maxLength: 128,\r\n minimum: 0.00,\r\n },\r\n },\r\n };\r\n }\r\n\r\n handleChange=(e) => {\r\n this.setState({\r\n value: e.target.value,\r\n });\r\n this.props.callback(e.target.value);\r\n }\r\n\r\n\r\n render() {\r\n const {\r\n reasonId, newI18n, i18n, comment,\r\n } = this.props;\r\n const { value } = this.state;\r\n const isNewI18n = newI18n.getString !== _.noop;\r\n return (\r\n \r\n {i18n.getString(comment)}\r\n
\r\n \r\n
\r\n \r\n {i18n.getString(comment)}\r\n
\r\n \r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import $ from 'jquery';\r\nimport _ from 'underscore';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { NavigateModal } from '@bingads-webui-campaign-react/recommendation-navigate-modal';\r\nimport { NAVIGATE_REASON } from '@bingads-webui-campaign-react/recommendation-feedback-modal';\r\nimport {\r\n RECOMMENDATION_TYPES,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { DismissFeedbackForm } from './dismiss-feedback-form';\r\nimport { SingleChoiceDismissFeedbackForm } from './single-choice-dismiss-feedback-form';\r\nimport template from './fixed-container.pug';\r\nimport budgetTemplate from './fixed-container-for-budget-landscape.pug';\r\nimport { REASON_TABLE } from './single-choice-reason-const';\r\n\r\nclass FeedbackView extends React.PureComponent {\r\n static propTypes = {\r\n onSubmit: PropTypes.func.isRequired,\r\n rejectAutoApplySuggestedAds: PropTypes.bool,\r\n permissions: PropTypes.objectOf(PropTypes.any),\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n type: PropTypes.string.isRequired,\r\n viewDetails: PropTypes.func,\r\n recommendationTypesAvailable: PropTypes.arrayOf(PropTypes.any),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isAutoClose: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n rejectAutoApplySuggestedAds: false,\r\n permissions: {},\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n viewDetails: _.noop,\r\n recommendationTypesAvailable: [],\r\n isAutoClose: true,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isOpen: true,\r\n submitDisabled: true,\r\n timer: null,\r\n isNavigateModalOpen: false,\r\n navigateToDetailType: RECOMMENDATION_TYPES.REALLOCATE_BUDGET,\r\n };\r\n this.form = React.createRef();\r\n this.isShowNewDismissForm = props.permissions.IsRecommendationInProductFeedbackLoopEnabled &&\r\n REASON_TABLE[props.type];\r\n this.isCloseClickOverlay = props.isAutoClose;\r\n }\r\n\r\n componentDidMount() {\r\n document.onclick = (e) => {\r\n if (this.state.submitDisabled &&\r\n !this.form.current.contains(e.target) &&\r\n this.isCloseClickOverlay) {\r\n // feedback in budget landscape won't hide when user click overlay.\r\n this.hide();\r\n }\r\n // when open feedback in budget landscape,\r\n // this.form.current would not contain e.target\r\n // in the first time, so we need to add a mechanism\r\n // to make it not disappear in the first time.\r\n this.isCloseClickOverlay = true;\r\n };\r\n this.timer(true);\r\n }\r\n componentWillUnmount() {\r\n\r\n }\r\n\r\n // For Navigate Modal\r\n onYes = () => {\r\n this.setState({ isNavigateModalOpen: false });\r\n this.props.viewDetails(this.state.navigateToDetailType)();\r\n }\r\n\r\n onNo = () => {\r\n this.setState({\r\n isNavigateModalOpen: false,\r\n });\r\n }\r\n\r\n onSubmit = (data, reasonId = null) => {\r\n const {\r\n onSubmit, type,\r\n } = this.props;\r\n\r\n if (type === 'budgetLandscape') onSubmit(data, reasonId);\r\n else onSubmit(data, this.isShowNewDismissForm);\r\n\r\n this.hide();\r\n\r\n if (this.isShowNewDismissForm && reasonId) {\r\n this.navigateBasedOnReasonId(reasonId);\r\n }\r\n }\r\n\r\n navigateBasedOnReasonId = (reasonId) => {\r\n if (reasonId) {\r\n switch (reasonId) {\r\n case (NAVIGATE_REASON.NoBudget): // open navigate modal for certain reason\r\n case (NAVIGATE_REASON.BudgetNoBudget):\r\n {\r\n if (this.props.recommendationTypesAvailable\r\n .includes(RECOMMENDATION_TYPES.REALLOCATE_BUDGET)) {\r\n // open navigate modal\r\n this.setState({\r\n isNavigateModalOpen: true,\r\n navigateToDetailType: RECOMMENDATION_TYPES.REALLOCATE_BUDGET,\r\n });\r\n }\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n\r\n hide = () => {\r\n this.setState({ isOpen: false });\r\n this.timer(false);\r\n document.onclick = null;\r\n }\r\n timer(val) {\r\n let timer = null;\r\n if (this.state.timer) {\r\n clearTimeout(this.state.timer);\r\n }\r\n if (val && this.props.isAutoClose) {\r\n timer = setTimeout(() => { this.hide(); }, 15000);\r\n }\r\n this.setState({ timer });\r\n }\r\n changeState = (val) => {\r\n if (val !== this.state.submitDisabled) {\r\n this.setState({ submitDisabled: val });\r\n }\r\n this.timer(false);\r\n }\r\n\r\n render() {\r\n const { rejectAutoApplySuggestedAds, i18n, type } = this.props;\r\n\r\n // for position:absolute in popover css, we need to put the close button to form\r\n // to prevent close button disappear.\r\n const isForBudgetLandscape = type === 'budgetLandscape';\r\n\r\n const navigateModal = (\r\n this.state.isNavigateModalOpen &&\r\n \r\n
\r\n\r\n \r\n {title}\r\n {isForBudgetLandscape && }\r\n
\r\n \r\n {!isForBudgetLandscape && i18n.getString('Recommendation_Product_Feedback_Loop_Make_Better_Description')}\r\n
\r\n \r\n {_.map(reasonIds, (id, index) => (\r\n \r\n {i18n.getString(`Recommendation_Feedback_Reason_${id}`) || i18n.getString(`Recommendation_Dismiss_Feedback_${id}`)}\r\n {_.isEqual(id, reasonId) && _.isEqual(index, reasonIds.length - 1) &&\r\n
\r\n \r\n
\r\n }\r\n {_.isEqual(id, reasonId) && PERCENT_INPUT_REASON_LIST.includes(id) &&\r\n \r\n
\r\n }\r\n {_.isEqual(id, reasonId) && NUMBER_INPUT_REASON_LIST.includes(id) &&\r\n \r\n
\r\n }\r\n {_.isEqual(id, reasonId) && COMMENT_ONLY_REASON_LIST.includes(id) &&\r\n \r\n {i18n.getString(RECOMMENDATION_REASON_TO_COMMENT_TRANSLATOR[reasonId])}\r\n
\r\n }\r\n {_.isEqual(id, reasonId) && COMMENT_WITH_URL_REASON_LIST.includes(id) &&\r\n \r\n \r\n {i18n.getString(RECOMMENDATION_REASON_TO_COMMENT_TRANSLATOR[reasonId])}\r\n \r\n
\r\n }\r\n\r\n \r\n ))}\r\n \r\n \r\n {i18n.getString('Recommendation_Feedback_Submit_Action')}\r\n \r\n\r\n {!isForBudgetLandscape &&\r\n
\r\n \r\n
\r\n }\r\n \r\n {this.state.isOpen &&\r\n \r\n {!isForBudgetLandscape && }\r\n {!this.isShowNewDismissForm &&\r\n }\r\n {navigateModal}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport function showDismissFeedbackPopup({\r\n newI18n,\r\n i18n,\r\n type,\r\n onSubmit,\r\n rejectAutoApplySuggestedAds,\r\n permissions,\r\n recommendationTypesAvailable,\r\n viewDetails,\r\n}) {\r\n const container = document.querySelector('.recommendation-dismiss-feedback-popup');\r\n if (container === null) {\r\n $('body').append(template());\r\n } else {\r\n ReactDOM.unmountComponentAtNode(container);\r\n }\r\n ReactDOM.render(\r\n (\r\n
\r\n );\r\n }\r\n}\r\n\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport class SummaryEstimation extends React.PureComponent {\r\n static propTypes = {\r\n primaryIncrease: PropTypes.string.isRequired,\r\n primaryPts: PropTypes.string.isRequired,\r\n primaryString: PropTypes.string.isRequired,\r\n isPositivePrimary: PropTypes.bool.isRequired,\r\n isDoublePrimary: PropTypes.bool,\r\n secondPrimaryString: PropTypes.string,\r\n secondPrimaryIncrease: PropTypes.string,\r\n secondaryIncrease: PropTypes.string,\r\n secondaryString: PropTypes.string,\r\n isPositiveSecondary: PropTypes.bool,\r\n spendIncrease: PropTypes.string,\r\n spendString: PropTypes.string,\r\n estimateNote: PropTypes.string.isRequired,\r\n primaryIncreaseSymbol: PropTypes.string,\r\n primaryIncreaseNullable: PropTypes.bool,\r\n isEstimate: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n secondaryIncrease: undefined,\r\n secondaryString: undefined,\r\n isPositiveSecondary: undefined,\r\n spendIncrease: undefined,\r\n spendString: undefined,\r\n primaryIncreaseSymbol: '+',\r\n primaryIncreaseNullable: undefined,\r\n isEstimate: true,\r\n isDoublePrimary: false,\r\n secondPrimaryString: '',\r\n secondPrimaryIncrease: '',\r\n }\r\n\r\n getSecondarySymbol(value) {\r\n let symbol = '+';\r\n if (Number(value) < 0 || value.includes('-')) {\r\n symbol = '';\r\n }\r\n return symbol;\r\n }\r\n\r\n render() {\r\n const {\r\n primaryIncreaseSymbol,\r\n primaryIncrease,\r\n primaryIncreaseNullable,\r\n primaryPts,\r\n primaryString,\r\n isPositivePrimary,\r\n secondaryIncrease,\r\n secondaryString,\r\n isPositiveSecondary,\r\n spendIncrease,\r\n spendString,\r\n isEstimate,\r\n isDoublePrimary,\r\n secondPrimaryString,\r\n secondPrimaryIncrease,\r\n } = this.props;\r\n const primaryIncreaseStr = `${primaryIncreaseSymbol}${primaryIncrease} ${primaryPts}`;\r\n const noPrimaryIncrease = primaryIncreaseNullable && primaryIncrease === '0';\r\n\r\n return (\r\n \r\n this.primaryReady(fontSize)}\r\n >{primaryString}\r\n \r\n
\r\n \r\n {noPrimaryIncrease ?\r\n ()\r\n : ({primaryIncreaseStr} )}\r\n
\r\n {(primaryFrom && !noPrimaryIncrease) && (\r\n \r\n {fromTo}\r\n
\r\n )}\r\n {(isDoublePrimary) && (\r\n \r\n
\r\n )}\r\n {secondaryIncrease && (\r\n \r\n this.secondPrimaryReady(fontSize)}\r\n >{secondPrimaryString}\r\n \r\n
\r\n \r\n {secondPrimaryIncrease} \r\n
\r\n \r\n {this.getSecondarySymbol(secondaryIncrease)}{secondaryIncrease}\r\n \r\n {secondaryString}\r\n
\r\n )}\r\n {tertiaryIncrease && (\r\n \r\n +{tertiaryIncrease}\r\n \r\n {tertiaryString}\r\n
\r\n )}\r\n {spendIncrease && (\r\n \r\n +{spendIncrease}\r\n \r\n {spendString}\r\n
\r\n )}\r\n {isEstimate && (\r\n {this.props.estimateNote}
\r\n )}\r\n \r\n {isEstimate && (\r\n
\r\n );\r\n }\r\n}\r\n\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\n\r\nconst MAX_CHARACTER_COUNT = 500;\r\n\r\nexport class CommentsField extends React.PureComponent {\r\n static propTypes = {\r\n id: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n onFocus: PropTypes.func,\r\n value: PropTypes.string,\r\n isProductFeedbackLoop: PropTypes.bool,\r\n isAccountSettings: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n value: '',\r\n onFocus: _.noop,\r\n isProductFeedbackLoop: false,\r\n isAccountSettings: false,\r\n };\r\n\r\n handleChange = (e) => {\r\n const { onChange } = this.props;\r\n onChange(e.target.value.substring(0, MAX_CHARACTER_COUNT));\r\n };\r\n\r\n render() {\r\n const {\r\n id,\r\n i18n,\r\n value,\r\n isProductFeedbackLoop,\r\n isAccountSettings,\r\n } = this.props;\r\n\r\n const characterCount = isAccountSettings ?\r\n `${value.length} / ${MAX_CHARACTER_COUNT}`\r\n : i18n.getString('Recommendation_Feedback_ReasonNoteCharacterCount', {\r\n characterCount: value.length,\r\n maxCharacterCount: MAX_CHARACTER_COUNT,\r\n });\r\n\r\n const placeHolder = isProductFeedbackLoop ?\r\n i18n.getString('Recommendation_Product_Feedback_Loop_Comments_Placeholder')\r\n : i18n.getString('Recommendation_Feedback_Comments_Placeholder');\r\n\r\n return (\r\n {`${this.props.estimateNote}:`}
\r\n )}\r\n \r\n {noPrimaryIncrease ?\r\n \r\n : {primaryIncreaseStr}}\r\n {primaryString}\r\n
\r\n {(isDoublePrimary) && (\r\n \r\n {`${secondPrimaryIncrease} `}\r\n {secondPrimaryString}\r\n
\r\n )}\r\n {secondaryIncrease && (\r\n \r\n {this.getSecondarySymbol(secondaryIncrease)}{secondaryIncrease}\r\n \r\n {secondaryString}\r\n
\r\n )}\r\n {spendIncrease && (\r\n \r\n +{spendIncrease}\r\n \r\n {spendString}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import { RECOMMENDATION_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\n\r\nexport const OTHER_REASON = 'Other';\r\n\r\nexport const FEEDBACK_LOOP_REASON_TABLE = {\r\n [RECOMMENDATION_TYPES.BUDGET_OPPORTUNITY]: [\r\n 'NoBudget',\r\n 'OtherTech',\r\n 'NotImprove',\r\n 'DoLater',\r\n 'Unclear',\r\n OTHER_REASON,\r\n ],\r\n};\r\n\r\nexport const REASON_TABLE = {\r\n default: [\r\n 'NotInterested',\r\n 'OtherSolution',\r\n 'DoNotUnderstand',\r\n 'NotApplicable',\r\n 'SpendNoMore',\r\n OTHER_REASON,\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_AD_TEXT]: [\r\n 'FixAdContWIP',\r\n 'FixAdContWontFix',\r\n 'FixAdContResolveOutsideAds',\r\n 'FixAdContOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_AD_DESTINATION]: [\r\n 'FixAdContWIP',\r\n 'FixAdContWontFix',\r\n 'FixAdContResolveOutsideAds',\r\n 'FixAdContOther',\r\n ],\r\n [RECOMMENDATION_TYPES.SETUP_CONVERSION_TRACKING_OPPORTUNITY]: [\r\n 'SetupConvDoItLater',\r\n 'SetupConvNeedAssistance',\r\n 'SetupConvWorking',\r\n 'SetupConvCannotMakeChanges',\r\n 'SetupConvUseOtherTool',\r\n 'SetupConvNotRelevant',\r\n 'SetupConvOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_CONVERSION_TRACKING_OPPORTUNITY]: [\r\n 'FixConvFixItLater',\r\n 'FixConvNeedAssistanceToFix',\r\n 'FixConvWorkInProgress',\r\n 'FixConvNotInUse',\r\n 'FixConvOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_CONVERSION_GOAL_SETTINGS]: [\r\n 'FixConvGoalFixItLater',\r\n 'FixConvGoalCurrentSettingCorrect',\r\n 'FixConvGoalNeedAssistanceToFix',\r\n 'FixConvGoalAlreadyFixed',\r\n 'FixConvGoalGoalNotUse',\r\n 'FixConvGoalOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_ADS]: [\r\n 'RepairAdsAlreadyAddressed',\r\n 'RepairAdsPendingEditorial',\r\n 'RepairAdsDsaAsSearch',\r\n 'RepairAdsIntentional',\r\n 'RepairAdsAddressOutside',\r\n 'RepairAdsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_KEYWORD]: [\r\n 'RepairKeywordsAlreadyAddressed',\r\n 'RepairKeywordsPendingEditorial',\r\n 'RepairKeywordsDsaAsSearch',\r\n 'RepairKeywordsIntentional',\r\n 'RepairKeywordsAddressOutside',\r\n 'RepairKeywordsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.MULTIMEDIA_ADS]: [\r\n 'MmaNotInterested',\r\n 'MmaOtherTools',\r\n 'MmaNotUnderstand',\r\n 'MmaNotApplicable',\r\n 'MmaNotQualified',\r\n 'MmaOther',\r\n ],\r\n [RECOMMENDATION_TYPES.CREATE_CONVERSION_GOAL]: [\r\n 'CreateConvGoalCreateItLater',\r\n 'CreateConvGoalNotInterested',\r\n 'CreateConvGoalGoalTypeNotMatched',\r\n 'CreateConvGoalAlreadyExist',\r\n 'CreateConvGoalInappropriateSuggestion',\r\n 'CreateConvGoalOther',\r\n ],\r\n [RECOMMENDATION_TYPES.RESPONSIVE_SEARCH_ADS]: [\r\n 'RsaAddRecommendedAdsLater',\r\n 'RsaNoAutoGeneratedAssets',\r\n 'RsaNeedApprovalBeforeApply',\r\n 'RsaNeedOptOutAAR',\r\n OTHER_REASON,\r\n ],\r\n [RECOMMENDATION_TYPES.IMAGE_EXTENSION]: [\r\n 'ImageAdExtNotInterested',\r\n 'ImageAdExtNotApplicable',\r\n 'ImageAdExtPerformedNotWell',\r\n 'ImageAdExtOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_MISSING_KEYWORD_PARAMS]: [\r\n 'FixRepairMissingKeywordParamsFixItLater',\r\n 'FixRepairMissingKeywordParamsNotKnowingWhyFix',\r\n 'FixRepairMissingKeywordParamsNotSignificant',\r\n 'FixRepairMissingKeywordParamsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.FIX_NO_IMPRESSION_BID]: [\r\n 'FixNoImpressionBidSuggestTooHigh',\r\n 'FixNoImpressionBidSuggestNotSignificant',\r\n 'FixNoImpressionBidAdjustLater',\r\n 'FixNoImpressionBidHaveAdjusted',\r\n 'FixNoImpressionBidManagedByAgency',\r\n 'FixNoImpressionBidOther',\r\n ],\r\n [RECOMMENDATION_TYPES.IMPROVE_RESPONSIVE_SEARCH_ADS]: [\r\n 'FixImproveResponsiveSearchAdsManagedByMyself',\r\n 'FixImproveResponsiveSearchImprovementLater',\r\n 'FixImproveResponsiveSearchAdsNotSignificant',\r\n 'FixImproveResponsiveSearchAdsNotUnderstand',\r\n 'FixImproveResponsiveSearchAdsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.REPAIR_UNTARGETED_OFFER]: [\r\n 'FixRepairUntargetedOfferNotRelevant',\r\n 'FixRepairUntargetedOfferManageInconvenient',\r\n 'FixRepairUntargetedOfferExcludedIntentionally',\r\n 'FixRepairUntargetedOfferNotUnderstand',\r\n 'FixRepairUntargetedOfferImprovementLater',\r\n 'FixRepairUntargetedOfferOther',\r\n ],\r\n [RECOMMENDATION_TYPES.IMPROVE_MULTIMEDIA_ADS]: [\r\n 'ImproveMultiMediaAdsManagedByMyself',\r\n 'ImproveMultiMediaAdsNotSignificant',\r\n 'ImproveMultiMediaAdsCostTooHigh',\r\n 'ImproveMultiMediaAdsNotUnderstand',\r\n 'ImproveMultiMediaAdsOther',\r\n ],\r\n [RECOMMENDATION_TYPES.DSA_2_PMAX_MIGRATION]: [\r\n 'DSA2PMaxMigrationNoApplyUntilAttributesReviewed',\r\n 'DSA2PMaxMigrationUnsureRecommendedCampaignIsImprovement',\r\n 'DSA2PMaxMigrationCreatePerformanceMaxCampaignByMyOwn',\r\n 'DSA2PMAxMigrationOther',\r\n ],\r\n [RECOMMENDATION_TYPES.SYNDICATION_GAP]: [\r\n 'SyndicationGapAdPerfLowerThanExpected',\r\n 'SyndicationGapOnlyDisplayedOnMicrosoftSitesSelected',\r\n 'SyndicationGapOther',\r\n ],\r\n};\r\n\r\nexport const REASON_TABLE_NEW_I18N = {\r\n [RECOMMENDATION_TYPES.REPAIR_MISSING_KEYWORD_PARAMS]: {\r\n FixRepairMissingKeywordParamsFixItLater: _TL_('I will fix this issue later.'),\r\n FixRepairMissingKeywordParamsNotKnowingWhyFix: _TL_('I don\\'t understand why I should fix this issue.'),\r\n FixRepairMissingKeywordParamsNotSignificant: _TL_('The estimates show no significant improvement.'),\r\n FixRepairMissingKeywordParamsOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.FIX_NO_IMPRESSION_BID]: {\r\n FixNoImpressionBidSuggestTooHigh: _TL_('The suggested bids are higher than expected.'),\r\n FixNoImpressionBidSuggestNotSignificant: _TL_('The suggestion shows no significant improvement.'),\r\n FixNoImpressionBidAdjustLater: _TL_('I will adjust the bid later.'),\r\n FixNoImpressionBidHaveAdjusted: _TL_('I have recently adjusted the bid.'),\r\n FixNoImpressionBidManagedByAgency: _TL_('This account is managed by an agency.'),\r\n FixNoImpressionBidOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.IMPROVE_RESPONSIVE_SEARCH_ADS]: {\r\n FixImproveResponsiveSearchAdsManagedByMyself: _TL_('I will manage the assets in responsive search ads by myself.'),\r\n FixImproveResponsiveSearchImprovementLater: _TL_('I will make the improvement later.'),\r\n FixImproveResponsiveSearchAdsNotSignificant: _TL_('The performance of responsive search ads show no significant improvement.'),\r\n FixImproveResponsiveSearchAdsNotUnderstand: _TL_('I don\\'t understand the recommendation.'),\r\n FixImproveResponsiveSearchAdsOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.REPAIR_UNTARGETED_OFFER]: {\r\n FixRepairUntargetedOfferNotRelevant: _TL_('The suggested campaigns do not align with my business goal.'),\r\n FixRepairUntargetedOfferManageInconvenient: _TL_('Managing a catch-all campaign is inconvenient.'),\r\n FixRepairUntargetedOfferExcludedIntentionally: _TL_('I want to exclude some product offers from my shopping campaign.'),\r\n FixRepairUntargetedOfferNotUnderstand: _TL_('I don\\'t know why this has been recommended to me.'),\r\n FixRepairUntargetedOfferImprovementLater: _TL_('I\\'ll create a catch-all shopping campaign later.'),\r\n FixRepairUntargetedOfferOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.IMPROVE_MULTIMEDIA_ADS]: {\r\n ImproveMultiMediaAdsManagedByMyself: _TL_('I\\'ll manage the ad texts, headlines, and images in Multimedia ads.'),\r\n ImproveMultiMediaAdsNotSignificant: _TL_('The recommendation doesn\\'t improve my multimedia ad performance.'),\r\n ImproveMultiMediaAdsCostTooHigh: _TL_('The estimated cost is too high.'),\r\n ImproveMultiMediaAdsNotUnderstand: _TL_('The recommendation is unclear.'),\r\n ImproveMultiMediaAdsOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.DSA_2_PMAX_MIGRATION]: {\r\n DSA2PMaxMigrationNoApplyUntilAttributesReviewed: _TL_('I don\\'t want to apply the recommendation unless I can review the recommended attributes for the Performance Max campaign.'),\r\n DSA2PMaxMigrationUnsureRecommendedCampaignIsImprovement: _TL_('I\\'m unsure that the recommended campaign will be an improvement.'),\r\n DSA2PMaxMigrationCreatePerformanceMaxCampaignByMyOwn: _TL_('I\\'ll create my own Performance Max campaign.'),\r\n DSA2PMAxMigrationOther: _TL_('Other'),\r\n },\r\n [RECOMMENDATION_TYPES.SYNDICATION_GAP]: {\r\n SyndicationGapAdPerfLowerThanExpected: _TL_('My ad performance was lower than expected on the Microsoft Advertising Network.'),\r\n SyndicationGapOnlyDisplayedOnMicrosoftSitesSelected: _TL_('My ads can only be displayed on Microsoft sites and select traffic.'),\r\n SyndicationGapOther: _TL_('Other'),\r\n },\r\n};\r\n\r\nexport const NAVIGATE_REASON = {\r\n // for certain feedback reason, it would trigger naviagte\r\n // modal so that help user navigate to detail page of certain\r\n // recommendation\r\n NoBudget: 'NoBudget',\r\n BudgetNoBudget: 'BudgetNoBudget',\r\n};\r\n\r\nexport const RECOMMENDATION_DISMISS_ALL_MT_REASONID_CONFIGS = {\r\n [RECOMMENDATION_TYPES.BUDGET_OPPORTUNITY]: {\r\n excludedReason: [OTHER_REASON],\r\n prefix: 'Budget',\r\n },\r\n};\r\n\r\nexport const COMMENT_ONLY_REASON_LIST = [\r\n 'FixConvGoalGoalNotUse',\r\n];\r\n\r\nexport const COMMENT_WITH_URL_REASON_LIST = [\r\n 'FixConvGoalNeedAssistanceToFix',\r\n];\r\n\r\nexport const URL_FOR_COMMENT_WITH_URL_REASON_LIST = {\r\n [COMMENT_WITH_URL_REASON_LIST.FixConvGoalNeedAssistanceToFix]: 'http://go.microsoft.com/fwlink/?LinkId=258669',\r\n};\r\n\r\nexport const RECOMMENDATION_REASON_TO_COMMENT_TRANSLATOR = {\r\n BudgetTooHigh: 'Recommendation_Feedback_Reason_BudgetHigh_Comment',\r\n BudgetCpcTooHigh: 'Recommendation_Feedback_Reason_CPCHigh_Comment',\r\n RecommendedBudgetHigh: 'Recommendation_Feedback_Reason_BudgetHigh_Comment',\r\n CPCHigh: 'Recommendation_Feedback_Reason_CPCHigh_Comment',\r\n FixConvGoalNeedAssistanceToFix: 'Recommendation_Dismiss_Feedback_NeedAssistanceToFix_Comment',\r\n FixConvGoalGoalNotUse: 'Recommendation_Dismiss_Feedback_GoalNotUse_Comment',\r\n};\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Radio } from '@bingads-webui-react/radio';\r\nimport { RECOMMENDATION_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\n\r\nimport { CommentsField } from './comments-field';\r\nimport { REASON_TABLE } from './reason-const';\r\n\r\nconst OTHER_REASON = 'Other';\r\nconst defaultReasonIds = [\r\n 'NotInterested',\r\n 'OtherSolution',\r\n 'DoNotUnderstand',\r\n 'NotApplicable',\r\n 'SpendNoMore',\r\n OTHER_REASON,\r\n];\r\n\r\nexport class FeedbackForm extends React.PureComponent {\r\n static propTypes = {\r\n recommendationDescription: PropTypes.string.isRequired,\r\n onSubmit: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n isProvideFeedbackOnly: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n readOnly: PropTypes.bool.isRequired,\r\n type: PropTypes.string,\r\n };\r\n\r\n static defaultProps = {\r\n isProvideFeedbackOnly: false,\r\n type: '',\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n reasonId: null,\r\n reasonNote: '',\r\n };\r\n }\r\n\r\n handleReasonChange = (e) => {\r\n this.setState({\r\n reasonId: e.target.id,\r\n });\r\n };\r\n\r\n handleCommentsChange = (value) => {\r\n this.setState({\r\n reasonNote: value,\r\n });\r\n }\r\n\r\n handleCommentsFocus = () => {\r\n if (this.state.reasonId === null) {\r\n this.setState({\r\n reasonId: OTHER_REASON,\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const { reasonId, reasonNote } = this.state;\r\n const {\r\n recommendationDescription,\r\n i18n,\r\n onSubmit,\r\n onCancel,\r\n isProvideFeedbackOnly,\r\n readOnly,\r\n type,\r\n } = this.props;\r\n\r\n let reasonIds = defaultReasonIds;\r\n switch (type) {\r\n case RECOMMENDATION_TYPES.FIX_AD_TEXT:\r\n reasonIds = REASON_TABLE[RECOMMENDATION_TYPES.FIX_AD_TEXT];\r\n break;\r\n case RECOMMENDATION_TYPES.FIX_AD_DESTINATION:\r\n reasonIds = REASON_TABLE[RECOMMENDATION_TYPES.FIX_AD_DESTINATION];\r\n break;\r\n case RECOMMENDATION_TYPES.SETUP_CONVERSION_TRACKING_OPPORTUNITY:\r\n reasonIds = REASON_TABLE[RECOMMENDATION_TYPES.SETUP_CONVERSION_TRACKING_OPPORTUNITY];\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n const title = i18n.getString(\r\n isProvideFeedbackOnly ? 'Recommendation_Feedback_Submit_Title' : 'Recommendation_Feedback_Reject_Title',\r\n { recommendationDescription }\r\n );\r\n\r\n const submitText = i18n.getString('Recommendation_Feedback_Submit_Action');\r\n\r\n const hasUserInput = !isProvideFeedbackOnly || reasonNote !== '';\r\n const submitDisabled = readOnly || !hasUserInput;\r\n\r\n return (\r\n { characterCount }
\r\n \r\n \r\n \r\n }\r\n\r\n
\r\n );\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Radio } from '@bingads-webui-react/radio';\r\n\r\nimport { CommentsField } from './comments-field';\r\nimport {\r\n REASON_TABLE,\r\n OTHER_REASON,\r\n FEEDBACK_LOOP_REASON_TABLE,\r\n COMMENT_ONLY_REASON_LIST,\r\n COMMENT_WITH_URL_REASON_LIST,\r\n URL_FOR_COMMENT_WITH_URL_REASON_LIST,\r\n RECOMMENDATION_REASON_TO_COMMENT_TRANSLATOR,\r\n REASON_TABLE_NEW_I18N,\r\n} from './reason-const';\r\n\r\nexport class DismissAllFeedbackForm extends React.PureComponent {\r\n static propTypes = {\r\n recommendationDescription: PropTypes.string.isRequired,\r\n onSubmit: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n type: PropTypes.string,\r\n permissions: PropTypes.objectOf(PropTypes.any),\r\n };\r\n\r\n static defaultProps = {\r\n type: '',\r\n permissions: {},\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n reasonId: null,\r\n reasonNote: '',\r\n };\r\n }\r\n\r\n handleReasonChange = (e) => {\r\n this.setState({\r\n reasonId: e.target.id,\r\n });\r\n };\r\n\r\n handleCommentsChange = (value) => {\r\n this.setState({\r\n reasonNote: value,\r\n });\r\n }\r\n\r\n handleCommentsFocus = () => {\r\n if (this.state.reasonId === null) {\r\n this.setState({\r\n reasonId: OTHER_REASON,\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const { reasonId, reasonNote } = this.state;\r\n const {\r\n recommendationDescription,\r\n i18n,\r\n newI18n,\r\n onSubmit,\r\n onCancel,\r\n type,\r\n permissions,\r\n } = this.props;\r\n const isProductFeedbackLoop = permissions.IsRecommendationInProductFeedbackLoopEnabled;\r\n let reasonIds = REASON_TABLE.default;\r\n\r\n if (type in REASON_TABLE) {\r\n reasonIds = REASON_TABLE[type];\r\n }\r\n\r\n if (isProductFeedbackLoop && type in FEEDBACK_LOOP_REASON_TABLE) {\r\n reasonIds = FEEDBACK_LOOP_REASON_TABLE[type];\r\n }\r\n\r\n let useNewI18n = false;\r\n let reasonWithNewI18n;\r\n if (!_.isUndefined(REASON_TABLE_NEW_I18N[type])) {\r\n useNewI18n = true;\r\n reasonWithNewI18n = REASON_TABLE_NEW_I18N[type];\r\n }\r\n\r\n const title = i18n.getString('Recommendation_Feedback_Dismiss_All_Title', { recommendationDescription });\r\n\r\n const submitText = i18n.getString('Recommendation_Feedback_Submit_Action');\r\n\r\n const submitDisabled = reasonId === null;\r\n\r\n return (\r\n {title}
\r\n\r\n {!isProvideFeedbackOnly &&\r\n{i18n.getString('Recommendation_Feedback_Instructions')}
\r\n\r\n {_.map(reasonIds, id => (\r\n \r\n {i18n.getString(`Recommendation_Feedback_Reason_${id}`)}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n\r\n \r\n onSubmit({\r\n ReasonId: reasonId,\r\n ReasonNote: reasonNote,\r\n })}\r\n >\r\n {submitText}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Checkbox } from '@bingads-webui-react/checkbox';\r\n\r\nexport class ApplyFeedbackForm extends React.PureComponent {\r\n static propTypes = {\r\n onSubmit: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n odata: PropTypes.PropTypes.shape({\r\n patch: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onAutoApplyCancel: PropTypes.func.isRequired,\r\n type: PropTypes.string.isRequired,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n permissions: PropTypes.objectOf(PropTypes.any),\r\n isFromImgExtV2: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n permissions: {},\r\n isFromImgExtV2: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n autoApplyChecked: false,\r\n };\r\n }\r\n\r\n onApply = (e) => {\r\n e.stopPropagation();\r\n const {\r\n onSubmit, cid, aid, odata, onAutoApplyCancel, type, dataService, isFromImgExtV2,\r\n } = this.props;\r\n const { autoApplyChecked } = this.state;\r\n if (autoApplyChecked) {\r\n const op = {\r\n isOptInStatusDelta: {\r\n [type]: true,\r\n },\r\n };\r\n dataService.setAutoApplyOptInStatus(op).then(() => {\r\n onSubmit();\r\n });\r\n } else if (isFromImgExtV2) {\r\n const url = `Customers(${cid})/Accounts(${aid})`;\r\n const options = {\r\n data: {\r\n AllowCrawlImagesFromLandingPage: 'true',\r\n },\r\n };\r\n // Set Auto-retreive image option as true and then apply all\r\n odata.patch(url, options).then(() => {\r\n onSubmit();\r\n });\r\n } else {\r\n onAutoApplyCancel();\r\n onSubmit();\r\n }\r\n }\r\n\r\n handleAutoApplyOptionChange = () => {\r\n if (this.state.autoApplyChecked) {\r\n this.setState({\r\n autoApplyChecked: false,\r\n });\r\n } else {\r\n this.setState({\r\n autoApplyChecked: true,\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n i18n,\r\n onCancel,\r\n permissions,\r\n newI18n,\r\n isFromImgExtV2,\r\n cid,\r\n aid,\r\n } = this.props;\r\n const { autoApplyChecked } = this.state;\r\n\r\n let title = i18n.getString('Recommendation_Feedback_Auto_Apply_Title');\r\n let instruction = i18n.getString('Recommendation_Feedback_Auto_Apply_Instructions');\r\n let submitText = i18n.getString('Summary_Card_Apply_All');\r\n\r\n if (permissions.IsRSAAutoApplyEnabled) {\r\n title = newI18n.getString(_TL_('Apply all recommendations?'));\r\n instruction = newI18n.getString(_TL_('Allow Microsoft Advertising to automatically apply this type of ad recommendations for you? You can opt out of auto-apply ad recommendations in your account settings at any time.'));\r\n }\r\n\r\n if (isFromImgExtV2) {\r\n title = newI18n.getString(_TL_('Auto-retrieve images from your websites'));\r\n submitText = newI18n.getString(_TL_('Allow and apply'));\r\n instruction = (\r\n \r\n
\r\n\r\n {title}
\r\n {isProductFeedbackLoop ?\r\n i18n.getString('Recommendation_Product_Feedback_Loop_Make_Better_Description')\r\n : i18n.getString('Recommendation_Feedback_Make_Better_Description')}\r\n
\r\n \r\n {_.map(reasonIds, (id, index) => (\r\n \r\n {useNewI18n && newI18n.getString(reasonWithNewI18n[id])}\r\n {!useNewI18n && i18n.getString(`Recommendation_Feedback_Reason_${id}`)}\r\n {_.isEqual(id, reasonId) && _.isEqual(index, reasonIds.length - 1) &&\r\n
\r\n \r\n
\r\n }\r\n {_.isEqual(id, reasonId) && COMMENT_ONLY_REASON_LIST.includes(id) &&\r\n \r\n {i18n.getString(RECOMMENDATION_REASON_TO_COMMENT_TRANSLATOR[reasonId])}\r\n
\r\n }\r\n {_.isEqual(id, reasonId) && COMMENT_WITH_URL_REASON_LIST.includes(id) &&\r\n \r\n \r\n {i18n.getString(RECOMMENDATION_REASON_TO_COMMENT_TRANSLATOR[reasonId])}\r\n \r\n
\r\n }\r\n\r\n \r\n ))}\r\n \r\n onSubmit({\r\n ReasonId: reasonId,\r\n ReasonNote: reasonNote,\r\n })}\r\n >\r\n {submitText}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n {newI18n.getString(_TL_('Some images selected are from your website. By clicking “Allow and apply,” you agree that all images retrieved from your website are content provided by you the'))}\r\n \r\n \r\n {newI18n.getString(_TL_('Microsoft Advertising Agreement'))}\r\n \r\n .\r\n
\r\n \r\n {newI18n.getString(_TL_('You can change your image auto-retrieval settings anytime'))}\r\n \r\n \r\n {newI18n.getString(_TL_('here'))}\r\n \r\n .\r\n
\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import { RECOMMENDATION_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\nimport { RECOMMENDATION_DISMISS_ALL_MT_REASONID_CONFIGS } from './reason-const';\r\n\r\nexport function reasonToMtTranslator(type, reasonId) {\r\n switch (type) {\r\n case (RECOMMENDATION_TYPES.BUDGET_OPPORTUNITY): {\r\n if (!RECOMMENDATION_DISMISS_ALL_MT_REASONID_CONFIGS[type].excludedReason.includes(reasonId)) {\r\n return `${RECOMMENDATION_DISMISS_ALL_MT_REASONID_CONFIGS[type].prefix}${reasonId}`;\r\n }\r\n break;\r\n }\r\n default: {\r\n break;\r\n }\r\n }\r\n return reasonId;\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactModal from 'react-modal';\r\n\r\nimport _ from 'underscore';\r\n\r\nimport {\r\n withTrack,\r\n APPLY_ACTION_TYPES,\r\n ADINSIGHT_LOG_ACTION_TYPE,\r\n RECOMMENDATION_TYPES,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { handleRecommendationNotification } from '@bingads-webui-campaign/recommendation-notification';\r\nimport { NavigateModal } from '@bingads-webui-campaign-react/recommendation-navigate-modal';\r\nimport { generateGuid } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nimport { FeedbackForm } from './feedback-form';\r\nimport { DismissAllFeedbackForm } from './dismiss-all-feedback-form';\r\nimport { ApplyFeedbackForm } from './apply-feedback-form';\r\nimport { NAVIGATE_REASON } from './reason-const';\r\nimport { reasonToMtTranslator } from './utils';\r\n\r\nclass feedbackModal extends React.PureComponent {\r\n static propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n recommendationDescription: PropTypes.string,\r\n onCancel: PropTypes.func.isRequired,\r\n isProvideFeedbackOnly: PropTypes.bool,\r\n isReject: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n data: PropTypes.objectOf(PropTypes.any),\r\n track: PropTypes.func.isRequired,\r\n readOnly: PropTypes.bool,\r\n logOpportunityEvent: PropTypes.func,\r\n callback: PropTypes.func.isRequired,\r\n context: PropTypes.objectOf(PropTypes.any),\r\n guid: PropTypes.string,\r\n isApplyFeedBackFormShow: PropTypes.bool,\r\n cid: PropTypes.string,\r\n aid: PropTypes.string,\r\n odata: PropTypes.PropTypes.shape({\r\n patch: PropTypes.func.isRequired,\r\n }),\r\n onAutoApplyCancel: PropTypes.func,\r\n isFromSummary: PropTypes.bool,\r\n isFromAutoApplyDialog: PropTypes.bool,\r\n view: PropTypes.objectOf(PropTypes.any),\r\n showAlertHandler: PropTypes.func,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n isDismissAll: PropTypes.bool,\r\n viewDetails: PropTypes.func,\r\n recommendationTypesAvailable: PropTypes.arrayOf(PropTypes.any),\r\n useCallbackAsSubmit: PropTypes.bool,\r\n permissions: PropTypes.objectOf(PropTypes.any),\r\n useNavigateModal: PropTypes.bool,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n isFromImgExtV2: PropTypes.bool,\r\n opportunities: PropTypes.arrayOf(PropTypes.any),\r\n };\r\n\r\n static defaultProps = {\r\n context: null,\r\n isProvideFeedbackOnly: false,\r\n isReject: true,\r\n recommendationDescription: '',\r\n data: {},\r\n readOnly: false,\r\n logOpportunityEvent: null,\r\n guid: null,\r\n isApplyFeedBackFormShow: true,\r\n cid: null,\r\n aid: null,\r\n odata: null,\r\n onAutoApplyCancel: null,\r\n isFromSummary: false,\r\n isFromAutoApplyDialog: false,\r\n view: null,\r\n showAlertHandler: _.noop,\r\n overallOptimizationScoreBar: null,\r\n isDismissAll: false,\r\n viewDetails: _.noop,\r\n recommendationTypesAvailable: [],\r\n useCallbackAsSubmit: false,\r\n permissions: {},\r\n useNavigateModal: false,\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n isFromImgExtV2: false,\r\n opportunities: [],\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isNavigateModalOpen: false,\r\n };\r\n this.navigateToDetailType = RECOMMENDATION_TYPES.REALLOCATE_BUDGET;\r\n }\r\n\r\n onSubmit = (reason) => {\r\n const {\r\n data,\r\n isProvideFeedbackOnly,\r\n logOpportunityEvent,\r\n track,\r\n callback,\r\n context,\r\n isReject,\r\n isFromSummary,\r\n isFromAutoApplyDialog,\r\n i18n,\r\n showAlertHandler,\r\n isDismissAll,\r\n useCallbackAsSubmit,\r\n isFromImgExtV2,\r\n opportunities,\r\n } = this.props;\r\n\r\n if ((isFromSummary && isFromAutoApplyDialog) || useCallbackAsSubmit) {\r\n callback();\r\n return;\r\n }\r\n\r\n if (isFromImgExtV2) {\r\n if (!_.isEmpty(opportunities)) {\r\n callback(opportunities);\r\n } else {\r\n callback();\r\n }\r\n return;\r\n }\r\n\r\n this.props.onCancel();\r\n\r\n let options;\r\n if (reason) {\r\n const formatedReason = this.getFormatedReason(reason);\r\n options = _.extend({}, data, this.props.context && {\r\n context: this.props.context,\r\n }, this.props.guid && {\r\n guid: this.props.guid,\r\n }, formatedReason && {\r\n reason: formatedReason,\r\n });\r\n }\r\n\r\n if (isProvideFeedbackOnly) {\r\n // eslint-disable-next-line no-unused-expressions\r\n logOpportunityEvent && logOpportunityEvent({\r\n type: data.type,\r\n action: ADINSIGHT_LOG_ACTION_TYPE.FEEDBACK,\r\n input: reason.ReasonNote,\r\n context,\r\n });\r\n callback();\r\n showAlertHandler({\r\n message: i18n.getString('Recommendation_Feedback_Comment_Success'),\r\n level: 'Info',\r\n dismissible: true,\r\n });\r\n } else if (isDismissAll) {\r\n options.context = _.extend({}, options.context, { trackId: generateGuid() });\r\n if (isFromSummary) {\r\n // eslint-disable-next-line no-unused-expressions\r\n logOpportunityEvent && logOpportunityEvent({\r\n type: data.type,\r\n action: ADINSIGHT_LOG_ACTION_TYPE.CLICK_DISMISSALL,\r\n context: options.context,\r\n });\r\n }\r\n\r\n options.context = _.extend({}, options.context, { ApplyMode: 'All' });\r\n track(_.extend(\r\n {},\r\n options,\r\n { userAction: APPLY_ACTION_TYPES.DISMISS },\r\n { withAll: true },\r\n { isDismissAll },\r\n { handleRecommendationNotification }\r\n ));\r\n this.navigateBasedOnReason(reason);\r\n } else if (isReject) {\r\n track(_.extend({}, options, {\r\n userAction: APPLY_ACTION_TYPES.REJECT,\r\n }, { handleRecommendationNotification }));\r\n } else {\r\n track(_.extend({}, data, {\r\n userAction: APPLY_ACTION_TYPES.ACCEPT,\r\n }, this.props.context && {\r\n context: this.props.context,\r\n }, { guid: this.props.guid }, { handleRecommendationNotification }, { view: this.props.view })); // eslint-disable-line\r\n }\r\n };\r\n\r\n onCancel = () => {\r\n this.props.onCancel();\r\n };\r\n\r\n onYes = () => {\r\n this.setState({ isNavigateModalOpen: false });\r\n this.props.viewDetails(this.navigateToDetailType)();\r\n }\r\n\r\n onNo = () => {\r\n this.setState({\r\n isNavigateModalOpen: false,\r\n });\r\n }\r\n\r\n getFormatedReason = (reason) => {\r\n const { isDismissAll, permissions } = this.props;\r\n let formatedReason = null;\r\n if (reason.ReasonId) {\r\n formatedReason = {\r\n ReasonId: (isDismissAll\r\n && permissions.IsRecommendationInProductFeedbackLoopEnabled) ?\r\n reasonToMtTranslator(this.props.data.type, reason.ReasonId) : reason.ReasonId,\r\n };\r\n }\r\n if (reason.ReasonNote) {\r\n formatedReason = formatedReason || {};\r\n formatedReason.ReasonNote = reason.ReasonNote;\r\n }\r\n return formatedReason;\r\n }\r\n\r\n navigateBasedOnReason = (reason) => {\r\n if (reason && reason.ReasonId) {\r\n switch (reason.ReasonId) {\r\n case NAVIGATE_REASON.NoBudget: // open navigate modal for certain reason\r\n\r\n this.navigateToDetailType = RECOMMENDATION_TYPES.REALLOCATE_BUDGET;\r\n if (this.props.recommendationTypesAvailable.includes(this.navigateToDetailType)) {\r\n // open navigate modal\r\n this.setState({ isNavigateModalOpen: true });\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n render() {\r\n const {\r\n data: { type },\r\n i18n,\r\n recommendationDescription,\r\n isOpen,\r\n isProvideFeedbackOnly,\r\n readOnly,\r\n isReject,\r\n isApplyFeedBackFormShow,\r\n cid,\r\n aid,\r\n odata,\r\n onAutoApplyCancel,\r\n isDismissAll,\r\n permissions,\r\n useNavigateModal,\r\n newI18n,\r\n isFromImgExtV2,\r\n dataService,\r\n } = this.props;\r\n\r\n\r\n // If it doesn't show ApplyFeedBackForm, execute apply directly.\r\n if (!isApplyFeedBackFormShow && !isReject) {\r\n this.onSubmit();\r\n return null;\r\n }\r\n\r\n const navigateModal = (\r\n useNavigateModal && { title }
\r\n {isFromImgExtV2 ? instruction : (\r\n| \r\n | \r\n \r\n { instruction } \r\n {!permissions.IsRSAAutoApplyEnabled &&\r\n | \r\n
\r\n \r\n { submitText }\r\n \r\n \r\n
\r\n \r\n {isDismissAll &&\r\n \r\n \r\n {isReject &&\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const FeedbackModal = withTrack(/* withAll */ true)(feedbackModal);\r\n","import _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport ReactModal from 'react-modal';\r\nimport {\r\n recommendationConfigs,\r\n withAdsAutoApply,\r\n RECOMMENDATION_TYPES,\r\n withImgAutoRetrieve,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { FeedbackModal } from './feedback-modal';\r\nimport rejectFeedbackTemplate from './reject-feedback-template.pug';\r\nimport autoApplyFeedbackTemplate from './apply-feedback-template.pug';\r\n\r\nclass FeedbackView extends React.PureComponent {\r\n static propTypes = {\r\n el: PropTypes.string.isRequired,\r\n callback: PropTypes.func.isRequired,\r\n data: PropTypes.objectOf(PropTypes.any).isRequired,\r\n i18n: PropTypes.objectOf(PropTypes.any).isRequired,\r\n newI18n: PropTypes.objectOf(PropTypes.any),\r\n isReject: PropTypes.bool.isRequired,\r\n campaignAutoApplyStatus: PropTypes.shape({\r\n [RECOMMENDATION_TYPES.RESPONSIVE_SEARCH_ADS]: PropTypes.string,\r\n }),\r\n cid: PropTypes.string,\r\n aid: PropTypes.string,\r\n odata: PropTypes.PropTypes.shape({\r\n patch: PropTypes.func.isRequired,\r\n }),\r\n onAutoApplyCancel: PropTypes.func,\r\n isFromSummary: PropTypes.bool,\r\n isFromAutoApplyDialog: PropTypes.bool,\r\n recommendationsCount: PropTypes.number,\r\n readOnly: PropTypes.bool,\r\n isDismissAll: PropTypes.bool,\r\n recommendationTypesAvailable: PropTypes.arrayOf(PropTypes.string),\r\n showApplyConfirmModal: PropTypes.func,\r\n isCrossPageApplyAll: PropTypes.bool,\r\n isFromImgExtV2: PropTypes.bool,\r\n allowCrawlImagesFromLandingPage: PropTypes.bool,\r\n opportunities: PropTypes.arrayOf(PropTypes.any),\r\n }\r\n\r\n static defaultProps = {\r\n campaignAutoApplyStatus: {},\r\n cid: null,\r\n aid: null,\r\n odata: null,\r\n onAutoApplyCancel: null,\r\n isFromSummary: false,\r\n isFromAutoApplyDialog: false,\r\n recommendationsCount: 0,\r\n readOnly: false,\r\n isDismissAll: false,\r\n recommendationTypesAvailable: [],\r\n showApplyConfirmModal: _.noop,\r\n isCrossPageApplyAll: false,\r\n isFromImgExtV2: false,\r\n allowCrawlImagesFromLandingPage: false,\r\n opportunities: [],\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isModalOpen: true,\r\n };\r\n ReactModal.setAppElement(props.el);\r\n }\r\n\r\n handleFeedbackCancel = () => {\r\n this.setState({\r\n isModalOpen: false,\r\n });\r\n };\r\n\r\n callback = (opportunities) => {\r\n this.setState({\r\n isModalOpen: false,\r\n });\r\n if (!_.isUndefined(opportunities)) {\r\n this.props.callback(opportunities);\r\n } else {\r\n this.props.callback();\r\n }\r\n }\r\n\r\n render() {\r\n const { isModalOpen } = this.state;\r\n const {\r\n data: { type },\r\n i18n,\r\n newI18n,\r\n campaignAutoApplyStatus,\r\n isReject,\r\n cid,\r\n aid,\r\n odata,\r\n onAutoApplyCancel,\r\n isFromSummary,\r\n isFromAutoApplyDialog,\r\n showApplyConfirmModal,\r\n isCrossPageApplyAll,\r\n isFromImgExtV2,\r\n allowCrawlImagesFromLandingPage,\r\n opportunities,\r\n } = this.props;\r\n const titleConfig = recommendationConfigs[type].summaryTitle;\r\n const recommendationDescription = i18n.getString(titleConfig);\r\n let isApplyFeedBackFormShow = true;\r\n\r\n // If it's apply and adsByBingAutoApply is true (opt-in), it doesn't show the feedback form.\r\n if (isModalOpen && !isReject && (campaignAutoApplyStatus[type] === true\r\n || (isFromImgExtV2 && allowCrawlImagesFromLandingPage === 'true'))) {\r\n // If users apply all from summary page, it shows a confirmation dialog.\r\n if ((isFromSummary && isFromAutoApplyDialog) || isCrossPageApplyAll) {\r\n showApplyConfirmModal();\r\n return null;\r\n }\r\n isApplyFeedBackFormShow = false;\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { formatPercentOneDecimal } from '@bingads-webui-campaign/recommendation-core';\r\nimport { getPopupSummaryStyle } from './style/popup-summary-style';\r\n\r\nclass PopupSummary extends React.PureComponent {\r\n static propTypes = {\r\n classes: PropTypes.objectOf(PropTypes.string).isRequired,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number.isRequired,\r\n Dismissed: PropTypes.number.isRequired,\r\n Available: PropTypes.number.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n campaignId: PropTypes.string,\r\n }).isRequired,\r\n }).isRequired,\r\n };\r\n\r\n render() {\r\n const { Gained, Dismissed } = this.props.overallOptimizationScoreBar;\r\n const { classes, i18n, scope } = this.props;\r\n const scoreLabelText = {\r\n gained: !_.isUndefined(scope.values.campaignId) ? _TL_('Campaign optimization') : _TL_('Account optimization'),\r\n dismissed: _TL_('Dismissed recommendations'),\r\n };\r\n const scoreValue = { gained: Gained, dismissed: Dismissed };\r\n\r\n return (\r\n \r\n {i18n.getString(i18nKey, { recommendationDescription })}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const StyledPopupSummary =\r\n withDefaultStyles((PopupSummary), getPopupSummaryStyle);\r\n","/* eslint-disable no-unused-vars */\r\nexport const getPopupSummaryStyle = (_, { palette = {} }) => ({\r\n popupSummaryContainer: {\r\n position: 'absolute',\r\n background: '#FFFFFF',\r\n boxShadow: '0px 3.2px 7.2px rgba(0, 0, 0, 0.132), 0px 0.6px 1.8px rgba(0, 0, 0, 0.108)',\r\n borderRadius: 2,\r\n top: 11,\r\n left: '50%',\r\n zIndex: 1,\r\n paddingBottom: 8,\r\n paddingTop: 16,\r\n paddingRight: 16,\r\n paddingLeft: 16,\r\n },\r\n scoreLabel: {\r\n display: 'flex',\r\n marginBottom: 2,\r\n alignItems: 'center',\r\n },\r\n gainedScoreLabelIcon: {\r\n width: 12,\r\n height: 12,\r\n border: '1px solid #0078D4',\r\n background: '#0078D4',\r\n marginRight: 8,\r\n },\r\n scoreLabelText: {\r\n fontSize: 12,\r\n },\r\n scoreValue: {\r\n fontWeight: 600,\r\n fontSize: 16,\r\n color: '#0078D4',\r\n marginLeft: 20,\r\n marginBottom: 8,\r\n },\r\n dismissedScoreLabelIcon: {\r\n width: 12,\r\n height: 12,\r\n background: '#ABDBFF',\r\n border: '1px solid #0078D4',\r\n marginRight: 8,\r\n },\r\n scoreHint: {\r\n fontSize: 12,\r\n borderTop: 'solid 1px #EDEBE9',\r\n color: '#666666',\r\n paddingTop: 6,\r\n marginBottom: 8,\r\n minWidth: 186,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { formatPercentOneDecimal } from '@bingads-webui-campaign/recommendation-core';\r\nimport { HighchartReactWrapper } from '@bingads-webui-react/highchart-react-wrapper';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { StyledMenuItemTag } from '@bingads-webui-react/menu-item-tag';\r\nimport { TooltipHost, DirectionalHint, TooltipDelay } from '@fluentui/react';\r\nimport { StyledPopupSummary } from './popup-summary';\r\nimport { getOverallScoreStyle } from './style/overall-score-style';\r\n\r\nclass RecOptimizationOverallScore extends React.PureComponent {\r\n static propTypes = {\r\n classes: PropTypes.objectOf(PropTypes.string).isRequired,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number.isRequired,\r\n Dismissed: PropTypes.number.isRequired,\r\n Available: PropTypes.number.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n renderAutoApplyButton: PropTypes.func.isRequired,\r\n renderDownloadButton: PropTypes.func.isRequired,\r\n renderHistoryButton: PropTypes.func.isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n campaignId: PropTypes.string,\r\n }).isRequired,\r\n }).isRequired,\r\n isAsyncApplyEnabled: PropTypes.bool.isRequired,\r\n isAutoApplyRecommendationEnabled: PropTypes.bool.isRequired,\r\n showDownloadButton: PropTypes.bool.isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.handleMouseEnter = this.handleMouseEnter.bind(this);\r\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\r\n this.state = {\r\n isHovering: false,\r\n };\r\n }\r\n\r\n getChartOptions = () => {\r\n const { overallOptimizationScoreBar } = this.props;\r\n return {\r\n chart: {\r\n width: 400,\r\n height: 18,\r\n margin: [0, 0, 0, 0],\r\n type: 'bar',\r\n },\r\n title: {\r\n text: null,\r\n },\r\n xAxis: {\r\n visible: false,\r\n },\r\n yAxis: {\r\n visible: false,\r\n tickPositions: [-0.2, 100.2],\r\n },\r\n legend: {\r\n enabled: false,\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n tooltip: {\r\n enabled: false,\r\n formatter: null,\r\n },\r\n plotOptions: {\r\n bar: {\r\n animation: false,\r\n pointWidth: 16,\r\n borderColor: '#0078D4',\r\n },\r\n series: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: null,\r\n },\r\n },\r\n stacking: 'normal',\r\n states: {\r\n hover: {\r\n enabled: false,\r\n },\r\n inactive: {\r\n enabled: false,\r\n },\r\n },\r\n },\r\n },\r\n series: [{\r\n data: [overallOptimizationScoreBar.Available * 100],\r\n color: '#FFFFFF',\r\n }, {\r\n data: [overallOptimizationScoreBar.Dismissed * 100],\r\n color: '#ABDBFF',\r\n }, {\r\n data: [overallOptimizationScoreBar.Gained * 100],\r\n color: '#0078D4',\r\n },\r\n ],\r\n };\r\n }\r\n\r\n handleMouseEnter() {\r\n this.timerForPopupSummary = setTimeout(() => {\r\n this.setState({ isHovering: true });\r\n }, 200);\r\n }\r\n\r\n handleMouseLeave() {\r\n clearTimeout(this.timerForPopupSummary);\r\n this.setState({ isHovering: false });\r\n }\r\n\r\n renderOverallScore = () => {\r\n const { classes, i18n, overallOptimizationScoreBar } = this.props;\r\n const { Gained, Dismissed } = overallOptimizationScoreBar;\r\n\r\n return (\r\n \r\n {_.map(['gained', 'dismissed'], e => (\r\n scoreValue[e] > 0 &&\r\n \r\n \r\n ))}\r\n
\r\n {Dismissed > 0 &&\r\n \r\n \r\n
\r\n \r\n {i18n.getString(scoreLabelText[e])}\r\n
\r\n \r\n {formatPercentOneDecimal(scoreValue[e], i18n)}\r\n
\r\n \r\n {i18n.getString(_TL_('Dismissed recommendations count towards to your account score'))}\r\n
\r\n }\r\n \r\n \r\n {this.renderOverallScore()}\r\n : this.renderOverallScore()\r\n }\r\n \r\n
\r\n {isAutoApplyRecommendationEnabled &&\r\n \r\n {i18n.getString(_TL_('Your optimization score'))}\r\n
\r\n \r\n
\r\n {overallScore === 0 ?\r\n \r\n
\r\n }\r\n \r\n {renderAutoApplyButton()}\r\n
\r\n }\r\n {showDownloadButton &&\r\n \r\n {renderDownloadButton(true)}\r\n
\r\n }\r\n {isAsyncApplyEnabled && renderHistoryButton()}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const StyledRecOptimizationOverallScore =\r\n withDefaultStyles((RecOptimizationOverallScore), getOverallScoreStyle);\r\n","/* eslint-disable no-unused-vars */\r\nexport const getOverallScoreStyle = (_, { palette = {} }) => ({\r\n recOverallScoreContainer: {\r\n minWidth: 1000,\r\n display: 'flex',\r\n marginTop: 0,\r\n marginLeft: 0,\r\n marginBottom: 0,\r\n alignItems: 'center',\r\n position: 'relative',\r\n background: palette.neutralLighterAlt,\r\n paddingTop: 16,\r\n paddingLeft: 32,\r\n paddingBottom: 16,\r\n paddingRight: 22,\r\n borderBottom: `solid 1px ${palette.neutralQuaternaryAlt}`,\r\n '& .with-history-button': {\r\n '& #button-download': {\r\n right: 74,\r\n },\r\n },\r\n '& #button-download': {\r\n backgroundColor: 'transparent',\r\n border: 'none',\r\n color: palette.themeDarkAlt,\r\n padding: 'unset',\r\n height: 'fit-content',\r\n minWidth: 'unset',\r\n top: 30,\r\n right: 22,\r\n position: 'absolute',\r\n },\r\n '& .recommendation-history-item': {\r\n margin: 'unset',\r\n top: 'unset',\r\n right: 22,\r\n position: 'absolute',\r\n },\r\n '& .helpbutton': {\r\n color: `${palette.neutralPrimary} !important`,\r\n fontSize: 16,\r\n marginRight: 82,\r\n marginLeft: 'unset',\r\n },\r\n '& .helpbutton:before': {\r\n top: 2,\r\n content: '\"\\\\E9CE\"',\r\n position: 'relative',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& #zero-overall-score': {\r\n borderBottom: `1px dashed ${palette.themePrimary}`,\r\n cursor: 'pointer',\r\n },\r\n '& .auto-apply-container': {\r\n position: 'absolute',\r\n right: '75px',\r\n },\r\n '& .auto-apply-container.with-download-button': {\r\n right: '124px',\r\n },\r\n },\r\n scoreLabel: {\r\n fontWeight: 600,\r\n fontSize: 18,\r\n marginRight: 6,\r\n },\r\n scoreValue: {\r\n fontWeight: 600,\r\n fontSize: 32,\r\n color: palette.themePrimary,\r\n },\r\n scoreBarChartContainer: {\r\n position: 'relative',\r\n marginLeft: 15,\r\n },\r\n betaTagContainer: {\r\n position: 'absolute',\r\n display: 'inline-block',\r\n marginTop: '-11px',\r\n marginLeft: '-86px',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { formatPercentOneDecimal } from '@bingads-webui-campaign/recommendation-core';\r\nimport { TooltipHost, DirectionalHint, TooltipDelay } from '@fluentui/react';\r\nimport {\r\n Badge,\r\n} from '@fluentui/react-components';\r\n\r\nexport class RecommendationOptimizationScoreTag extends React.PureComponent {\r\n static propTypes = {\r\n className: PropTypes.string.isRequired,\r\n optimizationScore: PropTypes.number,\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n };\r\n\r\n static defaultProps = {\r\n optimizationScore: 0,\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n };\r\n\r\n render() {\r\n const {\r\n className, optimizationScore, i18n, newI18n,\r\n } = this.props;\r\n\r\n let optimizationScoreTagContent;\r\n let calloutContent;\r\n if (_.isNull(optimizationScore)) {\r\n optimizationScoreTagContent = (-
);\r\n calloutContent = newI18n.getString(_TL_('Not currently scored'));\r\n } else if (optimizationScore === 0) {\r\n optimizationScoreTagContent = ();\r\n calloutContent = newI18n.getString(_TL_('The score uplift is very low. While it\\'s still recommended to apply it to help your account performance well. Have a try!'));\r\n } else {\r\n const formatedScore = `+${formatPercentOneDecimal(optimizationScore, i18n)}`;\r\n optimizationScoreTagContent = ({formatedScore}
);\r\n calloutContent = i18n.getString('Summary_Card_Optimization_Score_Tag_Normal_Callout', { optimization_score: formatedScore.slice(1) });\r\n }\r\n\r\n const hostStyles = {\r\n root: {\r\n display: 'inline-block',\r\n },\r\n };\r\n const calloutProps = { gapSpace: 7 };\r\n const tooltipProps = {\r\n maxWidth: '231px',\r\n styles: {\r\n root: {\r\n padding: '8px 10px',\r\n },\r\n },\r\n delay: TooltipDelay.long,\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Popover } from '@bingads-webui-react/popover';\r\n\r\nexport class SummaryContextMenu extends React.PureComponent {\r\n static propTypes = {\r\n /**\r\n * Name of choice and its eventHandler.\r\n */\r\n funcsInMenu: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n func: PropTypes.func.isRequired,\r\n })).isRequired,\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.popover = null;\r\n }\r\n\r\n dismissPopover() {\r\n if (this.popover) {\r\n this.popover.dismissPopover();\r\n }\r\n }\r\n\r\n render() {\r\n const threeDots = (\r\n \r\n \r\n {optimizationScoreTagContent}\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n { this.popover = popover; }}\r\n >\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport {\r\n RECOMMENDATION_TYPES,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { TooltipHost, TooltipOverflowMode, DirectionalHint } from '@bingads-webui-react/fabric-control';\r\nimport { CouponTagNew } from '@bingads-webui-react/feature-adoption-coupon';\r\nimport { RecommendationOptimizationScoreTag } from '@bingads-webui-campaign-react/recommendation-os-tag';\r\nimport {\r\n Badge,\r\n} from '@fluentui/react-components';\r\n\r\nimport { SummaryContextMenu } from './summary-context-menu';\r\n\r\nexport class SummaryHeader extends React.PureComponent {\r\n static propTypes = {\r\n iconClasses: PropTypes.string.isRequired,\r\n iconClassesVNext: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n scope: PropTypes.shape({\r\n levelAt: PropTypes.string,\r\n }),\r\n coupon: PropTypes.objectOf(PropTypes.any),\r\n optimizationScore: PropTypes.number,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n isOptimizationScoreOn: PropTypes.bool,\r\n headerMenuItems: PropTypes.arrayOf(PropTypes.any),\r\n isFromDismissTab: PropTypes.bool,\r\n showAutoApply: PropTypes.bool,\r\n campaignAutoApplyStatus: PropTypes.shape({\r\n [RECOMMENDATION_TYPES.RESPONSIVE_SEARCH_ADS]: PropTypes.string,\r\n }),\r\n inContextCard: PropTypes.bool,\r\n autoApplyToolTipText: PropTypes.string,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n type: PropTypes.string.isRequired,\r\n };\r\n\r\n static defaultProps = {\r\n scope: {\r\n levelAt: null,\r\n },\r\n coupon: null,\r\n optimizationScore: null,\r\n overallOptimizationScoreBar: null,\r\n isOptimizationScoreOn: false,\r\n headerMenuItems: [],\r\n isFromDismissTab: false,\r\n campaignAutoApplyStatus: {},\r\n inContextCard: false,\r\n autoApplyToolTipText: '',\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n showAutoApply: false,\r\n };\r\n\r\n render() {\r\n const {\r\n i18n,\r\n iconClasses,\r\n iconClassesVNext,\r\n title,\r\n coupon,\r\n optimizationScore,\r\n overallOptimizationScoreBar,\r\n isOptimizationScoreOn,\r\n headerMenuItems,\r\n isFromDismissTab,\r\n inContextCard,\r\n autoApplyToolTipText,\r\n newI18n,\r\n showAutoApply,\r\n type,\r\n } = this.props;\r\n\r\n return (\r\n - \r\n {_.map(this.props.funcsInMenu, func => (\r\n
- \r\n
\r\n
\r\n );\r\n }\r\n}\r\n","\r\n/* eslint-disable jsx-a11y/anchor-is-valid, no-script-url */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport { CouponLightboxNew } from '@bingads-webui-react/feature-adoption-coupon';\r\nimport { Constants as CCUIConstants } from '@bingads-webui-clientcenter/entity-utils';\r\n\r\nimport {\r\n APPLY_ACTION_TYPES,\r\n CHANNEL_TYPES,\r\n SUMMARY_CARD,\r\n SUMMARY_APPLY_ALL_ENABLED,\r\n ADINSIGHT_LOG_ACTION_TYPE,\r\n RECOMMENDATION_TYPES,\r\n dismissFeedback,\r\n isShowAutoApplyFeedback,\r\n getChannel,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\n\r\nimport { showDismissFeedbackPopup } from '@bingads-webui-campaign-react/recommendation-dismiss-feedback';\r\nimport { showApplyFeedbackPopup } from '@bingads-webui-campaign-react/recommendation-feedback-modal';\r\nimport { handleRecommendationNotification } from '@bingads-webui-campaign/recommendation-notification';\r\nimport { generateGuid } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nconst FAC_STATUS_NOT_IN_PROGRESS = CCUIConstants.RecommendationAdoptionStatus.NotInProgess;\r\n\r\nexport class SummaryFooter extends React.PureComponent {\r\n static propTypes = {\r\n summary: PropTypes.shape({\r\n coupon: PropTypes.object,\r\n }).isRequired,\r\n viewRecommendations: PropTypes.string.isRequired,\r\n apply: PropTypes.string.isRequired,\r\n viewDetails: PropTypes.func.isRequired,\r\n type: PropTypes.string.isRequired,\r\n track: PropTypes.func,\r\n recommendationsCount: PropTypes.number.isRequired,\r\n opportunityCount: PropTypes.number,\r\n campaignAdGroups: PropTypes.arrayOf(PropTypes.object),\r\n level: PropTypes.string,\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logOpportunityEvent: PropTypes.func.isRequired,\r\n readOnly: PropTypes.bool,\r\n currentActivity: PropTypes.objectOf(PropTypes.any).isRequired,\r\n context: PropTypes.shape({\r\n Source: PropTypes.string,\r\n Level: PropTypes.string.isRequired,\r\n Category: PropTypes.string,\r\n }),\r\n guid: PropTypes.string,\r\n logExpInfo: PropTypes.func,\r\n scope: PropTypes.shape({\r\n campaignId: PropTypes.number,\r\n customerId: PropTypes.number,\r\n accountId: PropTypes.number,\r\n }),\r\n odata: PropTypes.PropTypes.shape({\r\n get: PropTypes.func.isRequired,\r\n }),\r\n preferencesService: PropTypes.objectOf(PropTypes.any),\r\n isInlineView: PropTypes.bool,\r\n appConfig: PropTypes.objectOf(PropTypes.any).isRequired,\r\n dataService: PropTypes.objectOf(PropTypes.any),\r\n showAsyncApplyModal: PropTypes.func,\r\n closeAsyncApplyModal: PropTypes.func,\r\n showApplyConfirmModal: PropTypes.func,\r\n isMCC: PropTypes.bool,\r\n optimizationScore: PropTypes.number,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n category: PropTypes.string,\r\n isOverviewPage: PropTypes.bool,\r\n isOptimizationScoreOn: PropTypes.bool,\r\n inContextCard: PropTypes.bool,\r\n permissions: PropTypes.shape({}),\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n };\r\n\r\n static defaultProps = {\r\n campaignAdGroups: [],\r\n level: null,\r\n logExpInfo: _.noop,\r\n guid: null,\r\n scope: null,\r\n odata: null,\r\n context: undefined,\r\n dataService: undefined,\r\n readOnly: undefined,\r\n track: _.noop,\r\n preferencesService: null,\r\n isInlineView: false,\r\n showAsyncApplyModal: _.noop,\r\n closeAsyncApplyModal: _.noop,\r\n showApplyConfirmModal: null,\r\n isMCC: false,\r\n opportunityCount: 0,\r\n optimizationScore: null,\r\n overallOptimizationScoreBar: null,\r\n category: null,\r\n isOverviewPage: false,\r\n isOptimizationScoreOn: false,\r\n inContextCard: false,\r\n permissions: {},\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showLightbox: false,\r\n lightboxAction: _.null,\r\n };\r\n }\r\n\r\n autoApplyDialogInSummary = () => {\r\n const {\r\n campaignAdGroups,\r\n context,\r\n currentActivity,\r\n guid,\r\n preferencesService,\r\n i18n,\r\n odata,\r\n scope,\r\n type,\r\n recommendationsCount,\r\n showApplyConfirmModal,\r\n permissions,\r\n newI18n,\r\n dataService,\r\n } = this.props;\r\n const options = {\r\n i18n,\r\n el: '.recommendation-apply-feedback-popup',\r\n data: {\r\n type,\r\n channel: CHANNEL_TYPES.RECOMMENDATION,\r\n campaignAdGroups,\r\n },\r\n guid,\r\n context,\r\n callback: () => {\r\n this.applyAll();\r\n },\r\n cid: scope.advertiserCustomerId,\r\n aid: scope.accountId,\r\n odata,\r\n isFromSummary: true,\r\n isFromAutoApplyDialog: true,\r\n recommendationsCount,\r\n onAutoApplyCancel: () => {\r\n showDismissFeedbackPopup({\r\n i18n,\r\n type,\r\n onSubmit: (feedback) => {\r\n dismissFeedback({\r\n campaignId: scope.campaignId,\r\n currentActivity,\r\n feedback,\r\n preferencesService,\r\n rejectAutoApplySuggestedAds: true,\r\n context,\r\n guid,\r\n isMCC: this.props.isMCC,\r\n });\r\n },\r\n rejectAutoApplySuggestedAds: true,\r\n });\r\n },\r\n showApplyConfirmModal: () => showApplyConfirmModal({\r\n onApply: this.applyAll,\r\n countRecommendation: recommendationsCount,\r\n }),\r\n permissions,\r\n newI18n,\r\n dataService,\r\n };\r\n showApplyFeedbackPopup(options);\r\n };\r\n\r\n confirmApplyAll = () => {\r\n const { preferencesService, type, permissions } = this.props;\r\n const rejectAutoApplySuggestedAds = true;\r\n // Conditions:\r\n // 1. not in customer level\r\n // 2. Apply all new ads recommendations in summary page\r\n // 3. Users don't reject auto-apply confirmation dialog within 30 days.\r\n // Result: Show a dialog to confirm enabling auto-apply ad suggestions.\r\n if (!this.props.isMCC\r\n && (permissions.IsRSAAutoApplyEnabled && type === RECOMMENDATION_TYPES.RESPONSIVE_SEARCH_ADS)\r\n && isShowAutoApplyFeedback({ preferencesService, type, rejectAutoApplySuggestedAds })) {\r\n this.autoApplyDialogInSummary();\r\n return;\r\n }\r\n\r\n if (_.isFunction(this.props.showApplyConfirmModal)) {\r\n this.props.showApplyConfirmModal({\r\n onApply: this.applyAll,\r\n countRecommendation: this.props.recommendationsCount,\r\n type,\r\n });\r\n } else {\r\n // eslint-disable-next-line no-alert, no-restricted-globals\r\n if (!confirm(this.props.i18n.getString('Recommendation_Apply_All_Confirm', {\r\n count: this.props.recommendationsCount,\r\n }))) {\r\n return;\r\n }\r\n this.applyAll();\r\n }\r\n };\r\n\r\n applyAll = () => {\r\n const {\r\n campaignAdGroups,\r\n type,\r\n optimizationScore,\r\n isOptimizationScoreOn,\r\n isMCC,\r\n inContextCard,\r\n isInlineView,\r\n isOverviewPage,\r\n } = this.props;\r\n\r\n const action = `${this.props.recommendationsCount} recommendations applied`;\r\n this.props.logExpInfo(action);\r\n\r\n const channel = getChannel(type, isInlineView, isMCC, isOverviewPage, inContextCard);\r\n\r\n\r\n this.props.currentActivity.trace(\r\n `recommendation summary view: apply all is called, channel = ${channel}, type = ${type}`,\r\n `${channel}/applyall`\r\n );\r\n\r\n const contextWithTrackingId = _.extend({}, this.props.context, { trackId: generateGuid() });\r\n this.props.logOpportunityEvent({\r\n type: this.props.type,\r\n action: ADINSIGHT_LOG_ACTION_TYPE.CLICK_APPLYALL,\r\n context: contextWithTrackingId,\r\n });\r\n\r\n // now applyMode in context align with which mt api called, may need to modify in the future\r\n const contextWithApplyMode = _.extend({}, contextWithTrackingId, { ApplyMode: 'All' });\r\n\r\n this.props.track({\r\n type,\r\n userAction: APPLY_ACTION_TYPES.ACCEPT,\r\n campaignAdGroups,\r\n channel,\r\n applyOpportunitiesLevel: this.props.level,\r\n context: contextWithApplyMode,\r\n guid: this.props.guid,\r\n handleRecommendationNotification,\r\n viewDetails: this.props.viewDetails,\r\n from: SUMMARY_CARD,\r\n showAsyncApplyModal: this.props.showAsyncApplyModal,\r\n closeAsyncApplyModal: this.props.closeAsyncApplyModal,\r\n // because opportunity is the base unit MT applied\r\n totalRecommendationCount: this.props.opportunityCount,\r\n isOptimizationScoreUsed: isOptimizationScoreOn,\r\n optimizationScore,\r\n });\r\n };\r\n\r\n viewAll = () => {\r\n const channel = getChannel(\r\n this.props.type,\r\n this.props.isInlineView,\r\n this.props.isMCC,\r\n this.props.isOverviewPage,\r\n this.props.inContextCard\r\n );\r\n\r\n this.props.currentActivity.trace(\r\n `recommendation summary view: view all is called, channel = ${channel}, type = ${this.props.type}`,\r\n `${channel}/viewAll`\r\n );\r\n\r\n this.props.logOpportunityEvent({\r\n type: this.props.type,\r\n action: ADINSIGHT_LOG_ACTION_TYPE.CLICK_RECS,\r\n context: _.extend({}, this.props.context, { RecommendationCount: this.props.opportunityCount }),\r\n });\r\n\r\n if (channel !== CHANNEL_TYPES.INCONTEXT &&\r\n channel !== CHANNEL_TYPES.INCONTEXTCARD &&\r\n channel !== CHANNEL_TYPES.OVERVIEWPAGE &&\r\n channel !== CHANNEL_TYPES.MCCOVERVIEW) {\r\n this.props.appConfig.set('recsrc', 'summarypage');\r\n }\r\n this.props.viewDetails(this.props.type, this.props.category)();\r\n };\r\n\r\n buttonActionWithCoupon = (action) => {\r\n if (\r\n this.props.summary.coupon\r\n && !this.props.inContextCard\r\n && this.props.summary.coupon.rawData.Status === FAC_STATUS_NOT_IN_PROGRESS) {\r\n this.setState({\r\n showLightbox: true,\r\n lightboxAction: action,\r\n });\r\n } else {\r\n action();\r\n }\r\n };\r\n\r\n viewAllButtonAction = () => this.buttonActionWithCoupon(this.viewAll);\r\n\r\n applyAllButtonAction = () => this.buttonActionWithCoupon(this.confirmApplyAll);\r\n\r\n hideLightbox = () => {\r\n this.setState({ showLightbox: false });\r\n };\r\n\r\n lightboxAction = () => {\r\n const action = this.state.lightboxAction;\r\n this.setState({\r\n showLightbox: false,\r\n lightboxAction: _.null,\r\n });\r\n this.props\r\n .dataService\r\n .startCouponAdoption(this.props.summary.coupon.rawData)\r\n .finally(action);\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {title}\r\n \r\n
\r\n\r\n {!inContextCard && coupon && \r\n \r\n
\r\n }\r\n\r\n {type === RECOMMENDATION_TYPES.DSA_2_PMAX_MIGRATION &&\r\n \r\n \r\n {newI18n.getString(_TL_('New'))}\r\n \r\n
\r\n }\r\n\r\n {isOptimizationScoreOn && !_.isEmpty(overallOptimizationScoreBar) && !isFromDismissTab &&\r\n \r\n { /* TODO: Check if description should use something different from title */}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","/* eslint-disable react/no-danger */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { ActionTable } from '@bingads-webui-campaign-react/recommendation-visuals';\r\n\r\nexport class SamplePanel extends React.PureComponent {\r\n static propTypes = {\r\n insightTitle: PropTypes.string.isRequired,\r\n insight: PropTypes.string.isRequired,\r\n actionTitle: PropTypes.string,\r\n actions: PropTypes.oneOfType([\r\n PropTypes.shape({\r\n headers: PropTypes.array.isRequired,\r\n values: PropTypes.array.isRequired,\r\n }),\r\n PropTypes.string,\r\n ]),\r\n moreRecommendations: PropTypes.string,\r\n children: PropTypes.element.isRequired,\r\n };\r\n\r\n static defaultProps = {\r\n actionTitle: null,\r\n actions: null,\r\n moreRecommendations: null,\r\n };\r\n\r\n render() {\r\n let actionDetails;\r\n if (this.props.actions) {\r\n const { actionTitle, moreRecommendations } = this.props;\r\n const actions = this.props.actions.headers ?\r\n \r\n \r\n {SUMMARY_APPLY_ALL_ENABLED[this.props.type] &&\r\n \r\n }\r\n
\r\n { this.props.summary.coupon\r\n && !this.props.inContextCard\r\n && this.state.showLightbox\r\n && this.props.dataService\r\n && (\r\n \r\n {this.props.actions}\r\n
\r\n );\r\n\r\n actionDetails = (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n {moreRecommendations}\r\n
\r\n }\r\n \r\n {this.props.insightTitle &&\r\n
\r\n );\r\n }\r\n}\r\n\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Textfit } from 'react-textfit';\r\nimport { formatPercentOneDecimal, SUMMARY_LEVELS } from '@bingads-webui-campaign/recommendation-core';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\n\r\nexport const OverallOptimizationScore = (props) => {\r\n const {\r\n overallOptimizationScoreBar,\r\n newI18n,\r\n scope,\r\n } = props;\r\n\r\n if (!overallOptimizationScoreBar) {\r\n return null;\r\n }\r\n\r\n const { Gained, Dismissed } = overallOptimizationScoreBar;\r\n const { levelAt } = scope;\r\n\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n {actionDetails}\r\n \r\n
\r\n );\r\n};\r\n\r\nOverallOptimizationScore.propTypes = {\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n scope: PropTypes.shape({\r\n levelAt: PropTypes.string,\r\n }),\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nOverallOptimizationScore.defaultProps = {\r\n overallOptimizationScoreBar: null,\r\n scope: null,\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid, no-script-url */\r\nimport _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { EstimationTile, SummaryEstimation } from '@bingads-webui-campaign-react/recommendation-estimation-tile';\r\nimport {\r\n ActionTable,\r\n BingMapView,\r\n AdsPreview,\r\n} from '@bingads-webui-campaign-react/recommendation-visuals';\r\nimport { AdvisorChart } from '@bingads-webui-campaign-react/advisor-chart';\r\nimport { CouponTagNew } from '@bingads-webui-react/feature-adoption-coupon';\r\nimport {\r\n VISUAL_TYPES,\r\n isCompetition,\r\n NOT_SUPPORT_DOWNLOAD_TYPES,\r\n SUMMARY_LEVELS,\r\n withTrack,\r\n getChannel,\r\n APPLY_ACTION_TYPES,\r\n withAdsAutoApply,\r\n recommendationInProductUpdateConfigs,\r\n RECOMMENDATION_TYPES,\r\n NOT_SUPPORT_DISMISS_TYPES,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport {\r\n isInProductUpdateBannerAvailable,\r\n InProdUpdateNotificationBanner,\r\n handleRecommendationNotification,\r\n WarnNotificationBanner,\r\n} from '@bingads-webui-campaign/recommendation-notification';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { generateGuid } from '@bingads-webui-universal/primitive-utilities';\r\nimport { StyledRecommendationAutpApplyBanner } from '@bingads-webui-campaign-react/recommendation-auto-apply-banner';\r\nimport { RecommendationOptimizationScoreTag } from '@bingads-webui-campaign-react/recommendation-os-tag';\r\nimport { SummaryHeader } from './summary-header';\r\nimport { SummaryFooter } from './summary-footer';\r\nimport { SamplePanel } from './sample-panel';\r\nimport { OverallOptimizationScore } from './optimization-score';\r\n\r\nclass FuncWithName {\r\n constructor(name, func, disabled = false) {\r\n this.name = name;\r\n this.func = func;\r\n this.disabled = disabled;\r\n }\r\n}\r\n\r\nclass summaryCard extends React.PureComponent {\r\n static propTypes = {\r\n summary: PropTypes.shape({\r\n description: PropTypes.string.isRequired,\r\n pitching: PropTypes.string.isRequired,\r\n helpId: PropTypes.string.isRequired,\r\n isSeasonal: PropTypes.bool.isRequired,\r\n title: PropTypes.string.isRequired,\r\n iconClasses: PropTypes.string.isRequired,\r\n iconClassesVNext: PropTypes.string.isRequired,\r\n estimates: PropTypes.shape({\r\n primaryIncrease: PropTypes.string.isRequired,\r\n }),\r\n coupon: PropTypes.object,\r\n isNrt: PropTypes.bool,\r\n hasAIAssetRecommendation: PropTypes.bool,\r\n linkType: PropTypes.string,\r\n thirdPartyInfos: PropTypes.arrayOf(PropTypes.shape({\r\n Level: PropTypes.number,\r\n ThirdPartyName: PropTypes.string,\r\n })),\r\n }).isRequired,\r\n sample: PropTypes.shape({\r\n visualData: PropTypes.oneOfType([\r\n PropTypes.object,\r\n PropTypes.array,\r\n ]).isRequired,\r\n }).isRequired,\r\n onFeedbackModalOpen: PropTypes.func,\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n locationMap: PropTypes.func.isRequired,\r\n reload: PropTypes.func,\r\n type: PropTypes.string.isRequired,\r\n version: PropTypes.number.isRequired,\r\n level: PropTypes.string,\r\n logOpportunityEvent: PropTypes.func.isRequired,\r\n readOnly: PropTypes.bool,\r\n onDownload: PropTypes.func,\r\n handleHideCard: PropTypes.func,\r\n currentActivity: PropTypes.objectOf(PropTypes.any).isRequired,\r\n context: PropTypes.shape({\r\n Source: PropTypes.string,\r\n Level: PropTypes.string.isRequired,\r\n Category: PropTypes.string,\r\n }),\r\n guid: PropTypes.string,\r\n perfMarker: PropTypes.shape({\r\n willInit: PropTypes.func.isRequired,\r\n willRender: PropTypes.func.isRequired,\r\n done: PropTypes.func.isRequired,\r\n }),\r\n isInlineView: PropTypes.bool,\r\n scope: PropTypes.shape({\r\n customerId: PropTypes.number,\r\n accountId: PropTypes.number,\r\n advertiserCustomerId: PropTypes.number,\r\n levelAt: PropTypes.string,\r\n }),\r\n odata: PropTypes.PropTypes.shape({\r\n get: PropTypes.func.isRequired,\r\n }),\r\n preferencesService: PropTypes.objectOf(PropTypes.any),\r\n appConfig: PropTypes.objectOf(PropTypes.any).isRequired,\r\n permissions: PropTypes.objectOf(PropTypes.any),\r\n isMCC: PropTypes.bool,\r\n optimizationScore: PropTypes.number,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n isOverviewPage: PropTypes.bool,\r\n category: PropTypes.string,\r\n isOptimizationScoreOn: PropTypes.bool,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n track: PropTypes.func.isRequired,\r\n campaignAdGroups: PropTypes.arrayOf(PropTypes.object),\r\n isFromDismissTab: PropTypes.bool,\r\n optInStatus: PropTypes.bool,\r\n applyDate: PropTypes.number,\r\n recommendationsCount: PropTypes.number,\r\n isFromSummary: PropTypes.bool,\r\n classes: PropTypes.objectOf(PropTypes.string),\r\n initializeMiniGrid: PropTypes.func,\r\n showAutoApplyBanner: PropTypes.bool,\r\n isAutoApplyRecommendationEnabled: PropTypes.bool,\r\n viewSettings: PropTypes.func,\r\n isAutoApplyOptIn: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n level: null,\r\n onDownload: null,\r\n onFeedbackModalOpen: _.noop,\r\n reload: _.noop,\r\n readOnly: undefined,\r\n campaignAdGroups: undefined,\r\n handleHideCard: _.noop,\r\n perfMarker: {\r\n willInit: _.noop,\r\n willRender: _.noop,\r\n done: _.noop,\r\n },\r\n context: null,\r\n guid: null,\r\n isInlineView: false,\r\n scope: null,\r\n odata: null,\r\n preferencesService: null,\r\n permissions: {},\r\n isMCC: false,\r\n optimizationScore: null,\r\n overallOptimizationScoreBar: null,\r\n isOverviewPage: false,\r\n category: null,\r\n isOptimizationScoreOn: false,\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n isFromDismissTab: false,\r\n optInStatus: false,\r\n applyDate: 0,\r\n isFromSummary: false,\r\n initializeMiniGrid: _.noop,\r\n classes: {},\r\n recommendationsCount: 0,\r\n showAutoApplyBanner: false,\r\n isAutoApplyRecommendationEnabled: false,\r\n viewSettings: _.noop,\r\n isAutoApplyOptIn: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n props.perfMarker.willInit();\r\n }\r\n\r\n componentDidMount() {\r\n this.props.perfMarker.done();\r\n }\r\n\r\n getHeaderMenuItems = () => {\r\n const {\r\n permissions,\r\n isInlineView,\r\n i18n,\r\n isOptimizationScoreOn,\r\n readOnly,\r\n isFromDismissTab,\r\n newI18n,\r\n } = this.props;\r\n\r\n const isInProductFeedbackLoopOn = permissions.IsRecommendationInProductFeedbackLoopEnabled;\r\n const { levelAt } = this.props.scope;\r\n const headerMenuItems = [];\r\n const onDownload = _.contains(NOT_SUPPORT_DOWNLOAD_TYPES, this.props.type) ?\r\n null : this.props.onDownload && this.handleDownload;\r\n\r\n if (isInlineView) {\r\n if (levelAt === SUMMARY_LEVELS.CAMPAIGN) {\r\n headerMenuItems.push(new FuncWithName(i18n.getString('Summary_Card_Context_Menu_Hide_In_Campaign'), () => this.handleHideCard(SUMMARY_LEVELS.CAMPAIGN)));\r\n }\r\n if (levelAt === SUMMARY_LEVELS.ADGROUP) {\r\n headerMenuItems.push(new FuncWithName(i18n.getString('Summary_Card_Context_Menu_Hide_In_AdGroup'), () => this.handleHideCard(SUMMARY_LEVELS.ADGROUP)));\r\n }\r\n headerMenuItems.push(new FuncWithName(i18n.getString('Summary_Card_Context_Menu_Hide_In_Account'), () => this.handleHideCard(SUMMARY_LEVELS.ACCOUNT)));\r\n }\r\n\r\n if (!_.isNull(onDownload)) {\r\n headerMenuItems.push(new FuncWithName(i18n.getString('Summary_Card_Context_Menu_Download'), onDownload));\r\n }\r\n\r\n if (!_.contains(NOT_SUPPORT_DISMISS_TYPES, this.props.type)) {\r\n if (isInProductFeedbackLoopOn || isOptimizationScoreOn) {\r\n if (isFromDismissTab) {\r\n headerMenuItems.push(new FuncWithName(newI18n.getString(_TL_('Undismiss all')), this.handleUndismissAll, this.props.readOnly));\r\n } else {\r\n headerMenuItems.push(new FuncWithName(i18n.getString('Details_View_Dismiss_All'), this.handleDismissAll, readOnly));\r\n }\r\n } else {\r\n headerMenuItems.push(new FuncWithName(i18n.getString('Summary_Card_Context_Menu_Reject'), this.handleReject, readOnly));\r\n }\r\n }\r\n\r\n if (!isFromDismissTab) {\r\n headerMenuItems.push(new FuncWithName(i18n.getString('Summary_Card_Context_Menu_Feedback'), this.handleFeedback, readOnly));\r\n }\r\n\r\n return headerMenuItems;\r\n };\r\n\r\n handleSubmit(isProvideFeedbackOnly, isDismissAll = false) {\r\n this.props.onFeedbackModalOpen({\r\n recommendationDescription: this.props.summary.title,\r\n isProvideFeedbackOnly,\r\n isDismissAll,\r\n type: this.props.type,\r\n applyOpportunitiesLevel: this.props.level,\r\n context: this.props.context,\r\n });\r\n }\r\n\r\n handleDownload = () => {\r\n this.props.onDownload(this.props.type, this.props.version);\r\n };\r\n\r\n handleReject = () => {\r\n this.handleSubmit(false);\r\n };\r\n\r\n handleDismissAll = () => {\r\n this.handleSubmit(false, true);\r\n };\r\n\r\n handleUndismissAll = () => {\r\n const {\r\n context,\r\n type,\r\n isInlineView,\r\n level,\r\n guid,\r\n isMCC,\r\n } = this.props;\r\n\r\n this.props.track({\r\n type: this.props.type,\r\n campaignAdGroups: this.props.campaignAdGroups,\r\n channel: getChannel(type, isInlineView, isMCC),\r\n userAction: APPLY_ACTION_TYPES.UNDISMISS,\r\n applyOpportunitiesLevel: level,\r\n context: _.defaults({}, context, { trackId: generateGuid(), ApplyMode: 'All' }),\r\n guid,\r\n withAll: true,\r\n handleRecommendationNotification,\r\n });\r\n };\r\n\r\n handleFeedback = () => {\r\n this.handleSubmit(true);\r\n };\r\n\r\n handleHideCard = (levelAt) => {\r\n this.props.handleHideCard(this.props.type, levelAt);\r\n };\r\n\r\n render() {\r\n this.props.perfMarker.willRender();\r\n const {\r\n sample: {\r\n visualType,\r\n visualData,\r\n },\r\n locationMap,\r\n i18n,\r\n type,\r\n preferencesService,\r\n permissions,\r\n summary,\r\n isOverviewPage,\r\n isOptimizationScoreOn,\r\n context,\r\n newI18n,\r\n isFromDismissTab,\r\n optInStatus,\r\n scope,\r\n applyDate,\r\n recommendationsCount,\r\n appConfig,\r\n odata,\r\n isFromSummary,\r\n classes,\r\n initializeMiniGrid,\r\n showAutoApplyBanner,\r\n isAutoApplyRecommendationEnabled,\r\n overallOptimizationScoreBar,\r\n viewSettings,\r\n isMCC,\r\n isAutoApplyOptIn,\r\n } = this.props;\r\n const inProductUpdateConfig = recommendationInProductUpdateConfigs[type];\r\n let chart;\r\n switch (visualType) {\r\n case VISUAL_TYPES.COLUMN_CHART:\r\n case VISUAL_TYPES.LINE_CHART:\r\n case VISUAL_TYPES.LINE_WEEKLY_CHART:\r\n case VISUAL_TYPES.LINE_COLUMN_CHART:\r\n chart = (\r\n {formatPercentOneDecimal(Gained + Dismissed, newI18n)} \r\n
\r\n \r\n {levelAt === SUMMARY_LEVELS.CAMPAIGN ?\r\n newI18n.getString(_TL_('Your campaign optimization score')) : newI18n.getString(_TL_('Your account optimization score'))}\r\n
\r\n \r\n
\r\n );\r\n\r\n const banner = (\r\n \r\n {estimates && estimates.showEstimates && isSeasonal &&\r\n
\r\n );\r\n\r\n const summaryEstimates = (\r\n \r\n {i18n.getString('Summary_Card_Banner_Seasonal_Recommendation')}\r\n
\r\n }\r\n \r\n
\r\n );\r\n\r\n const summaryOptimizationScore = (\r\n \r\n
\r\n );\r\n\r\n const summaryEstimation = (\r\n \r\n
\r\n );\r\n\r\n const sample = (\r\n \r\n \r\n {chart}\r\n \r\n
\r\n );\r\n\r\n const footer = (\r\n \r\n
\r\n );\r\n\r\n let overviewEstimationOrSummary = null;\r\n if (isOverviewPage) {\r\n if (isOptimizationScoreOn && overallOptimizationScoreBar) {\r\n overviewEstimationOrSummary = summaryOptimizationScore;\r\n } else if (showEstimates) {\r\n overviewEstimationOrSummary = summaryEstimates;\r\n }\r\n }\r\n\r\n let AutoApplyBanner;\r\n if (showAutoApplyBanner) {\r\n AutoApplyBanner = isAutoApplyRecommendationEnabled ?\r\n StyledRecommendationAutpApplyBanner : withAdsAutoApply(StyledRecommendationAutpApplyBanner);\r\n }\r\n\r\n const summaryDescription = (\r\n \r\n {isOverviewPage\r\n && coupon &&
\r\n );\r\n\r\n return (\r\n \r\n
\r\n {showFooterInDescription && footer}\r\n \r\n {!isOverviewPage && header}\r\n
\r\n {showSummarySample && sample}\r\n {!showFooterInDescription && !isOverviewPage && footer}\r\n {showAutoApplyBanner &&\r\n \r\n {!isOverviewPage && inProductUpdateConfig && inProductUpdateConfig.warnNotification &&\r\n \r\n {!isOptimizationScoreOn && !isOverviewPage && showEstimates && summaryEstimates}\r\n {overviewEstimationOrSummary}\r\n {summaryDescription}\r\n {!isOverviewPage && isOptimizationScoreOn && showEstimates && summaryEstimation}\r\n
\r\n \r\n {cards}\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { levelAtConstant } from '@bingads-webui-campaign/scope-constants';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { CHANNEL_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\n\r\nimport bubbleImg from '../media/bubble.svg';\r\n\r\nfunction renderLearnMore(i18n, text, channel) {\r\n return (\r\n
);\r\n};\r\n\r\nEmptyView.propTypes = {\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n scope: PropTypes.shape({\r\n levelAt: PropTypes.string.isRequired,\r\n }).isRequired,\r\n viewAccountRecommendations: PropTypes.func,\r\n channel: PropTypes.string.isRequired,\r\n data: PropTypes.objectOf(PropTypes.any),\r\n isOptimizationScoreOn: PropTypes.bool,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Available: PropTypes.number,\r\n }),\r\n isDismissedDataEmpty: PropTypes.bool,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n viewDismissedRecommendations: PropTypes.func,\r\n isDismissedTabEnabled: PropTypes.bool,\r\n};\r\n\r\nEmptyView.defaultProps = {\r\n viewAccountRecommendations: _.noop,\r\n data: null,\r\n isOptimizationScoreOn: false,\r\n overallOptimizationScoreBar: {},\r\n isDismissedDataEmpty: true,\r\n newI18n: {},\r\n isDismissedTabEnabled: false,\r\n viewDismissedRecommendations: _.noop,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport Minigrid from 'minigrid';\r\n\r\nimport {\r\n withGetSummary,\r\n withGetCount,\r\n withFilterCategory,\r\n CHANNEL_TYPES,\r\n isCompetition,\r\n ADINSIGHT_LOG_ACTION_TYPE,\r\n ADINSIGHT_LOG_API_NAME,\r\n RECOMMENDATION_IDS,\r\n getChannel,\r\n hideInContextRecommendation,\r\n DOWNLOAD_SCOPE,\r\n RECOMMENDATION_CATEGORIES,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { DownloadToolbarButton } from '@bingads-webui-campaign-react/recommendation-visuals';\r\nimport { OverridableToolbarView } from '@bingads-webui/toolbar';\r\nimport {\r\n CampaignAdgroupSelectorFilterAgent,\r\n EmptyFilterView,\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-selector-filter';\r\nimport { FeedbackModal } from '@bingads-webui-campaign-react/recommendation-feedback-modal';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\n\r\nimport { levelAtConstant } from '@bingads-webui-campaign/scope-constants';\r\n\r\nimport { SummaryCardList } from './summary-card-list';\r\nimport { EmptyView } from './empty-view';\r\n\r\nclass summaryView extends React.PureComponent {\r\n static propTypes = {\r\n data: PropTypes.objectOf(PropTypes.any).isRequired,\r\n dismissedData: PropTypes.objectOf(PropTypes.any),\r\n reload: PropTypes.func.isRequired,\r\n viewDetails: PropTypes.func.isRequired,\r\n viewSummary: PropTypes.func.isRequired,\r\n viewCategory: PropTypes.func,\r\n deps: PropTypes.shape({\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n locationMap: PropTypes.func.isRequired,\r\n constants: PropTypes.shape({\r\n imagePath: PropTypes.string.isRequired,\r\n }).isRequired,\r\n permissions: PropTypes.object.isRequired,\r\n combineText: PropTypes.func,\r\n adDisplayUrlService: PropTypes.object,\r\n odata: PropTypes.PropTypes.shape({\r\n get: PropTypes.func.isRequired,\r\n }),\r\n preferencesService: PropTypes.objectOf(PropTypes.any),\r\n appConfig: PropTypes.objectOf(PropTypes.any).isRequired,\r\n }).isRequired,\r\n channel: PropTypes.string.isRequired,\r\n campaignType: PropTypes.number,\r\n context: PropTypes.shape({\r\n Source: PropTypes.string,\r\n Level: PropTypes.string.isRequired,\r\n Category: PropTypes.string,\r\n }).isRequired,\r\n currency: PropTypes.string.isRequired,\r\n filterConfig: PropTypes.objectOf(PropTypes.any),\r\n filterService: PropTypes.objectOf(PropTypes.any),\r\n campaignAdGroups: PropTypes.arrayOf(PropTypes.object).isRequired,\r\n hasFilter: PropTypes.bool.isRequired,\r\n scope: PropTypes.shape({\r\n levelAt: PropTypes.string.isRequired,\r\n campaignId: PropTypes.string,\r\n customerId: PropTypes.string,\r\n accountId: PropTypes.string,\r\n adGroupId: PropTypes.string,\r\n }).isRequired,\r\n currentActivity: PropTypes.objectOf(PropTypes.any).isRequired,\r\n readOnly: PropTypes.bool,\r\n downloadService: PropTypes.objectOf(PropTypes.any),\r\n guid: PropTypes.string, // for adinsight view event log in aria\r\n isInlineView: PropTypes.bool,\r\n hasDataCallback: PropTypes.func,\r\n hideCardCallback: PropTypes.func,\r\n initialToolbarConfig: PropTypes.objectOf(PropTypes.any),\r\n applyAllCallback: PropTypes.func,\r\n toolbar: PropTypes.element,\r\n isMCC: PropTypes.bool,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n isOptimizationScoreOn: PropTypes.bool,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n isDismissedTabEnabled: PropTypes.bool,\r\n isFromSummary: PropTypes.bool,\r\n isAutoApplyRecommendationEnabled: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n campaignType: null,\r\n filterService: null,\r\n filterConfig: null,\r\n readOnly: false,\r\n downloadService: null,\r\n guid: null,\r\n isInlineView: false,\r\n hasDataCallback: _.noop,\r\n hideCardCallback: _.noop,\r\n initialToolbarConfig: null,\r\n applyAllCallback: _.noop,\r\n toolbar: null,\r\n isMCC: false,\r\n overallOptimizationScoreBar: null,\r\n isOptimizationScoreOn: false,\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n dismissedData: {},\r\n viewCategory: _.noop,\r\n isDismissedTabEnabled: false,\r\n isFromSummary: false,\r\n isAutoApplyRecommendationEnabled: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.upperToolBarInstance = new OverridableToolbarView({\r\n items: [{\r\n type: 'dropdown',\r\n id: 'filter-menu',\r\n }],\r\n });\r\n\r\n this.state = {\r\n modal: {\r\n isOpen: false,\r\n isDismissAll: false,\r\n },\r\n toolbarConfig: props.initialToolbarConfig,\r\n hideToolbar: false,\r\n appliedFilter: undefined,\r\n };\r\n if (props.filterService) {\r\n props.filterService.on('filter-state-changed', this.onFilterStateChanged);\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.upperToolBarInstance.render();\r\n this.initializeMiniGrid();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.initializeMiniGrid();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.upperToolBarInstance.remove();\r\n }\r\n\r\n onFilterStateChanged = () => {\r\n this.props.reload();\r\n }\r\n\r\n initializeMiniGrid() {\r\n if (!_.isEmpty(this.props.data) && !this.props.isInlineView) {\r\n const ops = {\r\n container: '.recommendation-summary-cards',\r\n item: '.recommendation-summary-card',\r\n gutter: 20,\r\n };\r\n const autoApplyOps = {\r\n container: '.auto-apply-recommendation-container .recommendation-summary-cards',\r\n item: '.recommendation-summary-card',\r\n gutter: 20,\r\n };\r\n const grid = new Minigrid(ops);\r\n grid.mount();\r\n\r\n if (this.props.isAutoApplyRecommendationEnabled) {\r\n const autoApplyGrid = new Minigrid(autoApplyOps);\r\n autoApplyGrid.mount();\r\n }\r\n }\r\n }\r\n\r\n handleDownload = (type, version) => {\r\n const self = this;\r\n self.props.downloadService.download({\r\n channel: self.props.channel,\r\n campaignType: self.props.campaignType,\r\n filterService: self.props.filterService,\r\n recommendationType: type,\r\n }).then(() => {\r\n self.logOpportunityEvent({\r\n type,\r\n action: ADINSIGHT_LOG_ACTION_TYPE.DOWNLOAD,\r\n context: _.extend({\r\n Version: version,\r\n DownloadScope: DOWNLOAD_SCOPE.INDIVIDUAL,\r\n }, self.props.context),\r\n });\r\n });\r\n };\r\n\r\n handleFeedbackModalOpen = ({\r\n recommendationDescription,\r\n isProvideFeedbackOnly,\r\n isDismissAll,\r\n type,\r\n applyOpportunitiesLevel,\r\n context,\r\n }) => {\r\n this.setState({\r\n modal: {\r\n isOpen: true,\r\n recommendationDescription,\r\n isProvideFeedbackOnly,\r\n isDismissAll,\r\n data: {\r\n type,\r\n campaignAdGroups: this.props.campaignAdGroups,\r\n channel: getChannel(type, this.props.isInlineView, this.props.isMCC),\r\n applyOpportunitiesLevel,\r\n },\r\n context,\r\n },\r\n });\r\n }\r\n\r\n handleHideCard = (type, levelAt) => {\r\n let id = this.props.scope.accountId;\r\n\r\n if (levelAt === levelAtConstant.CAMPAIGN) {\r\n id = this.props.scope.campaignId;\r\n } else if (levelAt === levelAtConstant.ADGROUP) {\r\n id = this.props.scope.adGroupId;\r\n }\r\n hideInContextRecommendation({\r\n levelAt,\r\n id,\r\n type,\r\n preferencesService: this.props.deps.preferencesService,\r\n currentActivity: this.props.currentActivity,\r\n channel: getChannel(type, this.props.isInlineView, this.props.isMCC),\r\n campaignId: this.props.scope.campaignId,\r\n context: _.extend({ HideLevel: levelAt }, this.props.context),\r\n isCardView: true,\r\n guid: this.props.guid || '',\r\n });\r\n this.props.hideCardCallback();\r\n };\r\n\r\n handleFeedbackSubmit = (option) => {\r\n this.setState({ modal: { isOpen: false } }, () => {\r\n this.props.reload({ isFromApplyOrDismiss: option && option.isDismissAll });\r\n });\r\n };\r\n\r\n handleFeedbackCancel = () => {\r\n this.setState({ modal: { isOpen: false } });\r\n }\r\n\r\n viewAccountRecommendations = () => {\r\n this.props.viewSummary({\r\n scope: levelAtConstant.ACCOUNT,\r\n });\r\n }\r\n\r\n viewDismissedRecommendations = () => {\r\n this.props.viewCategory(RECOMMENDATION_CATEGORIES.DISMISSED)();\r\n }\r\n\r\n logOpportunityEvent = ({\r\n type = null,\r\n action,\r\n position = null,\r\n input = null,\r\n context = null,\r\n }) => {\r\n let api = ADINSIGHT_LOG_API_NAME.RECOMMENDATION;\r\n\r\n if (isCompetition(type)) {\r\n api = ADINSIGHT_LOG_API_NAME.COMPETITION;\r\n }\r\n\r\n this.props.currentActivity.trace({\r\n type: type || '',\r\n typeId: RECOMMENDATION_IDS[type],\r\n action,\r\n input,\r\n campaignId: this.props.scope.campaignId,\r\n channel: getChannel(type, this.props.isInlineView, this.props.isMCC),\r\n position,\r\n guid: this.props.guid || '',\r\n context: JSON.stringify(context),\r\n }, api);\r\n }\r\n\r\n updateToolbar = (values) => {\r\n _.each(_.isArray(values) ? values : [values], (value) => {\r\n const { id } = value;\r\n\r\n if (this.state.toolbarConfig.has(id)) {\r\n this.state.toolbarConfig.set(id, _.extend(this.state.toolbarConfig.get(id), value));\r\n this.setState({\r\n toolbarConfig: this.state.toolbarConfig,\r\n });\r\n if (id === 'predicate-list' && !_.isEqual(this.state.appliedFilter, this.props.filterService.editableFilter)) {\r\n this.setState({\r\n appliedFilter: this.props.filterService.editableFilter,\r\n });\r\n this.forceUpdate();\r\n }\r\n }\r\n });\r\n }\r\n\r\n resetToolbarVisibility = ({ forceHideToolbar }) => {\r\n this.setState({\r\n hideToolbar: forceHideToolbar,\r\n });\r\n }\r\n\r\n render = () => {\r\n const {\r\n deps: {\r\n i18n,\r\n locationMap,\r\n constants,\r\n permissions,\r\n combineText,\r\n adDisplayUrlService,\r\n odata,\r\n preferencesService,\r\n },\r\n data,\r\n scope,\r\n channel,\r\n downloadService,\r\n hasDataCallback,\r\n overallOptimizationScoreBar,\r\n isOptimizationScoreOn,\r\n dismissedData,\r\n newI18n,\r\n isDismissedTabEnabled,\r\n context,\r\n isAutoApplyRecommendationEnabled,\r\n } = this.props;\r\n\r\n let summaryCards = null;\r\n let autoApplySummaryCards = null;\r\n let autoApplyHeader = null;\r\n let emptyView = null;\r\n let modal = null;\r\n let toolbar = _.identity;\r\n\r\n const isDataEmpty = _.isEmpty(data);\r\n const isDismissedDataEmpty = _.isEmpty(dismissedData);\r\n\r\n let summaryCardDataOptOut;\r\n let summaryCardDataOptIn;\r\n\r\n hasDataCallback(!isDataEmpty);\r\n // hide if filter objects weren't passed in\r\n // hide toolbar when there is no data and there is no filter\r\n if (!isDataEmpty || this.props.hasFilter) {\r\n const downloadButton = (\r\n 
\r\n
\r\n \r\n
\r\n {titleContent}
\r\n {hasSubTitle &&\r\n{renderLearnMore(i18n, subTitleContent, channel)}
}\r\n\r\n {hasAction &&\r\n
\r\n \r\n \r\n
}\r\n {showOptimizationScoreEmptyView && isDismissedTabEnabled && !isDismissedDataEmpty &&\r\n \r\n \r\n
}\r\n \r\n { toolbarItemDownload}\r\n { toolbarItemFilter}\r\n
);\r\n }\r\n }\r\n\r\n const { imagePath } = constants;\r\n const emptyViewSharedParam = {\r\n isOptimizationScoreOn,\r\n overallOptimizationScoreBar,\r\n isDismissedDataEmpty,\r\n viewDismissedRecommendations: this.viewDismissedRecommendations,\r\n isDismissedTabEnabled,\r\n };\r\n\r\n if (isDataEmpty && this.props.hasFilter) {\r\n emptyView = {newI18n.getString(_TL_('Scheduled to auto-apply'))}
\r\n \r\n { this.initializeMiniGrid(); }}\r\n isAARSection\r\n />\r\n
\r\n ) : null;\r\n modal = (\r\n \r\n {channel === CHANNEL_TYPES.COMPETITION ? toolbar : null}\r\n {(!isAutoApplyRecommendationEnabled || !_.isEmpty(summaryCardDataOptOut)) && summaryCards}\r\n {autoApplyHeader}\r\n {autoApplySummaryCards}\r\n {modal}\r\n {!this.props.isInlineView && emptyView}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const FilteredSummaryView =\r\n withFilterCategory(summaryView);\r\n\r\nexport const SummaryView =\r\n withGetSummary(/* withDetails */ false)(summaryView);\r\n","import Backbone from 'backbone';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport _ from 'underscore';\r\n\r\nimport { SummaryView } from './summary-view';\r\n\r\nconst inContextVersion = '1.1';\r\n\r\nexport class InlineRecommendationCardView extends Backbone.View {\r\n constructor(options) {\r\n super(options);\r\n this.options = _.defaults(options, {\r\n viewSummary: _.noop,\r\n });\r\n this.isShowCard = this.options.isShowCard;\r\n }\r\n\r\n render() {\r\n const context = {\r\n Level: this.options.scope.levelAt,\r\n CampaignIds: this.options.scope.campaignId ? [Number(this.options.scope.campaignId)] : [],\r\n AdGroupIds: this.options.scope.adGroupId ? [Number(this.options.scope.adGroupId)] : [],\r\n 'ITC-Version': inContextVersion,\r\n };\r\n\r\n ReactDOM.render({label}
;\r\n } else {\r\n progressbarLabel = label;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nProgressBar.propTypes = {\r\n percentValue: PropTypes.number.isRequired,\r\n label: PropTypes.string.isRequired,\r\n useLabelOnTheRight: PropTypes.bool,\r\n};\r\n\r\nProgressBar.defaultProps = {\r\n useLabelOnTheRight: false,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { TooltipHost, TooltipOverflowMode, DirectionalHint } from '@bingads-webui-react/fabric-control';\r\n\r\nimport { ProgressBar } from './progress-bar';\r\n\r\nconst COLOR_HIGHLIGHT_VNEXT = '#107C10';\r\n\r\nexport const ActionTable = ({\r\n headers, values, highlights, alignments, columnWidths,\r\n}) => {\r\n if (!headers || headers.length === 0\r\n || (values && values.length !== 0 && values[0].length !== headers.length)\r\n || (highlights && headers.length !== highlights.length)) {\r\n return null;\r\n }\r\n\r\n const columnCount = headers.length;\r\n const columnWidth = `${100 / columnCount}%`;\r\n\r\n const textAlignArr = _.map(headers, (header, headerIndex) => {\r\n if (alignments && alignments[headerIndex]) {\r\n return alignments[headerIndex];\r\n }\r\n if (headerIndex === 0) {\r\n return 'left';\r\n }\r\n return 'right';\r\n });\r\n\r\n const columnWidthArr = _.map(headers, (header, headerIndex) => {\r\n if (columnWidths && columnWidths[headerIndex]) {\r\n return columnWidths[headerIndex];\r\n }\r\n return columnWidth;\r\n });\r\n\r\n const headerRow = _.map(headers, (header, headerIndex) => {\r\n const style = {\r\n width: columnWidthArr[headerIndex],\r\n textAlign: textAlignArr[headerIndex],\r\n };\r\n return (\r\n \r\n
\r\n {rightLabel}\r\n \r\n {progressbarLabel}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nActionTable.propTypes = {\r\n headers: PropTypes.arrayOf(PropTypes.string),\r\n values: PropTypes.arrayOf(PropTypes.array),\r\n highlights: PropTypes.arrayOf(PropTypes.bool),\r\n alignments: PropTypes.arrayOf(PropTypes.string),\r\n columnWidths: PropTypes.arrayOf(PropTypes.array),\r\n};\r\n\r\nActionTable.defaultProps = {\r\n columnWidths: null,\r\n alignments: null,\r\n headers: undefined,\r\n values: undefined,\r\n highlights: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { BackboneInstanceWrapper } from '@bingads-webui-react/backbone-instance-wrapper';\r\nimport { MAP_HEIGHT } from '@bingads-webui-campaign/recommendation-core';\r\n\r\nexport class BingMapView extends React.PureComponent {\r\n static propTypes = {\r\n data: PropTypes.objectOf(PropTypes.any).isRequired,\r\n locationMap: PropTypes.func.isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n const MapView = props.locationMap;\r\n this.mapView = new MapView({\r\n disableInfoBoxGroupList: [],\r\n disableActionGroupList: ['recommended', 'included', 'excluded'],\r\n mapHeight: MAP_HEIGHT,\r\n });\r\n this.refreshData();\r\n }\r\n\r\n refreshData = () => {\r\n const {\r\n data,\r\n } = this.props;\r\n\r\n this.mapView.render();\r\n _.each(data.included, (includedPoint) => {\r\n this.mapView.addRadiusTargetToMap(includedPoint, 'included');\r\n });\r\n _.each(data.excluded, (excludedPoint) => {\r\n this.mapView.addRadiusTargetToMap(excludedPoint, 'excluded');\r\n });\r\n this.mapView.updateRecommendedLocations(data.recommended);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\n\r\nexport class ToolbarButton extends React.PureComponent {\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n CHANNEL_TYPES,\r\n ADINSIGHT_LOG_ACTION_TYPE,\r\n DOWNLOAD_SCOPE,\r\n NOT_SUPPORT_DOWNLOAD_TYPES,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { ToolbarButton } from './toolbar-button';\r\n\r\nexport class DownloadToolbarButton extends React.PureComponent {\r\n static propTypes = {\r\n channel: PropTypes.string,\r\n campaignType: PropTypes.number,\r\n className: PropTypes.string,\r\n downloadService: PropTypes.objectOf(PropTypes.any),\r\n filterService: PropTypes.objectOf(PropTypes.any),\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n type: PropTypes.string,\r\n data: PropTypes.objectOf(PropTypes.any),\r\n logOpportunityEvent: PropTypes.func,\r\n context: PropTypes.shape({\r\n Level: PropTypes.string.isRequired,\r\n }).isRequired,\r\n title: PropTypes.string,\r\n isOptimizationScoreOn: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n channel: null,\r\n campaignType: null,\r\n className: 'btn btn-secondary',\r\n downloadService: null,\r\n filterService: null,\r\n type: null,\r\n data: null,\r\n logOpportunityEvent: null,\r\n title: undefined,\r\n isOptimizationScoreOn: false,\r\n };\r\n\r\n handleDownloadAll = () => {\r\n const self = this;\r\n self.props.downloadService.download({\r\n channel: self.props.channel,\r\n campaignType: self.props.campaignType,\r\n filterService: self.props.filterService,\r\n recommendationType: self.props.type,\r\n }).then(() => {\r\n _.each(_.omit(self.props.data, NOT_SUPPORT_DOWNLOAD_TYPES), (data) => {\r\n self.props.logOpportunityEvent({\r\n type: data.type,\r\n action: ADINSIGHT_LOG_ACTION_TYPE.DOWNLOAD,\r\n context: _.extend({\r\n Version: data.version,\r\n DownloadScope: DOWNLOAD_SCOPE.ALL,\r\n }, self.props.context),\r\n });\r\n });\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n i18n, downloadService, channel, isOptimizationScoreOn,\r\n } = this.props;\r\n\r\n if (downloadService == null) {\r\n return null;\r\n }\r\n\r\n let text;\r\n if (channel === CHANNEL_TYPES.COMPETITION) {\r\n text = i18n.getString('Details_View_Download_All');\r\n } else {\r\n text = i18n.getString('Details_View_Download_All_Rec');\r\n }\r\n\r\n const buttonProps = _.pick(this.props, 'className', 'disabled', 'title');\r\n const buttonIconClassName = 'iconba iconba-Download';\r\n return (\r\n \r\n \r\n {\r\n values.map(recommendation => (\r\n \r\n \r\n ))\r\n }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nAdsPreview.propTypes = {\r\n headers: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n values: PropTypes.arrayOf(PropTypes.object).isRequired,\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n","import React, { useCallback, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { InsightsButton } from '@bingads-webui/copilot-insights';\r\n\r\nimport { useGetSummarizeMessage } from './use-get-summarize-message';\r\n\r\nexport const CopilotSummaryButton = (props) => {\r\n const {\r\n campaignName,\r\n className,\r\n i18n,\r\n onRender,\r\n onClick,\r\n } = props;\r\n\r\n const getSummarizeMessage = useGetSummarizeMessage(i18n);\r\n useEffect(() => {\r\n onRender();\r\n }, [onRender]);\r\n\r\n const onSummarizeClick = useCallback(() => {\r\n const localizedMessage = getSummarizeMessage(campaignName);\r\n const detail = {\r\n eventType: 'message',\r\n eventData: {\r\n message: localizedMessage,\r\n pluginName: 'Summarize',\r\n },\r\n eventSource: 'summarize',\r\n };\r\n\r\n const toggleCopilotEvent = new CustomEvent('copilotToggleEvent', {\r\n detail,\r\n bubbles: true,\r\n cancelable: true,\r\n composed: false,\r\n });\r\n\r\n document.dispatchEvent(toggleCopilotEvent);\r\n onClick(localizedMessage);\r\n }, [campaignName, getSummarizeMessage, onClick]);\r\n\r\n return (\r\n {_.first(headers)}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {_.result(_.first(recommendation.Headlines), 'Text')}\r\n \r\n {recommendation.Headlines.length > 1 &&\r\n \r\n { `+ ${i18n.getString('Recommendation_Grid_Todo_More', { count: recommendation.Headlines.length - 1 })}` }\r\n \r\n }\r\n
\r\n \r\n \r\n {_.result(_.first(recommendation.Descriptions), 'Text')}\r\n \r\n {recommendation.Descriptions.length > 1 &&\r\n \r\n { `+ ${i18n.getString('Recommendation_Grid_Todo_More', { count: recommendation.Descriptions.length - 1 })}` }\r\n \r\n }\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const ReportingInsightsStepTwo = () => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Get AI-generated summaries and insights about your account or campaign performance. You can modify the scope of the summary by adjusting the navigation level filters, such as filtered campaigns, campaign type or by changing the date range.'))}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const ReportingInsightsTeachingBubbleConfig = {\r\n featureName: 'reporting-insights-welcome',\r\n userGovernanceConfig: defaultUserGovernanceConfig,\r\n steps: [\r\n {\r\n title: _TL_('Get a quick summary with key insights for your account or campaign performance.'),\r\n content: (\r\n {i18n.getString(_TL_('You can ask Copilot for a comprehensive summary and key insights on your account or campaign performance. Just provide your campaign name and specify the date range you want to cover for the summary.'))}\r\n
\r\n \r\n
\r\n {renderText && {renderText}}\r\n \r\n \r\n );\r\n};\r\n\r\nStaticItem.defaultProps = {\r\n renderText: null,\r\n};\r\n\r\nStaticItem.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getMenuItemStyles({}, {}),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n node: PropTypes.shape({\r\n Id: PropTypes.string,\r\n Name: PropTypes.string,\r\n glyphIconName: PropTypes.string,\r\n isSelected: PropTypes.bool,\r\n }).isRequired,\r\n renderText: PropTypes.string,\r\n onItemClick: PropTypes.func.isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n NavigationRefresh: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nexport default withPermissions(withDefaultStyles(StaticItem, getMenuItemStyles));\r\n","export const getMainMenuStyles = (mainMenu, { palette = {} }) => ({\r\n mainMenuContainer: {\r\n transition: 'width 0.2s',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n flex: '1 1 1px',\r\n },\r\n hidden: {\r\n display: 'none',\r\n },\r\n menuList: {\r\n listStyle: 'none',\r\n paddingTop: 8,\r\n // borderTop: `solid 1px ${palette.neutralQuaternaryAlt}`,\r\n },\r\n divider: {\r\n borderTop: `solid 1px ${palette.mainMenuHoverBackground}`,\r\n },\r\n majorComponentsContainer: {\r\n borderTop: 'none',\r\n },\r\n container: {\r\n display: 'flex',\r\n height: '100%',\r\n position: 'static',\r\n },\r\n});\r\n\r\nexport const getMenuItemListStyles = () => ({\r\n menuList: {\r\n '.static-list-wrapper &': {\r\n borderTop: 'none',\r\n },\r\n listStyle: 'none',\r\n },\r\n menuListBorder: {\r\n borderTop: 'solid 1px #484644',\r\n },\r\n groupHeader: {\r\n marginLeft: 12,\r\n marginTop: 10,\r\n marginBottom: 8,\r\n },\r\n recentReportsLabel: {\r\n margin: '10px 16px',\r\n fontSize: '12px',\r\n },\r\n recentReportLightLabel: {\r\n color: '#FFFFFF',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { isNavigationRefreshOn } from '@bingads-webui-react/preference-utility';\r\nimport StaticItem from './StaticItem';\r\nimport { getMenuItemListStyles } from '../styles/main-menu-styles';\r\n\r\nclass StaticItemList extends React.PureComponent {\r\n render() {\r\n const {\r\n classes,\r\n items,\r\n isExpanded,\r\n onMenuItemClick,\r\n classList,\r\n permissions,\r\n } = this.props;\r\n const isNavRefresh = isNavigationRefreshOn(permissions);\r\n const cnames = classNames(['main-menu-link-list',\r\n classes.menuList,\r\n isNavRefresh ? null : classes.menuListBorder,\r\n ...classList]);\r\n\r\n return (\r\n {\r\n isExpanded &&\r\n
\r\n );\r\n }\r\n}\r\n\r\nStaticItemList.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getMenuItemListStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n classList: PropTypes.arrayOf(PropTypes.string),\r\n isExpanded: PropTypes.bool.isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.string,\r\n Name: PropTypes.string.isRequired,\r\n })),\r\n onMenuItemClick: PropTypes.func.isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n NavigationRefresh: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nStaticItemList.defaultProps = {\r\n items: [],\r\n classList: [],\r\n};\r\n\r\nexport const StyledStaticItemList = withPermissions(withDefaultStyles(StaticItemList, getMenuItemListStyles));\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { isNavigationRefreshOn } from '@bingads-webui-react/preference-utility';\r\nimport { getMenuItemStyles } from '../styles/menu-item-styles';\r\nimport { abbreviateDynamicItemName } from '../helpers/node-helper';\r\n\r\nconst DynamicItemIcon = ({\r\n classes,\r\n icon,\r\n iconStatusClassName,\r\n node,\r\n isExpanded,\r\n permissions,\r\n}) => {\r\n const isNavRefresh = isNavigationRefreshOn(permissions);\r\n if (isExpanded) {\r\n return (\r\n \r\n {items.map(item =>\r\n (\r\n
\r\n }\r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nDynamicItemIcon.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getMenuItemStyles({}, {}),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n icon: PropTypes.string,\r\n iconStatusClassName: PropTypes.string,\r\n isExpanded: PropTypes.bool.isRequired,\r\n node: PropTypes.shape({\r\n Name: PropTypes.string,\r\n isSelected: PropTypes.bool,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n NavigationRefresh: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nDynamicItemIcon.defaultProps = {\r\n icon: 'collapsed',\r\n iconStatusClassName: 'DynamicIcon',\r\n};\r\n\r\nconst Wrapped = withPermissions(DynamicItemIcon);\r\n\r\nexport { Wrapped as DynamicItemIcon };\r\n","import classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport _ from 'underscore';\r\nimport { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Button, OverlayTrigger, Tooltip } from '@bingads-webui-react/primitive';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { isNavigationRefreshOn } from '@bingads-webui-react/preference-utility';\r\nimport { getMenuItemStyles } from '../styles/menu-item-styles';\r\nimport { GetNodeClassNames } from '../helpers/node-helper';\r\nimport { DynamicItemIcon } from './DynamicItemIcon';\r\n\r\nconst DynamicItem = ({\r\n classes,\r\n node,\r\n renderText,\r\n onItemClick,\r\n isExpanded,\r\n isRunning,\r\n permissions,\r\n}) => {\r\n const isNavRefresh = isNavigationRefreshOn(permissions);\r\n const cnames = classNames([GetNodeClassNames(node, classes, isNavRefresh)]);\r\n\r\n const icon = '';\r\n const iconStatusClassName = '';\r\n\r\n return (\r\n \r\n {abbreviateDynamicItemName(node.Name)}\r\n
\r\n \r\n {isExpanded && items.length > 0 &&\r\n
\r\n );\r\n }\r\n}\r\n\r\nDynamicItemList.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getMenuItemListStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n isExpanded: PropTypes.bool.isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number.isRequired,\r\n Name: PropTypes.string.isRequired,\r\n State: PropTypes.string.isRequired,\r\n })),\r\n onMenuItemClick: PropTypes.func,\r\n i18n: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n NavigationRefresh: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nDynamicItemList.defaultProps = {\r\n items: [],\r\n onMenuItemClick: () => { },\r\n};\r\n\r\nexport const StyledDynamicItemList = withPermissions(withDefaultStyles(DynamicItemList, getMenuItemListStyles));\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport _ from 'underscore';\r\nimport { Mode } from '@bingads-webui-react/app-layout-container';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { StyledCollapsibleSideBar } from '@bingads-webui-campaign-react/main-menu';\r\nimport { isNavigationRefreshOn } from '@bingads-webui-react/preference-utility';\r\nimport { StaticItemList, DynamicItemList } from './components';\r\nimport { getMainMenuStyles } from './styles/main-menu-styles';\r\n\r\nconst staticMenuItems = [\r\n {\r\n Id: 'defualt-reports-button',\r\n Name: _TL_('Default reports'),\r\n glyphIconName: 'ba-ReportDocument',\r\n logCategory: 'DefaultReport', // for telemetry\r\n pathname: '/campaign/vnext/reports-v4/default-reports',\r\n },\r\n {\r\n Id: 'my-reports-button',\r\n Name: _TL_('My reports'),\r\n glyphIconName: 'ba-Configuration',\r\n logCategory: 'SavedReport', // for telemetry\r\n pathname: '/campaign/vnext/reports-v4/my-reports',\r\n },\r\n];\r\n\r\nconst staticMenuItemsCustomReportBuilder = [\r\n {\r\n Id: 'home-button',\r\n Name: _TL_('Home'),\r\n glyphIconName: 'ba-Home',\r\n logCategory: 'ReportHome', // for telemetry\r\n pathname: '/campaign/vnext/reporting/home',\r\n },\r\n {\r\n Id: 'templates-button',\r\n Name: _TL_('Templates'),\r\n glyphIconName: 'ba-ReportDocument',\r\n logCategory: 'ReportTemplates', // for telemetry\r\n pathname: '/campaign/vnext/reporting/templates',\r\n },\r\n];\r\n\r\nfunction isItemSelectedByPath(currentPath, itemPath) {\r\n return currentPath === itemPath;\r\n}\r\n\r\nclass ReportsV4MainMenuView extends React.PureComponent {\r\n dealLegacyItems = (items) => {\r\n let currentItems = items;\r\n if (window.location.pathname.includes('reports-v4/create/pricefeedstatusreport')) {\r\n currentItems = items.filter(report => report.ReportType !== 'UIPriceFeedStatusReport');\r\n currentItems.unshift({\r\n Name: 'Price feed status',\r\n ReportType: 'UIPriceFeedStatusReport',\r\n });\r\n }\r\n if (window.location.pathname.includes('reports-v4/create/matchingreport')) {\r\n currentItems = items.filter(report => report.ReportType !== 'UIMatchingReport');\r\n currentItems.unshift({\r\n Name: 'Matching',\r\n ReportType: 'UIMatchingReport',\r\n });\r\n }\r\n return currentItems;\r\n };\r\n generateStaticItems = (items, i18n) => {\r\n const { location } = this.props;\r\n\r\n return items.map(item => ({\r\n ...item,\r\n Name: i18n.getString(item.Name),\r\n isSelected: isItemSelectedByPath(location.pathname, item.pathname),\r\n }));\r\n };\r\n\r\n generateDynamicItems = (items, i18n, reportTypeMapping, isCustomReportBuilder) => {\r\n const { location } = this.props;\r\n const dynamicItems = this.dealLegacyItems(items);\r\n const results = dynamicItems.map((item) => {\r\n const result = {\r\n ...item,\r\n logCategory: 'RecentReport', // for telemetry\r\n };\r\n\r\n if (item.Id) { // Saved report\r\n result.pathname = isCustomReportBuilder ? `/campaign/vnext/reporting/edit/${item.Id}` : `/campaign/vnext/reports-v4/edit/${item.Id}`;\r\n } else { // Default report\r\n const config = reportTypeMapping[item.ReportType];\r\n if (!config) {\r\n // The report is not available due to permission or scope\r\n return null;\r\n }\r\n result.Name = i18n.getString(config.name);\r\n result.pathname = `/campaign/vnext/${config.route}`;\r\n }\r\n\r\n result.isSelected = isItemSelectedByPath(location.pathname, result.pathname);\r\n\r\n return result;\r\n });\r\n\r\n return _.compact(results);\r\n };\r\n\r\n render() {\r\n const {\r\n mode,\r\n i18n,\r\n onStaticItemClick,\r\n onDynamicItemClick,\r\n reports,\r\n onToggle,\r\n isPanelMode,\r\n reportTypeMapping,\r\n permissions,\r\n } = this.props;\r\n const isNavRefresh = isNavigationRefreshOn(permissions);\r\n const isExpanded = isPanelMode || mode === Mode.Expanded || isNavRefresh;\r\n const isCustomReportBuilder = permissions && permissions.dynamic && permissions.dynamic.CustomReports;\r\n const isCustomReportBuilderPhaseTwo = permissions && permissions.dynamic && permissions.dynamic.CustomReportBuilder;\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n {i18n.getString(_TL_('Recent reports'))}\r\n
\r\n {items.map(report =>\r\n (\r\n