\r\n updateToWaterfallFilter(props, dateFromDatePicker)}\r\n onSwitchCompare={onSwitchCompare}\r\n dateRangeLogger={dateRangeLogger}\r\n disableCompare={disableCompare}\r\n rangeIds={rangeIds}\r\n minDate={minDate}\r\n />);\r\n});\r\n\r\nDatePicker.propTypes = {\r\n dateFilter: PropTypes.shape({\r\n RangeStartDate: PropTypes.string,\r\n RangeEndDate: PropTypes.string,\r\n RangeId: PropTypes.number,\r\n Rangelcid: PropTypes.number,\r\n RangeIndex: PropTypes.number,\r\n RangeDays: PropTypes.number,\r\n compared: PropTypes.shape({\r\n start: PropTypes.instanceOf(Date),\r\n end: PropTypes.instanceOf(Date),\r\n formattedStart: PropTypes.string,\r\n formattedEnd: PropTypes.string,\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n }),\r\n }),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n // eslint-disable-next-line\r\n lcid: PropTypes.number.isRequired,\r\n timeZone: PropTypes.number.isRequired,\r\n dateFormat: PropTypes.string.isRequired,\r\n onSwitchCompare: PropTypes.func.isRequired,\r\n // eslint-disable-next-line react/forbid-prop-types\r\n instrumentation: PropTypes.object.isRequired,\r\n disableCompare: PropTypes.bool,\r\n serverContext: PropTypes.shape({\r\n DynamicPermissions: PropTypes.shape({\r\n ImprovedDateFilter: PropTypes.bool,\r\n }),\r\n }),\r\n rangeIds: PropTypes.object,\r\n minDate: PropTypes.instanceOf(CivilDate),\r\n};\r\n\r\nDatePicker.defaultProps = {\r\n dateFilter: {},\r\n disableCompare: false,\r\n minDate: null,\r\n serverContext: {},\r\n rangeIds: {},\r\n};\r\n\r\nexport const DatePickerWithScope = withInstrumentation(withScope(DatePicker));\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { withSiteMap, getRoutePathById } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { QueryParam, withScope } from '@bingads-webui-react/scope-service';\r\nimport { Callout } from '@bingads-webui-react/callout';\r\n\r\nimport { getHistoryButtonStyles } from '../styles/history-button-styles';\r\n\r\nfunction historyClickHandler(siteMap, scope, accountId) {\r\n scope.save(getRoutePathById(\r\n siteMap,\r\n _.isUndefined(accountId) ?\r\n 'mcc-recommendation-history' :\r\n 'baa-recommendation-history'\r\n ));\r\n}\r\n\r\nclass historyButton extends React.Component {\r\n state = { showPopover: false };\r\n\r\n toggle = () => {\r\n this.setState(state => ({ showPopover: !state.showPopover }));\r\n }\r\n\r\n render() {\r\n const {\r\n i18n, scope, siteMap, classes,\r\n } = this.props;\r\n const { aid: accountId } = scope.values;\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('My applied recommendation history'))}\r\n }\r\n placement=\"bottom\"\r\n closeButton={false}\r\n >\r\n historyClickHandler(siteMap, scope, accountId)}\r\n onFocus={this.toggle}\r\n onBlur={this.toggle}\r\n onMouseOver={this.toggle}\r\n onMouseOut={this.toggle}\r\n className={classes.entityContentRecommendationHistory}\r\n aria-label={i18n.getString(_TL_('My Applied Recommendation History'))}\r\n >\r\n
\r\n );\r\n }\r\n}\r\n\r\nhistoryButton.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getHistoryButtonStyles({}, {}),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n siteMap: PropTypes.arrayOf(PropTypes.any).isRequired,\r\n};\r\n\r\nconst HistoryButton = withI18nConsumer(withSiteMap(withScope(withDefaultStyles(historyButton, getHistoryButtonStyles))));\r\n\r\nexport {\r\n HistoryButton,\r\n};\r\n","export const getHistoryButtonStyles = (_, { palette = {} }) => ({\r\n recommendationHistoryItem: {\r\n position: 'relative',\r\n top: '5px',\r\n marginRight: '19px',\r\n textAlign: 'right',\r\n },\r\n entityContentRecommendationHistory: {\r\n border: 'none',\r\n cursor: 'pointer',\r\n overflow: 'hidden',\r\n outline: 'none',\r\n backgroundColor: 'Transparent',\r\n backgroundRepeat: 'no-repeat',\r\n },\r\n entityIcon: {\r\n position: 'relative',\r\n lineHeight: '16px',\r\n fontSize: '16px',\r\n color: palette.themePrimary,\r\n },\r\n entityContent: {\r\n lineHeight: '16px',\r\n fontSize: '12px',\r\n color: palette.neutralPrimary,\r\n whiteSpace: 'nowrap',\r\n },\r\n recommendationHistoryPopover: {\r\n '& .popover-content': {\r\n padding: '11px 18px',\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { withSiteMap, getRoutePathById } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { QueryParam, withScope } from '@bingads-webui-react/scope-service';\r\nimport { Callout } from '@bingads-webui-react/callout';\r\nimport { StyledMenuItemTag } from '@bingads-webui-react/menu-item-tag';\r\n\r\nimport { getAutoApplyItemButtonStyles } from '../styles/auto-apply-button-styles';\r\n\r\nfunction autoApplyClickHandler(siteMap, scope) {\r\n scope.save(getRoutePathById(\r\n siteMap,\r\n 'recommendation-auto-apply-settings'\r\n ));\r\n}\r\n\r\nclass autoApplyButton extends React.Component {\r\n state = { showPopover: false };\r\n\r\n toggle = () => {\r\n this.setState(state => ({ showPopover: !state.showPopover }));\r\n }\r\n\r\n render() {\r\n const showTag = {\r\n text: _TL_('BETA'),\r\n expDate: new Date('2023/03/31'),\r\n };\r\n const {\r\n i18n, scope, siteMap, classes,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
{i18n.getString(_TL_('Auto-apply setting'))}\r\n }\r\n placement=\"bottom\"\r\n closeButton={false}\r\n >\r\n autoApplyClickHandler(siteMap, scope)}\r\n onFocus={this.toggle}\r\n onBlur={this.toggle}\r\n onMouseOver={this.toggle}\r\n onMouseOut={this.toggle}\r\n className={classes.entityContentRecommendationAutoApply}\r\n aria-label={i18n.getString(_TL_('Auto-apply setting'))}\r\n >\r\n \r\n
\r\n \r\n this.props.updateWaterfallFilter({\r\n filterType: WaterfallFilterType.DateFilter,\r\n filter: data,\r\n })}\r\n serverContext={this.props.serverContext}\r\n {...(this.props.location.pathname === '/campaign/vnext/uettag' || this.props.location.pathname === '/campaign/vnext/uettaginsights' ? {\r\n rangeIds: [\r\n RANGES.Custom,\r\n RANGES.Today,\r\n RANGES.Yesterday,\r\n RANGES.ThisWeek,\r\n RANGES.ThisWeekMon,\r\n RANGES.Last7Days,\r\n RANGES.LastWeek,\r\n RANGES.LastWeekMon,\r\n RANGES.Last14Days,\r\n RANGES.ThisMonth,\r\n RANGES.LastMonth,\r\n RANGES.Last30Days,\r\n RANGES.Last3Months,\r\n RANGES.Last6Months,\r\n RANGES.EntireTime,\r\n ],\r\n } : {})}\r\n minDate={civilMinDate}\r\n />\r\n
\r\n ), null);\r\n\r\n return (\r\n
\r\n ), null);\r\n\r\n return (\r\n \r\n {this.props.renderDownloadButton(true)}\r\n
\r\n );\r\n\r\n renderAutoApplyButton = () => (\r\n \r\n );\r\n\r\n render() {\r\n this.tabItems = [];\r\n if (this.props.singleTabMode) {\r\n const selectedleafItem = findSelectedNode(this.props.siteMap);\r\n if (selectedleafItem) {\r\n this.tabItems = [selectedleafItem];\r\n }\r\n } else {\r\n this.selectedPageMenu = getSelectedItemsFromMap(this.props.siteMap);\r\n if (this.selectedPageMenu) {\r\n this.tabItems = this.selectedPageMenu.children;\r\n }\r\n }\r\n\r\n const { getTabItems } = this.props;\r\n this.tabItems = getTabItems(this.tabItems);\r\n\r\n // in the case singleTabMode is set\r\n // both selectedTabItem and availableTabItems would be the selected leaf item\r\n this.selectedTabItem = getSelectedItemsFromMap(this.tabItems);\r\n this.availableTabItems = getAvailableItemsFromMap(this.tabItems);\r\n const datePickerShowOrHideClass = this.props.showDatePicker ? 'datePickerShow' : 'datePickerHide';\r\n const disabledDatePickerShowOrHideClass = this.props.showDisabledDatePicker ? 'disabledDatePickerShow' : 'disabledDatePickerHide';\r\n const currDatePickerWidth = $('.compared-date-range-picker button')[0] ? $('.compared-date-range-picker button')[0].clientWidth + 10 : 0;\r\n this.updateDatePickerWidth(currDatePickerWidth);\r\n const datePickerOffset = this.props.showDatePicker ? this.state.datePickerWidth : 0;\r\n const disabledDatePickerOffset = this.props.showDisabledDatePicker ? this.state.datePickerWidth : 0;\r\n const AutoApplyButtonWidth = this.props.showAutoApplyButton && $('.recommendation-auto-apply-item')[0] ?\r\n $('.recommendation-auto-apply-item')[0].clientWidth + 10 : 0;\r\n const AutoApplyButtonOffset = this.props.showAutoApplyButton ? AutoApplyButtonWidth : 0;\r\n const historyButtonWidth = this.props.showHistoryButton && $('.recommendation-history-item')[0] ?\r\n $('.recommendation-history-item')[0].clientWidth + 10 : 0;\r\n const historyButtonOffset = this.props.showHistoryButton ? historyButtonWidth : 0;\r\n const downloadButtonWidth = this.props.showDownloadButton && $('.recommendation-download-button')[0] ?\r\n $('.recommendation-download-button')[0].clientWidth + 10 : 0;\r\n const downloadButtonOffset = this.props.showDownloadButton ? downloadButtonWidth : 0;\r\n const layout = { config: this.props.layoutConfig };\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nSubPageMenuInternal.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getSubPageMenuStyles({}, {}),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n updateWaterfallFilter: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n changeLayout: PropTypes.func.isRequired,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.object.isRequired,\r\n CurrentCustomer: PropTypes.object.isRequired,\r\n CurrentUser: PropTypes.object.isRequired,\r\n DynamicPermissions: PropTypes.object.isRequired,\r\n }).isRequired,\r\n showDatePicker: PropTypes.bool,\r\n showDisabledDatePicker: PropTypes.bool,\r\n showHistoryButton: PropTypes.bool,\r\n showAutoApplyButton: PropTypes.bool,\r\n showDownloadButton: PropTypes.bool,\r\n siteMap: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string,\r\n })).isRequired,\r\n mode: PropTypes.string.isRequired,\r\n singleTabMode: PropTypes.bool,\r\n initialResetLayout: PropTypes.bool,\r\n forceResetLayout: PropTypes.bool,\r\n getTabItems: PropTypes.func,\r\n disableCompare: PropTypes.bool,\r\n onTabItemRender: PropTypes.func,\r\n renderExtraContent: PropTypes.func,\r\n renderDownloadButton: PropTypes.func,\r\n minDate: PropTypes.shape({\r\n year: PropTypes.number,\r\n month: PropTypes.number,\r\n day: PropTypes.number,\r\n }),\r\n selectedParent: PropTypes.string,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func.isRequired,\r\n trace: PropTypes.func.isRequired,\r\n }),\r\n layoutConfig: PropTypes.shape({\r\n copilot: PropTypes.shape({\r\n mode: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n permissions: PropTypes.shape({ dynamic: PropTypes.shape({}) }).isRequired,\r\n};\r\n\r\nconst SubpageMenuInternalWithStyle = withDefaultStyles(SubPageMenuInternal, getSubPageMenuStyles);\r\n\r\nconst SubPageMenu = props => (\r\n \r\n {({ config, change }) => ( \r\n);\r\n\r\nexport const StyledSubPageMenu =\r\n withActivityContext(withGlobalFilter(withScope(withI18nConsumer(SubPageMenu))));\r\n","const pathNamePrefix = '/campaign/vnext/';\r\n\r\nexport const getPathNameOfSubPageItem = subPageItem =>\r\n `${pathNamePrefix}${subPageItem.route}`;\r\n","import {\r\n comparedPickerSharedStyle,\r\n} from '@bingads-webui-react/quick-date-left-right-picker';\r\n\r\nexport const getSubPageMenuStyles = (subPageMenu, { palette = {} }) => ({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginLeft: 0,\r\n height: 58,\r\n overflow: 'auto',\r\n whiteSpace: 'nowrap',\r\n alignItems: 'stretch',\r\n backgroundColor: palette.white,\r\n '& .overflow-tab-bar-items': {\r\n paddingTop: 10,\r\n '& .icon-button': {\r\n backgroundColor: palette.white,\r\n },\r\n },\r\n '&.expanded': {\r\n height: 72,\r\n },\r\n },\r\n pickerContainer: {\r\n marginTop: '13px',\r\n marginBottom: '12px',\r\n marginRight: '16px',\r\n marginLeft: 'auto',\r\n '&.expanded': {\r\n marginTop: '8px',\r\n },\r\n '&.with-left-margin': {\r\n marginLeft: 8,\r\n },\r\n '& .history-item': {\r\n fontSize: '18px',\r\n\r\n '& button.history': {\r\n border: 'none',\r\n backgroundColor: 'transparent',\r\n '& .iconba-History': {\r\n marginRight: '10px',\r\n fontSize: '18px',\r\n color: palette.blue,\r\n },\r\n },\r\n },\r\n '& .recommendation-download-button': {\r\n top: 2,\r\n backgroundColor: 'transparent',\r\n border: 'none',\r\n fontSize: 18,\r\n padding: 'unset',\r\n minWidth: 'unset',\r\n height: 'fit-content',\r\n color: palette.themeDarkAlt,\r\n },\r\n '& .recommendation-auto-apply-item': {\r\n top: 5,\r\n position: 'relative',\r\n },\r\n },\r\n pickerQuickContainer: {\r\n ...(comparedPickerSharedStyle || {}),\r\n },\r\n subMenuSeperator: {\r\n height: '1px',\r\n marginLeft: '0px',\r\n border: 'none',\r\n backgroundColor: palette.neutralLighter,\r\n },\r\n summaryButton: {\r\n display: 'inline',\r\n verticalAlign: 'top !important',\r\n marginTop: '4px !important',\r\n marginBottom: '4px !important',\r\n },\r\n});\r\n","/* eslint-disable no-param-reassign */\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect } from 'react';\r\nimport { siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { ScopeSelector } from '@bingads-webui-react/scope-selector';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { findParentNodeByLevel } from './utils';\r\n\r\nexport const Loader = (props) => {\r\n const { siteMap, updateAvailability, level } = props;\r\n\r\n const selectedParent = findParentNodeByLevel(siteMap, level); // level index 0 for PageMenu, 1 for SubPageMenu and 2 for subTab\r\n const available = !_.isEmpty(selectedParent);\r\n\r\n useEffect(() => {\r\n updateAvailability(available);\r\n });\r\n\r\n if (available) {\r\n const levelItems = selectedParent.children.map(child => ({\r\n name: props.i18n.getString(child.name),\r\n href: `/campaign/vnext/${child.route}`,\r\n ariaDescription: child.ariaDescription ? props.i18n.getString(child.ariaDescription) : '',\r\n }));\r\n\r\n const currentPath = props.location.pathname;\r\n const currentIndex = levelItems.findIndex(item => item.href === currentPath);\r\n\r\n const onItemChange = ({ index }) => {\r\n props.scope.save(levelItems[index].href);\r\n };\r\n\r\n const pillControlParams = { levelIndex: currentIndex, onItemChange, levelItems };\r\n return \r\n \r\n));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n findSiteMap,\r\n siteMapPropType,\r\n} from '@bingads-webui-campaign-react/with-site-map';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ACCOUNT_MODE } from '@bingads-webui-campaign/campaign-ui-common';\r\n\r\nexport class SmartLastURLInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n lastUrl: this.formatUrl('', props.scope, false),\r\n };\r\n }\r\n\r\n componentDidUpdate() {\r\n this.updateLastUrl();\r\n }\r\n\r\n leafCondition = item => item.children.length === 0 && item.selected === true;\r\n\r\n formatUrl = (url, scope, backToSmartCampaign = false) => {\r\n if (backToSmartCampaign && scope.values.aid) { // back to smart campaign\r\n return `/campaign/smart?uid=${scope.values.uid}&cid=${scope.values.cid}&aid=${scope.values.aid}`;\r\n }\r\n if (scope.values.aid) { // when we have aid, we can fallback to campaign pages and it will go to default landing apge.\r\n return `/campaign/vnext/${url}?uid=${scope.values.uid}&cid=${scope.values.cid}&aid=${scope.values.aid}`;\r\n } else if (url === '') { // If no aid or url (means user directely landed here) we go to account summary pages.\r\n return `/campaign/vnext/accounts?uid=${scope.values.uid}&cid=${scope.values.cid}`;\r\n }\r\n return `/campaign/vnext/${url}?uid=${scope.values.uid}&cid=${scope.values.cid}`; // the last url the user visited, works for both campaign and accounts\r\n }\r\n\r\n updateLastUrl = () => {\r\n const {\r\n siteMap, scope, serverContext, allowBackToSmartCampaign,\r\n } = this.props;\r\n const { CurrentAccount } = serverContext;\r\n if (CurrentAccount && CurrentAccount.AccountMode === ACCOUNT_MODE.SMART && allowBackToSmartCampaign) {\r\n this.setState({\r\n lastUrl: this.formatUrl('', scope, true),\r\n });\r\n } else {\r\n const selectedChildItem = findSiteMap(siteMap, this.leafCondition);\r\n if (selectedChildItem) {\r\n this.setState({\r\n lastUrl: this.formatUrl(selectedChildItem.route, scope, false),\r\n });\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.render(this.state)}\r\n \r\n );\r\n }\r\n}\r\n\r\nSmartLastURLInternal.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n render: PropTypes.func.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n serverContext: PropTypes.shape({\r\n }).isRequired,\r\n allowBackToSmartCampaign: PropTypes.bool,\r\n};\r\n\r\nSmartLastURLInternal.defaultProps = {\r\n allowBackToSmartCampaign: false,\r\n};\r\n\r\nexport const SmartLastURL = withServerContext(SmartLastURLInternal);\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n processor,\r\n withCampaignSiteMap,\r\n withAccountsSiteMap,\r\n} from '@bingads-webui-campaign-react/with-site-map';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { SmartLastURL } from './smart-last-url';\r\n\r\nexport const withLastURL = (WrappedComponent) => {\r\n const LastCampaignURL = withCampaignSiteMap(SmartLastURL, [processor.processPath]);\r\n const LastAccountsURL = withAccountsSiteMap(SmartLastURL, [processor.processPath]);\r\n class LastUrl extends React.PureComponent {\r\n renderWrappedComponent = (buttonText, lastUrl) => {\r\n const {\r\n backButtonUrl,\r\n backButtonText,\r\n i18n,\r\n ...others\r\n } = this.props;\r\n\r\n return (\r\n this.renderWrappedComponent('Back to campaigns', lastUrlState.lastUrl)} allowBackToSmartCampaign={allowBackToSmartCampaign} />\r\n );\r\n }\r\n\r\n return (\r\n this.renderWrappedComponent('Back to accounts', lastUrlState.lastUrl)} allowBackToSmartCampaign={allowBackToSmartCampaign} />\r\n );\r\n }\r\n }\r\n\r\n LastUrl.propTypes = {\r\n backButtonUrl: PropTypes.string,\r\n backButtonText: PropTypes.string,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n allowBackToSmartCampaign: PropTypes.bool,\r\n };\r\n\r\n LastUrl.defaultProps = {\r\n backButtonUrl: '',\r\n backButtonText: '',\r\n allowBackToSmartCampaign: false,\r\n };\r\n\r\n return withI18nConsumer(withScope(LastUrl));\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useCampaignScopeBarStyles = makeStyles({\r\n scopeBarLeftContent: {\r\n flexShrink: 1,\r\n minWidth: '50px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start',\r\n ...shorthands.gap('10px'),\r\n },\r\n});\r\n\r\nexport const useCampaignStatusMenuButtonStyles = makeStyles({\r\n menuButton: {\r\n fontWeight: 'normal',\r\n },\r\n});\r\n\r\nexport const useStatusIconStyles = makeStyles({\r\n activeStatus: {\r\n color: tokens.colorPaletteGreenForeground1,\r\n fontSize: '10px',\r\n },\r\n pausedStatus: {\r\n color: tokens.colorNeutralForeground3,\r\n fontSize: '10px',\r\n },\r\n});\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { CircleFilled, PauseFilled } from '@fluentui/react-icons';\r\nimport { useStatusIconStyles } from '../styles';\r\n\r\nexport const StatusIcon = ({ status }) => {\r\n const styles = useStatusIconStyles();\r\n\r\n if (!status) return null;\r\n\r\n if (status === 'Active') {\r\n return \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nCampaignStatusMenuButton.propTypes = {\r\n id: PropTypes.number.isRequired,\r\n status: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nCampaignStatusMenuButton.defaultProps = {\r\n\r\n};\r\n","import React, { useContext, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n triggerMultiStepTeachingBubbleWithLock,\r\n MultiStepTeachingBubbleContext,\r\n} from '@bingads-webui-campaign-react/multi-step-teaching-bubble';\r\nimport { TeachingBubbleConfigs } from '@bingads-webui-campaign-react/navigation-refresh-teaching-bubble-config';\r\nimport { LayoutSizeScale, useLayoutResizeObserver } from '@bingads-webui-fluent-component/layout-size';\r\nimport { LayoutContext, Mode } from '@bingads-webui-react/app-layout-container';\r\nimport { getParameter } from '@bingads-webui/url-util';\r\n\r\nconst getModeByLayoutSize = (layoutSize) => {\r\n const result = LayoutSizeScale[layoutSize] >= LayoutSizeScale.XL;\r\n\r\n return result;\r\n};\r\n\r\nexport const BubbleRenderer = ({ isAccountScope, entityCount }) => {\r\n const bubbleContext = useContext(MultiStepTeachingBubbleContext);\r\n const [layoutSize, setLayoutSize] = React.useState('S');\r\n useLayoutResizeObserver(setLayoutSize);\r\n const largeSize = getModeByLayoutSize(layoutSize);\r\n const { config: layoutConfig } = useContext(LayoutContext);\r\n const ise2etest = getParameter('ise2etest') === 'true';\r\n const showForTest = getParameter('showNavRefreshTeachingBubble') === 'true';\r\n\r\n const showBubble = useMemo(\r\n () => isAccountScope && entityCount > 1 && largeSize &&\r\n layoutConfig.menu.mode === Mode.Expanded &&\r\n (!ise2etest || showForTest),\r\n [entityCount, isAccountScope, largeSize, layoutConfig.menu.mode, ise2etest, showForTest]\r\n );\r\n\r\n useEffect(() => {\r\n if (showBubble) {\r\n triggerMultiStepTeachingBubbleWithLock({\r\n ...bubbleContext,\r\n featureName: TeachingBubbleConfigs.featureName,\r\n });\r\n }\r\n }, [bubbleContext, showBubble]);\r\n\r\n return
;\r\n};\r\n\r\nBubbleRenderer.propTypes = {\r\n isAccountScope: PropTypes.bool,\r\n entityCount: PropTypes.number.isRequired,\r\n};\r\n\r\nBubbleRenderer.defaultProps = {\r\n isAccountScope: false,\r\n};\r\n\r\n","import PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport React, { useMemo, useContext, useCallback, useEffect, useState } from 'react';\r\nimport { showPausedCampaignNotifications } from '@bingads-webui-campaign/import-shared-utils';\r\nimport {\r\n ScopeBar,\r\n ScopeFilters,\r\n ScopeFiltersOverflow,\r\n ScopeSelectorDropdown,\r\n ScopeSelector,\r\n ScopeBarLeftContent,\r\n useFocusedEntityContext,\r\n} from '@bingads-webui-fluent-component/scope-selector-menu';\r\nimport { withInstrumentation } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { setCampaignTypes } from '@bingads-webui-campaign-react/with-campaign-type';\r\nimport {\r\n getCurrentScopeFromService,\r\n Scope,\r\n CampaignType,\r\n StatusWaterfallFilterOptions\r\n} from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport {\r\n withCampaignData,\r\n withCampaignFilter,\r\n useCampaignFilter,\r\n getScopeAdder,\r\n getScopeRemover,\r\n shouldRenderAdGroupFilter,\r\n CampaignFilters,\r\n AdGroupStatusFilter,\r\n CampaignTypeFilter,\r\n CampaignStatusFilter,\r\n Campaign,\r\n} from '@bingads-webui-campaign-react/scope-selector';\r\nimport { withComponentErrorLogging } from '@bingads-webui-campaign-react/global-error-options';\r\nimport {\r\n CopilotSummaryButton,\r\n getIsCopilotSummaryButtonEnabled,\r\n getIsInCampaignsOrOverviewPage,\r\n} from '@bingads-webui-campaign-react/reporting-insights-components';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { CampaignStatusMenuButton } from './campaign-status-menu-button/campaign-status-menu-button';\r\nimport { BubbleRenderer } from './teaching-bubble';\r\nimport { useCampaignScopeBarStyles } from './styles';\r\n\r\nconst CampaignScopeBar = ({ isLoading, ...rest }) => {\r\n const {\r\n scope,\r\n i18n,\r\n instrumentation,\r\n rootEntityTypeDisplayName,\r\n selectedEntity,\r\n entityList,\r\n permissions,\r\n } = rest;\r\n\r\n const styles = useCampaignScopeBarStyles();\r\n const currentScope = getCurrentScopeFromService(scope);\r\n const addScope = getScopeAdder(scope);\r\n const removeScope = getScopeRemover(scope);\r\n const { focusedEntity } = useFocusedEntityContext();\r\n\r\n const handleBackClick = useMemo(() => {\r\n if (currentScope < Scope.Campaign) {\r\n return undefined;\r\n }\r\n\r\n return removeScope;\r\n }, [currentScope, removeScope]);\r\n\r\n const { selectedCampaignTypeFilter, selectedCampaignStatusFilter, selectedAdGroupStatusFilter } = useCampaignFilter();\r\n\r\n const shouldRenderAdGroup = useMemo(\r\n () => shouldRenderAdGroupFilter(currentScope, selectedEntity, selectedCampaignTypeFilter),\r\n [currentScope, selectedEntity, selectedCampaignTypeFilter]\r\n );\r\n\r\n const isCampaignScope = useMemo(() => selectedEntity && selectedEntity.entityType === Campaign.entityType, [selectedEntity]);\r\n const isExperimentCampaign = isCampaignScope && selectedEntity.isExperiment;\r\n\r\n const reportingInsightsScenario = instrumentation.reportingInsightsScenario.create();\r\n const logger = reportingInsightsScenario.summaryButton.create();\r\n\r\n const onCopilotSummaryButtonRender = useCallback(() => {\r\n logger.trace('CopilotSummaryButton displayed in CampaignScopeBar');\r\n }, [logger]);\r\n\r\n const onCopilotSummaryButtonClick = useCallback((message) => {\r\n const isNewLogo = _.get(permissions, ['dynamic', 'AdsCopilotUxImprovements']);\r\n logger.trace(`CopilotSummaryButton clicked in CampaignScopeBar, message=${message} isNewLogo:${isNewLogo}`);\r\n }, [logger, permissions]);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const [isCopilotSummaryButtonEnabled, setIsCopilotSummaryButtonEnabled] = useState();\r\n useEffect(() => {\r\n getIsCopilotSummaryButtonEnabled({ serverContext, permissions }).then(setIsCopilotSummaryButtonEnabled);\r\n }, [scope, permissions]);\r\n\r\n if (isLoading) {\r\n return null;\r\n }\r\n\r\n const scopeBarProps = {\r\n i18n,\r\n onBackClick: handleBackClick,\r\n selectedEntity,\r\n };\r\n\r\n const hasRootEntityFilter = selectedCampaignTypeFilter !== CampaignType.All || selectedCampaignStatusFilter !== StatusWaterfallFilterOptions.All;\r\n\r\n const hasSubEntityFilter = selectedAdGroupStatusFilter !== StatusWaterfallFilterOptions.All;\r\n\r\n const scopeSelectorDropdownProps = {\r\n i18n,\r\n rootEntityTypeDisplayName,\r\n selectedEntity,\r\n hasRootEntityFilter,\r\n };\r\n\r\n const scopeSelectorProps = {\r\n inMenuPopover: true,\r\n addScope,\r\n removeScope,\r\n hideSubEntitySelector: !shouldRenderAdGroup && isCampaignScope && (focusedEntity !== 'All'),\r\n hasRootEntityFilter,\r\n hasSubEntityFilter,\r\n className: 'scope-bar-scope-selector',\r\n ...rest,\r\n };\r\n\r\n // TODO: support new entity in campaign-converter.js after MT ready\r\n const { activity: pausedCampaignImportNotificationActivity } = rest.instrumentation.createScenarioAndActivity({\r\n scenarioName: 'PausedCampaignImportNotification',\r\n activityName: 'ScopeBar',\r\n });\r\n const importNotificationCallback = ({ updateStatus }) => {\r\n // show paused campaign notifications based on specific conditions\r\n showPausedCampaignNotifications({ campaignItemList: [selectedEntity], updateStatus, activity: pausedCampaignImportNotificationActivity });\r\n };\r\n\r\n const isInCampaignsOrOverviewPage = getIsInCampaignsOrOverviewPage();\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n {currentScope < Scope.Campaign && \r\n \r\n }\r\n />\r\n {isCampaignScope && !isExperimentCampaign &&\r\n \r\n \r\n {\r\n currentScope < Scope.Campaign &&\r\n \r\n \r\n {\r\n // TODO: if custom list limit > 100, we will need to write code to fix this.\r\n // Known issue: if > 20 lists, $top:20 query param will break this functionality.\r\n // Workaround: supply top param with a value > 20.\r\n return currentCustomer.PlacementExclusionLists.get({ top: 100 });\r\n }\r\n }\r\n fallback={selSummaryBarFallback}\r\n // If the list name call fails, show empty string.\r\n onError={() => selSummaryBarFallback}\r\n >\r\n {\r\n (response) => {\r\n const predicate = item => item.Id === scope.values.selListId;\r\n\r\n if (response.value && _.find(response.value, predicate)) {\r\n const list = _.find(response.value, predicate);\r\n const additionalItems = [];\r\n additionalItems.push({\r\n key: `navigate-selListId-${list.Id}`,\r\n text: list.Name,\r\n });\r\n\r\n return (\r\n {\r\n // Get the association between this account and this list to display the list name.\r\n // This is to verify the account is associated before showing the list name.\r\n return currentAccount.PlacementExclusionLists.$withKey(scope.values.selListId)['Default.GetAccountAssociation'].$makeCall({\r\n payload: {},\r\n });\r\n }\r\n }\r\n fallback={selSummaryBarFallback}\r\n // If the list name call fails, show empty string.\r\n onError={() => selSummaryBarFallback}\r\n >\r\n {\r\n (response) => {\r\n if (response.value && response.value.length === 1) {\r\n const association = response.value[0];\r\n const additionalItems = [];\r\n additionalItems.push({\r\n key: `navigate-selListId-${association.SharedEntityId}`,\r\n text: association.SharedEntityName,\r\n });\r\n\r\n return (\r\n currentAccount.NegativeKeywordLists.get()}\r\n escapeHatch={({ currentAccount }) => (currentAccount ? undefined : { value: defaultSummaryBarFallback })}\r\n fallback={defaultSummaryBarFallback}\r\n // If the list name call fails, show empty string.\r\n onError={() => defaultSummaryBarFallback}\r\n >\r\n {\r\n (response) => {\r\n const predicate = item => item.Id === scope.values.nkl;\r\n\r\n if (response.value && _.find(response.value, predicate)) {\r\n const list = _.find(response.value, predicate);\r\n const additionalItems = [];\r\n additionalItems.push({\r\n key: 'item',\r\n text: list.Name,\r\n 'aria-label': i18n.getString(_TL_('Negative Keyword List Name')),\r\n });\r\n\r\n return (\r\n currentAccount.PortfolioBidStrategies.$withKey(portfolioId).get()}\r\n escapeHatch={({ currentAccount }) => (currentAccount ? undefined : { value: summaryBarFallback })}\r\n fallback={summaryBarFallback}\r\n onError={() => summaryBarFallback}\r\n >\r\n {(response) => {\r\n const portfolioName = response.Name;\r\n\r\n return portfolioName ?\r\n \r\n
\r\n {i18n.getString(_TL_('Click the toggle to enable or disable UET Insights. You can edit this setting at anytime.'))}\r\n
\r\n
\r\n {i18n.getString(_TL_('Learn More'))}\r\n (scope.values.aid ? currentAccount.Tags.get({ top: 200 }) : currentCustomer.Tags.get({ top: 200 }))}\r\n escapeHatch={({ currentAccount, currentCustomer }) => (currentAccount || currentCustomer ? undefined : { value: defaultSummaryBarFallback })}\r\n fallback={defaultSummaryBarFallback}\r\n // If the list name call fails, show empty string.\r\n onError={() => defaultSummaryBarFallback}\r\n >\r\n {\r\n (response) => {\r\n const predicate = item => item.Id === scope.values.tagId;\r\n\r\n const backButtonProps = {\r\n url: `/campaign/vnext/uettag?uid=${scope.values.uid}&cid=${scope.values.cid}&aid=${scope.values.aid}`,\r\n buttonText: i18n.getString(_TL_('Back to All tags')),\r\n };\r\n\r\n if (response.value && _.find(response.value, predicate)) {\r\n const list = _.find(response.value, predicate);\r\n const renderBreadCrumb = () => {\r\n const items = [{\r\n key: 'uet-dashboard-tag',\r\n text: i18n.getString(_TL_('UET tag')),\r\n }, {\r\n key: 'uet-dashboard-tag-name',\r\n text: list.Name,\r\n }];\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n const resizeGroup = [{\r\n label: i18n.getString(_TL_('Tag ID')),\r\n className: 'summary-bar-tag-id',\r\n renderContent: () => list.Id,\r\n ariaLabel: i18n.getString(_TL_('Tag ID')),\r\n canEdit: false,\r\n }, {\r\n label: i18n.getString(_TL_('Tracking Status')),\r\n className: 'summary-bar-tracking-status',\r\n renderContent: () => (!list.IsReadOnly ? (trackingStatusMap[list.TrackingStatus] || list.TrackingStatus) : trackingStatusMap.Active),\r\n ariaLabel: i18n.getString(_TL_('Tracking Status')),\r\n canEdit: false,\r\n }, {\r\n label: i18n.getString(_TL_('Goals')),\r\n className: 'summary-bar-goals',\r\n renderContent: () => list.GoalsCount,\r\n ariaLabel: i18n.getString(_TL_('Goals')),\r\n canEdit: false,\r\n }, {\r\n label: i18n.getString(_TL_('Audiences')),\r\n className: 'summary-bar-audiences',\r\n renderContent: () => list.AudiencesCount,\r\n ariaLabel: i18n.getString(_TL_('Audiences')),\r\n canEdit: false,\r\n }];\r\n\r\n if (permissions.dynamic.UETTagInsights) {\r\n resizeGroup.push({\r\n label: i18n.getString(_TL_('Insights')),\r\n className: 'summary-bar-insights',\r\n renderContent: () => {\r\n const isInsightOn = !_.isUndefined(insightSettingOverride[list.Id]) ? insightSettingOverride[list.Id] : list.IsWebInsightsEnabled;\r\n return (\r\n \r\n {isInsightOn ? i18n.getString(_TL_('Enabled')) : i18n.getString(_TL_('Disabled'))} \r\n
\r\n );\r\n },\r\n ariaLabel: i18n.getString(_TL_('Insights')),\r\n canEdit,\r\n Editor: Callout,\r\n getEditorProps: (show, closeEditor) => ({\r\n title: i18n.getString(_TL_('Edit your Insights setting')),\r\n content: (\r\n {\r\n // eslint-disable-next-line no-param-reassign\r\n list.IsWebInsightsEnabled = newIsInsightOn;\r\n updateInsightSettingOverride([list.Id], newIsInsightOn);\r\n closeEditor();\r\n }}\r\n onCancel={() => {\r\n closeEditor();\r\n }}\r\n />\r\n ),\r\n show,\r\n onClose: closeEditor,\r\n closeButton: true,\r\n target: null,\r\n placement: 'bottom',\r\n popoverId: 'summary-bar-insights-editor',\r\n popoverClassName: 'summary-bar-insights-editor',\r\n closeButtonAriaLabel: i18n.getString(_TL_('Close')),\r\n focusLockContent: true,\r\n }),\r\n });\r\n }\r\n\r\n return (\r\n {\r\n props.scope.remove(['assetGroupId']);\r\n props.scope.save(getRoutePathById(props.siteMap, 'asset-groups'));\r\n },\r\n }]}\r\n />\r\n \r\n {i18n => currentSummaryBar(i18n)}\r\n \r\n );\r\n }\r\n}\r\n\r\nSummaryBarInternal.propTypes = {\r\n adGroup: PropTypes.shape({\r\n isExperiment: PropTypes.bool,\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n campaignId: PropTypes.number.isRequired,\r\n campaignName: PropTypes.string.isRequired,\r\n currentCampaignType: PropTypes.oneOf(values(CampaignType)).isRequired,\r\n campaignSubType: PropTypes.string,\r\n status: PropTypes.string,\r\n bid: PropTypes.number.isRequired,\r\n bidStrategy: PropTypes.string.isRequired,\r\n locations: PropTypes.array,\r\n audiences: PropTypes.array,\r\n devices: PropTypes.array,\r\n }),\r\n updateAdGroup: PropTypes.func,\r\n campaign: PropTypes.shape({\r\n isExperiment: PropTypes.bool,\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n status: PropTypes.string,\r\n currentCampaignType: PropTypes.oneOf(values(CampaignType)).isRequired,\r\n campaignSubType: PropTypes.string,\r\n startDate: PropTypes.string,\r\n endDate: PropTypes.string,\r\n originalCampaignName: PropTypes.string,\r\n originalCampaignId: PropTypes.number,\r\n budget: PropTypes.shape({}).isRequired,\r\n bidStrategy: PropTypes.string.isRequired,\r\n locations: PropTypes.array,\r\n audiences: PropTypes.array,\r\n devices: PropTypes.array,\r\n experimentId: PropTypes.number,\r\n hasBudgetLandscape: PropTypes.bool,\r\n }),\r\n osData: PropTypes.shape({\r\n OverallOptimizationScoreBar: PropTypes.exact({\r\n Available: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Gained: PropTypes.number,\r\n }),\r\n }),\r\n updateCampaign: PropTypes.func,\r\n updateExperimentCampaign: PropTypes.func,\r\n campaignType: PropTypes.oneOf(values(CampaignType)).isRequired,\r\n canEdit: PropTypes.bool,\r\n perfMarker: PropTypes.shape({\r\n done: PropTypes.func.isRequired,\r\n }),\r\n summaryBarActivityLogger: PropTypes.shape({\r\n changeScopeActivity: PropTypes.any,\r\n }).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n skipInvalidateCache: PropTypes.bool,\r\n};\r\n\r\nSummaryBarInternal.defaultProps = {\r\n adGroup: null,\r\n updateAdGroup: null,\r\n campaign: null,\r\n osData: null,\r\n updateCampaign: null,\r\n updateExperimentCampaign: null,\r\n canEdit: false,\r\n perfMarker: null,\r\n skipInvalidateCache: false,\r\n};\r\n\r\nexport const SummaryBar = withDefaultStyles(\r\n SummaryBarInternal,\r\n getSummaryBarStyle\r\n);\r\n","/* istanbul ignore file */ // ignore this file for component test as we cover it in selenium test\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'lodash';\r\nimport { compose, defaults, omit } from 'underscore';\r\nimport { withInstrumentation } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withSiteMap, siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport {\r\n getFilteredCampaignTypeFromRawFilter,\r\n} from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport { withGlobalFilter } from '@bingads-webui-campaign-react/global-filter-context';\r\nimport { WaterfallFilterType } from '@bingads-webui-campaign/filter-storage';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { SummaryBar } from './summary-bar';\r\nimport {\r\n convertToSummaryBarCampaign,\r\n convertToSummaryBarAdGroup,\r\n convertToSummaryBarExperimentCampaign,\r\n} from './helpers/entity-converter';\r\nimport {\r\n WithCampaignRepository,\r\n WithAdGroupRepository,\r\n WithExperimentRepository,\r\n WithBulkUpdateRepository,\r\n WithPatchExperimentRepository,\r\n WithOptimizationScoreRepository,\r\n} from './repository';\r\n\r\nclass UpdatableSummaryBar extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.campaignSummarybarPerfMarker = props.appPerfMarker.createChild('Campaigns_Summary_Bar');\r\n this.markAction('willInit');\r\n\r\n this.summaryBarActivityLogger = props.instrumentation.summaryBarScenario.create();\r\n\r\n this.previousCampaign = null;\r\n this.previousAdGroup = null;\r\n }\r\n\r\n state = {\r\n patchAdGroup: null,\r\n patchCampaign: null,\r\n };\r\n\r\n shouldComponentUpdate(nextProps, nextState) {\r\n const skipUpdateAdGroup = nextState.patchAdGroup !== this.state.patchAdGroup && nextState.patchAdGroup === null;\r\n const skipUpdateCampaign = nextState.patchCampaign !== this.state.patchCampaign && nextState.patchCampaign === null;\r\n\r\n if (skipUpdateAdGroup || skipUpdateCampaign) {\r\n return false;\r\n }\r\n return !(_.isEqual(nextState, this.state) && _.isEqual(nextProps, this.props));\r\n }\r\n\r\n get getFinalProps() {\r\n const campaignType\r\n = getFilteredCampaignTypeFromRawFilter(this.props[WaterfallFilterType.CampaignType]);\r\n const props = {\r\n ...this.props,\r\n updateAdGroup: this.updateAdGroup,\r\n updateCampaign: this.updateCampaign,\r\n updateExperimentCampaign: this.updateExperimentCampaign,\r\n campaignType,\r\n };\r\n\r\n return props;\r\n }\r\n\r\n get getCampaignLoadFallback() {\r\n return (\r\n \r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nSimpleBreadcrumb.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n maxDisplayedItems: PropTypes.number.isRequired,\r\n selectedItem: PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n name: PropTypes.string.isRequired,\r\n url: PropTypes.string,\r\n }),\r\n breadCrumbText: PropTypes.string,\r\n breadcrumbUrl: PropTypes.string,\r\n additionalItems: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n })),\r\n additionalPrefixItems: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n })),\r\n onClick: PropTypes.func,\r\n showTag: PropTypes.string,\r\n tagClass: PropTypes.string,\r\n};\r\n\r\nSimpleBreadcrumb.defaultProps = {\r\n breadCrumbText: null,\r\n selectedItem: null,\r\n breadcrumbUrl: null,\r\n additionalItems: [],\r\n additionalPrefixItems: [],\r\n onClick: null,\r\n showTag: '',\r\n tagClass: '',\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { SummaryBarContainer } from '@bingads-webui-react/summary-bar';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { isNavigationRefreshOn } from '@bingads-webui-react/preference-utility';\r\nimport { SimpleBreadcrumb } from './components/simple-breadcrumb';\r\n\r\nclass AccountsSummaryBarInternal extends React.PureComponent {\r\n render() {\r\n const {\r\n i18n,\r\n selectedParent,\r\n breadCrumbText,\r\n permissions,\r\n } = this.props;\r\n\r\n return (\r\n
\r\n ) : null;\r\n\r\n return isVisible ? (\r\n \r\n \r\n ) : \r\n
{\r\n // history.push(`${selectedParent.routePrefix}assetlibrary/taskprogress${location.search}`);\r\n }}\r\n >\r\n {inProgressTaskCount > 1\r\n ? i18n.getString(_TL_('Updating {{count}} items'), { count: inProgressTaskCount })\r\n : i18n.getString(_TL_('Updating 1 item'))}\r\n \r\n \r\n
\r\n {/* render breadcrumb here using React.createPortal */}\r\n
\r\n {\r\n renderInProgressContent()\r\n }\r\n
\r\n
{\r\n // history.push(`${selectedParent.routePrefix}assetlibrary/taskprogress${location.search}`);\r\n }}\r\n >\r\n {inProgressTaskCount > 1\r\n ? i18n.getString(_TL_('Updating {{count}} items'), { count: inProgressTaskCount })\r\n : i18n.getString(_TL_('Updating 1 item'))}\r\n \r\n \r\n
\r\n
\r\n
\r\n {/* render customized content here using React.createPortal */}\r\n
\r\n {\r\n renderInProgressContent()\r\n }\r\n
\r\n {\r\n setDialogOpen(data.open);\r\n }}\r\n >\r\n \r\n \r\n {i18n.getString(_TL_('Are you sure you want to exit?'))} \r\n \r\n {i18n.getString(_TL_('If you exit now, your changes may not be saved.'))}\r\n \r\n\r\n \r\n \r\n {i18n.getString(_TL_('Yes'))}\r\n \r\n \r\n \r\n {i18n.getString(_TL_('No'))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : null;\r\n};\r\n\r\nAdStudioSummaryBarInternal.propTypes = {\r\n classes: PropTypes.shape({\r\n adStudioSummaryBar: PropTypes.string,\r\n inProgressContent: PropTypes.string,\r\n summaryBar: PropTypes.string,\r\n }).isRequired,\r\n selectedParent: PropTypes.shape({\r\n id: PropTypes.string,\r\n name: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n selectedChild: PropTypes.shape({\r\n id: PropTypes.string,\r\n name: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n history: PropTypes.shape({\r\n replace: PropTypes.func,\r\n }).isRequired,\r\n location: PropTypes.shape({\r\n search: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\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 scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n};\r\n\r\nAdStudioSummaryBarInternal.defaultProps = {\r\n};\r\n\r\nexport const AdStudioSummaryBar = withScope(withPermissions(withDefaultStyles(\r\n AdStudioSummaryBarInternal,\r\n getAdStudioSummaryBarStyle\r\n)));\r\n","export const getAdStudioSummaryBarStyle = () => ({\r\n '@keyframes inProgressSpin': {\r\n from: { transform: 'rotate(0deg)' },\r\n to: { transform: 'rotate(360deg)' },\r\n },\r\n\r\n adStudioSummaryBar: {\r\n display: 'flex',\r\n width: '100%',\r\n position: 'relative',\r\n '& .breadcrumb-wrapper': {\r\n width: '100%',\r\n paddingLeft: '6px',\r\n },\r\n },\r\n\r\n summaryBar: {\r\n '& .back-button:focus': {\r\n border: '1px solid black',\r\n },\r\n },\r\n\r\n inProgressContent: {\r\n position: 'absolute',\r\n right: 40,\r\n top: 0,\r\n '& .in-progress-button': {\r\n '& i': {\r\n animationName: '$inProgressSpin',\r\n animationDuration: '1.5s',\r\n animationIterationCount: 'infinite',\r\n animationTimingFunction: 'linear',\r\n },\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getRoutePathById, withCampaignSiteMap } from '@bingads-webui-react/with-site-map';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\n\r\nimport { SummaryBarFactory } from './components';\r\nimport { getSummaryBarStyle } from './styles';\r\n\r\nconst PmaxAssetDetailsSummaryBarUnstyled = ({\r\n selectedParent,\r\n selectedChild,\r\n siteMap,\r\n i18n,\r\n scope,\r\n summaryBarActivityLogger,\r\n}) => {\r\n const {\r\n aid, campaignId, cid, assetGroupId,\r\n } = scope.values;\r\n\r\n const readCampaign = useCallback(() => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns.$withKey(campaignId)\r\n .get()\r\n .toPromise(), [aid, campaignId, cid]);\r\n\r\n const readAssetGroup = useCallback(() => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns.$withKey(campaignId)\r\n .AssetGroups.$withKey(assetGroupId)\r\n .get()\r\n .toPromise(), [aid, assetGroupId, campaignId, cid]);\r\n\r\n const isListingGroup = useMemo(() => scope.location.pathname.includes('listinggroups'), [scope.location.pathname]);\r\n\r\n const [campaignName, setCampaignName] = useState();\r\n const [assetGroupName, setAssetGroupName] = useState();\r\n\r\n useEffect(() => {\r\n readCampaign().then((response) => {\r\n setCampaignName(response.Name);\r\n });\r\n }, [readCampaign]);\r\n\r\n useEffect(() => {\r\n if (!_.isUndefined(assetGroupId)) {\r\n readAssetGroup().then((response) => {\r\n setAssetGroupName(response.Name);\r\n });\r\n }\r\n }, [assetGroupId, readAssetGroup]);\r\n\r\n const breadcrumbsGeneralConfigs = useMemo(() => ({\r\n maxDisplayedItems: 3,\r\n items: [{\r\n key: 'all-campaigns',\r\n text: i18n.getString(_TL_('All campaigns')),\r\n isLongText: true,\r\n 'aria-label': i18n.getString(_TL_('All campaigns')),\r\n onClick: () => {\r\n scope.remove(['campaignId', 'assetGroupId']);\r\n scope.save(getRoutePathById(siteMap, 'campaigns'));\r\n },\r\n }, {\r\n key: 'asset-groups',\r\n text: campaignName,\r\n isLongText: true,\r\n 'aria-label': campaignName,\r\n onClick: () => {\r\n scope.remove(['assetGroupId']);\r\n scope.save(getRoutePathById(siteMap, isListingGroup ? 'listing-groups' : 'asset-groups'));\r\n },\r\n }, (selectedChild ?\r\n {\r\n key: selectedChild.id,\r\n text: assetGroupName,\r\n isCurrentItem: true,\r\n isLongText: true,\r\n 'aria-label': assetGroupName,\r\n } : {}\r\n )],\r\n }), [assetGroupName, campaignName, i18n, isListingGroup, scope, selectedChild, siteMap]);\r\n\r\n const summaryBarProps = useMemo(() => ({\r\n i18n,\r\n scope,\r\n siteMap,\r\n summaryBarActivityLogger,\r\n }), [i18n, scope, siteMap, summaryBarActivityLogger]);\r\n\r\n return selectedParent && selectedChild ? (\r\n \r\n
\r\n
\r\n
\r\n \r\n {`${monthText} ${selectedDate.year}`}\r\n \r\n \r\n }\r\n className={classnames(buttonClass, classes.monthPickerButton, isCalloutVisible ? 'dialog-visible' : 'dialog-invisible')}\r\n onClick={toggleIsCalloutVisible}\r\n disabled={isMonthPickerButtonDisabled}\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 { findWhere, result, values } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { Breadcrumb } from '@bingads-webui-react/breadcrumb';\r\nimport { CampaignType } from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport {\r\n campaignTypes,\r\n convertToBreadCrumbItems,\r\n} from '../helpers';\r\n\r\nexport class SummaryBarBreadcrumb extends React.PureComponent {\r\n render() {\r\n const {\r\n campaignType,\r\n classes,\r\n i18n,\r\n maxDisplayedItems,\r\n } = this.props;\r\n\r\n const items = convertToBreadCrumbItems(this.props);\r\n const currentCampaignType = findWhere(campaignTypes, { id: campaignType });\r\n const campaignTypeI18nText = i18n.getString(result(currentCampaignType, 'i18nKey'));\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSummaryBarBreadcrumb.propTypes = {\r\n classes: PropTypes.shape({\r\n summaryBarBreadcrumb: PropTypes.string,\r\n }),\r\n campaignType: PropTypes.oneOf(values(CampaignType)).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n maxDisplayedItems: PropTypes.number,\r\n summaryBarActivityLogger: PropTypes.shape({\r\n changeScopeActivity: PropTypes.any,\r\n }),\r\n};\r\n\r\nSummaryBarBreadcrumb.defaultProps = {\r\n classes: {\r\n summaryBarBreadcrumb: 'summary-bar-breadcrumb',\r\n },\r\n maxDisplayedItems: 3,\r\n summaryBarActivityLogger: null,\r\n};\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport class EditableItem extends React.PureComponent {\r\n state = {\r\n isOpen: false,\r\n itemProps: {},\r\n };\r\n\r\n closeEditor = () => this.setState({ isOpen: false });\r\n\r\n showEditor = ({ itemProps }) => {\r\n this.setState({\r\n isOpen: true, itemProps,\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n renderEditableItem,\r\n renderEditor,\r\n } = this.props;\r\n const { itemProps } = this.state;\r\n\r\n return (\r\n \r\n {renderEditableItem(this.showEditor)}\r\n {renderEditor(this.state.isOpen, this.closeEditor, { itemProps })}\r\n \r\n );\r\n }\r\n}\r\n\r\nEditableItem.propTypes = {\r\n renderEditableItem: PropTypes.func.isRequired,\r\n renderEditor: PropTypes.func.isRequired,\r\n};\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { values } from 'underscore';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { CampaignType } from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport { Breadcrumb } from '@bingads-webui-react/breadcrumb';\r\nimport { SummaryBarContainer } from '@bingads-webui-react/summary-bar';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { isNavigationRefreshOn } from '@bingads-webui-react/preference-utility';\r\nimport { SummaryBarBreadcrumb } from './index';\r\nimport { SummaryBarItemsResizeGroup } from './summary-bar-items-resize-group';\r\n\r\nclass SummaryBarFactory extends React.PureComponent {\r\n render() {\r\n const {\r\n backButtonProps,\r\n breadcrumbsProps,\r\n breadcrumbsGeneralConfigs,\r\n summaryBarItems,\r\n i18n,\r\n summaryBarActivityLogger,\r\n scope,\r\n siteMap,\r\n hideBreadcrumb,\r\n permissions,\r\n } = this.props;\r\n const summaryBarProps = {\r\n summaryBarItems,\r\n overflowAriaLabel: i18n.getString(_TL_('More options')),\r\n scope,\r\n siteMap,\r\n };\r\n\r\n let breadcrumb = null;\r\n if (breadcrumbsGeneralConfigs) {\r\n breadcrumb = (\r\n \r\n
\r\n );\r\n } else {\r\n breadcrumb = (\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {text}\r\n \r\n }\r\n >\r\n { href ? ({text} ) :\r\n ({text} ) }\r\n ));\r\n\r\nexport const OverflowEntityItem = ({\r\n canEdit,\r\n label,\r\n text,\r\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n onClick,\r\n ariaLabel,\r\n tooltipPlacement,\r\n renderContent,\r\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n siteMap,\r\n className,\r\n ...others\r\n}) => (\r\n \r\n \r\n {/* Use a media query to trigger an event when we see a large window size change.\r\n This will allow us to force ResizeGroup to update by changing the key */}\r\n \r\n {layout => (\r\n (\r\n \r\n\r\n
);\r\n }\r\n}\r\n\r\nSummaryBarItemsResizeGroup.propTypes = {\r\n overflowAriaLabel: PropTypes.string,\r\n summaryBarItems: PropTypes.arrayOf(SummaryBarItemPropType).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n};\r\n\r\nSummaryBarItemsResizeGroup.defaultProps = {\r\n overflowAriaLabel: '',\r\n};\r\n","import React from 'react';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { Callout } from '@bingads-webui-react/callout';\r\n\r\nconst renderCalloutSubMenu = (content, item) => (\r\n \r\n
{item.title} \r\n
\r\n {content}\r\n \r\n
\r\n
\r\n {getChildren && getChildren()}\r\n \r\n );\r\n };\r\n\r\n const renderEditableItem = (showEditor) => {\r\n const onClick = (event) => {\r\n if (event) {\r\n event.preventDefault();\r\n }\r\n showEditor({ itemProps: other });\r\n if (onItemClick) {\r\n onItemClick();\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n render() {\r\n const {\r\n summaryBarItems,\r\n overflowIndex,\r\n } = this.props;\r\n const overflowItems = _.reject(summaryBarItems.slice(overflowIndex), item => item.noOverflow);\r\n const isEditable = item => item.canEdit;\r\n let entityItems = [];\r\n\r\n if (summaryBarItems.length > 0) {\r\n entityItems = summaryBarItems.map((item) => {\r\n if (_.contains(overflowItems, item)) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {item.className === 'overflow-entity-items'\r\n ? this.renderOverflowDropdown(overflowItems)\r\n : this.renderSummryBarItem(item, EntityItem)\r\n }\r\n
\r\n );\r\n });\r\n }\r\n\r\n const overflowLabel = overflowItems.length === 0 ? 'none' : overflowIndex;\r\n return (\r\n \r\n {entityItems}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const SummaryBarItemPropType = PropTypes.shape({\r\n label: PropTypes.string,\r\n className: PropTypes.string,\r\n text: PropTypes.string,\r\n canEdit: PropTypes.bool,\r\n renderContent: PropTypes.func,\r\n onClick: PropTypes.func,\r\n renderEntityItem: PropTypes.func,\r\n});\r\n\r\nSummaryBarItems.propTypes = {\r\n overflowAriaLabel: PropTypes.string,\r\n summaryBarItems: PropTypes.arrayOf(SummaryBarItemPropType.isRequired).isRequired,\r\n overflowIndex: PropTypes.number.isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n};\r\n\r\nSummaryBarItems.defaultProps = {\r\n overflowAriaLabel: '',\r\n};\r\n","import { chain, pick, isEmpty, omit, contains } from 'underscore';\r\nimport { include } from 'underscore.string';\r\nimport { convertToCampaign, convertToAdGroup, CampaignTypeByODataValue } from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport { curlyTemplate } from '@bingads-webui-universal/primitive-utilities';\r\nimport { isXandrCampaign } from '@bingads-webui-campaign-react/constants';\r\n\r\nconst BUDGET_SUGGESTION = 'BudgetSuggestions';\r\nconst devicesMap = i18n => ({\r\n Smartphones: i18n.getString(_TL_('Smartphone')),\r\n Computers: i18n.getString(_TL_('Computer')),\r\n Tablets: i18n.getString(_TL_('Tablet')),\r\n ConnectedTVs: i18n.getString(_TL_('CTV')),\r\n});\r\n\r\nconst statusMap = {\r\n active: 'Active',\r\n paused: 'Paused',\r\n};\r\n\r\nexport const convertToSummaryBarCampaign = (campaignFromOData) => {\r\n const campaign = omit(convertToCampaign(campaignFromOData), 'rawStatus');\r\n campaign.status = campaign.status.toLowerCase();\r\n const {\r\n Budget, BiddingScheme, ExperimentId, CampaignSubType, DeliveryStatus, DeliveryStatusDetails,\r\n } = campaignFromOData;\r\n\r\n return {\r\n ...campaign,\r\n currentCampaignType: campaign.campaignType,\r\n budget: Budget,\r\n hasBudgetLandscape: contains(DeliveryStatusDetails, BUDGET_SUGGESTION) ||\r\n DeliveryStatus === BUDGET_SUGGESTION,\r\n bidStrategy: BiddingScheme.Type,\r\n isExperiment: ExperimentId !== null,\r\n campaignSubType: CampaignSubType,\r\n };\r\n};\r\n\r\nexport const getAdGroupDisplayBiddingStrategyType = (adGroupFromOData) => {\r\n if (adGroupFromOData.DisplayBiddingStrategyType === 'InheritFromParent') {\r\n return adGroupFromOData.Campaign.BiddingScheme && adGroupFromOData.Campaign.BiddingScheme.Type;\r\n }\r\n return adGroupFromOData.DisplayBiddingStrategyType;\r\n};\r\n\r\nexport const convertToSummaryBarAdGroup = (adGroupFromOData) => {\r\n const adGroup = convertToAdGroup(adGroupFromOData);\r\n adGroup.status = adGroup.status.toLowerCase();\r\n const bidMapping = {\r\n ManualCpc: 'SearchBid',\r\n ManualCpv: 'CpvBid',\r\n ManualCpm: 'CpmBid',\r\n };\r\n const bidKey = (adGroupFromOData.Campaign.BiddingScheme.Type && bidMapping[adGroupFromOData.Campaign.BiddingScheme.Type]) || 'SearchBid';\r\n\r\n return {\r\n ...adGroup,\r\n displayBiddingStrategyType: getAdGroupDisplayBiddingStrategyType(adGroupFromOData),\r\n currentCampaignType: CampaignTypeByODataValue[adGroupFromOData.Campaign.CampaignType],\r\n campaignId: adGroupFromOData.Campaign.Id,\r\n campaignName: adGroupFromOData.Campaign.Name,\r\n bid: adGroupFromOData[bidKey],\r\n bidStrategy: adGroupFromOData.Campaign.BiddingScheme.Type,\r\n isExperiment: adGroupFromOData.Campaign.ExperimentId !== null,\r\n campaignSubType: adGroupFromOData.Campaign.CampaignSubType,\r\n };\r\n};\r\n\r\nexport const convertToSummaryBarExperimentCampaign = (experimentFromOData, campaign) => ({\r\n ...campaign,\r\n startDate: experimentFromOData.StartDate,\r\n endDate: experimentFromOData.EndDate,\r\n originalCampaignName: experimentFromOData.BaseCampaignName,\r\n originalCampaignId: experimentFromOData.BaseCampaignId,\r\n status: experimentFromOData.Status,\r\n experimentType: experimentFromOData.ExperimentType,\r\n});\r\n\r\nconst getNameForRadiusLocation = (i18n, lat, long) => {\r\n const latComputed = Math.round(lat * 100) / 100;\r\n const longComputed = Math.round(long * 100) / 100;\r\n\r\n return curlyTemplate(i18n.getString(_TL_('Lat: {{Latitude}} Long: {{Longitude}}')))({\r\n Latitude: latComputed,\r\n Longitude: longComputed,\r\n });\r\n};\r\n\r\nconst getCriterion = (criterionType, criterionFromOData) => chain(criterionFromOData)\r\n .filter(item => item && item['@odata.type'] && !include(item['@odata.type'], 'Negative'))\r\n .map(item => pick(item, 'Criterion'))\r\n .filter(item => item && item.Criterion && item.Criterion['@odata.type'] === `#Model.${criterionType}Criterion`);\r\n\r\nexport const convertToSummaryBarLocationsAndDevices = (criterionFromOData, i18n, parentResults = null, campaignSubType = null) => {\r\n let results = {\r\n locations: [],\r\n devices: i18n.getString(_TL_('None')),\r\n };\r\n\r\n if (!criterionFromOData && !parentResults) {\r\n return results;\r\n }\r\n\r\n if (criterionFromOData && criterionFromOData.dataNotReady) {\r\n return {\r\n locations: ['-'],\r\n devices: ['-'],\r\n };\r\n }\r\n\r\n if (criterionFromOData) {\r\n const locationCriterion = getCriterion('Location', criterionFromOData.value)\r\n .map(item => pick(item.Criterion, 'Name', 'LocationType'))\r\n .sortBy('Name')\r\n .sortBy('LocationType')\r\n .map(item => item.Name)\r\n .value();\r\n\r\n const radiusCriterion = getCriterion('Radius', criterionFromOData.value)\r\n .map(item => pick(item.Criterion, 'RadiusUnit', 'Name', 'Latitude', 'Longitude', 'Radius'))\r\n .map((item) => {\r\n const unit = item.RadiusUnit.toLowerCase() === 'miles' ? i18n.getString(_TL_('miles'))\r\n : i18n.getString(_TL_('kilometers'));\r\n const location = isEmpty(item.Name) ? getNameForRadiusLocation(i18n, item.Latitude, item.Longitude) : item.Name;\r\n\r\n return curlyTemplate(i18n.getString(_TL_('{{radius}} {{unit}} around {{location}}')))({\r\n radius: item.Radius,\r\n unit,\r\n location,\r\n });\r\n })\r\n .value();\r\n\r\n const devicesI18nMap = devicesMap(i18n);\r\n const deviceCriterion = chain(criterionFromOData.value)\r\n .map(item => pick(item, 'Criterion', 'CriterionBid'))\r\n .filter(item => item && item.Criterion &&\r\n item.Criterion['@odata.type'] === '#Model.DeviceCriterion' &&\r\n item.CriterionBid &&\r\n ((isXandrCampaign(campaignSubType) && item.CriterionBid.Multiplier !== -100) || (!isXandrCampaign(campaignSubType) && item.CriterionBid.Multiplier !== 0)))\r\n .map(item => devicesI18nMap[item.Criterion.DeviceName])\r\n .value();\r\n\r\n results = {\r\n locations: locationCriterion.concat(radiusCriterion),\r\n devices: deviceCriterion.length ? [deviceCriterion.join(',')] : [],\r\n };\r\n }\r\n\r\n if (parentResults) {\r\n results = {\r\n locations: results.locations.length ? results.locations : parentResults.locations,\r\n devices: results.devices.length ? results.devices : parentResults.devices,\r\n };\r\n }\r\n\r\n return results;\r\n};\r\n\r\nexport const convertToSummaryBarAudiences = (audienceFromOData) => {\r\n let result = [];\r\n\r\n if (audienceFromOData && audienceFromOData.value) {\r\n result = chain(audienceFromOData.value).map(item => item && item.AudienceCriterion)\r\n .map(item => item && item.AudienceName)\r\n .sortBy('AudienceName')\r\n .value();\r\n result.totalCount = audienceFromOData['@odata.count'];\r\n } else if (audienceFromOData && audienceFromOData.dataNotReady) {\r\n result.totalCount = 1;\r\n result = ['-'];\r\n }\r\n return result;\r\n};\r\n\r\nexport const convertToSummaryBarStatusPatch = patch => ({\r\n Status: statusMap[patch.status],\r\n});\r\n","// use object here in case we may need to extend other fields in the future\r\nimport _ from 'underscore';\r\nimport config from '@bingads-webui-component-legacy/config/index';\r\nimport { CampaignType } from '@bingads-webui-campaign-react/shell-ui-common';\r\n\r\nconst dynamicPermissions = _.result(config.get('permissions'), 'dynamic', {});\r\nconst { IsRenameHotelToLodgingEnabled } = dynamicPermissions;\r\n\r\nexport const campaignTypes = [\r\n {\r\n id: CampaignType.All,\r\n i18nKey: _TL_('All campaigns'),\r\n }, {\r\n id: CampaignType.Default,\r\n i18nKey: _TL_('Search campaigns'),\r\n }, {\r\n id: CampaignType.Shopping,\r\n i18nKey: _TL_('Shopping campaigns'),\r\n }, {\r\n id: CampaignType.Audience,\r\n i18nKey: _TL_('Audience campaigns'),\r\n }, {\r\n id: CampaignType.Smart,\r\n i18nKey: _TL_('Smart campaigns'),\r\n },\r\n {\r\n id: CampaignType.Hotel,\r\n i18nKey: IsRenameHotelToLodgingEnabled ? _TL_('Lodging campaigns') : _TL_('Hotel campaigns'),\r\n },\r\n {\r\n id: CampaignType.PerformanceMax,\r\n i18nKey: _TL_('Performance Max campaigns'),\r\n },\r\n {\r\n id: CampaignType.App,\r\n i18nKey: _TL_('App campaigns'),\r\n },\r\n];\r\n","import { has } from 'underscore';\r\nimport { $current } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById, Configs } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { Scope } from '@bingads-webui-campaign-react/shell-ui-common';\r\n\r\nexport function breadcrumbClickHandler(breadcrumbScope, routerScope, siteMap) {\r\n switch (breadcrumbScope) {\r\n case Scope.Account:\r\n routerScope.remove(['campaignId', 'adGroupId']);\r\n break;\r\n case Scope.Campaign:\r\n routerScope.remove(['adGroupId']);\r\n break;\r\n default: break;\r\n }\r\n\r\n // align with google, click account scope link will show campaigns grid\r\n const route = breadcrumbScope === Scope.Account\r\n ? getRoutePathById(Configs.campaignSiteMap, 'campaigns')\r\n : getRoutePathById(siteMap, 'ads');\r\n if (has(routerScope.values, 'adId')) {\r\n routerScope.remove(['adId']);\r\n routerScope.save(route);\r\n } else if (breadcrumbScope === Scope.Account) {\r\n routerScope.save(route);\r\n } else {\r\n routerScope.save();\r\n }\r\n}\r\n\r\nexport function campaignClickHandler(event, campaignId, scope) {\r\n if (event) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n }\r\n\r\n scope.set({\r\n cid: $current,\r\n aid: $current,\r\n uid: $current,\r\n campaignId,\r\n });\r\n\r\n scope.save();\r\n return false;\r\n}\r\n\r\nexport function getCampaignUrl(campaignId, scope) {\r\n const { cid, aid, uid } = scope.values;\r\n return `${scope.location.pathname}?uid=${uid}&cid=${cid}&aid=${aid}&campaignId=${campaignId}`;\r\n}\r\n\r\nexport function pageClickHandler(siteMap, scope, targetPage) {\r\n scope.save(getRoutePathById(siteMap, targetPage));\r\n}\r\n","export const summaryBarScopes = {\r\n campaignType: {\r\n id: 'campaign-type',\r\n },\r\n campaign: {\r\n id: 'campaign',\r\n },\r\n adGroup: {\r\n id: 'ad-group',\r\n },\r\n accounts: {\r\n id: 'accounts',\r\n },\r\n ad: {\r\n id: 'ad',\r\n },\r\n};\r\n","// the default style follows figma and adwords\r\n// https://www.figma.com/file/UiSbekGiA9XqEL6WM2v5allf/Bing-Ads-HIG-0.01.01?node-id=0%3A8166\r\nconst theme = {\r\n minWidth: '100px',\r\n fontSize: '14px',\r\n};\r\n\r\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\r\nexport const getStatusDropdownStyles = ({ statusDropdown = {} }, { palette = {} }) => ({\r\n statusDropdown: {\r\n '& .status-dropdown': {\r\n position: 'relative',\r\n minWidth: theme.minWidth,\r\n },\r\n '& .dropdown-toggle[disabled]': {\r\n cursor: 'default',\r\n },\r\n '& .dropdown-toggle': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n border: 'none',\r\n fontWeight: 'normal',\r\n fontSize: theme.fontSize,\r\n backgroundColor: palette.neutralLighter,\r\n '& > div': {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n '& > div': {\r\n display: 'flex',\r\n },\r\n },\r\n '& .overflow-status-text': {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n '& .status-icon': {\r\n flexShrink: 0,\r\n },\r\n },\r\n '& .dropdown-toggle:focus': {\r\n outline: 'none',\r\n },\r\n '& .icon-status-draft, & .icon-status-expired, & .icon-status-paused': {\r\n marginRight: '5px',\r\n fontSize: theme.fontSize,\r\n },\r\n '& .icon-status-expired': {\r\n color: '#CF2837',\r\n },\r\n '& .icon-status-active': {\r\n marginRight: '5px',\r\n fontSize: theme.fontSize,\r\n color: '#107C10',\r\n },\r\n '& .dropdown-menu': {\r\n minWidth: theme.minWidth,\r\n },\r\n '& .list-selector-item': {\r\n display: 'block',\r\n padding: '7px 10px',\r\n clear: 'both',\r\n fontSize: theme.fontSize,\r\n fontWeight: 'normal',\r\n color: palette.neutralDark,\r\n whiteSpace: 'nowrap',\r\n },\r\n '& .list-selector-item:hover': {\r\n textDecoration: 'none',\r\n backgroundColor: palette.neutralLighter,\r\n },\r\n '& .dropdown-menu .selected': {\r\n backgroundColor: palette.neutralLighter,\r\n },\r\n '& .icon-ChevronDown': {\r\n margin: '4px 10px',\r\n color: palette.neutralSecondary,\r\n fontSize: '12px',\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport { findWhere, mapObject, constant, contains } from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport PropTypes from 'prop-types';\r\nimport { ListSelector } from '@bingads-webui-react/list-selector';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withOverflowProp } from '@bingads-webui-react/with-overflow-prop';\r\nimport { Glyphicon, OverlayTrigger, Tooltip } from '@bingads-webui-react/primitive';\r\nimport { FocusLock } from '@bingads-webui-react/focus-lock';\r\nimport { FocusContext } from '@bingads-webui-campaign-react/react-focus-context';\r\nimport onClickOutside from 'react-onclickoutside';\r\nimport { getStatusDropdownStyles } from './styles';\r\n\r\nconst OverflowStatusText = withOverflowProp(({\r\n item, isTextOverflow, i18n, forwardedRef,\r\n}) => (\r\n \r\n {i18n.getString(item.i18nText)}\r\n \r\n }\r\n >\r\n {i18n.getString(item.i18nText)} \r\n \r\n));\r\n\r\nclass StatusDropdown extends React.PureComponent {\r\n static contextType = FocusContext\r\n\r\n constructor(props) {\r\n super(props);\r\n this.buttonRef = React.createRef(null);\r\n }\r\n\r\n state = {\r\n isOpen: false,\r\n };\r\n\r\n componentDidUpdate() {\r\n const { suscribeFocusElement } = this.context;\r\n suscribeFocusElement({ scenario: 'StatusDropdown', componentRef: this.buttonRef });\r\n }\r\n\r\n componentWillUnmount() {\r\n const { suscribeFocusElement } = this.context;\r\n suscribeFocusElement({ scenario: 'StatusDropdown', componentRef: null });\r\n }\r\n\r\n onSelect = (selectedStatus) => {\r\n this.toggle();\r\n this.props.changeStatus(selectedStatus);\r\n };\r\n\r\n get dropdownItems() {\r\n return [{\r\n id: 'active',\r\n leftIcon: this.props.isExperiment ? 'TestBeakerSolid' : 'RadioBullet2',\r\n i18nText: _TL_('Enabled'),\r\n }, {\r\n id: 'paused',\r\n leftIcon: this.props.isExperiment ? 'TestBeaker' : 'PauseListView12',\r\n i18nText: _TL_('Paused'),\r\n }];\r\n }\r\n\r\n get items() {\r\n return this.dropdownItems.concat([{\r\n id: 'expired',\r\n leftIcon: 'Remove',\r\n i18nText: _TL_('Expired'),\r\n }, {\r\n id: 'draft',\r\n leftIcon: this.props.isExperiment ? 'TestBeaker' : 'PauseListView12',\r\n i18nText: _TL_('Draft'),\r\n }, {\r\n id: 'BudgetPaused',\r\n leftIcon: this.props.isExperiment ? 'TestBeaker' : 'PauseListView12',\r\n i18nText: _TL_('Budget paused'),\r\n }, {\r\n id: 'BudgetUserPaused',\r\n leftIcon: this.props.isExperiment ? 'TestBeaker' : 'PauseListView12',\r\n i18nText: _TL_('Budget and user paused'),\r\n }, {\r\n id: 'Suspended',\r\n leftIcon: 'Remove',\r\n i18nText: _TL_('Suspended'),\r\n }]);\r\n }\r\n\r\n toggle = () => {\r\n this.setState(state => ({ isOpen: !state.isOpen }));\r\n };\r\n\r\n handleClickOutside = () => {\r\n if (this.state.isOpen) {\r\n this.toggle();\r\n }\r\n };\r\n\r\n renderItem = item => (\r\n \r\n {\r\n i18n => (\r\n \r\n
\r\n )\r\n }\r\n \r\n )\r\n\r\n renderSelectedItem = (item) => {\r\n // paused is the default selected icon\r\n const selectedItem = findWhere(this.items, { id: item.id }) || this.dropdownItems[1];\r\n return this.renderItem(selectedItem);\r\n };\r\n\r\n render() {\r\n const {\r\n classes,\r\n selectedStatus,\r\n 'aria-label': ariaLabel,\r\n label,\r\n enableDropdownStatus,\r\n } = this.props;\r\n const enableDropdown\r\n = contains(['active', 'paused', ...enableDropdownStatus], selectedStatus.id);\r\n\r\n return (\r\n \r\n
\r\n
\r\n {label && {label} }\r\n \r\n {this.renderSelectedItem(selectedStatus)}\r\n {enableDropdown && (
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
pageClickHandler(siteMap, scope, 'settings')}\r\n onKeyDown={submitEvent(() => pageClickHandler(siteMap, scope, 'settings'))}\r\n className=\"entity-content-settings\"\r\n aria-label={i18n.getString(_TL_('Go to settings'))}\r\n type=\"button\"\r\n >\r\n {i18n.getString(_TL_('Go to settings'))} \r\n \r\n \r\n \r\n {targets[0]}\r\n \r\n }\r\n >\r\n {targets[0]} \r\n \r\n {targets.length > 1 && (\r\n \r\n {curlyTemplate(i18n.getString(_TL_('and {{restNumber}} More...')))({\r\n restNumber: targets.totalCount && targets.totalCount > 1 ? targets.totalCount - 1 : targets.length - 1,\r\n })}\r\n )\r\n }\r\n {renderEditIcon()}\r\n
\r\n));\r\n\r\nconst CriteriaItemsInternal = ({\r\n targets, emptyValue, i18n, canEdit,\r\n}) => {\r\n const renderEditIcon = () => (canEdit ? (\r\n \r\n {emptyValue} \r\n {renderEditIcon()}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n {i18n.getString(_TL_('To change an experiment’s budget, you’ll need to change the budget of its original campaign.'))} \r\n
\r\n);\r\n\r\nBudgetNotEditableInternal.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nexport const BudgetNotEditable = withI18nConsumer(BudgetNotEditableInternal);\r\n","export const budgetLandscapeLegacyStrings = [{\r\n ColumnName_EstimatedSharedBudget: _TL_('Shared budget'),\r\n ColumnName_SharedBudgetAmount: _TL_('Shared budget'),\r\n ColumnName_BudgetAmount: _TL_('Budget'),\r\n ColumnName_EstimatedBudget: _TL_('Budget'),\r\n ColumnName_EstimatedImpressions: _TL_('Weekly est. impr.'),\r\n ColumnName_EstimatedClicks: _TL_('Estimated clicks'),\r\n ColumnName_EstimatedConversions: _TL_('Estimated conversions'),\r\n ColumnName_EstimatedCost: _TL_('Weekly est. spend'),\r\n BudgetLandscape_Table_Budget_Tip_Forecasting: _TL_('Your campaign may be limited by budget in the coming weeks if you select an amount less than {0}.'),\r\n BudgetLandscape_Table_Budget_Tip_Recovery: _TL_('Your campaign may be limited by budget if you select an amount less than {0}.'),\r\n BudgetLandscape_Table_Budget_Tip: _TL_('Your campaign might still be limited by its budget if you select an amount less than {0}.'),\r\n ErrorMessage_InputNumericValue: _TL_('Please enter a numeric value, such as 100.'),\r\n BudgetSuggestionsValidationMsg: _TL_('The budget amount must be between {0} {1} and {2} {3}.'),\r\n BudgetLandscape_Comment_Recommended: _TL_('(Recommended)'),\r\n BudgetLandscape_Comment_Current: _TL_('(Current)'),\r\n BudgetLandscape_Table_CustomInput: _TL_('Other budget'),\r\n BudgetLandscape_Comment_Suggested: _TL_('(Suggested)'),\r\n Apply: _TL_('Apply'),\r\n Cancel: _TL_('Cancel'),\r\n BudgetLandscape_ConversionStatus_0_linkText: _TL_('UET/Conversion tracking'),\r\n BudgetLandscape_ConversionStatus_0_line1: _TL_('Budget opportunity support conversion estimation now.'),\r\n BudgetLandscape_ConversionStatus_0_line2: _TL_('Go to set {0} in order to see conversion information.'),\r\n BudgetLandscape_ConversionStatus_1: _TL_('Conversion data is not enough.'),\r\n Validation_Base_Field_Not_Valid: _TL_('Field is not valid'),\r\n Validation_NotEmpty_Required_Field: _TL_('Required field'),\r\n Validation_String_Max_Length: _TL_('Field should not exceed {{maxlength}} characters'),\r\n Validation_String_Min_Length: _TL_('Field should exceed {{minlength}} characters'),\r\n Validation_String_Invalid_Characters: _TL_('Field contains invalid characters'),\r\n Validation_Number_Require_Numeric: _TL_('Field requires numeric value'),\r\n Validation_Number_Max_Length: _TL_('Number should not exceed max length'),\r\n Validation_Number_Range_Min: _TL_('Number should be larger than {{min}}'),\r\n Validation_Number_Range_Max: _TL_('Number should be smaller than {{max}}'),\r\n Validation_Number_Range_Between: _TL_('Number should be between {{min}} and {{max}}'),\r\n Validation_Array_Size_Max: _TL_('List should have at most {{max}} items'),\r\n Validation_Array_Size_Between: _TL_('List should have at least {{min}} and at most {{max}} items'),\r\n Validation_Array_Items_Invalid: _TL_('Some of items in list are invalid'),\r\n Validation_Array_Items_Duplicate: _TL_('List has duplicate items'),\r\n Validation_NegativeKeywords_ListName_Required: _TL_('The list name is required.'),\r\n Validation_NegativeKeywords_Max_Count: _TL_('Maximum of 5,000 negative keywords'),\r\n Validation_NegativeKeywords_Invalid_Keywords: _TL_('Some of the keyword(s) are invalid: {{invalidKeywords}}'),\r\n Validation_NegativeKeywords_Required: _TL_('At least 1 negative keyword is required.'),\r\n 'Click to learn more about {{item}}': _TL_('Click to learn more about {{item}}'),\r\n 'Click to scope to campaign {{campaignName}}': _TL_('Click to scope to campaign {{campaignName}}'),\r\n}];\r\n","import $ from 'jquery';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { buildLegacyI18n } from '@bingads-webui/build-legacy-i18n';\r\nimport { BudgetLandScapeTable } from '@bingads-webui-campaign/recommendation-inline-budget-view';\r\nimport { budgetLandscapeLegacyStrings } from './budget-landscape-legacy-strings';\r\n\r\nconst getBudgetLandscapeUrl = ({\r\n adInsightApi,\r\n customerId,\r\n accountId,\r\n campaignId,\r\n isSharedBudget,\r\n budgetId,\r\n}) => {\r\n if (isSharedBudget) {\r\n return `${adInsightApi}AdInsight/V2/Customers(${customerId})/Accounts(${accountId})/Recommendation.GetSharedBudgetLandscape(SharedBudgetId=${budgetId})`;\r\n }\r\n\r\n return `${adInsightApi}AdInsight/V2/Customers(${customerId})/Accounts(${accountId})/Campaigns(${campaignId})/Opportunity.GetBudgetLandscape`;\r\n};\r\n\r\nconst fetchBudgetLandscape = ({\r\n serverContext,\r\n scope,\r\n isSharedBudget,\r\n budgetId,\r\n}) => new Promise((resolve, reject) => {\r\n const {\r\n Token,\r\n ServicesEndpoints,\r\n } = serverContext;\r\n const {\r\n AdInsightAPI: adInsightApi,\r\n } = ServicesEndpoints;\r\n const { aid: accountId, cid: customerId, campaignId } = scope.values;\r\n const url = getBudgetLandscapeUrl({\r\n adInsightApi,\r\n customerId,\r\n accountId,\r\n campaignId,\r\n isSharedBudget,\r\n budgetId,\r\n });\r\n\r\n return $.ajax({\r\n url,\r\n type: 'GET',\r\n headers: {\r\n Authorization: `CCMTSmallToken ${Token}`,\r\n },\r\n }).then(results => resolve(results), reject);\r\n});\r\n\r\nexport const getBudgetLandscapeTableView = ({\r\n serverContext,\r\n scope,\r\n currentBudgetAmount,\r\n isSharedBudget,\r\n budgetId,\r\n i18n,\r\n activityLogger,\r\n}) => fetchBudgetLandscape({\r\n serverContext,\r\n scope,\r\n isSharedBudget,\r\n budgetId,\r\n}).then((res) => {\r\n const rawData = _.chain(res).result('value').first().value();\r\n const {\r\n BudgetRange,\r\n CurrentAccount,\r\n } = serverContext;\r\n let tableView = null;\r\n\r\n const budgetRange = {\r\n CeilingValue: BudgetRange.DailyRange.CeilingValue,\r\n FloorValue: BudgetRange.DailyRange.FloorValue,\r\n };\r\n\r\n if (rawData) {\r\n tableView = new BudgetLandScapeTable({\r\n opportunityData: rawData,\r\n i18n: buildLegacyI18n(i18n, budgetLandscapeLegacyStrings, {\r\n currency: CurrentAccount.CurrencyCode,\r\n timeZone: CurrentAccount.TimeZone,\r\n }),\r\n conversionSummaryStatus: rawData.ConversionStatus,\r\n budgetRange,\r\n currentBudget: currentBudgetAmount,\r\n fromBudgetColumn: true,\r\n fromCampaignTab: true,\r\n isSharedBudget,\r\n });\r\n\r\n tableView.render();\r\n\r\n const { campaignId } = scope.values;\r\n\r\n activityLogger.trace(\r\n {\r\n campaignId,\r\n budgetId,\r\n component: 'campaign summary bar fetch budget landscape',\r\n opportunityId: rawData.OpportunityId,\r\n opportunityData: rawData,\r\n currency: tableView.i18n.currency,\r\n ActionName: 'View',\r\n Channel: 'ClientName:bingadsweb[SummaryBarEditing]',\r\n },\r\n 'AdInsight.Budget'\r\n );\r\n }\r\n\r\n return tableView;\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { BackboneInstanceWrapper } from '@bingads-webui-react/backbone-instance-wrapper';\r\nimport { getBudgetLandscapeTableView } from './budget-landscape-table';\r\n\r\nclass BudgetEditorWithLandscapeInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n const {\r\n serverContext,\r\n scope,\r\n budgetAmount,\r\n i18n,\r\n activityLogger,\r\n isSharedBudget,\r\n budgetId,\r\n } = this.props;\r\n\r\n this.budgetLandscapeTable = React.lazy(() => getBudgetLandscapeTableView({\r\n serverContext,\r\n scope,\r\n currentBudgetAmount: budgetAmount,\r\n i18n,\r\n activityLogger,\r\n isSharedBudget,\r\n budgetId,\r\n }).then((tableView) => {\r\n this.props.setTableView(tableView);\r\n\r\n return {\r\n default: () => (\r\n \r\n
),\r\n };\r\n }));\r\n }\r\n\r\n render() {\r\n const BudgetLandscapeTable = this.budgetLandscapeTable;\r\n\r\n return (\r\n {this.props.i18n.getString(_TL_('Loading...'))}}>\r\n );\r\n }\r\n}\r\n\r\nBudgetEditorWithLandscapeInternal.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n serverContext: PropTypes.shape({\r\n BudgetRange: PropTypes.shape({}).isRequired,\r\n CurrentAccount: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n budgetAmount: PropTypes.number,\r\n setTableView: PropTypes.func.isRequired,\r\n activityLogger: PropTypes.shape({\r\n trace: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isSharedBudget: PropTypes.bool,\r\n budgetId: PropTypes.number,\r\n};\r\n\r\nBudgetEditorWithLandscapeInternal.defaultProps = {\r\n budgetAmount: null,\r\n isSharedBudget: false,\r\n budgetId: 0,\r\n};\r\n\r\nconst Wrapped = withServerContext(BudgetEditorWithLandscapeInternal);\r\n\r\nexport { Wrapped as BudgetEditorWithLandscape };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Button } from '@bingads-webui-react/primitive';\r\nimport classNames from 'classnames';\r\nimport { getBaseEditorStyle } from '../styles';\r\n\r\n// TODO: this is a shared editor footer, migrigated it to shared component later.\r\nclass BaseEditorInternal extends React.Component {\r\n static propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n children: PropTypes.node.isRequired,\r\n isValid: PropTypes.bool.isRequired,\r\n isLoading: PropTypes.bool.isRequired,\r\n };\r\n\r\n onSave() {\r\n this.props.onSave();\r\n }\r\n\r\n onCancel() {\r\n this.props.onCancel();\r\n }\r\n\r\n render() {\r\n const {\r\n i18n, classes, children, isValid, isLoading,\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n {children}\r\n
\r\n \r\n this.onSave()}\r\n >{i18n.getString(_TL_('Save'))}\r\n \r\n this.onCancel()}\r\n >{i18n.getString(_TL_('Cancel'))}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nconst wrappers = [\r\n withI18nConsumer,\r\n _.partial(withDefaultStyles, _, getBaseEditorStyle),\r\n];\r\n\r\nconst Wrapped = _.compose(...wrappers)(BaseEditorInternal);\r\n\r\nexport const KEYSENTER = 13;\r\nexport { Wrapped as BaseEditor };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { HelpIcon } from '@bingads-webui-campaign-react/help';\r\nimport { Input, Select } from '@bingads-webui-react/primitive-validation';\r\nimport { Button } from '@bingads-webui-react/primitive';\r\nimport PageContext from '@bingads-webui-static-legacy/page-context';\r\n\r\nexport const BudgetAmountEditor = ({\r\n i18n, errorProcessor, showPerDay, inputClassName, onKeyDown, helpId,\r\n}) => (\r\n \r\n
\r\n {i18n.getString(_TL_('Budget'))} \r\n
\r\n
\r\n {showPerDay && (\r\n \r\n {i18n.getString(_TL_('per day'))}\r\n \r\n )}\r\n
\r\n
\r\n
\r\n
\r\n {i18n.getString(_TL_('To best optimize your campaigns, we recommend a minimum budget of '))} \r\n {currencySymbol + minBudget} \r\n {i18n.getString(_TL_('.'))} \r\n
\r\n
\r\n \r\n {i18n.getString(_TL_('Apply recommendation'))}\r\n \r\n
\r\n\r\n
\r\n {i18n.getString(_TL_('Budget type'))} \r\n \r\n {budgetTypes.map(item => (\r\n {i18n.getString(item.text)} \r\n ))}\r\n \r\n
);\r\n};\r\n\r\nBudgetTypeEditor.propTypes = {\r\n permissions: PropTypes.shape({\r\n IsDeprecateAcceleratedBudgetEnabled: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n selectedBudgetType: PropTypes.PropTypes.oneOf([\r\n 'DailyStandard',\r\n 'DailyAccelerated',\r\n ]).isRequired,\r\n onSelect: PropTypes.func.isRequired,\r\n isDisabled: PropTypes.bool,\r\n};\r\n\r\nBudgetTypeEditor.defaultProps = {\r\n isDisabled: false,\r\n};\r\n","/* eslint-disable react/jsx-no-target-blank */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Budget } from '@bingads-webui-campaign/campaign-ui-schemas';\r\nimport { CampaignType } from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { Form } from '@bingads-webui-react/primitive';\r\nimport { ErrorMessages } from '@bingads-webui-react/validation';\r\nimport { curlyTemplate } from '@bingads-webui-universal/primitive-utilities';\r\nimport { ValidationGroup } from '@bingads-webui-react/primitive-validation';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { MinXandrDailyBudgetRangePerCurrency } from '@bingads-webui-campaign-legacy/common-grid-config/budget/get-budget-range';\r\nimport { isXandrCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport { BudgetEditorWithLandscape } from './budget-landscape';\r\nimport { getBudgetEditorStyle } from '../../styles';\r\nimport { BaseEditor, KEYSENTER } from '../base-editor';\r\nimport { getBulkEditResponseErrors } from '../../helpers';\r\nimport { BudgetAmountEditor, BudgetTypeEditor, BudgetMinRecommend } from '../budget-base-component';\r\n\r\nconst budgetSchema = {\r\n ...Budget,\r\n properties: {\r\n ...Budget.properties,\r\n Amount: {\r\n ...Budget.properties.Amount,\r\n nullable: false,\r\n type: 'number',\r\n maxLength: 15,\r\n },\r\n },\r\n};\r\n\r\nclass CampaignInlineBudgetEditorInternal extends React.Component {\r\n static propTypes = {\r\n permissions: PropTypes.shape({\r\n IsDeprecateAcceleratedBudgetEnabled: PropTypes.bool.isRequired,\r\n IsDeprecateAcceleratedBudgetOptoutEnabled: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n serverContext: PropTypes.shape({\r\n BudgetRange: PropTypes.shape({\r\n DailyRange: PropTypes.shape({\r\n FloorValue: PropTypes.number.isRequired,\r\n CeilingValue: PropTypes.number.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n CurrentAccount: PropTypes.shape({ CurrencyCode: PropTypes.string }).isRequired,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n Type: PropTypes.string.isRequired,\r\n }).isRequired,\r\n hasBudgetLandscape: PropTypes.bool.isRequired,\r\n campaignType: PropTypes.number.isRequired,\r\n budget: PropTypes.shape({\r\n Type: PropTypes.string.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n updateInlineBudget: PropTypes.func.isRequired,\r\n summaryBarActivityLogger: PropTypes.shape({\r\n summaryBarBudgetActivity: PropTypes.shape({ create: PropTypes.func }).isRequired,\r\n }).isRequired,\r\n campaignSubType: PropTypes.string.isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.activityLogger = props.summaryBarActivityLogger\r\n && props.summaryBarActivityLogger.summaryBarBudgetActivity.create();\r\n\r\n const { serverContext, campaignSubType } = props;\r\n\r\n const { BudgetRange } = serverContext;\r\n\r\n this.minimumBudget = BudgetRange.DailyRange.FloorValue;\r\n this.maximumBudget = BudgetRange.DailyRange.CeilingValue;\r\n\r\n if (isXandrCampaign(campaignSubType) && MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode]) {\r\n this.minimumBudget = MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode];\r\n }\r\n }\r\n\r\n state = {\r\n isValid: false,\r\n data: this.props.data,\r\n serverErrors: [],\r\n };\r\n\r\n onKeyDown = (e) => {\r\n if (e && e.which === KEYSENTER) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.onSave();\r\n }\r\n };\r\n\r\n onValidate = (result) => {\r\n if (result.data.Amount !== this.state.data.Amount) {\r\n this.setState({\r\n isValid: result.isValid,\r\n data: { ...this.state.data, Amount: result.data.Amount },\r\n });\r\n }\r\n };\r\n\r\n onSave = () => {\r\n if (this.state.isValid) {\r\n const updateBudget = (hasBudgetLandscape = false) => this.props.updateInlineBudget({ budget: this.state.data })\r\n .then((response) => {\r\n this.props.onSave(response);\r\n if (this.activityLogger) {\r\n if (this.props.data.Amount && this.props.data.Amount >= 0.1 && this.state.data && this.state.data.Amount < ((this.props.data.Amount)) * 0.5.toFixed(2)) {\r\n this.activityLogger.trace(`Bid${this.state.data.Amount} Less than 50% of current budget${this.props.data.Amount}`);\r\n }\r\n this.activityLogger.trace(\r\n {\r\n updateStatus: 'successful',\r\n value: this.state.data,\r\n component: 'campaign summary bar',\r\n budgetType: 'inline budget',\r\n hasBudgetLandscape,\r\n ...(hasBudgetLandscape ? {\r\n ActionName: 'Accept',\r\n Channel: 'ClientName:bingadsweb[SummaryBarEditing]',\r\n campaignId: this.tableView.campaignId,\r\n opportunityId: this.tableView.opportunityId,\r\n suggestedBudget: this.tableView.ko_model.rawSuggestedBudget,\r\n currency: this.tableView.i18n.currency,\r\n } : {}),\r\n },\r\n 'AdInsight.Budget'\r\n );\r\n }\r\n })\r\n .catch((response) => {\r\n const serverErrors = getBulkEditResponseErrors(response, this.props.i18n);\r\n this.setState({ serverErrors });\r\n\r\n // server error is reported to user trace here as well\r\n if (this.activityLogger) {\r\n this.activityLogger.trace({\r\n updateStatus: 'failed',\r\n serverErrors,\r\n component: 'campaign summary bar',\r\n budgetType: 'inline budget',\r\n hasBudgetLandscape,\r\n });\r\n }\r\n });\r\n\r\n if (this.tableView) {\r\n if (this.tableView.getSelectedNewBudget() === '') {\r\n this.props.onCancel();\r\n } else {\r\n this.setState({ data: { ...this.state.data, Amount: this.tableView.getSelectedNewBudget() } }, () => updateBudget(true));\r\n }\r\n } else {\r\n updateBudget();\r\n }\r\n }\r\n };\r\n\r\n onSelect = (value) => {\r\n this.setState({ data: { ...this.state.data, Type: value } });\r\n };\r\n\r\n setTableView = (tableView) => {\r\n this.tableView = tableView;\r\n\r\n this.tableView.on('saveCustomValueWithKeyboard', () => {\r\n this.onSave();\r\n });\r\n };\r\n\r\n updateBudgetSchemaRange = () => {\r\n budgetSchema.properties.Amount.minimum = this.minimumBudget;\r\n budgetSchema.properties.Amount.maximum = this.maximumBudget;\r\n };\r\n\r\n errorProcessor = (errors) => {\r\n const { serverContext, i18n } = this.props;\r\n const { CurrentAccount } = serverContext;\r\n const { CurrencyCode } = CurrentAccount;\r\n\r\n const customErrors = {\r\n range: curlyTemplate(i18n.getString(_TL_('Your budget should be greater than {{accountCurrencyCode}} {{dailyRangeFloorValue}} and less than your daily max. The daily max. is your monthly budget averaged out over the number of days left in the month.')))({\r\n accountCurrencyCode: CurrencyCode,\r\n dailyRangeFloorValue: this.minimumBudget.toFixed(2),\r\n }),\r\n };\r\n return _.map(\r\n errors,\r\n (oldError, key) => customErrors[key] || oldError\r\n );\r\n };\r\n\r\n applyRecommend = () => {\r\n if (this.activityLogger) {\r\n this.activityLogger.trace('BCCForBudgetMinimumRecommendation: apply');\r\n }\r\n this.setState({\r\n data: { ...this.state.data, Amount: (this.props.data.Amount * 0.5).toFixed(2) },\r\n });\r\n };\r\n\r\n renderInlineBudget = (i18n, data, permissions, isDisabled, showBudgetMinRecommend) => (\r\n \r\n
);\r\n\r\n renderInlineBudgetWithLandscape = (i18n, data, permissions, isDisabled, scope) => (\r\n \r\n
);\r\n\r\n render() {\r\n const {\r\n i18n, classes, onCancel, campaignType, permissions, hasBudgetLandscape, scope, campaignSubType,\r\n } = this.props;\r\n const {\r\n data,\r\n serverErrors,\r\n isValid,\r\n } = this.state;\r\n const isDisabled = campaignType === CampaignType.Smart;\r\n this.showBudgetLandscape = hasBudgetLandscape && permissions.IsBudgetInlineSuggestionEnabled;\r\n\r\n this.updateBudgetSchemaRange(budgetSchema);\r\n this.showBudgetMinRecommend = permissions.dynamic && permissions.dynamic.BCCBudgetImprovementEnabled && this.props.data.Amount && this.props.data.Amount >= 0.1 && data.Amount && (data.Amount < (this.props.data.Amount * 0.5).toFixed(2)) && !isXandrCampaign(campaignSubType);\r\n\r\n if (this.activityLogger && this.showBudgetMinRecommend) {\r\n this.activityLogger.trace('BCCForBudgetMinimumRecommendation: show');\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst wrappers = [\r\n withServerContext,\r\n _.partial(withDefaultStyles, _, getBudgetEditorStyle),\r\n];\r\n\r\nconst Wrapped = _.compose(...wrappers)(CampaignInlineBudgetEditorInternal);\r\n\r\nexport { Wrapped as CampaignInlineBudgetEditor };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Budget } from '@bingads-webui-campaign/campaign-ui-schemas';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Form } from '@bingads-webui-react/primitive';\r\nimport { ErrorMessages } from '@bingads-webui-react/validation';\r\nimport { ValidationGroup } from '@bingads-webui-react/primitive-validation';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { getBudgetEditorStyle } from '../styles';\r\nimport { BaseEditor, KEYSENTER } from './base-editor';\r\nimport { getBulkEditResponseErrors } from '../helpers';\r\nimport { BudgetAmountEditor } from './budget-base-component';\r\nimport { BudgetEditorWithLandscape } from './campaign-budget/budget-landscape';\r\n\r\nconst budgetSchema = {\r\n ...Budget,\r\n properties: {\r\n ...Budget.properties,\r\n Amount: {\r\n ...Budget.properties.Amount,\r\n nullable: false,\r\n type: 'number',\r\n maxLength: 15,\r\n },\r\n },\r\n};\r\n\r\nclass SharedBudgetEditorInternal extends React.Component {\r\n static propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n }).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n renderCustomContent: PropTypes.func,\r\n updateSharedBudget: PropTypes.func.isRequired,\r\n summaryBarActivityLogger: PropTypes.shape({\r\n summaryBarBudgetActivity: PropTypes.any,\r\n }).isRequired,\r\n helpId: PropTypes.isRequired,\r\n showBudgetLandscape: PropTypes.bool,\r\n budgetId: PropTypes.isRequired,\r\n };\r\n\r\n static defaultProps = {\r\n renderCustomContent: null,\r\n showBudgetLandscape: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.activityLogger = props.summaryBarActivityLogger\r\n && props.summaryBarActivityLogger.summaryBarBudgetActivity.create();\r\n }\r\n\r\n state = {\r\n isValid: false,\r\n data: this.props.data,\r\n serverErrors: [],\r\n }\r\n\r\n onValidate = (result) => {\r\n if (result.data.Amount !== this.state.data.Amount) {\r\n this.setState({\r\n isValid: result.isValid,\r\n data: { Amount: result.data.Amount },\r\n });\r\n }\r\n }\r\n\r\n onKeyDown = (e) => {\r\n if (e && e.which === KEYSENTER) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.onSave();\r\n }\r\n }\r\n\r\n onSave = () => {\r\n if (this.state.isValid) {\r\n const updateSharedBudget = (hasBudgetLandscape = false) => this.props.updateSharedBudget(this.state.data)\r\n .then((response) => {\r\n this.props.onSave(response);\r\n if (this.activityLogger) {\r\n this.activityLogger.trace(\r\n {\r\n updateStatus: 'successful',\r\n value: this.state.data,\r\n component: 'campaign summary bar',\r\n budgetType: 'inline shared budget',\r\n hasBudgetLandscape,\r\n ...(hasBudgetLandscape ? {\r\n ActionName: 'Accept',\r\n budgetId: this.props.budgetId,\r\n Channel: 'ClientName:bingadsweb[SummaryBarEditing]',\r\n campaignId: this.tableView.campaignId,\r\n opportunityId: this.tableView.opportunityId,\r\n suggestedBudget: this.tableView.ko_model.rawSuggestedBudget,\r\n currency: this.tableView.i18n.currency,\r\n } : {}),\r\n },\r\n 'AdInsight.Budget'\r\n );\r\n }\r\n })\r\n .catch((response) => {\r\n const serverErrors = getBulkEditResponseErrors(response, this.props.i18n);\r\n this.setState({ serverErrors });\r\n\r\n // server error is reported to user trace here as well\r\n if (this.activityLogger) {\r\n this.activityLogger.trace({\r\n updateStatus: 'failed',\r\n serverErrors,\r\n component: 'campaign summary bar',\r\n budgetType: 'inline shared budget',\r\n hasBudgetLandscape,\r\n });\r\n }\r\n });\r\n\r\n if (this.tableView) {\r\n if (this.tableView.getSelectedNewBudget() === '') {\r\n // User did nothing on on the table.\r\n this.props.onCancel();\r\n } else {\r\n this.setState({ data: { ...this.state.data, Amount: this.tableView.getSelectedNewBudget() } }, () => updateSharedBudget(true));\r\n }\r\n } else {\r\n updateSharedBudget();\r\n }\r\n }\r\n }\r\n\r\n setTableView = (tableView) => {\r\n if (tableView) {\r\n this.tableView = tableView;\r\n this.tableView.on('saveCustomValueWithKeyboard', () => {\r\n this.onSave();\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n i18n,\r\n classes,\r\n onCancel,\r\n renderCustomContent,\r\n helpId,\r\n showBudgetLandscape,\r\n scope,\r\n budgetId,\r\n } = this.props;\r\n const {\r\n data,\r\n serverErrors,\r\n isValid,\r\n } = this.state;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst wrappers = [\r\n withI18nConsumer,\r\n _.partial(withDefaultStyles, _, getBudgetEditorStyle),\r\n];\r\n\r\nconst Wrapped = _.compose(...wrappers)(SharedBudgetEditorInternal);\r\n\r\nexport { Wrapped as SharedBudgetEditor };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { getRouterDep } from '@bingads-webui-campaign-react/legacy-router-dep';\r\nimport { SharedBudgetEditor } from '../shared-budget-editor';\r\n\r\nexport class CampaignSharedBudgetEditor extends React.Component {\r\n static propTypes = {\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n }).isRequired,\r\n budgetId: PropTypes.number.isRequired,\r\n updateSharedBudget: PropTypes.func.isRequired,\r\n campaignId: PropTypes.number.isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n summaryBarActivityLogger: PropTypes.shape({\r\n summaryBarBudgetActivity: PropTypes.any,\r\n }).isRequired,\r\n hasBudgetLandscape: PropTypes.bool.isRequired,\r\n };\r\n\r\n\r\n getRouteUrl(routeName, params) {\r\n const { scope, siteMap } = this.props;\r\n\r\n const { getRouteUrl } = getRouterDep(scope, siteMap);\r\n\r\n return getRouteUrl(routeName, params);\r\n }\r\n\r\n getBudgetLink(budgetId) {\r\n return this.getRouteUrl('shared_budget_edit', { budget_id: budgetId });\r\n }\r\n\r\n getCampaignSettingsLink(campaignId) {\r\n return this.getRouteUrl('campaign_edit', { campaign_id: campaignId });\r\n }\r\n\r\n renderBudgetMessage = () => {\r\n const {\r\n i18n, budgetId, campaignId,\r\n } = this.props;\r\n const budgetLink = this.getBudgetLink(budgetId);\r\n const campaignSettingsLink = this.getCampaignSettingsLink(campaignId);\r\n\r\n return (\r\n );\r\n };\r\n\r\n render() {\r\n const {\r\n onSave,\r\n onCancel,\r\n data,\r\n updateSharedBudget,\r\n summaryBarActivityLogger,\r\n hasBudgetLandscape,\r\n scope,\r\n budgetId,\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst wrappers = [\r\n withServerContext,\r\n _.partial(withDefaultStyles, _, getBidEditorStyle),\r\n];\r\n\r\nconst Wrapped = _.compose(...wrappers)(AdGroupBidEditorInternal);\r\n\r\nexport { Wrapped as AdGroupBidEditor };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { BackboneInstanceWrapper } from '@bingads-webui-react/backbone-instance-wrapper';\r\nimport { CampaignsDatePicker } from '@bingads-webui-campaign/campaigns-date-picker';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\n\r\nclass BaseDateEditorInternal extends React.PureComponent {\r\n render() {\r\n const {\r\n minDate,\r\n maxDate,\r\n selectedDate,\r\n allowNoDate,\r\n i18n,\r\n editorName,\r\n setDatePicker,\r\n } = this.props;\r\n\r\n this.datePicker = new CampaignsDatePicker({\r\n minDate,\r\n maxDate,\r\n selectedDate,\r\n allowNoDate,\r\n noDateLabel: i18n.getString(_TL_('No end date')),\r\n dateLabel: i18n.getString(_TL_('End by')),\r\n datePickerAriaLabel: editorName === 'end-date' ? i18n.getString(_TL_('End date picker')) : i18n.getString(_TL_('Start date picker')),\r\n noDateGroupAriaLabel: i18n.getString(_TL_('No end date')),\r\n });\r\n\r\n setDatePicker(this.datePicker);\r\n\r\n return (\r\n \r\n
);\r\n }\r\n}\r\n\r\nBaseDateEditorInternal.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n editorName: PropTypes.string.isRequired,\r\n minDate: PropTypes.instanceOf(Date),\r\n maxDate: PropTypes.instanceOf(Date),\r\n selectedDate: PropTypes.instanceOf(Date),\r\n allowNoDate: PropTypes.bool,\r\n setDatePicker: PropTypes.func.isRequired,\r\n};\r\n\r\nBaseDateEditorInternal.defaultProps = {\r\n minDate: null,\r\n maxDate: null,\r\n selectedDate: null,\r\n allowNoDate: false,\r\n};\r\n\r\nexport const BaseDateEditor = withI18nConsumer(BaseDateEditorInternal);\r\n\r\nexport const parseDate = (datetime) => {\r\n if (!datetime) {\r\n return null;\r\n }\r\n\r\n const date = datetime.substr(0, 10).replace(/-/g, '/');\r\n\r\n return new Date(date);\r\n};\r\n\r\nexport const dateFormatter = i18n => i18n.dateFormatter({\r\n timeZone: null, raw: 'yyyy-MM-dd',\r\n});\r\n","/* istanbul ignore file */ // ignore this file for component test as we will cover it in selenium test\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { Form } from '@bingads-webui-react/primitive';\r\nimport { ErrorMessages } from '@bingads-webui-react/validation';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { BaseDateEditor, parseDate, dateFormatter } from './base-date-editor';\r\nimport { BaseEditor } from '../base-editor';\r\nimport { getOdataResponseErrors } from '../../helpers';\r\nimport { getDateEditorStyle } from '../../styles';\r\n\r\nclass StartDateEditorInternal extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.activityLogger = props.summaryBarActivityLogger\r\n && props.summaryBarActivityLogger.summaryBarExperimentCampaignActivity.create();\r\n }\r\n\r\n state = {\r\n serverErrors: [],\r\n }\r\n\r\n onSave = () => {\r\n if (this.datePicker) {\r\n const {\r\n i18n, changeDate,\r\n } = this.props;\r\n const newSelectedDate = this.datePicker.getSelectedDate();\r\n const startDate = dateFormatter(i18n)(newSelectedDate);\r\n\r\n changeDate({ startDate })\r\n .then((response) => {\r\n this.props.onSave(response);\r\n if (this.activityLogger) {\r\n this.activityLogger.trace({\r\n updateStatus: 'successful',\r\n value: { startDate },\r\n component: 'experiment campaign summary bar',\r\n });\r\n }\r\n })\r\n .catch((response) => {\r\n const serverErrors = getOdataResponseErrors(response, this.props.i18n);\r\n this.setState({ serverErrors });\r\n\r\n // server error is reported to user trace here as well\r\n if (this.activityLogger) {\r\n this.activityLogger.trace({\r\n updateStatus: 'failed',\r\n serverErrors,\r\n component: 'experiment campaign summary bar',\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n setDatePicker = (datePicker) => {\r\n this.datePicker = datePicker;\r\n }\r\n\r\n render() {\r\n const {\r\n data, classes, onCancel,\r\n } = this.props;\r\n const minDate = new Date();\r\n const maxDate = parseDate(data.endDate);\r\n const selectedDate = parseDate(data.startDate);\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nStartDateEditorInternal.propTypes = {\r\n data: PropTypes.shape({\r\n startDate: PropTypes.string,\r\n endDate: PropTypes.string,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n changeDate: PropTypes.func.isRequired,\r\n summaryBarActivityLogger: PropTypes.shape({\r\n summaryBarExperimentCampaignActivity: PropTypes.any,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n dateFormatter: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nconst wrappers = [\r\n withI18nConsumer,\r\n _.partial(withDefaultStyles, _, getDateEditorStyle),\r\n];\r\n\r\nconst Wrapped = _.compose(...wrappers)(StartDateEditorInternal);\r\n\r\nexport { Wrapped as StartDateEditor };\r\n","/* istanbul ignore file */ // ignore this file for component test as we will cover it in selenium test\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { Form } from '@bingads-webui-react/primitive';\r\nimport { ErrorMessages } from '@bingads-webui-react/validation';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { BaseDateEditor, parseDate, dateFormatter } from './base-date-editor';\r\nimport { BaseEditor } from '../base-editor';\r\nimport { getOdataResponseErrors } from '../../helpers';\r\nimport { getDateEditorStyle } from '../../styles';\r\n\r\nclass EndDateEditorInternal extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.activityLogger = props.summaryBarActivityLogger\r\n && props.summaryBarActivityLogger.summaryBarExperimentCampaignActivity.create();\r\n }\r\n\r\n state = {\r\n serverErrors: [],\r\n }\r\n\r\n onSave = () => {\r\n if (this.datePicker) {\r\n const {\r\n i18n, changeDate,\r\n } = this.props;\r\n const newSelectedDate = this.datePicker.getSelectedDate();\r\n const endDate = newSelectedDate ? dateFormatter(i18n)(newSelectedDate) : null;\r\n changeDate({ endDate })\r\n .then((response) => {\r\n this.props.onSave(response);\r\n if (this.activityLogger) {\r\n this.activityLogger.trace({\r\n updateStatus: 'successful',\r\n value: { endDate },\r\n component: 'experiment campaign summary bar',\r\n });\r\n }\r\n })\r\n .catch((response) => {\r\n const serverErrors = getOdataResponseErrors(response, this.props.i18n);\r\n this.setState({ serverErrors });\r\n\r\n // server error is reported to user trace here as well\r\n if (this.activityLogger) {\r\n this.activityLogger.trace({\r\n updateStatus: 'failed',\r\n serverErrors,\r\n component: 'experiment campaign summary bar',\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n setDatePicker = (datePicker) => {\r\n this.datePicker = datePicker;\r\n }\r\n\r\n render() {\r\n const {\r\n data, classes, onCancel,\r\n } = this.props;\r\n const minDate = parseDate(data.startDate);\r\n const selectedDate = parseDate(data.endDate);\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nEndDateEditorInternal.propTypes = {\r\n data: PropTypes.shape({\r\n startDate: PropTypes.string,\r\n endDate: PropTypes.string,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n changeDate: PropTypes.func.isRequired,\r\n summaryBarActivityLogger: PropTypes.shape({\r\n summaryBarExperimentCampaignActivity: PropTypes.any,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n dateFormatter: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nconst wrappers = [\r\n withI18nConsumer,\r\n _.partial(withDefaultStyles, _, getDateEditorStyle),\r\n];\r\n\r\nconst Wrapped = _.compose(...wrappers)(EndDateEditorInternal);\r\n\r\nexport { Wrapped as EndDateEditor };\r\n","import _ from 'underscore';\r\nimport React, { useContext, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { formatPercentOneDecimal, CHANNEL_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\nimport { HighchartReactWrapper } from '@bingads-webui-react/highchart-react-wrapper';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { TooltipHost, DirectionalHint, TooltipDelay, Link } from '@fluentui/react';\r\n\r\nconst getChartOptions = (Available, Gained, Dismissed) => ({\r\n chart: {\r\n width: 50,\r\n height: 17,\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: [-2, 102],\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 {\r\n data: [Available * 100],\r\n color: '#FFFFFF',\r\n },\r\n {\r\n data: [Dismissed * 100],\r\n color: '#ABDBFF',\r\n },\r\n {\r\n data: [Gained * 100],\r\n color: '#0078D4',\r\n },\r\n ],\r\n});\r\n\r\nconst hostStyles = {\r\n root: {\r\n display: 'inline-block',\r\n },\r\n};\r\nconst calloutProps = { gapSpace: 7 };\r\nconst 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\nconst viewRecommendationStyle = { marginTop: '10px' };\r\n\r\nexport function OptimizationScoreItem(props) {\r\n const { scope } = useContext(ScopeContext);\r\n const { osData, i18n } = props;\r\n\r\n const navigate = useCallback((event) => {\r\n if (event && (event.button !== 0 ||\r\n event.ctrlKey ||\r\n event.shiftKey ||\r\n event.altKey ||\r\n event.metaKey)) {\r\n return true;\r\n }\r\n\r\n event.preventDefault();\r\n scope.set(_.extend({ recsrc: CHANNEL_TYPES.CAMPAIGN_SUMMARY_BAR }, scope.values));\r\n scope.save('/campaign/vnext/recommendations/All');\r\n return false;\r\n }, [scope]);\r\n\r\n const calloutContent = useCallback(() => {\r\n const url = `/campaign/vnext/recommendations/All?${\r\n scope.stringify(_.extend(\r\n {\r\n recsrc: CHANNEL_TYPES.CAMPAIGN_SUMMARY_BAR,\r\n },\r\n scope.values\r\n ))}`;\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('View relevant recommendations to improve your optimization score'))}\r\n
\r\n \r\n {i18n.getString(_TL_('View recommendations'))}\r\n \r\n
\r\n
\r\n {formatPercentOneDecimal(Gained + Dismissed, i18n)}
\r\n
\r\n \r\n );\r\n }\r\n return (\r\n -
\r\n );\r\n }, [i18n, osData]);\r\n\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('Optimization score'))} \r\n {getScore()}
\r\n \r\n {getExperimentStatusMap(i18n)[status]} ),\r\n});\r\n\r\nconst experimentSplitOptionEntityItem = (i18n, { experimentType }) => ({\r\n label: i18n.getString(_TL_('Split option')),\r\n className: 'summary-bar-experiment-split-option',\r\n renderContent: () => (\r\n \r\n {getExperimentTypeMap(i18n)[experimentType]}\r\n ),\r\n canEdit: false,\r\n});\r\n\r\nconst originalCampaignEntityItem = (i18n, { originalCampaignId, originalCampaignName, scope }) => ({\r\n label: i18n.getString(_TL_('Original campaign')),\r\n className: 'summary-bar-original-campaign',\r\n ariaLabel: i18n.getString(_TL_('Go to original campaign')),\r\n canEdit: true,\r\n onClick: event => campaignClickHandler(event, originalCampaignId, scope),\r\n renderContent: () => (\r\n \r\n
\r\n ),\r\n});\r\n\r\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\r\nconst getPanelProps = ({ title, onClose, ...other }) => (isOpen, closePanel) => ({\r\n title,\r\n isOpen,\r\n onClose: () => {\r\n closePanel();\r\n if (onClose) {\r\n onClose();\r\n }\r\n },\r\n getChildren: () => (\r\n \r\n
{`The ${title} is not implemented yet`}
\r\n
\r\n {curlyTemplate(this.i18n.getString(_TL_('{{budget}}/day')))({ budget: amount.toFixed(2) })}\r\n {canEdit ? (\r\n
\r\n );\r\n };\r\n\r\n renderSharedBudgetType = () => {\r\n const typeLocalize = result({\r\n Accelerated: this.i18n.getString(_TL_('Accelerated')),\r\n DailyStandard: this.i18n.getString(_TL_('Standard')),\r\n }, this.budget.Type);\r\n\r\n return ({typeLocalize}
);\r\n }\r\n\r\n renderSharedBudgetBreadCrumb = () => {\r\n const items = [{\r\n key: 'shared-library',\r\n text: this.i18n.getString(_TL_('Shared library')),\r\n }, {\r\n key: 'shared-budgets',\r\n text: this.i18n.getString(_TL_('Shared budgets')),\r\n onClick: () => {\r\n this.scope.remove('budgetId');\r\n this.scope.save('/campaign/vnext/sharedbudgets');\r\n },\r\n }, {\r\n key: 'shared-budget-name',\r\n text: this.budget.Name,\r\n isCurrentItem: true,\r\n }];\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { notificationApi } from '@bingads-webui-campaign/notification-center';\r\nimport { shellTips } from '@bingads-webui-campaign-react/shell-ui-common';\r\n\r\n// campaign by id api don't return delivery status information\r\nexport const WithCampaignRepository = ({\r\n campaignLoadFallback, WrappedComponent, i18n,\r\n}) => (\r\n currentAccount.Campaigns.get({\r\n // finally this would become $expand=Budget&$select=Id,Name,Status,CampaignType,BiddingScheme,ExperimentId,CampaignSubType\r\n top: 1,\r\n filter: { where: `Id eq ${currentCampaign.navigation.key}` },\r\n select: [\r\n 'Id',\r\n 'Name',\r\n 'Status',\r\n 'CampaignType',\r\n 'DeliveryStatus',\r\n 'DeliveryStatusDetails',\r\n 'Budget',\r\n 'BiddingScheme',\r\n 'ExperimentId',\r\n 'CampaignSubType',\r\n ],\r\n })\r\n }\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : null)}\r\n fallback={campaignLoadFallback}\r\n onError={() => {\r\n notificationApi.showWarning(i18n.getString(shellTips.shellDataError));\r\n return campaignLoadFallback;\r\n }}\r\n >\r\n { campaignFromOData =>\r\n ( 0 ? campaignFromOData.value[0] : null} />) }\r\n \r\n);\r\n\r\nWithCampaignRepository.propTypes = {\r\n campaignLoadFallback: PropTypes.element.isRequired,\r\n WrappedComponent: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { notificationApi } from '@bingads-webui-campaign/notification-center';\r\nimport { shellTips } from '@bingads-webui-campaign-react/shell-ui-common';\r\n\r\nexport const WithAdGroupRepository = ({\r\n campaignLoadFallback, WrappedComponent, i18n, ...passThroughProps\r\n}) => (\r\n currentAdGroup.get({\r\n // finally this would become $expand=Campaign&$select=Id,Name,EntityStatus,SearchBid,BiddingSchema,DisplayBiddingStrategyType,Medium\r\n select: ['Id', 'Name', 'EntityStatus', 'SearchBid', 'CpvBid', 'CpmBid', 'CpcBid', 'BiddingScheme', 'DisplayBiddingStrategyType', 'Medium', 'UseOptimizedTargeting', 'DealMinimumBid'],\r\n })\r\n }\r\n escapeHatch={({ currentAdGroup }) => (currentAdGroup ? undefined : null)}\r\n fallback={campaignLoadFallback}\r\n onError={() => {\r\n notificationApi.showWarning(i18n.getString(shellTips.shellDataError));\r\n return campaignLoadFallback;\r\n }}\r\n >\r\n {adGroupFromOData =>\r\n ( currentAccount.Experiments.$withKey(experimentId).get({\r\n select: [\r\n 'Id',\r\n 'EndDate',\r\n 'StartDate',\r\n 'ExperimentType',\r\n 'ExperimentName',\r\n 'ExperimentCampaignId',\r\n 'BaseCampaignId',\r\n 'BaseCampaignName',\r\n 'Status',\r\n 'TrafficSplitPercent',\r\n ],\r\n })}\r\n escapeHatch={() => (experimentId ? undefined : null)}\r\n fallback={campaignLoadFallback}\r\n onError={() => {\r\n notificationApi.showWarning(i18n.getString(shellTips.shellDataError));\r\n return campaignLoadFallback;\r\n }}\r\n >\r\n { experimentFromOData =>\r\n ( {\r\n const currentBudget = currentAccount.Budgets.$withKey(budgetId);\r\n return currentBudget.get();\r\n }}\r\n fallback={campaignLoadFallback}\r\n onError={() => {\r\n notificationApi.showWarning(i18n.getString(shellTips.shellDataError));\r\n return campaignLoadFallback;\r\n }}\r\n >\r\n { sharedBudgetFromOData =>\r\n ( currentCampaign.CampaignCriterions.$cast('Model.CampaignCriterion').get({\r\n filter: { where: \"isof(Criterion,'Model.LocationCriterion') or isof(Criterion,'Model.RadiusCriterion') or isof(Criterion,'Model.DeviceCriterion')\" },\r\n })\r\n }\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : null)}\r\n fallback={( currentAdGroup.AdGroupCriterions.$cast('Model.AdGroupCriterion').get({\r\n filter: { where: \"isof(Criterion,'Model.LocationCriterion') or isof(Criterion,'Model.RadiusCriterion') or isof(Criterion,'Model.DeviceCriterion')\" },\r\n })\r\n }\r\n escapeHatch={({ currentAdGroup }) => (currentAdGroup ? undefined : null)}\r\n fallback={( currentCampaign.AudienceAssociations['Default.GridData'].$makeCall({\r\n query: {\r\n top: 3,\r\n select: ['AudienceCriterion', 'Level'],\r\n orderby: { 'AudienceCriterion/AudienceName': -1 },\r\n },\r\n payload: {\r\n gridDataParameters: {\r\n DateRange: {\r\n StartDate: i18n.formatDate(new Date(), {\r\n raw: 'yyyy-MM-dd',\r\n }),\r\n EndDate: i18n.formatDate(new Date(), {\r\n raw: 'yyyy-MM-dd',\r\n }),\r\n },\r\n },\r\n },\r\n })\r\n }\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : null)}\r\n fallback={( currentAdGroup.AudienceAssociations['Default.GridData'].$makeCall({\r\n query: {\r\n top: 3,\r\n select: ['AudienceCriterion', 'Level'],\r\n orderby: { 'AudienceCriterion/AudienceName': -1 },\r\n },\r\n payload: {\r\n gridDataParameters: {\r\n DateRange: {\r\n StartDate: i18n.formatDate(new Date(), {\r\n raw: 'yyyy-MM-dd',\r\n }),\r\n EndDate: i18n.formatDate(new Date(), {\r\n raw: 'yyyy-MM-dd',\r\n }),\r\n },\r\n },\r\n },\r\n })\r\n }\r\n escapeHatch={({ currentAdGroup }) => (currentAdGroup ? undefined : null)}\r\n fallback={(\r\n \r\n {i18n.getString(_TL_('Thank you for your feedback'))}\r\n \r\n \r\n {\r\n onDone();\r\n logActivity(`page: ${getPageIndex()}, crossOutButton: done`);\r\n }}\r\n componentRef={ref}\r\n />\r\n
\r\n \r\n );\r\n});\r\n\r\nconst QuestionHeader = forwardRef((props: {\r\n onBack: any,\r\n onDismiss: any,\r\n isMiddlePage: boolean,\r\n classes: any,\r\n}, ref: any): JSX.Element => {\r\n const {\r\n onBack,\r\n onDismiss,\r\n isMiddlePage,\r\n classes,\r\n } = props;\r\n\r\n const i18n: I18n = useContext(I18nContext);\r\n\r\n // @ts-ignore\r\n const surveyContext : SurveyContextType = useContext(SurveyContext);\r\n const {\r\n logActivity,\r\n getPageIndex,\r\n } = surveyContext;\r\n\r\n return (\r\n \r\n \r\n {isMiddlePage &&\r\n { onBack(); logActivity(`page: ${getPageIndex()}, backButton: back`); }}\r\n componentRef={ref}\r\n />\r\n }\r\n \r\n {i18n.getString(_TL_('Feedback to Microsoft'))}\r\n \r\n
\r\n \r\n { onDismiss('icon'); logActivity(`page: ${getPageIndex()}, crossOutButton: dismiss`); }}\r\n componentRef={isMiddlePage ? undefined : ref}\r\n />\r\n
\r\n \r\n );\r\n});\r\n\r\ninterface HeaderProps {\r\n isFirstPage: boolean;\r\n isEndingPage: boolean;\r\n classes: any;\r\n onDismiss: any;\r\n onBack: any;\r\n onDone: any;\r\n}\r\n\r\nexport const Header = forwardRef((props: HeaderProps, ref): JSX.Element => {\r\n const {\r\n isFirstPage,\r\n isEndingPage,\r\n } = props;\r\n\r\n const classes: any = useDefaultStyles(() => ({\r\n title: {\r\n fontSize: '16px',\r\n color: theme.palette.black,\r\n fontWeight: 600,\r\n },\r\n header: {\r\n flex: '1 1 auto',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n '& button': {\r\n padding: 'unset',\r\n marginTop: 'unset',\r\n },\r\n marginBottom: '8px',\r\n },\r\n backIconButton: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n '& button.ms-Button': {\r\n paddingLeft: 0,\r\n marginLeft: 0,\r\n width: 'unset',\r\n },\r\n '& button.ms-Button:hover': {\r\n color: 'unset',\r\n backgroundColor: 'unset',\r\n },\r\n '& button.ms-Button i': {\r\n paddingLeft: 0,\r\n marginLeft: 0,\r\n },\r\n },\r\n closeIconButton: {\r\n '& button.ms-Button': {\r\n paddingRight: 0,\r\n marginRight: 0,\r\n width: 'unset',\r\n },\r\n '& button.ms-Button i': {\r\n paddingRight: 0,\r\n marginRight: 0,\r\n },\r\n '& button.ms-Button:hover': {\r\n color: 'unset',\r\n backgroundColor: 'unset',\r\n },\r\n },\r\n doneIconButton: {\r\n '& button.ms-Button': {\r\n paddingRight: 0,\r\n marginRight: 0,\r\n width: 'unset',\r\n },\r\n '& button.ms-Button i': {\r\n paddingRight: 0,\r\n marginRight: 0,\r\n },\r\n '& button.ms-Button:hover': {\r\n color: 'unset',\r\n backgroundColor: 'unset',\r\n },\r\n },\r\n }));\r\n\r\n const isMiddlePage = useMemo(() =>\r\n !isFirstPage && !isEndingPage, [isFirstPage, isEndingPage]);\r\n\r\n return (\r\n \r\n {isEndingPage ?\r\n
\r\n );\r\n});\r\n","import React, { useContext, Fragment, forwardRef } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Link,\r\n PrimaryButton,\r\n DefaultButton,\r\n} from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SurveyContext } from '@bingads-webui-campaign-react/survey-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { theme } from '../../../styles';\r\nimport { I18n } from '../../../survey.types';\r\nimport { SurveyContextType } from '../../../survey-context';\r\n\r\nfunction PrivacyStatement(props: { classes: any }): JSX.Element {\r\n const {\r\n classes,\r\n } = props;\r\n\r\n const i18n: I18n = useContext(I18nContext);\r\n\r\n return (\r\n \r\n (\r\n \r\n {`${text} `}\r\n
\r\n );\r\n}\r\n\r\nconst EndingPageFooter = forwardRef((props: { onDone: any; classes: any }, ref: any): JSX.Element => {\r\n const {\r\n onDone,\r\n classes,\r\n } = props;\r\n\r\n const i18n: I18n = useContext(I18nContext);\r\n // @ts-ignore\r\n const surveyContext : SurveyContextType = useContext(SurveyContext);\r\n const {\r\n logActivity,\r\n getPageIndex,\r\n } = surveyContext;\r\n\r\n return (\r\n \r\n
{\r\n onDone();\r\n logActivity(`page: ${getPageIndex()}, doneButton: done`);\r\n }}\r\n componentRef={ref}\r\n />\r\n \r\n {isLastPage ?
}\r\n \r\n {isLastPage ?\r\n (
{ onSubmit(); logActivity(`page: ${getPageIndex()}, submitButton: submit`); }}\r\n disabled={isSubmitButtonDisabled}\r\n componentRef={ref}\r\n />) :\r\n ( { onNext(); logActivity(`page: ${getPageIndex()}, nextButton: next`); }}\r\n disabled={isSubmitButtonDisabled}\r\n componentRef={ref}\r\n />)\r\n }\r\n { onDismiss('button'); logActivity(`page: ${getPageIndex()}, cancelButton: dismiss`); }}\r\n />\r\n \r\n );\r\n});\r\n\r\ninterface FooterProps {\r\n isLastPage: boolean;\r\n isEndingPage: boolean;\r\n onSubmit: any;\r\n onNext: any;\r\n onDone: any;\r\n onDismiss: any;\r\n isSubmitButtonDisabled: boolean;\r\n}\r\n\r\nexport const Footer = forwardRef((props: FooterProps, ref): JSX.Element => {\r\n const {\r\n isEndingPage,\r\n isLastPage,\r\n } = props;\r\n\r\n const classes: any = useDefaultStyles(() => ({\r\n footer: {\r\n fontSize: 14,\r\n paddingTop: 12,\r\n color: theme.palette.black,\r\n },\r\n emptyBottomDiv: {\r\n marginBottom: 16,\r\n },\r\n privacyStatement: {\r\n marginBottom: 20,\r\n color: theme.palette.neutralSecondary,\r\n fontSize: '12px',\r\n },\r\n infoText: {\r\n fontWeight: 600,\r\n textDecoration: 'underline',\r\n },\r\n submitButton: {\r\n marginRight: 8,\r\n },\r\n nextButton: {\r\n marginRight: 8,\r\n },\r\n buttons: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n '& button': {\r\n width: '80px',\r\n },\r\n },\r\n }));\r\n\r\n return (\r\n \r\n {isEndingPage ?\r\n
\r\n );\r\n});\r\n","/* eslint-disable react-hooks/rules-of-hooks */\r\nimport React, { useContext, useEffect, useMemo, useRef } from 'react';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SurveyContext } from '@bingads-webui-campaign-react/survey-context';\r\nimport { Header } from './header';\r\nimport { Footer } from './footer';\r\nimport { PageConfigurator } from '../../configurator/page';\r\nimport { I18n } from '../../../survey.types';\r\nimport { SurveyContextType } from '../../../survey-context';\r\n\r\ninterface PageViewProps {\r\n isFirstPage: boolean,\r\n isLastPage: boolean,\r\n isEndingPage: boolean,\r\n onSubmit: any,\r\n onDone: any,\r\n onNext: any,\r\n onDismiss: any,\r\n onBack: any,\r\n classes: any,\r\n configurator: PageConfigurator,\r\n answers: any,\r\n setAnswers: any,\r\n}\r\n\r\nconst SurveyQuestionComponents = React.memo((props: {\r\n configurator: PageConfigurator,\r\n classes: any,\r\n}) => {\r\n const {\r\n classes,\r\n configurator,\r\n } = props;\r\n // @ts-ignore\r\n const surveyContext : SurveyContextType = useContext(SurveyContext);\r\n\r\n const {\r\n getAnswersByKey,\r\n setAnswersByKey,\r\n getSurveyAnswers,\r\n getSurveyDirtyStateByKey,\r\n setSurveyDirtyStateByKey,\r\n } = surveyContext;\r\n\r\n const answers = getSurveyAnswers();\r\n\r\n return (\r\n \r\n {configurator.questions.map((question) => {\r\n const isVisible = question.isVisible(answers);\r\n const Question = useMemo(() => question.getView(), [question]);\r\n const { key } = question;\r\n return (\r\n
\r\n setAnswersByKey(key, data)}\r\n dirtyState={getSurveyDirtyStateByKey(key)}\r\n setDirtyState={isDirty => setSurveyDirtyStateByKey(key, isDirty)}\r\n />\r\n
\r\n );\r\n })}\r\n
\r\n \r\n {i18n.getString(_TL_('Thank you so much for the response. We will continue improve our products and services.'))}\r\n :
\r\n );\r\n});\r\n","import { Text } from '@fluentui/react';\r\nimport React, { Fragment } from 'react';\r\n\r\nexport const ErrorString = ({ error } : { error: string }) => (\r\n \r\n \r\n {error}\r\n \r\n \r\n);\r\n\r\nexport const getDescription = (input, maxLength, i18n) => {\r\n if (input == null || input.length === 0) {\r\n return undefined;\r\n }\r\n const { length } = input;\r\n const diff = maxLength - length;\r\n if (diff >= 0) {\r\n return i18n.getString(_TL_('{{number}} characters remaining'), { number: diff });\r\n }\r\n return i18n.getString(_TL_('Exceeded by {{number}} characters'), { number: Math.abs(diff) });\r\n};\r\n","import React, { useContext, useRef } from 'react';\r\nimport { Link, TextField } from '@bingads-webui-react/fabric-control';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SurveyContext } from '@bingads-webui-campaign-react/survey-context';\r\nimport { I18n } from '../../../survey.types';\r\nimport { ErrorString, getDescription } from './common';\r\nimport { SurveyContextType } from '../../../survey-context';\r\n\r\ninterface OptionWithTextProps {\r\n children: React.ReactNode,\r\n error: string,\r\n option: any,\r\n data: string,\r\n setData: (key: string, value: string | undefined) => void,\r\n dirtyState: any,\r\n isSelected: boolean,\r\n setDirtyState: (key: string, dirtyState: boolean) => void,\r\n logActivity: (string) => void,\r\n}\r\n\r\nexport const Option = (props: OptionWithTextProps) => {\r\n const {\r\n children,\r\n error,\r\n option,\r\n data,\r\n setData,\r\n dirtyState,\r\n setDirtyState,\r\n isSelected,\r\n logActivity,\r\n } = props;\r\n\r\n // @ts-ignore\r\n const surveyContext : SurveyContextType = useContext(SurveyContext);\r\n\r\n const {\r\n hasInput,\r\n href,\r\n linkText,\r\n text,\r\n key,\r\n maxLength,\r\n placeholder,\r\n } = option;\r\n\r\n const i18n: I18n = useContext(I18nContext);\r\n const {\r\n getSurveyConfiguration,\r\n } = surveyContext;\r\n\r\n const {\r\n others: {\r\n shouldHideInputWhenNotSelected = false,\r\n } = {},\r\n } = getSurveyConfiguration();\r\n const logged = useRef(false);\r\n\r\n return (\r\n \r\n {children}\r\n {href && linkText &&\r\n <>\r\n
{' '} \r\n
{linkText}\r\n \r\n \r\n }\r\n {hasInput && (shouldHideInputWhenNotSelected ? isSelected : true) &&\r\n \r\n {\r\n setData(key, value);\r\n setDirtyState(key, true);\r\n if (logged.current === false) {\r\n logActivity(`Component: ${key}, action: input`);\r\n logged.current = true;\r\n }\r\n }}\r\n tabIndex={isSelected ? 0 : -1}\r\n description={maxLength != null && isSelected ? getDescription(data, maxLength, i18n) : undefined}\r\n />\r\n {dirtyState && isSelected && error &&
\r\n }\r\n \r\n
\r\n {title}\r\n {isRequired && {' *'} }\r\n \r\n {description &&\r\n
\r\n {description} \r\n {href && linkText &&\r\n <>\r\n {' '} \r\n {linkText}\r\n \r\n \r\n }\r\n
\r\n }\r\n {isDirty && error &&
}\r\n
\r\n \r\n );\r\n};\r\n","import React, { useCallback, useContext, useMemo } from 'react';\r\nimport { SurveyContext } from '@bingads-webui-campaign-react/survey-context';\r\nimport { ChoiceGroup } from '@fluentui/react';\r\nimport { Option } from './option';\r\nimport { QuestionTitle } from './title';\r\nimport { SurveyContextType } from '../../../survey-context';\r\nimport { generateLabelId } from '../../../utility';\r\n\r\nfunction optionComponentFactory(option, dynamicOption) {\r\n const {\r\n error,\r\n data,\r\n setData,\r\n mySetDirtyState,\r\n dirtyState,\r\n isSelected,\r\n logActivity,\r\n } = dynamicOption;\r\n\r\n return {\r\n onRenderField: (props, render) => (\r\n \r\n {render(props)}\r\n \r\n ),\r\n };\r\n}\r\n\r\nfunction buildSingleSelectionOptions(options, dynamicOption) {\r\n const {\r\n setOptionData,\r\n data,\r\n error,\r\n mySetDirtyState,\r\n dirtyState,\r\n logActivity,\r\n } = dynamicOption;\r\n\r\n return options.map((option) => {\r\n const {\r\n key,\r\n text,\r\n } = option;\r\n\r\n return {\r\n key,\r\n text,\r\n ariaLabel: text,\r\n ...optionComponentFactory(option, {\r\n setData: setOptionData,\r\n data: data[key],\r\n error: error[key],\r\n dirtyState: dirtyState[key],\r\n mySetDirtyState,\r\n isSelected: data.selectedOption === key,\r\n logActivity,\r\n }),\r\n };\r\n });\r\n}\r\n\r\nexport const ChoiceGroupView = React.memo((props: {\r\n configurator: any,\r\n data: any,\r\n setData: any,\r\n dirtyState: any,\r\n setDirtyState: any,\r\n}) => {\r\n const {\r\n configurator,\r\n data,\r\n setData,\r\n dirtyState,\r\n setDirtyState,\r\n } = props;\r\n\r\n const {\r\n options,\r\n key: questionKey,\r\n } = configurator.getConfiguration();\r\n\r\n const {\r\n selectedOption,\r\n } = data;\r\n\r\n const error = useMemo(() => configurator.getError(data), [configurator, data]);\r\n\r\n const setOptionData = useCallback((optionKey, value) => {\r\n const newData = {\r\n ...data,\r\n [optionKey]: value,\r\n selectedOption: value.length > 0 ? optionKey : selectedOption,\r\n };\r\n setData(newData);\r\n }, [data, selectedOption, setData]);\r\n\r\n const mySetDirtyState = useCallback((key, value) => {\r\n const newDirtyState = {\r\n ...dirtyState,\r\n [key]: value,\r\n };\r\n setDirtyState(newDirtyState);\r\n }, [dirtyState, setDirtyState]);\r\n\r\n // @ts-ignore\r\n const surveyContext : SurveyContextType = useContext(SurveyContext);\r\n const {\r\n logActivity,\r\n getSurveyAnswers,\r\n } = surveyContext;\r\n\r\n const myLogActivity = useCallback((log: string) => {\r\n logActivity(`Question: ${configurator.key}, type: single-selection, ${log}`);\r\n }, [configurator.key, logActivity]);\r\n\r\n const singleSelectionOptions = useMemo(() => buildSingleSelectionOptions(\r\n options,\r\n {\r\n setOptionData,\r\n data,\r\n error,\r\n mySetDirtyState,\r\n dirtyState,\r\n logActivity: myLogActivity,\r\n }\r\n ), [options, setOptionData, data, error, mySetDirtyState, dirtyState, myLogActivity]);\r\n\r\n const answers = getSurveyAnswers();\r\n\r\n const title = useMemo(() => configurator.getTitle(answers), [answers, configurator]);\r\n const labelKey = useMemo(() => generateLabelId(questionKey), [questionKey]);\r\n\r\n return (\r\n {\r\n mySetDirtyState('isDirty', true);\r\n setData({\r\n ...data,\r\n selectedOption: option?.key,\r\n });\r\n myLogActivity(`action: select option, key: ${option?.key}`);\r\n }}\r\n />);\r\n});\r\n\r\ninterface SingleSelectionViewProps {\r\n configurator: any,\r\n data: {\r\n selectedOption: string,\r\n [key: string]: string | undefined,\r\n },\r\n setData: any,\r\n rootClassName: string | undefined,\r\n dirtyState: any,\r\n setDirtyState: any,\r\n}\r\n\r\nexport const SingleSelectionView = (props: SingleSelectionViewProps) => {\r\n const {\r\n configurator,\r\n data,\r\n setData,\r\n dirtyState,\r\n setDirtyState,\r\n rootClassName,\r\n } = props;\r\n\r\n const error = useMemo(() => configurator.isAnswered(data), [configurator, data]);\r\n const {\r\n isDirty,\r\n } = dirtyState;\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React, { useMemo, useContext, useCallback } from 'react';\r\nimport { Checkbox } from '@fluentui/react';\r\nimport classNames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { SurveyContext } from '@bingads-webui-campaign-react/survey-context';\r\nimport { SurveyContextType } from '../../../survey-context';\r\nimport { MultipleSelectionData } from '../../../survey.types';\r\nimport { Option } from './option';\r\nimport { QuestionTitle } from './title';\r\nimport { generateLabelId } from '../../../utility';\r\n\r\nexport const CheckboxGroupView = React.memo((props: {\r\n configurator: any,\r\n data: any,\r\n setData: any,\r\n dirtyState: any,\r\n setDirtyState: any,\r\n}) => {\r\n const {\r\n configurator,\r\n data,\r\n setData,\r\n dirtyState,\r\n setDirtyState,\r\n } = props;\r\n\r\n const classes: any = useDefaultStyles(() => ({\r\n checkboxGroup: {\r\n '& .ms-Checkbox ~ .ms-Checkbox': {\r\n marginTop: '9px',\r\n },\r\n marginTop: '4px',\r\n },\r\n }));\r\n\r\n const {\r\n options,\r\n key: questionKey,\r\n } = configurator.getConfiguration();\r\n\r\n const error = useMemo(() => configurator.getError(data), [configurator, data]);\r\n\r\n const setOptionData = useCallback((optionKey, value) => {\r\n const newData = {\r\n ...data,\r\n [optionKey]: {\r\n ...data[optionKey],\r\n ...value,\r\n },\r\n };\r\n setData(newData);\r\n }, [data, setData]);\r\n\r\n const mySetDirtyState = useCallback((key, value) => {\r\n const newDirtyState = {\r\n ...dirtyState,\r\n [key]: value,\r\n };\r\n setDirtyState(newDirtyState);\r\n }, [dirtyState, setDirtyState]);\r\n\r\n // @ts-ignore\r\n const surveyContext : SurveyContextType = useContext(SurveyContext);\r\n const {\r\n logActivity,\r\n getSurveyAnswers,\r\n } = surveyContext;\r\n\r\n const myLogActivity = useCallback((log: string) => {\r\n logActivity(`Question: ${configurator.key}, type: multiple-selection, ${log}`);\r\n }, [configurator.key, logActivity]);\r\n\r\n const answers = getSurveyAnswers();\r\n\r\n const title = useMemo(() => configurator.getTitle(answers), [answers, configurator]);\r\n const labelKey = useMemo(() => generateLabelId(questionKey), [questionKey]);\r\n\r\n return (\r\n \r\n {options.map((option) => {\r\n const {\r\n key,\r\n text,\r\n } = option;\r\n\r\n const {\r\n selected,\r\n input,\r\n } = data[key] ?? {};\r\n\r\n return ( {\r\n mySetDirtyState('isDirty', true);\r\n setOptionData(option.key, { selected: checked });\r\n myLogActivity(`action: select checkbox, key: ${option.key}, state: ${checked}`);\r\n }}\r\n onRenderLabel={() => (\r\n setOptionData(dataKey, { input: stringInput })}\r\n dirtyState={dirtyState[key]}\r\n setDirtyState={(dataKey, value) => mySetDirtyState(dataKey, value)}\r\n isSelected={selected}\r\n logActivity={myLogActivity}\r\n >\r\n {text} \r\n \r\n )}\r\n />);\r\n })}\r\n \r\n );\r\n});\r\n\r\n\r\ninterface MultipleSelectionViewProps {\r\n configurator: any;\r\n data: MultipleSelectionData;\r\n setData: any;\r\n rootClassName: string | undefined;\r\n setDirtyState: any;\r\n dirtyState: any;\r\n}\r\n\r\nexport const MultipleSelectionView = (props: MultipleSelectionViewProps) => {\r\n const {\r\n configurator,\r\n data,\r\n setData,\r\n rootClassName,\r\n setDirtyState,\r\n dirtyState,\r\n } = props;\r\n\r\n const error = useMemo(() => configurator.isAnswered(data), [configurator, data]);\r\n const { isDirty } = dirtyState;\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 { SingleSelectionView } from './single-selection';\r\n\r\nexport const RatingView = props => (\r\n \r\n \r\n {\r\n setDirtyState(true);\r\n setData({ input: value });\r\n if (logged.current === false) {\r\n logActivity(`Question: ${configurator.key}, type: comment, action: input`);\r\n logged.current = true;\r\n }\r\n }}\r\n description={maxLength != null ? getDescription(input, maxLength, i18n) : undefined}\r\n />\r\n {isDirty && commentError && \r\n
\r\n );\r\n};\r\n","import { Validator } from './validator';\r\n\r\nexport class CommentValidator extends Validator {\r\n validateHelper({ data, configuration }) {\r\n const {\r\n input,\r\n } = data;\r\n\r\n const { maxLength, isRequired } = configuration;\r\n\r\n if ((input == null || input.length === 0) && isRequired) {\r\n return 'InputIsEmpty';\r\n }\r\n if (input && maxLength && input.length > maxLength) {\r\n return 'InputTooLong';\r\n }\r\n return null;\r\n }\r\n\r\n validate({ data, configuration }) {\r\n return this.validateHelper({ data, configuration }) == null;\r\n }\r\n\r\n getError({ data, configuration, i18n }) {\r\n const { maxLength } = configuration;\r\n\r\n const check = this.validateHelper({ data, configuration });\r\n\r\n if (check === 'InputTooLong') {\r\n return i18n.getString(_TL_('Field should not exceed {{maxLength}} characters'), { maxLength });\r\n }\r\n return undefined;\r\n }\r\n\r\n isAnswered({ data, configuration, i18n }) {\r\n const check = this.validateHelper({ data, configuration });\r\n if (check === 'InputIsEmpty') {\r\n return i18n.getString(_TL_('Please answer this question'));\r\n }\r\n return undefined;\r\n }\r\n}\r\n","import { QuestionConfigurator } from './question';\r\nimport { CommentView } from '../view';\r\nimport { CommentValidator } from '../validator';\r\n\r\nexport class CommentConfigurator extends QuestionConfigurator {\r\n get view() {\r\n return CommentView;\r\n }\r\n\r\n initValidator() {\r\n this.validator = new CommentValidator();\r\n }\r\n\r\n getDefaultData(): Object {\r\n return {\r\n input: undefined,\r\n ...this.data,\r\n };\r\n }\r\n\r\n isComment() {\r\n return true;\r\n }\r\n\r\n getFeedbackData(answers: any): any {\r\n const data = answers[this.key];\r\n const { input } = data;\r\n return {\r\n key: this.key,\r\n type: 'comment',\r\n title: this.getTitle(answers),\r\n answer: input,\r\n };\r\n }\r\n}\r\n","import { Validator } from './validator';\r\n\r\nexport class SingleSelectionValidator extends Validator {\r\n validateHelper({ data, configuration }) : string | null {\r\n const {\r\n selectedOption,\r\n } = data;\r\n\r\n const { options, isRequired } = configuration;\r\n\r\n if (selectedOption == null && isRequired) {\r\n return 'NoOptionSelected';\r\n }\r\n for (let i = 0; i < options.length; i += 1) {\r\n const {\r\n hasInput,\r\n key,\r\n maxLength,\r\n } = options[i];\r\n if (hasInput && key === selectedOption) {\r\n if ((data[key] == null || data[key].length === 0) && isRequired) {\r\n return 'InputIsEmpty';\r\n } else if (maxLength && data[key] && data[key].length > maxLength) {\r\n return 'InputTooLong';\r\n }\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n validate({ data, configuration }) {\r\n return this.validateHelper({ data, configuration }) == null;\r\n }\r\n\r\n getError({ data, configuration, i18n }) {\r\n let error = {};\r\n const { options, isRequired } = configuration;\r\n\r\n for (let i = 0; i < options.length; i += 1) {\r\n const {\r\n hasInput,\r\n key,\r\n maxLength,\r\n } = options[i];\r\n if (hasInput) {\r\n if ((data[key] == null || data[key].length === 0) && isRequired) {\r\n error = {\r\n ...error,\r\n [key]: i18n.getString(_TL_('Please fill in this field')),\r\n };\r\n } else if (maxLength && data[key] && data[key].length > maxLength) {\r\n error = {\r\n ...error,\r\n [key]: i18n.getString(_TL_('Field should not exceed {{maxLength}} characters'), { maxLength }),\r\n };\r\n }\r\n }\r\n }\r\n return error;\r\n }\r\n\r\n isAnswered({ data, configuration, i18n }) {\r\n let error;\r\n const {\r\n selectedOption,\r\n } = data;\r\n const { isRequired } = configuration;\r\n\r\n if (selectedOption == null && isRequired) {\r\n error = i18n.getString(_TL_('Please answer this question'));\r\n }\r\n return error;\r\n }\r\n}\r\n","import { SingleSelectionValidator } from './single-selection';\r\n\r\nexport class EmailValidator extends SingleSelectionValidator {\r\n validateHelper({ data, configuration }) {\r\n const {\r\n selectedOption,\r\n } = data;\r\n\r\n const { options, isRequired } = configuration;\r\n\r\n if (selectedOption == null && isRequired) {\r\n return 'NoOptionSelected';\r\n }\r\n for (let i = 0; i < options.length; i += 1) {\r\n const {\r\n hasInput,\r\n key,\r\n maxLength,\r\n } = options[i];\r\n if (hasInput && key === selectedOption) {\r\n if (data[key] == null || data[key].length === 0) {\r\n return 'InputIsEmpty';\r\n } else if (key === 'yes') {\r\n if (!this.isEmail(data[key])) {\r\n return 'InvalidEmail';\r\n }\r\n } else if (maxLength && data[key] && data[key].length > maxLength) {\r\n return 'InputTooLong';\r\n }\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n isEmail(email) {\r\n const re = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return re.test(email);\r\n }\r\n\r\n validate({ data, configuration }) {\r\n return this.validateHelper({ data, configuration }) == null;\r\n }\r\n\r\n getError({ data, configuration, i18n }) {\r\n let error = {};\r\n const { options } = configuration;\r\n\r\n for (let i = 0; i < options.length; i += 1) {\r\n const {\r\n hasInput,\r\n key,\r\n maxLength,\r\n } = options[i];\r\n if (hasInput) {\r\n if (data[key] == null || data[key].length === 0) {\r\n error = {\r\n ...error,\r\n [key]: i18n.getString(_TL_('Please enter an email address')),\r\n };\r\n } else if (key === 'yes' && !this.isEmail(data[key])) {\r\n error = {\r\n ...error,\r\n [key]: i18n.getString(_TL_('Invalid email address')),\r\n };\r\n } else if (maxLength && data[key] && data[key].length > maxLength) {\r\n error = {\r\n ...error,\r\n [key]: i18n.getString(_TL_('Field should not exceed {{maxLength}} characters'), { maxLength }),\r\n };\r\n }\r\n }\r\n }\r\n return error;\r\n }\r\n\r\n isAnswered({ data, configuration, i18n }) {\r\n let error;\r\n const {\r\n selectedOption,\r\n } = data;\r\n const { isRequired } = configuration;\r\n\r\n if (selectedOption == null && isRequired) {\r\n error = i18n.getString(_TL_('Please answer this question'));\r\n }\r\n return error;\r\n }\r\n}\r\n","import { QuestionConfigurator } from './question';\r\nimport { EmailView } from '../view';\r\nimport { EmailValidator } from '../validator';\r\n\r\nexport class EmailConfigurator extends QuestionConfigurator {\r\n get view() {\r\n return EmailView;\r\n }\r\n\r\n initValidator() {\r\n this.validator = new EmailValidator();\r\n }\r\n\r\n getDefaultData(): Object {\r\n return {\r\n selectedOption: undefined,\r\n yes: this.serverContext.CurrentUser.Email,\r\n ...this.data,\r\n };\r\n }\r\n\r\n getDefaultDirtyState(bool): Object {\r\n const state = {\r\n isDirty: bool,\r\n };\r\n const { options } = this.configuration;\r\n options.forEach((option) => {\r\n const { key } = option;\r\n state[key] = bool;\r\n });\r\n return state;\r\n }\r\n\r\n getFeedbackData(answers: any): any {\r\n const data = answers[this.key];\r\n if (data.selectedOption === 'yes') { return data.yes; }\r\n return null;\r\n }\r\n}\r\n","import { Validator } from './validator';\r\n\r\nexport class MultipleSelectionValidator extends Validator {\r\n validateHelper({ data, configuration }) {\r\n const { options, isRequired } = configuration;\r\n\r\n const NoOptionSelected = options.find(option => data[option.key] && data[option.key].selected) === undefined;\r\n\r\n if (NoOptionSelected && isRequired) {\r\n return 'NoOptionSelected';\r\n }\r\n\r\n for (let i = 0; i < options.length; i += 1) {\r\n const {\r\n hasInput,\r\n key,\r\n maxLength,\r\n } = options[i];\r\n if (hasInput && data[key] && data[key].selected) {\r\n if ((data[key].input == null || data[key].input.length === 0) && isRequired) {\r\n return 'InputIsEmpty';\r\n } else if (maxLength && data[key].input && data[key].input.length > maxLength) {\r\n return 'InputTooLong';\r\n }\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n validate({ data, configuration }) {\r\n return this.validateHelper({ data, configuration }) == null;\r\n }\r\n\r\n getError({ data, configuration, i18n }) {\r\n let error = {};\r\n const { options, isRequired } = configuration;\r\n\r\n for (let i = 0; i < options.length; i += 1) {\r\n const {\r\n hasInput,\r\n key,\r\n maxLength,\r\n } = options[i];\r\n if (hasInput && data[key]) {\r\n if ((data[key].input == null || data[key].input.length === 0) && isRequired) {\r\n error = {\r\n ...error,\r\n [key]: i18n.getString(_TL_('Please fill in this field')),\r\n };\r\n } else if (maxLength && data[key].input && data[key].input.length > maxLength) {\r\n error = {\r\n ...error,\r\n [key]: i18n.getString(_TL_('Field should not exceed {{maxLength}} characters'), { maxLength }),\r\n };\r\n }\r\n }\r\n }\r\n return error;\r\n }\r\n\r\n isAnswered({ data, configuration, i18n }) {\r\n const result = this.validateHelper({ data, configuration });\r\n const { isRequired } = configuration;\r\n let error;\r\n\r\n if (result === 'NoOptionSelected' && isRequired) {\r\n error = i18n.getString(_TL_('Please answer this question'));\r\n }\r\n return error;\r\n }\r\n}\r\n","import { QuestionConfigurator } from './question';\r\nimport { MultipleSelectionView } from '../view';\r\nimport { MultipleSelectionValidator } from '../validator';\r\n\r\nexport class MultipleSelectionConfigurator extends QuestionConfigurator {\r\n constructor({\r\n serverContext, configuration, i18n, surveyConfigurator,\r\n }) {\r\n super({\r\n serverContext, configuration, i18n, surveyConfigurator,\r\n });\r\n this.setOptionKeyToText();\r\n }\r\n\r\n get view() {\r\n return MultipleSelectionView;\r\n }\r\n\r\n getDefaultData(): Object {\r\n return {\r\n ...this.data,\r\n };\r\n }\r\n\r\n initValidator() {\r\n this.validator = new MultipleSelectionValidator();\r\n }\r\n\r\n setOptionKeyToText() {\r\n const { options } = this.configuration;\r\n this.optionKeyToText = {};\r\n options.forEach((option) => {\r\n this.optionKeyToText[option.key] = option.text;\r\n });\r\n }\r\n\r\n getDefaultDirtyState(bool): Object {\r\n const state = {\r\n isDirty: bool,\r\n };\r\n const { options } = this.configuration;\r\n options.forEach((option) => {\r\n const { key } = option;\r\n state[key] = bool;\r\n });\r\n return state;\r\n }\r\n\r\n // get the feedback data for sending to the OCV service\r\n getFeedbackData(answers: any): any {\r\n const { options } = this.configuration;\r\n const data = answers[this.key];\r\n const selectedOptions =\r\n options.filter(option => data[option.key]?.selected)\r\n .map(option => ({\r\n text: this.optionKeyToText[option.key],\r\n input: data[option.key].input,\r\n }));\r\n return {\r\n key: this.key,\r\n type: 'multiple-selection',\r\n title: this.getTitle(answers),\r\n answer: selectedOptions,\r\n };\r\n }\r\n}\r\n","import { QuestionConfigurator } from './question';\r\nimport { SingleSelectionView } from '../view';\r\nimport { SingleSelectionValidator } from '../validator';\r\n\r\nexport class SingleSelectionConfigurator extends QuestionConfigurator {\r\n constructor({\r\n serverContext, configuration, i18n, surveyConfigurator,\r\n }) {\r\n super({\r\n serverContext, configuration, i18n, surveyConfigurator,\r\n });\r\n this.setOptionKeyToText();\r\n }\r\n\r\n get view() : (props: any) => JSX.Element {\r\n return SingleSelectionView;\r\n }\r\n\r\n initValidator() {\r\n this.validator = new SingleSelectionValidator();\r\n }\r\n\r\n setOptionKeyToText() {\r\n const { options } = this.configuration;\r\n this.optionKeyToText = {};\r\n options.forEach((option) => {\r\n this.optionKeyToText[option.key] = option.text;\r\n });\r\n }\r\n\r\n getDefaultData(): Object {\r\n return {\r\n selectedOption: undefined,\r\n ...this.data,\r\n };\r\n }\r\n\r\n getDefaultDirtyState(bool: boolean): Object {\r\n const state = {\r\n isDirty: bool,\r\n };\r\n const { options } = this.configuration;\r\n options.forEach((option) => {\r\n const { key } = option;\r\n state[key] = bool;\r\n });\r\n return state;\r\n }\r\n\r\n getFeedbackData(answers: any): any {\r\n const data = answers[this.key];\r\n const { selectedOption } = data;\r\n return {\r\n key: this.key,\r\n type: 'single-selection',\r\n title: this.getTitle(answers),\r\n answer: {\r\n text: selectedOption ? this.optionKeyToText[selectedOption] : null,\r\n input: selectedOption ? data[selectedOption] : null,\r\n },\r\n };\r\n }\r\n}\r\n","import { SingleSelectionValidator } from '../validator';\r\nimport { RatingView } from '../view';\r\nimport { SingleSelectionConfigurator } from './single-selection';\r\n\r\nexport class RatingConfigurator extends SingleSelectionConfigurator {\r\n constructor({\r\n serverContext, configuration, i18n, surveyConfigurator,\r\n }) {\r\n super({\r\n serverContext, configuration, i18n, surveyConfigurator,\r\n });\r\n this.setOptionKeyToRating();\r\n }\r\n\r\n get view() {\r\n return RatingView;\r\n }\r\n\r\n initValidator() {\r\n this.validator = new SingleSelectionValidator();\r\n }\r\n\r\n setOptionKeyToRating() {\r\n const { options } = this.configuration;\r\n this.optionKeyToRating = {};\r\n options.forEach((option) => {\r\n this.optionKeyToRating[option.key] = option.rating;\r\n });\r\n }\r\n\r\n getDefaultData(): Object {\r\n return {\r\n selectedOption: undefined,\r\n ...this.data,\r\n };\r\n }\r\n\r\n getDefaultDirtyState(bool): Object {\r\n const state = {\r\n isDirty: bool,\r\n };\r\n const { options } = this.configuration;\r\n options.forEach((option) => {\r\n const { key } = option;\r\n state[key] = bool;\r\n });\r\n return state;\r\n }\r\n\r\n getFeedbackData(answers: any): any {\r\n const data = answers[this.key];\r\n const { options } = this.configuration;\r\n if (data.selectedOption) {\r\n return {\r\n rating: parseFloat(this.optionKeyToRating[data.selectedOption]),\r\n ratingOptionsCount: options.length,\r\n };\r\n }\r\n return null;\r\n }\r\n}\r\n","import React from 'react';\r\nimport { PageView } from '../view';\r\nimport { QuestionConfiguration, IQuestionConfigurator } from '../../survey.types';\r\n\r\nexport class PageConfigurator {\r\n questions: IQuestionConfigurator[];\r\n style: any;\r\n serverContext: any;\r\n i18n: any;\r\n surveyConfigurator: any;\r\n\r\n constructor({ serverContext, i18n, surveyConfigurator }) {\r\n this.questions = [];\r\n this.serverContext = serverContext;\r\n this.i18n = i18n;\r\n this.surveyConfigurator = surveyConfigurator;\r\n }\r\n\r\n // sort questions by position\r\n sortQuestions(): void {\r\n this.questions.sort((a, b) => a.position - b.position);\r\n }\r\n\r\n // add question to page\r\n addQuestion(questionConfiguration: QuestionConfiguration): IQuestionConfigurator {\r\n const {\r\n Type,\r\n } = questionConfiguration;\r\n const question = new Type({\r\n configuration: questionConfiguration,\r\n serverContext: this.serverContext,\r\n i18n: this.i18n,\r\n surveyConfigurator: this.surveyConfigurator,\r\n });\r\n this.questions.push(question);\r\n return question;\r\n }\r\n\r\n isVisible(answers: Object): boolean {\r\n for (let i = 0; i < this.questions.length; i += 1) {\r\n if (this.questions[i].isVisible(answers)) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n // determine if page is valid, delegating to questions\r\n isValid(answers: Object): boolean {\r\n for (let i = 0; i < this.questions.length; i += 1) {\r\n if (!this.questions[i].isValid(answers)) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n // get the feedback data for sending to the OCV service\r\n getFeedbackData(answers: Object): any {\r\n const remaining: Array = [];\r\n const comments: Array = [];\r\n let email = null;\r\n let rating = null;\r\n\r\n this.questions.forEach((question) => {\r\n if (question.isVisible(answers)) {\r\n if (question.isEmail()) {\r\n email = question.getFeedbackData(answers);\r\n } else if (question.isRating()) {\r\n rating = question.getFeedbackData(answers);\r\n } else if (question.isComment()) {\r\n comments.push(question.getFeedbackData(answers));\r\n } else {\r\n // single-selection, multiple-selection\r\n remaining.push(question.getFeedbackData(answers));\r\n }\r\n }\r\n });\r\n\r\n return {\r\n rating,\r\n email,\r\n remaining,\r\n comments,\r\n };\r\n }\r\n\r\n // get the view for the page\r\n getView(): (props: any) => JSX.Element {\r\n return props =>\r\n ( = new Map();\r\n configuration: SurveyConfiguration;\r\n\r\n constructor({\r\n featureArea, serverContext, i18n, configuration,\r\n }) {\r\n this.featureArea = featureArea;\r\n this.pages = [];\r\n this.serverContext = serverContext;\r\n this.i18n = i18n;\r\n this.endingPage = new PageConfigurator({\r\n serverContext: this.serverContext, i18n: this.i18n, surveyConfigurator: this,\r\n });\r\n this.configuration = configuration;\r\n }\r\n\r\n // feature area is used to classify the feedback. You can find and create feature areas at\r\n // https://ocv.microsoft.com/#/manage/?aid=a9bfe3b9-40d8-443d-9d80-ba3369aa1463\r\n getFeatureArea() {\r\n return this.featureArea;\r\n }\r\n\r\n // sort the questions by page and question position\r\n sortPages(): void {\r\n this.pages.forEach(page => page.sortQuestions());\r\n }\r\n\r\n // get the page at index, or create it if it doesn't exist\r\n getPageIfNoneCreateIt(pageIndex: number): PageConfigurator {\r\n let page = this.pages[pageIndex];\r\n if (page == null) {\r\n this.pages[pageIndex] = new PageConfigurator({\r\n serverContext: this.serverContext, i18n: this.i18n, surveyConfigurator: this,\r\n });\r\n page = this.pages[pageIndex];\r\n }\r\n return page;\r\n }\r\n\r\n hasPageAtIndex(pageIndex: number, answers: any): boolean {\r\n const page = this.pages[pageIndex];\r\n if (page == null || !page.isVisible(answers)) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n // get the page at index\r\n getPage(pageIndex: number): PageConfigurator {\r\n return this.pages[pageIndex];\r\n }\r\n\r\n // get the ending page, the page after submitting the survey\r\n getEndingPage(): PageConfigurator {\r\n return this.endingPage;\r\n }\r\n\r\n // add a question to the survey\r\n addQuestion(questionConfiguration): void {\r\n const { page: pageIndex, key } = questionConfiguration;\r\n const page = this.getPageIfNoneCreateIt(pageIndex);\r\n const question = page.addQuestion(questionConfiguration);\r\n this.questions.set(key, question);\r\n }\r\n\r\n // get question by key for question with question integration\r\n getQuestionByKey(key: string) {\r\n return this.questions.get(key);\r\n }\r\n\r\n // add questions to the survey\r\n addQuestions(questionConfigurations): void {\r\n questionConfigurations.forEach(questionConfiguration => this.addQuestion(questionConfiguration));\r\n }\r\n\r\n // get all the default answers for the survey\r\n getDefaultAnswers(): Object {\r\n const answers = {};\r\n this.pages.forEach((page) => {\r\n page.questions.forEach((question) => {\r\n answers[question.key] = question.getDefaultData();\r\n });\r\n });\r\n return answers;\r\n }\r\n\r\n // get all the default dirty state for the survey\r\n getDefaultDirtyState(bool: boolean): Object {\r\n const state = {};\r\n this.pages.forEach((page) => {\r\n page.questions.forEach((question) => {\r\n state[question.key] = question.getDefaultDirtyState(bool);\r\n });\r\n });\r\n return state;\r\n }\r\n\r\n getDefaultDirtyStatePerPage(bool: boolean, pageIndex: number): Object {\r\n const state = {};\r\n this.pages[pageIndex].questions.forEach((question) => {\r\n state[question.key] = question.getDefaultDirtyState(bool);\r\n });\r\n return state;\r\n }\r\n\r\n setConfiguration(configuration: SurveyConfiguration) {\r\n this.configuration = configuration;\r\n }\r\n\r\n getConfiguration(): SurveyConfiguration {\r\n return this.configuration;\r\n }\r\n\r\n getOtherFlags(): Others {\r\n const {\r\n others = {},\r\n } = this.getConfiguration();\r\n\r\n return others;\r\n }\r\n\r\n // get the feedback data for sending to the OCV service\r\n getFeedbackData(answers: Object): { feedback, extendedManifestData } {\r\n let remaining: Array = [];\r\n let comments: Array = [];\r\n let email = null;\r\n let ratingObject: any = null;\r\n\r\n this.pages.forEach((page) => {\r\n if (page.isVisible(answers)) {\r\n const {\r\n email: emailData,\r\n rating: ratingData,\r\n remaining: remainingData,\r\n comments: commentsData,\r\n } = page.getFeedbackData(answers);\r\n\r\n if (emailData != null) {\r\n email = emailData;\r\n }\r\n if (ratingData != null) {\r\n ratingObject = ratingData;\r\n }\r\n\r\n comments = comments.concat(commentsData);\r\n remaining = remaining.concat(remainingData);\r\n }\r\n });\r\n\r\n let comment;\r\n\r\n if (comments.length > 0) {\r\n // only one comment could show in the OCV,\r\n // the remaining comments will be put inside remaining\r\n comment = comments.shift();\r\n remaining = remaining.concat(comments);\r\n }\r\n\r\n const { combineTextInputToComment } = this.getOtherFlags();\r\n\r\n if (combineTextInputToComment) {\r\n if (_.isEmpty(comment)) {\r\n comment = {\r\n answer: '',\r\n type: 'comment',\r\n };\r\n } else if (_.isEmpty(comment.answer)) {\r\n comment.answer = '';\r\n }\r\n remaining.forEach((question: any) => {\r\n if (question.type === 'single-selection') {\r\n if (!_.isEmpty(question.answer.input)) {\r\n comment.answer = comment.answer.concat(` ${question.answer.input}`);\r\n }\r\n } else if (question.type === 'multiple-selection') {\r\n question.answer.forEach((optionAnswer) => {\r\n if (!_.isEmpty(optionAnswer.input)) {\r\n comment.answer = comment.answer.concat(` ${optionAnswer.input}`);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n const {\r\n rating = null,\r\n ratingOptionsCount,\r\n } = ratingObject || {};\r\n\r\n const feedback = {\r\n rating: rating == null ? -1 : rating,\r\n email,\r\n comment: comment?.answer,\r\n };\r\n\r\n const questions = {};\r\n for (let q = 0; q < remaining.length; q += 1) {\r\n questions[`question${q}`] = stringifySync(remaining[q]);\r\n }\r\n questions['questionCount'] = remaining.length;\r\n\r\n const extendedManifestData = {\r\n surveySpecificData: {\r\n comment: feedback.comment ? [feedback.comment] : [],\r\n rating: feedback.rating !== -1 ? [{ selectedRating: `${Math.round(feedback.rating * ratingOptionsCount) - 1}` }] : [],\r\n questions,\r\n hasEmail: !_.isNull(email),\r\n },\r\n };\r\n\r\n return {\r\n feedback,\r\n extendedManifestData,\r\n };\r\n }\r\n}\r\n","import React, { useContext, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Stack,\r\n} from '@fluentui/react';\r\nimport { SurveyContext } from '@bingads-webui-campaign-react/survey-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { surveyStyles } from '../../styles';\r\nimport { SurveyContextType } from '../../survey-context';\r\n\r\nexport const SurveyView = React.memo((props) => {\r\n const classes:any = useDefaultStyles(() => surveyStyles);\r\n\r\n // @ts-ignore\r\n const surveyContext : SurveyContextType = useContext(SurveyContext);\r\n\r\n const {\r\n surveyConfigurator,\r\n getIsEndingPage,\r\n getPageIndex,\r\n } = surveyContext;\r\n\r\n const isEndingPage = getIsEndingPage();\r\n const pageIndex = getPageIndex();\r\n\r\n const page = useMemo(() => (isEndingPage ?\r\n surveyConfigurator.getEndingPage() :\r\n surveyConfigurator.getPage(pageIndex)), [surveyConfigurator, isEndingPage, pageIndex]);\r\n const PageView = useMemo(() => page.getView(), [page]);\r\n\r\n const {\r\n style,\r\n } = surveyConfigurator.getConfiguration();\r\n\r\n const customizedClasses: any = useDefaultStyles(() => style);\r\n\r\n return (\r\n \r\n \r\n );\r\n});\r\n","import React, { useState, useMemo, useCallback, useContext, useEffect } from 'react';\r\nimport classNames from 'classnames';\r\nimport { isUndefined, result, isEmpty } from 'underscore';\r\nimport { Modal } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useLock, keyVault, priorityLevel } from '@bingads-webui-react/popup-manager';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { SurveyContext } from '@bingads-webui-campaign-react/survey-context';\r\nimport { stringifySync } from '@bingads-webui/safe-json';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { SurveyConfigurator } from './survey-construction/configurator/survey';\r\nimport { SurveyConfiguration } from './survey.types';\r\nimport { SurveyView } from './survey-construction/view/survey';\r\nimport { modalStyles } from './styles';\r\nimport { returnFocus } from './utility';\r\n\r\ninterface SurveyFactoryProps {\r\n getSurveyConfiguration: (options: any) => SurveyConfiguration;\r\n onSurveySubmit: (options: any) => void;\r\n onSurveyDismiss: (options: any) => void;\r\n onSurveyRender: (options: any) => void;\r\n surveyDataService: {\r\n sendFeedback: any;\r\n };\r\n logActivity?: (string) => void;\r\n surveyName?: string;\r\n // eslint-disable-next-line react/require-default-props\r\n lastActiveElement?: HTMLElement;\r\n customParams?: any;\r\n}\r\n\r\nfunction usePage(surveyConfigurator: SurveyConfigurator, surveyAnswers: any, { setCurrentPageDirty, logActivity, analysisActivity }) {\r\n const [pageIndex, setPageIndex] = useState(0);\r\n const [fromBack, setFromBack] = useState(false);\r\n const [isEndingPage, setIsEndingPage] = useState(false);\r\n\r\n const onNext = useCallback(() => {\r\n const currentPage = surveyConfigurator.getPage(pageIndex);\r\n if (currentPage.isValid(surveyAnswers)) {\r\n logActivity('action: next page');\r\n setPageIndex(pageIndex + 1);\r\n analysisActivity('onNext');\r\n setFromBack(false);\r\n } else {\r\n setCurrentPageDirty(pageIndex);\r\n analysisActivity('onNext - invalid');\r\n }\r\n }, [surveyConfigurator, pageIndex, surveyAnswers, logActivity, analysisActivity, setCurrentPageDirty]);\r\n\r\n const onBack = useCallback(() => {\r\n setPageIndex(pageIndex - 1);\r\n logActivity('action: previous page');\r\n analysisActivity('onBack');\r\n setFromBack(true);\r\n }, [pageIndex, logActivity, analysisActivity]);\r\n\r\n\r\n const getIsFirstPage = useCallback(() => pageIndex === 0, [pageIndex]);\r\n const getIsLastPage = useCallback(\r\n () =>\r\n !surveyConfigurator.hasPageAtIndex(pageIndex + 1, surveyAnswers),\r\n [pageIndex, surveyAnswers, surveyConfigurator]\r\n );\r\n\r\n const getPageIndex = useCallback(() => pageIndex, [pageIndex]);\r\n const getIsEndingPage = useCallback(() => isEndingPage, [isEndingPage]);\r\n const getIsFromBack = useCallback(() => fromBack, [fromBack]);\r\n\r\n return {\r\n getPageIndex,\r\n getIsEndingPage,\r\n getIsFromBack,\r\n setIsEndingPage,\r\n onNext,\r\n onBack,\r\n getIsFirstPage,\r\n getIsLastPage,\r\n };\r\n}\r\n\r\nfunction useQuestionState(surveyConfigurator: SurveyConfigurator) {\r\n const [surveyAnswers, setSurveyAnswers] = useState(surveyConfigurator.getDefaultAnswers());\r\n const [surveyDirtyState, setSurveyDirtyState] = useState(surveyConfigurator.getDefaultDirtyState(false));\r\n\r\n const setAnswersByKey = useCallback((key, data) => {\r\n const newAnswers = { ...surveyAnswers };\r\n newAnswers[key] = data;\r\n setSurveyAnswers(newAnswers);\r\n }, [setSurveyAnswers, surveyAnswers]);\r\n\r\n const setSurveyDirtyStateByKey = useCallback((key, data) => {\r\n const newDirtyState = { ...surveyDirtyState };\r\n newDirtyState[key] = data;\r\n setSurveyDirtyState(newDirtyState);\r\n }, [surveyDirtyState, setSurveyDirtyState]);\r\n\r\n const getAnswersByKey = useCallback(key => surveyAnswers[key], [surveyAnswers]);\r\n const getSurveyAnswers = useCallback(() => surveyAnswers, [surveyAnswers]);\r\n const getSurveyDirtyStateByKey = useCallback(key => surveyDirtyState[key], [surveyDirtyState]);\r\n const getSurveyDirtyState = useCallback(() => surveyDirtyState, [surveyDirtyState]);\r\n\r\n const setCurrentPageDirty = useCallback((pageIndex) => {\r\n const newState = surveyConfigurator.getDefaultDirtyStatePerPage(true, pageIndex);\r\n setSurveyDirtyState({ ...surveyDirtyState, ...newState });\r\n }, [surveyConfigurator, surveyDirtyState]);\r\n\r\n return {\r\n getSurveyAnswers,\r\n setAnswersByKey,\r\n getAnswersByKey,\r\n getSurveyDirtyState,\r\n setSurveyDirtyStateByKey,\r\n getSurveyDirtyStateByKey,\r\n setCurrentPageDirty,\r\n };\r\n}\r\n\r\nfunction parseSurveyConfiguration({ getSurveyConfiguration, serverContext, i18n }): SurveyConfigurator {\r\n const surveyConfiguration = getSurveyConfiguration({\r\n i18n,\r\n serverContext,\r\n });\r\n const {\r\n rating,\r\n email,\r\n questions,\r\n featureArea,\r\n } = surveyConfiguration;\r\n\r\n const surveyConfigurator = new SurveyConfigurator({\r\n featureArea,\r\n serverContext,\r\n i18n,\r\n configuration: surveyConfiguration,\r\n });\r\n\r\n if (rating) {\r\n surveyConfigurator.addQuestion(rating);\r\n }\r\n if (email) {\r\n surveyConfigurator.addQuestion(email);\r\n }\r\n surveyConfigurator.addQuestions(questions);\r\n\r\n surveyConfigurator.sortPages();\r\n return surveyConfigurator;\r\n}\r\n\r\nexport const SurveyFactory = (props: SurveyFactoryProps) => {\r\n const {\r\n getSurveyConfiguration,\r\n surveyDataService,\r\n onSurveySubmit,\r\n onSurveyDismiss,\r\n onSurveyRender,\r\n logActivity,\r\n surveyName,\r\n lastActiveElement,\r\n customParams,\r\n } = props;\r\n\r\n const classes: any = useDefaultStyles(() => modalStyles);\r\n\r\n // @ts-ignore\r\n const serverContext = useContext(ServerContext);\r\n const i18n = useContext(I18nContext) as any;\r\n // @ts-ignore\r\n const isPopupOutsideDismissEnabled = result(serverContext, ['DynamicPermissions', 'PopupOutsideDismiss'], false) || result(serverContext, ['CCUIPilots', 'dynamic', 'PopupOutsideDismiss'], false);\r\n\r\n const surveyConfigurator = useMemo(\r\n () => parseSurveyConfiguration({ getSurveyConfiguration, serverContext, i18n }),\r\n [getSurveyConfiguration, serverContext, i18n]\r\n );\r\n\r\n const [isModalOpen, setIsModalOpen] = useState(true);\r\n\r\n const {\r\n getSurveyAnswers,\r\n getAnswersByKey,\r\n setAnswersByKey,\r\n getSurveyDirtyState,\r\n setSurveyDirtyStateByKey,\r\n getSurveyDirtyStateByKey,\r\n setCurrentPageDirty,\r\n } = useQuestionState(surveyConfigurator);\r\n\r\n const surveyAnswers = getSurveyAnswers();\r\n const surveyDirtyState = getSurveyDirtyState();\r\n\r\n const {\r\n modalSettings = {},\r\n others = {},\r\n } = surveyConfigurator.getConfiguration();\r\n\r\n const {\r\n isGlobalModalStyleEnabled,\r\n userActionAnalysisEnabled,\r\n isUserInitiatedSurvey,\r\n isThankYouPageEnabled = true,\r\n shouldAutoClose = true,\r\n isInPageMiddle = false,\r\n isModeless: isOriginalModeless,\r\n isBlocking = false,\r\n } = others;\r\n\r\n const myLogActivity = useCallback((string: string) => {\r\n if (logActivity && surveyName) {\r\n logActivity(`SurveyFactory | survey: ${surveyName}, ${string}`);\r\n }\r\n }, [logActivity, surveyName]);\r\n\r\n const analysisActivity = useCallback((action: string) => {\r\n if (!userActionAnalysisEnabled) {\r\n return;\r\n }\r\n\r\n function flattenKeys(obj: object, prefix = '') {\r\n return Object.keys(obj).reduce((acc, key) => {\r\n const newKey = prefix ? `${prefix}.${key}` : key;\r\n if (typeof obj[key] === 'object') {\r\n Object.assign(acc, flattenKeys(obj[key], newKey));\r\n } else {\r\n acc[newKey] = obj[key];\r\n }\r\n return acc;\r\n }, {});\r\n }\r\n\r\n if (surveyName) {\r\n setClarityTag({ SurveyFactory: `${surveyName}, ${action}` });\r\n\r\n if (logActivity) {\r\n // @ts-ignore\r\n logActivity(`SurveyFactory | survey: ${surveyName}, action: ${action}, surveyAnswers: ${JSON.stringify(flattenKeys(surveyAnswers)).replaceAll('\"', '')}`);\r\n // @ts-ignore\r\n logActivity(`SurveyFactory | survey: ${surveyName}, action: ${action}, surveyDirtyState: ${JSON.stringify(flattenKeys(surveyDirtyState)).replaceAll('\"', '')}`);\r\n }\r\n }\r\n }, [userActionAnalysisEnabled, surveyName, logActivity, surveyAnswers, surveyDirtyState]);\r\n\r\n const additionalLogData = useMemo(() => {\r\n // @ts-ignore\r\n const userCreatedDateTime = result(serverContext, ['CurrentUser', 'FetchedCreatedDateTime']) || result(serverContext, ['CurrentUser', 'CreatedDateTime']);\r\n const localizedUserCreatedDateTime = new Date(userCreatedDateTime);\r\n const now = new Date();\r\n const deltaTime = now.getTime() - localizedUserCreatedDateTime.getTime();\r\n const deltaDay = Math.ceil(deltaTime / (1 * 24 * 60 * 60 * 1000));\r\n\r\n return {\r\n userCreatedDateTime,\r\n userActiveDay: deltaDay,\r\n };\r\n }, [serverContext]);\r\n\r\n const { lock, releaseLock } = useLock({\r\n key: `${keyVault.survey}-${surveyName}`,\r\n // Increase the WebuiUserSurvey priority to let it not be affected by teaching bubble\r\n priority: surveyName === 'WebuiUserSurvey' ? priorityLevel.systemLevelAnnouncement : priorityLevel.survey,\r\n force: isUserInitiatedSurvey,\r\n // @ts-ignore\r\n autoClose: shouldAutoClose && result(serverContext, ['Permissions', 'IsCentralizedPopupManagementEnabled']),\r\n });\r\n\r\n useEffect(() => {\r\n if (lock) {\r\n onSurveyRender?.(additionalLogData);\r\n }\r\n }, [lock, onSurveyRender, additionalLogData]);\r\n\r\n const {\r\n getPageIndex,\r\n onNext,\r\n onBack,\r\n getIsEndingPage,\r\n getIsLastPage,\r\n getIsFirstPage,\r\n setIsEndingPage,\r\n getIsFromBack,\r\n } = usePage(surveyConfigurator, surveyAnswers, { setCurrentPageDirty, logActivity: myLogActivity, analysisActivity });\r\n\r\n const onCloseModal = useCallback(() => {\r\n setIsModalOpen(false);\r\n returnFocus(lastActiveElement);\r\n releaseLock();\r\n }, [lastActiveElement, releaseLock]);\r\n\r\n const onSubmit = useCallback(() => {\r\n const pageIndex = getPageIndex();\r\n const currentPage = surveyConfigurator.getPage(pageIndex);\r\n\r\n if (currentPage.isValid(surveyAnswers)) {\r\n const { feedback, extendedManifestData } = surveyConfigurator.getFeedbackData(surveyAnswers);\r\n const telemetry = {\r\n featureArea: surveyConfigurator.getFeatureArea(),\r\n };\r\n\r\n surveyDataService.sendFeedback({\r\n feedback,\r\n extendedManifestData,\r\n telemetry,\r\n onFinishSendRequest: () => {\r\n myLogActivity('action: submit');\r\n myLogActivity(`trace: feedback, ${stringifySync(feedback)}`);\r\n if (customParams) {\r\n myLogActivity(`trace: customParams, ${stringifySync(customParams)} | trace: extendedManifestData, ${stringifySync(extendedManifestData)}`);\r\n } else {\r\n myLogActivity(`trace: extendedManifestData, ${stringifySync(extendedManifestData)}`);\r\n }\r\n // @ts-ignore\r\n const hasComment = !isEmpty(result(feedback, ['comment'], ''));\r\n onSurveySubmit({\r\n hasComment,\r\n ...additionalLogData,\r\n });\r\n },\r\n });\r\n\r\n setIsEndingPage(true);\r\n\r\n if (!isThankYouPageEnabled) {\r\n onCloseModal();\r\n }\r\n\r\n analysisActivity('onSubmit');\r\n } else {\r\n setCurrentPageDirty(pageIndex);\r\n analysisActivity('onSubmit - invalid');\r\n }\r\n }, [getPageIndex, surveyConfigurator, surveyAnswers, surveyDataService, setIsEndingPage, isThankYouPageEnabled, analysisActivity, myLogActivity, customParams, onSurveySubmit, onCloseModal, setCurrentPageDirty, additionalLogData]);\r\n\r\n const onDismiss = useCallback((dismissType: string) => {\r\n onCloseModal();\r\n onSurveyDismiss(additionalLogData);\r\n myLogActivity(`action: dismiss, dismissType: ${dismissType}`);\r\n analysisActivity(`onDismiss - ${dismissType}`);\r\n }, [onCloseModal, onSurveyDismiss, myLogActivity, analysisActivity, additionalLogData]);\r\n\r\n const onDone = useCallback(() => {\r\n onCloseModal();\r\n myLogActivity('action: done');\r\n }, [onCloseModal, myLogActivity]);\r\n\r\n const onModalDismiss = useCallback((event) => {\r\n if (event && event.keyCode === 27) { // Escape\r\n onDismiss('keyboard - ESC');\r\n } else {\r\n onCloseModal();\r\n myLogActivity('action: lightDismiss');\r\n }\r\n }, [onDismiss, onCloseModal, myLogActivity]);\r\n\r\n const modalSpecificStyles = useMemo(() => {\r\n if (isInPageMiddle) {\r\n return {\r\n position: 'absolute',\r\n };\r\n }\r\n\r\n return {\r\n main: {\r\n position: 'absolute',\r\n right: '40px',\r\n bottom: '0',\r\n minHeight: '0',\r\n zIndex: 10000000,\r\n },\r\n };\r\n }, [isInPageMiddle]);\r\n\r\n const isModeless = useMemo(() => {\r\n if (!isUndefined(isOriginalModeless)) {\r\n return isOriginalModeless;\r\n }\r\n\r\n return !isPopupOutsideDismissEnabled;\r\n }, [isOriginalModeless, isPopupOutsideDismissEnabled]);\r\n\r\n useEffect(() => {\r\n myLogActivity('action: mount');\r\n }, [myLogActivity]);\r\n\r\n return lock && (\r\n surveyConfigurator.getConfiguration(),\r\n getIsSubmitButtonDisabled: () => false,\r\n setSurveyDirtyStateByKey,\r\n getSurveyDirtyStateByKey,\r\n getSurveyAnswers,\r\n getAnswersByKey,\r\n setAnswersByKey,\r\n onNext,\r\n onBack,\r\n getPageIndex,\r\n getIsFirstPage,\r\n getIsLastPage,\r\n getIsEndingPage,\r\n setIsEndingPage,\r\n getIsFromBack,\r\n onDismiss,\r\n onSubmit,\r\n onDone,\r\n logActivity: myLogActivity,\r\n }}\r\n >\r\n \r\n {isModalOpen && \r\n {render(_props)}\r\n
\r\n ),\r\n ...value,\r\n }));\r\n }, [i18n, classes.ratingOption]);\r\n\r\n const areaOptions = useMemo(() => [\r\n {\r\n key: 'campaignCreationAndEditing',\r\n label: i18n.getString(_TL_('Campaign creation and editing')),\r\n withComment: false,\r\n }, {\r\n key: 'interfaceNavigation',\r\n label: i18n.getString(_TL_('Interface navigation')),\r\n withComment: false,\r\n }, {\r\n key: 'searchAndFiltering',\r\n label: i18n.getString(_TL_('Search and filtering')),\r\n withComment: false,\r\n }, {\r\n key: 'theOverviewPage',\r\n label: i18n.getString(_TL_('The overview page')),\r\n withComment: false,\r\n }, {\r\n key: 'others',\r\n label: i18n.getString(_TL_('Others - Please feel free to elaborate below')),\r\n withComment: true,\r\n },\r\n ], [i18n]);\r\n\r\n const initialAreaState = useMemo(() => reduce(areaOptions, (memo, { key }) => ({\r\n ...memo,\r\n [key]: false,\r\n }), {}), [areaOptions]);\r\n\r\n const [areaState, setAreaState] = useState(initialAreaState);\r\n\r\n const [areaComment, setAreaComment] = useState('');\r\n const [areaCommentDescription, setAreaCommentDescription] = useState('');\r\n const [areaCommentError, setAreaCommentError] = useState('');\r\n\r\n const onChangeAreaComment = useCallback((_, val) => {\r\n setAreaComment(val);\r\n if (val.length > commentMaxLength) {\r\n setAreaCommentDescription('');\r\n setAreaCommentError('Field should not exceed 2000 characters');\r\n } else {\r\n setAreaCommentDescription(`${commentMaxLength - val.length} characters remaining`);\r\n setAreaCommentError('');\r\n }\r\n }, []);\r\n\r\n const [comment, setComment] = useState('');\r\n const [commentDescription, setCommentDescription] = useState('');\r\n const [commentError, setCommentError] = useState('');\r\n\r\n const onChangeComment = useCallback((_, val) => {\r\n setComment(val);\r\n if (val.length > commentMaxLength) {\r\n setCommentDescription('');\r\n setCommentError('Field should not exceed 2000 characters');\r\n } else {\r\n setCommentDescription(`${commentMaxLength - val.length} characters remaining`);\r\n setCommentError('');\r\n }\r\n }, []);\r\n\r\n const [emailOption, setEmailOption] = useState(false);\r\n const [email, setEmail] = useState(serverContext.CurrentUser.Email);\r\n const [emailError, setEmailError] = useState('');\r\n\r\n const onChangeEmailOption = useCallback((_, option) => {\r\n setEmailOption(option);\r\n }, []);\r\n\r\n const validateEmailAddress = useCallback((emailAddress) => {\r\n const re = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return re.test(emailAddress);\r\n }, []);\r\n\r\n const onChangeEmail = useCallback((_, val) => {\r\n setEmail(val);\r\n if (validateEmailAddress(val)) {\r\n setEmailError('');\r\n } else {\r\n setEmailError(i18n.getString(_TL_('Invalid email address')));\r\n }\r\n }, [validateEmailAddress, i18n]);\r\n\r\n const emailOptions = useMemo(() => {\r\n const options = [\r\n {\r\n key: 'yes',\r\n text: i18n.getString(_TL_('Yes - specify the contact email below')),\r\n },\r\n {\r\n key: 'no',\r\n text: i18n.getString(_TL_('No')),\r\n },\r\n ];\r\n\r\n return options.map(value => ({\r\n ariaLabel: value.text,\r\n onRenderField: (_props, render) => (\r\n \r\n {render(_props)}\r\n {emailOption && emailOption.key === 'yes' && value.key === 'yes' &&\r\n
\r\n \r\n {emailError}\r\n
\r\n \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Feedback to Microsoft'))}\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Please rate your overall satisfaction with Microsoft Advertising\\'s interface. '))}\r\n * \r\n \r\n
\r\n {validationError}\r\n
\r\n
\r\n {selectedOption && selectedOption.isAdditionalContentVisible &&\r\n
\r\n \r\n
\r\n (`${selectedOption.text}`),\r\n }}\r\n template={\r\n i18n.getString(_TL_('Can you tell us more about where you are {{b}}{{/b}} with our interface?'))\r\n }\r\n />\r\n
\r\n {map(areaOptions, ({ key, label, withComment }) => {\r\n const checkbox =\r\n (
{\r\n setAreaState(prev => ({\r\n ...prev,\r\n [key]: checked,\r\n }));\r\n }}\r\n />);\r\n if (withComment && areaState[key]) {\r\n return (\r\n \r\n {checkbox}\r\n \r\n );\r\n }\r\n return checkbox;\r\n })}\r\n \r\n \r\n {i18n.getString(_TL_('How can we continue to improve?'))}\r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Can we follow up with you about yor responses?'))}\r\n \r\n
\r\n \r\n }\r\n
\r\n
\r\n (\r\n \r\n {`${text} `}\r\n
\r\n
\r\n
\r\n
{\r\n survey.onSurveySubmit();\r\n resetActiveElement();\r\n logActivity(`SurveyManager | survey: ${survey.getSurveyName()}, action: submit, additionalLogData: ${stringifySync(additionalLogData)}`);\r\n }}\r\n onSurveyDismiss={(additionalLogData = {}) => {\r\n survey.onSurveyDismiss();\r\n resetActiveElement();\r\n logActivity(`SurveyManager | survey: ${survey.getSurveyName()}, action: dismiss, additionalLogData: ${stringifySync(additionalLogData)}`);\r\n }}\r\n onSurveyRender={onSurveyRender}\r\n lastActiveElement={lastActiveElement}\r\n customParams={survey.getSurveyCustomParams()}\r\n />\r\n );\r\n }, [survey, isTestEnv, serverContext, tokenInfo, logActivity, onSurveyRender, lastActiveElement, resetActiveElement]);\r\n\r\n return Component;\r\n};\r\n\r\nSurveyContainer.propTypes = {\r\n survey: PropTypes.shape({\r\n getSurveyName: PropTypes.func.isRequired,\r\n getSurveyId: PropTypes.func.isRequired,\r\n getSurveyComponent: PropTypes.func.isRequired,\r\n getSurveyInterface: PropTypes.func.isRequired,\r\n getSurveyProduct: PropTypes.func.isRequired,\r\n getSurveyCustomParams: PropTypes.func.isRequired,\r\n isReportingPipelineEnabled: PropTypes.func.isRequired,\r\n onSurveyRender: PropTypes.func.isRequired,\r\n onSurveySubmit: PropTypes.func.isRequired,\r\n onSurveyDismiss: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logActivity: PropTypes.func.isRequired,\r\n isTestEnv: PropTypes.bool.isRequired,\r\n onSurveyRender: PropTypes.func.isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n tokenInfo: PropTypes.shape({}),\r\n lastActiveElement: PropTypes.shape({}).isRequired,\r\n resetActiveElement: PropTypes.func.isRequired,\r\n};\r\n\r\nSurveyContainer.defaultProps = {\r\n tokenInfo: {},\r\n};\r\n","export const setSurveyHasCampaign = () => {\r\n if (window.survey && window.survey.surveyManager && window.survey.hasCampaign === false) {\r\n window.survey.hasCampaign = true;\r\n window.survey.surveyManager.trigger();\r\n }\r\n};\r\n\r\nexport const createDOMContainer = () => {\r\n let DOMContainer;\r\n if (document.getElementById('survey-container')) {\r\n DOMContainer = document.getElementById('survey-container');\r\n } else {\r\n DOMContainer = document.createElement('div');\r\n DOMContainer.setAttribute('id', 'survey-container');\r\n }\r\n return DOMContainer;\r\n};\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { sortBy, find, isEmpty, result } from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { PopupContextProvider } from '@bingads-webui-react/popup-manager';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { stringifySync } from '@bingads-webui/safe-json';\r\nimport { getWebuiSurveyList } from './survey-list';\r\nimport { SurveyContainer } from './survey-container';\r\nimport { createDOMContainer } from './util';\r\n\r\nlet lastActiveElement;\r\n\r\nexport const SurveyManager = (props) => {\r\n const {\r\n i18n,\r\n serverContext,\r\n PreferenceService,\r\n tokenInfo,\r\n appActivity,\r\n activityName,\r\n appPerfMarker,\r\n } = props;\r\n\r\n const logActivity = (message) => {\r\n if (appActivity) {\r\n appActivity.signal(message, activityName);\r\n }\r\n };\r\n\r\n const {\r\n surveyList = getWebuiSurveyList({\r\n serverContext,\r\n PreferenceService,\r\n logActivity,\r\n }),\r\n } = props;\r\n\r\n const isTestEnv = !result(serverContext, 'IsProdEnv') && !window.location.href.toLowerCase().includes('ads.microsoft.com');\r\n\r\n const isTokenInfoInvalid = () => !isTestEnv &&\r\n (isEmpty(tokenInfo) || !tokenInfo.UserId || !tokenInfo.TenantId);\r\n\r\n const renderSurveyToDom = (survey) => {\r\n if (isTokenInfoInvalid()) {\r\n logActivity(`SurveyManager | tokenInfo is invalid, tokenInfo: ${tokenInfo}`);\r\n return;\r\n }\r\n\r\n const renderSurveyPerfMarker = appPerfMarker.createChild('Render_Survey');\r\n renderSurveyPerfMarker.willInit();\r\n lastActiveElement = document && document.activeElement;\r\n ReactDOM.render(\r\n \r\n \r\n {/* enable centralized popup management for survey */}\r\n \r\n {\r\n survey.onSurveyRender();\r\n logActivity(`SurveyManager | survey: ${survey.getSurveyName()}, action: render, additionalLogData: ${stringifySync(additionalLogData)}`);\r\n renderSurveyPerfMarker.done();\r\n }}\r\n lastActiveElement={lastActiveElement}\r\n resetActiveElement={() => {\r\n lastActiveElement = undefined;\r\n }}\r\n {...props}\r\n />\r\n \r\n \r\n ,\r\n createDOMContainer()\r\n );\r\n };\r\n\r\n const selectSurvey = () => {\r\n // get the available survey with the highest priority\r\n const sortedSurveyList = sortBy(surveyList, survey => survey.getSurveyPriority()).reverse();\r\n const selectedSurvey = find(sortedSurveyList, survey =>\r\n survey.validateTriggerCondition() && survey.validateUserGovernance());\r\n\r\n return selectedSurvey;\r\n };\r\n\r\n let survey;\r\n\r\n return {\r\n getSurvey: () => survey,\r\n setSurvey: () => {\r\n survey = selectSurvey();\r\n },\r\n render: () => {\r\n if (survey) {\r\n renderSurveyToDom(survey);\r\n }\r\n },\r\n trigger: ({\r\n checkIfSurveyIsOpen,\r\n } = {}) => {\r\n if (checkIfSurveyIsOpen) {\r\n const elements = document.getElementsByClassName('webui-user-survey');\r\n if (elements.length) {\r\n return;\r\n }\r\n }\r\n const newSurvey = selectSurvey();\r\n if (!newSurvey) {\r\n // do nothing if no available survey\r\n } else {\r\n survey = newSurvey;\r\n renderSurveyToDom(survey);\r\n }\r\n },\r\n };\r\n};\r\n","import { SurveyManager } from './survey-manager';\r\nimport { setSurveyHasCampaign } from './util';\r\n\r\nexport const setupSurveyManager = (({\r\n i18n,\r\n serverContext,\r\n PreferenceService,\r\n tokenInfo,\r\n surveyList,\r\n appActivity,\r\n activityName,\r\n appPerfMarker,\r\n}) => {\r\n // set up global variables\r\n window.survey = {\r\n hasCampaign: false,\r\n setSurveyHasCampaign,\r\n };\r\n\r\n window.survey.surveyManager = SurveyManager({\r\n i18n,\r\n serverContext,\r\n PreferenceService,\r\n tokenInfo,\r\n surveyList,\r\n appActivity,\r\n activityName,\r\n appPerfMarker,\r\n });\r\n});\r\n","import $ from 'jquery';\r\nimport React from 'react';\r\n\r\nconst hideChartButtonLocator = '.app-shell-content ul.navbar-nav a.button-hide-graph';\r\nconst showChartButtonLocator = '.app-shell-content ul.navbar-nav a.button-show-graph';\r\n\r\nfunction hideChart() {\r\n /* istanbul ignore next */\r\n if ($(hideChartButtonLocator)[0]) {\r\n $(hideChartButtonLocator)[0].click();\r\n\r\n return true;\r\n }\r\n\r\n return false;\r\n}\r\n\r\nfunction restoreChart(isChartOpen) {\r\n /* istanbul ignore next */\r\n if (isChartOpen && $(showChartButtonLocator)[0]) {\r\n $(showChartButtonLocator)[0].click();\r\n } else if (!isChartOpen && $(hideChartButtonLocator)[0]) {\r\n $(hideChartButtonLocator)[0].click();\r\n }\r\n}\r\n\r\nexport function withToggleChart(Component) {\r\n return props => (\r\n this.toggleExpandTable()} isTableExpandedFlag={this.isTableExpanded()} />\r\n );\r\n }\r\n}\r\n\r\nToolbarContainerUINext.propTypes = {\r\n forceHideToolbar: PropTypes.bool.isRequired,\r\n showToolbarSelected: PropTypes.bool.isRequired,\r\n showToolbarUnselected: PropTypes.bool.isRequired,\r\n toolbarSelectedConfig: PropTypes.objectOf(PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n })),\r\n toolbarUnselectedConfig: PropTypes.objectOf(PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n })),\r\n onClear: PropTypes.func.isRequired,\r\n selectionCount: PropTypes.number,\r\n totalCount: PropTypes.number,\r\n isCrossPageAllSelected: PropTypes.bool,\r\n isSinglePageAllSelected: PropTypes.bool,\r\n isMultiPage: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n onDataDidRender: PropTypes.func,\r\n layoutConfig: PropTypes.shape({}).isRequired,\r\n changeLayout: PropTypes.func.isRequired,\r\n hideChart: PropTypes.func.isRequired,\r\n restoreChart: PropTypes.func.isRequired,\r\n hotKey: PropTypes.string.isRequired,\r\n count: PropTypes.number.isRequired,\r\n};\r\n\r\nToolbarContainerUINext.defaultProps = {\r\n selectionCount: 0,\r\n totalCount: 0,\r\n isCrossPageAllSelected: false,\r\n isSinglePageAllSelected: false,\r\n isMultiPage: false,\r\n i18n: null,\r\n onDataDidRender: noop,\r\n toolbarSelectedConfig: new Map(),\r\n toolbarUnselectedConfig: undefined,\r\n};\r\n\r\n// TODO: merge theme with styles in the callback\r\nexport const ToolbarContainer = withHotKeys(withToggleChart(withLayoutContext(withDefaultStyles(ToolbarContainerUINext, getStyles))), ShortcutType.CollapseTable);\r\n","/* istanbul ignore file */\r\nimport { getLabelStyle } from './label-style';\r\n\r\nexport const getGlobalStyles = ({ palette = {}, semanticColors = {}, spacing = {} }) => ({\r\n '@global': Object.assign(getLabelStyle({ palette, semanticColors, spacing })),\r\n});\r\n","export const getIconsClassNameMap = classes => ({\r\n expanded: `${classes.nodeIcon} iconba iconba-ChevronDownSmall`,\r\n collapsed: `${classes.nodeIcon} iconba iconba-ChevronRightSmall`,\r\n});\r\n","import _ from 'underscore';\r\n\r\nexport class RouterUtility {\r\n static isActive(node) {\r\n return !!(node.selected && !_.findWhere(node.children, { selected: true }));\r\n }\r\n}\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport { Link as RouterLink } from '@bingads-webui-campaign-react/router';\r\nimport { ExpandableNode, Renderer } from '@bingads-webui-react/tree-view';\r\nimport { getRoutePathById } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { RouterUtility } from './router-utility';\r\n\r\nexport function NodeRenderer(classes, scope, sitemap, shouldRenderParentNodeAsLink) {\r\n const isActiveNode = node => RouterUtility.isActive(node);\r\n const isParentNode = node => node.children && node.children.length !== 0;\r\n const shouldRenderDiv = node => (shouldRenderParentNodeAsLink ? (!!node.noNavigation) : isParentNode(node));\r\n const queryString = scope.stringify();\r\n\r\n const renderLinkOrDiv = (node, args) => {\r\n if (shouldRenderDiv(node)) {\r\n return (\r\n \r\n {node.name}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n isActiveNode(node) ?\r\n \r\n {node.name}\r\n \r\n :\r\n \r\n {args.nodeChildRenderer(node)}\r\n \r\n );\r\n };\r\n\r\n return (node, args) => (\r\n \r\n \r\n {isActiveNode(node) &&
}\r\n {\r\n renderLinkOrDiv(node, args)\r\n }\r\n \r\n \r\n );\r\n}\r\n\r\nNodeRenderer.propTypes = Renderer;\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport { withRouter } from '@bingads-webui-campaign-react/router';\r\nimport PropTypes from 'prop-types';\r\nimport { TreeView } from '@bingads-webui-react/tree-view';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { getTreeStyle } from './styles/tree-view-styles';\r\nimport { getIconsClassNameMap } from './styles/icon-class-name-map';\r\nimport { NodeRenderer } from './utils/node-renderer';\r\nimport { RouterUtility } from './utils/router-utility';\r\n\r\nclass TreeMenu extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n nodes: props.siteMap,\r\n };\r\n this.RouterNode = NodeRenderer(props.classes, props.scope, props.siteMap, props.shouldRenderParentNodeAsLink);\r\n }\r\n\r\n static getDerivedStateFromProps(nextProps, prevState) {\r\n const flattenedStatefulMap = {};\r\n\r\n function flattenPreviousNodes(siteMap) {\r\n _.forEach(siteMap, (node) => {\r\n flattenedStatefulMap[node.id] = node;\r\n if (node.children) {\r\n flattenPreviousNodes(node.children);\r\n }\r\n });\r\n }\r\n function mergeNodeState(siteMap) {\r\n return _.map(siteMap, (node) => {\r\n const previousMatch = flattenedStatefulMap[node.id];\r\n const output = _.clone(node);\r\n if (previousMatch && previousMatch.state) {\r\n output.state = previousMatch.state;\r\n }\r\n if (output.children) {\r\n output.children = mergeNodeState(output.children);\r\n }\r\n output.name = nextProps.i18n.getString(output.name);\r\n if (output.title) {\r\n output.title = nextProps.i18n.getString(output.title);\r\n }\r\n return output;\r\n });\r\n }\r\n flattenPreviousNodes(prevState.nodes);\r\n\r\n return {\r\n nodes: mergeNodeState(nextProps.siteMap),\r\n };\r\n }\r\n\r\n onChange = (nodes) => {\r\n this.setState({ nodes });\r\n };\r\n\r\n getClassNames = node => [`${this.props.classes.nodeStyle} hyperlink-node-${node.id}`];\r\n\r\n expandSelectedParentNodes(node) {\r\n const childMatch =\r\n _.isArray(node.children) ?\r\n !!_.find(\r\n node.children,\r\n childNode => this.expandSelectedParentNodes(childNode)\r\n ) :\r\n false;\r\n\r\n if (childMatch) {\r\n const updatedNode = node;\r\n updatedNode.state = node.state ?\r\n _.extend(node.state, { expanded: true }) :\r\n { expanded: true };\r\n return true;\r\n }\r\n\r\n return node.route ? RouterUtility.isActive(node) : false;\r\n }\r\n\r\n render() {\r\n const { nodes } = this.state;\r\n const {\r\n classes, scope, siteMap, shouldRenderParentNodeAsLink, expandIconAriaLabel, i18n,\r\n } = this.props;\r\n const RouterNode = NodeRenderer(classes, scope, siteMap, shouldRenderParentNodeAsLink);\r\n\r\n if (this.currentPath !== this.props.location.pathname) {\r\n this.currentPath = this.props.location.pathname;\r\n _.each(nodes, node => (this.expandSelectedParentNodes(node)));\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nTreeMenu.propTypes = {\r\n classes: PropTypes.objectOf(PropTypes.string).isRequired,\r\n location: PropTypes.shape({\r\n pathname: PropTypes.string,\r\n }).isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n shouldRenderParentNodeAsLink: PropTypes.bool,\r\n expandIconAriaLabel: PropTypes.string,\r\n};\r\n\r\nTreeMenu.defaultProps = {\r\n shouldRenderParentNodeAsLink: false,\r\n expandIconAriaLabel: undefined,\r\n};\r\n\r\nexport const StyledTreeMenu = withI18nConsumer(withScope(withRouter(withDefaultStyles(TreeMenu, getTreeStyle))));\r\n","export const getTreeStyle = (treeMenu, { palette = {} }) => ({\r\n placeholder: {\r\n display: 'inline-block',\r\n height: '1em',\r\n width: '200px',\r\n backgroundColor: '#DDD',\r\n marginLeft: '20px',\r\n },\r\n nodeIcon: {\r\n display: 'inline-block',\r\n verticalAlign: 'top',\r\n height: 12,\r\n width: 12,\r\n padding: 8,\r\n fontSize: '11px',\r\n cursor: 'pointer',\r\n },\r\n runningIcon: {\r\n display: 'inline-block',\r\n margin: '0px 0px 0px 3px',\r\n fontSize: '11px',\r\n },\r\n nodeStyle: {\r\n display: 'inline-block',\r\n whiteSpace: 'nowrap',\r\n height: 36,\r\n width: 164,\r\n cursor: 'pointer',\r\n '&:focus': {\r\n outlineOffset: -1,\r\n outline: `1px solid ${palette.neutralSecondary}`,\r\n },\r\n },\r\n nodeNonActive: {\r\n '&:hover': {\r\n backgroundColor: palette.neutralLight,\r\n textDecoration: 'none',\r\n color: palette.themePrimary,\r\n },\r\n },\r\n nodeActive: {\r\n backgroundColor: palette.themeLighter,\r\n '&:hover': {\r\n backgroundColor: `${palette.themeLight} !important`,\r\n textDecoration: 'none',\r\n color: palette.themePrimary,\r\n },\r\n },\r\n nodeHyperlink: {\r\n width: '100%',\r\n display: 'inline-block',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n maxWidth: '100%',\r\n whiteSpace: 'nowrap',\r\n textDecoration: 'none',\r\n verticalAlign: 'top',\r\n color: 'black',\r\n padding: 8,\r\n fontSize: '14px',\r\n '&:hover': {\r\n color: 'black',\r\n textDecoration: 'none',\r\n },\r\n },\r\n nodeHyperLinkParent: {\r\n\r\n },\r\n nodeHyperLinkNonParent: {\r\n marginLeft: 15,\r\n },\r\n nodeHyperlinkActive: {\r\n fontWeight: '600',\r\n },\r\n treeViewContainer: {\r\n fontFamily: 'Arial,sans-serif',\r\n fontSize: '12px',\r\n lineHeight: '14px',\r\n flex: '1 1 auto',\r\n height: '100%',\r\n backgroundColor: palette.neutralLighter,\r\n '& .ReactVirtualized__Grid': {\r\n '&:focus': {\r\n outline: 'none',\r\n },\r\n },\r\n },\r\n beforeIcon: {\r\n borderLeft: `4px solid ${palette.themePrimary}`,\r\n padding: 0,\r\n marginRight: -4,\r\n alignSelf: 'stretch',\r\n height: '100%',\r\n float: 'left',\r\n },\r\n});\r\n\r\n","import _ from 'underscore';\r\nimport { WaterfallFilterStorage, WaterfallFilterType, waterfallDateFilterProcessor } from '@bingads-webui-campaign/filter-storage';\r\nimport { getCivilDateToday, compareCivilDate, DefaultSpecificRanges, ComparedOptions,\r\n generateDateData, getRangesFromData, translateLegacyToIANATimezone, RANGES } from '@bingads-webui-universal/temporal-utitlities';\r\nimport { getNthPeriodWithRangeType, getRangeIndexWithDefaultType } from '@bingads-webui-react/quick-date-left-right-picker';\r\nimport state from '@bingads-webui-component-legacy/state/index';\r\nimport { I18nModel } from '@bingads-webui-universal/i18n-model';\r\nimport { stringifySync } from '@bingads-webui/safe-json';\r\n\r\nfunction log(appActivity, msg) {\r\n try {\r\n appActivity.trace(msg, 'updateDateRange');\r\n } catch (e) {\r\n // Do nothing, this logging is not critical.\r\n }\r\n}\r\n\r\nfunction patchLegacyState(waterfallFilterStorage, serverContext, preferenceService) {\r\n // this part also exists in init-legacy-components.js, move to here to execute it earlier to let earlier operation to use the new date range\r\n if (!state.attributes.$daterange) {\r\n Object.defineProperty(state.attributes, '$daterange', {\r\n get: () => {\r\n if (_.isUndefined(waterfallFilterStorage)) {\r\n // eslint-disable-next-line no-param-reassign\r\n waterfallFilterStorage = new WaterfallFilterStorage({\r\n preferenceService,\r\n });\r\n }\r\n const dateRange = waterfallDateFilterProcessor(\r\n waterfallFilterStorage.getFilters([WaterfallFilterType.DateFilter]),\r\n serverContext\r\n );\r\n return _.extend({\r\n formatedEnd: dateRange.RangeEndDate,\r\n formatedStart: dateRange.RangeStartDate,\r\n }, dateRange);\r\n },\r\n });\r\n }\r\n}\r\n\r\nexport function updateDateRange(preferenceService, serverContext, appActivity) {\r\n const waterfallFilterStorage = new WaterfallFilterStorage({ preferenceService });\r\n const dateFilter = waterfallDateFilterProcessor(\r\n waterfallFilterStorage.getFilters([WaterfallFilterType.DateFilter]),\r\n serverContext\r\n );\r\n patchLegacyState(waterfallFilterStorage, serverContext, preferenceService);\r\n const {\r\n CurrentUser: {\r\n CultureDateTimeFormat: {\r\n ShortDatePattern,\r\n },\r\n LocaleID,\r\n },\r\n CurrentAccount: {\r\n TimeZone,\r\n },\r\n } = serverContext;\r\n\r\n const isImprovedDateRangePickerEnabled = serverContext.DynamicPermissions && serverContext.DynamicPermissions.ImprovedDateFilter;\r\n\r\n const i18nFormat = new I18nModel({\r\n loadTranslationData: (/* locale */) => ({}),\r\n loadCLDRData: currentLocale => currentLocale,\r\n failFast: true,\r\n });\r\n\r\n log(appActivity, `dateFilter: ${JSON.stringify(dateFilter)}`);\r\n if (!dateFilter || dateFilter.Rangelcid !== LocaleID\r\n || !dateFilter.start || !dateFilter.end || !dateFilter.RangeEndDate || !dateFilter.RangeStartDate\r\n || (dateFilter.compared && (!dateFilter.compared.start || !dateFilter.compared.end ||\r\n !dateFilter.compared.formattedStart || !dateFilter.compared.formattedEnd))) {\r\n // if the date filter is invalid, fallback to yesterday\r\n const yesterday = getCivilDateToday().plus({ days: -1 });\r\n const fallbackDate = `${i18nFormat.formatCivilDate(yesterday, { raw: ShortDatePattern })}`;\r\n\r\n log(appActivity, `Fallback to yesterday. dateFilter: ${JSON.stringify(dateFilter)}`);\r\n\r\n waterfallFilterStorage.save(WaterfallFilterType.DateFilter, {\r\n RangeStartDate: fallbackDate,\r\n RangeEndDate: fallbackDate,\r\n RangeId: RANGES.Yesterday,\r\n Rangelcid: LocaleID,\r\n compared: null,\r\n RangeIndex: getRangeIndexWithDefaultType({ rangeId: RANGES.Yesterday }),\r\n });\r\n } else if (dateFilter.RangeId !== RANGES.Custom) {\r\n // if the date filter is valid and not custom, update the date filter\r\n const timeZone = translateLegacyToIANATimezone(TimeZone);\r\n const specificRanges = DefaultSpecificRanges(i18nFormat, timeZone);\r\n const { selectedRange, selectedComparedRange } = getRangesFromData(i18nFormat, dateFilter, ShortDatePattern, dateFilter.Rangelcid);\r\n let newSelectedRange = null;\r\n let RangeIndex = dateFilter.RangeIndex || getRangeIndexWithDefaultType({ rangeId: dateFilter.RangeId });\r\n const { RangeDays } = dateFilter;\r\n\r\n if (isImprovedDateRangePickerEnabled && dateFilter.RangeIndex) {\r\n const EntireTime = _.find(specificRanges, range => range.rangeId === RANGES.EntireTime);\r\n const rangeWithIndex = getNthPeriodWithRangeType({ rangeId: dateFilter.RangeId }, RangeIndex, EntireTime.range.start, EntireTime.range.end, RangeDays);\r\n const { rangeIndex: cRangeIndex, range } = rangeWithIndex;\r\n RangeIndex = cRangeIndex;\r\n newSelectedRange = range;\r\n log(appActivity, `UseNthDate - newSelectedRange: ${stringifySync(newSelectedRange)}, RangeIndex: ${cRangeIndex}, EntireTime: ${stringifySync(EntireTime)}`);\r\n } else {\r\n const selectedSpecificRange = _.find(specificRanges, range => range.rangeId === dateFilter.RangeId);\r\n newSelectedRange = selectedSpecificRange ? selectedSpecificRange.range : selectedRange;\r\n log(appActivity, `UseNormalDate - newSelectedRange: ${stringifySync(newSelectedRange)}`);\r\n }\r\n\r\n if (!selectedRange.start || !selectedRange.end) {\r\n const today = getCivilDateToday();\r\n\r\n log(appActivity, 'Formatted date invalid fallback to today');\r\n selectedRange.start = today;\r\n selectedRange.end = today;\r\n }\r\n\r\n if (compareCivilDate(selectedRange.start, newSelectedRange.start) === 0 &&\r\n compareCivilDate(selectedRange.end, newSelectedRange.end) === 0) {\r\n log(appActivity, 'No change. Use the same date range');\r\n return;\r\n }\r\n\r\n // To update the date range, we also need to update the compared range and check if the compared range is valid\r\n let newSelectedComparedRange = null;\r\n let comparedOption = null;\r\n if (dateFilter && dateFilter.compared) {\r\n comparedOption =\r\n _.find(ComparedOptions, option => option.keyToExport === dateFilter.compared.key);\r\n newSelectedComparedRange = comparedOption && comparedOption.keyToExport !== 'customPeriod' ?\r\n comparedOption.get(newSelectedRange, dateFilter.RangeId) : selectedComparedRange;\r\n }\r\n\r\n const data = generateDateData(\r\n i18nFormat,\r\n {\r\n selectedRange: newSelectedRange,\r\n selectedComparedRange: newSelectedComparedRange,\r\n comparedOption,\r\n rangeType: { rangeId: dateFilter.RangeId },\r\n rangeIndex: RangeIndex,\r\n rangeDays: RangeDays,\r\n },\r\n ShortDatePattern,\r\n dateFilter.Rangelcid,\r\n timeZone\r\n );\r\n\r\n log(appActivity, `DateFilter: ${JSON.stringify(dateFilter)}. Change: ${JSON.stringify(selectedRange)} -> ${stringifySync(newSelectedRange)}`);\r\n waterfallFilterStorage.save(WaterfallFilterType.DateFilter, data);\r\n } else {\r\n const { selectedRange, selectedComparedRange } = getRangesFromData(i18nFormat, dateFilter, ShortDatePattern, dateFilter.Rangelcid);\r\n\r\n if (!selectedRange.start || !selectedRange.end ||\r\n (!selectedComparedRange.start && selectedComparedRange.end) || (selectedComparedRange.start && !selectedComparedRange.end)) {\r\n const yesterday = getCivilDateToday().plus({ days: -1 });\r\n const fallbackDate = `${i18nFormat.formatCivilDate(yesterday, { raw: ShortDatePattern })}`;\r\n\r\n log(appActivity, `Fallback to yesterday for custom dateFilter: ${JSON.stringify(dateFilter)}. Change: ${JSON.stringify(selectedRange)}`);\r\n\r\n waterfallFilterStorage.save(WaterfallFilterType.DateFilter, {\r\n RangeStartDate: fallbackDate,\r\n RangeEndDate: fallbackDate,\r\n RangeId: RANGES.Yesterday,\r\n Rangelcid: LocaleID,\r\n compared: null,\r\n RangeIndex: getRangeIndexWithDefaultType({ rangeId: RANGES.Yesterday }),\r\n });\r\n }\r\n }\r\n}\r\n","import _ from 'underscore';\r\n\r\nconst MTCampaignTypeEnum = {\r\n Default: 1,\r\n Shopping: 2,\r\n DynamicSearchAds: 4,\r\n Audience: 8,\r\n};\r\n\r\nconst MTCampaignStatus = {\r\n Suspended: 8,\r\n Active: 121,\r\n Deleted: 123,\r\n UserPaused: 124,\r\n BudgetPaused: 126,\r\n BudgetUserPaused: 127,\r\n};\r\n\r\nconst MTAdGroupStatus = {\r\n CampaignUserPaused: 124,\r\n CampaignBudgetPaused: 126,\r\n CampaignBudgetUserPaused: 127,\r\n Draft: 140,\r\n Active: 141,\r\n Deleted: 143,\r\n Paused: 144,\r\n Expired: 150,\r\n};\r\n\r\nexport function convertStringToEnumForCampaign(currentCampaign) {\r\n if (_.isEmpty(currentCampaign)) {\r\n return currentCampaign;\r\n }\r\n const campaign = _.clone(currentCampaign);\r\n campaign.CampaignType = MTCampaignTypeEnum[currentCampaign.CampaignType];\r\n campaign.Status = MTCampaignStatus[currentCampaign.Status];\r\n return campaign;\r\n}\r\n\r\nexport function convertStringToEnumForAdGroup(currentAdGroup) {\r\n if (_.isEmpty(currentAdGroup)) {\r\n return currentAdGroup;\r\n }\r\n const adGroup = _.clone(currentAdGroup);\r\n adGroup.Status = MTAdGroupStatus[currentAdGroup.Status];\r\n return adGroup;\r\n}\r\n","import { useContext } from 'react';\r\nimport { getEntityFromScope } from '@bingads-webui/edm-campaign';\r\nimport { useObservable } from '@bingads-webui-react/use-observable';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\n\r\nfunction useGivenEntity(select, edmInstance) {\r\n const observable = edmInstance ? edmInstance.get({ select }) : null;\r\n const state = useObservable(observable);\r\n\r\n return state.data;\r\n}\r\n\r\nconst campaignDefaultSelect = [\r\n 'Id',\r\n 'Name',\r\n 'Status',\r\n 'CampaignType',\r\n 'Budget',\r\n 'BiddingScheme',\r\n 'ExperimentId',\r\n];\r\n\r\nexport function useCurrentCampaign(select = campaignDefaultSelect) {\r\n const ctx = useContext(ScopeContext);\r\n const { currentCampaign } = getEntityFromScope(ctx.scope);\r\n\r\n return useGivenEntity(select, currentCampaign);\r\n}\r\n\r\nconst adGroupDefaultSelect = [\r\n 'Id',\r\n 'Name',\r\n 'Status',\r\n 'EntityStatus',\r\n 'SearchBid',\r\n 'BiddingScheme',\r\n];\r\n\r\nexport function useCurrentAdGroup(select = adGroupDefaultSelect) {\r\n const ctx = useContext(ScopeContext);\r\n const { currentAdGroup } = getEntityFromScope(ctx.scope);\r\n\r\n return useGivenEntity(select, currentAdGroup);\r\n}\r\n","\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Redirect } from 'react-router-dom';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport hoistNonReactStatics from 'hoist-non-react-statics';\r\nimport { getDisplayName } from '@bingads-webui-react/hoc-utils';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\n\r\nconst loadingFallback = (
);\r\nconst errorFallback = () => ( currentAdGroup.get()}\r\n escapeHatch={({ currentAdGroup }) => (currentAdGroup ? undefined : null)}\r\n fallback={loadingFallback}\r\n onError={enableErrorFallback\r\n ? errorFallback\r\n : () => ( currentCampaign.get()}\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : null)}\r\n fallback={loadingFallback}\r\n onError={enableErrorFallback\r\n ? errorFallback\r\n : () => (\r\n {children}\r\n \r\n );\r\n};\r\n\r\nWebViewContextProvider.propTypes = {\r\n children: PropTypes.node,\r\n instrumentation: PropTypes.shape({\r\n webView: PropTypes.shape({\r\n create: PropTypes.func,\r\n }),\r\n addScenario: PropTypes.func,\r\n }),\r\n};\r\n\r\nWebViewContextProvider.defaultProps = {\r\n children: undefined,\r\n instrumentation: undefined,\r\n};\r\n\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById, withSiteMap } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { CampaignSubTypeMapping } from '@bingads-webui-campaign-react/constants';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\n\r\nexport function withCampaign(Component) {\r\n const AdGroupCreationHoC = (props) => {\r\n const { scope: { values: { campaignId } } } = props;\r\n if (_.isUndefined(campaignId)) {\r\n props.scope.history.push({\r\n pathname: getRoutePathById(props.siteMap, 'adgroups'),\r\n search: props.scope.history.location.search,\r\n });\r\n return null;\r\n }\r\n\r\n /**\r\n * Get all data instead of partial data to avoid duplicate fetches\r\n * select is required to control the response data\r\n */\r\n const $select = _.compact([\r\n 'Budget',\r\n ]);\r\n\r\n return (\r\n currentCampaign.get({ select: $select })}\r\n >\r\n {(campaign) => {\r\n const currentCampaign = { ...campaign, CampaignSubType: CampaignSubTypeMapping[campaign.CampaignSubType], _IsAllData: true };\r\n\r\n return (\r\n currentAccount['Default.CampaignTypes'].$makeCall()}\r\n escapeHatch={({ currentAccount }) => (currentAccount ? undefined : {})}\r\n fallback={processor(allTypes)}\r\n onError={() => processor(emptyTypes)}\r\n testRef={testRef}\r\n >\r\n {campaignTypes => processor(_.isEmpty(campaignTypes.value) ?\r\n emptyTypes :\r\n getCampaignTypesCached(campaignTypes.value))}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n permissions: PropTypes.objectOf(PropTypes.oneOfType([\r\n PropTypes.bool,\r\n PropTypes.objectOf(PropTypes.bool),\r\n PropTypes.number,\r\n ])).isRequired,\r\n };\r\n\r\n return withPermissions(Wrapper);\r\n}\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { memoize } from '@bingads-webui-universal/primitive-utilities';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { CampaignType, siteMapPropType } from '@bingads-webui-react/with-site-map';\r\nimport { campaignTypeFilter, filterMapItem } from './processor-helpers';\r\n\r\nconst defaultCampaign = { CampaignType: CampaignType.All };\r\n\r\n\r\nconst filterMapItemByCampaign = (siteMap, permissions, campaignId, currentCampaign) => {\r\n const campaignFilter = (campaign, item) =>\r\n campaignTypeFilter(_.result(CampaignType, campaign.CampaignType, CampaignType.All), item, permissions) && // eslint-disable-line\r\n (!campaignId || !_.isFunction(item.currentCampaign) ||\r\n item.currentCampaign(campaign === defaultCampaign ? null : campaign, permissions));\r\n\r\n return filterMapItem(\r\n siteMap,\r\n _.partial(campaignFilter, currentCampaign),\r\n permissions\r\n );\r\n};\r\n\r\nconst filterMapItemByCampaignCached = memoize(filterMapItemByCampaign);\r\n\r\n/**\r\n * Only for testing\r\n */\r\nexport const testRef = { current: undefined };\r\n\r\nexport function processCampaignId(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const {\r\n scope: { values: { campaignId } },\r\n permissions,\r\n } = props;\r\n\r\n const processor = campaign => ( currentCampaign.get()}\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : {})}\r\n fallback={processor(defaultCampaign)}\r\n onError={() => processor(defaultCampaign)}\r\n testRef={testRef}\r\n >\r\n {campaign => processor(campaign)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n permissions: PropTypes.objectOf(PropTypes.oneOfType([\r\n PropTypes.bool,\r\n PropTypes.objectOf(PropTypes.bool),\r\n PropTypes.number,\r\n ])).isRequired,\r\n };\r\n\r\n return withPermissions(withScope(Wrapper));\r\n}\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { memoize } from '@bingads-webui-universal/primitive-utilities';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withGlobalFilter } from '@bingads-webui-react/global-filter-context';\r\nimport { WaterfallFilterType } from '@bingads-webui/filter-commons';\r\nimport { CampaignType, siteMapPropType } from '@bingads-webui-react/with-site-map';\r\nimport { filterMapItem, getFilteredCampaignType } from './processor-helpers';\r\n\r\nconst defaultCampaign = { CampaignType: CampaignType.All };\r\n\r\nfunction smartCampaignFilter(\r\n campaign,\r\n globalCampaignType,\r\n { isSmartPage }\r\n) {\r\n const isScopedSmartCampaign = campaign && campaign.Id ?\r\n campaign.CampaignType === 'Smart' :\r\n false;\r\n\r\n if (isScopedSmartCampaign || globalCampaignType === CampaignType.Smart) {\r\n // If the global filter is CampaignType.Smart\r\n // Or if you're scoped to a campaign of type \"Smart\"\r\n // Then want to hide all the other tabs\r\n return isSmartPage;\r\n }\r\n\r\n return !isSmartPage;\r\n}\r\n\r\nconst filterMapItemByCampaign = (siteMap, globalCampaignType, currentCampaign) => {\r\n const campaignFilter = (campaign, item) =>\r\n smartCampaignFilter(campaign, globalCampaignType, item);\r\n\r\n return filterMapItem(siteMap, _.partial(campaignFilter, currentCampaign));\r\n};\r\n\r\nconst filterMapItemByCampaignCached = memoize(filterMapItemByCampaign);\r\n\r\n/**\r\n * Only for testing\r\n */\r\nexport const testRef = { current: undefined };\r\n\r\nexport function processSmartCampaign(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const globalCampaignType\r\n = getFilteredCampaignType(props[WaterfallFilterType.CampaignType]);\r\n\r\n const processor = campaign => ( currentCampaign.get()}\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : {})}\r\n fallback={processor(defaultCampaign)}\r\n onError={() => processor(defaultCampaign)}\r\n testRef={testRef}\r\n >\r\n {campaign => processor(campaign)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n };\r\n\r\n return withGlobalFilter(withScope(Wrapper));\r\n}\r\n\r\nexport function processSmartCampaignSearch(Component) {\r\n const smartCampaignSearchFilter = ({ isSmartPage }) => !isSmartPage;\r\n const Wrapper = ({ siteMap, ...props }) => (\r\n currentCampaign.get()}\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : {})}\r\n fallback={processor(defaultCampaign)}\r\n onError={() => processor(defaultCampaign)}\r\n testRef={testRef}\r\n >\r\n {campaign => processor(campaign)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n };\r\n\r\n return withPermissions(withGlobalFilter(Wrapper));\r\n}\r\n","import React from 'react';\r\nimport { memoize } from '@bingads-webui-universal/primitive-utilities';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { CampaignType, siteMapPropType } from '@bingads-webui-react/with-site-map';\r\nimport { filterMapItem } from './processor-helpers';\r\n\r\nconst defaultCampaign = { CampaignType: CampaignType.All };\r\n\r\nconst updatePageMenuByCampaign = (siteMap, currentCampaign) => {\r\n const isPmaxCampaignWithStore = currentCampaign && currentCampaign.CampaignSettings &&\r\n currentCampaign.CampaignSettings[0] && currentCampaign.CampaignSettings[0]['@odata.type'] === '#Model.ShoppingSettings';\r\n\r\n const filter = (item) => {\r\n if (currentCampaign.CampaignType === 'PerformanceMax' && !isPmaxCampaignWithStore) {\r\n return item.id !== 'listing-groups' && item.id !== 'products';\r\n }\r\n return true;\r\n };\r\n\r\n return filterMapItem(siteMap, filter);\r\n};\r\n\r\nconst updatePageMenuByCampaignCached = memoize(updatePageMenuByCampaign);\r\n\r\n/**\r\n * Only for testing\r\n */\r\nexport const testRef = { current: undefined };\r\n\r\nexport function processPmaxRetailCampaignPageMenu(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const processor = campaign => ( currentCampaign.get()}\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : {})}\r\n fallback={processor(defaultCampaign)}\r\n onError={() => processor(defaultCampaign)}\r\n testRef={testRef}\r\n >\r\n {campaign => processor(campaign)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n };\r\n\r\n return Wrapper;\r\n}\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { memoize } from '@bingads-webui-universal/primitive-utilities';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withGlobalFilter } from '@bingads-webui-react/global-filter-context';\r\nimport { CampaignType, siteMapPropType, getCurrentScope } from '@bingads-webui-react/with-site-map';\r\nimport { filterMapItem } from './processor-helpers';\r\n\r\nconst defaultCampaign = { CampaignType: CampaignType.All };\r\n\r\nfunction smartShoppingCampaignFilter(\r\n campaign,\r\n currentScope,\r\n { smartShoppingCampaignScope }\r\n) {\r\n const isScopedSmartShoppingCampaign = campaign && campaign.Id ?\r\n campaign.CampaignSubType === 'ShoppingSmartAds' :\r\n false;\r\n\r\n if (isScopedSmartShoppingCampaign && smartShoppingCampaignScope &&\r\n !_.contains(smartShoppingCampaignScope, currentScope)) {\r\n // Hide page not support in current scope.\r\n return false;\r\n }\r\n\r\n return true;\r\n}\r\n\r\nconst filterMapItemByCampaign = (siteMap, currentScope, currentCampaign) => {\r\n const campaignFilter = (campaign, item) =>\r\n smartShoppingCampaignFilter(campaign, currentScope, item);\r\n\r\n return filterMapItem(siteMap, _.partial(campaignFilter, currentCampaign));\r\n};\r\n\r\nconst filterMapItemByCampaignCached = memoize(filterMapItemByCampaign);\r\n\r\n/**\r\n * Only for testing\r\n */\r\nexport const testRef = { current: undefined };\r\n\r\nexport function processSmartShoppingCampaign(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const {\r\n scope: { values: { aid, campaignId, adGroupId } },\r\n } = props;\r\n const currentScope = getCurrentScope(campaignId, adGroupId, aid);\r\n\r\n const processor = campaign => ( currentCampaign.get()}\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : {})}\r\n fallback={processor(defaultCampaign)}\r\n onError={() => processor(defaultCampaign)}\r\n testRef={testRef}\r\n >\r\n {campaign => processor(campaign)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n };\r\n\r\n return withGlobalFilter(withScope(Wrapper));\r\n}\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { memoize } from '@bingads-webui-universal/primitive-utilities';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withGlobalFilter } from '@bingads-webui-react/global-filter-context';\r\nimport { CampaignType, siteMapPropType, getCurrentScope } from '@bingads-webui-react/with-site-map';\r\nimport { WaterfallFilterType } from '@bingads-webui/filter-commons';\r\nimport { filterMapItem, getFilteredCampaignType } from './processor-helpers';\r\n\r\nconst defaultCampaign = { CampaignType: CampaignType.All };\r\n\r\nfunction hotelCampaignFilter(\r\n campaign,\r\n globalCampaignType,\r\n currentScope,\r\n { hotelCampaignScope }\r\n) {\r\n const isHotelCampaign = campaign && campaign.Id ?\r\n campaign.CampaignType === 'Hotel' :\r\n false;\r\n\r\n const isGlobalHotelCampaign = globalCampaignType === CampaignType.Hotel;\r\n\r\n if ((isHotelCampaign || isGlobalHotelCampaign) && hotelCampaignScope &&\r\n !_.contains(hotelCampaignScope, currentScope)) {\r\n // Hide page not support in current scope.\r\n return false;\r\n }\r\n return true;\r\n}\r\n\r\nconst filterMapItemByCampaign = (siteMap, globalCampaignType, currentScope, currentCampaign) => {\r\n const campaignFilter = (campaign, item) =>\r\n hotelCampaignFilter(campaign, globalCampaignType, currentScope, item);\r\n\r\n return filterMapItem(siteMap, _.partial(campaignFilter, currentCampaign));\r\n};\r\n\r\nconst filterMapItemByCampaignCached = memoize(filterMapItemByCampaign);\r\n\r\n/**\r\n * Only for testing\r\n */\r\nexport const testRef = { current: undefined };\r\n\r\nexport function processHotelCampaign(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const {\r\n scope: { values: { aid, campaignId, adGroupId } },\r\n } = props;\r\n const currentScope = getCurrentScope(campaignId, adGroupId, aid);\r\n const globalCampaignType\r\n = getFilteredCampaignType(props[WaterfallFilterType.CampaignType]);\r\n\r\n const processor = campaign => ( currentCampaign.get()}\r\n escapeHatch={({ currentCampaign }) => (currentCampaign ? undefined : {})}\r\n fallback={processor(defaultCampaign)}\r\n onError={() => processor(defaultCampaign)}\r\n testRef={testRef}\r\n >\r\n {campaign => processor(campaign)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n };\r\n\r\n return withGlobalFilter(withScope(Wrapper));\r\n}\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withGlobalFilter } from '@bingads-webui-react/global-filter-context';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { siteMapPropType, CampaignType, AdGroupType } from '@bingads-webui-react/with-site-map';\r\nimport { memoize } from '@bingads-webui-universal/primitive-utilities';\r\nimport { filterMapItem, campaignTypeFilter } from './processor-helpers';\r\n\r\nfunction mixedModeAdGroupFilter(adGroupType, item, permissions) {\r\n if (!permissions.IsDSAMixedModeCampaignEnabled) {\r\n return true;\r\n }\r\n\r\n if (!_.isEmpty(adGroupType)) {\r\n const { mixedModeAdGroup } = item;\r\n\r\n if (_.isFunction(mixedModeAdGroup)) {\r\n return mixedModeAdGroup({ AdGroupType: adGroupType }, item, permissions);\r\n }\r\n\r\n const isSearchDynamicAdGroup = adGroupType === 'SearchDynamic';\r\n if (isSearchDynamicAdGroup) {\r\n const { campaignTypes, adGroupTypes } = item;\r\n if (_.contains(campaignTypes, CampaignType.Default)) {\r\n return campaignTypeFilter(CampaignType.Default, { campaignTypes }, permissions) &&\r\n _.contains(adGroupTypes, AdGroupType.SearchDynamic);\r\n }\r\n return true;\r\n }\r\n }\r\n\r\n return true;\r\n}\r\n\r\nconst filterItemByAdGroup = memoize((siteMap, adGroupType, permissions) =>\r\n filterMapItem(siteMap, _.partial(mixedModeAdGroupFilter, adGroupType), permissions));\r\n\r\n/**\r\n* Only for testing\r\n*/\r\nexport const testRef = { current: undefined };\r\n\r\nexport function processMixedModeAdGroup(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const { permissions: { IsDSAMixedModeCampaignEnabled }, permissions } = props;\r\n\r\n if (!IsDSAMixedModeCampaignEnabled) {\r\n return currentAdGroup.get()}\r\n escapeHatch={({ currentAdGroup }) =>\r\n (currentAdGroup ? undefined : {})}\r\n fallback={processor()}\r\n onError={() => processor()}\r\n testRef={testRef}\r\n >\r\n {adgroup => processor(_.result(adgroup, 'AdGroupType'))}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n permissions: PropTypes.objectOf(PropTypes.oneOfType([\r\n PropTypes.bool,\r\n PropTypes.objectOf(PropTypes.bool),\r\n PropTypes.number,\r\n ])).isRequired,\r\n };\r\n\r\n return withPermissions(withGlobalFilter(withScope(Wrapper)));\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withGlobalFilter } from '@bingads-webui-react/global-filter-context';\r\nimport { WaterfallFilterType } from '@bingads-webui/filter-commons';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { siteMapPropType } from '@bingads-webui-react/with-site-map';\r\nimport { memoize } from '@bingads-webui-universal/primitive-utilities';\r\nimport { getFilteredCampaignType, filterMapItemByCampaignType } from './processor-helpers';\r\n\r\nconst cachedFilter = memoize(filterMapItemByCampaignType);\r\n\r\nexport function processGlobalFilter(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const campaignType\r\n = getFilteredCampaignType(props[WaterfallFilterType.CampaignType]);\r\n const processedSiteMap = cachedFilter(siteMap, campaignType, props.permissions);\r\n\r\n return ( storeQueries.getNewProviderBootstrapData(storeId)}\r\n promiseHashFn={() => `storeQueries.getNewProviderBootstrapData(${storeId})`}\r\n fallback={proccssor(defaultBootstrapData)}\r\n onError={() => proccssor(defaultBootstrapData)}\r\n >\r\n {storeBootstrapData => proccssor(storeBootstrapData)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n MMCDynamicTab: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n serverContext: PropTypes.shape({\r\n ServicesEndpoints: PropTypes.shape({\r\n MmcAPI: PropTypes.string.isRequired,\r\n }).isRequired,\r\n CurrentAccount: PropTypes.shape({\r\n AdvertiserCustomerID: PropTypes.number.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n };\r\n\r\n return withServerContext(withPermissions(withScope(Wrapper)));\r\n}\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { siteMapPropType } from '@bingads-webui-react/with-site-map';\r\nimport { ReactObservablePromise } from '@bingads-webui-react/react-observable-promise';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { isCopilotRegionRestricted } from '@bingads-webui-react/copilot-utils';\r\n\r\nimport { filterMapItem } from './processor-helpers';\r\n\r\nconst defaultRestriction = false;\r\n\r\nconst getFilteredSiteMap = (items, isRegionRestricted) => filterMapItem(items, ({ copilotFeature }) => !copilotFeature || !isRegionRestricted);\r\n\r\nexport function processCopilotRegionRestriction(Component) {\r\n const Wrapper = ({ siteMap, ...props }) => {\r\n const { serverContext, permissions } = props;\r\n\r\n const processor = (isRegionRestricted) => {\r\n const filteredSiteMap = getFilteredSiteMap(siteMap, isRegionRestricted);\r\n return isCopilotRegionRestricted({ feature: 'FullPageFeature', permissions, serverContext })}\r\n promiseHashFn={() => 'isCopilotRegionRestricted'}\r\n fallback={processor(defaultRestriction)}\r\n onError={() => processor(defaultRestriction)}\r\n >\r\n {isRegionRestricted => processor(isRegionRestricted)}\r\n \r\n );\r\n };\r\n\r\n Wrapper.propTypes = {\r\n siteMap: siteMapPropType.isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({ }).isRequired,\r\n };\r\n\r\n return withServerContext(withPermissions(Wrapper));\r\n}\r\n","import _ from 'underscore';\r\nimport { processor, withSiteMap as withSiteMapInternal, allSiteMap } from '@bingads-webui-react/with-site-map';\r\nimport { processCampaignType } from './processors/campaign-type-processor';\r\nimport { processCampaignId } from './processors/campaign-id-processor';\r\nimport {\r\n processSmartCampaign, processSmartCampaignSearch\r\n} from './processors/smart-campaign-processor';\r\nimport { processPmaxCampaignPageMenu } from './processors/pmax-campaign-page-menu-processor';\r\nimport { processPmaxRetailCampaignPageMenu } from './processors/pmax-campaign-store-processor';\r\nimport { processSmartShoppingCampaign } from './processors/smart-shopping-campaign-processor';\r\nimport { processHotelCampaign } from './processors/hotel-campaign-processor';\r\nimport { processMixedModeAdGroup } from './processors/mixed-mode-adgroup-processor';\r\nimport { processGlobalFilter } from './processors/global-filter-processor';\r\nimport { processImportCenterMode } from './processors/import-center-mode-processor';\r\nimport { processAssetReportAdType } from './processors/asset-report-ad-type-processor';\r\nimport { processMMCMenu } from './processors/mmc-menu-processor';\r\nimport { processCopilotRegionRestriction } from './processors/copilot-region-restriction-processor';\r\n\r\n_.extend(processor, {\r\n processPermissions: processor.processPermissionsCached,\r\n processScope: processor.processScopeCached,\r\n processPath: processor.processPathCached,\r\n processImportCenterMode,\r\n processCampaignType,\r\n processCampaignId,\r\n processGlobalFilter,\r\n processSmartCampaign,\r\n processSmartCampaignSearch,\r\n processSmartShoppingCampaign,\r\n processHotelCampaign,\r\n processMixedModeAdGroup,\r\n processPmaxCampaignPageMenu,\r\n processPmaxRetailCampaignPageMenu,\r\n processAssetReportAdType,\r\n processMMCMenu,\r\n processCopilotRegionRestriction,\r\n});\r\nexport { processor };\r\n\r\nexport const processorSet = {\r\n basic: [processor.processPermissions, processor.processAccountLinkPermission, processCampaignType, processSmartCampaignSearch],\r\n default: [\r\n processor.processPermissions,\r\n processor.processAccountLinkPermission,\r\n processor.processScope,\r\n processGlobalFilter,\r\n processor.processPath,\r\n ],\r\n all: [\r\n processImportCenterMode,\r\n processMixedModeAdGroup,\r\n processCopilotRegionRestriction,\r\n processor.processPermissions,\r\n processor.processAccountLinkPermission,\r\n processor.processScope,\r\n processGlobalFilter,\r\n processCampaignType,\r\n processCampaignId,\r\n processSmartCampaign,\r\n processSmartShoppingCampaign,\r\n processPmaxRetailCampaignPageMenu,\r\n processHotelCampaign,\r\n processAssetReportAdType,\r\n processMMCMenu,\r\n processor.processPath,\r\n processor.processCustomMapper,\r\n ],\r\n};\r\n\r\nexport const withSiteMap = (\r\n Component, processors = processorSet.default,\r\n siteMap = allSiteMap, rootId = null, propName = 'siteMap'\r\n) => withSiteMapInternal(Component, processors, siteMap, rootId, propName);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport hoistNonReactStatics from 'hoist-non-react-statics';\r\nimport { WaterfallFilterStorage } from '@bingads-webui-campaign/filter-storage';\r\nimport { withPreference } from '@bingads-webui-react/preference-context';\r\nimport { getDisplayName } from '@bingads-webui-react/hoc-utils';\r\n\r\nexport const withWaterfallFilterStorage = (WrappedComponent) => {\r\n const HoC = (props) => {\r\n const ComponentWithStorage = ({ preferenceService, ...rest }) => {\r\n const waterfallFilterStorage = new WaterfallFilterStorage({\r\n preferenceService,\r\n });\r\n\r\n return ((AccordionCard: React.FC) {\r\n const CollapseCard: React.FC = ({\r\n id, isActive, activeKeys, children, setActiveKeys, ...restProps\r\n }) => {\r\n const onOpenChange = useCallback(() => {\r\n setActiveKeys(isActive ? activeKeys.filter(activeKey => activeKey !== id) : [...activeKeys, id]);\r\n }, [activeKeys, isActive, id, setActiveKeys]);\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n };\r\n\r\n return CollapseCard;\r\n}\r\n","import { FormCard, AccordionCard, FormCardDefaultHeader } from '@bingads-webui-fluent-component/form-cards';\r\nimport { CustomExpandableActuator } from '@bingads-webui-campaign-react/actuator';\r\nimport { withContainerPropInjectingErrorHandling } from '@bingads-webui-campaign-react/error-handling';\r\n\r\nimport { withCollapseAdapter } from './with-collapse-adapter';\r\nimport { withHelpButton } from './with-help-button';\r\n\r\nexport const CollapseCard = withCollapseAdapter(AccordionCard);\r\n\r\nexport const ValidatedFormCard = withContainerPropInjectingErrorHandling(FormCard);\r\nexport const ValidatedCollapseCard = withContainerPropInjectingErrorHandling(CollapseCard, [CustomExpandableActuator]);\r\n\r\nexport const FormCardBasicHeader = withHelpButton(FormCardDefaultHeader);\r\nexport { withCollapseAdapter };\r\n\r\n","import React, { useMemo } from 'react';\r\n\r\nimport { FormCardDefaultHeaderProps } from '@bingads-webui-fluent-component/form-cards';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\n\r\n\r\ninterface HelpButtonProps {\r\n helpTopic?: string;\r\n helpLabel?: string;\r\n}\r\n\r\nexport function withHelpButton(DefaultHeader: React.FC) {\r\n const FormCardDefaultHeader: React.FC = ({\r\n helpTopic, helpLabel, contentAfter: parentContentAfter, ...restProps\r\n }) => {\r\n const contentAfter = useMemo(() => (\r\n <>\r\n {helpTopic &&