\r\n \r\n {title}\r\n
\r\n \r\n
\r\n \r\n {children}\r\n \r\n
\r\n
\r\n
\r\n \r\n {primaryButtonContent}\r\n \r\n {secondaryButtonContent &&\r\n \r\n {secondaryButtonContent}\r\n }\r\n \r\n {withPages &&\r\n
\r\n {pageIndex} \r\n {i18n.getString(_TL_('of'))}\r\n \r\n {pageCount}\r\n
\r\n }\r\n
\r\n
\r\n {i18n.getString(_TL_('Your optimization score runs from 0% to 100%, with 100% meaning that your account or campaign can function at its full potential.'))}\r\n
\r\n
\r\n {i18n.getString(_TL_('Optimization score is only shown for active search campaigns at the campaign and account level.'))}\r\n
\r\n
\r\n {\r\n _.map(_.range(stepCount), step =>\r\n this.state.step === step && (\r\n step + 1\r\n ? i18n.getString(_TL_('Next'))\r\n : i18n.getString(_TL_('Got it!'))\r\n }\r\n primaryButtonAction={\r\n stepCount > step + 1\r\n ? this.next\r\n : () => onDone()\r\n }\r\n secondaryButtonContent={\r\n step === 0\r\n ? ''\r\n : i18n.getString(_TL_('Previous'))\r\n }\r\n secondaryButtonAction={this.previous}\r\n target={targets[step]}\r\n onDismiss={onDismiss}\r\n onClose={onClose}\r\n >\r\n {contents[step]}\r\n \r\n ))\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const OptimizationScoreTeachingBubble =\r\n withFilterCategory(optimizationScoreTeachingBubble);\r\n\r\n\r\nexport const OptimizationScoreTeachingBubbleWithUserGovernance = withUserGovernance(OptimizationScoreTeachingBubble);\r\n","/* eslint-disable jsx-a11y/aria-role */\r\n/* eslint-disable no-cond-assign */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport classNames from 'classnames';\r\nimport { fromLegacyTimeZone, toIANATimeZone } from '@bingads-webui-universal/time-zone-converter';\r\nimport { Checkbox } from '@bingads-webui-react/checkbox';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport {\r\n RECOMMENDATION_CATEGORIES_IDS,\r\n recommendationConfigs,\r\n withGetAutoApplyOptInStatus,\r\n RECOMMENDATION_CATEGORIES_WORDING,\r\n RECOMMENDATION_TYPES,\r\n RECOMMENDATION_AUTO_APPLY_SETTINGS_TOOLTIPS,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { TooltipHost, DirectionalHint, TooltipDelay } from '@fluentui/react';\r\nimport { getAutpApplySettingsStyle } from './style/apply-settings-style';\r\n\r\nclass recommendationsAutoApplySettings extends React.PureComponent {\r\n static propTypes = {\r\n navigateBack: PropTypes.func.isRequired,\r\n data: PropTypes.objectOf(PropTypes.any).isRequired,\r\n optInStatus: PropTypes.objectOf(PropTypes.any).isRequired,\r\n getCategories: PropTypes.func.isRequired,\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n appConfig: PropTypes.objectOf(PropTypes.any).isRequired,\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n readOnly: PropTypes.bool,\r\n dataService: PropTypes.shape({\r\n setAutoApplyOptInStatus: PropTypes.func.isRequired,\r\n }).isRequired,\r\n reload: PropTypes.func.isRequired,\r\n propsId: PropTypes.string.isRequired,\r\n classes: PropTypes.objectOf(PropTypes.string).isRequired,\r\n viewHistory: PropTypes.func.isRequired,\r\n reloadSummaryPage: PropTypes.func.isRequired,\r\n hideAutoApplyTeachingBubble: PropTypes.func.isRequired,\r\n scope: PropTypes.shape({\r\n customerId: PropTypes.string.isRequired,\r\n accountId: PropTypes.string.isRequired,\r\n levelAt: PropTypes.string.isRequired,\r\n campaignId: PropTypes.string,\r\n adGroupId: PropTypes.string,\r\n }).isRequired,\r\n permissions: PropTypes.shape({}),\r\n };\r\n\r\n static defaultProps = {\r\n readOnly: false,\r\n permissions: {},\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n this.props.hideAutoApplyTeachingBubble();\r\n this.state = {\r\n optInStatus: this.props.optInStatus,\r\n prevPropsId: this.props.propsId,\r\n };\r\n }\r\n\r\n static getDerivedStateFromProps(nextProps, state) {\r\n if (nextProps.propsId !== state.prevPropsId) {\r\n return {\r\n optInStatus: nextProps.optInStatus,\r\n prevPropsId: nextProps.propsId,\r\n };\r\n }\r\n\r\n return null;\r\n }\r\n\r\n onSave = () => {\r\n const {\r\n data, dataService, reload, reloadSummaryPage,\r\n } = this.props;\r\n const isOptInStatusDelta = _.omit(this.state.optInStatus, (status, type) =>\r\n data[type].IsOptIn === status);\r\n dataService.setAutoApplyOptInStatus({ isOptInStatusDelta })\r\n .finally(withUiBlock($('.auto-apply-settings-container')))\r\n .finally(() => reloadSummaryPage())\r\n .finally(() => reload());\r\n }\r\n\r\n handleAutoApplyOptionChange = (type) => {\r\n const { optInStatus } = this.state;\r\n this.setState({\r\n optInStatus: { ...optInStatus, [type]: !optInStatus[type] },\r\n });\r\n }\r\n\r\n formatDateWithAccountTimeZone = (latestUpdateTime) => {\r\n const { i18n, appConfig } = this.props;\r\n const latestUpdatedDate = new Date(latestUpdateTime);\r\n const accountTimeZone = toIANATimeZone(fromLegacyTimeZone(appConfig.get('AccountTimeZone')));\r\n return i18n.formatDate(latestUpdatedDate, { timeZone: accountTimeZone });\r\n }\r\n\r\n render() {\r\n const {\r\n getCategories,\r\n navigateBack,\r\n i18n,\r\n newI18n,\r\n data,\r\n classes,\r\n viewHistory,\r\n scope,\r\n permissions,\r\n } = this.props;\r\n\r\n const categories = getCategories({}, data, { isAutoApplySettings: true });\r\n\r\n const hostStyles = {\r\n root: {\r\n display: 'inline-block',\r\n },\r\n };\r\n\r\n const calloutProps = { gapSpace: 7 };\r\n\r\n const tooltipProps = {\r\n maxWidth: '324px',\r\n styles: {\r\n root: {\r\n padding: '8px 10px',\r\n },\r\n },\r\n delay: TooltipDelay.long,\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {i18n.getString('Back_To_Recommendation')}\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {newI18n.getString(_TL_('Auto-apply recommendation settings'))}\r\n
\r\n
\r\n \r\n {newI18n.getString(_TL_('Select which type of recommendations to auto-apply to your account. When you opt in, we’ll let you know when recommendations designed to improve performance are ready for your review. After the review period, we will automatically apply them to your account.'))}\r\n \r\n \r\n |\r\n viewHistory()}\r\n >\r\n {newI18n.getString(_TL_('View recommendation apply history'))}\r\n \r\n
\r\n
\r\n {!permissions.IsRSAAndMMAOnboardAARSettingsPageEnabled ?\r\n (\r\n
\r\n
\r\n
{newI18n.getString(_TL_('Go to the '))}\r\n
\r\n {newI18n.getString(_TL_('account level options page'))}\r\n \r\n \r\n {newI18n.getString(_TL_(' to update the auto-apply setting for Responsive Search ads and Multimedia ads.'))}\r\n \r\n \r\n ) : null\r\n }\r\n
\r\n {_.map(RECOMMENDATION_CATEGORIES_IDS, (category) => {\r\n if (_.contains(categories, category)) {\r\n return (\r\n
\r\n
\r\n {newI18n.getString(_TL_(RECOMMENDATION_CATEGORIES_WORDING[category]))}\r\n
\r\n
\r\n {_.map(_.pick(data, _.matcher({ Category: category })), (entity) => {\r\n const type = entity.RecommendationType;\r\n const tooltipElement = (\r\n
\r\n \r\n {newI18n.getString(RECOMMENDATION_AUTO_APPLY_SETTINGS_TOOLTIPS[type].text)}\r\n \r\n \r\n
\r\n );\r\n return (\r\n
\r\n this.handleAutoApplyOptionChange(type)}\r\n >\r\n {`${i18n.getString(recommendationConfigs[type].summaryTitle)}${entity.IsOptIn\r\n && type !== RECOMMENDATION_TYPES.RESPONSIVE_SEARCH_ADS\r\n && type !== RECOMMENDATION_TYPES.MULTIMEDIA_ADS ?\r\n ` (${_.isString(entity.LatestUpdateTime) ? i18n.getString('Recommendation_AutoApplySettings_OptInTime', { latestUpdateTime: this.formatDateWithAccountTimeZone(entity.LatestUpdateTime) }) : 'Recommended'})` : ''}`}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n );\r\n }\r\n\r\n return null;\r\n })}\r\n
\r\n
\r\n \r\n {newI18n.getString(_TL_('Save'))}\r\n \r\n \r\n {newI18n.getString(_TL_('Cancel'))}\r\n \r\n
\r\n
\r\n
\r\n {this.props.vnextDeps.newI18n.getString(_TL_('Enable this paused campaign to start showing ads.'))}\r\n {\r\n this.props.store.state.updateCampaignStatus({ id: 'active' });\r\n notificationStore.dismiss(this.floatingBannerId);\r\n }}\r\n style={{\r\n background: '#FFFFFF',\r\n border: '1px solid #C8C6C4',\r\n boxSizing: 'border-box',\r\n borderRadius: 2,\r\n width: 105,\r\n height: 24,\r\n position: 'relative',\r\n left: 81,\r\n }}\r\n >\r\n {this.props.vnextDeps.newI18n.getString(_TL_('Click to enable'))}\r\n \r\n
\r\n );\r\n this.floatingBannerId = this.props.showAlertHandler({\r\n message: customizedMessage,\r\n level: 'Warning',\r\n dismissible: true,\r\n });\r\n }\r\n });\r\n };\r\n\r\n sitemapper = (siteMap) => {\r\n const { availableCategories, isMCC } = this.props;\r\n const recommendationSiteMap = findSiteMap(siteMap, ({ id }) => id === 'recommendations');\r\n if (recommendationSiteMap && _.size(recommendationSiteMap.children)) {\r\n recommendationSiteMap.children = _.filter(\r\n recommendationSiteMap.children,\r\n item => item.id === 'All'\r\n || (isMCC || !this.isOptimizationScoreOn ?\r\n (_.contains(this.getCategories([], this.props.data), item.id)\r\n || (this.isDismissedTabEnabled &&\r\n _.contains(this.getCategories([], this.props.dismissedData), item.id)))\r\n : _.contains(this.getCategories(availableCategories), item.id))\r\n );\r\n }\r\n return siteMap;\r\n };\r\n\r\n updateSitemap = () => {\r\n // renew sitemapper to update the categories\r\n // eslint-disable-next-line max-len\r\n this.props.vnextDeps.customMapperStore.setState({ customMapper: siteMap => this.sitemapper(siteMap) });\r\n };\r\n\r\n logOpportunityEvent = ({\r\n type = null,\r\n action,\r\n position = null,\r\n input = null,\r\n context = null,\r\n }) => {\r\n const guid = action === ADINSIGHT_LOG_ACTION_TYPE.FEEDBACK ?\r\n null :\r\n this.props.guid;\r\n\r\n this.props.currentActivity.trace({\r\n type: type || '',\r\n typeId: RECOMMENDATION_IDS[type],\r\n action,\r\n input,\r\n campaignId: this.props.scope.campaignId,\r\n channel: this.props.isMCC ? CHANNEL_TYPES.MCCRECOMMENDATION : CHANNEL_TYPES.RECOMMENDATION,\r\n position,\r\n guid,\r\n context: JSON.stringify(context),\r\n }, ADINSIGHT_LOG_API_NAME.RECOMMENDATION);\r\n };\r\n\r\n addCouponToRecommendations = (rawCouponData, rawRecommendationData) => {\r\n if (!_.isNull(rawCouponData) && rawCouponData.length) {\r\n const coupon = rawCouponData[0];\r\n const couponFeatureId = coupon.FeatureId.toString();\r\n if (_.isUndefined(FAC_RECOMMENDATION_CONFIG[couponFeatureId])) {\r\n return;\r\n }\r\n const priorities = FAC_RECOMMENDATION_CONFIG[couponFeatureId].priority;\r\n const types = _.keys(rawRecommendationData);\r\n\r\n const couponEligibleType = _.chain(types)\r\n .filter(type => _.contains(priorities, type))\r\n .sortBy(type => _.indexOf(priorities, type))\r\n .first()\r\n .value();\r\n\r\n if (couponEligibleType && _.isUndefined(rawRecommendationData[couponEligibleType].coupon)) {\r\n _.extend(rawRecommendationData[couponEligibleType], { coupon });\r\n }\r\n }\r\n };\r\n\r\n showAsyncApplyModal = (pollTask) => {\r\n this.pollTask = pollTask;\r\n this.setState({ isAsyncApplyModalOpen: true });\r\n };\r\n\r\n closeAsyncApplyModal = () => {\r\n this.pollTask.stop();\r\n this.setState({ isAsyncApplyModalOpen: false });\r\n };\r\n\r\n showApplyConfirmModal = ({\r\n onApply, countRecommendation, onReject = _.noop, type,\r\n }) => {\r\n _.defer(() => this.setState({ isApplyConfirmModalOpen: true, countRecommendation }));\r\n this.onApplyConfirm = onApply;\r\n this.onApplyReject = onReject;\r\n this.onApplyRecommendationType = type;\r\n };\r\n\r\n closeApplyConfirmModal = () => {\r\n this.setState({ isApplyConfirmModalOpen: false });\r\n };\r\n\r\n confirmApplyConfirmModal = () => {\r\n if (_.isFunction(this.onApplyConfirm)) {\r\n this.onApplyConfirm();\r\n }\r\n this.closeApplyConfirmModal();\r\n };\r\n\r\n rejectApplyConfirmModal = () => {\r\n if (_.isFunction(this.onApplyReject)) {\r\n this.onApplyReject();\r\n }\r\n this.closeApplyConfirmModal();\r\n };\r\n\r\n initLegacyDeps = () => {\r\n if (_.isUndefined(this.props.deps.adDisplayUrlService)) {\r\n this.props.deps.adDisplayUrlService = adDisplayUrlService;\r\n }\r\n if (_.isUndefined(this.props.deps.combineText)) {\r\n this.props.deps.combineText = combineText;\r\n }\r\n };\r\n\r\n renderDownloadButton = (context, isOptimizationScoreOn = false) => (\r\n \r\n );\r\n\r\n render() {\r\n let { currentCategory } = this.state;\r\n const currency = this.props.deps.pageContext.AccountCurrencyCode;\r\n const readOnly = isReadOnly && isReadOnly(this.props.deps.appConfig, this.props.isMCC);\r\n const {\r\n i18n,\r\n permissions,\r\n } = this.props.deps;\r\n const {\r\n overallOptimizationScoreBar,\r\n availableCategories,\r\n data,\r\n dismissedData,\r\n rawCouponData,\r\n } = this.props;\r\n\r\n let categories;\r\n if (this.props.isMCC || !this.isOptimizationScoreOn) {\r\n categories = this.isDismissedTabEnabled ?\r\n this.getCategories([], data).concat(this.getCategories([], dismissedData)) :\r\n this.getCategories([], data);\r\n } else {\r\n categories = this.getCategories(availableCategories);\r\n }\r\n this.categories = categories;\r\n\r\n // Resolve invalid category\r\n if (this.props.viewType === VIEW_TYPES.SUMMARY && !_.contains(categories, currentCategory)\r\n && currentCategory !== RECOMMENDATION_CATEGORIES.ALL\r\n ) {\r\n currentCategory = RECOMMENDATION_CATEGORIES.ALL;\r\n this.props.viewCategory(RECOMMENDATION_CATEGORIES.ALL)();\r\n }\r\n\r\n if (_.any(\r\n data,\r\n rec => _.has(FAC_RECOMENDATIONTYPE_FEATUREID_MAPPING, rec.type)\r\n )) {\r\n this.addCouponToRecommendations(rawCouponData, data);\r\n }\r\n\r\n const isDismissedCategory = currentCategory === RECOMMENDATION_CATEGORIES.DISMISSED;\r\n\r\n const context = {\r\n Source: null,\r\n Level: this.props.scope.levelAt,\r\n Category: this.props.channel !== 'competitionpage' ? currentCategory : null,\r\n CampaignIds: this.props.scope.campaignId ? [Number(this.props.scope.campaignId)] : [],\r\n AdGroupIds: this.props.scope.adGroupId ? [Number(this.props.scope.adGroupId)] : [],\r\n };\r\n\r\n // add Source if not from recommendation summary page\r\n if (this.props.viewType === VIEW_TYPES.DETAILS && this.props.source !== 'summarypage') {\r\n context.Source = this.props.source;\r\n }\r\n\r\n // set recommendation data for subpage menu\r\n if (this.isOptimizationScoreOn) {\r\n this.props.vnextDeps.recommendationDataStore.setState({\r\n overallOptimizationScoreBar,\r\n categoryScoreUpLifts: this.props.categoryScoreUpLifts,\r\n renderDownloadButton: _.partial(this.renderDownloadButton, context),\r\n isAutoApplyRecommendationEnabled: this.isAutoApplyRecommendationEnabled\r\n && !this.props.isMCC,\r\n });\r\n }\r\n\r\n let recommendationsDetails = null;\r\n if (this.props.viewType === VIEW_TYPES.DETAILS) {\r\n if (_.isNull(this.recommendationsDetailsLazy)) {\r\n this.recommendationsDetailsLazy = React.lazy(() => import(/* webpackMode: 'eager' */ './recommendations-details-view').then(({ RecommendationsDetails }) => ({ default: RecommendationsDetails })));\r\n }\r\n const RecommendationsDetailsLazy = this.recommendationsDetailsLazy;\r\n recommendationsDetails = ();\r\n }\r\n\r\n let recommendationsHistory = null;\r\n if (this.props.viewType === VIEW_TYPES.HISTORY) {\r\n if (_.isNull(this.recommendationsHistoryLazy)) {\r\n this.recommendationsHistoryLazy = React.lazy(() => import(/* webpackMode: 'eager' */ './recommendations-history').then(({ RecommendationsHistory }) => ({ default: RecommendationsHistory })));\r\n }\r\n const RecommendationsHistoryLazy = this.recommendationsHistoryLazy;\r\n recommendationsHistory = ();\r\n }\r\n\r\n let recommendationBulkAAR = null;\r\n if (this.props.viewType === VIEW_TYPES.AUTO_APPLY_BULK_UPLOAD) {\r\n if (_.isNull(this.recommendationsBulkAARLazy)) {\r\n this.recommendationsBulkAARLazy = React.lazy(() => import(/* webpackMode: 'eager' */ './recommendations-bulk-aar').then(({ RecommendationsBulkAAR }) => ({ default: RecommendationsBulkAAR })));\r\n }\r\n const RecommendationsBulkAARLazy = this.recommendationsBulkAARLazy;\r\n recommendationBulkAAR = ();\r\n }\r\n\r\n let filteredSummaryView = null;\r\n if (this.props.viewType === VIEW_TYPES.SUMMARY) {\r\n if (_.isNull(this.filteredSummaryViewLazy)) {\r\n this.filteredSummaryViewLazy = React.lazy(() => import(/* webpackMode: 'eager' */ '@bingads-webui-campaign-react/recommendation-summary-view').then(({ FilteredSummaryView }) => ({ default: FilteredSummaryView })));\r\n }\r\n this.initLegacyDeps();\r\n const FilteredSummaryViewLazy = this.filteredSummaryViewLazy;\r\n filteredSummaryView = ();\r\n }\r\n\r\n let confirmFormTitle;\r\n let confirmFormContent;\r\n if (this.onApplyRecommendationType === RECOMMENDATION_TYPES.SSC_2_PMAX_MIGRATION) {\r\n confirmFormTitle = this.state.countRecommendation === 1 ?\r\n this.props.vnextDeps.newI18n.getString(_TL_('Are you sure you want to upgrade smart shopping campaign to Performance Max campaigns?')) :\r\n this.props.vnextDeps.newI18n.getString(_TL_('Are you sure you want to upgrade all smart shopping campaigns to Performance Max campaigns?'));\r\n confirmFormContent = this.props.vnextDeps.newI18n.getString(_TL_('Once you confirm, the upgrade process will continue until it completes and cannot be discontinued.'));\r\n } else {\r\n confirmFormTitle = this.state.countRecommendation === 1 ?\r\n i18n.getString('Summary_Card_Apply') :\r\n i18n.getString('Summary_Card_Apply_All');\r\n confirmFormContent = this.state.countRecommendation === 1 ?\r\n i18n.getString('Recommendation_Apply_All_Confirm_Singular') :\r\n i18n.getString('Recommendation_Apply_All_Confirm', { count: this.state.countRecommendation });\r\n }\r\n\r\n return (\r\n \r\n {this.props.viewType !== VIEW_TYPES.HISTORY\r\n && this.props.viewType !== VIEW_TYPES.AUTO_APPLY_SETTINGS\r\n && this.props.viewType !== VIEW_TYPES.AUTO_APPLY_BULK_UPLOAD &&\r\n
\r\n {(this.props.viewType === VIEW_TYPES.SUMMARY &&\r\n _.difference(_.keys(this.props.data), NOT_SUPPORT_DOWNLOAD_TYPES).length !== 0) &&\r\n !this.props.isMCC && this.props.channel === CHANNEL_TYPES.COMPETITION &&\r\n - \r\n {this.renderDownloadButton(context)}\r\n
\r\n }\r\n \r\n
\r\n }\r\n {this.props.viewType === VIEW_TYPES.DETAILS &&\r\n
\r\n \r\n {recommendationsDetails}\r\n \r\n
\r\n }\r\n {this.props.viewType === VIEW_TYPES.SUMMARY &&\r\n
\r\n \r\n {filteredSummaryView}\r\n \r\n
\r\n }\r\n {this.props.viewType === VIEW_TYPES.HISTORY &&\r\n
\r\n \r\n {recommendationsHistory}\r\n \r\n
\r\n }\r\n {this.props.viewType === VIEW_TYPES.AUTO_APPLY_BULK_UPLOAD &&\r\n
\r\n \r\n {recommendationBulkAAR}\r\n \r\n
\r\n }\r\n {this.isAutoApplyRecommendationEnabled\r\n && this.props.viewType === VIEW_TYPES.AUTO_APPLY_SETTINGS &&\r\n
\r\n \r\n this.setState({ autoApplyTeachingBubbleVisible: false })}\r\n scope={this.props.scope}\r\n permissions={permissions}\r\n />\r\n
\r\n }\r\n
\r\n {\r\n this.closeAsyncApplyModal();\r\n this.props.viewHistory();\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n {\r\n this.isOptimizationScoreOn && this.state.optimizationScoreTeachingBubbleVisible && this.props.viewType === VIEW_TYPES.SUMMARY &&\r\n { this.setState({ optimizationScoreTeachingBubbleVisible: false }); }}\r\n onDismiss={() => { this.setState({ optimizationScoreTeachingBubbleVisible: false }); }}\r\n onClose={() => { this.setState({ optimizationScoreTeachingBubbleVisible: false }); }}\r\n userGovernanceConfig={getTeachingBubbleUserGovernanceConfig()}\r\n />\r\n }\r\n {this.isAutoApplyRecommendationEnabled &&\r\n this.state.autoApplyTeachingBubbleVisible && this.props.viewType === VIEW_TYPES.SUMMARY &&\r\n { this.setState({ autoApplyTeachingBubbleVisible: false }); }}\r\n onDismiss={() => { this.setState({ autoApplyTeachingBubbleVisible: false }); }}\r\n onClose={() => { this.setState({ autoApplyTeachingBubbleVisible: false }); }}\r\n primaryButtonText={this.props.vnextDeps.newI18n.getString(_TL_('Got it'))}\r\n targetElement={document.querySelector('.recommendation-auto-apply-item')}\r\n className=\"recommendation-auto-apply-teaching-bubble\"\r\n />\r\n }\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const RecommendationsBulkAAR =\r\n withDefaultStyles((recommendationsBulkAAR), getHistoryPageStyle);\r\n","/* eslint-disable jsx-a11y/aria-role */\r\nimport _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { DetailsSummary } from '@bingads-webui-campaign-react/recommendation-details-view';\r\nimport {\r\n getDetailsSummary,\r\n AUTO_APPLY_TYPES,\r\n SUPPORT_ADINSIGHT_AUTO_APPLY_TYPES,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\n\r\nexport class RecommendationsDetailsHeader extends React.PureComponent {\r\n static propTypes = {\r\n data: PropTypes.objectOf(PropTypes.any),\r\n scope: PropTypes.shape({\r\n levelAt: PropTypes.string.isRequired,\r\n advertiserCustomerId: PropTypes.number.isRequired,\r\n userId: PropTypes.number.isRequired,\r\n accountId: PropTypes.number.isRequired,\r\n }).isRequired,\r\n type: PropTypes.string.isRequired,\r\n navigateBack: PropTypes.func.isRequired,\r\n currency: PropTypes.string.isRequired,\r\n deps: PropTypes.shape({\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n appConfig: PropTypes.objectOf(PropTypes.any).isRequired,\r\n permissions: PropTypes.object.isRequired,\r\n odata: PropTypes.PropTypes.shape({\r\n get: PropTypes.func.isRequired,\r\n patch: PropTypes.func.isRequired,\r\n }).isRequired,\r\n preferencesService: PropTypes.objectOf(PropTypes.any),\r\n }).isRequired,\r\n visible: PropTypes.bool.isRequired,\r\n isMCC: PropTypes.bool,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n isOptimizationScoreOn: PropTypes.bool,\r\n context: PropTypes.shape({\r\n Source: PropTypes.string,\r\n Level: PropTypes.string,\r\n Category: PropTypes.string,\r\n }),\r\n newI18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n isAutoApplyRecommendationEnabled: PropTypes.bool,\r\n viewSettings: PropTypes.func,\r\n isDismissedCategory: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n data: null,\r\n isMCC: false,\r\n overallOptimizationScoreBar: null,\r\n isOptimizationScoreOn: false,\r\n context: null,\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n isAutoApplyRecommendationEnabled: false,\r\n viewSettings: _.noop,\r\n isDismissedCategory: false,\r\n };\r\n\r\n render() {\r\n if (!this.props.visible) {\r\n return (null);\r\n }\r\n // get summary model from data\r\n const normalizedData =\r\n _.isUndefined(this.props.data[this.props.type]) ?\r\n {} : this.props.data[this.props.type];\r\n let showAutoApplyBanner;\r\n if (this.props.isAutoApplyRecommendationEnabled) {\r\n showAutoApplyBanner = _.contains(\r\n _.keys(AUTO_APPLY_TYPES).concat(SUPPORT_ADINSIGHT_AUTO_APPLY_TYPES),\r\n this.props.type\r\n )\r\n && !this.props.isMCC\r\n && normalizedData.isAutoApplyOptIn\r\n && new URLSearchParams(window.location.search).get('IsRSAAutoApplyEnabled') !== 'false';\r\n } else {\r\n showAutoApplyBanner = _.contains(_.keys(AUTO_APPLY_TYPES), this.props.type)\r\n && !this.props.isMCC\r\n && this.props.deps.permissions.IsRSAAutoApplyEnabled\r\n && normalizedData.optInStatus\r\n && new URLSearchParams(window.location.search).get('IsRSAAutoApplyEnabled') !== 'false';\r\n }\r\n\r\n const { summary } = getDetailsSummary(_.extend(\r\n {},\r\n normalizedData,\r\n {\r\n i18n: this.props.deps.i18n,\r\n newI18n: this.props.newI18n,\r\n currency: this.props.currency,\r\n scope: this.props.scope.levelAt,\r\n appConfig: this.props.deps.appConfig,\r\n permissions: this.props.deps.permissions,\r\n isMCC: this.props.isMCC,\r\n showAutoApplyBanner,\r\n isAutoApplyRecommendationEnabled: this.props.isAutoApplyRecommendationEnabled,\r\n }\r\n ));\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","/* eslint-disable jsx-a11y/aria-role */\r\n/* eslint-disable no-cond-assign */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { CHANNEL_TYPES } from '@bingads-webui-campaign/recommendation-core';\r\nimport * as adDisplayUrlService from '@bingads-webui-campaign-legacy/crud-ad/service/displayUrl';\r\nimport { combineText } from '@bingads-webui-campaign-legacy/crud-ad/viewmodel/adsPreview/expandedTextAd';\r\nimport * as schemaCampaignVnext from '@bingads-webui-component-legacy/schema-campaign-vnext/index';\r\n\r\nexport class RecommendationsDetails extends React.PureComponent {\r\n static propTypes = {\r\n scope: PropTypes.shape({\r\n accountId: PropTypes.number.isRequired,\r\n adGroupId: PropTypes.number,\r\n campaignId: PropTypes.number,\r\n customerId: PropTypes.number.isRequired,\r\n levelAt: PropTypes.string.isRequired,\r\n }).isRequired,\r\n campaignType: PropTypes.number,\r\n source: PropTypes.string,\r\n setData: PropTypes.func.isRequired,\r\n prevCategoryType: PropTypes.string,\r\n navigateBack: PropTypes.func.isRequired,\r\n type: PropTypes.string.isRequired,\r\n currency: PropTypes.string.isRequired,\r\n deps: PropTypes.shape({\r\n i18n: PropTypes.PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n s$i18n: PropTypes.PropTypes.shape({\r\n value: PropTypes.func,\r\n }),\r\n appConfig: PropTypes.objectOf(PropTypes.any).isRequired,\r\n permissions: PropTypes.object.isRequired,\r\n odata: PropTypes.PropTypes.shape({\r\n get: PropTypes.func.isRequired,\r\n patch: PropTypes.func.isRequired,\r\n }).isRequired,\r\n adDisplayUrlService: PropTypes.object,\r\n schemaCampaignVnext: PropTypes.object,\r\n combineText: PropTypes.func,\r\n }).isRequired,\r\n dataService: PropTypes.shape({\r\n getSummary: PropTypes.func.isRequired,\r\n track: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showAlertHandler: PropTypes.func.isRequired,\r\n reload: PropTypes.func.isRequired,\r\n guid: PropTypes.string.isRequired, // for adinsight view event log in aria\r\n downloadService: PropTypes.objectOf(PropTypes.any),\r\n viewDetails: PropTypes.func.isRequired,\r\n viewBAADetails: PropTypes.func,\r\n context: PropTypes.shape({\r\n Source: PropTypes.string,\r\n Level: PropTypes.string,\r\n Category: PropTypes.string,\r\n }),\r\n data: PropTypes.objectOf(PropTypes.any),\r\n // eslint-disable-next-line react/forbid-prop-types, react/require-default-props\r\n perfMarker: PropTypes.shape({\r\n willInit: PropTypes.func.isRequired,\r\n willFetchData: PropTypes.func.isRequired,\r\n willRender: PropTypes.func.isRequired,\r\n done: PropTypes.func.isRequired,\r\n createChild: PropTypes.func.isRequired,\r\n }),\r\n isMCC: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n showAsyncApplyModal: PropTypes.func,\r\n closeAsyncApplyModal: PropTypes.func,\r\n showApplyConfirmModal: PropTypes.func,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n isOptimizationScoreOn: PropTypes.bool,\r\n isAutoApplyRecommendationEnabled: PropTypes.bool,\r\n serverContext: PropTypes.shape({}),\r\n isDismissedCategory: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n campaignType: null,\r\n source: null,\r\n prevCategoryType: null,\r\n downloadService: null,\r\n context: null,\r\n data: null,\r\n perfMarker: {\r\n willInit: _.noop,\r\n willFetchData: _.noop,\r\n willRender: _.noop,\r\n done: _.noop,\r\n createChild: () => this,\r\n },\r\n readOnly: false,\r\n viewBAADetails: _.noop,\r\n isMCC: false,\r\n showAsyncApplyModal: _.noop,\r\n closeAsyncApplyModal: _.noop,\r\n showApplyConfirmModal: _.noop,\r\n overallOptimizationScoreBar: null,\r\n isOptimizationScoreOn: false,\r\n isAutoApplyRecommendationEnabled: false,\r\n serverContext: {},\r\n isDismissedCategory: false,\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n this.perfMarker = props.perfMarker.createChild('RecommendationDetailsGridOverall');\r\n if (_.isFunction(this.perfMarker.willInit)) {\r\n this.perfMarker.willInit();\r\n }\r\n this.hasSetData = false;\r\n this.recommendationsDetailsHeaderLazy = null;\r\n this.recommendationsGridContainerLazy = null;\r\n this.initLegacyDeps();\r\n }\r\n\r\n state = {\r\n showDetailsHeader: true,\r\n loaded: false,\r\n }\r\n\r\n componentDidMount = () => {\r\n if (_.isFunction(this.perfMarker.willFetchData)) {\r\n this.perfMarker.willFetchData();\r\n }\r\n };\r\n\r\n setDataFromDetails = () => {\r\n this.hasSetData = true;\r\n }\r\n\r\n initLegacyDeps = () => {\r\n if (_.isUndefined(this.props.deps.adDisplayUrlService)) {\r\n this.props.deps.adDisplayUrlService = adDisplayUrlService;\r\n }\r\n if (_.isUndefined(this.props.deps.schemaCampaignVnext)) {\r\n this.props.deps.schemaCampaignVnext = schemaCampaignVnext;\r\n }\r\n if (_.isUndefined(this.props.deps.combineText)) {\r\n this.props.deps.combineText = combineText;\r\n }\r\n }\r\n\r\n receiveMessage = (event, data = {}) => {\r\n const showInfoEvent = /showInfo:(.*)/g;\r\n const showWarningEvent = /showWarning:(.*)/g;\r\n let match;\r\n\r\n if (event === 'loaded') {\r\n if (!this.state.loaded) {\r\n if (_.isFunction(this.perfMarker.done)) {\r\n this.perfMarker.done();\r\n }\r\n }\r\n this.setState({ loaded: true });\r\n } else if (event === 'individualView') {\r\n this.setState({ showDetailsHeader: false });\r\n } else if (event === 'allView') {\r\n this.setState({ showDetailsHeader: true });\r\n } else if (event === 'back') {\r\n this.props.navigateBack();\r\n } else if (event === 'refreshSummary') {\r\n this.props.reload({ isFromApplyOrDismiss: data.isFromApplyOrDismiss });\r\n } else if ((match = showInfoEvent.exec(event)) !== null) {\r\n if (match.length === 2) {\r\n this.props.showAlertHandler({\r\n message: match[1],\r\n level: 'Info',\r\n dismissible: true,\r\n });\r\n }\r\n this.props.reload();\r\n } else if ((match = showWarningEvent.exec(event)) !== null) {\r\n if (match.length === 2) {\r\n this.props.showAlertHandler({\r\n message: match[1],\r\n level: 'Warning',\r\n dismissible: true,\r\n });\r\n }\r\n this.props.reload();\r\n } else if (event === 'updateScope') {\r\n if (this.props.isMCC) {\r\n this.props.viewBAADetails(this.props.type, data, this.props.prevCategoryType)();\r\n } else {\r\n this.props.viewDetails(this.props.type, data)();\r\n }\r\n } else if (event === 'showAsyncApplyModal') {\r\n this.props.showAsyncApplyModal(data);\r\n } else if (event === 'closeAsyncApplyModal') {\r\n this.props.closeAsyncApplyModal();\r\n } else if (event === 'showApplyConfirmModal') {\r\n this.props.showApplyConfirmModal(data);\r\n }\r\n }\r\n\r\n render() {\r\n if (_.isFunction(this.perfMarker.willRender)) {\r\n this.perfMarker.willRender();\r\n }\r\n\r\n const hasData = (this.props.data && this.props.data[this.props.type]) || {};\r\n if (this.hasSetData && _.isEmpty(hasData)) {\r\n this.props.navigateBack();\r\n return null;\r\n }\r\n\r\n if (_.isNull(this.recommendationsDetailsHeaderLazy)) {\r\n this.recommendationsDetailsHeaderLazy = React.lazy(() => import(/* webpackMode: 'eager' */ './recommendations-details-header').then(({ RecommendationsDetailsHeader }) => ({ default: RecommendationsDetailsHeader })));\r\n }\r\n const ReRecommendationsDetailsHeaderLazy = this.recommendationsDetailsHeaderLazy;\r\n\r\n const topOfGridContent = !_.isEmpty(hasData) ? (\r\n \r\n ) : null;\r\n\r\n let recommendationsGridContainer = null;\r\n if (_.isNull(this.recommendationsGridContainerLazy)) {\r\n this.recommendationsGridContainerLazy = React.lazy(() => import(/* webpackMode: 'eager' */ '@bingads-webui-campaign-react/recommendation-grid-container').then(({ RecommendationsGridContainer }) => ({ default: RecommendationsGridContainer })));\r\n }\r\n const RecommendationsGridContainerLazy = this.recommendationsGridContainerLazy;\r\n recommendationsGridContainer = ();\r\n\r\n return (\r\n \r\n \r\n {recommendationsGridContainer}\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, { PureComponent } from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport class RecommendationHistoryHeader extends PureComponent {\r\n static propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n navigateBack: PropTypes.func.isRequired,\r\n }\r\n\r\n render() {\r\n const {\r\n i18n, navigateBack,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {i18n.getString('Back_To_Recommendation')}\r\n \r\n \r\n
\r\n
\r\n {i18n.getString('Apply_History')}\r\n
\r\n
\r\n {i18n.getString('Apply_History_Explanation')}\r\n
\r\n
\r\n
\r\n {this.props.isAutoApplyRecommendationEnabled &&\r\n
\r\n this.filterBySelectedTab(HISTORY_PAGE_TAB_TYPES.ALL)}\r\n >\r\n {this.props.newI18n.getString(_TL_(HISTORY_PAGE_TAB_TYPES.ALL))}\r\n \r\n this.filterBySelectedTab(HISTORY_PAGE_TAB_TYPES.MANUAL)}\r\n >\r\n {this.props.newI18n.getString(_TL_('Manually applied'))}\r\n \r\n this.filterBySelectedTab(HISTORY_PAGE_TAB_TYPES.AUTO)}\r\n >\r\n {this.props.newI18n.getString(_TL_('Auto applied'))}\r\n \r\n
\r\n }\r\n
\r\n