\r\n \r\n {props.reqStatus ?\r\n
\r\n );\r\n}\r\n\r\nKPIEstimateReact.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n percentToFixedFormatter: PropTypes.func.isRequired,\r\n decimalFormatter: PropTypes.func.isRequired,\r\n }).isRequired,\r\n reqStatus: PropTypes.bool.isRequired,\r\n pricingModel: PropTypes.string.isRequired,\r\n isVideo: PropTypes.bool,\r\n};\r\n\r\nKPIEstimateReact.defaultProps = {\r\n isVideo: false,\r\n};\r\n","/* eslint-disable jsx-a11y/label-has-for */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { HelpLink } from '@bingads-webui-react/help-link';\r\nimport { Dropdown } from '@bingads-webui-react/fabric-control';\r\n\r\nexport const BidStrategyReact = (props) => {\r\n const {\r\n i18n,\r\n onStrategyChange,\r\n keys,\r\n defaultSelectedKey,\r\n isDisabled,\r\n } = props;\r\n const options = keys.map(key => ({ key, text: i18n.getString(`BidStrategySetting_Option_${key}`), title: i18n.getString(`BidStrategySetting_Option_${key}`) }));\r\n return (\r\n \r\n {estimateDataConfig.map(item => (\r\n
:\r\n \r\n
))}\r\n \r\n \r\n
\r\n \r\n {getRange(\r\n props[item.ApiDataName] || {},\r\n props.i18n,\r\n item.format\r\n )}\r\n
\r\n \r\n {props.i18n.getString('Audience_Campaign_KPIEstimation_RequestError')}\r\n
\r\n }\r\n \r\n onStrategyChange(item)}\r\n />\r\n
);\r\n};\r\n\r\nBidStrategyReact.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onStrategyChange: PropTypes.func.isRequired,\r\n isDisabled: PropTypes.bool,\r\n keys: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n defaultSelectedKey: PropTypes.string.isRequired,\r\n};\r\n\r\nBidStrategyReact.defaultProps = {\r\n isDisabled: false,\r\n};\r\n","import _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport Promise from 'bluebird';\r\nimport ko from 'knockout';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\nimport {\r\n CompanyNameCriterionSetting,\r\n JobFunctionCriterionSetting,\r\n IndustryCriterionSetting,\r\n AgeCriterionSetting,\r\n DeviceCriterionSetting,\r\n GenderCriterionSetting,\r\n AudienceCriterionSetting,\r\n LocationCriterionSetting\r\n} from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { BackboneSchema as backboneSchema } from '@bingads-webui/backbone-schema';\r\nimport { InputControl } from '@bingads-webui/input-control';\r\nimport { DependencyResolver } from '@bingads-webui-campaign/dependency-resolver';\r\nimport {\r\n AudienceCampaignErrorsView,\r\n AudienceStepBase,\r\n criterionHelper,\r\n getBidSchema,\r\n getBulkErrorsLogMessage,\r\n BidStrategy,\r\n CampaignSubTypes,\r\n getCampaignType,\r\n PricingModelToRangeKey,\r\n getFeedInfo,\r\n DefaultBidCPVWarningThreshold,\r\n BiddingStrategyValueToRecommendBidKey,\r\n} from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { shouldSupportCashbackSettings } from '@bingads-webui-campaign/personalized-offer-shared';\r\nimport { EstimateRequestFactory } from '@bingads-webui-campaign/reach-estimate-control';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { GoalSelectorView } from '@bingads-webui-campaign-react/goal-selector';\r\nimport BiddingStrategyView from '@bingads-webui-campaign-legacy/bidding-strategy/view/setting';\r\nimport { FrequencyCapping } from '@bingads-webui-campaign/frequency-capping';\r\nimport template from './template.pug';\r\nimport { KPIEstimateReact } from './kpi-estimate-react';\r\nimport { BidStrategyReact } from './bid-strategy-react';\r\n\r\n/**\r\n * CrudAudienceBudgetBid class that extends {AudienceStepBase} class\r\n * The class defines the section of the setting budget and bid\r\n *\r\n * @class CrudAudienceBudgetBid\r\n * @extends {AudienceStepBase}\r\n */\r\nexport class CrudAudienceBudgetBid extends AudienceStepBase {\r\n initialize(options = {}) {\r\n this.renderMarker;\r\n this.perfMarker = options.perfMarker;\r\n this.perfMarker.willInit();\r\n this.wizardElement = options.wizardElement;\r\n this.options = options;\r\n this.deps = options.deps || {};\r\n this.audienceCampaignType = options.audienceCampaignType || '';\r\n this.viewContext = options.viewContext;\r\n this.currentCampaign = this.viewContext.currentCampaign;\r\n this.currentLevelTargetInfo = this.options.currentLevelTargetInfo;\r\n this.isAdImpressions = this.options.isAdImpressions;\r\n this.estimateRequestFactory = new EstimateRequestFactory({\r\n currentLevelTargetInfo: this.currentLevelTargetInfo,\r\n });\r\n this.i18n = DependencyResolver.get('component/i18n/loader!campaignui/feature/audience-campaign');\r\n this.i18nErrors = DependencyResolver.get('component/api-errors-campaign/index');\r\n this.odata = DependencyResolver.get('component/http/channel/odata');\r\n this.targetBidAdjustment = {};\r\n this.defaultBidUpdatedByUser = false;\r\n this.IsSuggestedBidShowedOnUI = false;\r\n this.showDefaultBidWarning = false;\r\n this.isDefaultBidCPVWarningRendered = false;\r\n this.logScenario = options.logScenario;\r\n this.activityLogger = this.logScenario.createBudgetBids.create();\r\n\r\n const config = DependencyResolver.get('component/config/index');\r\n this.permissions = config.get('Permissions');\r\n this.config = config;\r\n\r\n const {\r\n IsManualCpmEnabled,\r\n IsManualCpcForVideoAdsEnabled,\r\n IsAudienceCampaignSwapAdsBudgetAndBidsEnabled,\r\n IsKPIEstimateForAudienceFeedBasedEnabled,\r\n IsEnabledDeprecateManualCpcForAudienceCampaign,\r\n IsHideCpmForFeedbasedCampaginEnabled,\r\n dynamic: {\r\n AgeGenderDisclaimer,\r\n } = {},\r\n } = this.permissions;\r\n\r\n const bidStrategyType = this.currentCampaign && this.currentCampaign.BiddingScheme && this.currentCampaign.BiddingScheme.Type;\r\n this.isCpmEnabled = IsManualCpmEnabled;\r\n this.isManualCpcForVideoAdsEnabled = IsManualCpcForVideoAdsEnabled;\r\n this.isSwapStepsEnabled = IsAudienceCampaignSwapAdsBudgetAndBidsEnabled &&\r\n this.audienceCampaignType !== 'shopping';\r\n this.isHideCpmForFeedbasedCampaginEnabled = IsHideCpmForFeedbasedCampaginEnabled;\r\n this.IsAIMBidSuggestionEnabled = this.options.audienceCampaignType !== 'shopping' || IsKPIEstimateForAudienceFeedBasedEnabled;\r\n this.isEnabledDeprecateManualCpcForAudienceCampaign = IsEnabledDeprecateManualCpcForAudienceCampaign;\r\n this.isShowDisclaimerBannerEnabled = AgeGenderDisclaimer;\r\n this.isFCapEnabled = bidStrategyType === 'ManualCpm';\r\n\r\n this.CampaignGoalSelectionView = GoalSelectorView;\r\n\r\n this.isVideo = options.isVideo;\r\n this.isFeedBased = options.audienceCampaignType === 'shopping';\r\n // eslint-disable-next-line no-nested-ternary\r\n this.pricingModel = this.isVideo ? 'CPV' : (this.isCpmEnabled || this.isAdImpressions ? 'CPM' : 'CPC');\r\n this.pricingModels = ['CPC', 'CPV', 'CPM'];\r\n this.pricingModelToBidTypeString = {\r\n CPC: 'ManualCpc',\r\n CPV: 'ManualCpv',\r\n CPM: 'ManualCpm',\r\n EnhancedCPC: 'EnhancedCpc',\r\n MaxConversions: 'MaxConversions',\r\n };\r\n this.pricingModelToBidTypeEnum = {\r\n CPC: BidStrategy.ManualCpc,\r\n EnhancedCPC: BidStrategy.EnhancedCpc,\r\n CPV: BidStrategy.ManualCpv,\r\n CPM: BidStrategy.ManualCpm,\r\n };\r\n this.pricingModelAdgroupBidAttributeMapping = {\r\n CPC: 'SearchBid',\r\n CPV: 'CpvBid',\r\n CPM: 'CpmBid',\r\n EnhancedCPC: 'SearchBid',\r\n MaxConversions: 'SearchBid',\r\n };\r\n this.suggestedBidMapping = {};\r\n\r\n this.initDefaultBidInput();\r\n this.initAdScheduleView();\r\n\r\n this.errorsView = new AudienceCampaignErrorsView();\r\n\r\n this.frequencyCapping = [{}];\r\n\r\n if (this.currentAdGroup && this.currentAdGroup.FrequencyCapSettings) {\r\n this.frequencyCapping = this.currentAdGroup.FrequencyCapSettings;\r\n }\r\n\r\n this.initialFrequencyCapping = _.clone(this.frequencyCapping);\r\n\r\n this.viewmodel = {\r\n isAdScheduleExpanded: ko.observable(false),\r\n isBidAdjustmentsExpanded: ko.observable(false),\r\n };\r\n }\r\n\r\n /**\r\n * Get the title of the step section.\r\n * This is automatically called from the wizard.\r\n *\r\n * @readonly\r\n * @returns {Object} returns object has a property text that is used for the title of the section.\r\n */\r\n get title() {\r\n let title = this.i18n.getString('Audience_Campaign_Settings_BudgetBidsTitle');\r\n\r\n if (this.isSwapStepsEnabled) {\r\n title = this.i18n.getString('Audience_Campaign_Settings_BudgetBidsTitle_Step3');\r\n }\r\n\r\n if (this.options.audienceCampaignType === 'shopping') {\r\n title = this.i18n.getString('Audience_ShoppingCampaign_BudgetBidsTitle_Step3');\r\n }\r\n\r\n return {\r\n text: title,\r\n };\r\n }\r\n\r\n /**\r\n * Get the page title of the step section.\r\n * This is automatically called from the wizard.\r\n *\r\n * @readonly\r\n * @returns {Object} returns object has a property text that is used for the title of the section.\r\n */\r\n get pageTitle() {\r\n let text = this.i18n.getString('BudgetBidsStep_PageTitle');\r\n\r\n if (this.options.audienceCampaignType === 'shopping') {\r\n text = this.i18n.getString('Audience_ShoppingCampaign_BudgetBidsTitle_Step3_PageTitle');\r\n }\r\n\r\n return {\r\n text,\r\n };\r\n }\r\n\r\n /**\r\n * Define events and event handlers for them.\r\n *\r\n * @readonly\r\n * @returns {Object} returns object defining events\r\n */\r\n get events() {\r\n return {\r\n 'click .adschedule-section': 'toggleAdSchedule',\r\n 'click .bid-adjustments-section': 'toggleBidAdjustments',\r\n };\r\n }\r\n\r\n toggleAdSchedule() {\r\n this.$('#adScheduleTargets').toggle();\r\n this.$('.adschedule-section .bedded-icon-marker').toggleClass('expanderImage expandedImage');\r\n this.viewmodel.isAdScheduleExpanded(!this.viewmodel.isAdScheduleExpanded());\r\n }\r\n\r\n toggleBidAdjustments() {\r\n this.$('#bidAdjustmentTargets').toggle();\r\n this.$('.bid-adjustments-section .bedded-icon-marker').toggleClass('expanderImage expandedImage');\r\n this.viewmodel.isBidAdjustmentsExpanded(!this.viewmodel.isBidAdjustmentsExpanded());\r\n }\r\n\r\n /**\r\n * Get the actions of the step section.\r\n * This is automatically called from the wizard.\r\n *\r\n * @readonly\r\n * @returns {Object} returns array that has information about the actions.\r\n */\r\n\r\n get actions() {\r\n const actions = [];\r\n\r\n if (this.isSwapStepsEnabled) {\r\n actions.push({\r\n name: 'next',\r\n displayText: this.i18n.getString('Audience_Campaign_Crud_Campaign_Save_Next'),\r\n });\r\n\r\n actions.push({\r\n name: 'back',\r\n displayText: this.i18n.getString('Audience_Campaign_Crud_Campaign_Back_Label'),\r\n });\r\n\r\n actions.push({\r\n name: 'done',\r\n htmlAttributes: {\r\n class: 'btn-primary',\r\n },\r\n enabled: true,\r\n method: 'saveAndExit',\r\n displayText: this.i18n.getString('Audience_Campaign_Crud_Campaign_Save_Exit'),\r\n });\r\n } else {\r\n actions.push({\r\n name: 'save',\r\n htmlAttributes: {\r\n class: 'btn-primary',\r\n },\r\n displayText: this.i18n.getString('Save'),\r\n });\r\n\r\n actions.push({\r\n name: 'back',\r\n displayText: this.i18n.getString('Audience_Campaign_Crud_Campaign_Back_Label'),\r\n });\r\n }\r\n\r\n return actions;\r\n }\r\n\r\n /**\r\n * Get the data that is used for the parameter for saving.\r\n * @param {bool} skipAdScheduling - skip to save the adscheduling data when click back button.\r\n *\r\n * @returns {Object} - object representing the data for the campaign to be saved.\r\n */\r\n getData(skipAdScheduling) {\r\n this.campaignId = this.viewContext.currentCampaign.Id;\r\n this.campaignName = this.viewContext.currentCampaign.Name;\r\n this.adGroupId = this.viewContext.currentAdGroup.Id;\r\n\r\n const adGroup = {\r\n Campaign: { Id: this.campaignId },\r\n Id: this.adGroupId,\r\n Medium: 'Search',\r\n // eslint-disable-next-line max-len\r\n [this.pricingModelAdgroupBidAttributeMapping[this.pricingModel]]: this.defaultBidModel.toJSON().Amount,\r\n PricingModel: this.pricingModel,\r\n Status: 'Active',\r\n };\r\n\r\n const currentSnapshot = this.currentLevelTargetInfo.getSnapshot(this.supportCashbackSettings);\r\n\r\n let targets =\r\n criterionHelper.compareAndGetCriterionsDelta(this.originalSnapshot, currentSnapshot);\r\n\r\n // Audience Targeting goes to AdGroupAudienceCriterions not AdGroupCriterions\r\n const audienceTargets = _.filter(targets, target => target.Criterion.Type === 'Audience');\r\n\r\n targets = _.reject(targets, target => target.Criterion.Type === 'Audience');\r\n\r\n adGroup.AdGroupCriterions = this.populateCriterionWithAdGroupIds(targets);\r\n adGroup.AdGroupAudienceCriterions = this.populateCriterionWithAdGroupIds(audienceTargets);\r\n\r\n const params = {};\r\n\r\n params.Id = this.campaignId;\r\n params.Name = this.campaignName;\r\n params.AdGroups = [adGroup];\r\n params.Budget = this.budgetPanelView.getValues();\r\n\r\n if (this.isAudienceCampaignAutoBiddingV2Enabled) {\r\n params.BiddingScheme = this.biddingStrategyView.getValues();\r\n } else {\r\n params.BiddingScheme = {\r\n Type: this.pricingModelToBidTypeString[this.pricingModel],\r\n };\r\n }\r\n\r\n const dateSettings = this.adScheduleView.getDateSettings();\r\n _.extend(adGroup, dateSettings);\r\n\r\n if (JSON.stringify(this.initialFrequencyCapping) !== JSON.stringify(this.frequencyCapping)) {\r\n _.extend(adGroup, { FrequencyCapSettings: [{}] });\r\n\r\n if (this.frequencyCapping) {\r\n adGroup.FrequencyCapSettings = this.frequencyCapping;\r\n }\r\n }\r\n\r\n if (!skipAdScheduling) {\r\n const scheduling = this.getScheduleInfo();\r\n\r\n // Add Campaign Criterions\r\n this.populateCriterionCampaignIds(scheduling);\r\n params.CampaignCriterions = scheduling;\r\n }\r\n\r\n if (this.goalSelectionView) {\r\n params.CampaignConversionGoalAssociations =\r\n this.goalSelectionView.convertToMTFormat(this.campaignId);\r\n }\r\n\r\n return params;\r\n }\r\n\r\n isDefaultBidUsed() {\r\n return this.pricingModel !== 'MaxConversions';\r\n }\r\n\r\n /**\r\n * Validate inputs\r\n *\r\n * @private\r\n * @returns {bool} are inputs valid\r\n */\r\n validate() {\r\n this.defaultBidInput.setState({ showError: true });\r\n\r\n return this.budgetPanelView.validate() &&\r\n (this.isDefaultBidUsed() ? this.defaultBidInput.getState().isValid : true) &&\r\n this.adScheduleView.validate() &&\r\n _.every(this.targetBidAdjustment, targetBidAdjustment =>\r\n targetBidAdjustment.validate());\r\n }\r\n\r\n /**\r\n * Update the Campaign with the given setting.\r\n * @param {bool} skipAdScheduling - skip to save the adscheduling data when click back button.\r\n * @returns {Promise} - returns promise of returning boolean value indicating\r\n * if the update process is succesful or not.\r\n */\r\n updateCampaign(skipAdScheduling) {\r\n const jsdata = DependencyResolver.get('component/js-data-campaign/index');\r\n const params = this.getData(skipAdScheduling);\r\n\r\n this.errorsView.removeErrors();\r\n\r\n\r\n if (this.adScheduleView) {\r\n params.AdScheduleUseSearcherTimeZone =\r\n _.result(this.adScheduleView, 'getAdScheduleUseSearcherTimeZone');\r\n }\r\n\r\n return jsdata.Campaign.update(this.campaignId, params, { adapter: 'bulk' }).then((data) => {\r\n if (_.isFinite(data.Id)) {\r\n if (this.IsAIMBidSuggestionEnabled) {\r\n // log for ad insight team to analyze suggestion bid usage.\r\n const logdata = {\r\n CampaignId: params.Id,\r\n AdGroupId: params.AdGroups[0].Id,\r\n SuggestedBid: this.viewContext.SuggestedBid,\r\n SearchBid: params.AdGroups[0].SearchBid,\r\n IsSuggestedBidShowedOnUI: this.IsSuggestedBidShowedOnUI,\r\n AccountCurrencyCode: this.viewContext.accountCurrencyCode,\r\n };\r\n this.activityLogger.trace(logdata);\r\n }\r\n\r\n const originalCurrentCampaign = this.viewContext.currentCampaign;\r\n this.viewContext.currentCampaign = {\r\n CampaignType: originalCurrentCampaign.CampaignType,\r\n CampaignSubType: originalCurrentCampaign.CampaignSubType,\r\n CampaignSettings: originalCurrentCampaign.CampaignSettings,\r\n ...data,\r\n };\r\n\r\n if (this.permissions.IsPersonalizedOffersEnabled) {\r\n // the cashback settings in return data is missing\r\n // we need to add this back\r\n const cashbackSettings = _.chain(originalCurrentCampaign)\r\n .result('CampaignCashback')\r\n .value();\r\n this.viewContext.currentCampaign.CampaignCashback = cashbackSettings;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n return false;\r\n })\r\n .catch((response) => {\r\n if (response && response.entity) {\r\n const hasErrors = response && !_.isUndefined(response.errors);\r\n\r\n if (hasErrors) {\r\n // TODO: handle error types\r\n this.errorsView.setErrors(this.i18nErrors.getBulkApiErrors(response.errors));\r\n\r\n this.activityLogger.trace(getBulkErrorsLogMessage(response.errors));\r\n _.each(response.errors, (error) => {\r\n this.activityLogger.signal(error.Error, 'audience budget bid api error');\r\n });\r\n } else {\r\n // Unexpected case. Log Error.\r\n this.activityLogger.error(getBulkErrorsLogMessage(response.errors));\r\n }\r\n } else {\r\n // Ajax Error\r\n this.errorsView.setErrors(this.i18nErrors.getODataErrors(response.errors));\r\n _.each(response.errors, (error) => {\r\n this.activityLogger.signal(error.Error, 'audience budget bid api error');\r\n });\r\n }\r\n\r\n return false;\r\n })\r\n .finally(withUiBlock(this.wizardElement, this.i18n.getString('Loading')));\r\n }\r\n\r\n getEstimatePromise(data) {\r\n return this.odata.post('Customers()/Accounts()/Default.AudienceEstimationV2', {\r\n host: 'adinsight.odata.url',\r\n path: 'AdInsight/V2/',\r\n data: { request: data },\r\n customHeader: {\r\n name: 'x-ms-scenarioname',\r\n value: this.logScenario.value,\r\n },\r\n });\r\n }\r\n\r\n getCPCRecommendedBidPromise(targetsData) {\r\n if (_.get(this.viewContext, 'currentCampaign.CampaignType') === 'Audience'\r\n && _.get(this.viewContext, 'currentCampaign.CampaignSubType') === 'AudienceStatic') {\r\n const config = DependencyResolver.get('component/config/index');\r\n const recommendedValueFromContext = config.get(BiddingStrategyValueToRecommendBidKey.ManualCpc);\r\n const recommendedValue = _.isUndefined(recommendedValueFromContext) || _.isNull(recommendedValueFromContext) ? 3.3 : recommendedValueFromContext;\r\n return { SuggestedBid: recommendedValue };\r\n }\r\n return this.getEstimatePromise(targetsData);\r\n }\r\n\r\n updateKPIEstimateAsync(e) {\r\n // Empty data passed in updatePanel function to initialize kpi estimate table\r\n const estimateDataMock = {\r\n '@odata.context': 'http://int.adinsight-mt.trafficmanager.net:823/AdInsightMT/V2/oData/$metadata#Microsoft.Advertiser.AdInsight.MT.Interfaces.AIM.AudienceInsight.GetAudienceKPIEstimationV2Response',\r\n ClicksLostToBid: null,\r\n ClicksLostToBudget: null,\r\n Currency: null,\r\n ErrorCode: 'Success',\r\n ErrorMessage: null,\r\n EstAudienceSize: null,\r\n EstCPC: null,\r\n EstCTR: null,\r\n EstClick: null,\r\n EstCostPerEvent: null,\r\n EstImpression: null,\r\n EstSpend: null,\r\n EstView: null,\r\n EventsLostToBid: null,\r\n EventsLostToBudget: null,\r\n IsMinSuggestedBudget: false,\r\n RequestFulfilledByHost: 'CO01EAP00004131',\r\n SuggestedBid: null,\r\n SuggestedBudget: null,\r\n };\r\n this.showDefaultBidWarning = false;\r\n // if default bid is changed, set this.defaultBidUpdatedByUser = true.\r\n if (e && e.target && e.target.className && $(e.target).hasClass('Amount-value')) {\r\n this.defaultBidUpdatedByUser = true;\r\n }\r\n if (!this.budgetPanelView.validate() ||\r\n !this.defaultBidInput.getState().isValid ||\r\n !this.defaultBidModel.toJSON().Amount ||\r\n _.isNaN(this.defaultBidModel.toJSON().Amount)\r\n ) {\r\n this.updateDefaultBidWarning();\r\n this.updatePanel(estimateDataMock, true);\r\n return;\r\n }\r\n this.showDefaultBidWarning = this.pricingModel === 'CPV' && this.defaultBidModel.toJSON().Amount > DefaultBidCPVWarningThreshold;\r\n this.updateDefaultBidWarning();\r\n\r\n const subType = this.viewContext.currentCampaign &&\r\n this.viewContext.currentCampaign.CampaignSubType;\r\n const campaignSetting = _.first(_.get(this.viewContext.currentCampaign, 'CampaignSettings')) || {};\r\n const feedInfo = getFeedInfo(campaignSetting);\r\n const { UseOptimizedTargeting } = this.viewContext.currentAdGroup;\r\n // eslint-disable-next-line max-len\r\n const targetsData = this.estimateRequestFactory.create(this.pricingModelToBidTypeEnum[this.pricingModel], subType, feedInfo, UseOptimizedTargeting);\r\n targetsData.DailyBudget = this.budgetPanelView.getValues().Amount;\r\n targetsData.Bid = this.defaultBidModel.toJSON().Amount;\r\n\r\n // Create AudienceEstimation Promise\r\n if (_.isEmpty(targetsData)) {\r\n this.updatePanel(estimateDataMock, true);\r\n return;\r\n }\r\n\r\n const audienceEstimationUrl = 'Customers()/Accounts()/Default.AudienceKPIEstimationV2';\r\n\r\n this.odata.post(audienceEstimationUrl, {\r\n host: 'adinsight.odata.url',\r\n path: 'AdInsight/V2/',\r\n data: { request: targetsData },\r\n customHeader: {\r\n name: 'x-ms-scenarioname',\r\n value: this.logScenario.value,\r\n },\r\n }).then((estimateData) => {\r\n this.updatePanel(estimateData, estimateData && estimateData.ErrorCode === 'Success');\r\n }).catch((response) => {\r\n const hasErrors = response && !_.isUndefined(response.error);\r\n\r\n if (hasErrors) {\r\n this.updatePanel({ ErrorCode: JSON.stringify(response.error) }, false);\r\n } else {\r\n this.updatePanel({ ErrorCode: JSON.stringify(response) }, false);\r\n }\r\n }).finally(withUiBlock($('.kpiestimation-result'), this.i18n.getString('Loading')));\r\n }\r\n\r\n updatePanel(estimateData, reqStatus) {\r\n this.estimateData = estimateData || {};\r\n this.estimateData.reqStatus = reqStatus;\r\n\r\n ReactDOM.render(\r\n \r\n \r\n
\r\n \r\n \r\n {i18n.getString('BidStrategySetting_OptionQuestion')} \r\n \r\n {i18n.getString('LearnMoreLinkText')}\r\n \r\n \r\n
\r\n \r\n \r\n
);\r\n};\r\n\r\nAlert.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n percentToFixedFormatter: PropTypes.func.isRequired,\r\n decimalFormatter: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape(mapObject(\r\n getAlertStyle(),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n alertKey: PropTypes.string.isRequired,\r\n learnMoreId: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const AlertReact = withDefaultStyles(Alert, getAlertStyle);\r\n","export const getAlertStyle = () => ({\r\n root: {\r\n marginTop: 20,\r\n marginBottom: 12,\r\n '& .alert-image': {\r\n marginTop: 3,\r\n },\r\n '& .alert-info-inline': {\r\n width: '100%',\r\n '& a': {\r\n marginTop: 2,\r\n textDecoration: 'none',\r\n },\r\n '& a:hover': {\r\n textDecoration: 'none',\r\n },\r\n '& .glyphicon': {\r\n float: 'right',\r\n top: 4,\r\n color: '#605E5C',\r\n fontSize: 16,\r\n },\r\n },\r\n\r\n },\r\n});\r\n","import $ from 'jquery';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BackboneSchema as backboneSchema } from '@bingads-webui/backbone-schema';\r\nimport { DependencyResolver } from '@bingads-webui-campaign/dependency-resolver';\r\nimport {\r\n AudienceCampaignErrorsView,\r\n AudienceStepBase,\r\n getBulkErrorsLogMessage,\r\n ImpressionTrackingUrlOptions,\r\n generateNameSuggestionSuffix,\r\n} from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { InputControl } from '@bingads-webui/input-control';\r\nimport { RemainingCharsHint } from '@bingads-webui/remaining-chars-hint';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\nimport template from './template.pug';\r\nimport { AlertReact } from './alert-react';\r\n\r\nconst ImpressionTrackingUrlsMaxCount = 2;\r\n/**\r\n * saveAndExit event.\r\n *\r\n * @event CrudAudienceCampaign#saveAndExit\r\n * @type {Object}\r\n */\r\n\r\n/**\r\n * CrudAudienceCampaign class that extends {AudienceStepBase} class\r\n * The class defines the section of the setting Campaign\r\n *\r\n * @fires CrudAudienceCampaign#saveAndExit\r\n * @class CrudAudienceCampaign\r\n * @extends {AudienceStepBase}\r\n */\r\nexport class CrudAudienceCampaign extends AudienceStepBase {\r\n /**\r\n * Initializes the {CrudAudienceCampaign} class.\r\n *\r\n * @param {Object} options - options for initializing the class.\r\n * @param {Object} options.viewContext - viewContext for the View.\r\n * @param {Object} options.perfMarker - perfMarker\r\n * @returns {undefined}\r\n */\r\n initialize(options) {\r\n if (options && options.perfMarker) {\r\n options.perfMarker.willInit();\r\n }\r\n this.renderMarker;\r\n this.perfMarker = options.perfMarker;\r\n this.isAdImpressions = options.isAdImpressions;\r\n this.options = options;\r\n this.viewContext = options.viewContext;\r\n this.wizardElement = options.wizardElement;\r\n this.i18n = DependencyResolver.get('component/i18n/loader!campaignui/feature/audience-campaign');\r\n this.i18nErrors = DependencyResolver.get('component/api-errors-campaign/index');\r\n this.isNextButtonEnabled = (\r\n !(this.viewContext.isReadOnlyUser || this.viewContext.CurrentAccountInActive)\r\n );\r\n\r\n const schema = DependencyResolver.get('$/schema!campaign/Campaign');\r\n const SchemaModel = backboneSchema(\r\n schema,\r\n this.i18n,\r\n ['Name']\r\n );\r\n\r\n this.model = new SchemaModel();\r\n this.logScenario = options.logScenario;\r\n this.activityLogger = this.logScenario.createCampaignSettings.create();\r\n this.isVideo = options.isVideo;\r\n this.isEnabledForVerifiedImpressionTrackingAtCampaignLevel =\r\n options.isEnabledForVerifiedImpressionTrackingAtCampaignLevel && this.isVideo;\r\n\r\n const config = DependencyResolver.get('component/config/index');\r\n this.permissions = config.get('Permissions');\r\n\r\n this.isCopyCampaignSettingsAudienceCampaignEnabled = _.result(this.permissions, 'IsCopyCampaignSettingsAudienceCampaignEnabled', false);\r\n this.isEnabledDeprecateManualCpcForAudienceCampaign = _.result(this.permissions, 'IsEnabledDeprecateManualCpcForAudienceCampaign', false);\r\n\r\n if (this.isCopyCampaignSettingsAudienceCampaignEnabled) {\r\n const CopyCampaignSettings = DependencyResolver.get('crud-campaign/view/copy-campaign-settings');\r\n this.copySettings = new CopyCampaignSettings({\r\n scenario: 'copy-audience-campaign-settings',\r\n activityLogger: this.activityLogger,\r\n });\r\n this.copySettings.on('copy.campaign', this.copyFromCampaign.bind(this));\r\n }\r\n\r\n this.initControls();\r\n }\r\n\r\n /**\r\n * Get the title of the step section.\r\n * This is automatically called from the wizard.\r\n *\r\n * @readonly\r\n * @returns {Object} returns object has a property text that is used for the title of the section.\r\n */\r\n get title() {\r\n return {\r\n text: this.i18n.getString('Audience_Campaign_Crud_Campaign_Title'),\r\n };\r\n }\r\n\r\n /**\r\n * Get the page title of the step section.\r\n * This is automatically called from the wizard.\r\n *\r\n * @readonly\r\n * @returns {Object} returns object has a property text that is used for the title of the section.\r\n */\r\n get pageTitle() {\r\n return {\r\n text: this.i18n.getString('Audience_Campaign_Crud_Campaign_PageTitle'),\r\n };\r\n }\r\n\r\n /**\r\n * Get the actions of the step section.\r\n * This is automatically called from the wizard.\r\n *\r\n * @readonly\r\n * @returns {Object} returns array that has information about the actions.\r\n */\r\n get actions() {\r\n const actions = [\r\n {\r\n name: 'next',\r\n displayText: this.i18n.getString('Audience_Campaign_Crud_Campaign_Save_Next'),\r\n enabled: this.isNextButtonEnabled,\r\n },\r\n ];\r\n\r\n if (this.viewContext.currentCampaign) {\r\n actions.push({\r\n name: 'done',\r\n enabled: this.isNextButtonEnabled,\r\n htmlAttributes: {\r\n class: 'btn btn-primary btn-exitWithSave',\r\n },\r\n method: 'saveAndExit',\r\n displayText: this.i18n.getString('Audience_Campaign_Crud_Campaign_Save_Exit'),\r\n });\r\n } else {\r\n actions.push({\r\n name: 'cancel',\r\n displayText: this.i18n.getString('Audience_Campaign_Cancel_Label'),\r\n });\r\n }\r\n\r\n return actions;\r\n }\r\n\r\n /**\r\n * Renders the view\r\n *\r\n * @returns {View} returns the view itself\r\n */\r\n render() {\r\n // View can be inherited, this only needs to use perfMarker of its own.\r\n if (this.options && this.options.perfMarker) {\r\n this.renderMarker =\r\n this.perfMarker.createChild('RenderCampaignCrud');\r\n\r\n this.renderMarker.willInit();\r\n }\r\n if (this.perfMarker.name === 'CampaignCrud') {\r\n this.perfMarker.willRender();\r\n }\r\n\r\n this.$el.html(template(this));\r\n\r\n if (this.isVideo) {\r\n this.updateVideoAlert();\r\n }\r\n if (this.isAdImpressions) {\r\n this.updateAdImpressionAlert();\r\n }\r\n this.$('.name-input-control-container').append(this.nameInput.render().$el);\r\n this.$('.remaining-chars-hint-container').append(this.nameInputRemainingCharsHint.render().$el);\r\n this.$('.errors-container').append(this.errorsView.render().$el);\r\n\r\n if (this.isCopyCampaignSettingsAudienceCampaignEnabled) {\r\n this.$('.copy-campaign-settings-container').append(this.copySettings.render().$el);\r\n }\r\n\r\n if (this.isEnabledForVerifiedImpressionTrackingAtCampaignLevel) {\r\n this.$('.impression-tracking-url-options-container').append(this.impressionTrackingUrlOptions.render().$el);\r\n }\r\n\r\n if (this.budget) {\r\n this.$('.budget').empty().append(this.budget.$el);\r\n this.budget.render();\r\n }\r\n\r\n return this;\r\n }\r\n\r\n updateVideoAlert() {\r\n ReactDOM.render(\r\n \r\n \r\n {`${i18n.getString(alertKey)} `}\r\n \r\n {i18n.getString('LearnMoreLinkText')}\r\n \r\n \r\n { setVisible(false); }}\r\n />\r\n
\r\n {Text}
: null}\r\n \r\n - \r\n
- \r\n {pickerTitle}\r\n \r\n {contentView}\r\n
\r\n \r\n
\r\n );\r\n}\r\n","\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useEffect, useMemo } from 'react';\r\nimport {\r\n UAPPlacementTypeAlias as EPT,\r\n useImageExperienceAdPreviewModel,\r\n UnstyledAdPreviewCarouselLayout as AdPreviewCarouselLayout,\r\n} from '@bingads-webui-campaign-react/unified-ad-preview-library-cmui';\r\nimport { IImageExperienceImage } from '@bingads-webui-campaign-react/responsive-ad-editor-utils';\r\n\r\nimport { IRecommendAd } from './types';\r\n\r\nconst adPreviewConfig = [{\r\n placementSetName: 'RecommandAd',\r\n placementTypes: [EPT.MSAN.MSEdgeSingleCarousel],\r\n}];\r\n\r\nconst adPreviewConfigMMAV2 = [{\r\n placementSetName: 'RecommandAD-MMAV2',\r\n placementTypes: [EPT.MSANV2.MSNCarousel],\r\n}];\r\n\r\ninterface IRecommendAdPreviewCarouselProps {\r\n isMMAV2Enabled: boolean;\r\n imageList: IImageExperienceImage[];\r\n ads: IRecommendAd[];\r\n url: string;\r\n activeIndex: number;\r\n setActiveIndex: (index: number) => void;\r\n i18n: any;\r\n}\r\n\r\nexport const RecommandAdPreviewCarousel = ({\r\n isMMAV2Enabled,\r\n imageList,\r\n ads,\r\n url,\r\n activeIndex,\r\n setActiveIndex,\r\n i18n,\r\n}: IRecommendAdPreviewCarouselProps) => {\r\n const {\r\n onUpdateImageExperienceImageList,\r\n multiImagePlacementSets: placementSets,\r\n } = useImageExperienceAdPreviewModel(isMMAV2Enabled ? adPreviewConfigMMAV2 : adPreviewConfig);\r\n\r\n useEffect(() => {\r\n // transform imageList to 2-dimensional array, the 1st dimension is image,\r\n // and the 2nd dimension is placement\r\n const finalImageList = _.map(imageList, image => ([image]));\r\n onUpdateImageExperienceImageList(finalImageList);\r\n }, [imageList, onUpdateImageExperienceImageList]);\r\n\r\n const curPlacementList = useMemo(() => {\r\n const { placementList } = _.first(placementSets) || {};\r\n // each placement has multiple images, and for this case,\r\n // make each image in a placement as a separated placement\r\n const finalPlacementList = [];\r\n _.forEach(placementList, ({ images, ...rest }) => {\r\n _.forEach(images, (image) => {\r\n finalPlacementList.push({ ...rest, ...image });\r\n });\r\n });\r\n return finalPlacementList;\r\n }, [placementSets]);\r\n\r\n const onRenderPlacement = useCallback((placement, AdPlacementComponent, idx) => {\r\n const {\r\n LongHeadline, Headline, Text, BusinessName,\r\n } = ads[idx] || {};\r\n return (\r\n {i18n.getString(_TL_('Recommended Ads for this Campaign'))}
\r\n \r\n \r\n {imageExperiences.map((item, index) => {\r\n const {\r\n Headline,\r\n LongHeadline,\r\n Text,\r\n BusinessName,\r\n } = ads[index];\r\n const { aspectRatio, imagePreviewHeight } = constants.aspectRatios.Image191x100;\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n {errorCodes.map((errorCode: string) => (\r\n
\r\n \r\n \r\n {i18nErrors.getString(`API_ErrorNumber_${errorCode}`) || i18nErrors.getString('ErrorNumber_-1')}\r\n
\r\n ))}\r\n \r\n
\r\n );\r\n }, [ads, i18n, url]);\r\n\r\n return (\r\n \r\n this.setState({ selectedIndex: idx })}\r\n isMMAV2Enabled={isMMAV2Enabled}\r\n imageList={imageExperiences}\r\n ads={ads}\r\n url={url}\r\n i18n={i18n}\r\n />\r\n
\r\n\r\n {\r\n this.props.activityLogger.signal(`create this ad - recommend-ad-carusel. The final URL: ${url}.`, 'responsive ad recommendation');\r\n this.setState({\r\n creating: true,\r\n });\r\n try {\r\n await setUpAdWithRecommendAd({\r\n ad: ads[selectedIndex],\r\n isAdEditShown: true,\r\n shouldSaveAdFromRecommend: false,\r\n });\r\n toggleOpen(false);\r\n } catch (error) {\r\n this.setState({\r\n errorMessage: i18n.getString(_TL_('Failed to create this ad.')),\r\n });\r\n } finally {\r\n this.setState({\r\n creating: false,\r\n });\r\n }\r\n }}\r\n text={i18n.getString(_TL_('Create this ad'))}\r\n />\r\n {\r\n this.props.activityLogger.signal(`cancel - recommend-ad-carusel. The final URL: ${url}.`, 'responsive ad recommendation');\r\n toggleOpen(false);\r\n }}\r\n text={i18n.getString(_TL_('Cancel'))}\r\n />\r\n \r\n
\r\n {i18n.getString(_TL_('Ad Recommendation Preview'))}
\r\n\r\n
{errorMessage}
\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return ads.length === 0 ? null : (\r\n \r\n {\r\n this.toggleOpen(true);\r\n this.props.activityLogger.signal(`view recommendations - recommend ad button. The final URL: ${url}.`, 'responsive ad recommendation');\r\n setClarityTag({ AdRecommendationMSANModal: 'true' });\r\n },\r\n }}\r\n message={i18n.getString(_TL_('Ads recommended based on the Final URL.'))}\r\n level=\"Info\"\r\n icon={()}\r\n dismissible={false}\r\n />\r\n this.toggleOpen(false)}\r\n isBlocking={false}\r\n >\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nexport function urlChangeForRecommendationAd(\r\n element,\r\n reactComponentRef: React.RefObject\r\n {\r\n setDisplayImagePicker(newOpen);\r\n if (!newOpen) {\r\n clearImagePickerError();\r\n }\r\n }}\r\n uploadImage={uploadImage}\r\n processUploadedImage={processUploadedImage}\r\n minSize={minSize}\r\n maxUploadNum={maxUploadNum}\r\n imageExperienceProps={{\r\n suggestion,\r\n suggestionPoller,\r\n finalUrl: url,\r\n imageOption: constants.imageOptionKeys.Portrait,\r\n isPortraitImage: true,\r\n }}\r\n addImageByUrl={addImageByUrl}\r\n managedViewSelectionState={selectedMediaPanelSource}\r\n updateManagedViewSelectionState={setSelectedMediaPanelSource}\r\n stockImageConfig={{\r\n getStockImages,\r\n onSelectStockImage,\r\n }}\r\n socialImageConfig={{\r\n socialMediaDataSource,\r\n activityLogger,\r\n }}\r\n assetLibraryConfig={{\r\n cid,\r\n aid,\r\n oDataConfig,\r\n dateFormat,\r\n timeZone,\r\n preferencesService,\r\n activityLogger,\r\n onImageSelected,\r\n onImagesSelected,\r\n onImageAddError: e => setImagePickerError(e),\r\n }}\r\n i18n={i18n}\r\n cid={cid.toString()}\r\n aid={aid.toString()}\r\n errorMessage={imagePickerError}\r\n imageType={null}\r\n customMediaSourceConfig={customMediaSourceConfig}\r\n perfMarker={perfMarker}\r\n permissions={permissions}\r\n serverContext={serverContext}\r\n />\r\n\r\n {(image instanceof ImageExperienceImage) && (\r\n setIsImageEditDisplayed(false)}\r\n onApply={onSaveEditImage}\r\n mediaRepository={mediaRepository}\r\n aspectRatioConfig={constants.aspectRatiosForBoostPortrait}\r\n cropSettings={image.cropSettings}\r\n minCropSize={minCropSize}\r\n baseImage={{\r\n Type: image.Type,\r\n Src: image.Src,\r\n Width: image.Width,\r\n Height: image.Height,\r\n }}\r\n adCreatorScenario={{\r\n scenarioName: 'BoostImageAdCreation',\r\n scenarioValue: 'BoostImageAdCreation',\r\n }}\r\n disabledPivotItemKeys={[PivotItemKey.Effect]}\r\n customizedDefaultSelectedPivotItemKey={PivotItemKey.Crop}\r\n />)}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport { BoostImage };\r\n","/* eslint-disable react/no-array-index-key */\r\n/* eslint-disable import/extensions */\r\n/* eslint-disable import/no-unresolved */\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport classnames from 'classnames';\r\nimport { ThemeProvider } from 'react-jss';\r\nimport edmCampaign from '@bingads-webui-component-legacy/edm-campaign/index';\r\nimport { DependencyResolver } from '@bingads-webui-campaign/dependency-resolver';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { BackboneViewWrapper } from '@bingads-webui-react/backbone-view-wrapper';\r\nimport { bulkEditChange } from '@bingads-webui-campaign-legacy/bulk-edit/service/bulk-edit';\r\nimport getParams from '@bingads-webui-campaign-legacy/bulk-edit/service/get-params';\r\nimport { bulkApiErrorNumberToErrorMessageMapping } from '@bingads-webui-campaign/api-errors';\r\n\r\nimport {\r\n MessageBar,\r\n MessageBarType,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport {\r\n Row,\r\n Col,\r\n Button,\r\n} from '@bingads-webui-react/primitive';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport {\r\n ImageExperience,\r\n PreviewCarousel,\r\n MMAPreviewCarousel,\r\n UnifiedPreviewCarousel,\r\n UnifiedMMAMSANPreviewCarousel,\r\n SavedAdList,\r\n constants,\r\n getAutoCroppedImages,\r\n} from '@bingads-webui-campaign-react/image-experience';\r\nimport { VideoPreviewCarousel } from '@bingads-webui-campaign-react/image-experience-video-part';\r\nimport {\r\n SuggestionPoller,\r\n MediaRepository,\r\n SuggestionStatus,\r\n mapSuggestionResponseToState,\r\n} from '@bingads-webui-campaign/media-repository';\r\nimport { isValidUrl } from '@bingads-webui/url-util';\r\nimport { ImageOData } from '@bingads-webui-campaign/image-odata';\r\nimport {\r\n getAdCreatorInstrumentation,\r\n instrumentationScenarios,\r\n} from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { ImageSuggestionCarousel } from '@bingads-webui-campaign-react/image-suggestion-carousel';\r\nimport { ComponentSettings, ThemeFluent } from '@bingads-webui-theme-2018/theme-fluent';\r\nimport {\r\n getImagesFromMTAssetsAsync,\r\n getMultiImagesFromMTAssetsAsync,\r\n uploadRecommendImage,\r\n omitDeletedParameters,\r\n setMTImageModel,\r\n getFlattenedImageAssetList,\r\n updateAssetsIdsAsync,\r\n} from '@bingads-webui-campaign-react/responsive-ad-editor-utils';\r\n\r\nimport { AdEdit } from './ad-edit/view';\r\nimport { AccountSettingRepository } from './utils/account-setting-repository';\r\nimport { getVideosAndThumbnailsFromMTAssets } from './utils/video-repository-util';\r\nimport { logSaveAdInfoForMetrics } from './utils/save-ad-logging';\r\nimport { getTextSuggestionAdoption } from './asset-suggestion/asset-suggestion-log';\r\nimport { RecommendAdList, getRecommendCacheByUrl } from './ad-recommend';\r\nimport { BoostImage } from './boost-image';\r\nimport { getUnifiedAdPreviewConfig } from './get-unified-ad-preview-config';\r\n\r\nconst initialState = {\r\n shortHeadline: '',\r\n longHeadline: '',\r\n description: '',\r\n businessName: '',\r\n url: '',\r\n protocol: 'https://',\r\n callToAction: '',\r\n imageList: [],\r\n savedAdsList: [],\r\n videoList: [],\r\n thumbnailRecord: {}, // { VideoMedia16X9Thumbnail: object, ... }\r\n isAdEditShown: true,\r\n imageErrorMessages: [],\r\n videoErrorMessages: [],\r\n genericErrorMessages: [],\r\n errorCodes: [],\r\n currentAd: null,\r\n isBlocking: false,\r\n draftUnsaved: false,\r\n isStockPhotoEnabled: false,\r\n oDataConfig: null,\r\n videoUploading: false,\r\n currentSelectedImageId: null,\r\n currentSelectedLogoId: null,\r\n cropImage: null,\r\n blockCarousel: false,\r\n hasWebsiteImageOptedIn: true,\r\n enableAutoRotate: true,\r\n hasManualCroppedLogo: false,\r\n hasManualCroppedImage: false,\r\n hasUsedViewAllPlacements: false,\r\n isRecommendAd: false,\r\n hotspots: [],\r\n mmaBulkConversionStatus: 'Active',\r\n isBulkEditMMA: true,\r\n isBulkEditMMAUnSaved: false,\r\n campaignSettings: [],\r\n ...mapSuggestionResponseToState(SuggestionStatus.EmptyURL),\r\n};\r\n\r\nexport class CrudAudienceAdReact extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.perfMarker = props.perfMarker;\r\n this.perfMarker.willInit();\r\n\r\n this.isAdRecommendationMSANEnabled = props.isAdRecommendationMSANEnabled;\r\n // override only in Ad creation scenario and not opt out the prefill\r\n // no prefill in some test cases\r\n this.shouldOverrideAdInEditor = !props.ad && !_.result(props.permissions.dynamic, 'OptOutMSANAdRecommendationPrefill') && !window.e2eTestEnvironment;\r\n\r\n this.isMultiMediaAdsPhase2Enabled = props.permissions.IsMultiMediaAdsPhase2Enabled;\r\n this.IsVideoAdEditorEnabled = props.permissions &&\r\n props.permissions.IsVideoAdEditorEnabled;\r\n\r\n this.i18nErrors = DependencyResolver.get('component/api-errors-campaign/index');\r\n\r\n this.isMSANBoostEnabled = props.isAudienceCampaign && props.permissions.IsAmplifyEnabled;\r\n this.isBoostPortraitImageEnabled = this.isMSANBoostEnabled && props.permissions.IsBoostPortraitImageEnabled;\r\n this.isBoost200x100ImageEnabled = this.isMSANBoostEnabled && props.permissions.IsBoost200x100ImageEnabled;\r\n this.isBoostNewAspectRatioSupportEnabled = this.isMSANBoostEnabled && props.permissions.IsBoostNewAspectRatioSupportEnabled;\r\n\r\n this.isNativeAd = props.isAudienceCampaign\r\n && (_.result(props.viewContext.currentCampaign, 'CampaignSubType') === 'AudienceStatic'\r\n || _.result(props.viewContext.currentCampaign, 'CampaignSubType') === 0);\r\n\r\n this.isAudienceImageUpscale = this.isNativeAd && _.result(props.permissions.dynamic, 'AudienceImageUpscale');\r\n\r\n this.isMSANLogoAndCTAForMMAEnabled = props.isAudienceCampaign && !this.isMSANBoostEnabled\r\n && (_.result(props.viewContext.currentCampaign, 'CampaignSubType') === 'AudienceStatic'\r\n || _.result(props.viewContext.currentCampaign, 'CampaignSubType') === 0)\r\n && props.permissions.IsMSANLogoAndCTAForMMAEnabled;\r\n\r\n this.isLogoEnabled =\r\n (this.props.isMultimediaAd && props.permissions.IsMultiMediaAdsPhase2Enabled && !props.isRecommendation)\r\n || (props.isAudienceCampaign && props.permissions.IsAmplifyEnabled)\r\n || this.isMSANLogoAndCTAForMMAEnabled;\r\n\r\n this.recommendAssetIdImageUrlMap = {};\r\n this.imageTypesWithOrder = constants.getImageTypesWithOrder(this.props.isMultimediaAd); // eslint-disable-line max-len\r\n\r\n this.defaultPreviewFields = {\r\n shortHeadline: props.i18n.getString('Audience_Campaign_Ad_Preview_Default_ShortHeadline'),\r\n longHeadline: props.i18n.getString('Audience_Campaign_Ad_Preview_Default_LongHeadline'),\r\n description: props.i18n.getString('Audience_Campaign_Ad_Preview_Default_Description'),\r\n businessName: props.i18n.getString('Audience_Campaign_Ad_Preview_Default_BusinessName'),\r\n callToAction: props.i18n.getString('Audience_Campaign_Ad_Preview_Default_CallToAction'),\r\n url: 'https://example.com',\r\n };\r\n\r\n const newState = {};\r\n // DataProcessorFactory('nnfa');\r\n this.adEditRef = React.createRef();\r\n this.imagePreviewCarouselRef = React.createRef();\r\n this.videoPreviewCarouselRef = React.createRef();\r\n\r\n this.saveAdAsync = this.saveAdAsync.bind(this);\r\n this.saveMMABulkConversion = this.saveMMABulkConversion.bind(this);\r\n this.progressCb = this.progressCb.bind(this);\r\n this.cancelAdAsync = this.cancelAdAsync.bind(this);\r\n\r\n this.isVideo = props.isVideo && this.props.permissions.IsVideoAdsForCampaignEnabled;\r\n\r\n this.baseURL = `/Customers(${props.cid})/Accounts(${props.aid})/`;\r\n\r\n const { isMultimediaAdinMSANEnabled, isMultimediaAd, isBulkEditMMA } = this.props;\r\n this.isMMAEnabled = isMultimediaAdinMSANEnabled || isMultimediaAd;\r\n\r\n this.logInfo = {\r\n isGridDisplay: props.isGridDisplay,\r\n isVideo: this.isVideo,\r\n isMMAInMSAN: isMultimediaAdinMSANEnabled,\r\n isMMASearch: isMultimediaAd && this.isMultiMediaAdsPhase2Enabled,\r\n isEdit: !!props.ad,\r\n };\r\n\r\n this.logWithMetadata('responsive ad editor loaded');\r\n\r\n this.adPreviewPerfMarker = this.props.perfMarker.createChild('adPreviewOpen');\r\n\r\n // collect unSupported ratios, return back to MT when saving\r\n this.UiUnsupportedRatios = [];\r\n\r\n this.isSimplifyAudienceCreation = props.scenario === 'new-audience-static-creation';\r\n\r\n if (props.ad) {\r\n newState.currentAd = props.ad;\r\n newState.isBlocking = false;\r\n newState.shortHeadline = props.ad.Headline;\r\n newState.longHeadline = props.ad.LongHeadline;\r\n newState.description = props.ad.Text;\r\n if ((this.props.isMultimediaAd && this.isMultiMediaAdsPhase2Enabled) ||\r\n isMultimediaAdinMSANEnabled) {\r\n if (!_.isEmpty(props.ad.Headlines)) {\r\n if (_.isEmpty(_.first(props.ad.Headlines).Asset)) {\r\n // edit ad in campaign / ad group creation\r\n newState.shortHeadline = _.first(props.ad.Headlines).Text;\r\n } else {\r\n // edit in grid\r\n newState.shortHeadline = _.first(props.ad.Headlines).Asset.Text;\r\n }\r\n }\r\n if (!_.isEmpty(props.ad.LongHeadlines)) {\r\n if (_.isEmpty(_.first(props.ad.LongHeadlines).Asset)) {\r\n newState.longHeadline = _.first(props.ad.LongHeadlines).Text;\r\n } else {\r\n newState.longHeadline = _.first(props.ad.LongHeadlines).Asset.Text;\r\n }\r\n }\r\n if (!_.isEmpty(props.ad.Descriptions)) {\r\n if (_.isEmpty(_.first(props.ad.Descriptions).Asset)) {\r\n newState.description = _.first(props.ad.Descriptions).Text;\r\n } else {\r\n newState.description = _.first(props.ad.Descriptions).Asset.Text;\r\n }\r\n }\r\n }\r\n newState.businessName = props.ad.BusinessName;\r\n newState.callToAction = props.ad.CallToAction;\r\n newState.url = _.first(props.ad.FinalUrls);\r\n newState.imageList = props.ad.ImageList || [];\r\n if (!_.isEmpty(newState.imageList) && !_.isEmpty(_.first(newState.imageList))) {\r\n newState.currentSelectedImageId = this.getDefaultCurrentSelectedImageId(newState.imageList);\r\n }\r\n newState.isStockPhotoEnabled = true;\r\n newState.hotspots = _.map(props.ad.HotSpots, item =>\r\n item.Asset && {\r\n title: item.Asset.Title,\r\n desc: item.Asset.Description,\r\n actionText: item.Asset.ActionText,\r\n glyph: item.Asset.Glyph,\r\n uri: item.Asset.Uri,\r\n placement: item.Asset.Placement,\r\n });\r\n newState.oDataConfig = {\r\n odataRootUrl: 'test.com',\r\n odataPath: '/Mock/',\r\n odataToken: 'token',\r\n };\r\n\r\n // For Image Suggestion from Final URL\r\n if (props.isAdCreatorEnabled || props.isFinalUrlImageRetrievalEnabled) {\r\n _.extend(newState, mapSuggestionResponseToState(SuggestionStatus.FetchInProgress));\r\n this.onFinalUrlChanged(newState.url);\r\n }\r\n }\r\n\r\n this.isImageFittingEnabled = _.result(props.permissions.dynamic, 'ImageFittingMVP', false)\r\n && !_.result(props.permissions.dynamic, 'ImageFittingExlcudeMAE', true)\r\n && _.result(props.permissions.dynamic, 'ImageFittingUnifiedImageROI', false)\r\n && !props.ad.LegacyResponsiveAd\r\n && isMultimediaAdinMSANEnabled; // only enable for audience ads for MVP\r\n\r\n this.state = _.defaults(newState, initialState);\r\n this.initialVideos = [];\r\n\r\n this.jsdata = props.jsdata;\r\n this.permissions = props.permissions;\r\n if (this.permissions.IsMMAAutomatedCTAOptInEnabled && props.viewContext.currentCampaign && props.viewContext.currentCampaign.Id && this.jsdata && this.jsdata.Campaign) {\r\n const params = {\r\n queryParameters: {\r\n entitySet: edmCampaign.currentAccount.Campaigns,\r\n },\r\n bypassCache: true,\r\n };\r\n this.jsdata.Campaign.find(props.viewContext.currentCampaign.Id, params).then((data) => {\r\n this.setState({ campaignSettings: data.CampaignSettings });\r\n });\r\n }\r\n\r\n if (isMultimediaAdinMSANEnabled) {\r\n this.adCreatorScenario = instrumentationScenarios.MSAN;\r\n } else if (props.isFinalUrlImageRetrievalEnabled) {\r\n this.adCreatorScenario = instrumentationScenarios.MSANImage;\r\n } else if (isMultimediaAd) {\r\n this.adCreatorScenario = instrumentationScenarios.MMA;\r\n } else if (isBulkEditMMA) {\r\n this.adCreatorScenario = instrumentationScenarios.MMAConversion;\r\n } else {\r\n this.adCreatorScenario = instrumentationScenarios.default;\r\n }\r\n\r\n if (props.isAdCreatorEnabled || props.isFinalUrlImageRetrievalEnabled) {\r\n this.suggestionPoller = new SuggestionPoller({\r\n cid: props.cid,\r\n aid: props.aid,\r\n cmpId: props.viewContext.currentCampaign.Id,\r\n oDataConfig: props.oDataConfig,\r\n jobCompleteCallback: this.onPollingSuggestionCompleted.bind(this),\r\n logger: getAdCreatorInstrumentation(this.props.instrumentation, this.adCreatorScenario, this.props.permissions).websiteSuggestionActivity, // eslint-disable-line max-len\r\n });\r\n }\r\n\r\n this.mediaRepository = new MediaRepository({\r\n cid: props.cid,\r\n aid: props.aid,\r\n cmpId: props.viewContext.currentCampaign.Id,\r\n oDataConfig: props.oDataConfig,\r\n });\r\n\r\n this.imageOData = new ImageOData(props.cid, props.aid, props.oDataConfig);\r\n\r\n // this is an observable passed in scenarios where the save ad button is not\r\n // part of this view (e.g. most top of grid scenarios)\r\n this.hasWebsiteImageOptedInObservable = props.hasWebsiteImageOptedInObservable;\r\n\r\n if (!this.hasWebsiteImageOptedInObservable) {\r\n if (props.isAdCreatorEnabled && props.isMultimediaAdinMSANEnabled) {\r\n this.hasWebsiteImageOptedInObservable = (newValue) => {\r\n this.setState({\r\n hasWebsiteImageOptedIn: newValue,\r\n });\r\n };\r\n } else {\r\n this.hasWebsiteImageOptedInObservable = _.noop;\r\n }\r\n }\r\n\r\n this.enableAdPreviewLibrary = _.get(props.permissions.dynamic, 'AdPreviewLibrarySearchMMA', false);\r\n this.props.activityLogger.signal(`crud-audience-ad-react constructor: ${props.permissions.dynamic && props.permissions.dynamic.MMACopilot}`, 'rae-view deprecation');\r\n }\r\n\r\n componentDidMount() {\r\n this.openTime = new Date();\r\n if (this.props.ad) {\r\n if (this.isVideo) {\r\n this.fetchAndFillVideosAsync();\r\n } else if (_.isEmpty(this.state.imageList)) {\r\n this.fetchAndFillImagesAsync();\r\n }\r\n }\r\n this.props.activityLogger.signal(`ad editor opened: isGrid: ${this.props.isGridDisplay}, isEdit: ${!!this.props.ad}, isVideo: ${!!this.isVideo}, url: ${this.state.url}`, 'responsive ad editor');\r\n\r\n this.perfMarker.done();\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.props.isBulkEditMMA) return;\r\n if (this.props.isImproveMMA) return;\r\n if (this.props.isAdCreatorEnabled && this.adEditRef.current && this.adEditRef.current.view.$) {\r\n // disable this from running in unit tests ReactDOM.render will always fail because the 2nd arg is\r\n // not attached to any DOM in unit test scenario\r\n const disabled = (this.state.imageList.length >= constants.DEFAULT_MAX_IMAGE || this.isMSANBoostEnabled);\r\n\r\n ReactDOM.render(\r\n \r\n
\r\n {i18n.getString(_TL_('Portrait image'))}
\r\n \r\n {!(image instanceof ImageExperienceImage) && (\r\n \r\n )}\r\n {image instanceof ImageExperienceImage && (\r\n \r\n 
\r\n \r\n )}\r\n
\r\n \r\n
\r\n {\r\n this.state.imageErrorMessages.map((errMsg, index) => (\r\n
\r\n }\r\n {\r\n this.state.videoErrorMessages.length > 0 &&\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n {\r\n this.state.videoErrorMessages.map((errMsg, index) => (\r\n
\r\n }\r\n {\r\n this.state.draftUnsaved &&\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n {this.props.renderMMABulkConversionHeader && this.props.renderMMABulkConversionHeader({ selectedRowCount: this.props.selectedRowCount })}\r\n {\r\n !this.props.isGridDisplay && !this.props.isBulkEditMMA &&\r\n // don't show ad list in new audience creation flow\r\n !this.isSimplifyAudienceCreation &&\r\n
\r\n );\r\n }\r\n}\r\n\r\nCrudAudienceAdReact.propTypes = {\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n i18nErrors: PropTypes.shape({\r\n getBulkApiErrors: PropTypes.func.isRequired,\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n responsiveAdRepository: PropTypes.shape({\r\n getAdAsync: PropTypes.func.isRequired,\r\n removeAdAsync: PropTypes.func.isRequired,\r\n saveAdAsync: PropTypes.func.isRequired,\r\n savePlaceholderMMA: PropTypes.func.isRequired,\r\n saveMMABulkConversion: PropTypes.func,\r\n }).isRequired,\r\n odata: PropTypes.shape({\r\n get: PropTypes.func.isRequired,\r\n post: PropTypes.func.isRequired,\r\n }).isRequired,\r\n genericImage: PropTypes.string.isRequired,\r\n viewContext: PropTypes.shape({\r\n currentAdGroup: PropTypes.shape({\r\n Id: PropTypes.number,\r\n }),\r\n currentCampaign: PropTypes.shape({\r\n Id: PropTypes.number,\r\n }),\r\n }).isRequired,\r\n pageContext: PropTypes.objectOf(PropTypes.any),\r\n isMobileUrlEnabled: PropTypes.bool,\r\n isImpressionTrackingUrlsEnabled: PropTypes.bool,\r\n isGridDisplay: PropTypes.bool,\r\n onAdSaved: PropTypes.func,\r\n onClose: PropTypes.func,\r\n ad: PropTypes.objectOf(PropTypes.any),\r\n isMultimediaAdinMSANEnabled: PropTypes.bool,\r\n isAdRecommendationMSANEnabled: PropTypes.bool,\r\n perfMarker: PropTypes.shape({\r\n willFetchFile: PropTypes.func.isRequired,\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 isForVNext: PropTypes.bool,\r\n isMultimediaAd: PropTypes.bool,\r\n isPlaceholderMMA: PropTypes.bool,\r\n isAudienceCampaign: PropTypes.bool,\r\n isStockPhotoEnabled: PropTypes.bool,\r\n isBulkEditMMA: PropTypes.bool,\r\n oDataConfig: PropTypes.shape({\r\n odataRootUrl: PropTypes.string,\r\n odataPath: PropTypes.string,\r\n odataToken: PropTypes.string,\r\n }),\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n IsBoostPortraitImageEnabled: PropTypes.bool,\r\n IsStockPhotoFilterEnabled: PropTypes.bool,\r\n IsVideoAdsForCampaignEnabled: PropTypes.bool,\r\n IsMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n IsVideoAdEditorEnabled: PropTypes.bool,\r\n IsAmplifyEnabled: PropTypes.bool,\r\n IsBoost200x100ImageEnabled: PropTypes.bool,\r\n IsBoostNewAspectRatioSupportEnabled: PropTypes.bool,\r\n IsMSANLogoAndCTAForMMAEnabled: PropTypes.bool,\r\n dynamic: PropTypes.object,\r\n IsBackgroundSceneEnabled: PropTypes.bool,\r\n }),\r\n isVideo: PropTypes.bool,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n isFinalUrlImageRetrievalEnabled: PropTypes.bool,\r\n isRecommendation: PropTypes.bool,\r\n scenario: PropTypes.string,\r\n jsdata: PropTypes.shape({}),\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }).isRequired,\r\n enableOfflinePollingDelay: PropTypes.bool,\r\n hasWebsiteImageOptedInObservable: PropTypes.func,\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n preferencesService: PropTypes.shape({\r\n setAtUserLevel: PropTypes.func,\r\n findByNameAtUserLevel: PropTypes.func,\r\n }),\r\n parsedTextMaxLengthExtension: PropTypes.shape({\r\n extend: PropTypes.func,\r\n }),\r\n selectedItems: PropTypes.arrayOf(PropTypes.shape({})),\r\n allPages: PropTypes.bool,\r\n filterService: PropTypes.shape({}),\r\n selectedRowCount: PropTypes.number,\r\n renderMMABulkConversionHeader: PropTypes.func,\r\n renderMMABulkConversionActionButtons: PropTypes.func,\r\n isImproveMMA: PropTypes.bool,\r\n isMMAV2Enabled: PropTypes.bool,\r\n biddingScheme: PropTypes.shape({}),\r\n serverContext: PropTypes.shape({}),\r\n};\r\n\r\nCrudAudienceAdReact.defaultProps = {\r\n onAdSaved: _.noop,\r\n onClose: _.noop,\r\n ad: null,\r\n pageContext: {},\r\n perfMarker: {\r\n willFetchFile: _.noop,\r\n willInit: _.noop,\r\n willFetchData: _.noop,\r\n willRender: _.noop,\r\n done: _.noop,\r\n createChild: _.noop,\r\n },\r\n isForVNext: false,\r\n isAudienceCampaign: false,\r\n scenario: '',\r\n isMultimediaAd: false,\r\n isPlaceholderMMA: false,\r\n isStockPhotoEnabled: false,\r\n isMultimediaAdinMSANEnabled: false,\r\n isMobileUrlEnabled: true,\r\n isImpressionTrackingUrlsEnabled: false,\r\n isGridDisplay: false,\r\n isBulkEditMMA: false,\r\n oDataConfig: null,\r\n permissions: { dynamic: {} },\r\n isVideo: false,\r\n isAdRecommendationMSANEnabled: false,\r\n isAdCreatorEnabled: false,\r\n isFinalUrlImageRetrievalEnabled: false,\r\n isRecommendation: false,\r\n jsdata: {},\r\n enableOfflinePollingDelay: true,\r\n hasWebsiteImageOptedInObservable: null,\r\n preferencesService: {},\r\n parsedTextMaxLengthExtension: {\r\n extend: _.noop,\r\n },\r\n selectedItems: [],\r\n allPages: false,\r\n selectedRowCount: 0,\r\n renderMMABulkConversionActionButtons: _.noop,\r\n renderMMABulkConversionHeader: _.noop,\r\n filterService: {},\r\n isImproveMMA: false,\r\n isMMAV2Enabled: false,\r\n biddingScheme: {},\r\n serverContext: {},\r\n};\r\n","import _ from 'underscore';\r\n\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience';\r\nimport { getListOfEffectSettings } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\n\r\nexport const logSaveAdInfoForMetrics = ({\r\n data,\r\n saveAdActivity,\r\n enableAdCreatorMetrics,\r\n imageList = [],\r\n state = {},\r\n}) => {\r\n const baseAdIdMessage = `SavedAdId: ${data.Id}`;\r\n\r\n if (enableAdCreatorMetrics) {\r\n const adIdMessage = [baseAdIdMessage];\r\n\r\n if (_.any(\r\n imageList,\r\n ({ source }) => source === constants.imageSources.WebsiteCarousel\r\n )) {\r\n adIdMessage.push('UsedWebsiteCarouselImage');\r\n }\r\n\r\n if (_.any(\r\n imageList,\r\n ({ source, isLogo }) => source === constants.imageSources.Website && !isLogo\r\n )) {\r\n adIdMessage.push('UsedWebsiteTabImage');\r\n }\r\n\r\n if (_.any(\r\n imageList,\r\n ({ source, isLogo }) => source === constants.imageSources.Website && isLogo\r\n )) {\r\n adIdMessage.push('UsedWebsiteTabImageForLogo');\r\n }\r\n\r\n if (_.any(\r\n imageList,\r\n ({ isLogo }) => isLogo\r\n )) {\r\n adIdMessage.push('UserAddedLogo');\r\n }\r\n\r\n if (state.hasManualCroppedImage) {\r\n adIdMessage.push('UserAppliedManualCrop');\r\n }\r\n\r\n if (state.hasManualCroppedLogo) {\r\n adIdMessage.push('UserAppliedManualCropToLogo');\r\n }\r\n\r\n if (state.hasUsedViewAllPlacements) {\r\n adIdMessage.push('UserOpenedViewAllPlacements');\r\n }\r\n\r\n saveAdActivity.trace(`${adIdMessage.join(';')};`);\r\n\r\n const effects = getListOfEffectSettings(imageList) || [];\r\n\r\n if (effects.length > 0) {\r\n _.each(effects, (effect) => {\r\n saveAdActivity.trace(`${baseAdIdMessage};SmartEffectUsed: ${effect};`);\r\n });\r\n }\r\n } else {\r\n saveAdActivity.trace(`${baseAdIdMessage};`);\r\n }\r\n};\r\n","import { ThemeProvider } from 'react-jss';\r\nimport React, { useMemo, forwardRef, Suspense } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { ComponentSettings, ThemeFluent } from '@bingads-webui-theme-2018/theme-fluent';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { PreferenceContext } from '@bingads-webui-react/preference-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { Scenario, Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { CrudAudienceAdReact } from './crud-audience-ad-react';\r\n\r\nconst DelayedCopilotSearchMMAEditor =\r\n React.lazy(() => import(/* webpackMode: 'eager' */'./copilot-search-mma-editor')\r\n .then(({ CopilotSearchMMAEditor }) => ({\r\n default: CopilotSearchMMAEditor,\r\n })));\r\n\r\nconst DelayedBulkMMAConvertEditor =\r\n React.lazy(() => import(/* webpackMode: 'eager' */'./mma-creation-rsa/bulk-mma-convert-editor')\r\n .then(({ BulkMMAConvertEditor }) => ({\r\n default: BulkMMAConvertEditor,\r\n })));\r\n\r\nconst DelayedPlaceholderMMAEditor =\r\n React.lazy(() => import(/* webpackMode: 'eager' */'./placeholder-mma-editor')\r\n .then(({ PlaceholderMMAEditor }) => ({\r\n default: PlaceholderMMAEditor,\r\n })));\r\n\r\nexport const CrudAudienceAdReactWithContext = forwardRef((props, ref) => {\r\n const scopeValue = useMemo(() => ({\r\n scope: {\r\n values: {\r\n cid: props.cid,\r\n aid: props.aid,\r\n uid: props.uid,\r\n },\r\n },\r\n }), [props.cid, props.aid, props.uid]);\r\n\r\n let CoreEditor = CrudAudienceAdReact;\r\n\r\n if (props.permissions.dynamic.MMACopilot && props.isMultimediaAd) {\r\n if (props.isPlaceholderMMA) {\r\n CoreEditor = DelayedPlaceholderMMAEditor;\r\n } else if (!props.isRecommendation && !props.isBulkEditMMA) {\r\n CoreEditor = DelayedCopilotSearchMMAEditor;\r\n }\r\n }\r\n\r\n if (props.permissions.dynamic.MMARefactor && props.isMultimediaAd && props.isBulkEditMMA) {\r\n CoreEditor = DelayedBulkMMAConvertEditor;\r\n }\r\n\r\n return (\r\n \r\n
\r\n }\r\n {\r\n this.state.isAdEditShown &&\r\n {this.renderAdEdit()}
\r\n \r\n {\r\n !isPlaceholderMMA &&\r\n \r\n \r\n this.onSavePortraitImage(portraitImage)}\r\n associatedImages={this.props.ad && this.props.ad.Images}\r\n dateFormat={_.get(this.props.pageContext, ['CurrentUser', 'CultureDateTimeFormat', 'ShortDatePattern'])}\r\n timeZone={_.get(this.props.pageContext, ['CurrentAccount', 'TimeZone'])}\r\n serverContext={this.props.serverContext}\r\n />\r\n )}\r\n
\r\n \r\n }\r\n {\r\n !isMultimediaAd &&\r\n this.setState({ bulkEditMMAFailed: false })}\r\n >\r\n {this.props.newI18n.getString(_TL_('we’re unable to save your multimedia ad(s) due to an error. Please try again. '))}\r\n \r\n }\r\n
\r\n }\r\n \r\n \r\n {!isMultimediaAd && !this.props.isAdCreatorEnabled &&\r\n this.renderImageExperience(previewTexts, adPreviewConfig)}\r\n
\r\n \r\n {this.renderAdEdit()}\r\n
\r\n \r\n \r\n {(this.props.isMultimediaAd || this.props.isAdCreatorEnabled) &&\r\n !this.isLogoEnabled &&\r\n this.renderImageExperience(previewTexts, adPreviewConfig)}\r\n {this.isVideo ?\r\n
\r\n \r\n \r\n
\r\n }\r\n \r\n \r\n
\r\n \r\n \r\n {`${this.props.i18n.getString('Audience_Campaign_Ad_Policy_Description')} `}\r\n \r\n \r\n {this.props.i18n.getString('Audience_Campaign_Ad_Policy_Label')}\r\n \r\n .\r\n
\r\n \r\n {\r\n this.state.genericErrorMessages.map((errMsg, index) => (\r\n
\r\n {\r\n !this.props.isGridDisplay && !this.props.isBulkEditMMA &&\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n \r\n {this.props.i18n.getString('Audience_Campaign_Ad_Save')}\r\n \r\n {\r\n this.state.savedAdsList.length > 0 &&\r\n \r\n {this.props.i18n.getString('Audience_Campaign_Cancel_Label')}\r\n \r\n }\r\n
\r\n }\r\n {\r\n this.props.isBulkEditMMA && this.props.renderMMABulkConversionActionButtons && !this.state.isBlocking &&\r\n this.props.renderMMABulkConversionActionButtons({\r\n saveMMABulkConversion: this.saveMMABulkConversion,\r\n cancelMMABulkConversion: this.cancelAdAsync,\r\n isUnSaved: this.state.isBulkEditMMAUnSaved || this.state.isBlocking,\r\n })\r\n }\r\n {\r\n this.props.isBulkEditMMA && this.state.bulkEditMMAFailed &&\r\n \r\n {!isUnSaved &&\r\n \r\n {this.i18n.getString('Audience_Campaign_Ad_Save')}\r\n \r\n }\r\n \r\n {this.i18n.getString('Audience_Campaign_Cancel_Label')}\r\n \r\n
\r\n );\r\n }\r\n\r\n renderMMABulkConversionHeader({ selectedRowCount }) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n renderImageExperience() {\r\n const {\r\n customerId, accountId, adGroupId, campaignId, campaignType,\r\n }= this.props.scope;\r\n const { instrumentation, allPages } = this.props;\r\n const config = DependencyResolver.get('component/config/index');\r\n const odata = DependencyResolver.get('component/http/channel/odata');\r\n const odataToken = config.get('odata.token');\r\n const odataPath = config.get('odata.url') + config.get('odata.path');\r\n const odataRootUrl = config.get('CampaignAzureDomain');\r\n const jsdata = DependencyResolver.get('component/js-data-campaign/index');\r\n const viewContext= {\r\n currentAdGroup: {\r\n get Id() {\r\n return adGroupId;\r\n },\r\n },\r\n currentCampaign: {\r\n Id: campaignId,\r\n CampaignType: campaignType,\r\n },\r\n };\r\n const preferencesService = DependencyResolver.get('component/preference/service/index');\r\n const filterService = this.props.filterService.getCombinedFilter();\r\n this.oDataConfig = {\r\n odataRootUrl,\r\n odataPath,\r\n odataToken,\r\n };\r\n return (\r\n {this.i18n.getString('Multimedia_Ad_Bulk_Conversion_Title', { count: selectedRowCount })}
\r\n {this.newI18n.getString(_TL_('Your existing responsive search ads will continue to serve after you copy them to Multimedia ads.'))}
\r\n \r\n
\r\n );\r\n }\r\n render() {\r\n ReactDOM.render(\r\n (\r\n \r\n
\r\n {this.renderImageExperience()}
\r\n ), this.el\r\n );\r\n return this;\r\n }\r\n\r\n remove() {\r\n ReactDOM.unmountComponentAtNode(this.el);\r\n return super.remove();\r\n }\r\n}\r\n\r\n","export const MMAAssetConfigs = {\r\n MAX_HEADLINES: 15,\r\n DEFAULT_HEADLINES: 1,\r\n MIN_HEADLINES: 1,\r\n MAX_LONGHEADLINES: 5,\r\n DEFAULT_LONGHEADLINES: 1,\r\n MIN_LONGHEADLINES: 1,\r\n MAX_DESCRIPTIONS: 5,\r\n DEFAULT_DESCRIPTIONS: 1,\r\n MIN_DESCRIPTIONS: 1,\r\n MAX_HEADLINE_SUGGESTIONS: 15, // MAX_HEADLINES\r\n MAX_DESCRIPTION_SUGGESTIONS: 10, // MAX_DESCRIPTIONS + MAX_LONGHEADLINES\r\n MAX_BUSINESS_NAME: 25,\r\n};\r\n\r\n\r\nexport const ResponsiveAdConfigs = {\r\n MAX_HEADLINE_SUGGESTIONS: 15,\r\n MAX_DESCRIPTION_SUGGESTIONS: 10,\r\n};\r\n","export const getMMAEditorStyles = () => ({\r\n '@global': {\r\n '.top-grid-form .ad-editor__container .crud-audience-ad .react-image-experience .crud-audience-ad-react.crud-multimedia-ad-react': {\r\n '& .ad-edit-and-preview-container': {\r\n position: 'relative',\r\n '& .ad-customizer-container': {\r\n '& .picker-list, > .dropdown-menu.adCustomizersEditor': {\r\n marginTop: 0,\r\n marginLeft: 0,\r\n },\r\n },\r\n '& .image-experience-content': {\r\n minWidth: 'unset',\r\n '& .image-list-view-content .image-list .image-list-content': {\r\n width: '100%',\r\n border: 'none',\r\n margin: 0,\r\n padding: 0,\r\n '& .image-list-item.image-list-add-placeholder': {\r\n borderStyle: 'dashed',\r\n borderColor: '#c8c6c4',\r\n borderRadius: 6,\r\n borderWidth: 1,\r\n marginTop: 8,\r\n },\r\n '& .image-list-choice-group': {\r\n '& .ms-ChoiceFieldGroup-flexContainer': {\r\n flexWrap: 'wrap',\r\n width: 'unset',\r\n '& .ms-ChoiceField': {\r\n marginBottom: 4,\r\n marginRight: 8,\r\n '& ~ .ms-ChoiceField': {\r\n marginLeft: 0,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '& .actionextension-search-dropdown-container .dropdown-search-selector__dropdown': {\r\n marginLeft: 0,\r\n '& .dropdown-toggle .text-left': {\r\n padding: '4px 0 0 8px',\r\n },\r\n },\r\n },\r\n 'div .adEditor-container .ad-editor-form__container .crud-audience-ad .react-image-experience .crud-audience-ad-react.crud-multimedia-ad-react': {\r\n '& .ad-edit-and-preview-container': {\r\n position: 'relative',\r\n '& .ad-customizer-container': {\r\n '& .picker-list, > .dropdown-menu.adCustomizersEditor': {\r\n marginTop: 0,\r\n marginLeft: 0,\r\n },\r\n },\r\n '& .image-experience-content': {\r\n minWidth: 'unset',\r\n '& .image-list-view-content .image-list .image-list-content': {\r\n '& .image-list-item.image-list-add-placeholder': {\r\n marginTop: 8,\r\n },\r\n '& .image-list-choice-group .ms-ChoiceFieldGroup-flexContainer': {\r\n flexFlow: 'row',\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n width: 'unset',\r\n '& .ms-ChoiceField': {\r\n marginBottom: 4,\r\n marginRight: 8,\r\n '& ~ .ms-ChoiceField': {\r\n marginLeft: 0,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '& .actionextension-search-dropdown-container .dropdown-search-selector__dropdown': {\r\n marginLeft: 0,\r\n '& .dropdown-toggle .text-left': {\r\n padding: '4px 0 0 8px',\r\n },\r\n },\r\n },\r\n '.ads-page': {\r\n paddingTop: 24,\r\n '& .top-grid-form .panel': {\r\n marginTop: 0,\r\n },\r\n },\r\n },\r\n adEditorShell: {\r\n width: '100%',\r\n },\r\n mmaAdImagePreviewCarousel: {\r\n position: 'sticky',\r\n width: '100%',\r\n minWidth: 669,\r\n top: '0px',\r\n '& .new-preview-carousel-container-adprelib': {\r\n '& .new-carousel-navigation-mma-adprelib': {\r\n '& .carousel-indicators': {\r\n left: 20,\r\n margin: '20px 24px',\r\n position: 'absolute',\r\n width: 'auto',\r\n },\r\n '& .carousel-control.left': {\r\n left: 0,\r\n bottom: -7,\r\n position: 'absolute',\r\n marginLeft: 15,\r\n marginRight: 76,\r\n height: 32,\r\n marginTop: 20,\r\n marginBottom: 20,\r\n top: 'auto',\r\n right: 0,\r\n },\r\n '& .carousel-control.right': {\r\n left: 0,\r\n bottom: -7,\r\n position: 'absolute',\r\n marginLeft: 135,\r\n marginRight: 76,\r\n height: 32,\r\n marginTop: 20,\r\n marginBottom: 20,\r\n top: 'auto',\r\n right: 0,\r\n },\r\n },\r\n },\r\n },\r\n rightStyles: {\r\n '& .image-experience-content': {\r\n minWidth: 'unset !important',\r\n },\r\n },\r\n container: {\r\n display: 'flex',\r\n width: '100%',\r\n gap: '32px',\r\n '& .text-input-container': {\r\n width: '100% !important',\r\n },\r\n '& .title-item': {\r\n width: 'auto',\r\n maxWidth: '100%',\r\n },\r\n },\r\n leftStyles: {\r\n width: '40%',\r\n maxWidth: 600,\r\n minWidth: 482,\r\n '& .text-assets-collection-container': {\r\n width: 'unset',\r\n '& label.control-label': {\r\n textAlign: 'left',\r\n },\r\n },\r\n '& .business-name-container': {\r\n width: 'unset',\r\n },\r\n },\r\n headerStackStyles: {\r\n width: 'unset',\r\n '& .server-errors': {\r\n marginBottom: 15,\r\n '& .error a': {\r\n color: '#A80000',\r\n },\r\n },\r\n },\r\n imageExperienceStyle: {\r\n '& .image-experience-content': {\r\n minWidth: 'unset !important',\r\n },\r\n '& .image-list-choice-group .ms-ChoiceFieldGroup-flexContainer': {\r\n width: 'unset !important',\r\n },\r\n '& .image-suggestion-carousel-root .panel-heading .see-all-link': {\r\n fontWeight: 'normal',\r\n },\r\n },\r\n textAssetStyle: {\r\n '& .text-assets-collection-container': {\r\n width: '100%',\r\n },\r\n },\r\n businessNameStyle: {\r\n '& .business-name-container': {\r\n width: '100%',\r\n },\r\n },\r\n});\r\n\r\n","export const getAdvancedSettingsStyles = (components, theme) => ({\r\n collapsiblePanel: {\r\n '&.advanced-settings-panel': {\r\n border: 'none',\r\n marginBottom: 'unset',\r\n backgroundColor: 'unset',\r\n marginLeft: 0,\r\n },\r\n\r\n '& .panel-heading': {\r\n padding: 0,\r\n borderBottom: 'none',\r\n marginBottom: 18,\r\n\r\n '& .panel-title': {\r\n fontSize: 18,\r\n '& > a': {\r\n marginLeft: '-8px', // compensate 8px padding on the left of icon\r\n color: theme.palette.themePrimary,\r\n padding: 0,\r\n '&:hover, &:active': {\r\n color: theme.palette.themeDarker,\r\n textDecoration: 'none',\r\n backgroundColor: 'unset',\r\n },\r\n },\r\n\r\n '& > a:after': {\r\n transform: 'rotate(180deg)',\r\n },\r\n\r\n '& > a.collapsed:after': {\r\n transform: 'rotate(90deg)',\r\n },\r\n },\r\n },\r\n\r\n '& .panel-collapse': {\r\n '& .panel-body': {\r\n padding: 0,\r\n overflow: 'hidden',\r\n },\r\n '& .collapse-container': {\r\n padding: 2,\r\n },\r\n },\r\n },\r\n});\r\n\r\n","import React, { useMemo, useContext, useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Panel as BootstrapPanel } from 'react-bootstrap';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport {\r\n Collapse,\r\n useCollapseState,\r\n ValidatedBootstrapPanel,\r\n collapseExpander,\r\n} from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { URLOptionsSection, MobileUrlSection } from '@bingads-webui-campaign-react/validated-url-input';\r\nimport { getAdvancedSettingsStyles } from './advanced-settings-styles';\r\n\r\nexport const AdvancedSettings = ({\r\n mobileFinalUrls,\r\n trackingUrlTemplate,\r\n finalUrlSuffix,\r\n urlCustomParameters,\r\n triggerTestUurl,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const serverContext = useContext(ServerContext);\r\n const { Permissions, DynamicPermissions, Token } = serverContext || { };\r\n const permissions = useMemo(() => ({ dynamic: { ...DynamicPermissions }, ...Permissions }), [DynamicPermissions, Permissions]);\r\n\r\n const classes = useDefaultStyles(getAdvancedSettingsStyles);\r\n\r\n const [\r\n allAdvancedSettingsSections,\r\n advancedSettingsExpandedSections,\r\n setAdvancedSettingsExpandedSections,\r\n ] = useCollapseState(\r\n ['mobile-final-url', 'advanced-url-options'] /* all sections */,\r\n [] /* initially expanded sections */\r\n );\r\n\r\n const allAdvancedSettingsExpand = useMemo(\r\n () => collapseExpander({ setActiveKeys: setAdvancedSettingsExpandedSections }),\r\n [setAdvancedSettingsExpandedSections]\r\n );\r\n\r\n const [advancedSettingsSectionExpanded, setAdvancedSettingsSectionExpanded] = useState(false);\r\n const onAdvancedSettingsSectionToggle = useCallback((expanded) => {\r\n setAdvancedSettingsSectionExpanded(expanded);\r\n }, []);\r\n\r\n const advancedInputSections = () => (\r\n \r\n {advancedInputSections()}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nCopilotSearchMMAEditorContainerInternal.propTypes = {\r\n data: PropTypes.shape({\r\n FinalUrls: PropTypes.string,\r\n MobileFinalUrls: PropTypes.string,\r\n BusinessName: PropTypes.string,\r\n Headlines: PropTypes.arrayOf(PropTypes.string),\r\n LongHeadlines: PropTypes.arrayOf(PropTypes.string),\r\n Descriptions: PropTypes.arrayOf(PropTypes.string),\r\n Images: PropTypes.shape({\r\n ImageList: PropTypes.arrayOf(PropTypes.shape({})),\r\n }),\r\n TrackingUrlTemplate: PropTypes.string,\r\n FinalUrlSuffix: PropTypes.string,\r\n UrlCustomParameters: PropTypes.string,\r\n FinalUrlForRecommendation: PropTypes.string,\r\n CallToAction: PropTypes.shape({\r\n cta: PropTypes.string,\r\n language: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n onReset: PropTypes.func.isRequired,\r\n errors: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n cid: PropTypes.string,\r\n aid: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n AdPreviewLibrarySearchMMA: PropTypes.bool,\r\n CopilotCTALogoGeneration: PropTypes.bool,\r\n }),\r\n IsBackgroundSceneEnabled: PropTypes.bool,\r\n }).isRequired,\r\n genericImage: PropTypes.string.isRequired,\r\n viewContext: PropTypes.shape({\r\n currentCampaign: PropTypes.shape({\r\n Id: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n showAllValidationErrors: PropTypes.bool.isRequired,\r\n showUnmappedFormErrors: PropTypes.bool,\r\n triggerTestUurl: PropTypes.func.isRequired,\r\n adId: PropTypes.number,\r\n newI18n: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nCopilotSearchMMAEditorContainerInternal.defaultProps = {\r\n showUnmappedFormErrors: true,\r\n adId: null,\r\n};\r\n\r\nexport const CopilotSearchMMAEditorContainer = withScope(CopilotSearchMMAEditorContainerInternal);\r\n","import _ from 'underscore';\r\nimport { useState, useEffect } from 'react';\r\nimport edmCampaign from '@bingads-webui-component-legacy/edm-campaign/index';\r\nimport jsdata from '@bingads-webui-component-legacy/js-data-campaign/index';\r\n\r\nexport const useAutomatedCTA = ({ isMMAAutomatedCTAOptInEnabled, campaignId }) => {\r\n const [automatedCTAEnable, setAutomatedCTAEnable] = useState(false);\r\n\r\n useEffect(() => {\r\n if (isMMAAutomatedCTAOptInEnabled && jsdata.Campaign && campaignId && edmCampaign.currentAccount) {\r\n const params = {\r\n queryParameters: {\r\n entitySet: edmCampaign.currentAccount.Campaigns,\r\n },\r\n bypassCache: true,\r\n };\r\n jsdata.Campaign.find(campaignId, params).then((data) => {\r\n const campaignSettings = data.CampaignSettings;\r\n const callToActionSetting = campaignSettings && _.find(campaignSettings, setting => setting['@odata.type'] === '#Model.CallToActionSetting');\r\n setAutomatedCTAEnable(!callToActionSetting || !callToActionSetting.AutomatedCallToActionOptOut);\r\n });\r\n }\r\n }, [campaignId, isMMAAutomatedCTAOptInEnabled]);\r\n\r\n return automatedCTAEnable;\r\n};\r\n","import { useContext } from 'react';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { initializeAdCustomizer } from '@bingads-webui-campaign/ad-customizers-next';\r\nimport config from '@bingads-webui-component-legacy/config/index';\r\nimport edmCampaign from '@bingads-webui-component-legacy/edm-campaign/index';\r\nimport jsDataCampaign from '@bingads-webui-component-legacy/js-data-campaign/index';\r\n\r\nexport const useInitAdCustomizer = ({ viewContext, permissions, i18n }) => {\r\n const instrumentation = useContext(InstrumentationContext);\r\n const campaignId = viewContext.currentCampaign && viewContext.currentCampaign.Id;\r\n const adGroupId = viewContext.currentAdGroup && viewContext.currentAdGroup.Id;\r\n\r\n initializeAdCustomizer({\r\n deps: {\r\n i18n,\r\n config,\r\n instrumentation,\r\n permissions,\r\n edmCampaign,\r\n jsDataCampaign,\r\n timeZone: config.get('AccountTimeZone'),\r\n scope: {\r\n campaignId: Number(campaignId),\r\n adGroupId: Number(adGroupId),\r\n },\r\n showAdCustomizers: true,\r\n IsRSAIffPopupEnabledFromDeps: false,\r\n },\r\n adType: 'ResponsiveAd',\r\n });\r\n};\r\n","import React, { useContext, useMemo, useState, useCallback, useImperativeHandle, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { ImageOData } from '@bingads-webui-campaign/image-odata';\r\nimport { convertFromAdModel, processViewModelDataForSaving } from '@bingads-webui-campaign-react/responsive-ad-editor-utils';\r\nimport { withRecommendationContext, RecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { withBannerService } from '@bingads-webui/inline-copilot';\r\nimport { testUurl, uurlLevels } from '@bingads-webui-component-legacy/upgraded-url/service/testUurl';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { CopilotSearchMMAEditorContainer } from './copilot-search-mma-editor-container';\r\nimport { mapBulkUpsertErrors } from './utils/errors-util';\r\nimport { useAppliedLog } from './useAppliedLog';\r\n\r\nconst emptyRecommendationData = {\r\n Images: {\r\n ImageList: [],\r\n ImageAssets: null,\r\n },\r\n Headlines: {\r\n Headline0: '',\r\n Headline1: '',\r\n Headline2: '',\r\n },\r\n LongHeadlines: {\r\n LongHeadline0: '',\r\n },\r\n Descriptions: {\r\n Description0: '',\r\n Description1: '',\r\n },\r\n};\r\n\r\nconst emptyData = {\r\n ...emptyRecommendationData,\r\n BusinessName: undefined,\r\n FinalUrls: [],\r\n MobileFinalUrls: [],\r\n TrackingUrlTemplate: undefined,\r\n UrlCustomParameters: undefined,\r\n FinalUrlSuffix: undefined,\r\n};\r\n\r\nconst CopilotSearchMMAEditorInternal = ({\r\n responsiveAdRepository,\r\n genericImage,\r\n viewContext,\r\n ad,\r\n onChanged,\r\n perfMarker,\r\n oDataConfig,\r\n permissions,\r\n editorRef,\r\n newI18n,\r\n externalErrors,\r\n showAllValidationErrors,\r\n showUnmappedFormErrors,\r\n}) => {\r\n const { scope } = useContext(ScopeContext);\r\n const { cid, aid, uid } = scope.values || {};\r\n const i18n = useContext(I18nContext);\r\n const [data, setData] = useState(() => (ad ? convertFromAdModel(ad) : {}));\r\n const [isDataValid, setIsDataValid] = useState(false);\r\n const [errors, setErrors] = useState(ad ? (ad.errors || []) : []);\r\n const [blocking, setBlocking] = useState(false);\r\n const imageOData = useMemo(() => new ImageOData(cid, aid, oDataConfig), [cid, aid, oDataConfig]);\r\n const [saveFailed, setSaveFailed] = useState(false);\r\n const [, setRecommendationContext] = useContext(RecommendationContext);\r\n const campaignId = viewContext.currentCampaign && viewContext.currentCampaign.Id;\r\n const adgroupId = viewContext.currentAdGroup && viewContext.currentAdGroup.Id;\r\n const { logAppliedSuggestion } = useAppliedLog({ campaignId });\r\n const activityContext = useContext(ActivityContext);\r\n const log = activityContext.signal;\r\n\r\n const clearAllErrors = useCallback(() => {\r\n setErrors([]);\r\n }, []);\r\n\r\n const onDataChange = useCallback(({ data: newData, isValid }) => {\r\n setData(newData);\r\n setIsDataValid(isValid);\r\n onChanged(newData, isValid);\r\n }, [onChanged]);\r\n\r\n const onReset = useCallback((clearAll) => {\r\n const dataPatch = {\r\n data: {\r\n ...data,\r\n ...(clearAll ? emptyData : emptyRecommendationData),\r\n },\r\n isValid: false,\r\n };\r\n\r\n onDataChange(dataPatch);\r\n }, [data, onDataChange]);\r\n\r\n useImperativeHandle(editorRef, () => ({\r\n saveAdAsync: () => {\r\n if (isDataValid) {\r\n setSaveFailed(false);\r\n setBlocking(true);\r\n clearAllErrors();\r\n\r\n const adData = processViewModelDataForSaving(data, campaignId, adgroupId, ad && ad.isSaved !== false && ad.Id);\r\n\r\n return responsiveAdRepository.processImageAndSaveSearchAdAsync(adData, imageOData, false)\r\n .then((responseData) => {\r\n if (responseData) {\r\n const descriptions = JSON.parse(responseData.Descriptions); // empty?\r\n const headlines = JSON.parse(responseData.Headlines);\r\n const longHeadlines = JSON.parse(responseData.LongHeadlines);\r\n logAppliedSuggestion({\r\n assetData: {\r\n Descriptions: _.pluck(descriptions, 'Text'),\r\n Headlines: _.pluck(headlines, 'Text'),\r\n LongHeadlines: _.pluck(longHeadlines, 'Text'),\r\n Images: {\r\n ImageList: responseData.ImageList,\r\n },\r\n FinalUrls: responseData.FinalUrls,\r\n Id: responseData.Id,\r\n },\r\n isEditing: !!adData.Id,\r\n });\r\n }\r\n return responseData;\r\n })\r\n .catch((response) => {\r\n setSaveFailed(true);\r\n if (response) {\r\n const resErrors = _.unique(response.errors, false, err => err.ErrorNumber);\r\n setErrors(mapBulkUpsertErrors({\r\n errors: resErrors, i18n, scenario: 'mmaSave',\r\n }));\r\n return false;\r\n }\r\n return false;\r\n }).finally(() => {\r\n setBlocking(false);\r\n });\r\n }\r\n setSaveFailed(true);\r\n return Promise.resolve(false);\r\n },\r\n saveToClient: () => {\r\n if (isDataValid) {\r\n clearAllErrors();\r\n const adData = processViewModelDataForSaving(data, campaignId, adgroupId, ad && ad.isSaved !== false && ad.Id);\r\n return responsiveAdRepository.processImageAndSaveToClientAsync(adData, imageOData, false);\r\n }\r\n setSaveFailed(true);\r\n return Promise.resolve(false);\r\n },\r\n hasCreatedAd: () => {\r\n },\r\n onCreateAd: () => {\r\n setRecommendationContext({\r\n themes: [],\r\n headlines: [],\r\n longHeadlines: [],\r\n descriptions: [],\r\n imageAssets: [],\r\n });\r\n onReset(true);\r\n },\r\n logAppliedSuggestion,\r\n // for recommendation\r\n // setResponseErrors: () => {\r\n // },\r\n // getData: () => {\r\n // },\r\n // getProcessedDataAsync: () => {\r\n // },\r\n // isDataValid: () => {\r\n // },\r\n // getFlattenedImageAssetList\r\n }));\r\n\r\n useEffect(() => () => {\r\n log(`new search mma editor url: ${data.FinalUrls}`);\r\n }, [data.FinalUrls, log]);\r\n\r\n const triggerTestUurl = useCallback((fn, originalView) => {\r\n originalView.isInline = false; // eslint-disable-line\r\n originalView.level = uurlLevels.Ad; // eslint-disable-line\r\n const params = data || {};\r\n const context = {\r\n customerId: +cid,\r\n userId: +uid,\r\n accountId: +aid,\r\n campaignId,\r\n adGroupId: adgroupId,\r\n entityId: (ad && ad.Id) || '',\r\n };\r\n const options = {\r\n apiInLog: 'responsive-ad-editor/uurlTest',\r\n };\r\n testUurl(fn, originalView, params, context, options);\r\n }, [ad, adgroupId, aid, cid, data, uid, campaignId]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {showUnmappedFormErrors && (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n { copilotBanner }\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\nBulkMMAConvertEditorHeader.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n selectedRowCount: PropTypes.number.isRequired,\r\n};\r\n","import classNames from 'classnames';\r\nimport React, { useContext, useMemo, useRef, useState, useCallback } from 'react';\r\nimport { noop } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Collapse,\r\n useCollapseState,\r\n collapseExpander,\r\n} from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport { ActuationGroup } from '@bingads-webui-campaign-react/actuator';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { /* ResponsiveAd, */ AssetGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { ValidatedLegacyCallToActionWithLanguageSection } from '@bingads-webui-campaign-react/legacy-call-to-action';\r\nimport { FormErrorGroup, UnmappedFormErrors } from '@bingads-webui-campaign-react/form-error';\r\nimport {\r\n ValidatedBusinessNameWithRecommendationSection,\r\n} from '@bingads-webui-campaign-react/pmax-text-input';\r\nimport {\r\n ImageListPortalContainerSection,\r\n LogoListPortalContainerSection,\r\n} from '@bingads-webui-campaign-react/pmax-image-experience';\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { AdStatusSection } from '@bingads-webui-campaign-react/ad-status';\r\n\r\nimport { getBulkMMAEditorStyles } from './bulk-mma-convert-editor-style';\r\nimport { SearchMMAAdPreview } from '../search-mma-ad-preview';\r\nimport { errorMapper } from '../utils/errors-util';\r\nimport { ImageExperienceWithSuggestionPollerForBulk } from './image-experience-with-suggestion-poller';\r\nimport { BulkMMAConvertEditorHeader } from './bulk-mma-convert-editor-header';\r\n\r\nconst entity = 'ResponsiveAd';\r\n\r\nexport const BulkMMAConvertEditorContainer = ({\r\n data,\r\n errors,\r\n onDataChange,\r\n perfMarker,\r\n permissions,\r\n viewContext,\r\n genericImage,\r\n showAllValidationErrors,\r\n oDataConfig,\r\n selectedRowCount,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const errorMapperWithI18n = useMemo(() => error => errorMapper(error, i18n), [i18n]);\r\n const campaignId = viewContext.currentCampaign && viewContext.currentCampaign.Id;\r\n const classes = useDefaultStyles(getBulkMMAEditorStyles);\r\n const [url, setUrl] = useState('');\r\n const businessName = data.BusinessName;\r\n const images = data.Images;\r\n const callToAction = data.CallToAction;\r\n const [ctaText, setCTAText] = useState(callToAction && callToAction.cta);\r\n\r\n const previewData = useMemo(() => ({\r\n shortHeadline: i18n.getString('Audience_Campaign_Ad_Preview_Default_ShortHeadline'),\r\n longHeadline: i18n.getString('Audience_Campaign_Ad_Preview_Default_LongHeadline'),\r\n description: i18n.getString('Audience_Campaign_Ad_Preview_Default_Description'),\r\n businessName: businessName || i18n.getString('Audience_Campaign_Ad_Preview_Default_BusinessName'),\r\n displayUrl: url,\r\n url: url || 'https://www.bing.com',\r\n callToAction: ctaText,\r\n }), [businessName, ctaText, i18n, url]);\r\n\r\n const [\r\n allAdSettingsSections,\r\n adSettingsExpandedSections,\r\n setAdSettingsExpandedSections,\r\n ] = useCollapseState(\r\n ['images', 'logos', 'business-name', 'call-to-action', 'ad-status'] /* all sections */,\r\n ['images', 'logos', 'business-name', 'call-to-action', 'ad-status'] /* initially expanded sections */\r\n );\r\n\r\n const imagesContainerRef = useRef(null);\r\n const logosContainerRef = useRef(null);\r\n const [imageExperiencePortalContainerState, setImageExperiencePortalContainerState] = useState({});\r\n const [previewImagesSharedState, setPreviewImagesSharedState] = useState({ previewImageId: null, cropImageObj: null });\r\n const [, setImageExperienceAddNewImageCallback] = useState(noop);\r\n\r\n const allAssetsExpand = useMemo(\r\n () => collapseExpander({ setActiveKeys: setAdSettingsExpandedSections }),\r\n [setAdSettingsExpandedSections]\r\n );\r\n\r\n const onCallActionLanguageChange = useCallback((updates) => {\r\n setCTAText(updates.ctaText);\r\n }, []);\r\n\r\n return (\r\n {i18n.getString(_TL_('Copy responsive search ads to Multimedia ads ({{count}} ads selected)'), { count: selectedRowCount })}
\r\n {i18n.getString(_TL_('Your existing responsive search ads will continue to serve after you copy them to Multimedia ads.'))}
\r\n \r\n
\r\n );\r\n};\r\n\r\nBulkMMAConvertEditorContainer.propTypes = {\r\n data: PropTypes.shape({\r\n FinalUrls: PropTypes.string,\r\n MobileFinalUrls: PropTypes.string,\r\n BusinessName: PropTypes.string,\r\n Headlines: PropTypes.arrayOf(PropTypes.string),\r\n LongHeadlines: PropTypes.arrayOf(PropTypes.string),\r\n Descriptions: PropTypes.arrayOf(PropTypes.string),\r\n Images: PropTypes.shape({\r\n ImageList: PropTypes.arrayOf(PropTypes.shape({})),\r\n }),\r\n TrackingUrlTemplate: PropTypes.string,\r\n FinalUrlSuffix: PropTypes.string,\r\n UrlCustomParameters: PropTypes.string,\r\n FinalUrlForRecommendation: PropTypes.string,\r\n CallToAction: PropTypes.shape({\r\n cta: PropTypes.string,\r\n language: PropTypes.string,\r\n }),\r\n AdStatus: PropTypes.string,\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n errors: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n perfMarker: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n AdPreviewLibrarySearchMMA: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n genericImage: PropTypes.string.isRequired,\r\n viewContext: PropTypes.shape({\r\n currentCampaign: PropTypes.shape({\r\n Id: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n showAllValidationErrors: PropTypes.bool.isRequired,\r\n oDataConfig: PropTypes.shape({\r\n odataRootUrl: PropTypes.string,\r\n odataPath: PropTypes.string,\r\n odataToken: PropTypes.string,\r\n }).isRequired,\r\n selectedRowCount: PropTypes.number.isRequired,\r\n};\r\n\r\nBulkMMAConvertEditorContainer.defaultProps = {\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button } from '@bingads-webui-react/primitive';\r\n\r\nexport const BulkMMAConvertEditorFooter = ({\r\n i18n,\r\n showSave,\r\n onSave,\r\n onClose,\r\n}) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {showSave &&\r\n \r\n {i18n.getString('Audience_Campaign_Ad_Save')}\r\n \r\n }\r\n \r\n {i18n.getString('Audience_Campaign_Cancel_Label')}\r\n \r\n
\r\n);\r\n\r\nBulkMMAConvertEditorFooter.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showSave: PropTypes.bool.isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n};\r\n","import React, { useMemo, } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\n\r\nconst noTranslateModel = { noTranslate: text => ({text}) };\r\n\r\nexport const BulkMMAConvertProgress = ({\r\n onHide, i18n, show, totalCount, completeCount,\r\n}) => {\r\n const completePercentage = useMemo(() => {\r\n const total = totalCount;\r\n if (total === 0) {\r\n return '1%';\r\n }\r\n\r\n const completed = Math.floor((completeCount * 100) / total);\r\n return completed < 1 ? `${completed + 1}%` : `${completed}%`;\r\n }, [completeCount, totalCount]);\r\n\r\n if (!show) {\r\n return null;\r\n }\r\n\r\n const messageTemplate = i18n.getString(_TL_('You can see a summary of your changes on the {{noTranslate}}Bulk Edits{{/noTranslate}} page.'));\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nBulkMMAConvertProgress.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onHide: PropTypes.func.isRequired,\r\n totalCount: PropTypes.number.isRequired,\r\n completeCount: PropTypes.number.isRequired,\r\n show: PropTypes.bool.isRequired,\r\n};\r\n\r\nBulkMMAConvertProgress.defaultProps = {\r\n};\r\n","/* eslint-disable no-script-url */\r\nimport React, { useMemo, useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const BulkMMAConvertError = ({\r\n show, inlineErrors, i18n, errorCount,\r\n}) => {\r\n const [showErrorGrid, setShowErrorGrid] = useState(false);\r\n const errorCountString = i18n.getString('BulkEdit_InlineError_ErrorCount').replace('{0}', errorCount);\r\n const errorCountLinkText = useMemo(() => {\r\n if (showErrorGrid) {\r\n return i18n.getString('BulkEdit_InlineError_HideErrorLink');\r\n }\r\n return i18n.getString('BulkEdit_InlineError_ErrorLink').replace('{0}', errorCount);\r\n }, [errorCount, i18n, showErrorGrid]);\r\n const errorsGrids = useMemo(() => [i18n.getString(_TL_('Ad')), i18n.getString(_TL_('Error'))], [i18n]);\r\n\r\n const onToggleErrorGrid = useCallback(() => {\r\n setShowErrorGrid(!showErrorGrid);\r\n }, [showErrorGrid]);\r\n\r\n if (!show) {\r\n return null;\r\n }\r\n\r\n return (\r\n {i18n.getString('BulkEdit_InitialStatus')}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {showErrorGrid && (\r\n
\r\n );\r\n};\r\n\r\nBulkMMAConvertError.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n errorCount: PropTypes.number.isRequired,\r\n show: PropTypes.bool.isRequired,\r\n inlineErrors: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string,\r\n error: PropTypes.string,\r\n })).isRequired,\r\n};\r\n\r\nBulkMMAConvertError.defaultProps = {\r\n};\r\n","import React, { useContext, useMemo, useState, useCallback } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { MessageBar, MessageBarType } from '@bingads-webui-react/fabric-control';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { ImageOData } from '@bingads-webui-campaign/image-odata';\r\nimport { processImageListViewModelToModel } from '@bingads-webui-campaign-react/responsive-ad-editor-utils';\r\nimport { withRecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { bulkEditChange } from '@bingads-webui-campaign-legacy/bulk-edit/service/bulk-edit';\r\nimport { BulkMMAConvertEditorContainer } from './bulk-mma-convert-editor-container';\r\nimport { mapBulkUpsertErrors } from '../utils/errors-util';\r\nimport { BulkMMAConvertEditorFooter } from './bulk-mma-convert-editor-footer';\r\nimport { BulkMMAConvertProgress } from './bulk-mma-convert-progress';\r\nimport { BulkMMAConvertError } from './bulk-mma-convert-error';\r\nimport { getJobResults } from './repository';\r\nimport { getBulkEditParams, processViewModelDataForSaving } from './data-util';\r\n\r\nconst BulkMMAConvertEditorInternal = ({\r\n genericImage,\r\n viewContext,\r\n onAdSaved,\r\n onClose,\r\n perfMarker,\r\n oDataConfig,\r\n permissions,\r\n odata,\r\n allPages,\r\n selectedItems,\r\n filterService,\r\n selectedRowCount,\r\n}) => {\r\n const { scope } = useContext(ScopeContext);\r\n const { cid, aid } = scope.values || {};\r\n const i18n = useContext(I18nContext);\r\n const [data, setData] = useState({});\r\n const [isDataValid, setIsDataValid] = useState(true);\r\n const [errors, setErrors] = useState([]);\r\n const [blocking, setBlocking] = useState(false);\r\n const imageOData = useMemo(() => new ImageOData(cid, aid, oDataConfig), [cid, aid, oDataConfig]);\r\n const [saveFailed, setSaveFailed] = useState(false);\r\n const [isUnSaved, setUnSaved] = useState(false);\r\n const [showProgress, setShowProgress] = useState(false);\r\n const [bulkSuccessCount, setBulkSuccessCount] = useState(0);\r\n const [bulkErrorCount, setBulkErrorCount] = useState(0);\r\n const [bulkTotalCount, setBulkTotalCount] = useState(0);\r\n const [bulkInlineErrors, setBulkInlineErrors] = useState([]);\r\n const [bulkFailed, setBulkFailed] = useState(false);\r\n const [showBulkPartialError, setShowBulkPartialError] = useState(false);\r\n const [genericErrorMessages, setGenericErrorMessages] = useState([]);\r\n\r\n const clearAllErrors = useCallback(() => {\r\n setErrors([]);\r\n }, []);\r\n\r\n const onDataChange = useCallback(({ data: newData, isValid }) => {\r\n setData(newData);\r\n setIsDataValid(isValid);\r\n }, []);\r\n\r\n const onProgess = useCallback(() => {\r\n setShowProgress(true);\r\n }, []);\r\n\r\n const onHideProgress = useCallback(() => {\r\n setShowProgress(false);\r\n onClose();\r\n }, [onClose]);\r\n\r\n const onSave = useCallback(() => {\r\n if (isDataValid) {\r\n setSaveFailed(false);\r\n setBlocking(true);\r\n clearAllErrors();\r\n const adData = processViewModelDataForSaving(data);\r\n return processImageListViewModelToModel(adData.Images.ImageList, imageOData)\r\n .then((result) => {\r\n const {\r\n mtModel,\r\n } = result;\r\n\r\n const params = _.defaults(mtModel, adData);\r\n const bulkParams = getBulkEditParams(params, { allPages, selectedItems, filterService });\r\n return bulkEditChange({\r\n params: bulkParams,\r\n progressCB: onProgess,\r\n completeCB: (response) => {\r\n setShowProgress(false);\r\n setBlocking(false);\r\n if (response.Status === 'CompletedWithErrors') {\r\n setShowBulkPartialError(true);\r\n setBulkSuccessCount(response.SuccessRowCount);\r\n setBulkTotalCount(response.TotalRowCount);\r\n setBulkErrorCount(response.ErrorRowCount);\r\n setUnSaved(true);\r\n setBulkFailed(true);\r\n getJobResults(response.Id, 'errors', 0, 100, 'Ad', odata)\r\n .done((jobResponse) => {\r\n if (jobResponse && jobResponse.value) {\r\n const err = jobResponse.value.map((errorObject) => {\r\n const errorKey = errorObject.Errors[0];\r\n const entityName = errorObject.EntityKey[0].Value;\r\n\r\n return {\r\n error: i18n.getString(`Error_Campaign_API_${errorKey}`),\r\n name: entityName,\r\n };\r\n });\r\n\r\n setBulkInlineErrors(err);\r\n }\r\n });\r\n } else if (response.Status === 'Completed') {\r\n onAdSaved();\r\n }\r\n return response;\r\n },\r\n failedCB: (e) => {\r\n // mma bulk conversion failed\r\n setUnSaved(true);\r\n setBulkFailed(true);\r\n const errorMes = e.errors.map(error => JSON.stringify(error));\r\n setGenericErrorMessages(errorMes);\r\n },\r\n })\r\n .finally(() => { setBlocking(false); });\r\n })\r\n .catch((response) => {\r\n // mma bulk get params failed\r\n setSaveFailed(true);\r\n if (response) {\r\n const resErrors = _.unique(response.errors, false, err => err.ErrorNumber);\r\n setErrors(mapBulkUpsertErrors({\r\n errors: resErrors, i18n, scenario: 'mmaSave',\r\n }));\r\n return false;\r\n }\r\n return false;\r\n })\r\n .finally(() => { setBlocking(false); });\r\n }\r\n setSaveFailed(true);\r\n return Promise.resolve(false);\r\n }, [allPages, clearAllErrors, data, filterService, i18n, imageOData, isDataValid, odata, onAdSaved, onProgess, selectedItems]);\r\n\r\n return (\r\n {errorCountString}
\r\n {errorCountLinkText}\r\n \r\n {showErrorGrid && (\r\n
\r\n \r\n \r\n
\r\n
\r\n )}\r\n | \r\n \r\n {item}\r\n \r\n | \r\n ))}\r\n |
|---|---|
| \r\n {item.name} \r\n | \r\n \r\n {item.error} \r\n | \r\n
\r\n {\r\n genericErrorMessages.map((errMsg, index) => (\r\n
\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nPlaceholderMMAEditor.propTypes = {\r\n responsiveAdRepository: PropTypes.shape({\r\n savePlaceholderMMA: PropTypes.func.isRequired,\r\n }).isRequired,\r\n pageContext: PropTypes.shape({\r\n CurrentCustomer: PropTypes.shape({\r\n Id: PropTypes.number,\r\n }),\r\n CurrentAccount: PropTypes.shape({\r\n Id: PropTypes.number,\r\n }),\r\n }).isRequired,\r\n editorRef: PropTypes.shape({\r\n current: PropTypes.shape({}),\r\n }).isRequired,\r\n};\r\n","import React, { useContext, useMemo, useCallback, useEffect } from 'react';\r\nimport _, { get } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { getAutoCroppedImages, UnifiedPreviewCarousel, PreviewCarousel, getDefaultCurrentSelectedImageId, getImageListWithoutLogo } from '@bingads-webui-campaign-react/image-experience';\r\n\r\nimport { getUnifiedAdPreviewConfig } from './get-unified-ad-preview-config';\r\n\r\nconst findImageSetById = (imageList, baseImageId) => {\r\n if (!baseImageId) return false;\r\n\r\n const imageSetToEdit = _.find(imageList, placements => placements[0].BaseId.toString() === baseImageId.toString());\r\n return imageSetToEdit;\r\n};\r\n\r\nconst setImageSetById = (imageList, baseImageId, newImageSet) => {\r\n if (!baseImageId) return false;\r\n\r\n const imageSetIdx = _.findIndex(imageList, placements =>\r\n placements[0].BaseId.toString() === baseImageId.toString());\r\n\r\n if (imageSetIdx >= 0) {\r\n const newImageList = [...imageList];\r\n newImageList.splice(imageSetIdx, 1, newImageSet);\r\n return newImageList;\r\n }\r\n return [...imageList, newImageSet];\r\n};\r\n\r\nexport const SearchMMAAdPreview = ({\r\n data,\r\n onDataChange,\r\n permissions,\r\n genericImage,\r\n previewTexts,\r\n previewImagesSharedState,\r\n setPreviewImagesSharedState,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const instrumentation = useContext(InstrumentationContext);\r\n const enableAdPreviewLibrary = get(permissions.dynamic, 'AdPreviewLibrarySearchMMA', false);\r\n const imageList = data.Images && data.Images.ImageList;\r\n\r\n const onCropImage = useCallback((cropImageObj) => {\r\n setPreviewImagesSharedState({ ...previewImagesSharedState, cropImageObj });\r\n // autorotate=false\r\n }, [previewImagesSharedState, setPreviewImagesSharedState]);\r\n\r\n\r\n const { previewImageId } = previewImagesSharedState;\r\n\r\n useEffect(() => {\r\n if (!previewImageId && imageList && imageList.length > 0) {\r\n const firstImageId = getDefaultCurrentSelectedImageId(imageList);\r\n if (firstImageId) {\r\n setPreviewImagesSharedState({ ...previewImagesSharedState, previewImageId: firstImageId });\r\n }\r\n }\r\n }, [imageList, previewImageId, previewImagesSharedState, setPreviewImagesSharedState]);\r\n\r\n const onAddAspectRatio = useCallback((imageType) => {\r\n // We don't support logo in ad preview, so we need to filter out logo images\r\n const imageListWithoutLogo = getImageListWithoutLogo(imageList);\r\n const previewImages = findImageSetById(imageListWithoutLogo, previewImageId);\r\n\r\n let newPreviewImages = null;\r\n const targetedRatioIdx = _.findIndex(previewImages, image => image.type === imageType);\r\n if (targetedRatioIdx >= 0) {\r\n const targetedRatio = previewImages[targetedRatioIdx].clone();\r\n targetedRatio.setIncluded(true);\r\n newPreviewImages = [...previewImages];\r\n newPreviewImages.splice(targetedRatioIdx, 1, targetedRatio);\r\n } else {\r\n // for image added before partial aspect ratio is supported, may missed some ratio info\r\n const croppedImages = getAutoCroppedImages({\r\n originalImageToCrop: _.first(previewImages),\r\n isMultimediaAd: true,\r\n isMultimediaAdinMSANEnabled: false,\r\n });\r\n const target = _.find(croppedImages, image => image.type === imageType);\r\n target.isIncluded = true;\r\n newPreviewImages = [...previewImages, target];\r\n newPreviewImages.sort((a, b) => b.aspectRatio - a.aspectRatio);\r\n }\r\n\r\n const newImageList = setImageSetById(imageList, previewImageId, newPreviewImages);\r\n onDataChange({\r\n data: {\r\n ...data,\r\n Images: {\r\n ...data.Images,\r\n ImageList: newImageList,\r\n },\r\n },\r\n });\r\n return newImageList;\r\n }, [data, imageList, onDataChange, previewImageId]);\r\n\r\n const onRemoveAspectRatio = (imageType) => {\r\n const imageListWithoutLogo = getImageListWithoutLogo(imageList);\r\n const previewImages = findImageSetById(imageListWithoutLogo, previewImageId);\r\n\r\n const targetedRatioIdx = _.findIndex(previewImages, image => image.type === imageType);\r\n if (targetedRatioIdx >= 0) {\r\n const targetedRatio = previewImages[targetedRatioIdx].clone();\r\n targetedRatio.setIncluded(false);\r\n const newPreviewImages = [...previewImages];\r\n newPreviewImages.splice(targetedRatioIdx, 1, targetedRatio);\r\n const newImageList = setImageSetById(imageList, previewImageId, newPreviewImages);\r\n onDataChange({\r\n data: {\r\n ...data,\r\n Images: {\r\n ...data.Images,\r\n ImageList: newImageList,\r\n },\r\n },\r\n });\r\n return newImageList;\r\n }\r\n return imageList;\r\n };\r\n\r\n const PreviewCarouselComponent = enableAdPreviewLibrary ? UnifiedPreviewCarousel : PreviewCarousel;\r\n const adPreviewConfig = getUnifiedAdPreviewConfig({ isMultimediaAd: true });\r\n\r\n const imagesForPreview = useMemo(() => {\r\n const imageListWithoutLogo = getImageListWithoutLogo(imageList);\r\n\r\n if (previewImageId) {\r\n const previewImages = findImageSetById(imageListWithoutLogo, previewImageId);\r\n\r\n if (previewImages) {\r\n return previewImages;\r\n }\r\n }\r\n\r\n if (imageListWithoutLogo.length > 0) {\r\n return _.first(imageListWithoutLogo);\r\n }\r\n\r\n return [];\r\n }, [imageList, previewImageId]);\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n errors.map((errMsg, index) => (\r\n
\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n