\r\n {yAxisCalloutData}\r\n
\r\n );\r\n }}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nReachEstimate.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n estimationData: PropTypes.shape({\r\n EstAudienceSize: PropTypes.number.isRequired,\r\n EstImpression: PropTypes.number.isRequired,\r\n }).isRequired,\r\n isLoading: PropTypes.bool.isRequired,\r\n pricingModel: PropTypes.string.isRequired,\r\n isImpressionTooSpecific: PropTypes.bool.isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n field: PropTypes.string.isRequired,\r\n }).isRequired,\r\n isCampaignCreationPlannerIntegrationEnabled: PropTypes.bool,\r\n showImpressions: PropTypes.bool,\r\n privacyResult: PropTypes.string.isRequired,\r\n hasAudienceRemarketingList: PropTypes.bool.isRequired,\r\n showBreakdown: PropTypes.bool,\r\n isAudienceAdGroupEdit: PropTypes.bool.isRequired,\r\n audienceSize: PropTypes.shape({\r\n EstAudienceSize: PropTypes.shape({\r\n Value: PropTypes.number,\r\n Unit: PropTypes.string,\r\n }),\r\n }),\r\n ageOnlyEstimation: PropTypes.shape({}),\r\n genderOnlyEstimation: PropTypes.shape({}),\r\n locationOnlyEstimation: PropTypes.shape({}),\r\n audienceOnlyEstimation: PropTypes.shape({}),\r\n interestOnlyEstimation: PropTypes.shape({}),\r\n};\r\n\r\nReachEstimate.defaultProps = {\r\n isCampaignCreationPlannerIntegrationEnabled: false,\r\n showImpressions: true,\r\n audienceSize: null,\r\n ageOnlyEstimation: null,\r\n genderOnlyEstimation: null,\r\n locationOnlyEstimation: null,\r\n audienceOnlyEstimation: null,\r\n interestOnlyEstimation: null,\r\n showBreakdown: false,\r\n};\r\n\r\nconst validatedReachEstimate = withCustomValidation(ReachEstimate);\r\n\r\nexport { validatedReachEstimate as ReachEstimate };\r\n","import { CampaignSubTypeMapping, isXandrDisplayAdsCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport {\r\n BidStrategyToDevices,\r\n AgeRangesCampaignToAdInsight,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport timeZoneMapper from '@bingads-webui-component-legacy/timezonemapper/index';\r\n\r\nconst getLocationIds = ({ adGroup, bundleCountries }) => {\r\n const { locationTargets } = adGroup || {};\r\n if (locationTargets && locationTargets.currentLevelSettings) {\r\n const { targetOption, currentLocations } = locationTargets.currentLevelSettings;\r\n\r\n if (targetOption === 'bundle' && bundleCountries && bundleCountries.length > 0) {\r\n return bundleCountries.map(c => c.LocationId);\r\n }\r\n\r\n if (targetOption === 'specific' && currentLocations && currentLocations.length > 0) {\r\n return currentLocations.reduce((locationIds, cl) => {\r\n if (cl.SelectionStatus === 'Included' && cl.CriterionType !== 'Radius') {\r\n locationIds.push(cl.Criterion.LocationCriterion.LocationId);\r\n }\r\n return locationIds;\r\n }, []);\r\n }\r\n\r\n return [];\r\n }\r\n\r\n return [];\r\n};\r\n\r\nconst getRadiusCriterions = ({ adGroup }) => {\r\n const { locationTargets } = adGroup || {};\r\n if (locationTargets && locationTargets.currentLevelSettings) {\r\n const { currentLocations } = locationTargets.currentLevelSettings;\r\n\r\n if (currentLocations && currentLocations.length > 0) {\r\n return currentLocations.reduce((radiusTargets, cl) => {\r\n if (cl.CriterionType === 'Radius') {\r\n radiusTargets.push({\r\n CenterLatitude: cl.Criterion.RadiusCriterion.Latitude,\r\n CenterLongitude: cl.Criterion.RadiusCriterion.Longitude,\r\n Radius: cl.Criterion.RadiusCriterion.Radius,\r\n });\r\n }\r\n return radiusTargets;\r\n }, []);\r\n }\r\n\r\n return [];\r\n }\r\n\r\n return [];\r\n};\r\n\r\nconst getExcludedLocationIds = ({ adGroup }) => {\r\n const { locationTargets } = adGroup || {};\r\n if (locationTargets && locationTargets.currentLevelSettings) {\r\n const { targetOption, currentLocations } = locationTargets.currentLevelSettings;\r\n\r\n if (targetOption === 'specific' && currentLocations && currentLocations.length > 0) {\r\n return currentLocations.reduce((locationIds, cl) => {\r\n if (cl.SelectionStatus === 'Excluded' && cl.CriterionType !== 'Radius') {\r\n locationIds.push(cl.Criterion.LocationCriterion.LocationId);\r\n }\r\n return locationIds;\r\n }, []);\r\n }\r\n\r\n return [];\r\n }\r\n\r\n return [];\r\n};\r\n\r\nconst getAudienceCriterionIds = ({ adGroup, key, status }) => {\r\n if (adGroup && Array.isArray(adGroup[key])) {\r\n return adGroup[key].reduce((audienceIds, audience) => {\r\n if (audience.Status === status) {\r\n audienceIds.push(audience.Criterion.AudienceId);\r\n }\r\n return audienceIds;\r\n }, []);\r\n }\r\n return [];\r\n};\r\n\r\nexport const getInterestIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'interests', status: 'Active' });\r\n\r\nexport const getExcludedInterestIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'interests', status: 'Excluded' });\r\n\r\nexport const getOtherAudienceIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'audiences', status: 'Active' });\r\n\r\nexport const getExcludedOtherAudienceIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'audiences', status: 'Excluded' });\r\n\r\nexport const getAudienceIds = ({ adGroup }) => [...getInterestIds({ adGroup }), ...getOtherAudienceIds({ adGroup })];\r\n\r\nexport const getExcludedAudienceIds = ({ adGroup }) => [...getExcludedInterestIds({ adGroup }), ...getExcludedOtherAudienceIds({ adGroup })];\r\n\r\nconst getAgeRanges = ({ adGroup }) => adGroup.ageRanges && adGroup.ageRanges.map(ar => AgeRangesCampaignToAdInsight[ar]);\r\n\r\nconst getDevices = ({ adGroup, campaignBiddingScheme }) => {\r\n if (adGroup.dealDetails) {\r\n return adGroup.deviceTypes;\r\n }\r\n\r\n return BidStrategyToDevices[campaignBiddingScheme.Type];\r\n};\r\n\r\nconst getAdSchedule = ({ adGroup }) => {\r\n if (adGroup && adGroup.adSchedulesBulkUpsert && adGroup.adSchedulesBulkUpsert.length > 0) {\r\n return adGroup.adSchedulesBulkUpsert.map((a) => {\r\n const { Day, FromHour, ToHour } = a.Criterion.DayTimeCriterion;\r\n return {\r\n Day,\r\n StartHour: FromHour,\r\n EndHour: ToHour,\r\n };\r\n });\r\n }\r\n return [];\r\n};\r\n\r\nexport const formatReachEstimateData = ({\r\n adGroup,\r\n campaignSubtype,\r\n campaignBiddingScheme,\r\n bundleCountries,\r\n}) => {\r\n const reachEstimationTargets = {\r\n Age: {\r\n Includes: getAgeRanges({ adGroup }),\r\n },\r\n Gender: {\r\n Includes: adGroup.genderTypes,\r\n },\r\n Device: {\r\n Includes: getDevices({ adGroup, campaignBiddingScheme }),\r\n },\r\n Location: {\r\n Includes: getLocationIds({ adGroup, bundleCountries }),\r\n Excludes: getExcludedLocationIds({ adGroup }),\r\n },\r\n RadiusTargets: getRadiusCriterions({ adGroup }),\r\n Audience: {\r\n Includes: getAudienceIds({ adGroup }),\r\n Excludes: getExcludedAudienceIds({ adGroup }),\r\n },\r\n Day: getAdSchedule({ adGroup }),\r\n TimeZone: timeZoneMapper.getAccountIANATimeZone(),\r\n CampaignSubType: isXandrDisplayAdsCampaign(campaignSubtype) ? CampaignSubTypeMapping.DisplayAds : CampaignSubTypeMapping.BrandAwarenessVideoAds,\r\n };\r\n\r\n return reachEstimationTargets;\r\n};\r\n\r\nexport const areCriterionTargetsSet = (targets, negativeTargets) => (targets && targets.length > 0) || (negativeTargets && negativeTargets.length > 0);\r\n\r\nconst isTargetSet = (targetSetting, isEditFlow) => !isEditFlow || targetSetting;\r\n\r\nexport const getTargetSettingsFromCriterions = (adGroupData, isEditFlow) => {\r\n // target settings are the non empty criterions\r\n const targetSettings = [];\r\n\r\n if (isTargetSet(adGroupData.isTargetSetCompanyName, isEditFlow) && areCriterionTargetsSet(adGroupData.companyNameTargets, adGroupData.negativeCompanyNameTargets)) {\r\n targetSettings.push('CompanyName');\r\n }\r\n\r\n if (isTargetSet(adGroupData.isTargetSetJobFunction, isEditFlow) && areCriterionTargetsSet(adGroupData.jobTargets, adGroupData.negativeJobTargets)) {\r\n targetSettings.push('JobFunction');\r\n }\r\n\r\n if (isTargetSet(adGroupData.isTargetSetIndustry, isEditFlow) && areCriterionTargetsSet(adGroupData.industry, adGroupData.negativeIndustry)) {\r\n targetSettings.push('Industry');\r\n }\r\n\r\n if (isTargetSet(adGroupData.isTargetSetAudience, isEditFlow) && (areCriterionTargetsSet(adGroupData.audiences, null) || areCriterionTargetsSet(adGroupData.interests, null))) {\r\n targetSettings.push('Audience');\r\n }\r\n\r\n // we always add age and gender, the user can either select all age/gender or select only some, it cannot be empty.\r\n targetSettings.push('Age');\r\n targetSettings.push('Gender');\r\n\r\n return targetSettings.length > 0 ? targetSettings.join(';') : 'delete_value';\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { PerformanceTile } from '@bingads-webui-campaign-react/performance-tile';\r\nimport { BidStrategy, CampaignSubTypeMapping } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { AgeRangesCampaignToAdInsight } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { useTargetingEstimationCaller } from './use-targeting-estimation-caller';\r\n// import { formatBigDecimal } from '../../../shared/helper/format-big-decimal';\r\nimport { getValueWithUnit } from '../../../shared/helper/scale-unit';\r\nimport { ReachEstimate } from './reach-estimate';\r\nimport { BiddingSchemeToBidType, BidTypes } from '../../../common/constants';\r\nimport { getAudienceIds, getExcludedAudienceIds, getInterestIds, getExcludedInterestIds, getOtherAudienceIds, getExcludedOtherAudienceIds } from '../utils';\r\n\r\nconst hasRemartketingList = audience => _.any(audience || [], audienceCriterion =>\r\n audienceCriterion.Criterion.AudienceType === 'Remessaging'\r\n || audienceCriterion.Criterion.AudienceType === 'Product'\r\n || audienceCriterion.Criterion.AudienceType === 'Custom'\r\n || audienceCriterion.Criterion.AudienceType === 'RemarketingSimilar');\r\n\r\nconst getTargetsFromAdgroupModel = (adGroup) => {\r\n const ageRage = _.map(adGroup.ageRanges || [], (age) => {\r\n if (_.isObject(age) && _.get(age, ['Criterion', 'AgeCriterion', 'Target'])) {\r\n return AgeRangesCampaignToAdInsight[_.get(age, ['Criterion', 'AgeCriterion', 'Target'])];\r\n }\r\n return AgeRangesCampaignToAdInsight[age];\r\n });\r\n\r\n const genderTypes = _.map(adGroup.genderTypes || [], (gender) => {\r\n if (_.isObject(gender) && _.get(gender, ['Criterion', 'GenderCriterion', 'Target'])) {\r\n return _.get(gender, ['Criterion', 'GenderCriterion', 'Target']);\r\n }\r\n return gender;\r\n });\r\n\r\n return {\r\n Age: {\r\n Includes: ageRage,\r\n Excludes: [],\r\n },\r\n Gender: {\r\n Includes: genderTypes,\r\n Excludes: [],\r\n },\r\n Location: {\r\n Includes: _.map(\r\n _.filter(_.get(adGroup, 'locationTargets.currentLevelSettings.currentLocations', []), location => location.SelectionStatus === 'Included' && location.CriterionType !== 'Radius'),\r\n location => (location.Criterion.LocationCriterion.LocationId)\r\n ),\r\n Excludes: _.map(\r\n _.filter(_.get(adGroup, 'locationTargets.currentLevelSettings.currentLocations', []), location => location.SelectionStatus === 'Excluded' && location.CriterionType !== 'Radius'),\r\n location => (location.Criterion.LocationCriterion.LocationId)\r\n ),\r\n },\r\n RadiusTargets: _.map(\r\n _.filter(_.get(adGroup, 'locationTargets.currentLevelSettings.currentLocations', []), location => location.CriterionType === 'Radius'),\r\n location => ({\r\n CenterLatitude: location.Criterion.RadiusCriterion.Latitude,\r\n CenterLongitude: location.Criterion.RadiusCriterion.Longitude,\r\n Radius: location.Criterion.RadiusCriterion.Radius,\r\n })\r\n ),\r\n Audience: {\r\n Includes: getAudienceIds({ adGroup }),\r\n Excludes: getExcludedAudienceIds({ adGroup }),\r\n },\r\n Company: {\r\n Includes: _.map(_.get(adGroup, 'companyNameTargets', []), company => company.Target),\r\n Excludes: _.map(_.get(adGroup, 'negativeCompanyNameTargets', []), company => company.Target),\r\n },\r\n Industry: {\r\n Includes: _.get(adGroup, 'industry', []),\r\n Excludes: _.get(adGroup, 'negativeIndustry', []),\r\n },\r\n JobFunction: {\r\n Includes: _.get(adGroup, 'jobTargets', []),\r\n Excludes: _.get(adGroup, 'negativeJobTargets', []),\r\n },\r\n };\r\n};\r\n\r\nconst getOtherParams = (adGroup, campaign) => ({\r\n AutoTargeting: adGroup.UseOptimizedTargeting,\r\n CampaignBiddingStrategy: (campaign && BidStrategy[campaign.BiddingScheme.Type]),\r\n CampaignSubType: adGroup ? CampaignSubTypeMapping[adGroup.CampaignSubType] : campaign.CampaignSubType,\r\n});\r\n\r\nexport const TargetingEstimation = ({\r\n data,\r\n isCampaignCreationPlannerIntegrationEnabled,\r\n isMultiAdFormatEnabled,\r\n showBreakdown,\r\n isAudienceAdGroupEdit,\r\n audienceUsePrivacyCheck,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n\r\n const { adGroup = {}, campaign = {} } = data || {};\r\n\r\n const hasAudienceRemarketingList = hasRemartketingList(adGroup.audiences || []);\r\n const otherParams = useMemo(() => getOtherParams(adGroup, campaign), [adGroup, campaign]);\r\n\r\n const [targetsForAudienceSizeEstimation, targetsForAudienceKPIEstimation] =\r\n useMemo(() => {\r\n const targetsForAudienceSize = { ...getTargetsFromAdgroupModel(adGroup), ...otherParams };\r\n\r\n const bidKeyToSend = BiddingSchemeToBidType[campaign.BiddingScheme.Type] || BidTypes.SearchBid;\r\n\r\n const bidValue = adGroup && adGroup[bidKeyToSend];\r\n\r\n const targetsForAudienceKPI =\r\n {\r\n ...getTargetsFromAdgroupModel(adGroup),\r\n Bid: Number(bidValue),\r\n DailyBudget: campaign && campaign.Budget && campaign.Budget.Amount,\r\n };\r\n\r\n return [targetsForAudienceSize, targetsForAudienceKPI];\r\n }, [adGroup, campaign, otherParams]);\r\n\r\n const interestOnlyTargets = useMemo(() => ({\r\n Audience: {\r\n Includes: getInterestIds({ adGroup }),\r\n Excludes: getExcludedInterestIds({ adGroup }),\r\n },\r\n ...otherParams,\r\n }), [adGroup, otherParams]);\r\n\r\n const otherAudienceOnlyTargets = useMemo(() => ({\r\n Audience: {\r\n Includes: getOtherAudienceIds({ adGroup }),\r\n Excludes: getExcludedOtherAudienceIds({ adGroup }),\r\n },\r\n ...otherParams,\r\n }), [adGroup, otherParams]);\r\n\r\n // AudienceStatic = 0,\r\n // AudienceVideoAds = 3,\r\n // DisplayAds = 5,\r\n const getCampaingSubTypes = types => _.map(types, (type) => {\r\n if (type === 'Display') return 5;\r\n if (type === 'Video') return 3;\r\n return 0;\r\n });\r\n\r\n const subTypes = _.map(data.adGroup.ads, ad => ad.adSubType);\r\n const campaignSubTypes = isMultiAdFormatEnabled ?\r\n getCampaingSubTypes(subTypes)\r\n : undefined;\r\n\r\n const [\r\n isRecommendationDataLoading,\r\n estimationData,\r\n isImpressionTooSpecific,\r\n privacyResult,\r\n audienceSize,\r\n ageOnlyEstimation,\r\n genderOnlyEstimation,\r\n locationOnlyEstimation,\r\n audienceOnlyEstimation,\r\n interestOnlyEstimation,\r\n ] = useTargetingEstimationCaller({\r\n targetsForAudienceSizeEstimation,\r\n targetsForAudienceKPIEstimation,\r\n showBreakdown,\r\n interestOnlyTargets,\r\n otherAudienceOnlyTargets,\r\n campaignSubTypes,\r\n audienceUsePrivacyCheck,\r\n });\r\n\r\n // Log estimationData and adGroup.id only once\r\n useEffect(() => {\r\n if (activity && estimationData) {\r\n activity.signal(`PlannerValidation AdGroup ID: ${adGroup.Id} - ${JSON.stringify(estimationData)}`);\r\n }\r\n }, [estimationData, adGroup.id]);\r\n\r\n const estimations = useMemo(() => {\r\n const estClick = (estimationData && estimationData.EstClick && estimationData.EstClick.High &&\r\n getValueWithUnit(estimationData.EstClick.High.Value, estimationData.EstClick.High.Unit)) || 0;\r\n const estCTR = (estimationData && estimationData.EstCTR && estimationData.EstCTR.High && estimationData.EstCTR.Low) ?\r\n [`${estimationData.EstCTR.Low}%`, `${estimationData.EstCTR.High}%`]\r\n : 0;\r\n const estSpend = (estimationData && estimationData.EstSpend && estimationData.EstSpend.High &&\r\n getValueWithUnit(estimationData.EstSpend.High.Value, estimationData.EstSpend.High.Unit)) || 0;\r\n const estAvgCPC = (estimationData && estimationData.EstAvgCPC && estimationData.EstAvgCPC.High &&\r\n getValueWithUnit(estimationData.EstAvgCPC.High.Value, estimationData.EstAvgCPC.High.Unit)) || 0;\r\n\r\n return _.compact([\r\n {\r\n className: 'audience-clicks',\r\n title: i18n.getString(_TL_('Clicks')),\r\n dashColor: '#0078D7',\r\n estimation: estClick,\r\n },\r\n {\r\n className: 'audience-CTR',\r\n title: i18n.getString(_TL_('CTR')),\r\n dashColor: '#00A5B0',\r\n estimation: estCTR,\r\n },\r\n isCampaignCreationPlannerIntegrationEnabled && {\r\n className: 'audience-Spend',\r\n title: i18n.getString(_TL_('Spend')),\r\n dashColor: '#00A5B0',\r\n estimation: estSpend,\r\n },\r\n isCampaignCreationPlannerIntegrationEnabled && {\r\n className: 'audience-AvgCPC',\r\n title: i18n.getString(_TL_('Avg.CPC')),\r\n dashColor: '#00A5B0',\r\n estimation: estAvgCPC,\r\n },\r\n ]);\r\n }, [estimationData, i18n, isCampaignCreationPlannerIntegrationEnabled]);\r\n\r\n // disable per https://msasg.visualstudio.com/Bing_Ads/_workitems/edit/8822650\r\n const showImpressions = false;\r\n const showPerformanceTile = false;\r\n\r\n return (\r\n \r\n {showPanel &&\r\n
\r\n {isCampaignCreationPlannerIntegrationEnabled && showImpressions &&\r\n \r\n \r\n {isLoading ? (\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 {errorMessage}\r\n \r\n }\r\n \r\n {showBreakdown && !errorMessage && \r\n
\r\n }\r\n {i18n.getString(titleReach)}
\r\n {i18n.getString(`${titleReach}`)}
\r\n \r\n {i18n.getString(_TL_('These estimates are based on your targeting settings and audiences.'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Potential reach'))}\r\n
\r\n {estimatedReachText}
\r\n {errorMessage &&\r\n \r\n {showPanel &&\r\n
\r\n }\r\n \r\n \r\n {isLoading ? (\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 {errorMessage}\r\n \r\n }\r\n \r\n \r\n )\r\n }\r\n \r\n
\r\n }\r\n {i18n.getString(titleImpression)}
\r\n {i18n.getString(`${titleImpression}`)}
\r\n \r\n {i18n.getString(_TL_('These are estimated based on targeting preferences and audience.'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Potential impression'))}\r\n
\r\n {estimatedImpressionText}
\r\n {errorMessage &&\r\n \r\n
\r\n );\r\n};\r\n\r\nTargetingEstimation.propTypes = {\r\n data: PropTypes.shape({}),\r\n isCampaignCreationPlannerIntegrationEnabled: PropTypes.bool,\r\n showBreakdown: PropTypes.bool,\r\n isAudienceAdGroupEdit: PropTypes.bool.isRequired,\r\n};\r\n\r\nTargetingEstimation.defaultProps = {\r\n data: {},\r\n isCampaignCreationPlannerIntegrationEnabled: false,\r\n showBreakdown: false,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Label, Stack } from '@bingads-webui-react/fabric-control';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport DataTrending from '../../../media/data-trending.svg';\r\n\r\n\r\nconst PredictiveTargetingDescription = ({ i18n }) => (\r\n \r\n {i18n.getString(_TL_('Predictive targeting allows us to optimize your ad reach based on your targeting preferences. You can customize predictive targeting by setting up targeting preferences below.'))}\r\n {i18n.getString(_TL_('Learn more'))}\r\n
\r\n);\r\n\r\nPredictiveTargetingDescription.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const PredictiveTargetingHeader = ({ data }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { UseOptimizedTargeting } = data;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {render(props)}\r\n
\r\n ),\r\n styles: { root: { fontWeight: '100' } },\r\n },\r\n {\r\n key: 'specific',\r\n text: _TL_('Microsoft owned and operated placements'),\r\n onRenderField: (props, render) => (\r\n \r\n {_TL_('This option includes Microsoft sites and additional partner traffic.')}\r\n
\r\n \r\n {render(props)}\r\n
\r\n ),\r\n styles: { root: { fontWeight: '100' } },\r\n },\r\n];\r\n\r\nconst renderPlacements = (props) => {\r\n const { checked, disabled } = props;\r\n let iconSectionStyle;\r\n if (checked) {\r\n iconSectionStyle = disabled ? iconSectionDisabled : iconSectionChecked;\r\n } else {\r\n iconSectionStyle = iconSection;\r\n }\r\n\r\n return (\r\n \r\n {_TL_('Show your ads on specific Microsoft owned and operated placements.')}\r\n
\r\n \r\n
\r\n \r\n {props.value}\r\n \r\n
\r\n );\r\n};\r\n\r\nrenderPlacements.propTypes = {\r\n props: PropTypes.shape({\r\n checked: PropTypes.bool.isRequired,\r\n disabled: PropTypes.bool.isRequired,\r\n icon: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n }),\r\n};\r\n\r\nconst ValidatedPlacementsFunctionPickerInternal = ({\r\n updateValidation,\r\n validationProps,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const { data: { BoostAdunitIds } } = validationProps;\r\n const initialSelectedKey = 'all';\r\n const initialSelectedPlacements = useMemo(() => _.map(placements, (placement => placement.id)), []);\r\n const initialSelectedAdUnitIds = useMemo(() =>\r\n _.flatten(_.map(\r\n initialSelectedPlacements,\r\n i => placements[placementsIdMap[i]].adUnitIds\r\n )), [initialSelectedPlacements]);\r\n\r\n const [selectedKey, setSelectedKey] = useState(initialSelectedKey);\r\n const [selectedPlacements, setSelectedPlacements] = useState(initialSelectedPlacements);\r\n const [selectedAdUnitIds, setSelectedAdUnitIds] = useState(initialSelectedAdUnitIds);\r\n const [placementsDisabledStates, setPlacementsDisabledStates] = useState([false, false, false]);\r\n\r\n useEffect(() => {\r\n if (BoostAdunitIds && _.isArray(BoostAdunitIds) && BoostAdunitIds.length > 0) {\r\n const savedSelectedKey = 'specific';\r\n setSelectedKey(savedSelectedKey);\r\n\r\n let savedSelectedPlacements = [];\r\n let savedSelectedAdUnitIds = [];\r\n _.forEach(placements, (placement) => {\r\n const overlap = _.intersection(BoostAdunitIds, placement.adUnitIds);\r\n if (overlap.length > 0) {\r\n savedSelectedPlacements = savedSelectedPlacements.concat(placement.id);\r\n savedSelectedAdUnitIds = savedSelectedAdUnitIds.concat(placement.adUnitIds);\r\n }\r\n });\r\n\r\n const newPlacementsDisabledStates = [false, false, false];\r\n if (savedSelectedPlacements.length === 1) {\r\n const idToDisable = savedSelectedPlacements[0];\r\n newPlacementsDisabledStates[idToDisable - 1] = true;\r\n }\r\n\r\n setPlacementsDisabledStates(newPlacementsDisabledStates);\r\n setSelectedPlacements(savedSelectedPlacements);\r\n setSelectedAdUnitIds(savedSelectedAdUnitIds);\r\n }\r\n }, [BoostAdunitIds, updateValidation]);\r\n\r\n const onChangeAllSpecific = useCallback((e, option) => {\r\n setSelectedKey(option.key);\r\n\r\n const result = {\r\n BoostAdunitIds: option.key === 'all' ? 'delete_value' : selectedAdUnitIds,\r\n };\r\n\r\n updateValidation([], result);\r\n }, [selectedAdUnitIds, updateValidation]);\r\n\r\n const handlePlacementOnChange = useCallback((e, isChecked, currentId, currentAdUnitIds) => {\r\n let newSelectedPlacements = [];\r\n let newSelectedAdUnitIds = [];\r\n\r\n // get the new selected placements and adUnitIds\r\n if (isChecked) {\r\n newSelectedPlacements = selectedPlacements.concat(currentId);\r\n newSelectedAdUnitIds = selectedAdUnitIds.concat(currentAdUnitIds);\r\n } else {\r\n newSelectedPlacements = _.filter(selectedPlacements, (placement => !_.isEqual(placement, currentId)));\r\n newSelectedAdUnitIds = _.flatten(_.filter(selectedAdUnitIds, (id => !_.contains(currentAdUnitIds, id))));\r\n }\r\n\r\n const newPlacementsDisabledStates = [false, false, false];\r\n if (newSelectedPlacements.length === 1) {\r\n const idToDisable = newSelectedPlacements[0];\r\n newPlacementsDisabledStates[idToDisable - 1] = true;\r\n }\r\n setPlacementsDisabledStates(newPlacementsDisabledStates);\r\n setSelectedPlacements(newSelectedPlacements);\r\n setSelectedAdUnitIds(newSelectedAdUnitIds);\r\n\r\n const result = {\r\n BoostAdunitIds: '',\r\n };\r\n result.BoostAdunitIds = newSelectedAdUnitIds;\r\n updateValidation([], result);\r\n }, [selectedPlacements, selectedAdUnitIds, updateValidation]);\r\n\r\n return (\r\n \r\n \r\n {props.value}\r\n \r\n
\r\n currentAccount.PlacementExclusionLists['Default.GetOwnedOperatedExclusions'].get()}\r\n >\r\n {oolist => (\r\n selectedKey === 'specific' && oolist.value.length > 0 &&\r\n \r\n {i18n.getString(_TL_('You may be excluding the following websites which will prevent your campaign from serving'))}: { oolist.value.map(item => item.Url).join(', ')}\r\n \r\n )\r\n }\r\n \r\n {selectedKey === 'specific' && (\r\n
\r\n );\r\n};\r\n\r\nValidatedPlacementsFunctionPickerInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n BoostAdunitIds: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nexport const ValidatedPlacementsFunctionPicker = withCustomValidation(ValidatedPlacementsFunctionPickerInternal);\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ValidatedLegacyDateSetting } from '@bingads-webui-campaign/date-setting';\r\nimport { ValidatedLegacyAdSchedule } from '@bingads-webui-campaign/ad-schedule';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nexport const AdSchedule = ({\r\n adGroup,\r\n campaign,\r\n isCreate,\r\n hideUseCampaignSetting,\r\n showBidAdjustmentColumn,\r\n setAdScheduleViewCallback,\r\n isDateSettingsDisplayed,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const {\r\n adSchedules,\r\n StartDate,\r\n EndDate,\r\n deal,\r\n } = adGroup || {};\r\n\r\n const {\r\n adSchedules: campaignAdSchedules = {},\r\n TimeZone,\r\n } = campaign || {};\r\n\r\n return (\r\n <>\r\n {\r\n isDateSettingsDisplayed &&\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n _.map(placements, (placement) => {\r\n let currentItemStyle;\r\n if (placement.checked) {\r\n currentItemStyle = placement.disabled ? itemStyleDisabled : itemStyleChecked;\r\n } else {\r\n currentItemStyle = itemStyle;\r\n }\r\n const checkedState = _.contains(selectedPlacements, placement.id);\r\n const disabledState = placementsDisabledStates[placement.id - 1];\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n handlePlacementOnChange(e, isChecked, placement.id, placement.adUnitIds)}\r\n />\r\n
\r\n );\r\n })\r\n }\r\n \r\n { areTargetsSet &&\r\n \r\n \r\n {TargetItems.map(option => (\r\n <>\r\n {i18n.getString(option.description)} \r\n \r\n ))}\r\n \r\n \r\n }\r\n
\r\n );\r\n};\r\n\r\nTargetOrBidSelector.propTypes = {\r\n field: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n targets: PropTypes.arrayOf(PropTypes.shape({})),\r\n negativeTargets: PropTypes.arrayOf(PropTypes.shape({})),\r\n styles: PropTypes.shape({}),\r\n};\r\n\r\nTargetOrBidSelector.defaultProps = {\r\n targets: null,\r\n negativeTargets: null,\r\n styles: {},\r\n};\r\n\r\nexport const ValidatedTargetOrBidSelector = withCustomValidation(TargetOrBidSelector);\r\n","import _, { size, chain, every, noop, get, isEmpty, sortBy } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useMemo } from 'react';\r\nimport { ValidationGroup, withCustomValidation, withError } from '@bingads-webui-react/validation';\r\nimport { ValidatedAudiencePicker } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { withBidAdjustment } from './with-bid-adjustment';\r\nimport { CampaignObjectiveType } from '../../../common/constants';\r\n\r\nconst ValidatedAudiencePickerWithAudienceInfo = (props) => {\r\n const {\r\n shouldHide, onAudienceTargetInfoChange, updateValidation, validationProps, isAudienceCreationWorkflow, campaignGoal, boostConversionBasedSegmentEnabled, hideCustomSegmentsOption, ...rest\r\n } = props;\r\n const { data: { audiences } } = validationProps;\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const getAudienceTargetErrors = (audienceList) => {\r\n const errors = [];\r\n const customerMatchList = chain(audienceList)\r\n .filter(i => _.result(_.result(i, 'Criterion'), 'AudienceType') === 'CustomerList')\r\n .value();\r\n const excludeCustomerMatchList = _.filter(customerMatchList, i => i.Status === 'Excluded');\r\n const includeCustomerMatchList = _.filter(customerMatchList, i => i.Status === 'Active');\r\n\r\n if (campaignGoal === CampaignObjectiveType.Acquisition && boostConversionBasedSegmentEnabled &&\r\n size(excludeCustomerMatchList) === 0) {\r\n errors.push(_TL_('Need at least one exclusion customer match list when your campaign goal is Acquisition.'));\r\n }\r\n\r\n if (campaignGoal === CampaignObjectiveType.Engagement && boostConversionBasedSegmentEnabled &&\r\n size(includeCustomerMatchList) === 0) {\r\n errors.push(_TL_('Need at least one inclusion customer match list when your campaign goal is Engagement.'));\r\n }\r\n return errors;\r\n };\r\n\r\n const onChange = () => {\r\n const updatedItems = currentLevelTargetInfo.getSnapshot(false);\r\n const errors = getAudienceTargetErrors(updatedItems);\r\n updateValidation(errors, { audiences: [...updatedItems] });\r\n };\r\n\r\n const getPreExistingBids = (audience, currentTargets) => {\r\n const { Criterion = {} } = audience;\r\n\r\n if (Criterion.BidMultiplier > 0) {\r\n return Criterion.BidMultiplier;\r\n }\r\n\r\n const existingAudience = currentTargets.find(({ Criterion: criterion }) => (criterion.AudienceId === get(audience, 'Criterion.AudienceId')));\r\n\r\n if (existingAudience) {\r\n return {\r\n Id: existingAudience.Id,\r\n BidMultiplier: existingAudience.Criterion.BidMultiplier,\r\n };\r\n }\r\n\r\n return {\r\n BidMultiplier: Criterion.BidMultiplier,\r\n };\r\n };\r\n\r\n const onValidate = (result) => {\r\n const { data } = result;\r\n if (!isEmpty(data)) {\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false);\r\n // add the existing bids and Ids to audiences because ValidatedAudiencePicker removes it\r\n const hydratedAudiences = data.audiences.map((audience) => {\r\n const { Criterion = {} } = audience;\r\n const { Id, BidMultiplier } = getPreExistingBids(audience, currentTargets);\r\n\r\n const newAudience = {\r\n ...audience,\r\n Id,\r\n Criterion: {\r\n ...Criterion,\r\n BidMultiplier,\r\n },\r\n\r\n };\r\n\r\n return newAudience;\r\n });\r\n\r\n updateValidation(getAudienceTargetErrors(hydratedAudiences), { audiences: hydratedAudiences });\r\n }\r\n\r\n if (isAudienceCreationWorkflow && isEmpty(data)) {\r\n updateValidation(getAudienceTargetErrors([]), { audiences: [] });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (onAudienceTargetInfoChange) {\r\n onAudienceTargetInfoChange(currentLevelTargetInfo);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [currentLevelTargetInfo]);\r\n\r\n useEffect(() => {\r\n if (currentLevelTargetInfo && audiences) {\r\n currentLevelTargetInfo.off('AdGroupCriterionAudienceChanged', onChange);\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const isSame = every(audiences, audience => currentTargets.find(({ Criterion }) => (Criterion.AudienceId === get(audience, 'Criterion.AudienceId'))));\r\n\r\n if ((audiences.length !== currentTargets.length) || !isSame) {\r\n currentLevelTargetInfo.destroyTargetTypeAsync('Audience').then(() => {\r\n const sortedAudiences = sortBy(audiences, 'Status');\r\n sortedAudiences.forEach((audience) => {\r\n const { Criterion = {} } = audience;\r\n const newCriterion = {\r\n ...audience,\r\n Criterion: {\r\n ...Criterion,\r\n },\r\n };\r\n\r\n currentLevelTargetInfo.createAsync(newCriterion);\r\n });\r\n }).then(() => {\r\n currentLevelTargetInfo.on('AdGroupCriterionAudienceChanged', onChange);\r\n });\r\n } else {\r\n currentLevelTargetInfo.on('AdGroupCriterionAudienceChanged', onChange);\r\n }\r\n }\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionAudienceChanged', onChange);\r\n };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [audiences]);\r\n\r\n if (shouldHide) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {InMarketAudienceRedesign && (\r\n currentDate) || isDefaultAdGroupStepModel)}\r\n hideCustomSegmentsOption={initialAdGroup === null || (initialAdGroup && initialAdGroup.StartDate > currentDate) || isDefaultAdGroupStepModel || isAdGroupEditFlow}\r\n validationProps={{\r\n data: {\r\n audiences,\r\n },\r\n }}\r\n showBidAdjustments={isAudienceAdGroupEdit(flow)}\r\n isIMARedesignEnabled={InMarketAudienceRedesign}\r\n boostConversionBasedSegmentEnabled={boostConversionBasedSegmentEnabled}\r\n />\r\n ) : ( currentDate) || isDefaultAdGroupStepModel}\r\n hideUseCampaignSetting={isAdScheduleCampaignToggleVisible}\r\n setAdScheduleViewCallback={setAdScheduleViewCallback}\r\n isDateSettingsDisplayed={isDateSettingsDisplayed}\r\n />\r\n : (\r\n \r\n {!optimizedTargetingEnabled ?\r\n i18n.getString(_TL_('Predictive targeting is automatically enabled. You can disable it by setting a targeting preference.'))\r\n : i18n.getString(_TL_('Turning off predictive targeting significantly limits our ability to help you reach the best audience for your campaign.'))\r\n }\r\n \r\n \r\n \r\n \r\n );\r\n\r\n return (\r\n <>\r\n (\r\n <>\r\n \r\n \r\n {i18n.getString(_TL_('Targeting preferences (optional)'))}\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\nTargetingPreferencesInternal.propTypes = {\r\n data: PropTypes.shape({\r\n locationTargets: PropTypes.shape({}),\r\n adGroup: PropTypes.shape({\r\n locationTargets: PropTypes.shape({}),\r\n deviceTypes: PropTypes.shape({}),\r\n }),\r\n errors: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })),\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })).isRequired,\r\n isDateSettingsDisplayed: PropTypes.bool,\r\n};\r\n\r\nTargetingPreferencesInternal.defaultProps = {\r\n isDateSettingsDisplayed: true,\r\n};\r\n\r\nexport const TargetingPreferences = TargetingPreferencesInternal;\r\n","export const ERROR_ENTITY = {\r\n Campaign: 'campaign',\r\n AdGroup: 'adGroup',\r\n AssetGroup: 'assetGroup',\r\n Ad: 'ad',\r\n CampaignLocation: 'campaignLocation',\r\n CampaignRadius: 'campaignRadius',\r\n CampaignNegativeLocation: 'campaignNegativeLocation',\r\n CampaignLocationIntent: 'campaignLocationIntent',\r\n CampaignDayTimeCriterion: 'campaignDayTimeCriterion',\r\n CampaignNegativeWebpage: 'campaignNegativeWebpage',\r\n AdGroupLocation: 'adGroupLocation',\r\n AdGroupRadius: 'adGroupRadius',\r\n AdGroupNegativeLocation: 'adGroupNegativeLocation',\r\n AdGroupLocationIntent: 'adGroupLocationIntent',\r\n AdGroupDayTimeCriterion: 'adGroupDayTimeCriterion',\r\n AdGroupNegativeWebpage: 'adGroupNegativeWebpage',\r\n AdGroupLocationTargetError: 'AdGroup Location Criterion Error',\r\n};\r\n","import { CustomValidatedDefaultBid } from '@bingads-webui-campaign-react/default-bid';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useCallback, useMemo, useState } from 'react';\r\nimport { getBidRecommendationsRange } from './bid-recommendations-data';\r\n\r\n// Component to display bid recommendation message\r\nconst BidRecommendationInfo = ({ bidRecommendationRange, validationResult, i18n, isEdit }) => {\r\n const { isValidated, isValid } = validationResult;\r\n if (!isValidated || isValid || !bidRecommendationRange) {\r\n return null;\r\n }\r\n\r\n const { currencyCode } = bidRecommendationRange;\r\n const messageData = {\r\n bidFloor: i18n.formatCurrency(bidRecommendationRange.bidFloor, currencyCode),\r\n bidRecommendation: i18n.formatCurrency(bidRecommendationRange.bidRecommendation, currencyCode),\r\n bidCeil: i18n.formatCurrency(bidRecommendationRange.bidCeil, currencyCode),\r\n };\r\n\r\n const message = isEdit ?\r\n i18n.getString(_TL_('Use the recommended bid of {{bidRecommendation}} to improve ad delivery. A typical range for similar campaigns is between {{bidFloor}} and {{bidCeil}}'), messageData) :\r\n i18n.getString(_TL_('A typical range for similar campaigns is between {{bidFloor}} and {{bidCeil}}'), messageData);\r\n\r\n return (\r\n
\r\n
\r\n );\r\n};\r\n\r\nBidAdjustmentInternal.propTypes = {\r\n data: PropTypes.shape({\r\n adGroup: PropTypes.shape({\r\n ageRanges: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n initialAgeRanges: PropTypes.arrayOf(PropTypes.shape({\r\n criterion: PropTypes.string.isRequired,\r\n bidAdjustment: PropTypes.number.isRequired,\r\n })).isRequired,\r\n deviceTargetingCampaignLevel: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n campaign: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n criterionType: PropTypes.string.isRequired,\r\n isAudienceEdit: PropTypes.bool,\r\n};\r\n\r\nexport const ValidatedBidAdjustment = withCustomValidation(BidAdjustmentInternal);\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Switch } from '@fluentui/react-components';\r\nimport { withValidation, AdapterFactory } from '@bingads-webui-react/validation';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nconst CustomAdapter = AdapterFactory({\r\n defaultValue: false,\r\n valueToInject: 'checked',\r\n functionToInject: 'onChange',\r\n convertEventToValue: event => event.target.checked,\r\n});\r\n\r\nconst SwitchInternal = ({\r\n checked,\r\n onChange,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n \r\n
\r\n setBidAdjustmentRef(newRef)} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n {adGroupTargetingSections()}\r\n
\r\n \r\n
);\r\n};\r\n\r\nBidRecommendationInfo.propTypes = {\r\n bidRecommendationRange: PropTypes.shape({\r\n bidFloor: PropTypes.number,\r\n bidRecommendation: PropTypes.number,\r\n bidCeil: PropTypes.number,\r\n currencyCode: PropTypes.string,\r\n }),\r\n validationResult: PropTypes.shape({\r\n isValidated: PropTypes.bool,\r\n isValid: PropTypes.bool,\r\n }).isRequired,\r\n isEdit: PropTypes.bool.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n formatCurrency: PropTypes.func,\r\n }).isRequired,\r\n};\r\nBidRecommendationInfo.defaultProps = {\r\n bidRecommendationRange: null,\r\n};\r\n\r\nexport const useCampaignBidTypeInfo = (campaign, currencyCode) => {\r\n const campaignType = campaign && campaign.CampaignType;\r\n const campaignSubType = campaign && campaign.CampaignSubType;\r\n const biddingSchemeType = campaign && campaign.BiddingScheme && campaign.BiddingScheme.Type;\r\n\r\n return useMemo(() => ({\r\n campaignType,\r\n campaignSubType,\r\n biddingSchemeType,\r\n currencyCode,\r\n }), [campaignType, campaignSubType, biddingSchemeType, currencyCode]);\r\n};\r\n\r\n// Hook to get the BidRecommendationRange data & a validator function\r\nexport const useBidRecommendation = (campaignBidTypeInfo) => {\r\n const bidRecommendationRange = useMemo(() => getBidRecommendationsRange(campaignBidTypeInfo), [campaignBidTypeInfo]);\r\n const checkIsBidInRecommendedRange = useCallback((bidValue) => {\r\n if (!bidRecommendationRange || !bidValue) { // Unknown range should show no message\r\n return { isValidated: false, isValid: false };\r\n }\r\n\r\n const isValid = bidValue >= bidRecommendationRange.bidFloor;\r\n return {\r\n isValidated: true,\r\n isValid,\r\n };\r\n }, [bidRecommendationRange]);\r\n\r\n return [bidRecommendationRange, checkIsBidInRecommendedRange];\r\n};\r\n\r\n/*\r\n * HOC to wrap a component with BidRecommendation data & message banner\r\n */\r\nexport const withBidRecommendation = (Component) => {\r\n const BidRecommendationWrappedComponent = (props) => {\r\n const { campaignBidTypeInfo, i18n, isEdit, ...rest } = props;\r\n\r\n /**\r\n * Lookup the bidRecommendationRange\r\n */\r\n const [bidRecommendationRange, checkIsBidInRecommendedRange] = useBidRecommendation(campaignBidTypeInfo);\r\n const [validationResult, setValidationResult] = useState({ isValidated: false, isValid: false });\r\n\r\n /**\r\n * Callback to listen to bid value changes\r\n */\r\n const onBidChange = useCallback((nextValue) => {\r\n const nextValidationResult = checkIsBidInRecommendedRange(nextValue);\r\n setValidationResult(nextValidationResult);\r\n }, [checkIsBidInRecommendedRange]);\r\n\r\n // NOTE: do NOT set `validationProps.data` here - it gets out of sync with the actual viewModel being used to save.\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {\r\n (BiddingScheme.Type !== 'ManualCpm') ?\r\n
\r\n );\r\n};\r\n","import React, { useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport { ValidatedFrequencyCapping, adGroupBidProp, getNetflixFrequencyCapping } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { isXandrDisplayAdsCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport { getConvertedCurrencyDealMinimumBid, getAccountExchangeRateFromLocalStorage } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { AdGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { Label } from '@fluentui/react';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { getBidTitleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { CustomValidatedDefaultBid } from '@bingads-webui-campaign-react/default-bid';\r\n\r\nexport const XandrBidValue = ({\r\n data,\r\n onDataChange,\r\n legacyI18n,\r\n isPremiumStreaming,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { campaign, adGroup } = data || {};\r\n const { deal } = adGroup || {};\r\n const isDealTypeRestricted = deal && _.isEqual('Restricted', deal.Type);\r\n const shouldUsePredefinedFrequencyLimit = isDealTypeRestricted;\r\n\r\n const { CampaignSubType, BiddingScheme } = campaign || {};\r\n\r\n const bidType = (BiddingScheme && BiddingScheme.Type === 'ManualCpm') ? 'CpmBid' : 'CpvBid';\r\n\r\n let bidRange = bidType === 'CpmBid' ? serverContext.VideoViewsCPMBidRange : serverContext.VideoViewsCPVBidRange;\r\n\r\n let dealMinimumBid = 0;\r\n if (deal) {\r\n const exchangeRateMapping = getAccountExchangeRateFromLocalStorage(serverContext);\r\n dealMinimumBid = getConvertedCurrencyDealMinimumBid(deal.MinimumBid, deal.Currency, serverContext.CurrentAccount.CurrencyCode, exchangeRateMapping.val);\r\n }\r\n\r\n if (isXandrDisplayAdsCampaign(CampaignSubType)) {\r\n bidRange = serverContext.KeywordCPMBidRange;\r\n }\r\n\r\n const onAdGroupValidate = (result) => {\r\n if (adGroup) {\r\n onDataChange({\r\n data: {\r\n ...data,\r\n adGroup: {\r\n ...data.adGroup,\r\n ...result.data,\r\n },\r\n },\r\n isValid: result.isValid,\r\n });\r\n }\r\n };\r\n\r\n const bidValidationProps = {\r\n field: bidType,\r\n schema: {\r\n properties: {\r\n [bidType]: {\r\n type: 'number',\r\n minimum: deal ? Math.max(dealMinimumBid, bidRange.FloorValue) : bidRange.FloorValue,\r\n maximum: deal ? null : bidRange.CeilingValue,\r\n required: true,\r\n },\r\n },\r\n },\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React, { useState, useCallback, useContext, useMemo, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { AdGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { Stack } from '@fluentui/react';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { getLocationTargetTitleDetails, getAdScheduleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { collapseExpander, Collapse, TextTitle, useCollapseState, ValidatedFixedPanel, ValidatedPanel } from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { RemainingCharsValidatedTextField } from '@bingads-webui-campaign-react/remaining-chars-hint';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport {\r\n FormErrorGroup,\r\n entityIs,\r\n anyComp,\r\n} from '@bingads-webui-campaign-react/form-error';\r\nimport { SEARCH_TYPE } from '@bingads-webui-react/bing-maps';\r\nimport { ValidatedLocationTargetSetting, useIsMounted } from '@bingads-webui-campaign-react/step-wizard-controls';\r\nimport { buildLegacyI18n } from '@bingads-webui/build-legacy-i18n';\r\nimport { ValidationStringMap } from '@bingads-webui/validation-string-map';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { ActuationGroup } from '@bingads-webui-campaign-react/actuator';\r\nimport {\r\n AgeRange,\r\n Gender,\r\n formatAgeRanges,\r\n formatGenders,\r\n adGroupNameProp,\r\n ReachEstimate,\r\n NetflixTCAgreement,\r\n ValidatedGenreTargets,\r\n formatGenreTargets,\r\n getGenreOptions,\r\n getDealGenreOptions,\r\n DealImpressionPanel,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { useDefaultStyles, withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useFormService } from '@bingads-webui-react/form';\r\nimport {\r\n withControlErrorHandling,\r\n withUnvalidatedControlErrors,\r\n} from '@bingads-webui-campaign-react/error-handling';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { useWizardService, matchStepState, STEP_STATES } from '@bingads-webui-react/wizard';\r\nimport { ValidatedBoostPlacementTarget, placementTargetingDetails, contextualTargetDetails } from '@bingads-webui-campaign-react/boost-placement-target';\r\nimport { ValidatedContextualTarget } from '@bingads-webui-campaign-react/boost-contextual-target';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { isXandrCampaign, campaignShouldServeOnMSAN } from '@bingads-webui-campaign-react/constants';\r\nimport { ValidatedLegacyDateSetting, getDateSettingDetails } from '@bingads-webui-campaign/date-setting';\r\nimport { TargetingEstimation } from './components/targeting-estimation';\r\nimport { StepHeader } from '../../shared/step-header';\r\nimport { PredictiveTargetingHeader } from './components/predictive-targeting';\r\nimport { TargetingPreferences } from './components/targeting-preferences';\r\nimport { ValidatedBidAdjustment } from './components/audience-bid-adjustment';\r\nimport { SectionShimmer } from '../../shared/section-shimmer';\r\nimport { getAdGroupPanels } from '../../step-utils';\r\nimport { ERROR_ENTITY } from '../../common/error-entities';\r\nimport locationTargetIcon from '../../media/location-target.svg';\r\nimport genderTarget from '../../media/gender-target.svg';\r\nimport ageTarget from '../../media/age-target.svg';\r\nimport bidValueIcon from '../../media/bid-value.svg';\r\nimport placementTargetIcon from '../../media/placement-target.svg';\r\nimport contextualTargetIcon from '../../media/contextual-target.svg';\r\nimport adScheduleIcon from '../../media/ad-schedule.svg';\r\nimport startDateEndDateIcon from '../../media/start-date-end-date.svg';\r\nimport { getAdGroupStyles } from './adgroup-styles';\r\nimport {\r\n FLOWS,\r\n isAudienceAdGroupCreation,\r\n isAudienceAdGroupEdit as isAudienceAdGroupEditFlow,\r\n isAudience as isAudienceFlow,\r\n isEdit as isEditFlow,\r\n isCTVCampaign,\r\n isDealCampaign,\r\n} from '../../step-constants';\r\nimport { getContextualTargetStyles } from '../../shared/styles/contextual-target-styles';\r\nimport { formatReachEstimateData, getTargetSettingsFromCriterions } from './utils';\r\nimport { XandrBidValue, AudienceBidValue } from '../../shared/components';\r\nimport { AdSchedule } from './components';\r\n\r\nconst adGroupLocationCriterions = anyComp(\r\n entityIs(ERROR_ENTITY.AdGroupLocation),\r\n entityIs(ERROR_ENTITY.AdGroupRadius),\r\n entityIs(ERROR_ENTITY.AdGroupNegativeLocation),\r\n entityIs(ERROR_ENTITY.AdGroupLocationIntent),\r\n entityIs(ERROR_ENTITY.AdGroupLocationTargetError)\r\n);\r\n\r\nconst getPanelErrorProps = ({ needsAttention }) => (needsAttention ? {\r\n error: _TL_(\"* Something's wrong\"),\r\n} : {});\r\n\r\nconst ServerValidatedLocationTargetSetting = withControlErrorHandling(withUnvalidatedControlErrors(\r\n ValidatedLocationTargetSetting,\r\n { filter: adGroupLocationCriterions }\r\n));\r\n\r\nconst ContextualTargetWithStyle = withDefaultStyles(ValidatedContextualTarget, getContextualTargetStyles);\r\nexport const AdGroupStepShellInternal = ({\r\n data,\r\n onDataChange: onDataChangeProp,\r\n scope,\r\n error,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const isMounted = useIsMounted();\r\n\r\n const onDataChange = useCallback((...args) => {\r\n if (!isMounted.current) return;\r\n onDataChangeProp(...args);\r\n }, [isMounted, onDataChangeProp]);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const classes = useDefaultStyles(getAdGroupStyles);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state } = useWizardService();\r\n\r\n const currentStates = state.toStrings()[1];\r\n\r\n const { flow, isDefaultAdGroupStepModel, adGroup: initialAdGroup } = state.context.wizardData;\r\n\r\n const { state: { context: { saveFailed: showAllValidationErrors } } } = useFormService();\r\n\r\n const {\r\n adGroup, bundleCountries, bundleLocationCriterions, campaign,\r\n } = data || {};\r\n\r\n const {\r\n CampaignSubType,\r\n CampaignSettings,\r\n } = campaign || {};\r\n\r\n const {\r\n locationTargets,\r\n ageRanges,\r\n genderTypes,\r\n BoostAdunitIds,\r\n BoostPublisherIds,\r\n BoostAccountIds,\r\n BoostTriggerIds,\r\n contextualTargets,\r\n genreTargets,\r\n deal,\r\n locationRestricted,\r\n } = adGroup || {};\r\n\r\n const [adScheduleView, setAdScheduleView] = useState(null);\r\n const setAdScheduleViewCallback = useCallback((view) => {\r\n setAdScheduleView(view);\r\n }, []);\r\n\r\n const legacyI18n = useMemo(() => buildLegacyI18n(i18n, [ValidationStringMap]), [i18n]);\r\n\r\n const { basicOptions } = useMemo(() => getAdGroupPanels(flow, serverContext), [flow, serverContext]);\r\n\r\n const [\r\n allAdGroupSettingsSections,\r\n adGroupSettingsExpandedSections,\r\n setAdGroupSettingsExpandedSections,\r\n ] = useCollapseState(\r\n basicOptions /* all sections */,\r\n ['ad-group-name', 'predictive-targeting'] /* initially expanded sections */\r\n );\r\n const {\r\n DynamicPermissions: {\r\n XandrNegativeTarget,\r\n AgeGenderDisclaimer,\r\n PTPerfEstimationUIUpdate,\r\n CampaignCreationPlannerIntegration,\r\n CampaignCreationPlannerIntegrationMultiAd,\r\n InMarketAudienceRedesign,\r\n CampaignLifetimeBudget,\r\n MaeLifetimeBudgetExclusion,\r\n AudienceUsePrivacyCheckV2,\r\n },\r\n CurrentCustomer: {\r\n Id: cid,\r\n },\r\n CurrentAccount: {\r\n Id: aid,\r\n },\r\n NetflixEnabledCountryCodes = 'GB',\r\n } = serverContext;\r\n\r\n const isCampaignLifetimeBudgetEnabled = CampaignLifetimeBudget && !MaeLifetimeBudgetExclusion;\r\n\r\n const useCampaignLevelDates = data?.campaign?.UseCampaignLevelDates;\r\n const startDate = useCampaignLevelDates ? data?.campaign?.StartDate : data?.adGroup?.StartDate;\r\n const endDate = useCampaignLevelDates ? data?.campaign?.EndDate : data?.adGroup?.EndDate;\r\n\r\n const allBasicExpand = useMemo(\r\n () => collapseExpander({ setActiveKeys: setAdGroupSettingsExpandedSections }),\r\n [setAdGroupSettingsExpandedSections]\r\n );\r\n\r\n const shouldServeOnMSAN = campaignShouldServeOnMSAN(CampaignSettings);\r\n const isXandrServing = isXandrCampaign(CampaignSubType) && !shouldServeOnMSAN;\r\n\r\n const isAudienceAdGroupCreate = useMemo(() => isAudienceAdGroupCreation(flow), [flow]);\r\n const isAudienceAdGroupEdit = useMemo(() => isAudienceAdGroupEditFlow(flow), [flow]);\r\n const isAudience = useMemo(() => isAudienceFlow(flow), [flow]);\r\n const isEdit = useMemo(() => isEditFlow(flow), [flow]);\r\n const isCTVFlow = useMemo(() => isCTVCampaign(flow), [flow]);\r\n const isDealFlow = useMemo(() => isDealCampaign(flow), [flow]);\r\n const isCTVOrDeal = isCTVFlow || isDealFlow;\r\n\r\n const isDealTypeRestricted = deal && _.isEqual('Restricted', deal.Type);\r\n const shouldShowDealLocationTarget = (deal && !locationRestricted) || !isDealTypeRestricted;\r\n const hideLocationTarget = isDealFlow ? !shouldShowDealLocationTarget : false;\r\n const hideGenreTarget = isDealFlow ? !(deal && deal.Genre) : false;\r\n const genreOptions = useMemo(() => _.sortBy(isDealFlow ? getDealGenreOptions(i18n) : getGenreOptions(i18n), 'name'), [i18n, isDealFlow]);\r\n const dealCountryCode = deal && deal.TwoLetterCountryCode;\r\n const dealSupportedLocationType = deal && deal.SupportedLocationType;\r\n\r\n const errors = useMemo(() => {\r\n if (error && _.isArray(error)) {\r\n return error;\r\n } else if (data && data.errors && data.errors.length > 0) {\r\n return data.errors;\r\n }\r\n return [];\r\n }, [data, error]);\r\n\r\n const showAllValidationErrorsMemo = useMemo(() => showAllValidationErrors || (data && data.errors && data.errors.length > 0), [showAllValidationErrors, data]);\r\n\r\n const BidValue = isXandrServing ? XandrBidValue : AudienceBidValue;\r\n\r\n const onValidate = (result) => {\r\n if (data && data.adGroup) {\r\n const updatedData = {\r\n data: {\r\n ...data,\r\n adGroup: {\r\n ...data.adGroup,\r\n ...result.data,\r\n },\r\n },\r\n isValid: result.isValid,\r\n };\r\n\r\n let targetSetting = null;\r\n\r\n if (isAudience) {\r\n targetSetting = getTargetSettingsFromCriterions(updatedData.data.adGroup, isAudienceAdGroupEdit);\r\n updatedData.data.adGroup.TargetSetting = targetSetting;\r\n }\r\n onDataChange(updatedData);\r\n }\r\n };\r\n\r\n const isValidTargets = useMemo(() => {\r\n if (data && data.adGroup) {\r\n if (PTPerfEstimationUIUpdate ||\r\n data.adGroup.UseOptimizedTargeting === false\r\n ) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }, [PTPerfEstimationUIUpdate, data]);\r\n\r\n const NetflixEnabledCountryCodesArr = useMemo(() => NetflixEnabledCountryCodes.split(','), [NetflixEnabledCountryCodes]);\r\n const BundleCountriesCodesArr = useMemo(() => (bundleLocationCriterions && bundleLocationCriterions.map(c => c && c.Criterion && c.Criterion.LocationCriterion && c.Criterion.LocationCriterion.CountryCode)) || [], [bundleLocationCriterions]);\r\n\r\n const expiredAdGroupError = _.filter(error, err => err.code === 'CampaignServiceCannotUpdateAdGroupInExpiredState');\r\n const bidAmountsLessThanFloorPriceAdGroupError = _.filter(error, err => err.code === 'CampaignServiceBidAmountsLessThanFloorPrice');\r\n\r\n const shouldShowNetflixTC = useMemo(() =>\r\n isCTVFlow &&\r\n locationTargets &&\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'everywhere' ||\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'bundle'\r\n && BundleCountriesCodesArr.some(bundleCountry => NetflixEnabledCountryCodesArr.indexOf(bundleCountry) >= 0)\r\n ) ||\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'specific' &&\r\n _.some(\r\n locationTargets.currentLevelSettings.currentLocations,\r\n location => location.SelectionStatus === 'Included'\r\n && location.Criterion.LocationCriterion\r\n && NetflixEnabledCountryCodesArr.indexOf(location.Criterion.LocationCriterion.CountryCode) >= 0\r\n )\r\n )\r\n ), [isCTVFlow, locationTargets, NetflixEnabledCountryCodesArr, BundleCountriesCodesArr]);\r\n\r\n useEffect(() => {\r\n if (activity && matchStepState(state, STEP_STATES.LOADING)) {\r\n activity.signal(`onAdGroupStepLoading - ${currentStates}`);\r\n }\r\n\r\n if (activity && matchStepState(state, STEP_STATES.SAVING)) {\r\n activity.signal(`onAdGroupStepSaving - ${currentStates}`);\r\n }\r\n }, [activity, currentStates, state]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nAdGroupStepShellInternal.propTypes = {\r\n data: PropTypes.shape({\r\n adGroup: PropTypes.shape({\r\n UseOptimizedTargeting: PropTypes.bool,\r\n StartDate: PropTypes.string,\r\n EndDate: PropTypes.string,\r\n Id: PropTypes.number,\r\n }),\r\n campaign: PropTypes.shape({\r\n BiddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n }),\r\n TimeZone: PropTypes.string,\r\n UseCampaignLevelDates: PropTypes.bool,\r\n EndDate: PropTypes.string,\r\n StartDate: PropTypes.string,\r\n }),\r\n exclusions: PropTypes.shape({\r\n adgroupExclusions: PropTypes.shape({}),\r\n }),\r\n errors: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })),\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })).isRequired,\r\n scope: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const AdGroupStepShell = withScope(AdGroupStepShellInternal);\r\n","export const getContextualTargetStyles = () => ({\r\n root: {\r\n marginTop: 20,\r\n display: 'flex',\r\n },\r\n targetsContainer: {\r\n border: '1px solid gray',\r\n paddingLeft: 12,\r\n minWidth: '550px',\r\n },\r\n treeViewContainer: {\r\n '& .checkbox-inline.disabled': {\r\n paddingLeft: 0,\r\n '& input': {\r\n display: 'none',\r\n },\r\n '& span': {\r\n color: 'black',\r\n fontWeight: 'bold',\r\n },\r\n },\r\n },\r\n selectionContainer: {\r\n border: '1px solid gray',\r\n padding: '5px 10px',\r\n marginLeft: 12,\r\n width: '100%',\r\n '& .selectedTargetsLabel': {\r\n fontSize: '16px',\r\n fontWeight: 'bold',\r\n margin: '10px 0px',\r\n },\r\n '& .selectedTargetButton.btn-default': {\r\n padding: '2px 10px',\r\n paddingRight: '3px',\r\n height: 'unset',\r\n '& .iconba.iconba-Cancel': {\r\n top: 0,\r\n fontWeight: 'bold',\r\n },\r\n marginLeft: '5px',\r\n marginBottom: '5px',\r\n },\r\n '& .categoryName': {\r\n fontSize: '14px',\r\n fontWeight: '700',\r\n marginTop: '10px',\r\n marginBottom: '2px',\r\n },\r\n '& .selectedNodesContainer': {\r\n paddingTop: '5px',\r\n },\r\n },\r\n contextualTargetTitle: {\r\n flex: '100%',\r\n },\r\n});\r\n","import { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { isEmpty } from 'underscore';\r\n\r\nconst campaignCriterionTypeName = 'Model.CampaignCriterion';\r\n\r\nexport const readCampaignCriterions = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n type,\r\n}) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns.$withKey(campaignId)\r\n .CampaignCriterions\r\n .$cast(campaignCriterionTypeName)\r\n .get({\r\n filter: {\r\n where: type,\r\n },\r\n })\r\n .toPromise();\r\n\r\n\r\nexport const readDayTimeCriterions = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n}) =>\r\n readCampaignCriterions({\r\n cid,\r\n aid,\r\n campaignId,\r\n type: \"isof(Criterion,'Model.DayTimeCriterion')\",\r\n });\r\n\r\n\r\nexport const viewModelToBulkModelForAdSchedules = ({ campaignViewModel }) => {\r\n const targets = campaignViewModel.data.adSchedulesBulkUpsert || [];\r\n return targets.map((criterion) => {\r\n const Status = isEmpty(criterion) ? 'Active' : criterion.Status;\r\n if (campaignViewModel.data.Id) {\r\n return {\r\n ...criterion,\r\n Status,\r\n Campaign: {\r\n Id: campaignViewModel.data.Id,\r\n },\r\n };\r\n }\r\n return {\r\n ...criterion,\r\n Status,\r\n CampaignName: campaignViewModel.Name,\r\n };\r\n });\r\n};\r\n\r\nexport const readLocationCriterions = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n}) =>\r\n readCampaignCriterions({\r\n cid,\r\n aid,\r\n campaignId,\r\n type: \"isof(Criterion,'Model.LocationCriterion') or isof(Criterion,'Model.RadiusCriterion') or isof(Criterion,'Model.LocationIntentCriterion')\",\r\n });\r\n\r\nexport const readDeviceCriterion = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n adGroupId,\r\n}) =>\r\n readCampaignCriterions({\r\n cid,\r\n aid,\r\n campaignId,\r\n adGroupId,\r\n type: \"isof(Criterion,'Model.DeviceCriterion')\",\r\n });\r\n","/* eslint-disable no-param-reassign */\r\nimport _ from 'underscore';\r\nimport { getDefaultAdGroup } from '../../native-ads/constants';\r\n\r\nexport const defaultNativeAdGroup = {\r\n getDefaultAdGroup,\r\n defaultProperties: ['Name', 'FrequencyCapSettings', 'CpmBid', 'SearchBid', 'UseOptimizedTargeting', 'AdRotation'],\r\n setCustomProperties: (data) => {\r\n data.StartDate = new Date();\r\n },\r\n defaultTargetingProperties: ['ageRanges', 'genderTypes', 'deviceTypes', 'initialDeviceTypes'],\r\n setCustomTargetingProperties: _.noop,\r\n};\r\n\r\nexport const defaultDealAdGroup = {\r\n getDefaultAdGroup,\r\n defaultProperties: ['Name', 'FrequencyCapSettings'],\r\n setCustomProperties: (data) => {\r\n data.StartDate = new Date();\r\n },\r\n defaultTargetingProperties: [],\r\n setCustomTargetingProperties: _.noop,\r\n};\r\n\r\nexport const defaultCTVAdGroup = {\r\n getDefaultAdGroup,\r\n defaultProperties: ['Name', 'FrequencyCapSettings'],\r\n setCustomProperties: (data) => {\r\n data.StartDate = new Date();\r\n },\r\n defaultTargetingProperties: ['ageRanges', 'genderTypes'],\r\n setCustomTargetingProperties: _.noop,\r\n};\r\n","import { useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { isAudience, isCTVCampaign, isDealCampaign } from '../../../step-constants';\r\nimport { defaultNativeAdGroup, defaultDealAdGroup, defaultCTVAdGroup } from './default-adgroup';\r\n\r\nconst useDefaultAdGroupForFlow = (flow) => {\r\n if (isAudience(flow)) {\r\n return defaultNativeAdGroup;\r\n }\r\n\r\n if (isDealCampaign(flow)) {\r\n return defaultDealAdGroup;\r\n }\r\n\r\n if (isCTVCampaign(flow)) {\r\n return defaultCTVAdGroup;\r\n }\r\n\r\n return {};\r\n};\r\n\r\nexport const useDefaultAdGroup = (flow) => {\r\n const i18n = useContext(I18nContext);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const {\r\n getDefaultAdGroup = _.noop,\r\n defaultProperties,\r\n setCustomProperties = _.noop,\r\n defaultTargetingProperties,\r\n setCustomTargetingProperties = _.noop,\r\n } = useDefaultAdGroupForFlow(flow) || {};\r\n\r\n const defaultAdGroupModel = getDefaultAdGroup(i18n, serverContext);\r\n const { data: defaultAdGroupData } = defaultAdGroupModel || {};\r\n\r\n const defaultAdGroup = _.pick(defaultAdGroupData, defaultProperties);\r\n setCustomProperties(defaultAdGroup);\r\n\r\n const defaultTargeting = _.pick(defaultAdGroupData, defaultTargetingProperties);\r\n setCustomTargetingProperties(defaultTargeting);\r\n\r\n return {\r\n defaultAdGroup,\r\n defaultTargeting,\r\n };\r\n};\r\n","\r\nimport _, { extend, each } from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { useContext, useCallback } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport {\r\n loadBundleCountries,\r\n saveAdGroup,\r\n modelToViewModelForAdGroup,\r\n modelToViewModelForCampaign,\r\n readLocationCriterions,\r\n readDayTimeCriterions,\r\n readTargetingCriterions,\r\n readAudienceCriterions,\r\n getErrorsPlaceholders,\r\n loadAdGroup,\r\n loadCampaign,\r\n readPlacementCriterions,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { getDealDetails, modelConstraints } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport exclusionRepository from '@bingads-webui-campaign-legacy/advanced-settings/util/exclusion-repository';\r\nimport { ScopeLevel } from '@bingads-webui-campaign-react/constants';\r\nimport { ScenarioContext, ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { useAudienceData } from '@bingads-webui-campaign-react/pmax-lite-data';\r\nimport {\r\n readDayTimeCriterions as campaignReadDayTimeCriterions,\r\n readLocationCriterions as campaignReadLocationCriterions,\r\n readDeviceCriterion as campaignReadDeviceCriterions,\r\n} from '../../shared/model/campaign-criterion';\r\nimport { useDefaultAdGroup } from './use-default-adgroup/index';\r\n\r\nimport {\r\n isAudienceCampaign,\r\n isAudienceAdGroupEdit,\r\n isCTVAdGroupEdit,\r\n isDisplayAdsCampaign,\r\n isVideoAdsCampaign,\r\n isAudienceAdGroupCreation,\r\n isAdGroupCreation,\r\n isDealCampaign,\r\n} from '../../step-constants';\r\n\r\nexport const useAdGroupRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { send, state } = useWizardService();\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { scope } = useContext(ScopeContext) || {};\r\n const scenarioContext = useContext(ScenarioContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n const { cid, aid } = scope.values;\r\n\r\n const { ServicesEndpoints } = serverContext;\r\n const odataUrl = ServicesEndpoints && ServicesEndpoints.CampaignAPI;\r\n const isOnebox = odataUrl && odataUrl.toString().indexOf('redmond.corp') > 0;\r\n const [, getAudienceData] = useAudienceData({ postponeFetch: true, pathOverride: isOnebox ? '/Advertiser/V2' : 'Campaign/V2', audienceType: 'InMarket' });\r\n\r\n const inMarketAudienceRedesignEnabled = _.get(serverContext, ['DynamicPermissions', 'InMarketAudienceRedesign']);\r\n\r\n const {\r\n ads, flow, isAdGroupPublishing, isDefaultAdGroupStepModel,\r\n } = state.context.wizardData;\r\n\r\n const { defaultAdGroup: defaultAdGroupData, defaultTargeting } = useDefaultAdGroup(flow) || {};\r\n const isDealFlow = isDealCampaign(flow);\r\n\r\n const loadAudienceData = useCallback(\r\n () => getAudienceData()\r\n .then(audienceList => _.filter(audienceList, audience => audience && audience.Type === 'InMarket'))\r\n , [getAudienceData]\r\n );\r\n\r\n const allSettledPromiseWrapper = (promises) => {\r\n const wrappedPromises = promises.map(p =>\r\n p.then(\r\n val => ({ status: 'fulfilled', value: val }),\r\n err => ({ status: 'rejected', reason: err })\r\n ));\r\n return Promise.all(wrappedPromises);\r\n };\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const savedAdGroup = state.context.wizardData.adGroup;\r\n\r\n const adGroupId = savedAdGroup ? savedAdGroup.Id : null;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n let loadPromises = {\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n campaignLocationCriterions: campaignReadLocationCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n campaignDeviceCriterions: campaignReadDeviceCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n campaignDayTimeCriterions: campaignReadDayTimeCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n };\r\n\r\n if (isDealFlow) {\r\n loadPromises = extend(loadPromises, {\r\n dealDetails: getDealDetails(cid, aid, campaignId, serverContext),\r\n });\r\n }\r\n\r\n if (adGroupId) {\r\n loadPromises = extend(loadPromises, {\r\n adGroup: loadAdGroup(cid, aid, campaignId, adGroupId),\r\n placementCriterions: readPlacementCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n targetCriterions: readTargetingCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n audienceCriterions: readAudienceCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n exclusions: exclusionRepository.load(campaignId, adGroupId, ScopeLevel.AdGroup),\r\n });\r\n }\r\n\r\n if (inMarketAudienceRedesignEnabled) {\r\n loadPromises = extend(loadPromises, {\r\n audienceList: loadAudienceData(),\r\n });\r\n }\r\n\r\n return allSettledPromiseWrapper(Object.values(loadPromises))\r\n .then((results) => {\r\n const resultMap = Object.keys(loadPromises).reduce((acc, key, index) => {\r\n if (results[index].status === 'fulfilled') {\r\n acc[key] = results[index].value;\r\n }\r\n return acc;\r\n }, {});\r\n\r\n const errors = results.reduce((acc, result) => {\r\n if (result.status === 'rejected') {\r\n acc.push(...result.reason.errors);\r\n }\r\n return acc;\r\n }, []);\r\n\r\n const {\r\n adGroup = {},\r\n campaign = {},\r\n locationCriterions = null,\r\n campaignLocationCriterions,\r\n campaignDeviceCriterions,\r\n bundleCountriesAndLocationCriterions,\r\n dayTimeCriterions = null,\r\n campaignDayTimeCriterions,\r\n targetCriterions = null,\r\n audienceCriterions = null,\r\n exclusions: [campaignExclusions, adgroupExclusions] = [null, null],\r\n audienceList,\r\n placementCriterions = null,\r\n dealDetails = null,\r\n } = resultMap || {};\r\n\r\n const adGroupData = modelToViewModelForAdGroup({\r\n adGroupModel: adGroup,\r\n campaignModel: campaign,\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n campaignLocationCriterionsModel: campaignLocationCriterions ? campaignLocationCriterions.value : [],\r\n campaignDeviceCriterions: campaignDeviceCriterions ? campaignDeviceCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions ? bundleCountriesAndLocationCriterions.bundleCountries : [],\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n targetCriterionsModel: targetCriterions ? targetCriterions.value : [],\r\n audienceCriterionsModel: audienceCriterions ? audienceCriterions.value : [],\r\n placementCriterionsModel: placementCriterions ? placementCriterions.value : [],\r\n i18n,\r\n isAudienceAds: isAudienceCampaign(flow) || isAudienceAdGroupEdit(flow) || isAudienceAdGroupCreation(flow),\r\n isDisplayAds: isDisplayAdsCampaign(flow),\r\n isVideoAds: isVideoAdsCampaign(flow),\r\n isAudienceAdGroupEdit: isAudienceAdGroupEdit(flow),\r\n isEnableMSANDisplayCampaignsEnabled: serverContext.DynamicPermissions && serverContext.DynamicPermissions.EnableMSANDisplayCampaigns,\r\n isEnableMSANVideoCampaignsEnabled: serverContext.DynamicPermissions && serverContext.DynamicPermissions.EnableMSANVideoCampaigns,\r\n defaultAdGroupData,\r\n defaultTargeting,\r\n separateIMA: inMarketAudienceRedesignEnabled,\r\n ads,\r\n });\r\n\r\n if (isDefaultAdGroupStepModel && (isDisplayAdsCampaign(flow) || isVideoAdsCampaign(flow))) {\r\n adGroupData.data.StartDate = new Date();\r\n }\r\n\r\n let adGroupModelWithConstraintsPromise = Promise.resolve(adGroupData.data);\r\n\r\n if (isDealFlow && dealDetails) {\r\n adGroupModelWithConstraintsPromise = modelConstraints(dealDetails, adGroupData.data, serverContext);\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { deal: dealDetails });\r\n }\r\n\r\n return adGroupModelWithConstraintsPromise\r\n .then((constraintModel) => {\r\n adGroupData.data = constraintModel;\r\n })\r\n .then(() => {\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n // eslint-disable-next-line no-param-reassign\r\n dayTimeCriterionsModel: campaignDayTimeCriterions ? each(campaignDayTimeCriterions.value, (cr) => { cr.Id = ''; }) : [],\r\n });\r\n\r\n return {\r\n adGroup: adGroupData.data,\r\n campaign: campaignData.data,\r\n ...bundleCountriesAndLocationCriterions,\r\n exclusions: {\r\n campaignExclusions,\r\n adgroupExclusions,\r\n },\r\n audienceList,\r\n ...getErrorsPlaceholders(),\r\n errors,\r\n };\r\n });\r\n });\r\n };\r\n\r\n const save = ({ data }) => {\r\n const {\r\n adGroup, bundleCountries, bundleLocationCriterions, exclusions,\r\n } = data;\r\n\r\n if (isAdGroupPublishing || isAdGroupCreation(flow)) {\r\n adGroup.Status = 'Active';\r\n } else if (!isAudienceAdGroupEdit(flow) && !isCTVAdGroupEdit(flow)) {\r\n adGroup.Status = 'Paused';\r\n } else if (isAudienceAdGroupEdit(flow) && adGroup.Status === 'Draft') {\r\n adGroup.Status = undefined;\r\n }\r\n\r\n const saveAdGroupPromise = saveAdGroup({\r\n adGroup: { data: adGroup },\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n campaign: state.context.wizardData.campaign,\r\n isDisplayPlus: true,\r\n flow,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveAdGroup'),\r\n i18n,\r\n serverContext,\r\n });\r\n\r\n const savePromises = [saveAdGroupPromise];\r\n\r\n if (isAudienceAdGroupEdit(flow)) {\r\n const saveExclusionsData = {\r\n CampaignId: state.context.wizardData.campaign.Id,\r\n AdGroupId: adGroup.Id,\r\n AdvancedSettings: {\r\n ExcludedSites: exclusions.adgroupExclusions.ExcludedSites,\r\n },\r\n };\r\n const saveExclusionsPromise = exclusionRepository.saveExtensions(saveExclusionsData, ScopeLevel.AdGroup);\r\n savePromises.push(saveExclusionsPromise);\r\n }\r\n\r\n return new Promise((resolve, reject) => {\r\n allSettledPromiseWrapper(savePromises).then((results) => {\r\n const allSuccess = _.every(results, result => result.status === 'fulfilled');\r\n\r\n if (allSuccess) {\r\n if (activity) {\r\n activity.signal(`onAdGroupSavedSuccessfully - Status: ${adGroup.Status}, Id: ${adGroup.Id}`);\r\n }\r\n\r\n const adGroupMtModel = results[0].value.adGroup.data;\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { adGroup: adGroupMtModel, isDefaultAdGroupStepModel: false });\r\n\r\n return resolve(results[0].value);\r\n }\r\n\r\n const errors = _.map(results, (result) => {\r\n if (activity) {\r\n activity.signal(`onAdGroupSavedError - error ${JSON.stringify(result)}`);\r\n }\r\n if (result.status === 'fulfilled') {\r\n return null;\r\n }\r\n\r\n const { serverErrors = {} } = result.reason;\r\n\r\n if (result.reason.NegativeSitesResult) {\r\n const { NegativeSitesResult } = result.reason;\r\n serverErrors.property = 'webExclusions';\r\n serverErrors.NegativeSitesResult = NegativeSitesResult.EntityErrors;\r\n }\r\n\r\n return serverErrors;\r\n });\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return reject({ error: _.flatten(errors.filter(val => val !== null)) });\r\n });\r\n });\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import {\r\n alertStyle,\r\n entitySelectorStyle,\r\n paginationStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const disclaimerSettingsStyles = ({ palette, iconFontFamily = 'MsAds MDL2 Assets' }) => (\r\n {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n '& .form-group': {\r\n '& .form-control-static': {\r\n marginTop: 8,\r\n marginBottom: 8,\r\n position: 'relative',\r\n\r\n '& .addDisclaimerButton': {\r\n position: 'absolute',\r\n left: 0,\r\n },\r\n },\r\n\r\n '& .alert.alert-info': {\r\n marginTop: 5,\r\n marginBottom: 16,\r\n width: 'fit-content',\r\n },\r\n\r\n '& .disclaimer-selector': {\r\n '& .list-selector-option': {\r\n '& .disclaimer-item-name': {\r\n display: 'inline-block',\r\n maxWidth: 180,\r\n },\r\n\r\n '& .action-right': {\r\n float: 'right',\r\n },\r\n },\r\n\r\n '& .open .dropdown-menu': {\r\n position: 'relative',\r\n marginBottom: 10,\r\n\r\n '& .list-selector-content': {\r\n height: 'auto',\r\n },\r\n },\r\n\r\n '& .truncated': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n },\r\n },\r\n\r\n ...entitySelectorStyle({ palette, iconFontFamily }),\r\n ...paginationStyle({ palette }),\r\n },\r\n\r\n '& .col-sm-1, & .col-sm-2, & .col-sm-3, & .col-sm-4, & .col-sm-5, & .col-sm-6, & .col-sm-7, & .col-sm-8, & .col-sm-9, & .col-sm-10, & .col-sm-11, & .col-sm-12': {\r\n float: 'none',\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n },\r\n }\r\n);\r\n\r\nexport const disclaimerPanelStyles = ({ palette, iconFontFamily = 'MsAds MDL2 Assets' }) => ({\r\n '.disclaimer-editor-panel': {\r\n ...alertStyle({ palette, iconFontFamily }),\r\n\r\n '& .panel-content': {\r\n width: 592,\r\n\r\n '& .panel-title': {\r\n fontSize: 20,\r\n fontWeight: '600 !important',\r\n lineHeight: '27px',\r\n },\r\n\r\n '& .panel-body': {\r\n paddingRight: 64,\r\n display: 'flex',\r\n 'flex-direction': 'column',\r\n\r\n '& .disclaimer-setting-content': {\r\n marginBottom: 'auto',\r\n },\r\n\r\n '& .disclaimer-setting-footer': {\r\n marginTop: 32,\r\n\r\n '& button ~ button': {\r\n marginLeft: 10,\r\n },\r\n },\r\n },\r\n\r\n '& .form-group': {\r\n margin: 0,\r\n\r\n '& > .control-label': {\r\n textAlign: 'left',\r\n float: 'none',\r\n width: '100%',\r\n },\r\n\r\n '& > .col-sm-8': {\r\n width: '100%',\r\n },\r\n },\r\n\r\n '& .form-group ~ .form-group': {\r\n marginTop: 32,\r\n },\r\n\r\n '& .col-sm-1, & .col-sm-2, & .col-sm-3, & .col-sm-4, & .col-sm-5, & .col-sm-6, & .col-sm-7, & .col-sm-8, & .col-sm-9, & .col-sm-10, & .col-sm-11, & .col-sm-12': {\r\n float: 'none',\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n },\r\n\r\n '& .alert.alert-info': {\r\n marginTop: 8,\r\n },\r\n\r\n '& div.error': {\r\n color: '#A80000',\r\n margin: '4px 0 0 0',\r\n fontSize: 12,\r\n },\r\n\r\n '& .mt-error': {\r\n backgroundColor: '#fde7e9',\r\n padding: 5,\r\n marginTop: 10,\r\n '& .over-all-errors.error': {\r\n fontSize: 12,\r\n color: '#D90026',\r\n },\r\n },\r\n\r\n '& .setting-disclaimer-layoutType .radio': {\r\n paddingTop: 0,\r\n },\r\n\r\n '& .dropdown-toggle.btn': {\r\n border: 'none',\r\n width: '100%',\r\n height: '100%',\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n borderRadius: 2,\r\n },\r\n\r\n '& .ba-dropdown-selector': {\r\n position: 'relative',\r\n border: `1px solid ${palette.neutralSecondary}`,\r\n minWidth: 132,\r\n verticalAlign: 'baseline',\r\n marginLeft: 8,\r\n height: 30,\r\n borderRadius: 2,\r\n\r\n '& .glyphicon-triangle-bottom': {\r\n marginTop: 4,\r\n '&::before': {\r\n content: '\"\\\\E70D\"',\r\n },\r\n },\r\n },\r\n\r\n '& .dropdown-menu': {\r\n top: 'auto',\r\n position: 'absolute',\r\n width: '100%',\r\n padding: '10px',\r\n },\r\n\r\n '& .ba-list-selector': {\r\n border: 'none',\r\n '& .list-selector-item': {\r\n padding: '5px 10px',\r\n margin: '0',\r\n '&:hover': {\r\n cursor: 'pointer',\r\n backgroundColor: '#f5f5f5',\r\n },\r\n '&.selected': {\r\n background: '#E7F0F6',\r\n },\r\n '& .item-actions': {\r\n float: 'right',\r\n },\r\n },\r\n },\r\n\r\n '& textarea#disclaimer-editor-information-popup': {\r\n height: 169,\r\n resize: 'none',\r\n },\r\n\r\n '& textarea#disclaimer-editor-information-additionalline': {\r\n height: 69,\r\n resize: 'none',\r\n },\r\n\r\n '& .url-editor-form': {\r\n display: 'flex',\r\n gridTemplateColumns: 'auto 1fr',\r\n\r\n '& > select.form-control': {\r\n width: 'auto',\r\n marginRight: 6,\r\n },\r\n\r\n '& > input': {\r\n marginLeft: 6,\r\n },\r\n },\r\n },\r\n },\r\n});","import { getCollapsiblePanelStyles } from '../../shared/styles';\r\nimport { disclaimerSettingsStyles, disclaimerPanelStyles } from './components/styles/disclaimer-setting-styles';\r\n\r\nexport const getCampaignStyles = (components, theme) => ({\r\n divider: {\r\n padding: '5px 0px 0px 4px',\r\n width: '100%',\r\n borderTop: '2px solid #E0E0E0',\r\n marginTop: 30,\r\n marginBottom: 20,\r\n },\r\n budgetContainer: {\r\n '& .budget-title-container span': {\r\n fontWeight: 600,\r\n },\r\n },\r\n campaignShell: {\r\n display: 'flex',\r\n width: 966,\r\n '& .multi-selector': {\r\n maxWidth: 888,\r\n },\r\n '& .collapse-panel.disclaimer': {\r\n '& .collapse-content': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n },\r\n '& .deal-impression-container': {\r\n marginLeft: 8,\r\n },\r\n '& .device-target .collapse-title-bar .title-item .collapse-title': {\r\n marginLeft: '8px',\r\n },\r\n },\r\n collapsiblePanel: getCollapsiblePanelStyles(components, theme),\r\n estimationPart: {\r\n flexGrow: '1',\r\n position: 'sticky',\r\n marginTop: '58px',\r\n marginLeft: '30px',\r\n },\r\n disclaimerContainerWrapper: disclaimerSettingsStyles(theme),\r\n '@global': {\r\n ...disclaimerPanelStyles(theme),\r\n },\r\n});\r\n","import React, { useContext, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport { Label } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ServerValidatedLegacyBudget } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { MinXandrDailyBudgetRangePerCurrency } from '@bingads-webui-campaign-legacy/common-grid-config/budget/get-budget-range';\r\nimport { getBidTitleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { isXandrDisplayAdsCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { getConvertedCurrencyDealMinimumBid, getAccountExchangeRateFromLocalStorage } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\n\r\nimport { getCampaignStyles } from '../styles';\r\n\r\nexport const XandrBudgetAndBidStrategy = ({\r\n data, isPremiumStreaming,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const classes = useDefaultStyles(getCampaignStyles);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { campaign, dealDetails } = data || {};\r\n\r\n const minBudget = useMemo(() => {\r\n if (dealDetails) {\r\n const exchangeRateMapping = getAccountExchangeRateFromLocalStorage(serverContext);\r\n const dealMinimumBid = getConvertedCurrencyDealMinimumBid(dealDetails.MinimumBid, dealDetails.Currency, serverContext.CurrentAccount.CurrencyCode, exchangeRateMapping.val);\r\n return Math.max(dealMinimumBid || 0, MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode]);\r\n }\r\n\r\n return MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode];\r\n }, [dealDetails, serverContext]);\r\n\r\n const topicForBidStrategy = useMemo(() => {\r\n if (isXandrDisplayAdsCampaign(campaign.CampaignSubType)) {\r\n return undefined;\r\n }\r\n\r\n if (isPremiumStreaming) {\r\n return 'pop_BA_PremiumStreaming_BidStrategy';\r\n }\r\n return 'pop_BA_VideoAds_BidStrategyType';\r\n }, [campaign.CampaignSubType, isPremiumStreaming]);\r\n\r\n return (\r\n \r\n {!isEdit &&\r\n not use individuals’ demographics—such as age, gender, location, etc.—for the purpose of personalizing advertising, segmenting, or profiling customers.'))}\r\n level=\"Info\"\r\n icon={()}\r\n dismissible={false}\r\n />}\r\n
\r\n \r\n \r\n new Date()) || isDefaultAdGroupStepModel,\r\n },\r\n }}\r\n allowStartDateSelection={!useCampaignLevelDates}\r\n allowNoEndDateSelection={!useCampaignLevelDates}\r\n allowEndDateSelection={!useCampaignLevelDates}\r\n />\r\n {useCampaignLevelDates && (\r\n \r\n
\r\n {!isDealFlow && \r\n \r\n \r\n {i18n.getString(_TL_('Start and end dates for this campaign are managed at the campaign level. To edit, go to your campaign settings.'))}\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n )}\r\n {bidAmountsLessThanFloorPriceAdGroupError.length > 0 && (\r\n \r\n
\r\n )}\r\n {AgeGenderDisclaimer && \r\n {isValidTargets && isAudience && data.adGroup && data.campaign &&\r\n
\r\n \r\n
\r\n\r\n );\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { makeStyles, Label } from '@fluentui/react-components';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\n\r\nconst useStyles = makeStyles({\r\n dateManagementSelector: {\r\n marginBottom: '16px',\r\n },\r\n stackStyles: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'nowrap',\r\n width: 'auto',\r\n height: 'auto',\r\n boxSizing: 'border-box',\r\n '> *': {\r\n textOverflow: 'ellipsis',\r\n },\r\n '> :not(:first-child)': {\r\n marginTop: '0px',\r\n },\r\n '> *:not(.ms-StackItem)': {\r\n flexShrink: 1,\r\n },\r\n },\r\n stackItem: {\r\n height: 'auto',\r\n width: 'auto',\r\n flexShrink: 1,\r\n },\r\n});\r\n\r\nexport const InfoLabel = ({ label, infoTopic }) => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n {infoTopic &&\r\n
\r\n );\r\n};\r\n\r\nInfoLabel.propTypes = {\r\n label: PropTypes.string.isRequired,\r\n infoTopic: PropTypes.string,\r\n};\r\n\r\nInfoLabel.defaultProps = {\r\n infoTopic: null,\r\n};\r\n","import React, { useState, useMemo, useEffect, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { noop, get } from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport SharedBudgetSwitchView from '@bingads-webui-campaign-legacy/shared-budget/view/shared-budget-switch-editor';\r\nimport Budget from '@bingads-webui-campaign-legacy/budget/view/budget';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ValidatedLegacyBidStrategy } from '@bingads-webui-campaign-react/step-wizard-controls';\r\nimport types from '@bingads-webui-campaign-legacy/bidding-strategy/bidding-strategy-type';\r\n\r\nimport { getBudgetStyles } from './styles/bid-strategy-styles';\r\nimport { InfoLabel } from './info-label';\r\n\r\nconst AudienceBudgetBidStrategyInternal = ({\r\n data,\r\n classes,\r\n updateValidation,\r\n campaignType,\r\n campaignSubType,\r\n isEnableMSANDisplayCampaignsEnabled,\r\n isEnableMSANVideoCampaignsEnabled,\r\n setBudgetView,\r\n hideBidStrategy,\r\n activity,\r\n showBudgetTypeSelection,\r\n allowBudgetTypeSelection,\r\n allowSharedBudgetLibrarySelection,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const campaign = useMemo(() => (\r\n isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled ? data : data.campaign\r\n ), [data, isEnableMSANDisplayCampaignsEnabled, isEnableMSANVideoCampaignsEnabled]);\r\n const bidStrategyName = get(data, ['campaign', 'BidStrategyName'], '');\r\n\r\n const [sharedBudgetRef, setSharedBudgetRef] = useState();\r\n\r\n const sharedBudget = useMemo(() => {\r\n const factory = SharedBudgetSwitchView.newFactory(Budget);\r\n\r\n const sharedBudgetView = factory({\r\n accountCurrencyCode: 'USD',\r\n model: undefined,\r\n withRealTimeUpdates: true,\r\n showBudgetTypeSelection,\r\n allowBudgetTypeSelection,\r\n allowSharedBudgetLibrarySelection,\r\n });\r\n\r\n sharedBudgetView.render();\r\n\r\n return sharedBudgetView;\r\n }, []);\r\n\r\n const onBudgetChange = () => {\r\n const budget = sharedBudget.getValues();\r\n const isValid = sharedBudget.validate();\r\n if (activity) {\r\n activity.signal(`onBudgetChange - ${JSON.stringify(budget)} - isValid: ${isValid}}`);\r\n }\r\n updateValidation(isValid ? [] : [i18n.getString(_TL_('Invalid budget'))], { BudgetId: budget && budget.Id, Budget: { Amount: budget && budget.Amount, Id: budget && budget.Id, Type: budget && budget.Type } });\r\n };\r\n\r\n useEffect(() => {\r\n if (setBudgetView && sharedBudget) {\r\n setBudgetView(sharedBudget);\r\n }\r\n }, [sharedBudget, setBudgetView]);\r\n\r\n useEffect(() => {\r\n if (sharedBudgetRef) {\r\n sharedBudgetRef.innerHTML = '';\r\n sharedBudgetRef.append(sharedBudget.el);\r\n\r\n sharedBudget.update(campaign.Budget);\r\n sharedBudget.budgetView.on('budget.updated', onBudgetChange);\r\n sharedBudget.budgetView.on('change', onBudgetChange);\r\n sharedBudget.grid.gridView.on('didUpdate', onBudgetChange);\r\n sharedBudget.viewModel.sharedBudgetSwitch.subscribe(() => {\r\n onBudgetChange();\r\n });\r\n }\r\n\r\n return noop;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [sharedBudgetRef]);\r\n\r\n useEffect(() => {\r\n sharedBudget.viewModel.isCPSSelected(campaign.BiddingScheme.Type === types.costPerSale);\r\n sharedBudget.viewModel.sharedBudgetIsNotAllowedWarning(i18n.getString(_TL_('Shared budget is not allowed if CPS is selected')));\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [campaign.BiddingScheme.Type]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nAudienceBudgetBidStrategyInternal.protoTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n campaign: PropTypes.shape({\r\n Budget: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n }),\r\n BiddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n BidStrategyId: PropTypes.number,\r\n }),\r\n BidStrategyName: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n campaignType: PropTypes.string.isRequired,\r\n campaignSubType: PropTypes.string,\r\n isEnableMSANDisplayCampaignsEnabled: PropTypes.bool,\r\n isEnableMSANVideoCampaignsEnabled: PropTypes.bool,\r\n setBudgetView: PropTypes.func,\r\n hideBidStrategy: PropTypes.bool,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n showBudgetTypeSelection: PropTypes.bool,\r\n allowBudgetTypeSelection: PropTypes.bool,\r\n allowSharedBudgetLibrarySelection: PropTypes.bool,\r\n};\r\n\r\nAudienceBudgetBidStrategyInternal.defaultProps = {\r\n campaignSubType: undefined,\r\n isEnableMSANDisplayCampaignsEnabled: false,\r\n isEnableMSANVideoCampaignsEnabled: false,\r\n setBudgetView: undefined,\r\n hideBidStrategy: false,\r\n activity: undefined,\r\n showBudgetTypeSelection: false,\r\n allowBudgetTypeSelection: true,\r\n allowSharedBudgetLibrarySelection: true,\r\n};\r\n\r\nexport const AudienceBudgetBidStrategy = withCustomValidation(withDefaultStyles(AudienceBudgetBidStrategyInternal, getBudgetStyles));\r\n","import {\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n uiblockerStyle,\r\n sharedBudgetGridWrapper,\r\n containerBudgetStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const getBudgetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...containerBudgetStyle({ palette }),\r\n ...sharedBudgetGridWrapper({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .displayNone': {\r\n display: 'none',\r\n },\r\n },\r\n budgetHeader: {\r\n marginBottom: 6,\r\n },\r\n});\r\n","import React, { useMemo, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { getBidTitleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { BudgetTypes } from '../../../common/constants';\r\n\r\nexport const BudgetBidStrategyDetails = ({ budget, biddingScheme }) => {\r\n const i18n = useContext(I18nContext);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const {\r\n Amount,\r\n Id,\r\n Type,\r\n } = budget || {};\r\n\r\n const budgetTitleDetails = useMemo(() => {\r\n if (Id) {\r\n return i18n.getString(_TL_('Budget applied from shared library'));\r\n }\r\n\r\n if (Amount == null || Amount === 0) {\r\n return i18n.getString(_TL_('No budget selected'));\r\n }\r\n\r\n const currencyCode = serverContext.CurrentAccount.CurrencyCode;\r\n const currencySymbol = i18n.getCurrencySymbol(currencyCode);\r\n\r\n const individualBudget = i18n.getString(_TL_('Individual budget'));\r\n\r\n if (Type === BudgetTypes.LifetimeBudgetStandard) {\r\n return `${individualBudget}: ${currencySymbol}${Amount} ${i18n.getString(_TL_('campaign total'))}`;\r\n }\r\n\r\n return `${individualBudget}: ${currencySymbol}${Amount}/${i18n.getString(_TL_('day'))}`;\r\n }, [Amount, Id, Type, i18n, serverContext.CurrentAccount.CurrencyCode]);\r\n\r\n const bidStrategyDetails = useMemo(() =>\r\n `${i18n.getString(_TL_('Bid strategy'))}: ${getBidTitleDetails(i18n, biddingScheme)}`, [biddingScheme, i18n]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n setSharedBudgetRef(newRef)} />\r\n
\r\n {!hideBidStrategy &&\r\n \r\n
\r\n }\r\n \r\n {budgetTitleDetails}\r\n
\r\n \r\n {bidStrategyDetails}\r\n
\r\n \r\n );\r\n};\r\n\r\nBudgetBidStrategyDetails.propTypes = {\r\n budget: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n }),\r\n biddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n }),\r\n};\r\n\r\nBudgetBidStrategyDetails.defaultProps = {\r\n budget: {},\r\n biddingScheme: null,\r\n};\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { CampaignGoalTypeBoostV2 } from '@bingads-webui-campaign-react/campaign-onboarding-v2';\r\n\r\nexport const CampaignGoal = ({ campaign }) => {\r\n const CampaignGoali18nMap = CampaignGoalTypeBoostV2;\r\n\r\n const campaignGoalText = _.result(\r\n _.find(campaign.CampaignSettings, i => _.has(i, 'CampaignObjectiveSettingType')),\r\n 'CampaignObjectiveSettingType'\r\n );\r\n\r\n return _.has(CampaignGoali18nMap, campaignGoalText) ? (\r\n {CampaignGoali18nMap[campaignGoalText]}\r\n ) : {_TL_('Campaign goal not set')};\r\n};\r\n\r\nCampaignGoal.propTypes = {\r\n campaign: PropTypes.shape({\r\n CampaignSettings: PropTypes.shape([]).isRequired,\r\n }).isRequired,\r\n};\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport {\r\n audienceTargetsSettingsStyles,\r\n criterionSettingIndustryStyles,\r\n audienceBudgetBidsStyles,\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getBidAdjustmentStylesTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingIndustryStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...audienceTargetsSettingsStyles({ palette }),\r\n ...audienceBudgetBidsStyles({ palette }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n editTargetButtonContainer: {\r\n paddingBottom: '8px',\r\n },\r\n noTargetSelected: {\r\n marginRight: '5px',\r\n },\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n","import React, { useContext, useCallback, useEffect, useMemo, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { BidAdjustment } from '@bingads-webui-campaign/target-bid-adjustment';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { modelToViewModelForLocationTargets } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { getBidAdjustmentStylesTargetStyles } from './styles/bid-adjustments-styles';\r\n\r\nconst criterionTypeToString = {\r\n JobFunction: _TL_('Job Function'),\r\n Industry: _TL_('Industry'),\r\n CompanyName: _TL_('Company'),\r\n Age: _TL_('Age'),\r\n Gender: _TL_('Gender'),\r\n Device: _TL_('Device'),\r\n Location: _TL_('Location'),\r\n Audience: _TL_('Audience'),\r\n};\r\n\r\nconst typeToValidationKey = {\r\n JobFunction: ['jobTargets', 'negativeJobTargets'],\r\n Industry: ['industry', 'negativeIndustry'],\r\n CompanyName: ['companyNameTargets', 'negativeCompanyNameTargets'],\r\n Age: ['ageRanges'],\r\n Gender: ['genderTypes'],\r\n Audience: ['audiences'],\r\n Location: ['locationTargets'],\r\n};\r\n\r\nconst criterionsToFetch = [\r\n 'AgeCriterion',\r\n 'GenderCriterion',\r\n 'CompanyNameCriterion',\r\n 'IndustryCriterion',\r\n 'JobFunctionCriterion',\r\n 'LocationCriterion',\r\n 'AudienceCriterion',\r\n];\r\n\r\nconst BidAdjustmentInternal = ({\r\n cid,\r\n data,\r\n aid,\r\n campaignId,\r\n adGroupId,\r\n updateValidation,\r\n}) => {\r\n const [bidAdjustmentRef, setBidAdjustmentRef] = useState();\r\n\r\n const { bundleCountries } = data;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getBidAdjustmentStylesTargetStyles);\r\n\r\n const currentLevelTargetInfo = useMemo(() => (new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: true,\r\n })), []);\r\n\r\n const onChange = useCallback((changedKey) => {\r\n const updatedItems = currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const targets = updatedItems.filter(({ CriterionType }) => (CriterionType === changedKey))\r\n .map(({ Id, Status, Criterion }) => ({ Id, status: Status, Criterion }));\r\n\r\n const negativeTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === `Negative${changedKey}`))\r\n .map(({ Id, Status, Criterion }) => ({ Id, status: Status, Criterion }));\r\n\r\n const validationKeys = typeToValidationKey[changedKey];\r\n if (targets.length > 0 && negativeTargets.length > 0) {\r\n updateValidation([], { [validationKeys[0]]: [...targets], [validationKeys[1]]: [...negativeTargets] });\r\n } else if (negativeTargets.length > 0) {\r\n updateValidation([], { [validationKeys[1]]: [...negativeTargets] });\r\n } else if (changedKey === 'Audience') {\r\n const audiences = currentLevelTargetInfo.criterionsByType.Audience;\r\n updateValidation([], { audiences: [...audiences] });\r\n } else if (changedKey === 'Location') {\r\n const adjustedLocations = currentLevelTargetInfo.criterionsByType.Location;\r\n\r\n const modelForParsing = _.map(adjustedLocations, location => ({\r\n ...location,\r\n CriterionBid: {\r\n Multiplier: location.Criterion.BidAdjustment,\r\n },\r\n }));\r\n\r\n const location = modelToViewModelForLocationTargets({\r\n model: modelForParsing, adGroupId, bundleCountries, overrideOriginalBidAdjustment: true,\r\n });\r\n\r\n updateValidation([], { locationTargets: location.locationTargets });\r\n } else {\r\n updateValidation([], { [validationKeys[0]]: [...targets] });\r\n }\r\n\r\n if (activity) {\r\n activity.signal('onBidAdjustmentChanged');\r\n }\r\n }, [activity, adGroupId, bundleCountries, currentLevelTargetInfo, updateValidation]);\r\n\r\n useEffect(() => {\r\n if (bidAdjustmentRef) {\r\n bidAdjustmentRef.innerHTML = '';\r\n\r\n Promise.all([\r\n currentLevelTargetInfo.fetchCriterions(campaignId, adGroupId, criterionsToFetch),\r\n currentLevelTargetInfo.initializeWithhAdGroupAudience(campaignId, adGroupId),\r\n ]).then(() => {\r\n const allKeys = currentLevelTargetInfo.getAllNoneEmptyTypeKeys();\r\n\r\n _.each(allKeys, (key) => {\r\n currentLevelTargetInfo.off(`AdGroupCriterion${key}Changed`, () => onChange(key));\r\n const view = new BidAdjustment({\r\n currentLevelTargetInfo,\r\n isForVNext: true,\r\n campaignId,\r\n adGroupId,\r\n criterionTypes: [key],\r\n supportCashbackSettings: false,\r\n showExclusion: false,\r\n });\r\n\r\n view.render();\r\n\r\n const header = document.createElement('h5');\r\n header.innerHTML = i18n.getString(criterionTypeToString[key]);\r\n header.style.cssText = 'margin-top: 20px;';\r\n\r\n bidAdjustmentRef.append(header);\r\n bidAdjustmentRef.append(view.el);\r\n\r\n onChange(key);\r\n currentLevelTargetInfo.on(`AdGroupCriterion${key}Changed`, () => onChange(key));\r\n });\r\n });\r\n }\r\n }, [aid, bidAdjustmentRef, campaignId, adGroupId, cid, currentLevelTargetInfo, i18n, onChange]);\r\n\r\n return (\r\n \r\n ,\r\n };\r\n return updatedVideoStep;\r\n } else if (step.id === STEP_PATHS.NATIVE_AD) {\r\n if (adsType === AdFormat.Display) {\r\n const updatedStep = {\r\n ...step,\r\n view: props => ,\r\n repository: useVideoAdsRepository,\r\n},\r\n{\r\n id: STEP_PATHS.DISPLAY_AD,\r\n view: props => ,\r\n repository: useNativeAdRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_NATIVE_AD,\r\n view: props => ,\r\n repository: useMultipleNativeAdsRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_AD_MANAGER,\r\n view: props => ,\r\n repository: useNativeAdsManagerRepository,\r\n},\r\n{\r\n id: STEP_PATHS.AD_GROUP,\r\n view: props => ,\r\n repository: useAdGroupRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_CREATION,\r\n view: props => ,\r\n repository: useCampaignRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_EDIT,\r\n view: props => ,\r\n repository: useCampaignEditRepository,\r\n},\r\n{\r\n id: STEP_PATHS.SUMMARY,\r\n view: props => ,\r\n repository: useSummaryRepository,\r\n}];\r\n\r\nexport const getStepConfigMultiAdFormat = (permissions, wizardType, adsType = '', loadClipchampPlayer = null) => StepConfigMultiAdFormat.map((step) => {\r\n if (_.get(permissions, ['dynamic', 'ConversionAssociationWarning']) && editWizardTypeList.includes(wizardType) && step.id === STEP_PATHS.CAMPAIGN_EDIT\r\n ) {\r\n const mapStep = {\r\n ...step,\r\n machineOptions: {\r\n guards: {\r\n needsConfirming: context => getNeedConfirming(permissions, context),\r\n },\r\n },\r\n\r\n };\r\n return mapStep;\r\n } else if (step.id === STEP_PATHS.NATIVE_AD) {\r\n if (adsType === AdFormat.Display) {\r\n const updatedStep = {\r\n ...step,\r\n view: props => ,\r\n };\r\n return updatedStep;\r\n }\r\n\r\n return {\r\n ...step,\r\n view: props => ,\r\n };\r\n } else if (step.id === STEP_PATHS.VIDEO_AD) {\r\n const updatedVideoStep = {\r\n ...step,\r\n view: props => ,\r\n };\r\n return updatedVideoStep;\r\n }\r\n\r\n return step;\r\n});\r\n\r\nexport const StepConfigMultiAdFormat = [{\r\n id: STEP_PATHS.NATIVE_AD,\r\n view: props => ,\r\n repository: useSingleMultiAdFormatRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_NATIVE_AD,\r\n view: props => ,\r\n repository: useMultiAdFormatRepository,\r\n},\r\n{\r\n id: STEP_PATHS.VIDEO_AD,\r\n view: props => ,\r\n repository: useVideoAdsRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_AD_MANAGER,\r\n view: props => ,\r\n repository: useMultiAdFormatAdsManagerRepository,\r\n},\r\n{\r\n id: STEP_PATHS.AD_GROUP,\r\n view: props => ,\r\n repository: useAdGroupRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_CREATION,\r\n view: props => ,\r\n repository: useCampaignRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_EDIT,\r\n view: props => ,\r\n repository: useCampaignEditRepository,\r\n},\r\n{\r\n id: STEP_PATHS.SUMMARY,\r\n view: props => ,\r\n repository: useSummaryRepository,\r\n}];\r\n","import { useContext } from 'react';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\n\r\nexport const useNativeAdsManagerRepository = () => {\r\n const { state } = useWizardService();\r\n\r\n const load = () => new Promise((resolve) => {\r\n resolve(state.context.wizardData);\r\n });\r\n\r\n const save = useContext(() => Promise.resolve());\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import { useContext } from 'react';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\n\r\nexport const useMultiAdFormatAdsManagerRepository = () => {\r\n const { state } = useWizardService();\r\n\r\n const load = () => new Promise((resolve) => {\r\n resolve(state.context.wizardData);\r\n });\r\n\r\n const save = useContext(() => Promise.resolve());\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import React, { useMemo, useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Wizard,\r\n LayoutContainer,\r\n Layout,\r\n StepContainer,\r\n} from '@bingads-webui-react/wizard';\r\nimport {\r\n BusyBlocker,\r\n DefaultTemplate,\r\n CancelWizardDialog,\r\n ConfirmWizardDialog,\r\n} from '@bingads-webui-react/wizard-ui-library';\r\nimport { WizardPerfMarker } from '@bingads-webui-campaign/wizard-performance-marker';\r\nimport { Scenario, Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { PerformanceMarkerProvider } from '@bingads-webui-campaign-react/performance-marker-provider';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { MmpFetchProvider } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { withRecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { withLoggingContext } from '@bingads-webui-campaign-react/copilot-loggers';\r\nimport { useConfirmDialogConfigWithLogger } from '@bingads-webui-campaign-react/campaign-settings-wizard-v1-utils';\r\n\r\nimport { getFlow } from '../step-utils';\r\nimport {\r\n getStepConfig,\r\n getStepConfigMultiAdFormat,\r\n} from '../steps';\r\nimport { FLOWS_TO_FIRST_STEP } from '../step-constants';\r\n\r\nconst DisplayPlusWizardInternal = ({\r\n wizardType, flowType, routeToNavigateToWhenDone, initialWizardData, scope, perfMarker, permissions, children, adsType, loadClipchampPlayer,\r\n}) => {\r\n const instrumentation = useContext(InstrumentationContext);\r\n const isEnableMultiAdFormat = permissions && permissions.dynamic && permissions.dynamic.MultiAdFormat && !permissions.IsAmplifyEnabled;\r\n const isConversionAssociationWarningEnabled = permissions && permissions.dynamic && permissions.dynamic.ConversionAssociationWarning;\r\n\r\n const wizardPerfMarker = useMemo(() => (\r\n perfMarker.createChild(`DisplayPlusWizard-${wizardType}`)\r\n ), [perfMarker, wizardType]);\r\n\r\n const initialStep = FLOWS_TO_FIRST_STEP[flowType];\r\n\r\n const steps = useMemo(() => (isEnableMultiAdFormat ? getStepConfigMultiAdFormat(permissions, wizardType, adsType, loadClipchampPlayer) : getStepConfig(permissions, wizardType, adsType, loadClipchampPlayer)), [isEnableMultiAdFormat, permissions, wizardType, adsType, loadClipchampPlayer]);\r\n\r\n const config = useMemo(() => ({\r\n id: 'display-plus-wizard',\r\n initialStep,\r\n steps,\r\n initialFlowFactors: { flow: flowType },\r\n initialWizardData: {\r\n flow: flowType,\r\n ...initialWizardData,\r\n },\r\n getFlow: ({ flow }) => getFlow({ flow, permissions }),\r\n actions: {\r\n onDone: () => scope.save(routeToNavigateToWhenDone),\r\n onExited: () => scope.save(routeToNavigateToWhenDone),\r\n },\r\n loadClipchampPlayer,\r\n attachStepActivities: false,\r\n }), [flowType, initialStep, initialWizardData, permissions, routeToNavigateToWhenDone, scope, steps, adsType, loadClipchampPlayer]);\r\n\r\n useEffect(() => {\r\n setClarityTag({ DisplayPlusCampaigns: flowType });\r\n }, [flowType]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nDisplayPlusWizardInternal.propTypes = {\r\n siteMap: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n save: PropTypes.func.isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n wizardType: PropTypes.string.isRequired,\r\n flowType: PropTypes.string.isRequired,\r\n routeToNavigateToWhenDone: PropTypes.func.isRequired,\r\n initialWizardData: PropTypes.shape({}),\r\n permissions: PropTypes.shape({}).isRequired,\r\n children: PropTypes.node,\r\n adsType: PropTypes.string,\r\n};\r\n\r\nDisplayPlusWizardInternal.defaultProps = {\r\n initialWizardData: {},\r\n children: null,\r\n adsType: '',\r\n};\r\n\r\nexport const DisplayPlusWizard = withPermissions(withScope(withLoggingContext(withRecommendationContext(DisplayPlusWizardInternal))));\r\n","import React, { useContext, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useIsInternalUser } from '@bingads-webui-campaign-react/basic-context-utils';\r\nimport { Stack, PrimaryButton, DefaultButton } from '@fluentui/react';\r\nimport {\r\n useWizardService,\r\n getIsFirstStep,\r\n getIsLastStep,\r\n getCurrentStepId,\r\n matchStepState,\r\n STEP_STATES,\r\n WIZARD_EVENTS,\r\n} from '@bingads-webui-react/wizard';\r\nimport {\r\n Text,\r\n makeStyles,\r\n shorthands,\r\n tokens\r\n} from '@fluentui/react-components';\r\nimport { CancelButton } from '@bingads-webui-react/wizard-ui-library';\r\nimport { MessageBar, MessageBarTitle, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { STEP_PATHS, FLOWS } from '../step-constants';\r\nimport { useSkipAdCreationState } from '../common/use-skip-ad-creation';\r\n\r\nconst useStyles = makeStyles({\r\n warning: {\r\n ...shorthands.margin(tokens.spacingVerticalL, tokens.spacingVerticalNone),\r\n },\r\n});\r\n\r\n\r\nconst SaveAndPublish = () => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSaveAndPublishClicked');\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isPublishing: true });\r\n send(WIZARD_EVENTS.SAVE_AND_EXIT);\r\n }, [activity, send]);\r\n\r\n const buttonText = useMemo(() => {\r\n const currentStep = getCurrentStepId(state);\r\n\r\n if (currentStep === STEP_PATHS.SUMMARY) {\r\n return i18n.getString(_TL_('Go live'));\r\n }\r\n\r\n return i18n.getString(_TL_('Save & go live'));\r\n }, [i18n, state]);\r\n\r\n return (\r\n \r\n {buttonText}\r\n \r\n );\r\n};\r\n\r\nconst SaveAsDraft = () => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSaveAsDraftClicked');\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isPublishing: false });\r\n send(WIZARD_EVENTS.SAVE_AND_EXIT);\r\n }, [activity, send]);\r\n\r\n const buttonText = useMemo(() => {\r\n const currentStep = getCurrentStepId(state);\r\n\r\n if (currentStep === STEP_PATHS.SUMMARY) {\r\n return i18n.getString(_TL_('Don\\'t go live'));\r\n }\r\n\r\n return i18n.getString(_TL_('Save & don\\'t go live'));\r\n }, [i18n, state]);\r\n\r\n return (\r\n \r\n {buttonText}\r\n \r\n );\r\n};\r\n\r\nexport const SaveAndExitButton = () => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSaveAndExitButtonClicked');\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isAdGroupPublishing: true });\r\n send(WIZARD_EVENTS.SAVE_AND_EXIT);\r\n }, [activity, send]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Save and exit'))}\r\n \r\n );\r\n};\r\n\r\nexport const SkipAdCreationButton = () => {\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n const { state, send } = useWizardService();\r\n const [, setSkipAdCreation] = useSkipAdCreationState();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING)\r\n || matchStepState(state, STEP_STATES.LOADING)\r\n || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSkipAdCreationButtonClicked');\r\n }\r\n send(WIZARD_EVENTS.SAVE_EMPTY_AND_NEXT);\r\n setSkipAdCreation(true);\r\n }, [activity, send, setSkipAdCreation]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Proceed without ad'))}\r\n \r\n );\r\n};\r\n\r\nexport const NextButton = ({ buttonText, disabled }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n const currentStepId = getCurrentStepId(state);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (currentStepId === STEP_PATHS.MULTI_AD_MANAGER) {\r\n send(WIZARD_EVENTS.NAVIGATE_TO, { stepId: STEP_PATHS.AD_GROUP });\r\n } else {\r\n send(WIZARD_EVENTS.SAVE_AND_NEXT);\r\n }\r\n }, [currentStepId, send]);\r\n\r\n return (\r\n \r\n {buttonText ? i18n.getString(buttonText) : i18n.getString(_TL_('Next'))}\r\n \r\n );\r\n};\r\n\r\nexport const BackButton = ({ buttonText }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n const currentStepId = getCurrentStepId(state);\r\n\r\n const onBackClicked = useCallback(() => {\r\n if (currentStepId === STEP_PATHS.AD_GROUP && state.context.wizardData.flow === FLOWS.MULTI_AUDIENCE_CAMPAIGNS) {\r\n send(WIZARD_EVENTS.NAVIGATE_TO, { stepId: STEP_PATHS.MULTI_AD_MANAGER });\r\n } else {\r\n send(WIZARD_EVENTS.BACK);\r\n }\r\n }, [currentStepId, send, state.context.wizardData.flow]);\r\n\r\n return (\r\n \r\n {buttonText ? i18n.getString(buttonText) : i18n.getString(_TL_('Back'))}\r\n \r\n );\r\n};\r\nBackButton.propTypes = {\r\n buttonText: PropTypes.string,\r\n};\r\nBackButton.defaultProps = {\r\n buttonText: undefined,\r\n};\r\n\r\n\r\nNextButton.propTypes = {\r\n buttonText: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n};\r\nNextButton.defaultProps = {\r\n buttonText: undefined,\r\n disabled: false,\r\n};\r\n\r\nexport const DisplayPlusStepFooter = ({\r\n nextButtonText,\r\n nextDisabled,\r\n backButtonText,\r\n cancelButtonText,\r\n hideBackButton,\r\n}) => {\r\n const { state } = useWizardService();\r\n const { dynamic: { AWFWebExclusionsWarning: showAWFWarning } } = useContext(PermissionsContext);\r\n const i18n = useContext(I18nContext);\r\n const styles = useStyles();\r\n const isFirstStep = getIsFirstStep(state);\r\n const isLastStep = getIsLastStep(state);\r\n\r\n const currentStep = getCurrentStepId(state);\r\n\r\n const isInternalUser = useIsInternalUser();\r\n const wasAdAlreadyCreated = state.context.wizardData.ads;\r\n\r\n return (\r\n <>\r\n {showAWFWarning && isLastStep && (\r\n \r\n \r\n )}\r\n \r\n {(isFirstStep && isInternalUser && !wasAdAlreadyCreated) && \r\n \r\n );\r\n};\r\nDisplayPlusStepFooter.propTypes = {\r\n nextButtonText: PropTypes.string,\r\n nextDisabled: PropTypes.bool,\r\n backButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n hideBackButton: PropTypes.bool,\r\n};\r\nDisplayPlusStepFooter.defaultProps = {\r\n nextButtonText: undefined,\r\n nextDisabled: false,\r\n backButtonText: undefined,\r\n cancelButtonText: undefined,\r\n hideBackButton: false,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@fluentui/react';\r\nimport {\r\n SaveAndExitButton,\r\n CancelButton,\r\n} from '@bingads-webui-react/wizard-ui-library';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { MessageBar, MessageBarTitle, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport {\r\n Text,\r\n makeStyles,\r\n shorthands,\r\n tokens\r\n} from '@fluentui/react-components';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n warning: {\r\n ...shorthands.margin(tokens.spacingVerticalL, tokens.spacingVerticalNone),\r\n },\r\n});\r\n\r\nexport const EditFooter = ({\r\n saveAndExitButtonText,\r\n cancelButtonText,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useStyles();\r\n const { dynamic: { AWFWebExclusionsWarning: showAWFWarning } } = useContext(PermissionsContext);\r\n\r\n return (\r\n <>\r\n {showAWFWarning && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nEditFooter.propTypes = {\r\n saveAndExitButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n};\r\n\r\nEditFooter.defaultProps = {\r\n saveAndExitButtonText: undefined,\r\n cancelButtonText: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@fluentui/react';\r\nimport {\r\n useWizardService,\r\n getIsFirstStep,\r\n getIsLastStep,\r\n getCurrentStepId,\r\n} from '@bingads-webui-react/wizard';\r\nimport { CancelButton } from '@bingads-webui-react/wizard-ui-library';\r\nimport { BackButton, NextButton, SaveAndExitButton } from './footer';\r\nimport { STEP_PATHS } from '../step-constants';\r\n\r\nexport const AdGroupCreationFooter = ({\r\n nextButtonText,\r\n backButtonText,\r\n cancelButtonText,\r\n}) => {\r\n const { state } = useWizardService();\r\n const isFirstStep = getIsFirstStep(state);\r\n const isLastStep = getIsLastStep(state);\r\n\r\n const currentStep = getCurrentStepId(state);\r\n\r\n return (\r\n \r\n {isFirstStep && \r\n );\r\n};\r\nAdGroupCreationFooter.propTypes = {\r\n nextButtonText: PropTypes.string,\r\n backButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n};\r\n\r\nAdGroupCreationFooter.defaultProps = {\r\n nextButtonText: undefined,\r\n backButtonText: undefined,\r\n cancelButtonText: undefined,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useMemo, useCallback, useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Constants } from '@bingads-webui-theme-2018/theme-fluent';\r\nimport { ResponsiveStepList } from '@bingads-webui-react/step-progress-indicator';\r\nimport { useResponsiveSize } from '@bingads-webui-react/with-responsive-size';\r\nimport {\r\n useWizardService,\r\n getCurrentStepId,\r\n getCurrentFlow,\r\n WIZARD_EVENTS,\r\n} from '@bingads-webui-react/wizard';\r\n\r\nimport { getStepListConfig } from './steps';\r\n\r\nexport const StepList = () => {\r\n const { state, send } = useWizardService();\r\n const i18n = useContext(I18nContext);\r\n\r\n const currentStepId = getCurrentStepId(state);\r\n const currentFlow = getCurrentFlow(state);\r\n const displayMode = useResponsiveSize(Constants.ResponsiveSizeBreakpoints);\r\n const { flow } = state.context.wizardData;\r\n\r\n const stepListConfig = useMemo(() => getStepListConfig({ i18n, flow, currentStepId }), [currentStepId, flow, i18n]);\r\n\r\n const getDefaultOnItemClickFn = useCallback((step) => {\r\n let toStep;\r\n if (currentFlow.includes(step.id)) {\r\n toStep = step;\r\n } else if (!_.isEmpty(step.steps)) {\r\n const firstSubStep = _.find(step.steps, s => currentFlow.includes(s.id));\r\n if (firstSubStep) {\r\n toStep = firstSubStep;\r\n }\r\n }\r\n if (toStep && toStep.isBehind) {\r\n return () => {\r\n send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId: toStep.id,\r\n });\r\n };\r\n }\r\n return undefined;\r\n }, [currentFlow, send]);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nBidAdjustmentInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n campaignId: PropTypes.string.isRequired,\r\n adGroupId: PropTypes.string.isRequired,\r\n data: PropTypes.shape({\r\n bundleCountries: PropTypes.arrayOf(PropTypes.shape([])),\r\n }).isRequired,\r\n};\r\n\r\nexport const ValidatedBidAdjustment = withCustomValidation(BidAdjustmentInternal);\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { Checkbox } from '@bingads-webui-react/checkbox';\r\n\r\nexport const CallToActionOptOut = (props) => {\r\n const {\r\n i18n,\r\n data,\r\n onDataChange,\r\n } = props;\r\n\r\n const isCallToActionOptOut = data.campaign.IsCallToActionOptOut;\r\n\r\n const onCheckedChange = (event) => {\r\n const { checked } = event.target;\r\n onDataChange({\r\n data: {\r\n ...data,\r\n campaign: {\r\n ...data.campaign,\r\n IsCallToActionOptOut: !checked,\r\n },\r\n },\r\n isValid: true,\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n setBidAdjustmentRef(newRef)} />\r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Enable calls to action for Native ads'))}\r\n \r\n
\r\n );\r\n};\r\n\r\nCallToActionOptOut.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import React, { useState, useEffect, useRef, useCallback } from 'react';\r\nimport { AdsCampaignDisclaimers } from '@bingads-webui-campaign-react/ads-campaign-disclaimers';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\n\r\nexport const getAssociatedDisclaimer = (campaignId, repository) => (campaignId ? repository.association.findAll({\r\n where: {\r\n campaignId,\r\n },\r\n}).then((disclaimerdata) => {\r\n if (disclaimerdata && disclaimerdata.length > 0) {\r\n return disclaimerdata[0];\r\n }\r\n return null;\r\n}) : Promise.resolve(null));\r\n\r\nconst DisclaimerExtensionInternal = (props) => {\r\n const {\r\n className,\r\n updateValidation,\r\n campaignId,\r\n repository,\r\n validationProps,\r\n ...rest\r\n } = props;\r\n\r\n const displayPlusDisclaimerRef = useRef(null);\r\n const { data } = validationProps || {};\r\n const { DisclaimerAdsEnabled, associatedDisclaimer } = data || {};\r\n\r\n const onDataChange = useCallback(() => {\r\n const result = displayPlusDisclaimerRef.current.getValues();\r\n const error = displayPlusDisclaimerRef.current.validateAndWarn();\r\n // If no disclaimer is associated, update the change to the outside\r\n if (!result.AdExtensionAssociations || result.AdExtensionAssociations.length === 0) {\r\n result.AdExtensionAssociations = null;\r\n }\r\n updateValidation(error ? [error] : [], result);\r\n }, [updateValidation]);\r\n\r\n const [disclaimerAdsEnabled, setDisClaimerAdsEnabled] = useState(DisclaimerAdsEnabled);\r\n\r\n useEffect(() => {\r\n setDisClaimerAdsEnabled(DisclaimerAdsEnabled);\r\n }, [DisclaimerAdsEnabled]);\r\n\r\n const onDisclaimerCheckboxChange = (value) => {\r\n setDisClaimerAdsEnabled(value);\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const ValidatedDisclaimerExtension = withCustomValidation(DisclaimerExtensionInternal);\r\n\r\n","// TODO: Update key value when available - Task 8947815: Update info popup key\r\nexport const dateManagementInfoKey = 'pop_BA_CampaignCreate_Budget_BidStrategy';\r\n\r\nexport const dateSettingsManageAtAdGroupLevelText = _TL_('Start and end dates are managed at the ad group level.');\r\n","import React, { useContext, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { ChoiceGroup } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\n\r\nimport { InfoLabel } from '../info-label';\r\n\r\nconst getStyles = () =>\r\n ({\r\n dateManagementSelectorContainer: {\r\n '& .ms-ChoiceField': {\r\n '& .ms-ChoiceField-input': {\r\n position: 'absolute',\r\n opacity: 0,\r\n top: 0,\r\n right: 0,\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n },\r\n '& .ms-ChoiceField-field': {\r\n padding: 0,\r\n marginRight: 8,\r\n '& .ms-ChoiceFieldLabel': {\r\n verticalAlign: 'baseline',\r\n fontWeight: 400,\r\n },\r\n },\r\n },\r\n },\r\n });\r\n\r\nconst DATE_MANAGEMENT_OPTIONS = {\r\n CampaignLevel: {\r\n value: 'campaignLevel',\r\n label: _TL_('Campaign level'),\r\n },\r\n AdGroupLevel: {\r\n value: 'adGroupLevel',\r\n label: _TL_('Ad group level'),\r\n },\r\n};\r\n\r\nexport const DateManagementSelector = (props) => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const {\r\n value,\r\n onChange,\r\n isEnabled,\r\n } = props;\r\n\r\n const selectionValue = value ? DATE_MANAGEMENT_OPTIONS.CampaignLevel.value : DATE_MANAGEMENT_OPTIONS.AdGroupLevel.value;\r\n\r\n const options = useMemo(() => _.values(DATE_MANAGEMENT_OPTIONS).map(option => ({\r\n key: option.value,\r\n text: i18n.getString(option.label),\r\n ariaLabel: i18n.getString(option.label),\r\n disabled: !isEnabled,\r\n })), [i18n, isEnabled]);\r\n\r\n return (\r\n \r\n onChange({ UseCampaignLevelDates: data.key === DATE_MANAGEMENT_OPTIONS.CampaignLevel.value })}\r\n />\r\n
\r\n );\r\n};\r\n\r\nDateManagementSelector.propTypes = {\r\n value: PropTypes.bool,\r\n onChange: PropTypes.func.isRequired,\r\n isEnabled: PropTypes.bool,\r\n};\r\n\r\nDateManagementSelector.defaultProps = {\r\n value: false,\r\n isEnabled: true,\r\n};\r\n\r\nexport const ValidatedDateManagementSelector = withCustomValidation(DateManagementSelector);\r\n","import React, { useContext } from 'react';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nimport { dateSettingsManageAtAdGroupLevelText } from './constants';\r\n\r\nconst useStyles = makeStyles({\r\n messageBar: {\r\n marginTop: '10px',\r\n },\r\n});\r\n\r\nexport const DateManagementInfo = () => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useStyles();\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {i18n.getString(dateSettingsManageAtAdGroupLevelText)}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n","import React, { useMemo, useContext, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { LegacyDateSetting, validateDate, getCurrentDate } from '@bingads-webui-campaign/date-setting';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { withCustomValidation, withError } from '@bingads-webui-react/validation';\r\n\r\nimport { DateManagementSelector } from './date-management-selector';\r\nimport { DateManagementInfo } from './date-management-info';\r\nimport { BudgetTypes } from '../../../../common/constants';\r\nimport { validateLifetimeBudgetDateRange } from './utils';\r\n\r\nconst useStyles = makeStyles({\r\n dateManagementSelector: {\r\n marginBottom: '16px',\r\n },\r\n});\r\n\r\nexport const AudienceDateSetting = ({\r\n validationProps,\r\n updateValidation,\r\n isEditFlow,\r\n displayDateManagementSelector,\r\n allowDateManagementSelection,\r\n ...restProps\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n const classes = useStyles();\r\n\r\n const { data } = validationProps;\r\n\r\n const {\r\n StartDate,\r\n EndDate,\r\n UseCampaignLevelDates,\r\n BudgetType,\r\n } = data;\r\n\r\n const currentDate = getCurrentDate();\r\n\r\n const validateLifetimeBudgetDateSettings = (newData, errors) => {\r\n if (BudgetType === BudgetTypes.LifetimeBudgetStandard) {\r\n const budgetRangeError = validateLifetimeBudgetDateRange(newData, i18n);\r\n\r\n if (budgetRangeError) {\r\n errors.push(budgetRangeError);\r\n }\r\n }\r\n };\r\n\r\n const validate = (newData) => {\r\n const validationError = validateDate(newData, i18n);\r\n\r\n validateLifetimeBudgetDateSettings(newData, validationError);\r\n\r\n updateValidation(validationError, newData);\r\n };\r\n\r\n const logActivity = (action, newData) => {\r\n if (activity) {\r\n activity.signal(`${action} - ${JSON.stringify(newData)}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const validationErrors = [];\r\n\r\n validateLifetimeBudgetDateSettings(data, validationErrors);\r\n\r\n updateValidation(validationErrors);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [BudgetType]);\r\n\r\n\r\n const onDateChange = (newData) => {\r\n const amendedData = {\r\n ...newData,\r\n UseCampaignLevelDates,\r\n };\r\n\r\n validate(amendedData);\r\n\r\n logActivity('onLegacyDateSettingChange', amendedData);\r\n };\r\n\r\n const onDateManagementChange = (newData) => {\r\n const amendedData = {\r\n ...newData,\r\n StartDate,\r\n EndDate,\r\n };\r\n\r\n validate(amendedData);\r\n\r\n logActivity('onDateManagementChange', amendedData);\r\n };\r\n\r\n const dateSettingWithDefaultStartDate = useMemo(() => _.defaults(data, {\r\n StartDate: currentDate,\r\n }), [currentDate, data]);\r\n\r\n return (\r\n \r\n {displayDateManagementSelector &&\r\n
\r\n );\r\n};\r\n\r\nAudienceDateSetting.propTypes = {\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n StartDate: PropTypes.instanceOf(Date),\r\n EndDate: PropTypes.instanceOf(Date),\r\n UseCampaignLevelDates: PropTypes.bool,\r\n BudgetType: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n displayDateManagementSelector: PropTypes.bool,\r\n allowDateManagementSelection: PropTypes.bool,\r\n isEditFlow: PropTypes.bool,\r\n};\r\n\r\nAudienceDateSetting.defaultProps = {\r\n displayDateManagementSelector: false,\r\n allowDateManagementSelection: true,\r\n isEditFlow: false,\r\n};\r\n\r\nexport const ValidatedAudienceDateSetting = withError(withCustomValidation(AudienceDateSetting));\r\n","import { getDateSettingDetails, numberOfDaysBetweenDates } from '@bingads-webui-campaign/date-setting';\r\n\r\nimport { dateSettingsManageAtAdGroupLevelText } from './constants';\r\n\r\nexport const validateLifetimeBudgetDateRange = (newData, i18n) => {\r\n const MAX_DATE_RANGE = 365;\r\n\r\n const { StartDate, EndDate } = newData || {};\r\n\r\n if (StartDate && EndDate && numberOfDaysBetweenDates(StartDate, EndDate) > MAX_DATE_RANGE) {\r\n return i18n.getString(_TL_('The maximum campaign total budget duration is {0} days.')).replace('{0}', MAX_DATE_RANGE);\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const getAudienceDateSettingsDetails = ({\r\n i18n, isEdit, dateSettings, isLifetimeBudgetFeatureEnabled,\r\n}) => {\r\n const {\r\n UseCampaignLevelDates,\r\n StartDate,\r\n EndDate,\r\n } = dateSettings;\r\n\r\n if (!UseCampaignLevelDates && isEdit) {\r\n return i18n.getString(dateSettingsManageAtAdGroupLevelText);\r\n }\r\n\r\n return getDateSettingDetails(i18n, StartDate, EndDate, UseCampaignLevelDates, isLifetimeBudgetFeatureEnabled);\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { WebsiteListSelector } from '@bingads-webui-campaign-react/website-list-selector';\r\n\r\nexport const WebsiteLists = ({\r\n selectedExclusions = [],\r\n onExclusionsChange = () => {},\r\n}) => (\r\n \r\n
\r\n }\r\n {(UseCampaignLevelDates || !isEditFlow) ?\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\nCampaignStepShell.propTypes = {\r\n data: PropTypes.shape({\r\n adGroup: PropTypes.shape({\r\n Id: PropTypes.number,\r\n UseOptimizedTargeting: PropTypes.bool,\r\n BiddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n }),\r\n campaignLevelDeviceTargets: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n })),\r\n }),\r\n campaign: PropTypes.shape({\r\n Id: PropTypes.number,\r\n Budget: PropTypes.shape({\r\n Type: PropTypes.string,\r\n Amount: PropTypes.number,\r\n }),\r\n StartDate: PropTypes.string,\r\n EndDate: PropTypes.string,\r\n UseCampaignLevelDates: PropTypes.bool,\r\n TrackingUrlTemplate: PropTypes.string,\r\n FinalUrlSuffix: PropTypes.string,\r\n UrlCustomParameters: PropTypes.string,\r\n campaignLevelDeviceTargets: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n })),\r\n }),\r\n exclusions: PropTypes.shape({\r\n campaignExclusions: PropTypes.shape({\r\n [webExclusionPropertyVal]: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n })),\r\n }),\r\n }),\r\n websiteExclusionLists: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n })),\r\n }),\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.arrayOf(PropTypes.shape({\r\n property: PropTypes.string,\r\n message: PropTypes.string,\r\n })),\r\n};\r\n\r\nCampaignStepShell.defaultProps = {\r\n data: null,\r\n error: [],\r\n};\r\n","export const AdGroupNegativeReferenceId = -111;\r\n\r\nconst getTargetCriterion = ({\r\n targets,\r\n type,\r\n propKey,\r\n adGroupViewModel,\r\n campaignViewModel,\r\n overrideType = undefined,\r\n}) => targets.map((target) => {\r\n const criterion = {\r\n Type: overrideType || type,\r\n BidAdjustment: target.Criterion.BidAdjustment,\r\n [`${overrideType || type}Criterion`]: {\r\n [propKey]: target.Criterion.Target,\r\n },\r\n };\r\n if (adGroupViewModel.data.Id) {\r\n return {\r\n Id: target.Id,\r\n Status: target.status ? target.status : 'Active',\r\n Criterion: criterion,\r\n CriterionType: type,\r\n AdGroup: {\r\n Id: adGroupViewModel.data.Id,\r\n },\r\n CampaignName: campaignViewModel.Name,\r\n };\r\n }\r\n return {\r\n Criterion: criterion,\r\n CriterionType: type,\r\n AdGroupName: adGroupViewModel.data.Name,\r\n CampaignName: campaignViewModel.Name,\r\n AdGroup: {\r\n Id: AdGroupNegativeReferenceId,\r\n },\r\n };\r\n});\r\n\r\n// in this view model to bulk model for targets\r\n// in addition to the criterion, we also add the bid adjustment value for each criterion.\r\n// the structure of this is a an object compared to xandr's array of criterions.\r\nexport const viewModelToBulkModelForBidAdjustmentUI = ({ adGroupViewModel, campaignViewModel }) => {\r\n // ageRanges\r\n const ageTargets = adGroupViewModel.data.ageRanges || [];\r\n const negativeAgeRanges = adGroupViewModel.data.negativeAgeRanges || [];\r\n const genderTypes = adGroupViewModel.data.genderTypes || [];\r\n const negativeGenderTypes = adGroupViewModel.data.negativeGenderTypes || [];\r\n const jobTargets = adGroupViewModel.data.jobTargets || [];\r\n const negativeJobTargets = adGroupViewModel.data.negativeJobTargets || [];\r\n const industryTargets = adGroupViewModel.data.industry || [];\r\n const negativeIndustryTargets = adGroupViewModel.data.negativeIndustry || [];\r\n const companyNameTargets = adGroupViewModel.data.companyNameTargets || [];\r\n const negativeCompanyNameTargets = adGroupViewModel.data.negativeCompanyNameTargets || [];\r\n\r\n\r\n const ageTargetCriterions = getTargetCriterion({\r\n targets: ageTargets,\r\n type: 'Age',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeAgeTargetCriterions = getTargetCriterion({\r\n targets: negativeAgeRanges,\r\n type: 'NegativeAge',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const genderTargetCriterions = getTargetCriterion({\r\n targets: genderTypes,\r\n type: 'Gender',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeGenderTargetCriterions = getTargetCriterion({\r\n targets: negativeGenderTypes,\r\n type: 'NegativeGender',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const jobTargetCriterions = getTargetCriterion({\r\n targets: jobTargets,\r\n type: 'JobFunction',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeJobTargetCriterions = getTargetCriterion({\r\n targets: negativeJobTargets,\r\n type: 'NegativeJobFunction',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const industryTargetCriterions = getTargetCriterion({\r\n targets: industryTargets,\r\n type: 'Industry',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeIndustryTargetCriterions = getTargetCriterion({\r\n targets: negativeIndustryTargets,\r\n type: 'NegativeIndustry',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const companyNameTargetCriterions = getTargetCriterion({\r\n targets: companyNameTargets,\r\n type: 'CompanyName',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeCompanyNameTargetCriterions = getTargetCriterion({\r\n targets: negativeCompanyNameTargets,\r\n type: 'NegativeCompanyName',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n return [\r\n ...ageTargetCriterions,\r\n ...negativeAgeTargetCriterions,\r\n ...genderTargetCriterions,\r\n ...negativeGenderTargetCriterions,\r\n ...jobTargetCriterions,\r\n ...negativeJobTargetCriterions,\r\n ...industryTargetCriterions,\r\n ...negativeIndustryTargetCriterions,\r\n ...companyNameTargetCriterions,\r\n ...negativeCompanyNameTargetCriterions,\r\n ];\r\n};\r\n","import Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport {\r\n loadCampaign,\r\n loadAdGroup,\r\n modelToViewModelForAdGroup,\r\n modelToViewModelForCampaign,\r\n getErrorsPlaceholders,\r\n saveAdGroup,\r\n loadBundleCountries,\r\n saveCampaign,\r\n readAudienceCriterions,\r\n readTargetingCriterions,\r\n readLocationCriterions,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ActivityContext, ScenarioContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { viewModelToBulkModelForDisclaimerAssociation } from '@bingads-webui-campaign-react/ads-campaign-disclaimers';\r\nimport { getVerifiedTrackingSettingWrite as viewModelToBulkModelForVerifiedTrackingSettings } from '@bingads-webui-campaign-react/third-party-measurement';\r\nimport { modelConstraints } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\n\r\nimport { viewModelToBulkModelForBidAdjustmentUI } from '../../shared/model/adgroup-criterions-with-bid-adjustment';\r\nimport { isAudience, shouldEnableBidAdjustment, isDealCampaign, isCTVOrDeal } from '../../step-constants';\r\nimport { readDayTimeCriterions, viewModelToBulkModelForAdSchedules } from '../../shared/model/campaign-criterion';\r\n\r\nexport const useCampaignRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { state, send } = useWizardService();\r\n\r\n const { scope } = useContext(ScopeContext) || {};\r\n const serverContext = useContext(ServerContext);\r\n const scenarioContext = useContext(ScenarioContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n\r\n const { cid, aid } = scope.values;\r\n\r\n const {\r\n flow, isPublishing, isDefaultCampaignStepModel, deal,\r\n } = state.context.wizardData;\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const savedAdGroup = state.context.wizardData.adGroup;\r\n\r\n const adGroupId = savedAdGroup ? savedAdGroup.Id : null;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n let loadPromises = {\r\n adGroup: loadAdGroup(cid, aid, campaignId, adGroupId),\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n targetCriterions: readTargetingCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n audienceCriterions: readAudienceCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n };\r\n\r\n if (isDealCampaign(flow)) {\r\n loadPromises = _.extend(loadPromises, {\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n });\r\n }\r\n\r\n return Promise.props(loadPromises).then(({\r\n adGroup,\r\n campaign,\r\n bundleCountriesAndLocationCriterions,\r\n audienceCriterions,\r\n targetCriterions,\r\n dayTimeCriterions,\r\n locationCriterions,\r\n }) => {\r\n const adGroupData = modelToViewModelForAdGroup({\r\n adGroupModel: adGroup,\r\n campaignModel: campaign,\r\n i18n,\r\n audienceCriterionsModel: audienceCriterions ? audienceCriterions.value : [],\r\n targetCriterionsModel: targetCriterions ? targetCriterions.value : [],\r\n isAudienceAds: isAudience(flow),\r\n ...isDealCampaign(flow) ? {\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions.bundleCountries,\r\n } : {},\r\n });\r\n\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n });\r\n\r\n if (isDefaultCampaignStepModel && !isCTVOrDeal(flow)) {\r\n adGroupData.data.StartDate = new Date();\r\n campaignData.data.StartDate = new Date();\r\n }\r\n\r\n let constraintAdGroupModel = Promise.resolve(adGroupData.data);\r\n\r\n if (isDealCampaign(flow) && deal) {\r\n constraintAdGroupModel = modelConstraints(deal, adGroupData.data, serverContext);\r\n }\r\n\r\n\r\n return constraintAdGroupModel.then((adGroupModel) => {\r\n const data = {\r\n adGroup: adGroupModel,\r\n campaign: campaignData.data,\r\n ...bundleCountriesAndLocationCriterions,\r\n ...getErrorsPlaceholders(),\r\n dealDetails: deal,\r\n };\r\n\r\n return data;\r\n });\r\n });\r\n };\r\n\r\n const allSettledPromiseWrapper = (promises) => {\r\n const wrappedPromises = promises.map(p => Promise.resolve(p)\r\n .then(\r\n val => ({ status: 'fulfilled', value: val }),\r\n err => ({ status: 'rejected', reason: err })\r\n ));\r\n return Promise.all(wrappedPromises);\r\n };\r\n\r\n const save = ({ data }) => {\r\n const {\r\n adGroup, campaign, bundleCountries, bundleLocationCriterions,\r\n } = data;\r\n\r\n if (isPublishing) {\r\n campaign.Status = 'Active';\r\n } else {\r\n campaign.Status = 'Paused';\r\n }\r\n\r\n if (campaign.UseCampaignLevelDates) {\r\n adGroup.StartDate = new Date();\r\n adGroup.EndDate = null;\r\n } else {\r\n campaign.StartDate = new Date();\r\n campaign.EndDate = null;\r\n }\r\n\r\n const saveCampaignPromise = saveCampaign({\r\n campaign: { data: campaign },\r\n viewModelToBulkModelForAdSchedules,\r\n viewModelToBulkModelForDisclaimerAssociation,\r\n viewModelToBulkModelForVerifiedTrackingSettings,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n });\r\n\r\n const saveAdGroupsPromise = saveCampaignPromise\r\n .then(() => saveAdGroup({\r\n adGroup: { data: adGroup },\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n campaign: state.context.wizardData.campaign,\r\n customTargetingBulkModel: shouldEnableBidAdjustment(flow, serverContext) ? viewModelToBulkModelForBidAdjustmentUI : undefined,\r\n isDisplayPlus: true,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveAdGroup'),\r\n i18n,\r\n serverContext,\r\n }));\r\n\r\n const savePromises = [saveCampaignPromise, saveAdGroupsPromise];\r\n\r\n return new Promise((resolve, reject) => {\r\n allSettledPromiseWrapper(savePromises).then((results) => {\r\n const allSuccess = _.every(results, result => result.status === 'fulfilled');\r\n\r\n if (allSuccess) {\r\n if (activity) {\r\n activity.signal(`onBudgetAndBidSavedSuccessfully - Status: ${campaign.Status}, Id: ${campaign.Id}`);\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, {\r\n campaign: results[0].value.campaign.data,\r\n adGroup: results[1].value.adGroup.data,\r\n isDefaultCampaignStepModel: false,\r\n lifetimeBudgetFlowData: {\r\n isBudgetTypeEditable: false,\r\n isDateManagementEditable: false,\r\n },\r\n });\r\n\r\n return resolve({\r\n adGroup: results[1].value.adGroup.data,\r\n campaign: results[0].value.campaign.data,\r\n ...getErrorsPlaceholders(),\r\n });\r\n }\r\n\r\n const errors = _.map(results, (result) => {\r\n if (activity) {\r\n activity.signal(`OnBudgetAndBidSavedError - error: ${JSON.stringify(result)}`);\r\n }\r\n if (result.status === 'fulfilled') {\r\n return null;\r\n }\r\n\r\n const { serverErrors = {} } = result.reason;\r\n\r\n return serverErrors;\r\n });\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return reject({ error: _.flatten(errors.filter(val => val !== null)) });\r\n });\r\n });\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport {\r\n loadCampaign,\r\n loadBundleCountries,\r\n modelToViewModelForCampaign,\r\n getErrorsPlaceholders,\r\n saveCampaign,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { getDealDetails } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport exclusionRepository from '@bingads-webui-campaign-legacy/advanced-settings/util/exclusion-repository';\r\nimport { ScopeLevel } from '@bingads-webui-campaign-react/constants';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ActivityContext, ScenarioContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { getVerifiedTrackingSettingWrite as viewModelToBulkModelForVerifiedTrackingSettings } from '@bingads-webui-campaign-react/third-party-measurement';\r\nimport { viewModelToBulkModelForDisclaimerAssociation } from '@bingads-webui-campaign-react/ads-campaign-disclaimers';\r\nimport { showBudgetBidCampaignNotifications } from '@bingads-webui-campaign/import-shared-utils';\r\nimport { repository } from '@bingads-webui-campaign-react/website-list-selector';\r\nimport { isCTVCampaign, isDealCampaign } from '../../step-constants';\r\nimport {\r\n readDayTimeCriterions,\r\n viewModelToBulkModelForAdSchedules,\r\n readLocationCriterions,\r\n readDeviceCriterion,\r\n} from '../../shared/model/campaign-criterion';\r\n\r\nexport const useCampaignEditRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { state, send } = useWizardService();\r\n\r\n const { scope } = useContext(ScopeContext) || {};\r\n const scenarioContext = useContext(ScenarioContext);\r\n const serverContext = useContext(ServerContext);\r\n const { DynamicPermissions = {} } = serverContext || {};\r\n const {\r\n AudienceMMACTAOptOut: isAudienceMMACTAOptOutEnabled,\r\n AudienceMMACTADefaultOptOut: isAudienceMMACTADefaultOptOutEnabled,\r\n WebsiteExclusionLists: isWebsiteExclusionListsEnabled,\r\n } = DynamicPermissions;\r\n\r\n const activity = useContext(ActivityContext);\r\n const instrumentation = useContext(InstrumentationContext);\r\n\r\n const { cid, aid } = scope.values;\r\n const { flow } = state.context.wizardData;\r\n const isCTVCampaignFlow = isCTVCampaign(flow);\r\n const isDealCampaignFlow = isDealCampaign(flow);\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n if (isCTVCampaignFlow || isDealCampaignFlow) {\r\n const loadPromises = {\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n dealDetails: getDealDetails(cid, aid, campaignId, serverContext),\r\n };\r\n\r\n return Promise.props(loadPromises).then(({\r\n campaign,\r\n dealDetails,\r\n }) => {\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dealDetails,\r\n });\r\n\r\n return {\r\n campaign: campaignData.data,\r\n dealDetails,\r\n ...getErrorsPlaceholders(),\r\n };\r\n });\r\n }\r\n\r\n const loadPromises = {\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n exclusions: exclusionRepository.load(campaignId, null, ScopeLevel.Campaign),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n campaignDeviceCriterions: readDeviceCriterion({\r\n cid, aid, campaignId,\r\n }),\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n };\r\n\r\n if (isWebsiteExclusionListsEnabled) {\r\n loadPromises.websiteExclusionLists = repository.getListsByCampaignId(serverContext, campaignId);\r\n } else {\r\n loadPromises.websiteExclusionLists = Promise.resolve([]);\r\n }\r\n\r\n return Promise.props(loadPromises).then(({\r\n campaign,\r\n exclusions: [campaignExclusions],\r\n dayTimeCriterions,\r\n locationCriterions,\r\n campaignDeviceCriterions,\r\n bundleCountriesAndLocationCriterions,\r\n websiteExclusionLists,\r\n }) => {\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n campaignDeviceCriterions: campaignDeviceCriterions ? campaignDeviceCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions.bundleCountries,\r\n isAudienceMMACTAOptOutEnabled,\r\n isAudienceMMACTADefaultOptOutEnabled,\r\n });\r\n\r\n return {\r\n campaign: campaignData.data,\r\n ...bundleCountriesAndLocationCriterions,\r\n exclusions: {\r\n campaignExclusions,\r\n },\r\n websiteExclusionLists: websiteExclusionLists.map(entity => ({ ...entity, value: entity.Id, content: entity.Name })),\r\n ...getErrorsPlaceholders(),\r\n };\r\n });\r\n };\r\n\r\n const allSettledPromiseWrapper = (promises) => {\r\n const wrappedPromises = promises.map(p => Promise.resolve(p)\r\n .then(\r\n val => ({ status: 'fulfilled', value: val }),\r\n err => ({ status: 'rejected', reason: err })\r\n ));\r\n return Promise.all(wrappedPromises);\r\n };\r\n\r\n const save = ({ data }) => {\r\n const {\r\n campaign,\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n exclusions,\r\n websiteExclusionLists,\r\n } = data;\r\n\r\n if (campaign.Status === 'UserPaused') {\r\n campaign.Status = 'Paused';\r\n }\r\n\r\n let saveCampaignPromise;\r\n let saveExclusionsPromise = Promise.resolve();\r\n let saveWebsiteExclusionListsPromise = Promise.resolve();\r\n\r\n if (isCTVCampaignFlow || isDealCampaignFlow) {\r\n saveCampaignPromise = saveCampaign({\r\n campaign: { data: campaign },\r\n viewModelToBulkModelForVerifiedTrackingSettings,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n });\r\n } else {\r\n saveCampaignPromise = saveCampaign({\r\n campaign: { data: campaign },\r\n viewModelToBulkModelForAdSchedules,\r\n viewModelToBulkModelForVerifiedTrackingSettings,\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n viewModelToBulkModelForDisclaimerAssociation,\r\n isAudienceMMACTAOptOutEnabled,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n });\r\n\r\n const saveExclusionsData = {\r\n campaignId: campaign.Id,\r\n AdvanceSettings: {\r\n Exclusions: {\r\n ExcludedIPs: exclusions.campaignExclusions.ExcludedIPs,\r\n ExcludedSites: exclusions.campaignExclusions.ExcludedSites,\r\n },\r\n },\r\n };\r\n saveExclusionsPromise = exclusionRepository.saveExtensions(saveExclusionsData, ScopeLevel.Campaign);\r\n if (isWebsiteExclusionListsEnabled) {\r\n saveWebsiteExclusionListsPromise = repository.associateListsToCampaign(serverContext, websiteExclusionLists, campaign.Id);\r\n }\r\n }\r\n\r\n const savePromises = [saveCampaignPromise, saveExclusionsPromise, saveWebsiteExclusionListsPromise];\r\n\r\n return new Promise((resolve, reject) => {\r\n allSettledPromiseWrapper(savePromises).then((results) => {\r\n const allSuccess = _.every(results, result => result.status === 'fulfilled');\r\n\r\n if (allSuccess) {\r\n const { activity: BudgetBidCampaignImportNotificationActivity } = instrumentation.createScenarioAndActivity({\r\n scenarioName: 'BudgetBidCampaignImportNotification',\r\n activityName: 'AudienceCampaignSettingPage',\r\n });\r\n\r\n const { campaign: initialCampaign } = state.context.stepContexts.CAMPAIGN_EDIT.initialData;\r\n\r\n showBudgetBidCampaignNotifications({\r\n campaignItemList: [initialCampaign],\r\n oldBudget: initialCampaign.Budget,\r\n newBudget: campaign.Budget,\r\n oldBidStrategy: initialCampaign.BiddingScheme,\r\n newBidStrategy: campaign.BiddingScheme,\r\n activity: BudgetBidCampaignImportNotificationActivity,\r\n });\r\n\r\n if (activity) {\r\n activity.signal(`onBudgetAndBidSavedSuccessfully - Status: ${campaign.Status}, Id: ${campaign.Id}`);\r\n }\r\n\r\n if (isCTVCampaignFlow || isDealCampaignFlow) {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { campaign: results[0].value.campaign.data });\r\n } else {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { campaign: results[0].value.campaign.data, exclusions: results[1].value });\r\n }\r\n\r\n return resolve({\r\n campaign: results[0].value.campaign.data,\r\n ...getErrorsPlaceholders(),\r\n });\r\n }\r\n\r\n const errors = _.map(results, (result) => {\r\n if (activity) {\r\n activity.signal(`OnBudgetAndBidSavedError - error: ${JSON.stringify(result)}`);\r\n }\r\n if (result.status === 'fulfilled') {\r\n return null;\r\n }\r\n\r\n const { serverErrors = {} } = result.reason;\r\n\r\n if (result.reason.NegativeSitesResult) {\r\n const { NegativeSitesResult } = result.reason;\r\n serverErrors.property = 'webExclusions';\r\n serverErrors.NegativeSitesResult = NegativeSitesResult.EntityErrors;\r\n }\r\n\r\n if (result.reason.NegativeIPsResult) {\r\n const { NegativeIPsResult } = result.reason;\r\n serverErrors.property = 'webExclusions';\r\n serverErrors.NegativeIPsResult = NegativeIPsResult.EntityErrors;\r\n }\r\n\r\n return serverErrors;\r\n });\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return reject({ error: _.flatten(errors.filter(val => val !== null)) });\r\n });\r\n });\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import { useState, useEffect, useContext, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport _preferencesService from '@bingads-webui-component-legacy/preference/service/index';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { isAudienceCampaign as isAudienceCampaignFlow, isMultiAdsAudienceCampaign, isCTVCampaign, isDealCampaign } from '../../step-constants';\r\n\r\nconst BiddingSchemeToBidType = {\r\n EnhancedCpc: 'SearchBid',\r\n ManualCpc: 'SearchBid',\r\n ManualCpm: 'CpmBid',\r\n ManualCpv: 'CpvBid',\r\n};\r\n\r\nconst buildSchemaData = ({\r\n data, timeDisplayType, isAudienceCampaign, serverContext, numberOfAds, isCTVFlow, isDealFlow,\r\n}) => {\r\n const {\r\n DynamicPermissions: {\r\n GenreTargets,\r\n CampaignLifetimeBudget,\r\n MaeLifetimeBudgetExclusion,\r\n },\r\n } = serverContext;\r\n\r\n const isCampaignLifetimeBudgetEnabled = CampaignLifetimeBudget && !MaeLifetimeBudgetExclusion;\r\n\r\n const locations = _.map(\r\n _.filter(\r\n data.adGroup.locationTargets.currentLevelSettings.currentLocations,\r\n loc => loc.SelectionStatus === 'Included'\r\n ),\r\n loc => loc.location\r\n );\r\n\r\n const { deal, campaign = {}, adGroup = {} } = data;\r\n const hideGenreTargetForDeal = isDealFlow ? !(deal && deal.Genre) : false;\r\n\r\n const isUseCampaignLevelDates = campaign.UseCampaignLevelDates;\r\n const startDate = isUseCampaignLevelDates ? campaign.StartDate : adGroup.StartDate;\r\n const endDate = isUseCampaignLevelDates ? campaign.EndDate : adGroup.EndDate;\r\n\r\n return ({\r\n adsPanel: {\r\n isRendered: !_.isUndefined(data.ads),\r\n },\r\n adCreation: {\r\n numAds: numberOfAds,\r\n },\r\n adGroupName: {\r\n data: data.adGroup.Name,\r\n },\r\n locationTargeting: {\r\n locations,\r\n targetOption: data.adGroup.locationTargets.currentLevelSettings.targetOption,\r\n },\r\n genderTargeting: {\r\n genders: data.adGroup.genderTypes,\r\n isRendered: data.adGroup.genderTypes && data.adGroup.genderTypes.length > 0,\r\n },\r\n ageRangeTargeting: {\r\n ageRanges: data.adGroup.ageRanges,\r\n isRendered: data.adGroup.ageRanges && data.adGroup.ageRanges.length > 0,\r\n },\r\n genreTargeting: {\r\n genreTargets: data.adGroup.genreTargets,\r\n isRendered: GenreTargets && (isCTVFlow || (isDealFlow && !hideGenreTargetForDeal)),\r\n },\r\n predictiveTargeting: {\r\n isPredictiveTargetingEnabled: data.adGroup.UseOptimizedTargeting,\r\n isRendered: isAudienceCampaign,\r\n },\r\n advancedTargetingSeparator: {},\r\n interest: {\r\n interests: data.adGroup.interests,\r\n isRendered: data.adGroup.interests && data.adGroup.interests.length > 0,\r\n },\r\n audience: {\r\n audiences: data.adGroup.audiences,\r\n isRendered: data.adGroup.audiences && data.adGroup.audiences.length > 0,\r\n },\r\n company: {\r\n companyTargets: data.adGroup.companyNameTargets,\r\n negativeCompanyTargets: data.adGroup.negativeCompanyNameTargets,\r\n isRendered: (data.adGroup.companyNameTargets && data.adGroup.companyNameTargets.length > 0) || (data.adGroup.negativeCompanyNameTargets && data.adGroup.negativeCompanyNameTargets.length > 0),\r\n },\r\n jobFunction: {\r\n jobTargets: data.adGroup.jobTargets,\r\n negativeJobTargets: data.adGroup.negativeJobTargets,\r\n isRendered: (data.adGroup.jobTargets && data.adGroup.jobTargets.length > 0) || (data.adGroup.negativeJobTargets && data.adGroup.negativeJobTargets.length > 0),\r\n },\r\n industry: {\r\n industryTargets: data.adGroup.industry,\r\n negativeIndustryTargets: data.adGroup.negativeIndustry,\r\n isRendered: (data.adGroup.industry && data.adGroup.industry.length > 0) || (data.adGroup.negativeIndustry && data.adGroup.negativeIndustry.length > 0),\r\n },\r\n adScheduleAdGroup: {\r\n startDate: data.adGroup.StartDate,\r\n endDate: data.adGroup.EndDate,\r\n adSchedules: data.adGroup.adSchedules.dayTimeRanges,\r\n useSearcherTimeZone: data.adGroup.AdScheduleUseSearcherTimeZone,\r\n timeDisplayType,\r\n isRendered: !isAudienceCampaign,\r\n },\r\n campaignName: {\r\n data: data.campaign.Name,\r\n },\r\n conversionGoals: {\r\n conversionGoals: data.campaign.conversionGoals,\r\n isRendered: !(isCTVFlow || isDealFlow),\r\n },\r\n budget: {\r\n data: data.campaign.Budget,\r\n currencyCode: serverContext.CurrentAccount.CurrencyCode,\r\n },\r\n bidStrategy: {\r\n data: data.campaign.BiddingScheme,\r\n },\r\n bidValue: {\r\n data: data.adGroup[BiddingSchemeToBidType[data.campaign.BiddingScheme.Type]],\r\n currencyCode: serverContext.CurrentAccount.CurrencyCode,\r\n isRendered: data.campaign.BiddingScheme && data.campaign.BiddingScheme.Type !== 'MaxConversions',\r\n },\r\n startEndDatesCampaign: {\r\n startDate,\r\n endDate,\r\n isUseCampaignLevelDates,\r\n isDateLevelDisplayed: isAudienceCampaign && isCampaignLifetimeBudgetEnabled,\r\n isRendered: isAudienceCampaign,\r\n },\r\n });\r\n};\r\n\r\nexport const useSummarySchemaData = ({ data }) => {\r\n const { state } = useWizardService();\r\n const { flow } = state.context.wizardData;\r\n const isAudienceCampaign = isAudienceCampaignFlow(flow);\r\n const isCTVFlow = isCTVCampaign(flow);\r\n const isDealFlow = isDealCampaign(flow);\r\n\r\n const [timeDisplayType, setTimeDisplayType] = useState('12-hour');\r\n\r\n const serverContext = useContext(ServerContext);\r\n\r\n const numberOfAds = useMemo(() => {\r\n if (isMultiAdsAudienceCampaign(flow)) {\r\n return data && data.ads && data.ads.ads && data.ads.ads && Object.keys(data.ads.ads).length;\r\n }\r\n\r\n return (data && data.ads && data.ads.ads && data.ads.ads.data && data.ads.ads.data.length) || 1;\r\n }, [data, flow]);\r\n\r\n useEffect(() => {\r\n const preferencesService = _preferencesService.default || _preferencesService;\r\n preferencesService.initialize().then(() => {\r\n const isTwelveHourDisplay = preferencesService.findByName('WebApp.CampaignUI.isTwelveHourDisplay') || {};\r\n setTimeDisplayType(_.isUndefined(isTwelveHourDisplay.Data) || isTwelveHourDisplay.Data ? '12-hour' : '24-hour');\r\n });\r\n }, []);\r\n\r\n return (data && buildSchemaData({\r\n data, timeDisplayType, isAudienceCampaign, serverContext, numberOfAds, isCTVFlow, isDealFlow,\r\n })) || {};\r\n};\r\n\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@bingads-webui-react/fabric-control';\r\nimport { GeneratedUI } from '@bingads-webui-campaign-react/ui-generator';\r\nimport { summaryPageComponentTypes } from '@bingads-webui-campaign-react/summary-page';\r\nimport { WIZARD_EVENTS, useWizardService } from '@bingads-webui-react/wizard';\r\nimport { StepHeader } from '../../shared/step-header';\r\nimport { buildSchema } from './schema';\r\nimport { useSummarySchemaData } from './use-summary-schema-data';\r\nimport { STEP_PATHS, FLOWS_TO_FIRST_STEP } from '../../step-constants';\r\n\r\nexport const SummaryStepShell = ({\r\n data,\r\n}) => {\r\n const schemaData = useSummarySchemaData({ data });\r\n\r\n const { send, state } = useWizardService();\r\n\r\n const onAdsHeaderActionClick = useCallback(() => {\r\n const stepId = FLOWS_TO_FIRST_STEP[state.context.wizardData.flow];\r\n\r\n send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId,\r\n });\r\n }, [send, state.context.wizardData.flow]);\r\n\r\n const onTargetingHeaderActionClick = useCallback(() => send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId: STEP_PATHS.AD_GROUP,\r\n }), [send]);\r\n\r\n const onCampaignSettingsHeaderActionClick = useCallback(() =>\r\n send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId: STEP_PATHS.CAMPAIGN_CREATION,\r\n }), [send]);\r\n\r\n const options = useMemo(() => ({\r\n onAdsHeaderActionClick,\r\n onTargetingHeaderActionClick,\r\n onCampaignSettingsHeaderActionClick,\r\n }), [onAdsHeaderActionClick, onTargetingHeaderActionClick, onCampaignSettingsHeaderActionClick]);\r\n\r\n const schema = useMemo(() => buildSchema(options), [options]);\r\n\r\n return (\r\n \r\n {!isEdit &&\r\n \r\n \r\n \r\n {dealDetails && \r\n \r\n {\r\n advancedOptions.length > 0 && (\r\n (\r\n <>\r\n \r\n \r\n {i18n.getString(_TL_('Advanced settings'))}\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 {isValidTargets && !isCTVOrDealFlow &&\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {data ?\r\n \r\n
\r\n );\r\n};\r\n\r\nSummaryStepShell.propTypes = {\r\n data: PropTypes.shape({}),\r\n};\r\n\r\nSummaryStepShell.defaultProps = {\r\n data: null,\r\n};\r\n","import { buildDefaultDataProperty } from '@bingads-webui-campaign-react/ui-generator';\r\n\r\nexport const buildSchema = options => ({\r\n separatorStyles: {\r\n marginBottom: 20,\r\n },\r\n ads: {\r\n type: 'panel',\r\n header: {\r\n title: 'Ads',\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onAdsHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n adCreation: {\r\n type: 'ad-creation',\r\n dynamicProps: props => props.adCreation,\r\n },\r\n },\r\n dynamicProps: props => props.adsPanel,\r\n },\r\n targeting: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Targeting'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onTargetingHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n adGroupName: buildDefaultDataProperty({\r\n label: _TL_('Ad group name'),\r\n dynamicProps: props => props.adGroupName,\r\n }),\r\n hd1: {\r\n type: 'horizontal-divider',\r\n },\r\n locationTargeting: {\r\n type: 'location-targeting',\r\n dynamicProps: props => props.locationTargeting,\r\n },\r\n genderTargeting: {\r\n type: 'gender-targeting',\r\n dynamicProps: props => props.genderTargeting,\r\n },\r\n ageRangeTargeting: {\r\n type: 'age-range-targeting',\r\n dynamicProps: props => props.ageRangeTargeting,\r\n },\r\n genreTargeting: {\r\n type: 'genre-targeting',\r\n dynamicProps: props => props.genreTargeting,\r\n },\r\n predictiveTargeting: {\r\n type: 'predictive-targeting',\r\n dynamicProps: props => props.predictiveTargeting,\r\n },\r\n advancedTargetingSeparator: {\r\n type: 'horizontal-divider',\r\n dynamicProps: props => props.advancedTargetingSeparator,\r\n },\r\n interest: {\r\n type: 'interest',\r\n dynamicProps: props => props.interest,\r\n },\r\n audience: {\r\n type: 'audience',\r\n dynamicProps: props => props.audience,\r\n },\r\n company: {\r\n type: 'company',\r\n dynamicProps: props => props.company,\r\n },\r\n jobFunction: {\r\n type: 'job-function',\r\n dynamicProps: props => props.jobFunction,\r\n },\r\n industry: {\r\n type: 'industry',\r\n dynamicProps: props => props.industry,\r\n },\r\n adScheduleAdGroup: {\r\n type: 'ad-schedule',\r\n dynamicProps: props => props.adScheduleAdGroup,\r\n },\r\n },\r\n },\r\n campaignSettings: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Campaign settings'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onCampaignSettingsHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n campaignName: buildDefaultDataProperty({\r\n label: _TL_('Campaign name'),\r\n dynamicProps: props => props.campaignName,\r\n }),\r\n conversionGoals: {\r\n type: 'conversion-goals',\r\n dynamicProps: props => props.conversionGoals,\r\n },\r\n budget: {\r\n type: 'budget',\r\n dynamicProps: props => props.budget,\r\n },\r\n bidStrategy: {\r\n type: 'bid-strategy',\r\n dynamicProps: props => props.bidStrategy,\r\n },\r\n bidValue: {\r\n type: 'bid-value',\r\n dynamicProps: props => props.bidValue,\r\n },\r\n hd1: {\r\n type: 'horizontal-divider',\r\n },\r\n startEndDatesCampaign: {\r\n type: 'start-end-dates',\r\n dynamicProps: props => props.startEndDatesCampaign,\r\n },\r\n },\r\n },\r\n});\r\n","import Promise from 'bluebird';\r\nimport { useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport {\r\n loadCampaign,\r\n loadAdGroup,\r\n modelToViewModelForAdGroup,\r\n modelToViewModelForCampaign,\r\n loadBundleCountries,\r\n readAudienceCriterions,\r\n readTargetingCriterions,\r\n readLocationCriterions,\r\n saveCampaign,\r\n saveJustAdGroup,\r\n readDayTimeCriterions,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ScenarioContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\nimport { readDayTimeCriterions as readDayTimeCriterionsCampaign } from '../../shared/model/campaign-criterion';\r\nimport { isAudienceCampaign, isDealCampaign } from '../../step-constants';\r\n\r\nexport const useSummaryRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { state } = useWizardService();\r\n\r\n const { scope } = useContext(ScopeContext) || {};\r\n const serverContext = useContext(ServerContext);\r\n\r\n const scenarioContext = useContext(ScenarioContext);\r\n\r\n const { cid, aid } = scope.values;\r\n\r\n const { flow, isPublishing, deal } = state.context.wizardData;\r\n\r\n const inMarketAudienceRedesignEnabled = _.get(serverContext, ['DynamicPermissions', 'InMarketAudienceRedesign']);\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const savedAdGroup = state.context.wizardData.adGroup;\r\n\r\n const adGroupId = savedAdGroup ? savedAdGroup.Id : null;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n let loadPromises = {\r\n adGroup: Promise.resolve(savedAdGroup),\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n };\r\n\r\n loadPromises = _.extend(loadPromises, {\r\n adGroup: loadAdGroup(cid, aid, campaignId, adGroupId),\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterionsCampaign: readDayTimeCriterionsCampaign({\r\n cid, aid, campaignId,\r\n }),\r\n targetCriterions: readTargetingCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n audienceCriterions: readAudienceCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n });\r\n\r\n return Promise.props(loadPromises).then(({\r\n adGroup,\r\n campaign,\r\n locationCriterions,\r\n bundleCountriesAndLocationCriterions,\r\n dayTimeCriterions,\r\n dayTimeCriterionsCampaign,\r\n targetCriterions,\r\n audienceCriterions,\r\n }) => {\r\n const adGroupData = modelToViewModelForAdGroup({\r\n adGroupModel: adGroup,\r\n campaignModel: campaign,\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions.bundleCountries,\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n targetCriterionsModel: targetCriterions ? targetCriterions.value : [],\r\n audienceCriterionsModel: audienceCriterions ? audienceCriterions.value : [],\r\n i18n,\r\n isAudienceAds: isAudienceCampaign(flow),\r\n separateIMA: inMarketAudienceRedesignEnabled,\r\n });\r\n\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dayTimeCriterionsModel: dayTimeCriterionsCampaign ? dayTimeCriterionsCampaign.value : [],\r\n });\r\n\r\n return {\r\n ads: state.context.wizardData && state.context.wizardData.ads,\r\n adGroup: adGroupData.data,\r\n campaign: campaignData.data,\r\n ...(isDealCampaign(flow) ? { deal } : {}),\r\n };\r\n });\r\n };\r\n\r\n const save = ({ data }) => {\r\n const savedCampaign = data.campaign;\r\n const savedAdGroup = data.adGroup;\r\n\r\n if (isPublishing) {\r\n savedCampaign.Status = 'Active';\r\n savedAdGroup.Status = 'Active';\r\n } else {\r\n savedCampaign.Status = 'Paused';\r\n }\r\n\r\n return new Promise((resolve, reject) => saveCampaign({\r\n campaign: { data: savedCampaign },\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n }).then(() => saveJustAdGroup({\r\n adGroup: { data: savedAdGroup },\r\n campaign: savedCampaign,\r\n }, {\r\n i18n,\r\n })).then(() => {\r\n resolve();\r\n }).catch(err => reject(err)));\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import { useCallback } from 'react';\r\n\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\n\r\n// Specific to multi ad format in native campaign\r\nexport const useSelectedAdFormatState = () => {\r\n const { state: wizardState, send: wizardSend } = useWizardService();\r\n const updateSelectedAdFormat = useCallback(value => wizardSend(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { selectedAdFormat: value }), [wizardSend]);\r\n\r\n return [\r\n wizardState.context.wizardData.selectedAdFormat || AdFormat.Native,\r\n updateSelectedAdFormat,\r\n ];\r\n};\r\n","import React, { useMemo, useCallback, useContext, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { AdFormatOption, AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\nimport { useWizardService, matchStepState, STEP_STATES } from '@bingads-webui-react/wizard';\r\nimport { DisplayAdsWithCopilot } from '@bingads-webui-campaign-react/xandr-display-ads-campaign-shared-components';\r\n\r\nimport { NativeAd } from '../native-ads/components/native-ad';\r\nimport { VideoAds } from '../video-ads/';\r\nimport { useSelectedAdFormatState } from '../../common/use-selected-ad-format';\r\nimport { NativeAdFooter } from '../native-ads/components/native-ad-footer';\r\n\r\nexport const MultiAdFormatStepShell = ({\r\n data,\r\n error,\r\n onDataChange,\r\n adsType = '',\r\n loadClipchampPlayer = null,\r\n}) => {\r\n const [selectedAdFormat, setSelectedAdFormat] = useSelectedAdFormatState();\r\n const i18n = useContext(I18nContext);\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n const [isDisabled, setIsDisabled] = useState(false);\r\n const { state } = useWizardService();\r\n const currentStates = state.toStrings()[1];\r\n\r\n const onFormatChange = useCallback((value) => {\r\n setSelectedAdFormat(value);\r\n // Reset data\r\n onDataChange({ data: value === AdFormat.Native ? { data: {} } : { data: [] } });\r\n }, [onDataChange, setSelectedAdFormat]);\r\n\r\n const stepData = useMemo(() => {\r\n if (selectedAdFormat === AdFormat.Native) {\r\n return data || { data: {} };\r\n }\r\n\r\n return data || { data: [] };\r\n }, [data, selectedAdFormat]);\r\n\r\n // Wait for data is loaded to have a stable data state\r\n useEffect(() => {\r\n if (!isLoaded && matchStepState(state, STEP_STATES.ACTIVE)) {\r\n setIsLoaded(true);\r\n }\r\n }, [state, currentStates, isLoaded]);\r\n\r\n // To ensure disabled is fixed even we remove the ad when update\r\n useEffect(() => {\r\n if (isLoaded && !isDisabled) {\r\n const adData = _.isArray(stepData.data) ? stepData.data[0] : stepData.data;\r\n const adId = adData && adData.Id;\r\n\r\n if (adId) {\r\n setIsDisabled(true);\r\n }\r\n }\r\n }, [isLoaded, isDisabled, stepData.data]);\r\n\r\n // To ensure that ad format is Display when adsType is Display on initial load\r\n useEffect(() => {\r\n if (adsType === AdFormat.Display && selectedAdFormat !== AdFormat.Display) {\r\n setSelectedAdFormat(AdFormat.Display);\r\n }\r\n }, [adsType, setSelectedAdFormat]);\r\n\r\n return (\r\n \r\n
\r\n : null\r\n }\r\n\r\n \r\n {isLoaded && (\r\n <>\r\n
\r\n );\r\n};\r\n\r\nMultiAdFormatStepShell.propTypes = {\r\n data: PropTypes.shape({}).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.shape({}).isRequired,\r\n adsType: PropTypes.string,\r\n};\r\n\r\nexport const SingleMultiAdFormatStepShell = props => \r\n 
\r\n \r\n
\r\n \r\n {adTitle} \r\n {adDescription} \r\n \r\n Ad\r\n {businessName}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\n\r\nexport const VideoAdPreview = ({ ad }) => (\r\n \r\n);\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport { ContentViewRegular, ImageMultipleRegular, VideoRegular } from '@fluentui/react-icons';\r\nimport { AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\n\r\nconst iconSize = 22;\r\n\r\nexport const getConfigByType = (type) => {\r\n switch (type) {\r\n case AdFormat.Native:\r\n return {\r\n icon: \r\n \r\n \r\n \r\n \r\n\r\n setFilterFormat(change.value)}\r\n value={filterFormat}\r\n >\r\n {_.keys(FilterFormat).map(key => (\r\n \r\n {\r\n data && !_.isEmpty(adIds) && (\r\n \r\n {adIds.map(adId => (\r\n \r\n )\r\n }\r\n {\r\n data && _.isEmpty(adIds) && (\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nMultiAdFormatAdsContainer.propTypes = {\r\n data: PropTypes.shape({}).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport { Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getNeedConfirming } from '@bingads-webui-campaign-react/campaign-settings-utils';\r\nimport { AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\n\r\nimport { useVideoAdsRepository, VideoAds } from './video-ads';\r\nimport { useAdGroupRepository, AdGroupStepShell } from './adgroup';\r\nimport { useCampaignRepository, useCampaignEditRepository, CampaignStepShell } from './campaign';\r\nimport { useDisplayAdsRepository, DisplayAds } from './display-ads';\r\nimport { useNativeAdRepository, SingleNativeAdStepShell, NativeAdsContainer, MultiAdsStepShell, useMultipleNativeAdsRepository, useNativeAdsManagerRepository } from './native-ads';\r\nimport { useSummaryRepository, SummaryStepShell } from './summary';\r\nimport { SingleMultiAdFormatStepShell, MultiAdFormatStepShell, MultiAdFormatAdsContainer, useMultiAdFormatAdsManagerRepository, useMultiAdFormatRepository, useSingleMultiAdFormatRepository } from './multi-ad-format';\r\nimport { STEP_PATHS, WIZARD_TYPES } from '../step-constants';\r\n\r\nconst editWizardTypeList = [\r\n WIZARD_TYPES.AUDIENCE_CAMPAIGN_EDIT,\r\n WIZARD_TYPES.AUDIENCE_AD_GROUP_EDIT,\r\n WIZARD_TYPES.AUDIENCE_CAMPAIGN_CTV_EDIT,\r\n WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_EDIT,\r\n WIZARD_TYPES.AUDIENCE_CAMPAIGN_DEAL_EDIT,\r\n WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_EDIT,\r\n];\r\n\r\nexport const getStepConfig = (permissions, wizardType, adsType = '', loadClipchampPlayer = null) => StepConfig.map((step) => {\r\n if (_.get(permissions, ['dynamic', 'ConversionAssociationWarning']) && editWizardTypeList.includes(wizardType) && step.id === STEP_PATHS.CAMPAIGN_EDIT) {\r\n const mapStep = {\r\n ...step,\r\n machineOptions: {\r\n guards: {\r\n needsConfirming: context => getNeedConfirming(permissions, context),\r\n },\r\n },\r\n\r\n };\r\n return mapStep;\r\n } else if (step.id === STEP_PATHS.VIDEO_AD) {\r\n const updatedVideoStep = {\r\n ...step,\r\n view: props => \r\n 
\r\n
\r\n {i18n.getString(_TL_('Nothing to see here'))}
\r\n \r\n {i18n.getString(_TL_(\"You haven't created any {{adType}} yet. Once you create an ad, you'll see it here.\"), { adType: i18n.getString(FilterFormat[filterFormat].label) })}\r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Note'))} \r\n {i18n.getString(_TL_('Please note that Audience campaigns will always serve on Microsoft sites (e.g., Microsoft Bing, Microsoft Casual Games, MSN, and Outlook.com) even if you’ve added website exclusions for them.'))} \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Note'))} \r\n {i18n.getString(_TL_('Please note that Audience campaigns will always serve on Microsoft sites (e.g., Microsoft Bing, Microsoft Casual Games, MSN, and Outlook.com) even if you’ve added website exclusions for them.'))} \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nDisplayPlusEditCampaignWizardInternal.propTypes = {\r\n siteMap: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n save: PropTypes.func.isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n currentCampaign: PropTypes.shape({\r\n Id: PropTypes.number.isRequired,\r\n CampaignSubType: PropTypes.number.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const DisplayPlusEditCampaignWizard = withSiteMap(DisplayPlusEditCampaignWizardInternal);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { withSiteMap, getRoutePathById } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { isAudienceNativeAdsCampaign, isAudienceCTVCampaign, isAudienceDealCampaign } from '@bingads-webui-campaign-react/constants';\r\n\r\nimport { WIZARD_TYPE_TO_FLOW, WIZARD_TYPES } from '../step-constants';\r\nimport { DisplayPlusEditWizard } from './display-plus-edit-wizard';\r\nimport { useDisplayPlusEditWizardStyles } from './wizard-styles';\r\n\r\nconst getWizardType = (currentCampaign) => {\r\n if (isAudienceNativeAdsCampaign(currentCampaign.CampaignSubType)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_EDIT;\r\n }\r\n\r\n if (isAudienceCTVCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_EDIT;\r\n }\r\n\r\n if (isAudienceDealCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_EDIT;\r\n }\r\n\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_EDIT;\r\n};\r\n\r\nconst DisplayPlusEditAdGroupWizardInternal = ({\r\n currentCampaign, currentAdGroup, siteMap, perfMarker,\r\n}) => {\r\n const styles = useDisplayPlusEditWizardStyles();\r\n const routeToNavigateToWhenDone = getRoutePathById(siteMap, 'adgroups');\r\n\r\n const wizardType = getWizardType(currentCampaign);\r\n const flowType = WIZARD_TYPE_TO_FLOW[wizardType];\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nDisplayPlusEditAdGroupWizardInternal.propTypes = {\r\n siteMap: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n save: PropTypes.func.isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n currentCampaign: PropTypes.shape({\r\n CampaignSubType: PropTypes.number.isRequired,\r\n }).isRequired,\r\n currentAdGroup: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const DisplayPlusEditAdGroupWizard = withSiteMap(DisplayPlusEditAdGroupWizardInternal);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withSiteMap, getRoutePathById } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { isAudienceNativeAdsCampaign, isAudienceCTVCampaign, isAudienceDealCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport { Layout } from '@bingads-webui-react/wizard';\r\nimport { ErrorBar } from '@bingads-webui-fluent-component/wizard-ui-library';\r\n\r\nimport { WIZARD_TYPE_TO_FLOW, WIZARD_TYPES } from '../step-constants';\r\nimport { DisplayPlusWizard } from './wizard';\r\nimport { StepList } from '../step-list';\r\nimport { AdGroupCreationFooter } from '../footers';\r\n\r\nconst getWizardType = (currentCampaign) => {\r\n if (isAudienceNativeAdsCampaign(currentCampaign.CampaignSubType)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CREATION;\r\n }\r\n\r\n if (isAudienceCTVCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_CREATION;\r\n }\r\n\r\n if (isAudienceDealCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_CREATION;\r\n }\r\n\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CREATION;\r\n};\r\n\r\nconst DisplayPlusCreateAdGroupWizardInternal = ({\r\n currentCampaign, currentAdGroup, siteMap, perfMarker,\r\n}) => {\r\n const routeToNavigateToWhenDone = getRoutePathById(siteMap, 'adgroups');\r\n\r\n const wizardType = getWizardType(currentCampaign);\r\n const flowType = WIZARD_TYPE_TO_FLOW[wizardType];\r\n\r\n return (\r\n \r\n currentAccount.PlacementExclusionLists['Default.GetOwnedOperatedExclusions'].get()}\r\n >\r\n {oolist => (\r\n oolist.value.length > 0 &&\r\n \r\n {i18n.getString(_TL_('You may be excluding the following websites which will prevent your campaign from serving'))}: { oolist.value.map(item => item.Url).join(', ')}\r\n \r\n )\r\n }\r\n \r\n);\r\n\r\nCheckOOInventoryBlocklists.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useState, useCallback, useEffect, useMemo } from 'react';\r\nimport { Body1Stronger, Body1, tokens, shorthands, makeStyles, Checkbox, Label, RadioGroup, Radio } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { CheckOOInventoryBlocklists } from './check-oo-inventory-blocklists';\r\nimport { contentTargetingGroups } from './content-targeting-groups';\r\n\r\nconst useContentTargetingStyles = makeStyles({\r\n contentTargetingSpecificOptionsContainerStyle: {\r\n flexDirection: 'column',\r\n },\r\n contentTargetingSpecificOptionContainerStyle: {\r\n display: 'flex',\r\n ...shorthands.padding(tokens.spacingHorizontalXS, tokens.spacingHorizontalNone, tokens.spacingVerticalXS, tokens.spacingHorizontalNone),\r\n ...shorthands.gap(tokens.spacingVerticalS),\r\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\r\n },\r\n controlWrapperStyle: {\r\n width: '100%',\r\n '>label': {\r\n width: '100%',\r\n marginTop: '-2px',\r\n },\r\n },\r\n labelDescriptionStyle: {\r\n fontSize: '12px',\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n entireSpecificSelectionStyle: {\r\n paddingBottom: '16px',\r\n },\r\n});\r\n\r\nconst ENTIRE_MICROSOFT_NETWORK = 'entire';\r\nconst SPECIFIC_PLACEMENTS = 'specific';\r\nconst EXCLUDED_PLACEMENT_IDS = [3, 4, 7];\r\n\r\nconst isTheEntireMicrosoftNetworkSelected = placements => _.isEmpty(placements);\r\n\r\nconst EntireNetworkOrSpecificSelection = React.memo(({ entireSpecificSelection, onChangeEntireSpecific }) => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useContentTargetingStyles();\r\n const allPlacementsLabel = i18n.getString(_TL_('The entire Microsoft Advertising Network (recommended)'));\r\n const allPlacementsSubLabel = i18n.getString(_TL_('This option includes Microsoft sites and additional partner traffic for extended reach and lower cost per click.'));\r\n const specificPlacementsLabel = i18n.getString(_TL_('Microsoft sites'));\r\n const specificPlacementsSubLabel = i18n.getString(_TL_('Show your ads on specific Microsoft placements.'));\r\n\r\n return (\r\n \r\n \r\n \r\n {allPlacementsLabel}\r\n \r\n
\r\n\r\n {allPlacementsSubLabel}\r\n \r\n \r\n }\r\n value={ENTIRE_MICROSOFT_NETWORK}\r\n />\r\n \r\n \r\n {specificPlacementsLabel}\r\n \r\n
\r\n\r\n {specificPlacementsSubLabel}\r\n \r\n \r\n }\r\n value={SPECIFIC_PLACEMENTS}\r\n />\r\n \r\n );\r\n});\r\n\r\nEntireNetworkOrSpecificSelection.propTypes = {\r\n entireSpecificSelection: PropTypes.string.isRequired,\r\n onChangeEntireSpecific: PropTypes.func.isRequired,\r\n};\r\n\r\nconst ContentTargetingSpecificPlacements = React.memo(({ groups, selectedPlacements, onToggleContentTargetingPlacement }) => {\r\n const isOnlyOnePlacementSelected = useMemo(() => (selectedPlacements || []).length === 1, [selectedPlacements]);\r\n const i18n = useContext(I18nContext);\r\n const styles = useContentTargetingStyles();\r\n return (\r\n <>\r\n \r\n onToggleContentTargetingPlacement(group.placementId)}\r\n disabled={isDisabled}\r\n className={styles.controlWrapperStyle}\r\n label={\r\n <>\r\n \r\n {i18n.getString(group.name)}\r\n \r\n
\r\n\r\n {i18n.getString(group.description)}\r\n \r\n \r\n }\r\n />\r\n
\r\n );\r\n })}\r\n \r\n );\r\n});\r\n\r\nContentTargetingSpecificPlacements.propTypes = {\r\n groups: PropTypes.arrayOf(PropTypes.shape({\r\n placementId: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n })).isRequired,\r\n selectedPlacements: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n onToggleContentTargetingPlacement: PropTypes.func.isRequired,\r\n};\r\n\r\nconst ContentTargetingPlacementsInternal = ({ updateValidation, validationProps, msnSubcategoriesEnabled }) => {\r\n const i18n = useContext(I18nContext);\r\n const placementsSectionLabel = i18n.getString(_TL_('Where do you want to show your ads?'));\r\n const placementOptionsLabel = i18n.getString(_TL_('Choose the specific Microsoft placements'));\r\n const filteredContentTargetingGroups = msnSubcategoriesEnabled ? contentTargetingGroups : contentTargetingGroups.filter(({ placementId }) => !EXCLUDED_PLACEMENT_IDS.includes(placementId));\r\n\r\n const { data: { placements } } = validationProps;\r\n\r\n const [entireSpecificSelection, setEntireSpecificSelection] = useState(isTheEntireMicrosoftNetworkSelected(placements) ? ENTIRE_MICROSOFT_NETWORK : SPECIFIC_PLACEMENTS);\r\n\r\n const selectedPlacements = useMemo(() => (placements ? placements.map(v => v.PlacementId) : []), [placements]);\r\n\r\n useEffect(() => {\r\n const radioSelection = isTheEntireMicrosoftNetworkSelected(placements) ? ENTIRE_MICROSOFT_NETWORK : SPECIFIC_PLACEMENTS;\r\n setEntireSpecificSelection(radioSelection);\r\n }, [setEntireSpecificSelection, placements]);\r\n\r\n const onChangeEntireSpecific = useCallback((_e, data) => {\r\n setEntireSpecificSelection(data.value);\r\n if (data.value === SPECIFIC_PLACEMENTS) {\r\n updateValidation([], {\r\n placements: filteredContentTargetingGroups.map(v => ({ PlacementId: v.placementId })),\r\n });\r\n } else {\r\n updateValidation([], {\r\n placements: [],\r\n });\r\n }\r\n }, [updateValidation, setEntireSpecificSelection, filteredContentTargetingGroups]);\r\n\r\n const onToggleContentTargetingPlacement = useCallback((placementId) => {\r\n if (selectedPlacements.includes(placementId)) {\r\n updateValidation([], {\r\n placements: selectedPlacements.filter(v => v !== placementId).map(v => ({ PlacementId: v })),\r\n });\r\n } else {\r\n updateValidation([], {\r\n placements: [...selectedPlacements, placementId].map(v => ({ PlacementId: v })),\r\n });\r\n }\r\n }, [updateValidation, selectedPlacements]);\r\n const styles = useContentTargetingStyles();\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledCompanyPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n editTargetButtonContainer: PropTypes.string.isRequired,\r\n hide: PropTypes.string.isRequired,\r\n noTargetSelected: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n companyNameTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeCompanyNameTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n onAudienceTargetInfoChange: PropTypes.func,\r\n shouldHide: PropTypes.bool,\r\n showExclusion: PropTypes.bool,\r\n};\r\n\r\nUnstyledCompanyPicker.defaultProps = {\r\n onAudienceTargetInfoChange: noop,\r\n shouldHide: false,\r\n showExclusion: true,\r\n};\r\n\r\nexport const ValidatedCompanyPicker = withBidAdjustment(withDefaultStyles(withCustomValidation(UnstyledCompanyPicker), getCompanyTargetStyles), 'CompanyName', ['companyNameTargets', 'negativeCompanyNameTargets']);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { criterionSettingCompanyStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getCompanyTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingCompanyStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","export const contentTargetingGroups = [\r\n {\r\n name: _TL_('Microsoft Edge Browsers'),\r\n description: _TL_('Native ad placements on Microsoft Edge’s new tab page'),\r\n placementId: 12,\r\n },\r\n {\r\n name: _TL_('Productivity'),\r\n description: _TL_('Microsoft 365 (Native and Display ad placements) and Outlook (Native and Display ad placements)'),\r\n placementId: 13,\r\n },\r\n {\r\n name: _TL_('Gaming'),\r\n description: _TL_('Native, Display, and Video ad placements on Microsoft Casual Games'),\r\n placementId: 14,\r\n },\r\n {\r\n name: _TL_('MSN'),\r\n description: _TL_('Native, Display, and Video ad placements on MSN (serving with all available MSN content)'),\r\n placementId: 15,\r\n },\r\n // {\r\n // name: _TL_('MSN - Sports'),\r\n // description: _TL_('Native, Display, and Video ad placements serving exclusively with MSN sports-related content'),\r\n // placementId: 3,\r\n // },\r\n {\r\n name: _TL_('MSN - Health'),\r\n description: _TL_('Native, Display, and Video ad placements serving exclusively with MSN health-related content'),\r\n placementId: 7,\r\n },\r\n {\r\n name: _TL_('MSN - Money'),\r\n description: _TL_('Native, Display, and Video ad placements serving exclusively with MSN money-related content'),\r\n placementId: 4,\r\n },\r\n];\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { MessageBar, MessageBarType } from '@fluentui/react';\r\nimport { itemStyle } from './styles/placements-function-target-styles';\r\n\r\nexport const CheckOOInventoryBlocklists = ({\r\n i18n,\r\n}) => (\r\n setCompanyAssociationRef(newRef)} />\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nContentTargetingPlacementsInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n placements: PropTypes.arrayOf(PropTypes.shape([])),\r\n }).isRequired,\r\n }).isRequired,\r\n msnSubcategoriesEnabled: PropTypes.bool.isRequired,\r\n};\r\n\r\nexport const getContentTargetingPlacementsSummaryText = ({ i18n, placements }) => (\r\n isTheEntireMicrosoftNetworkSelected(placements)\r\n ? i18n.getString(_TL_('The entire Microsoft Advertising Network'))\r\n : i18n.getString(_TL_('Microsoft sites')));\r\n\r\nexport const ContentTargetingPlacements = withCustomValidation(ContentTargetingPlacementsInternal);\r\n","import React, { useEffect, useMemo, useState, useContext } from 'react';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { flatten, noop, every, isEmpty } from 'underscore';\r\nimport { IndustryTargetSetting } from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { criterionHelper } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getIndustryTargetStyles } from './styles/industry-target-styles';\r\nimport { withBidAdjustment } from './with-bid-adjustment';\r\n\r\nexport const formatIndustry = ({ industry, i18n }) => {\r\n if (!industry || !industry.length) {\r\n return i18n.getString(_TL_('Target Industries'));\r\n }\r\n\r\n if (industry.length === 1) {\r\n return i18n.getString(_TL_('Targeted: 1 industry'));\r\n }\r\n\r\n return i18n.getString(_TL_('Targeted: {{count}} industries'), { count: (industry.length) });\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst UnstyledIndustryPicker = (props) => {\r\n const {\r\n classes,\r\n updateValidation,\r\n validationProps,\r\n onAudienceTargetInfoChange,\r\n shouldHide,\r\n showExclusion,\r\n initialIndustryTargets,\r\n } = props;\r\n\r\n const { data: { industry, negativeIndustry } } = validationProps;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const [industryAssociationRef, setIndustryAssociationRef] = useState();\r\n const styles = useStyles();\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const industryAssociationView = useMemo(() => {\r\n const industryView = new IndustryTargetSetting({\r\n criterionType: 'Industry',\r\n type: 'Industry',\r\n showBidOnlyNote: false,\r\n showExclusion,\r\n defaultBidAdjustment: 0,\r\n isForVNext: true,\r\n currentLevelTargetInfo,\r\n });\r\n\r\n industryView.render();\r\n\r\n return industryView;\r\n }, [currentLevelTargetInfo, showExclusion]);\r\n\r\n const onChange = () => {\r\n if (isEmpty(validationProps.data)) {\r\n // data is still loading\r\n return;\r\n }\r\n\r\n const updatedItems = industryAssociationView.currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const industryTargetsBidAdjustment = [];\r\n\r\n const industryTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === 'Industry'))\r\n .map(({ Id, Criterion }) => {\r\n const { IndustryCriterion } = Criterion;\r\n\r\n const targetWithBidAdjustment = {\r\n Id,\r\n Criterion,\r\n };\r\n\r\n industryTargetsBidAdjustment.push(targetWithBidAdjustment);\r\n\r\n return IndustryCriterion.Target;\r\n });\r\n\r\n const negativeIndustryTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === 'NegativeIndustry'))\r\n .map(({ Criterion }) => {\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return IndustryCriterion.Target;\r\n });\r\n\r\n updateValidation([], { industry: industryTargets, negativeIndustry: negativeIndustryTargets, industryTargetsBidAdjustment });\r\n\r\n if (activity) {\r\n activity.signal(`onIndustryTargetChange - ${JSON.stringify({ industry: industryTargets })}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n onAudienceTargetInfoChange(currentLevelTargetInfo);\r\n }, [currentLevelTargetInfo, onAudienceTargetInfoChange]);\r\n\r\n useEffect(() => {\r\n if (industryAssociationRef && industryAssociationRef.childElementCount === 0 && industryAssociationView) {\r\n industryAssociationRef.innerHTML = '';\r\n industryAssociationRef.append(industryAssociationView.el);\r\n }\r\n }, [industryAssociationRef, industryAssociationView]);\r\n\r\n useEffect(() => {\r\n industryAssociationView.searchView.searchTreeInitializationPromise.then(() => {\r\n currentLevelTargetInfo.off('AdGroupCriterionIndustryChanged', onChange);\r\n\r\n const industryTargets = industryAssociationView.searchView.treeView.node.children.map((child) => {\r\n const { children } = child;\r\n\r\n const innerChildren = children.map(innerChild => innerChild.data);\r\n\r\n return [...innerChildren];\r\n });\r\n\r\n const flatIndustryTargets = flatten(industryTargets);\r\n\r\n if (industry && industry.length > 0) {\r\n const selectedIndustries = flatIndustryTargets.filter(({ Id }) => industry.includes(Id));\r\n\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'Industry'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return industry.includes(IndustryCriterion.Target);\r\n }));\r\n\r\n if (currentTargets.length !== selectedIndustries.length || !isSame) {\r\n selectedIndustries.forEach((data) => {\r\n const { BidAdjustment = 0, Id } = (initialIndustryTargets && initialIndustryTargets.find(({ criterion }) => criterion === data.Id)) || {};\r\n const industryCriterion = criterionHelper.buildLinkedInCriterion(\r\n 'Industry',\r\n data,\r\n true,\r\n BidAdjustment,\r\n 0\r\n );\r\n\r\n const criterion = {\r\n ...industryCriterion,\r\n Id,\r\n };\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n\r\n if (negativeIndustry && negativeIndustry.length > 0) {\r\n const selectedNegativeIndustries = flatIndustryTargets.filter(({ Id }) => negativeIndustry.includes(Id));\r\n\r\n const currentNegativeTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'NegativeIndustry'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentNegativeTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return negativeIndustry.includes(IndustryCriterion.Target);\r\n }));\r\n\r\n if (currentNegativeTargets.length !== selectedNegativeIndustries.length || !isSame) {\r\n selectedNegativeIndustries.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'Industry',\r\n data,\r\n false,\r\n 0,\r\n 0\r\n );\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n }).then(() => {\r\n currentLevelTargetInfo.on('AdGroupCriterionIndustryChanged', onChange);\r\n currentLevelTargetInfo.trigger('AdGroupCriterionIndustryChanged'); // trigger the initial validation\r\n });\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionIndustryChanged', onChange);\r\n };\r\n }, [industry, negativeIndustry]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n \r\n \r\n
)}\r\n \r\n
setIndustryAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledIndustryPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n industry: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeIndustry: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n onAudienceTargetInfoChange: PropTypes.func,\r\n shouldHide: PropTypes.bool,\r\n showExclusion: PropTypes.bool,\r\n initialIndustryTargets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n\r\nUnstyledIndustryPicker.defaultProps = {\r\n shouldHide: false,\r\n showExclusion: true,\r\n onAudienceTargetInfoChange: noop,\r\n};\r\n\r\nconst UnstyledIndustryPickerWithBidAdjustment = withBidAdjustment(UnstyledIndustryPicker, 'Industry', ['industry', 'negativeIndustry']);\r\n\r\nexport const ValidatedIndustryPicker = withDefaultStyles(withCustomValidation(UnstyledIndustryPickerWithBidAdjustment), getIndustryTargetStyles);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { criterionSettingIndustryStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getIndustryTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingIndustryStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import React, { useContext, useEffect, useMemo, useState } from 'react';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { every, noop, isEmpty } from 'underscore';\r\nimport { JobFunctionTargetSetting } from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { criterionHelper } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getJobFunctionTargetStyles } from './styles/job-function-target-styles';\r\nimport { withBidAdjustment } from './with-bid-adjustment';\r\n\r\nexport const formatJobFunction = ({ jobTargets, i18n }) => {\r\n if (!jobTargets || !jobTargets.length) {\r\n return i18n.getString(_TL_('Target Jobs'));\r\n }\r\n\r\n if (jobTargets.length === 1) {\r\n return i18n.getString(_TL_('Targeted: 1 job'));\r\n }\r\n\r\n return i18n.getString(_TL_('Targeted: {{count}} jobs'), { count: (jobTargets.length) });\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst UnstyledJobFunctionPicker = (props) => {\r\n const {\r\n classes,\r\n updateValidation,\r\n validationProps,\r\n onAudienceTargetInfoChange,\r\n shouldHide,\r\n showExclusion,\r\n initialJobTargets,\r\n } = props;\r\n const { data: { jobTargets, negativeJobTargets } } = validationProps;\r\n\r\n const [jobFunctionAssociationRef, setJobFunctionAssociationRef] = useState();\r\n\r\n const styles = useStyles();\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const jobFunctionAssociationView = useMemo(() => {\r\n const jobFunctionView = new JobFunctionTargetSetting({\r\n criterionType: 'JobFunction',\r\n type: 'JobFunction',\r\n showBidOnlyNote: false,\r\n showExclusion,\r\n defaultBidAdjustment: 0,\r\n isForVNext: true,\r\n currentLevelTargetInfo,\r\n });\r\n\r\n jobFunctionView.render();\r\n\r\n return jobFunctionView;\r\n }, [currentLevelTargetInfo, showExclusion]);\r\n\r\n const onChange = () => {\r\n if (isEmpty(validationProps.data)) {\r\n // data is still loading\r\n return;\r\n }\r\n\r\n const updatedItems = jobFunctionAssociationView.currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const jobTargetBidAdjustments = [];\r\n\r\n const jobTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'JobFunction'))\r\n .map(({ Id, Criterion }) => {\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n const targetWithBidAdjustment = {\r\n Id,\r\n Criterion,\r\n };\r\n\r\n jobTargetBidAdjustments.push(targetWithBidAdjustment);\r\n\r\n return JobFunctionCriterion.Target;\r\n });\r\n\r\n const negativeJobTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'NegativeJobFunction'))\r\n .map(({ Criterion }) => {\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return JobFunctionCriterion.Target;\r\n });\r\n\r\n updateValidation([], { jobTargets: jobTarget, negativeJobTargets: negativeJobTarget, jobTargetBidAdjustments });\r\n\r\n if (activity) {\r\n activity.signal(`onIndustryTargetChange - ${JSON.stringify({ jobFunction: jobTarget })}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n onAudienceTargetInfoChange(currentLevelTargetInfo);\r\n }, [currentLevelTargetInfo, onAudienceTargetInfoChange]);\r\n\r\n useEffect(() => {\r\n if (jobFunctionAssociationRef && jobFunctionAssociationRef.childElementCount === 0 && jobFunctionAssociationView) {\r\n jobFunctionAssociationRef.innerHTML = '';\r\n jobFunctionAssociationRef.append(jobFunctionAssociationView.el);\r\n }\r\n }, [jobFunctionAssociationRef, jobFunctionAssociationView]);\r\n\r\n useEffect(() => {\r\n jobFunctionAssociationView.searchView.initializeSearchDataTask.then(() => {\r\n currentLevelTargetInfo.off('AdGroupCriterionJobFunctionChanged', onChange);\r\n\r\n const allJobTargets = jobFunctionAssociationView.searchView.searchResultView.items.map(item => item);\r\n\r\n if (jobTargets && jobTargets.length > 0) {\r\n const selectedJobTargets = allJobTargets.filter(({ id }) => jobTargets.includes(id));\r\n\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'JobFunction'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return jobTargets.includes(JobFunctionCriterion.Target);\r\n }));\r\n\r\n if (currentTargets.length !== selectedJobTargets.length || !isSame) {\r\n selectedJobTargets.forEach((data) => {\r\n const { BidAdjustment = 0, Id } = (initialJobTargets && initialJobTargets.find(({ criterion }) => criterion === data.id)) || {};\r\n const jobFunctionCriterion = criterionHelper.buildLinkedInCriterion(\r\n 'JobFunction',\r\n data,\r\n true,\r\n BidAdjustment,\r\n 0\r\n );\r\n\r\n const criterion = {\r\n ...jobFunctionCriterion,\r\n Id,\r\n };\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n\r\n if (negativeJobTargets && negativeJobTargets.length > 0) {\r\n const selectedNegativeJobTargets = allJobTargets.filter(({ id }) => negativeJobTargets.includes(id));\r\n\r\n const currentNegativeTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'NegativeJobFunction'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentNegativeTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return negativeJobTargets.includes(JobFunctionCriterion.Target);\r\n }));\r\n\r\n if (currentNegativeTargets.length !== selectedNegativeJobTargets.length || !isSame) {\r\n selectedNegativeJobTargets.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'JobFunction',\r\n data,\r\n false,\r\n 0,\r\n 0\r\n );\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n }).then(() => {\r\n currentLevelTargetInfo.on('AdGroupCriterionJobFunctionChanged', onChange);\r\n currentLevelTargetInfo.trigger('AdGroupCriterionJobFunctionChanged'); // trigger the initial validation\r\n });\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionJobFunctionChanged', onChange);\r\n };\r\n }, [jobTargets, negativeJobTargets]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n \r\n \r\n \r\n setShowDialog(false)} text={i18n.getString(_TL_('Cancel'))} />\r\n \r\n \r\n );\r\n};\r\n\r\nManuallyAddBrandModalUnstyled.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showDialog: PropTypes.bool.isRequired,\r\n setShowDialog: PropTypes.func.isRequired,\r\n setBrand: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({\r\n brandLabel: PropTypes.string.isRequired,\r\n brandInfoInput: PropTypes.string.isRequired,\r\n brandFormItem: PropTypes.string.isRequired,\r\n errorHint: PropTypes.string.isRequired,\r\n }).isRequired,\r\n brandsList: PropTypes.arrayOf(PropTypes.shape({\r\n BrandName: PropTypes.string.isRequired,\r\n })).isRequired,\r\n selectedBrands: PropTypes.arrayOf(PropTypes.shape({\r\n BrandName: PropTypes.string.isRequired,\r\n })).isRequired,\r\n};\r\n\r\nexport const ManuallyAddBrandModal = withDefaultStyles(ManuallyAddBrandModalUnstyled, getManuallyAddBrandStyles);\r\n","import _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState, useCallback, useMemo } from 'react';\r\nimport {\r\n Panel,\r\n PanelType,\r\n PrimaryButton,\r\n DefaultButton,\r\n} from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getBmcMtEndpoint, hasError } from '@bingads-webui-campaign/cpg-product-feed-grid';\r\nimport { Loading } from '@bingads-webui-campaign-react/loading';\r\nimport { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\n\r\nimport { BrandSelector } from './brand-selector/index';\r\nimport { ManuallyAddBrandModal } from './brand-selector/manually-add-brand-modal';\r\nimport { getAddBrandPanelStyles } from '../style';\r\n\r\nconst text = {\r\n add: _TL_('Add'),\r\n cancel: _TL_('Cancel'),\r\n};\r\n\r\nconst overlayProps = {\r\n styles: {\r\n root: {\r\n top: 60,\r\n },\r\n },\r\n};\r\n\r\nconst AddBrandPanelUnstyled = (props) => {\r\n const {\r\n isOpen,\r\n classes,\r\n onClose,\r\n i18n,\r\n scope,\r\n brandGrid,\r\n activity,\r\n logScope,\r\n setRefreshDataTile,\r\n perfMarker,\r\n brandsList,\r\n } = props;\r\n\r\n const { aid, cid, uid } = scope.values;\r\n const [selectedBrands, setSelectedBrands] = useState([]);\r\n const [customizedBrand, setCustomizedBrand] = useState(null);\r\n const [loading, setLoading] = useState(false);\r\n const AlertCenter = useMemo(() => new AlertHelper({ i18n }), [i18n]);\r\n\r\n const addBrands = useCallback(() => {\r\n setLoading(true);\r\n const childPerfMarker = perfMarker.createChild('Simplified_BatchAddBrand');\r\n childPerfMarker.willInit();\r\n const brandsData = _.map(\r\n selectedBrands,\r\n (brand, index) => `BrandsBatch[${index}][BrandName]=${encodeURIComponent(brand.BrandName)}&BrandsBatch[${index}][BrandUrl]=${encodeURIComponent(brand.BrandUrl)}`\r\n ).join('&');\r\n\r\n activity.trace(`${logScope}|AddBrandPanel|save brand request data: ${JSON.stringify(selectedBrands)}`);\r\n\r\n $.ajax({\r\n url: `${getBmcMtEndpoint()}/api/v1/manufacturers/${cid}/brands/batch?cid=${cid}&aid=${aid}&uid=${uid}`,\r\n type: 'POST',\r\n data: brandsData,\r\n xhrFields: {\r\n withCredentials: true,\r\n },\r\n success: (res) => {\r\n childPerfMarker.done();\r\n if (!hasError(res)) {\r\n const searchAddedBrand = _.filter(selectedBrands, brand => brand.MmcBrandId);\r\n activity.trace(`${logScope}|AddBrandPanel|save brand Succeed|SearchAddedBrandLength: ${searchAddedBrand.length}|ManuallyAddedBrandLength: ${selectedBrands.length - searchAddedBrand.length}`);\r\n AlertCenter.dismissAlert();\r\n setSelectedBrands([]);\r\n onClose();\r\n brandGrid.fetchGridData = true;\r\n brandGrid.grid.gridView.refresh(true);\r\n setRefreshDataTile(true);\r\n } else {\r\n activity.error(`${logScope}|AddBrandPanel|save brand error: ${res.Messages}`);\r\n AlertCenter.showAlert(res.Messages);\r\n }\r\n setLoading(false);\r\n },\r\n error: (err) => {\r\n childPerfMarker.done();\r\n setLoading(false);\r\n activity.error(`${logScope}|AddBrandPanel|save brand request error: ${JSON.stringify(err)}`);\r\n AlertCenter.showAlert(_.get(err, ['responseJSON', 'Message']));\r\n },\r\n });\r\n }, [selectedBrands, aid, cid, uid, onClose, brandGrid, AlertCenter, activity, logScope, setRefreshDataTile, perfMarker]);\r\n\r\n\r\n const onBrandSelectedChange = useCallback((brands) => {\r\n setSelectedBrands(brands);\r\n }, [setSelectedBrands]);\r\n\r\n const [showManuallyAddBrandDialog, setShowManuallyAddBrandDialog] = useState(false);\r\n\r\n const saveBrandToResultList = useCallback((brand) => {\r\n activity.trace(`${logScope}|AddBrandPanel|manually add brand: ${JSON.stringify(brand)}`);\r\n setCustomizedBrand(brand);\r\n }, [setCustomizedBrand, activity, logScope]);\r\n\r\n const cancelAddBrands = useCallback(() => {\r\n setSelectedBrands([]);\r\n onClose();\r\n }, [onClose]);\r\n\r\n return (\r\n \r\n {loading && \r\n {loading && \r\n {i18n.getString(_TL_('Add your brands'))}\r\n
\r\n \r\n {renderToolbarContainer()}\r\n \r\n ), [renderToolbarContainer]);\r\n\r\n const topOfGridContent = useMemo(() => (\r\n 0 ? stickyTopOfGridContent : null}\r\n gridView={productFeedGrid}\r\n backboneGridView={gridViewConfig.backboneGridView}\r\n customClasses={{\r\n tablePageContainer: 'brand-page',\r\n gridViewContainer: `brand-table ${_.size(brandsList) > 0 ? '' : 'brand-table-hide'}`,\r\n }}\r\n />\r\n { MranSimplificationV2 ? setIsAddBrandPanelOpen(false)}\r\n brandGrid={gridViewConfig.brandGrid}\r\n i18n={i18n}\r\n scope={scope}\r\n activity={activity}\r\n logScope={logScope}\r\n setRefreshDataTile={setRefreshDataTile}\r\n perfMarker={perfMarker}\r\n brandsList={brandsList}\r\n /> : setIsAddBrandPanelOpen(false)}\r\n brandGrid={gridViewConfig.brandGrid}\r\n i18n={i18n}\r\n scope={scope}\r\n activity={activity}\r\n logScope={logScope}\r\n setRefreshDataTile={setRefreshDataTile}\r\n perfMarker={perfMarker}\r\n brandsList={brandsList}\r\n /> }\r\n \r\n );\r\n};\r\n\r\nNewSummaryPage.propTypes = {\r\n classes: PropTypes.shape({\r\n overviewContainer: PropTypes.string.isRequired,\r\n subTitle: PropTypes.string.isRequired,\r\n placeholderImage: PropTypes.string.isRequired,\r\n placeholderContainer: PropTypes.string.isRequired,\r\n addBrandsTip: PropTypes.string.isRequired,\r\n addButton: PropTypes.string.isRequired,\r\n tileContainer: PropTypes.string.isRequired,\r\n }),\r\n serverContext: PropTypes.shape({}).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n scope: PropTypes.shape({}).isRequired,\r\n changeLayout: PropTypes.func.isRequired,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n MranSimplificationV2: PropTypes.bool,\r\n }).isRequired,\r\n }).isRequired,\r\n currentCampaign: PropTypes.shape({}).isRequired,\r\n currentAdGroup: PropTypes.shape({}).isRequired,\r\n renderToolbarContainer: PropTypes.func.isRequired,\r\n crossPageSelectPlugin: PropTypes.shape({\r\n plugin: PropTypes.func.isRequired,\r\n }).isRequired,\r\n toolbarPlugin: PropTypes.shape({\r\n plugin: PropTypes.func.isRequired,\r\n }).isRequired,\r\n panelView: PropTypes.shape({\r\n render: PropTypes.func,\r\n }).isRequired,\r\n onGridInjected: PropTypes.func.isRequired,\r\n showTopOfGridPanel: PropTypes.func.isRequired,\r\n siteMap: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string,\r\n })).isRequired,\r\n perfMarker: perfMarkerPropTypes.isRequired,\r\n};\r\n\r\nNewSummaryPage.defaultProps = {\r\n classes: {},\r\n};\r\n\r\nconst NewSummaryPageWithLogContext = props => (\r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport const StyledNewSummaryPage = _.compose(\r\n WrappedComponent => withDefaultStyles(WrappedComponent, getOverviewStyles),\r\n withCurrentExpandedScope,\r\n withTablePageStateManager({ getToolbarConfig })\r\n)(NewSummaryPageWithLogContext);\r\n","export function getToolbarConfig({\r\n i18n,\r\n lazyInject,\r\n}) {\r\n // eslint-disable-next-line\r\n const toolbarSelectedConfig = new Map([\r\n\r\n ]);\r\n\r\n // eslint-disable-next-line\r\n const toolbarUnselectedConfig = new Map([\r\n ['button-add-brand', {\r\n id: 'button-add-brand',\r\n type: 'button',\r\n classes: ['btn-primary'],\r\n text: i18n.getString(_TL_('Add brands')),\r\n iconLeftGlyphName: 'ba-Add',\r\n onClick() {\r\n const gridView = lazyInject().backboneGridView;\r\n gridView.AddBrandToolbar();\r\n },\r\n }],\r\n ['expander', {\r\n type: 'expander',\r\n }],\r\n ['search-box-filter', {\r\n id: 'search-box-filter',\r\n type: 'search-box',\r\n placeholder: i18n.getString(_TL_('Brand name')),\r\n handleChange: (value) => {\r\n const gridView = lazyInject().backboneGridView;\r\n gridView.onBrandSearch(value);\r\n },\r\n }],\r\n ]);\r\n return {\r\n toolbarSelectedConfig,\r\n toolbarUnselectedConfig,\r\n };\r\n}\r\n","import { compose } from 'underscore';\r\nimport React from 'react';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { withCurrentExpandedScope } from '@bingads-webui-campaign-react/use-current-scope-entity';\r\nimport { StyledNewSummaryPage } from './new-summary-page';\r\n\r\nclass FeedSummary extends React.PureComponent {\r\n render() {\r\n return \r\n \r\n );\r\n};\r\n\r\nFrequencyCapping.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n legacyI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n inputContainer: PropTypes.string.isRequired,\r\n frequency: PropTypes.string.isRequired,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n CapValue: PropTypes.string,\r\n TimeGranularity: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n};\r\n\r\nconst ValidatedFrequencyCapping = withCustomValidation(FrequencyCapping);\r\n\r\nexport {\r\n FrequencyCapping,\r\n ValidatedFrequencyCapping,\r\n};\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { deliveryColumnStyle, adColumnPreviewStyle, underlineLinkStyle, labelsCellItemStyle, campaignGridBudgetCenterEntryStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { cellMinWidth, cellMaxWidth } from './variable';\r\n\r\nexport const columnStyle = ({ palette = {} }) => ({\r\n '& .flex-column-group': {\r\n // set a general min-width and max-width. this can be overrided\r\n '& .ad-type.trigger-popup': {\r\n borderBottom: '1px dashed #0078D4',\r\n width: 'fit-content',\r\n display: 'inline',\r\n cursor: 'pointer',\r\n },\r\n\r\n '& .flex-cell': {\r\n minWidth: cellMinWidth,\r\n maxWidth: cellMaxWidth,\r\n },\r\n\r\n '& .flex-cell[data-column=selection]': {\r\n borderRight: 'none',\r\n width: 46,\r\n minWidth: 46,\r\n },\r\n\r\n '& .flex-cell[data-column=Status]': {\r\n width: 60,\r\n minWidth: 60,\r\n borderRight: 'none',\r\n '& .grid-edit-icon': {\r\n display: 'none',\r\n },\r\n\r\n '& .statuschangehover': {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n\r\n '& .iconba-ChevronDown': {\r\n lineHeight: '16px',\r\n opacity: 0,\r\n marginLeft: 5,\r\n fontSize: 11,\r\n color: palette.themeDark,\r\n },\r\n },\r\n\r\n // entity name\r\n '& .flex-cell[data-column=AdGroup]': {\r\n width: 300,\r\n minWidth: 100,\r\n '&.flex-cell:nth-child(3)': {\r\n fontSize: '14px',\r\n },\r\n },\r\n '& .flex-cell[data-column=Campaign]': {\r\n width: 300,\r\n minWidth: 100,\r\n '&.flex-cell:nth-child(3)': {\r\n fontSize: '14px',\r\n },\r\n flexWrap: 'wrap',\r\n '& .experiment-name': {\r\n flexBasis: '100%',\r\n },\r\n },\r\n '& .flex-cell[data-column=Name]': {\r\n width: 300,\r\n minWidth: 100,\r\n '&.flex-cell:nth-child(3)': {\r\n fontSize: '14px',\r\n },\r\n ...underlineLinkStyle({ palette, elementLocator: 'a.experiment-name' }),\r\n },\r\n\r\n '& .flex-cell[data-column=Keyword]': {\r\n width: 300,\r\n minWidth: 100,\r\n '&.flex-cell:nth-child(3)': {\r\n fontSize: '14px',\r\n },\r\n },\r\n\r\n '& .flex-cell[data-column=AdPreview]': {\r\n width: 360,\r\n minWidth: 260,\r\n '&.flex-cell:nth-child(3)': {\r\n fontSize: '14px',\r\n },\r\n ...adColumnPreviewStyle(),\r\n },\r\n\r\n '& .flex-cell[data-column=Delivery]': {\r\n width: 180,\r\n ...deliveryColumnStyle(),\r\n },\r\n '& .flex-cell[data-column=QualityScore]': {\r\n width: 180,\r\n '& .iconba-More': {\r\n cursor: 'pointer',\r\n },\r\n },\r\n '& .flex-cell[data-column=AdGroupId]': {\r\n width: 180,\r\n minWidth: 120,\r\n },\r\n '& .flex-cell[data-column=FinalUrlSuffix]': {\r\n width: 180,\r\n },\r\n '& .flex-cell[data-column=AdGroupType]': {\r\n width: 180,\r\n },\r\n '& .flex-cell[data-column=Labels]': {\r\n width: 180,\r\n '& .labels-cell-container': {\r\n ...labelsCellItemStyle(),\r\n },\r\n },\r\n '& .flex-cell[data-column^=AdCustomizerAttributes]': {\r\n ...deliveryColumnStyle(),\r\n '& .rsa-ad-customizer-attribute-container': {\r\n display: 'flex',\r\n '& .iconba': {\r\n marginRight: '2px',\r\n },\r\n },\r\n },\r\n\r\n '& .flex-cell[data-column=CallForwarding]': {\r\n width: 180,\r\n },\r\n\r\n // The bid strategy name column in campaigns, ad groups and keywords grids\r\n '& .flex-cell[data-column=BidStrategyName]': {\r\n width: 240,\r\n },\r\n // The bid strategy name column in portfolio bid strategy grid\r\n '& .flex-cell[data-column=PortfolioGridBidStrategyName]': {\r\n width: 300,\r\n },\r\n '& .flex-cell[data-column=BidStrategyType]': {\r\n width: 240,\r\n },\r\n '& .flex-cell[data-column=Language]': {\r\n width: 240,\r\n },\r\n\r\n '& .flex-cell[data-column=StartDate]': {\r\n width: 120,\r\n minWidth: 100,\r\n },\r\n '& .flex-cell[data-column=EndDate]': {\r\n width: 120,\r\n minWidth: 100,\r\n },\r\n\r\n\r\n '& .flex-cell[data-column=TrackingTemplate]': {\r\n width: 420,\r\n },\r\n\r\n '& .flex-cell[data-column=CustomParameters]': {\r\n width: 300,\r\n minWidth: 100,\r\n },\r\n\r\n '& .flex-cell[data-column=Budget]': {\r\n width: 180,\r\n minWidth: 120,\r\n '& .iconba-Financial': {\r\n color: '#0078d4',\r\n },\r\n '& .iconba-Financial.disabled': {\r\n color: palette.neutralTertiary,\r\n },\r\n ...campaignGridBudgetCenterEntryStyle({ palette }),\r\n },\r\n\r\n '& .flex-cell[data-column=DeliveryStatus]': {\r\n width: 180,\r\n '& .iconba-Financial': {\r\n color: '#0078d4',\r\n },\r\n '& .iconba-Financial.disabled': {\r\n color: palette.neutralTertiary,\r\n },\r\n ...deliveryColumnStyle(),\r\n },\r\n\r\n '& .flex-cell[data-column=CampaignId]': {\r\n width: 180,\r\n minWidth: 120,\r\n },\r\n\r\n '& .flex-cell[data-column=CampaignType]': {\r\n width: 120,\r\n },\r\n\r\n '& .flex-cell[data-column=DisplayBiddingStrategyType]': {\r\n width: 180,\r\n },\r\n\r\n '& .flex-cell[data-column=DisplayBiddingStrategyTargetCpa]': {\r\n '& .iconba-Financial': {\r\n color: '#0078d4',\r\n },\r\n '& .iconba-Financial.disabled': {\r\n color: palette.neutralTertiary,\r\n },\r\n '& .bidlandscape_icon': {\r\n paddingLeft: '5px',\r\n },\r\n },\r\n\r\n '& .flex-cell[data-column=DisplayBiddingStrategyTargetRoas]': {\r\n '& .iconba-Financial': {\r\n color: '#0078d4',\r\n },\r\n '& .iconba-Financial.disabled': {\r\n color: palette.neutralTertiary,\r\n },\r\n '& .bidlandscape_icon': {\r\n paddingLeft: '5px',\r\n },\r\n },\r\n\r\n '& .flex-cell[data-column=Languages]': {\r\n width: 240,\r\n },\r\n\r\n '& .flex-cell[data-column=MatchType]': {\r\n width: 180,\r\n },\r\n\r\n '& .flex-cell[data-column=KeywordId]': {\r\n width: 240,\r\n },\r\n\r\n '& .flex-cell[data-column=LandingPage]': {\r\n width: 300,\r\n minWidth: 100,\r\n },\r\n\r\n '& .flex-cell[data-column=Param1]': {\r\n width: 300,\r\n },\r\n\r\n '& .flex-cell[data-column=Param2]': {\r\n width: 300,\r\n },\r\n\r\n '& .flex-cell[data-column=Param3]': {\r\n width: 300,\r\n },\r\n\r\n '& .flex-cell[data-column=FirstPageBidEstimation]': {\r\n width: 180,\r\n },\r\n\r\n '& .flex-cell[data-column=MainlineBidEstimation]': {\r\n width: 180,\r\n },\r\n\r\n '& .flex-cell[data-column=BestPositionBidEstimation]': {\r\n width: 180,\r\n },\r\n\r\n '& .flex-cell[data-column=AdID]': {\r\n width: 240,\r\n minWidth: 120,\r\n },\r\n\r\n '& .flex-cell[data-column=AdType]': {\r\n width: 240,\r\n '& div.disabled': {\r\n color: '#a2a2a2',\r\n },\r\n },\r\n\r\n '& .flex-cell[data-column=DevicePreference]': {\r\n width: 180,\r\n },\r\n\r\n // performance metrics\r\n '& .flex-cell[data-column=SearchBid]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=Medium]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=Clicks]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=CTR]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AverageCPC]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=Spend]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AveragePosition]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AverageCPM]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=ClickAndPhoneSpend]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=TopImpressionRate]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AbsoluteTopImpressionRate]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=CPA]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=Conversions]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=ConversionRate]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AdvertiserReportedRevenue]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AllConversionCPA]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AllConversions]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AllConversionAdvertiserReportedRevenue]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AllConversionRevenueOnAdSpend]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=ViewThroughConversions]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AuctionWonPercent]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AuctionLostToBudgetPercent]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AuctionLostToRankPercent]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=TopImpressionShareLostToBudget]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=TopImpressionShareLostToRank]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AbsoluteTopImpressionSharePercent]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AbsoluteTopImpressionShareLostToBudget]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AbsoluteTopImpressionShareLostToRank]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AudienceImpressionShare]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AudienceImpressionShareLostToBudget]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AudienceImpressionShareLostToRank]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=RelativeCTR]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=ManualCalls]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=PTR]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=Impressions]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=RevenueOnAdSpend]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=AllConversionRate]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=ClickSharePercent]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=ExactMatchImpressionSharePercent]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=TopImpressionSharePercent]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=PhoneImpressions]': {\r\n width: 120,\r\n },\r\n\r\n // MMC grids\r\n '& .flex-cell[data-column=IssueType]': {\r\n width: 80,\r\n },\r\n '& .flex-cell[data-column=ProductIssue]': {\r\n width: 600,\r\n },\r\n '& .flex-cell[data-column=AffectedCountries]': {\r\n width: 300,\r\n },\r\n '& .flex-cell[data-column=AffectedProducts]': {\r\n width: 150,\r\n },\r\n '& .flex-cell[data-column=StoreIssue]': {\r\n width: 600,\r\n },\r\n '& .flex-cell[data-column=FeedIssue]': {\r\n width: 400,\r\n },\r\n '& .flex-cell[data-column=ProductId]': {\r\n width: 200,\r\n },\r\n '& .flex-cell[data-column=ProductTitle]': {\r\n width: 200,\r\n },\r\n '& .flex-cell[data-column=PolicyDetails]': {\r\n width: 250,\r\n },\r\n '& .flex-cell[data-column=PolicyName]': {\r\n width: 300,\r\n },\r\n '& .flex-cell[data-column=PolicyDescriptions]': {\r\n width: 600,\r\n },\r\n '& .flex-cell[data-column=PromotionID]': {\r\n width: 175,\r\n },\r\n '& .flex-cell[data-column=CountryAndLanguage]': {\r\n width: 200,\r\n },\r\n '& .flex-cell[data-column=PromotionStatus]': {\r\n width: 100,\r\n },\r\n '& .flex-cell[data-column=SeasonalityAdjustmentName]': {\r\n width: 160,\r\n },\r\n '& .flex-cell[data-column=Scope]': {\r\n width: 180,\r\n },\r\n '& .flex-cell[data-column=Devices]': {\r\n width: 220,\r\n },\r\n '& .flex-cell[data-column=AdjustmentPercentage]': {\r\n width: 220,\r\n },\r\n '& .flex-cell[data-column=StartTime]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=EndTime]': {\r\n width: 120,\r\n },\r\n '& .flex-cell[data-column=ConversionsCredit]': {\r\n '& .status-warning': {\r\n color: '#D83B01',\r\n borderBottom: '1px dashed #0078D4',\r\n cursor: 'pointer',\r\n },\r\n },\r\n },\r\n});\r\n","export const cellMinWidth = 80;\r\nexport const cellMaxWidth = 800;\r\nexport const popChildCount = 4;\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { popChildCount, cellMaxWidth } from './variable';\r\n\r\nexport const headerStyle = ({ palette = {}, iconFontFamily = 'MsAds MDL2 Assets' }) => ({\r\n '& .header': {\r\n backgroundColor: palette.white,\r\n\r\n '& .resizable-column-header': {\r\n position: 'relative',\r\n userSelect: 'none',\r\n\r\n '& .dragger': {\r\n width: 18,\r\n right: -9,\r\n zIndex: 2,\r\n height: 'calc(100% + 2px)',\r\n cursor: 'col-resize',\r\n userSelect: 'none',\r\n position: 'absolute',\r\n\r\n '&:hover': {\r\n '& .dragger-bar': {\r\n opacity: 1,\r\n },\r\n },\r\n\r\n '& .dragger-bar': {\r\n opacity: 0,\r\n width: 2,\r\n height: '100%',\r\n background: '#0078d4',\r\n marginRight: 'auto',\r\n marginLeft: 'auto',\r\n },\r\n },\r\n },\r\n\r\n '& .flex-row:first-child': {\r\n '& .flex-cell': {\r\n fontSize: 14,\r\n fontWeight: 600,\r\n borderBottom: '2px solid #81868B',\r\n borderTop: '2px solid #81868B',\r\n },\r\n },\r\n\r\n '& .other-group-container': {\r\n zIndex: 1,\r\n backgroundColor: '#fff',\r\n },\r\n\r\n '& .pop-column-header': {\r\n '& .iconba-Add, & .iconba-Remove': {\r\n fontWeight: 'bold',\r\n transform: 'scale(0.8)',\r\n },\r\n },\r\n\r\n '& .nested-column-container > .flex-cell': {\r\n flexGrow: 1,\r\n width: '100% !important',\r\n maxWidth: popChildCount * cellMaxWidth,\r\n '& .dragger': {\r\n visibility: 'hidden',\r\n },\r\n },\r\n\r\n '& .nested-column-container > .nested-column-placeholder': {\r\n flexGrow: 1,\r\n },\r\n\r\n // sort icon\r\n '& .column-header-sortable': {\r\n cursor: 'pointer',\r\n '& .glyphicon': {\r\n fontFamily: iconFontFamily,\r\n },\r\n '& .glyphicon-arrow-up:before': {\r\n content: '\"\\\\EE68\"',\r\n },\r\n '& .glyphicon-arrow-down:before': {\r\n content: '\"\\\\EE69\"',\r\n },\r\n },\r\n },\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { paginationStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { merge } from '@bingads-webui/primitive-utilities';\r\n\r\nexport const footerStyle = ({ palette = {} }) => ({\r\n '& .footer': {\r\n '& .noborder': {\r\n '& .flex-cell': {\r\n borderBottom: 'none',\r\n borderTop: 'none',\r\n borderRight: 'none',\r\n },\r\n },\r\n '& .pagination-row .flex-cell': {\r\n paddingLeft: 0,\r\n width: '100% !important',\r\n },\r\n\r\n ...merge(paginationStyle({ palette }), {\r\n '& .pagination-control': {\r\n fontSize: 14,\r\n '&.form-inline > .text': {\r\n display: 'inline-block',\r\n padding: 0,\r\n verticalAlign: 'middle',\r\n },\r\n '& .text': {\r\n display: 'inline-block',\r\n width: 'auto',\r\n verticalAlign: 'middle',\r\n },\r\n },\r\n }),\r\n },\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\n\r\nexport const rowStyle = ({ palette = {} }) => ({\r\n '& .flex-row': {\r\n '&.aggregated-row': {\r\n '& .dragger': {\r\n visibility: 'hidden !important',\r\n },\r\n },\r\n\r\n '& .grid-edit-icon:focus': {\r\n opacity: 1,\r\n },\r\n '&[data-key]:hover': {\r\n background: '#f4f4f4',\r\n '& .td': {\r\n borderRight: `1px solid ${palette.white}`,\r\n },\r\n },\r\n '&:hover': {\r\n '& .grid-edit-icon': {\r\n opacity: 1,\r\n },\r\n '& .flex-cell[data-column=Status] .iconba-ChevronDown': {\r\n opacity: 1,\r\n },\r\n },\r\n },\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\n\r\nexport const cellStyle = ({ palette = {} }) => ({\r\n '& .flex-cell': {\r\n fontSize: 12,\r\n width: 120,\r\n flexGrow: 0,\r\n wordWrap: 'break-word',\r\n wordBreak: 'break-word',\r\n\r\n '&.text-right': {\r\n justifyContent: 'flex-end',\r\n '& .grid-editable-cell-container': {\r\n justifyContent: 'flex-end',\r\n },\r\n },\r\n '&.text-left': {\r\n justifyContent: 'flex-start',\r\n },\r\n '&.text-center': {\r\n justifyContent: 'center',\r\n },\r\n\r\n // editable cell\r\n '& .grid-editable-cell-container': {\r\n display: 'flex',\r\n width: '100%',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n '& .grid-edit-icon': {\r\n opacity: 0,\r\n },\r\n },\r\n\r\n // make sure the grid header cover the icon\r\n '& .iconba, .helpbutton:before, .grid-edit-icon': {\r\n position: 'static',\r\n },\r\n },\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\n\r\nexport const groupStyle = ({ palette = {} }) => ({\r\n // The last column should expand to fill entire browser.\r\n '& .other-group-container': {\r\n overflow: 'hidden',\r\n '& .flex-cell:last-child': {\r\n flexGrow: 1,\r\n maxWidth: 10000,\r\n borderRight: 'none !important',\r\n },\r\n },\r\n\r\n '& .freezing-group-container': {\r\n flexGrow: 0,\r\n '& .freezing-group-container': {\r\n flexGrow: 0,\r\n },\r\n },\r\n\r\n '& div:not(:last-child).nested-column-container': {\r\n flexGrow: '0 !important',\r\n },\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\n\r\nexport const scrollbarStyle = ({ palette = {} }) => ({\r\n '& .footer .scrollbar': {\r\n '& .flex-cell': {\r\n padding: 0,\r\n },\r\n\r\n '& ::-webkit-scrollbar': {\r\n height: 12,\r\n width: 12,\r\n },\r\n '& ::-webkit-scrollbar-track': {\r\n background: '#f1f1f1',\r\n },\r\n '& ::-webkit-scrollbar-thumb': {\r\n background: '#c1c1c1',\r\n },\r\n '& ::-webkit-scrollbar-thumb:hover': {\r\n background: '#a8a8a8',\r\n },\r\n },\r\n});\r\n","/* eslint-disable @typescript-eslint/no-unused-vars */\r\n\r\nexport const overlapStyle = ({ palette = {} }) => ({\r\n '& .overlap-shadow': {\r\n borderLeft: '1px solid #EDEBE9',\r\n boxShadow: 'inset 7.2px 0px 7.2px -7.2px rgba(0, 0, 0, 0.132)',\r\n },\r\n});\r\n","import { columnStyle } from './column';\r\nimport { headerStyle } from './header';\r\nimport { footerStyle } from './footer';\r\nimport { rowStyle } from './row';\r\nimport { cellStyle } from './cell';\r\nimport { groupStyle } from './group';\r\nimport { scrollbarStyle } from './scrollbar';\r\nimport { overlapStyle } from './overlap';\r\n\r\nexport const gridFlexStyle = ({ palette = {} }) => ({\r\n '.bingadsgrid .flex-layout': {\r\n ...columnStyle({ palette }),\r\n ...headerStyle({ palette }),\r\n ...footerStyle({ palette }),\r\n ...rowStyle({ palette }),\r\n ...cellStyle({ palette }),\r\n ...groupStyle({ palette }),\r\n ...overlapStyle({ palette }),\r\n ...scrollbarStyle({ palette }),\r\n },\r\n});\r\n","import { ComponentSettings } from '@bingads-webui-theme-2018/theme-fluent';\r\n\r\nexport const {\r\n GridSharedStyles: {\r\n getSharedBodyStyles,\r\n getSharedColGroupStyles,\r\n getSharedColumnsStyles,\r\n getSharedFooterStyles,\r\n getSharedGlobalStyles,\r\n getSharedHeaderStyles,\r\n getSharedTableStyles,\r\n variables,\r\n },\r\n} = ComponentSettings;\r\n","import {\r\n adColumnPreviewStyle,\r\n locationCellStatusStyle,\r\n underlineLinkStyle,\r\n deliveryColumnStyle,\r\n labelsCellItemStyle,\r\n dateCellStyles,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nimport { getSharedColumnsStyles } from './shared';\r\n\r\nexport default (components, { palette, iconFontFamily = 'MsAds MDL2 Assets' }) => ({\r\n ...getSharedColumnsStyles(),\r\n ...dateCellStyles({ palette }),\r\n\r\n '&:first-child, &:nth-child(2), &:nth-child(3)': {\r\n borderLeft: 'none',\r\n },\r\n\r\n '&:first-child, &:nth-child(2), &:last-child': {\r\n borderRight: 'none',\r\n },\r\n\r\n // By default, the 3rd column is the primary column, use 14px.\r\n // If not, it will be overridden via getColumnSolidBorderStyle().\r\n // Unfortunately, side effect on aggregate(d)-row will need other\r\n // way to fix with usage of '12px!important'.\r\n '&:nth-child(3)': {\r\n fontSize: '14px',\r\n },\r\n\r\n '& .quality-score-tooltip ': {\r\n cursor: 'pointer',\r\n\r\n '& + .popover': {\r\n maxWidth: '350px',\r\n width: '350px',\r\n\r\n '& .qs-Poor': {\r\n color: '#A80000',\r\n },\r\n '& .qs-Good': {\r\n color: '#107C10',\r\n },\r\n '& .qs-Values': {\r\n '& td:first-child': {\r\n paddingLeft: 0,\r\n },\r\n },\r\n\r\n },\r\n },\r\n\r\n '&.grid-column-Status': {\r\n '& .grid-edit-icon': {\r\n display: 'none',\r\n },\r\n\r\n '& .iconba': {\r\n '&::before': {\r\n fontSize: '12px',\r\n lineHeight: '12px',\r\n },\r\n },\r\n\r\n '& .iconba-RadioBullet': {\r\n color: '#107C10',\r\n },\r\n\r\n '& .iconba-PauseListView12': {\r\n color: '#323130',\r\n },\r\n '& .statusDraft_icon': {\r\n verticalAlign: 'text-bottom',\r\n },\r\n '& .statusEnabled_icon': {\r\n verticalAlign: 'text-bottom',\r\n },\r\n '& .statusPaused_icon': {\r\n verticalAlign: 'text-bottom',\r\n },\r\n '& .experiment-paused-icon': {\r\n verticalAlign: 'text-bottom',\r\n },\r\n '& .experiment-active-icon': {\r\n verticalAlign: 'text-bottom',\r\n },\r\n '& .statuschangehover:before': {\r\n fontSize: '11px',\r\n fontStyle: 'normal',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontWeight: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n float: 'right',\r\n content: '\"\\\\E70D\"',\r\n color: palette.themeDark,\r\n marginLeft: '5px',\r\n },\r\n },\r\n\r\n\r\n // eslint-disable-next-line no-multi-str\r\n '&.grid-column-AdGroup, \\\r\n &.grid-column-Campaign, \\\r\n &.audiences-column-Campaign, \\\r\n &.col-AdGroupName, \\\r\n &.col-CampaignName': {\r\n '& a': {\r\n lineHeight: '16px',\r\n },\r\n ...underlineLinkStyle({ palette, elementLocator: 'a.experiment-name' }),\r\n },\r\n\r\n '&.grid-column-Bid, &.grid-column-CpmBid, &.grid-column-CpvBid, &.grid-column-SearchBid': {\r\n '& .bidlandscape-column': {\r\n display: 'inline-block',\r\n verticalAlign: 'middle',\r\n },\r\n '& .grid-edit-icon': {\r\n verticalAlign: 'middle',\r\n },\r\n '& .iconba-Financial:hover': {\r\n cursor: 'pointer',\r\n },\r\n },\r\n\r\n // eslint-disable-next-line no-multi-str\r\n '&.grid-column-Bid, \\\r\n &.grid-column-CpmBid, \\\r\n &.grid-column-CpvBid, \\\r\n &.grid-column-SearchBid, \\\r\n &.grid-column-Budget, \\\r\n &.grid-column-BidStrategyType, \\\r\n &.grid-column-Delivery, \\\r\n &.grid-column-biddingStrategyTargetCpa, \\\r\n &.grid-column-biddingStrategyTargetRoas': {\r\n '& .iconba-Financial': {\r\n color: palette.themePrimary,\r\n },\r\n '& .iconba-Financial.disabled': {\r\n color: palette.neutralTertiary,\r\n },\r\n },\r\n\r\n '& .labels-cell-container': {\r\n ...labelsCellItemStyle(),\r\n },\r\n\r\n // eslint-disable-next-line no-multi-str\r\n '&.grid-column-Campaign, \\\r\n &.grid-column-AdGroup, \\\r\n &.grid-column-Name, \\\r\n &.grid-column-TrackingTemplate, \\\r\n &.grid-column-CustomParameters, \\\r\n &.grid-column-UrlCustomParameters, \\\r\n &.grid-column-FinalUrlSuffix, \\\r\n &.col-CampaignName, \\\r\n &.grid-column-Keyword, \\\r\n &.grid-column-SearchTerm, \\\r\n &.grid-column-Param1, \\\r\n &.grid-column-Param2, \\\r\n &.grid-column-Param3, \\\r\n &.grid-column-NegativeKeyword, \\\r\n &.grid-column-LandingPage, \\\r\n &.grid-column-Budget, \\\r\n &.grid-column-FinalUrlSuffix, \\\r\n &.cell-changes, \\\r\n &.col-AdGroupName, \\\r\n &.col-AdExtension, \\\r\n &.col-AdExtensionId, \\\r\n &.grid-column-Description, \\\r\n &.grid-column-Entity, \\\r\n &.grid-column-ChangeTo, \\\r\n &.grid-column-OldValue, \\\r\n &.grid-column-NewName, \\\r\n &.automated-rules__rule-name, \\\r\n &.grid-column-FeedName, \\\r\n &.dsa-target-col, \\\r\n &.grid-column-Asset, \\\r\n &.grid-column-AssetType, \\\r\n &.grid-column-PinnedField, \\\r\n &.grid-column-When, \\\r\n &.grid-column-BidStrategyName, \\\r\n &.grid-column-PerformanceTargetName': {\r\n wordWrap: 'break-word',\r\n wordBreak: 'break-word',\r\n\r\n // fix ie flex item wordWrap issue in ui-next\r\n '& .grid-editable-cell-container': {\r\n // eslint-disable-next-line no-multi-str\r\n '& > .scope-navigator, \\\r\n & > .grid-cell-text, \\\r\n & > .final-url, \\\r\n & > .campaign-column-name': {\r\n display: 'inline',\r\n width: '90%',\r\n },\r\n },\r\n },\r\n\r\n '&.grid-column-CustomParameters': {\r\n '& .parameters': {\r\n display: 'inline-block',\r\n width: '90%', // without setting boundary, break-word will not work on IE\r\n },\r\n },\r\n\r\n '&.text-left .grid-editable-cell-container': {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n alignItems: 'center',\r\n },\r\n\r\n '&.text-right .grid-editable-cell-container': {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n },\r\n\r\n '.status-image': {\r\n clear: 'none',\r\n float: 'right',\r\n },\r\n\r\n '&.grid-column-Delivery': {\r\n ...deliveryColumnStyle(),\r\n },\r\n\r\n '&.grid-column-AssetStatus': {\r\n '& .statusicondisplay': {\r\n cursor: 'default',\r\n },\r\n },\r\n\r\n '&.grid-column-AdPreview': {\r\n ...adColumnPreviewStyle(),\r\n },\r\n\r\n '&.grid-column-Location': {\r\n ...locationCellStatusStyle({ iconFontFamily }),\r\n },\r\n '&[data-column=\"ConversionsCredit\"]': {\r\n '& .status-warning': {\r\n color: '#D83B01',\r\n borderBottom: '1px dashed #0078D4',\r\n cursor: 'pointer',\r\n },\r\n },\r\n});\r\n","import { getSharedBodyStyles } from './shared';\r\nimport getColumnsStyles from './columns';\r\n\r\nexport default (components, { palette }) => ({\r\n ...getSharedBodyStyles(components, { palette }),\r\n\r\n // not directly use '& tr' as key here, since it might override the shared style\r\n // CCUI doesn't have the leading Status column, so this part is not migrated\r\n '& tr.aggregated-row:hover td': {\r\n '&:first-child, &:nth-child(2), &:last-child': {\r\n borderRight: 'none',\r\n },\r\n },\r\n '& tr:hover, & tr.row-selected, & tr.row-selected:hover': {\r\n '& td': {\r\n '&:first-child, &:nth-child(2), &:last-child': {\r\n borderRight: 'none',\r\n },\r\n },\r\n },\r\n '& tr.row-selected td.grid-column-Delivery': {\r\n '& .status-warning, & .iconba-Warning': {\r\n color: '#8E562E',\r\n },\r\n },\r\n '& tr td': getColumnsStyles(components, { palette }),\r\n '& tr.row-selected td': {\r\n '&.grid-column-Campaign, &.col-CampaignName': {\r\n '& a.experiment-name': {\r\n color: palette.themeDarker,\r\n },\r\n },\r\n },\r\n});\r\n","import { campaignGridBudgetCenterEntryStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport {\r\n getSharedHeaderStyles,\r\n getSharedFooterStyles,\r\n getSharedTableStyles,\r\n} from './shared';\r\nimport getBodyStyles from './body';\r\n\r\nexport default (components, { palette }) => ({\r\n '& thead.header': {\r\n ...getSharedHeaderStyles(components, { palette }),\r\n '& tr th': {\r\n '&:first-child, &:nth-child(2), &:nth-child(3)': {\r\n borderLeft: 'none',\r\n },\r\n\r\n '&:first-child, &:nth-child(2), &:last-child': {\r\n borderRight: 'none',\r\n },\r\n },\r\n },\r\n '& tbody': getBodyStyles(components, { palette }),\r\n '& tfoot.footer': getSharedFooterStyles(components, { palette }),\r\n ...getSharedTableStyles(components, { palette }),\r\n '& .aggregated-row span.combinedBudgetGridCellValue': {\r\n paddingRight: '24px',\r\n },\r\n ...campaignGridBudgetCenterEntryStyle({ palette }),\r\n});\r\n","import { deliveryStatusStyle, uurlTestToolStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { Constants } from '@bingads-webui-theme-2018/theme-fluent';\r\nimport { getSharedGlobalStyles } from './shared';\r\n\r\nconst budgetLandscapeTable = {\r\n '& .budget-landscape-container': {\r\n marginRight: '32px',\r\n\r\n '& .landscape-table': {\r\n '& .tip-message, & .error-message': {\r\n '& span.iconba-Warning': {\r\n marginRight: '5px',\r\n color: '#D83B01',\r\n },\r\n marginBottom: '16px',\r\n marginTop: '16px',\r\n marginLeft: '8px',\r\n },\r\n '& table': {\r\n width: '100%',\r\n '& input': {\r\n marginRight: '8px',\r\n },\r\n '& input[type=\\'radio\\']': {\r\n position: 'relative',\r\n marginLeft: '4px',\r\n },\r\n '& th, & td': {\r\n '&.selected': {\r\n background: 'rgba(237, 237, 237, 0.5)',\r\n },\r\n },\r\n\r\n '& td.user-input-cell': {\r\n paddingLeft: '1px',\r\n },\r\n\r\n '& tr': {\r\n height: '32px',\r\n },\r\n\r\n '& th': {\r\n '&.selected': {\r\n color: '#333',\r\n fontWeight: '500',\r\n },\r\n },\r\n '& td:last-child': {\r\n paddingRight: '5px',\r\n },\r\n '& .user-input': {\r\n display: 'inline',\r\n position: 'relative',\r\n '& .currency-symbol': {\r\n position: 'absolute',\r\n top: '-1px',\r\n left: '6px',\r\n color: '#666666',\r\n },\r\n\r\n '& input': {\r\n paddingLeft: '16px',\r\n borderWidth: '1px',\r\n borderColor: '#BBB',\r\n },\r\n\r\n '& .symbol-size-2 + input': {\r\n paddingLeft: '25px',\r\n },\r\n\r\n '& .symbol-size-3 + input': {\r\n paddingLeft: '35px',\r\n },\r\n\r\n '& .error': {\r\n color: '#A80000 !important',\r\n fontSize: 'inherit',\r\n },\r\n },\r\n '& tbody': {\r\n '& tr.selected': {\r\n backgroundColor: '#F3F2F1',\r\n },\r\n },\r\n '& thead': {\r\n '& span': {\r\n fontWeight: '500',\r\n marginLeft: '10px',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst budGetEditTitle = {\r\n '& .title-container': {\r\n marginBottom: '16px',\r\n marginRight: '32px',\r\n position: 'relative',\r\n '& .title': {\r\n fontSize: '20px',\r\n fontWeight: '500',\r\n overflowWrap: 'break-word',\r\n },\r\n '& .iconba-Cancel': {\r\n position: 'absolute',\r\n top: '0px',\r\n right: '-32px',\r\n },\r\n },\r\n};\r\n\r\nexport default (components, { palette }) => ({\r\n '.grid-popupeditor .campaigns-date-picker': {\r\n marginBottom: 16,\r\n position: 'relative',\r\n\r\n '& label': {\r\n position: 'relative',\r\n top: '-5px',\r\n },\r\n\r\n '& input': {\r\n marginRight: '7.5px',\r\n },\r\n\r\n '& > div': {\r\n width: '8em',\r\n },\r\n },\r\n '.grid-popupeditor.final-url-suffix-inline-edit-popup': {\r\n width: 310,\r\n },\r\n '.grid-popupeditor .custom-content': {\r\n marginBottom: 16,\r\n },\r\n '.grid-popupeditor .custom-params-template': {\r\n marginBottom: 16,\r\n width: 456,\r\n '& .flex-row-fixed, & .flex-row-dynamic': {\r\n display: 'inline-block',\r\n\r\n '& .custom-param__key-field': {\r\n display: 'inline-block',\r\n width: '150px',\r\n },\r\n\r\n '& label.control-label': {\r\n margin: '0 5px',\r\n },\r\n },\r\n '& .custom-param-entry': {\r\n display: 'block',\r\n marginBottom: 10,\r\n '& .iconba-Cancel': {\r\n fontSize: '16px',\r\n marginLeft: 5,\r\n cursor: 'pointer',\r\n },\r\n },\r\n },\r\n '.grid-popupeditor.tracking-template-inline-edit-popup': {\r\n width: 450,\r\n '& .charactersRemaining': {\r\n marginTop: 5,\r\n marginBottom: 5,\r\n },\r\n '& .font-error': {\r\n marginTop: 5,\r\n marginBottom: 5,\r\n },\r\n ...uurlTestToolStyle({ palette }),\r\n '& .full-width, & input[type=\"text\"].full-width': {\r\n width: '100%',\r\n },\r\n '& input.with-test-button': {\r\n width: '80%',\r\n display: 'inline-block',\r\n },\r\n '& input.testUurl.btn.btn-default': {\r\n height: 27,\r\n },\r\n '& .uurl-test-tool__container': {\r\n verticalAlign: 'middle',\r\n float: 'right',\r\n },\r\n '& .uurl-test-info__container': {\r\n lineHeight: '15px',\r\n marginTop: -5,\r\n marginBottom: 10,\r\n },\r\n '& .tracking-template__container input.testUurl, & .tracking-template-inline-edit-popup input.testUurl': {\r\n float: 'right',\r\n height: 21,\r\n lineHeight: '14px',\r\n },\r\n '& .popup--uurl-detail': {\r\n maxHeight: '350px !important',\r\n },\r\n },\r\n '.grid-popupeditor > .bid-adjustment-view': {\r\n '& .input[role=\"listbox\"]': {\r\n marginRight: 10,\r\n },\r\n '& .bid-adjustment-input-group': {\r\n display: 'inline-table',\r\n verticalAlign: 'middle',\r\n '& .form-control, .input-group-addon, .input-group-btn': {\r\n width: 'auto',\r\n },\r\n '& > .form-control': {\r\n width: '100%',\r\n },\r\n },\r\n '& .input-group-addon': {\r\n background: 'transparent',\r\n border: 'none',\r\n },\r\n '& .bid-adjustment-margin-bottom': {\r\n marginBottom: '15px',\r\n },\r\n '& .form-horizontal': {\r\n '& .form-group': {\r\n marginBottom: 0,\r\n },\r\n '& .form-group ~ .form-group': {\r\n marginTop: 0,\r\n },\r\n '& .form-validation-container': {\r\n transform: 'translateY(-10px)',\r\n },\r\n '& .performance_clicks, .performance_conversions, .performance_impressions': {\r\n color: palette.themePrimary,\r\n fontWeight: 'bold',\r\n },\r\n '& .bid-adjustment-manual-content': {\r\n marginTop: '5px',\r\n '& select.form-control': {\r\n width: '160px',\r\n marginRight: '9px',\r\n display: 'inline-block',\r\n verticalAlign: 'middle',\r\n },\r\n '& .bid-adjustment-input-group input.form-control': {\r\n width: '75px',\r\n display: 'inline-block',\r\n },\r\n },\r\n '& .bid-adjustment-options': {\r\n '& .radio': {\r\n paddingTop: 0,\r\n },\r\n '& input[type=radio] ~ div': {\r\n marginLeft: '8px',\r\n },\r\n '& .bid-adjustment-margin-bottom': {\r\n marginBottom: '15px',\r\n },\r\n },\r\n },\r\n },\r\n '.font-error': {\r\n '& > ul': {\r\n listStyle: 'none',\r\n paddingLeft: 0,\r\n margin: 0,\r\n '& > li': {\r\n margin: '5px 0px 0px 0px',\r\n },\r\n '& > li:empty': {\r\n margin: 0,\r\n },\r\n },\r\n },\r\n '.grid-popupeditor .inline-budget-editor': {\r\n '& .alert': {\r\n padding: '8px 32px 8px 8px',\r\n '& .alert-image': {\r\n float: 'left',\r\n },\r\n '& .alert-info-inline': {\r\n color: 'black',\r\n },\r\n '& .bold': {\r\n fontWeight: 1000,\r\n },\r\n '& .alert-budget-button': {\r\n marginLeft: '10px',\r\n paddingTop: '5px',\r\n '& button': {\r\n color: 'black',\r\n fontSize: '13px',\r\n fontWeight: 500,\r\n borderColor: palette.neutralLight,\r\n },\r\n },\r\n },\r\n ' & .error': {\r\n fontSize: '14px',\r\n },\r\n\r\n '& > ul': {\r\n listStyle: 'none',\r\n },\r\n '& .display-inline': {\r\n display: 'block',\r\n marginBottom: '16px',\r\n\r\n '& .inline-budget-edit-value': {\r\n display: 'inline-block',\r\n verticalAlign: 'top',\r\n marginRight: '10px',\r\n width: 'auto',\r\n },\r\n\r\n '& .inline-budget-edit-type': {\r\n display: 'inline-block',\r\n width: 'auto',\r\n },\r\n },\r\n\r\n ...budGetEditTitle,\r\n ...budgetLandscapeTable,\r\n\r\n '& .inline-budget-editor-actions': {\r\n marginTop: '16px',\r\n marginRight: '32px',\r\n },\r\n\r\n '& .input-budget-container': {\r\n marginTop: '15px',\r\n marginRight: '32px',\r\n '& .budgetText': {\r\n marginRight: '10px',\r\n },\r\n\r\n '& .input-box': {\r\n position: 'relative',\r\n '& .currency-symbol': {\r\n position: 'absolute',\r\n top: '6px',\r\n left: '5px',\r\n color: '#666666',\r\n },\r\n\r\n '& .symbol-size-2 + input': {\r\n paddingLeft: '25px',\r\n },\r\n\r\n '& .symbol-size-3 + input': {\r\n paddingLeft: '35px',\r\n },\r\n\r\n '& input': {\r\n marginTop: '5px',\r\n paddingLeft: '14px',\r\n },\r\n },\r\n\r\n '& .error': {\r\n color: '#A80000 !important',\r\n fontSize: 'inherit',\r\n },\r\n },\r\n\r\n '& .select-budget-container': {\r\n paddingTop: '16px',\r\n marginBottom: '5px',\r\n marginRight: '32px',\r\n '& .inline-budget-edit-type': {\r\n marginTop: '5px',\r\n },\r\n },\r\n\r\n '& .select-budget-container-with-landscape': {\r\n paddingTop: '16px',\r\n marginBottom: '5px',\r\n marginRight: '32px',\r\n borderTop: '1px solid #CCCCCC',\r\n marginTop: '10px',\r\n '& .inline-budget-edit-type': {\r\n marginTop: '5px',\r\n },\r\n },\r\n\r\n '& .alert-container': {\r\n marginTop: '0px',\r\n marginBottom: '5px',\r\n marginRight: '32px',\r\n },\r\n },\r\n\r\n '.shared-budget-inline-editor': {\r\n ...budGetEditTitle,\r\n ...budgetLandscapeTable,\r\n\r\n maxWidth: '500px',\r\n '& .shared-budget-popup-edit-budget': {\r\n '& .shared-budget-edit-budget-input': {\r\n display: 'block',\r\n float: 'left',\r\n width: '200px',\r\n marginBottom: '16px',\r\n marginRight: '16px',\r\n },\r\n\r\n '& .shared-budget-edit-budget-message-per-day': {\r\n display: 'block',\r\n float: 'left',\r\n },\r\n\r\n '& .shared-budget-edit-budget-save': {\r\n display: 'block',\r\n float: 'left',\r\n clear: 'left',\r\n },\r\n '& .shared-budget-edit-budget-cancel': {\r\n display: 'block',\r\n float: 'left',\r\n },\r\n '& ul': {\r\n clear: 'both',\r\n },\r\n },\r\n },\r\n '.target-cpa-inline-editor': {\r\n maxWidth: '500px',\r\n '& .title-container': {\r\n marginBottom: '16px',\r\n marginRight: '32px',\r\n position: 'relative',\r\n '& .title': {\r\n fontSize: '16px',\r\n fontWeight: '600',\r\n overflowWrap: 'break-word',\r\n },\r\n '& .iconba-Cancel': {\r\n position: 'absolute',\r\n top: '0px',\r\n right: '-32px',\r\n },\r\n },\r\n '& .input-box': {\r\n position: 'relative',\r\n paddingRight: '32px',\r\n '& .currency-symbol': {\r\n position: 'absolute',\r\n top: '11px',\r\n left: '5px',\r\n color: '#666666',\r\n },\r\n '& .symbol-size-2 + input': {\r\n paddingLeft: '25px',\r\n },\r\n '& .symbol-size-3 + input': {\r\n paddingLeft: '35px',\r\n },\r\n '& input': {\r\n marginTop: '5px',\r\n paddingLeft: '14px',\r\n },\r\n },\r\n '& .input-message': {\r\n marginTop: '8px',\r\n fontWeight: '600',\r\n fontSize: '13px',\r\n },\r\n '& .alert-info': {\r\n marginTop: '8px',\r\n backgroundColor: '#eff6fc',\r\n borderColor: '#eff6fc',\r\n color: '#323130',\r\n display: 'flex',\r\n\r\n '& .alert-image:before': {\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontSize: '16px',\r\n lineHeight: '10px',\r\n color: '#605e5c',\r\n marginRight: '8px',\r\n marginTop: '8px',\r\n content: '\\'\\\\E946\\'',\r\n },\r\n '& .alert-info-inline': {\r\n fontSize: '12px',\r\n },\r\n },\r\n },\r\n '.target-impression-share-inline-editor': {\r\n maxWidth: '300px',\r\n '& .title-container': {\r\n marginBottom: '16px',\r\n marginRight: '32px',\r\n position: 'relative',\r\n '& .title': {\r\n fontSize: '16px',\r\n fontWeight: '600',\r\n overflowWrap: 'break-word',\r\n },\r\n '& .iconba-Cancel': {\r\n position: 'absolute',\r\n top: '0px',\r\n right: '-32px',\r\n },\r\n },\r\n '& .input-box': {\r\n position: 'relative',\r\n '& input': {\r\n marginTop: '5px',\r\n marginRight: '4px',\r\n },\r\n '& .percent-symbol': {\r\n position: 'absolute',\r\n color: '#666666',\r\n top: '11px',\r\n },\r\n },\r\n '& .alert-info': {\r\n marginTop: '8px',\r\n backgroundColor: '#eff6fc',\r\n borderColor: '#eff6fc',\r\n color: '#323130',\r\n display: 'flex',\r\n\r\n '& .alert-image:before': {\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontSize: '16px',\r\n lineHeight: '10px',\r\n color: '#605e5c',\r\n marginRight: '8px',\r\n marginTop: '8px',\r\n content: '\\'\\\\E946\\'',\r\n },\r\n '& .alert-info-inline': {\r\n fontSize: '12px',\r\n },\r\n },\r\n '& .input-message': {\r\n marginTop: '8px',\r\n fontWeight: '600',\r\n fontSize: '13px',\r\n },\r\n '& .ad-position': {\r\n marginTop: '16px',\r\n '& .description': {\r\n marginTop: '5px',\r\n marginRight: '4px',\r\n },\r\n '& label': {\r\n fontWeight: '200',\r\n },\r\n },\r\n },\r\n '.target-roas-inline-editor': {\r\n maxWidth: '300px',\r\n '& .title-container': {\r\n marginBottom: '16px',\r\n marginRight: '32px',\r\n position: 'relative',\r\n '& .title': {\r\n fontSize: '16px',\r\n fontWeight: '600',\r\n overflowWrap: 'break-word',\r\n },\r\n '& .iconba-Cancel': {\r\n position: 'absolute',\r\n top: '0px',\r\n right: '-32px',\r\n },\r\n },\r\n '& .input-box': {\r\n position: 'relative',\r\n '& input': {\r\n marginTop: '5px',\r\n marginRight: '4px',\r\n },\r\n '& .percent-symbol': {\r\n position: 'absolute',\r\n color: '#666666',\r\n top: '11px',\r\n },\r\n },\r\n '& .alert-info': {\r\n marginTop: '8px',\r\n backgroundColor: '#eff6fc',\r\n borderColor: '#eff6fc',\r\n color: '#323130',\r\n display: 'flex',\r\n\r\n '& .alert-image:before': {\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontSize: '16px',\r\n lineHeight: '10px',\r\n color: '#605e5c',\r\n marginRight: '8px',\r\n marginTop: '8px',\r\n content: '\\'\\\\E946\\'',\r\n },\r\n '& .alert-info-inline': {\r\n fontSize: '12px',\r\n },\r\n },\r\n '& .input-message': {\r\n marginTop: '8px',\r\n fontWeight: '600',\r\n fontSize: '13px',\r\n },\r\n },\r\n 'td.grid-column-Campaign, td.grid-column-AdGroup, td.grid-column-AdPreview, td.grid-column-Keyword, td.grid-column-Location': {\r\n '& .helpbutton::before': {\r\n position: 'static',\r\n },\r\n },\r\n '.status-popupeditor': {\r\n position: 'absolute',\r\n zIndex: '10',\r\n backgroundColor: '#FFFFFF',\r\n boxShadow: '0px 0px 6px rgba(0, 0, 0, 0.2)',\r\n minHeight: 50,\r\n padding: '4px 0',\r\n margin: '0 18px',\r\n '& .statusEnabled_icon': {\r\n verticalAlign: 'text-top',\r\n },\r\n '& .statusPaused_icon': {\r\n verticalAlign: 'text-top',\r\n },\r\n '& .statusExcluded_icon': {\r\n verticalAlign: 'text-top',\r\n },\r\n '& .experiment-active-icon': {\r\n verticalAlign: 'text-top',\r\n },\r\n '& .experiment-paused-icon': {\r\n verticalAlign: 'text-top',\r\n },\r\n '& .experiment-excluded-icon': {\r\n verticalAlign: 'text-top',\r\n },\r\n '& ul.grid': {\r\n listStyle: 'none',\r\n marginBottom: 0,\r\n paddingLeft: 0,\r\n '& .statuschange-icon': {\r\n marginRight: '5px',\r\n },\r\n '& li.statuschangesubtask': {\r\n cursor: 'pointer',\r\n '&:hover': {\r\n backgroundColor: palette.neutralLight,\r\n },\r\n '& span.statuschangelink': {\r\n padding: '5px 15px',\r\n display: 'block',\r\n },\r\n },\r\n },\r\n },\r\n '.table-container .grid-editable-cell': {\r\n cursor: 'pointer',\r\n },\r\n // eslint-disable-next-line no-multi-str\r\n '.table-container .bidlandscape-column.grid-readonly-cell, \\\r\n .table-container .aggregated-row th[data-column=\"SearchBid\"] .bidlandscape-column, \\\r\n .table-container .aggregated-row td[data-column=\"SearchBid\"] .bidlandscape-column, \\\r\n .table-container .aggregated-row th[data-column=\"CpmBid\"] .bidlandscape-column, \\\r\n .table-container .aggregated-row td[data-column=\"CpmBid\"] .bidlandscape-column, \\\r\n .table-container .aggregated-row th[data-column=\"CpvBid\"] .bidlandscape-column, \\\r\n .table-container .aggregated-row td[data-column=\"CpvBid\"] .bidlandscape-column': {\r\n '& .bidlandscape-bid-value': {\r\n marginRight: 25,\r\n },\r\n },\r\n '.table-container .segment-row .segment-value': {\r\n marginLeft: 14,\r\n },\r\n '.table-container .statusicondisplay': {\r\n '& .statusDraft_icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .statusDraft_icon::before': {\r\n content: '\"\\\\F6B0\"',\r\n color: palette.neutralPrimary,\r\n },\r\n },\r\n '.table-container, .status-popupeditor': {\r\n '& .statusEnabled_icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .statusEnabled_icon::before': {\r\n content: '\"\\\\ECCC\"',\r\n color: '#107C10',\r\n },\r\n '& .statusPaused_icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .statusPaused_icon::before': {\r\n content: '\"\\\\F6B0\"',\r\n color: palette.neutralPrimary,\r\n },\r\n '& .statusExcluded_icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .statusExcluded_icon::before': {\r\n content: '\"\\\\E733\"',\r\n color: '#A80000',\r\n },\r\n '& .statusDeleted_icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .statusDeleted_icon::before': {\r\n content: '\"\\\\E738\"',\r\n color: '#FF0000',\r\n },\r\n '& .experiment-active-icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .experiment-active-icon::before': {\r\n content: '\"\\\\F3A6\"',\r\n color: '#107C10',\r\n },\r\n '& .experiment-paused-icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .experiment-paused-icon::before': {\r\n content: '\"\\\\F3A5\"',\r\n color: palette.neutralPrimary,\r\n },\r\n '& .experiment-excluded-icon': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .experiment-excluded-icon::before': {\r\n content: '\"\\\\F880\"',\r\n color: '#A80000',\r\n },\r\n '& .statushypendisplay': {\r\n display: 'inline-block',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontSize: 12,\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n },\r\n '& .statushypendisplay::before': {\r\n content: '\"\\\\E738\"',\r\n color: palette.neutralPrimary,\r\n },\r\n },\r\n '.table-container .glyphicon.glyphicon-pencil': {\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n fontStyle: 'normal',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n fontWeight: 'normal',\r\n fontSize: 14,\r\n lineHeight: '14px',\r\n marginLeft: '8px',\r\n },\r\n '.table-container .glyphicon.glyphicon-pencil::before': {\r\n content: '\"\\\\E70F\"',\r\n color: palette.themeDark,\r\n },\r\n '.table-container .layout-marked-element.status-row .delivery_status_with_reject_reasons': {\r\n position: 'relative',\r\n },\r\n '.table-container .status_icon:before': {\r\n content: '\"\\\\E712\"',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n display: 'inline-block',\r\n fontWeight: 'normal',\r\n fontStyle: 'normal',\r\n textDecoration: 'inherit',\r\n speak: 'none',\r\n fontVariant: 'normal',\r\n textTransform: 'none',\r\n verticalAlign: 'top',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n },\r\n '.table-container .status_icon_hover:before': {\r\n content: '\"\\\\E712\"',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n display: 'inline-block',\r\n fontWeight: 'normal',\r\n fontStyle: 'normal',\r\n textDecoration: 'inherit',\r\n speak: 'none',\r\n fontVariant: 'normal',\r\n textTransform: 'none',\r\n verticalAlign: 'top',\r\n '-webkit-font-smoothing': 'antialiased',\r\n '-moz-osx-font-smoothing': 'grayscale',\r\n },\r\n '.table-container .quality-score-detail': {\r\n float: 'right',\r\n },\r\n '#rejectionContainer > div': {\r\n zIndex: '300',\r\n },\r\n '#popover-country': {\r\n '& .popover-content': {\r\n padding: '8px 8px 8px 8px',\r\n textAlign: 'center',\r\n },\r\n },\r\n '#popover-policy': {\r\n '& .popover-content': {\r\n padding: '8px 8px 8px 8px',\r\n textAlign: 'center',\r\n },\r\n },\r\n '#popover-policy-descripts': {\r\n '& .popover-content': {\r\n padding: '8px 8px 8px 8px',\r\n textAlign: 'center',\r\n },\r\n },\r\n '.table-container .mark-container': {\r\n width: 14,\r\n },\r\n '.table-container .status-row': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n '& .decorated-element': {\r\n marginLeft: 8,\r\n marginRight: 8,\r\n },\r\n },\r\n '.grid-edit-icon.glyphicon-pencil': {\r\n verticalAlign: 'middle',\r\n },\r\n\r\n // language inline edit popup and bulk edit panel\r\n '.grid-popupeditor div.multi-language-selector': {\r\n width: '700px',\r\n },\r\n\r\n '.multi-language-selector': {\r\n overflow: 'hidden', // child are float element, create bfc to make the container height correct\r\n\r\n '& label.checkbox-inline': {\r\n marginLeft: '0px',\r\n paddingLeft: '22px',\r\n\r\n '& > div': {\r\n display: 'inline-block',\r\n },\r\n },\r\n },\r\n\r\n ...deliveryStatusStyle({ palette }),\r\n ...getSharedGlobalStyles(components, { palette }),\r\n '.k-window-content.k-content': {\r\n outline: 'none',\r\n },\r\n\r\n '[data-property=\"Bid/Amount\"], [data-property=\"MatchType\"], [data-property=\"Param1\"], [data-property=\"Param2\"], [data-property=\"Param3\"]': {\r\n '& .form-control': {\r\n width: '328px',\r\n },\r\n },\r\n '[aria-labelledby=\"dropdown-column-chooser\"] [role=\"menuitem\"]': {\r\n textOverflow: 'ellipsis',\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n maxWidth: '180px',\r\n },\r\n 'table.sticky-header': {\r\n zIndex: Constants.ZIndexContentComponents.GridHeader,\r\n },\r\n});\r\n","import { variables } from './shared';\r\n\r\nexport const {\r\n headerRowBackgroundColor,\r\n headerRowBorderTop,\r\n headerRowBorderBottom,\r\n totalRowBackgroundColor,\r\n totalRowBorderTop,\r\n tableBorder,\r\n gridPaddingLeft,\r\n gridPaddingComponsation,\r\n} = variables;\r\n","import React, { useState, memo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { constant, each, mapObject, omit } from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { BackboneInstanceWrapper } from '@bingads-webui-react/backbone-instance-wrapper';\r\n\r\nimport { getStyles } from './styles/index';\r\n\r\nexport const GridViewWrapper = ({\r\n gridView: gridViewFromProps,\r\n gridEventHandlers: gridEventHandlersFromProps,\r\n removeGridOnUmount,\r\n getReferenceToGridView,\r\n classes,\r\n children,\r\n gridClassName,\r\n}) => {\r\n // Store the backbone grid and handler instances and ignore all subsequent updates.\r\n const [gridView] = useState(gridViewFromProps);\r\n const [gridEventHandlers] = useState(gridEventHandlersFromProps);\r\n\r\n if (getReferenceToGridView) {\r\n getReferenceToGridView(gridView);\r\n }\r\n\r\n useEffect(() => () => {\r\n if (removeGridOnUmount && gridView.remove) {\r\n gridView.remove();\r\n }\r\n }, [removeGridOnUmount, gridView]);\r\n\r\n each(gridEventHandlers.once, (handler, event) => {\r\n gridView.once(event, handler);\r\n });\r\n\r\n each(gridEventHandlers.on, (handler, event) => {\r\n gridView.on(event, handler);\r\n });\r\n\r\n return (\r\n (a: T, b: T, msg?: string, msg2?: string): void {\r\n if (a !== b) {\r\n // eslint-disable-next-line no-nested-ternary\r\n const message = msg ? msg2 ? `${msg} ${msg2}` : msg : \"\";\r\n fail(`Expected ${a} === ${b}. ${message}`);\r\n }\r\n}\r\n\r\nexport function assertLessThan(a: number, b: number, msg?: string): void {\r\n if (a >= b) {\r\n fail(`Expected ${a} < ${b}. ${msg || \"\"}`);\r\n }\r\n}\r\n\r\nexport function assertLessThanOrEqual(a: number, b: number): void {\r\n if (a > b) {\r\n fail(`Expected ${a} <= ${b}`);\r\n }\r\n}\r\n\r\nexport function assertGreaterThanOrEqual(a: number, b: number): void {\r\n if (a < b) {\r\n fail(`Expected ${a} >= ${b}`);\r\n }\r\n}\r\n\r\nexport function assertIsDefined(value: T, message?: string): asserts value is NonNullable {\r\n if (value === undefined || value === null) {\r\n fail(message);\r\n }\r\n}\r\n\r\nexport function assertNever(member: never, message = \"Assert never:\"): never {\r\n const detail = JSON.stringify(member);\r\n return failInDebug(`${message} ${detail}`);\r\n}\r\n"],"names":["getExperimentBudgetAlert","_ref","i18n","jsdata","appState","legacyRouter","_DeterministicView","ExperimentBudgetAlert","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","_ref2","_this","experimentId","campaignId","this","setState","isLoading","Experiment","find","bypassCache","cacheResponse","then","response","baseCampaign","Id","BaseCampaignId","Name","BaseCampaignName","get","template","_this2","navigateToRoute","campaign_id","getState","DeterministicView","initialized","OneDay","date","Date","targetTimeZone","convert","numOfDay","setDate","getDate","setHours","formatDate","timeZone","raw","getTimezoneOffset","ianaTimeZone","timeZoneConverter","offsetString","offsetFactor","Number","substr","sourceTimeZone","totalOffset","getOffset","getTime","parseDate","datetime","replace","utils","oneDay","reformatDate","getString","getDateUtils","deps","STEP_PATHS","FLOWS","AD_TYPES_TO_FLOWS","_defineProperty","AdTypes","Display","Video","Native","AudienceVideo","Netflix","WIZARD_TYPES","WIZARD_TYPE_TO_FLOW","FLOWS_TO_FIRST_STEP","isAudienceCampaign","flow","isAudienceCampaignEdit","isCTVCampaignEdit","isDealCampaignEdit","isAudienceAdGroupEdit","isDealAdGroupEdit","isCTVAdGroupEdit","isAudienceAdGroupCreation","isAudienceAdGroupMultiAdCreation","isAudience","isAdGroupCreation","isEdit","isDisplayAdsCampaign","isVideoAdsCampaign","isCTVCampaign","isCTVAdGroupCreation","isDealCampaign","isDealAdGroupCreation","isCTVOrDeal","shouldEnableBidAdjustment","serverContext","_serverContext$Dynami","DynamicPermissions","EnableMSANDisplayCampaigns","EnableMSANVideoCampaigns","isMSANDisplay","isMSANVideo","Permissions","IsAmplifyEnabled","addSummaryStep","steps","permissions","dynamic","DisplayPlusSummaryPage","push","getAdGroupPanels","length","undefined","XandrDeviceTarget","DisplayPlusAmplify","Enable1PPlacementTargeting","DeviceTargetingForDisplay","EnableKeywordCustomSegments","MultiAdFormat","InMarketAudienceRedesign","ContentTargeting","PremiumStreaming","GenreTargets","options","basicOptions","advancedOptions","is1PPlacementEnabled","IsDomesticSimplifiedChineseEnabled","_","StepHeader","title","description","useContext","I18nContext","_jsxs","React","children","_jsx","className","headerStyles","mergeStyles","width","adPreviewStyles","marginTop","VideoAds","ads","data","onDataChange","error","hideFooter","loadClipchampPlayer","_ref2$errors","errors","activity","ActivityContext","legacyI18n","useMemo","buildLegacyI18n","ValidationStringMap","_scope$values","ScopeContext","scope","values","cid","aid","PermissionsContext","perfMarker","PerformanceMarkerContext","_useState","useState","_useState2","_slicedToArray","currentVideoIndex","setCurrentVideoIndex","saveFailed","useFormService","state","context","useWizardService","_state$context$wizard","wizardData","_state$context$wizard2","campaign","editingAdId","deal","currentStates","toStrings","onAdsValidation","useCallback","results","newAdsData","restResults","_objectWithoutProperties","_excluded","newAds","filter","ad","removeEmptyAds","dataPatch","_objectSpread","_toConsumableArray","isValid","useEffect","matchStepState","STEP_STATES","LOADING","signal","concat","SAVING","getBasicSettingsSection","Stack","horizontal","token","childrenGap","_TL_","UnmappedFormErrors","VideoAdsContainer","biddingScheme","Type","allowCopilotVideoGeneration","dealLoaded","AdPreview","onUpdateCurrentVideoIndex","ActuationGroup","actuationProps","isActive","AttentionBeaconGroup","FormErrorGroup","formErrorProps","showAllValidationErrors","defaultProps","BiddingSchemes","BidTypes","BiddingSchemeToBidType","EnhancedCpc","ManualCpc","ManualCpm","BudgetTypes","PriceModelToRange","ManualCpv","AgeRanges","EighteenToTwentyFive","TwentyFiveToThirtyFive","ThirtyFiveToFifty","FiftyToSixtyFive","SixtyFiveAndAbove","Unknown","GenderTypes","Female","Male","DeviceTypes","Computers","DeviceKeys","Tablets","Smartphones","AdGroupCriterions","Criterion","BidAdjustment","DayTimeCriterion","Day","FromHour","FromMinute","ToHour","ToMinute","CriterionType","BundleLocationCriterions","Status","SelectionStatus","Campaign","OriginalBidAdjustment","LocationCriterion","LocationId","NameTypeCombo","Latitude","Longitude","CountryCode","LocationType","EnclosingLocationIds","LesLocationType","BundleCountries","Country","AdPreviewOverideStylesByKey","imagePreviewHeight","imagePreviewWidth","CampaignGoal","CampaignObjectiveType","whitelistedSchemaPropertyKeys","getConversionGoalsDetails","edmCampaign","Customers","$withKey","Accounts","$makeCall","toPromise","readConversionGoalDetails","model","pick","getBiddingScheme","displayPlusCampaignObjective","appConfig","localStorage","supportsStorage","type","set","getDisplayPlusCampaignObjective","ObjectiveIDs","Conversions","goalDetails","IsActiveConversionGoalPresent","getBiddingSchemeForConversions","Consideration","Promise","resolve","Awareness","AdsError","message","property","code","useSkipAdCreationState","_useWizardService","wizardState","wizardSend","send","isSkipAdCreation","WIZARD_EVENTS","UPDATE_WIZARD_DATA","useAdsRepository","saveAsParam","saveAds","defaultCampaign","defaultAdGroup","_useSkipAdCreationSta","_useSkipAdCreationSta2","setSkipAdCreation","ServerContext","_useContext","RecommendationContext","recommendationContext","scenarioContext","ScenarioContext","activityContext","oDataConfig","getODataConfig","imageOdata","ImageOData","logSuggestionsApplied","useCopilotLoggers","isImageFittingEnabled","_len","args","Array","_key","apply","load","isAudienceFlow","DisplayPlusMultipleAds","ids","isDirty","currentPageIndex","getVideoDeal","createSaveCampaignPromise","BiddingScheme","IsBoostPassCampaignGoalEnabled","getGlobalSelectedCampaignObjective","objectiveType","goal","getActualGoalFromCampaignGoal","CampaignObjectiveSetting","CampaignObjectiveSettingType","saveCampaign","scenario","name","activityLogger","createActivity","createSaveAdGroupPromise","saveCampaignPromise","campaignData","adGroup","campaignMtModel","isDefaultCampaignStepModel","adGroupModelWithConstraintsPromise","modelConstraints","constraintAdGroupModel","saveAdGroup","isDisplayPlus","createAds","saveAdGroupPromise","adsData","_ref3","_ref4","adGroupData","adGroupMtModel","isDefaultAdGroupStepModel","oldAdsModel","adData","isDisplayAdsCampaignFlow","isMultiAdFormatEnabled","createdAd","savedAds","updatedAds","serverErrors","systemErrors","adSubType","AdFormat","DisplayPlusCopilotRecommendations","logCopilotRecommendations","assetGroup","DisplayPlusCopilotAssetGeneration","totalCopilotAds","adD","creativeData","suggestionIds","map","creativeMeta","recommendationId","JSON","stringify","catch","save","_ref5","getDaysInTheFuture","numDaysInTheFuture","futureDate","getTomorrow","DNVBidRecommendations","CampaignTypes","Audience","CampaignSubTypes","AudienceStatic","CPC","USD","ALL","DZD","XCD","ARS","AUD","EUR","BDT","BWP","BRL","BZD","BND","BGN","BYN","XAF","CAD","LKR","CLP","TWD","COP","CRC","HRK","CZK","XOF","DKK","DOP","ETB","GHS","GTQ","HUF","ISK","INR","IDR","JMD","JPY","KZT","KES","KRW","KGS","CHF","MWK","MYR","MVR","MUR","MXN","MNT","MAD","NZD","NGN","NOK","PKR","PEN","PHP","PLN","RUB","RWF","SGD","VND","ZAR","SEK","THB","TOP","TTD","TRY","UGX","MKD","EGP","GBP","TZS","UYU","UZS","ZMW","FJD","HKD","MOP","AZN","BHD","AMD","GEL","ILS","JOD","KWD","LBP","OMR","QAR","SAR","TND","CPM","DisplayAds","BrandAwarenessVideoAds","getBidRecommendationsRange","campaignBidTypeInfo","campaignType","campaignSubType","biddingSchemeType","currencyCode","campaignTypeRecommendations","campaignSubTypeKey","CampaignSubTypeTextMapping","campaignSubTypeRecommendations","biddingSchemeKey","toUpperCase","includes","biddingSchemeRecommendations","bidRecommendationsData","bidFloor","bidRecommendation","bidCeil","getBidRecommendations","_cpmBidRange","CurrentAccount","CurrencyCode","cpmRange","cpmRecommendation","CpmBid","FloorValue","cpcRange","cpcRecommendation","SearchBid","getInitDeviceTypes","isCTVFlow","Object","keys","Devices","getDealMiniumBid","exchangeRateMapping","getAccountExchangeRateFromLocalStorage","getConvertedCurrencyDealMinimumBid","MinimumBid","Currency","val","getDefaultCampaign","generateNameSuggestionSuffix","Budget","Amount","MinXandrDailyBudgetRangePerCurrency","Languages","Target","CampaignSubType","CampaignType","conversionGoals","originalConversionGoals","goalSelection","goalScopeSelection","Scopes","ACCOUNT","messages","Math","ceil","getDefaultAdGroup","bidRecommendations","VideoViewsCPMBidRange","StartDate","locationTargets","bidMode","currentLevelSettings","initLocations","peopleInLocation","peopleSearchingForLocation","targetOption","parentLevelSettings","useParentLevel","adSchedules","dayTimeRanges","deviceTypes","initialDeviceTypes","device","criterion","bidAdjustment","ageRanges","initialAgeRanges","genderTypes","initialGenderTypes","audiences","initialAudiences","interests","initialInterests","FrequencyCapSettings","genreTargets","initialGenreTargets","reachEstimation","useVideoAdsRepository","instrumentation","InstrumentationContext","createScenario","versionForLog","getLogVersion","logger","getLoggerWithoutPageInfo","CurrentCustomer","videoRepository","createVideoRepository","folderRepository","createFolderRepository","imageRepository","createImageRepository","_useAdsRepository","videoPromises","forEach","video","id","uploadVideoMetadata","videoMetadata","newVideoFromMTObject","uploadVideoIfNeeded","compact","appliedVideoAssetIds","idString","adCreatorStyles","currentImageIndex","setCurrentImageIndex","_useImagePicker","useImagePicker","displayImagePicker","setDisplayImagePicker","selectedMediaPanelSource","setSelectedMediaPanelSource","onNewImageSelected","imagePlacements","imagePlacement","imagePlacementsToImage","crops","defaults","FinalUrls","result","tokens","PopulateImages","DisplayAdsContainer","onUpdateCurrentImageIndex","_getBidRecommendation","useDisplayAdsRepository","props","isCopilotEnabled","setIsCopilotEnabled","isCopilotRegionRestricted","feature","isRegionRestricted","Activity","DisplayAdsWithCopilot","DisplayAdsWithoutCopilot","getStyles","footerContainer","display","columnGap","NativeAdFooter","classes","useDefaultStyles","classNames","DefaultButton","text","onClick","SAVE_AND_GOTO","flowFactors","stepId","NAVIGATE_TO","getDefaultBidForCPCBiddingScheme","bid","RecommendCPCBid","formatDecimal","maximumFractionDigits","minimumFractionDigits","_ref$DynamicPermissio","CampaignLifetimeBudget","MaeLifetimeBudgetExclusion","lifetimeBudgetProperties","UseCampaignLevelDates","getBudgetRange","Daily","Default","TargetSetting","initialIndustryTargets","initialNegativeIndustryTargets","initialJobTargets","initialNegativeJobTargets","initialCompanyNameTargets","initialNegativeCompanyNameTargets","companyNameTargets","negativeCompanyNameTargets","UseOptimizedTargeting","AdRotation","ROTATION_OPTIONS","OPTIMIZED_FOR_CLICKS","_extraPlacementInfo","EPT","Responsive","MSAN","WideImage","previewTitle","previewHeaderTitle","customClassName","disclaimerMessage","editingPlacementType","MSEdgeSingleCarousel","MSNInArticle","MSNSmallHeadline","SquareImage","Outlook","Mobile","Web","Boost","WindowsSpotlight","hideHeaderButtons","DiscoverCard","StartMenu","hasLogo","ActionCenter","Banner","Prong1Prong2Feed","Coachmark","getIndicatorsWidth","placements","_ref$palette","palette","extensionEditorStyles","nativeAdStepShell","nativeAdImagePreviewCarousel","position","top","height","border","minWidth","bottom","gap","left","margin","transform","transformations","indicatorsWidth","join","overflow","textOverflow","whiteSpace","color","fontSize","fontWeight","marginRight","boxSizing","maxWidth","padding","wordWrap","flexDirection","alignItems","flex","rightStyles","container","flexWrap","leftStyles","headerStackStyles","imageExperienceStyle","textAssetStyle","businessNameStyle","imageListLoadingContainer","minHeight","paddingTop","imageListErrorContainer","lineHeight","flexGrow","marginLeft","adPreviewPlacementHeader","adPreviewPlacementContainer","justifyContent","borderColor","paddingBottom","textAlign","boxShadow","borderRadius","NativeAdInternal","supportImageFitting","_ref$loadClipchampPla","finalHideFooter","setBiddingScheme","biddingSchemeContext","biddingSchemeRes","useBiddingScheme","stylingProps","component","getClasses","useResponsiveStyles","onValidate","ValidationGroup","validationProps","schema","AssetGroup","DisplayPlusNativeAds","isSaving","isCanceling","CANCELING","ScaleUnit","NativeAd","withScope","SingleNativeAdStepShell","stepData","nativeAd","_Fragment","useNativeAdRepository","isVideoAsAnAssetEnabled","VideoAsAnAsset","saveAdsWithMetadata","adThumbailRoot","background","cardPreview","adLabel","WebkitLineClamp","WebkitBoxOrient","header","textWrap","hoverButtons","rowGap","zIndex","hoverButton","backgroundColor","footer","AdThumbnail","item","onDeleteAdClicked","idx","adTitle","Headlines","Headline0","adId","adDescription","Descriptions","Description0","businessName","BusinessName","adImageUrl","Images","ImageList","src","onEditAdClick","onDeleteAd","deletingAdId","Dialog","Card","tabIndex","CardPreview","alt","CardHeader","Text","weight","CardFooter","Button","shape","icon","EditRegular","DialogTrigger","disableButtonEnhancement","DeleteRegular","DialogSurface","DialogBody","DialogTitle","DialogContent","DialogActions","appearance","useFluentV2Styles","makeStyles","button","addIcon","addNewAdButtonRoot","NativeAdsContainer","fluentV2Styles","updateData","adsToUpdate","deleteAd","adsWithoutDeletedAd","updatedFlow","adIds","wrap","AddRegular","MultiAdsStepShell","useMultipleNativeAdsRepository","odata","DependencyResolver","odataCallerFormatter","targets","host","path","request","customHeader","getEstimation","url","payload","post","getValueWithUnit","unit","isNumber","has","unitValueMap","None","Thousand","Million","Billion","EstimationMeter","low","high","estimationLow","setEstimationLow","_useState3","_useState4","estimationHigh","setEstimationHigh","valLow","valHigh","HorizontalBarChart","chartData","horizontalBarChartdata","x","y","barHeight","hideTooltip","hideLabels","styles","chart","items","chartTitle","root","getReachEstimateStyles","reachEstimateControl","marginBottom","estimateHelpContent","estimateNote","panel","white","panelBody","reachEstimateTitle","impressionsCountMessage","alignContent","convertToLocalStyle","helpbuttonStyle","impressionsCount","meterContainer","specificMeter","broadMeter","audienceSpecificLabel","audienceBroadLabel","right","arrow","impreAndClicksOptions","noDecimalOptions","formatBigDecimal","formatBigNumber","KEY","formatEstimation","estimationAudienceUnit","useStyles","chartContainer","spacingVerticalMNudge","ReachEstimationBreakdown","ageOnlyEstimation","genderOnlyEstimation","locationOnlyEstimation","audienceOnlyEstimation","interestOnlyEstimation","_React$useState","_React$useState2","openItems","setOpenItems","estimations","ageEstimation","genderEstimation","locationEstimation","audienceEstimation","interestEstimation","label","yAxisCalloutData","sort","a","b","estimation","legend","Accordion","onToggle","_event","multiple","collapsible","AccordionItem","AccordionHeader","AccordionPanel","variant","barChartCustomData","dataPoint","displayName","titleReach","titleImpression","getEstValsAndText","est","estImpressionsHighVal","High","Value","estImpressionsHighUnit","Unit","estImpressionsHigh","estImpressionsLowVal","Low","estImpressionsLowUnit","estImpressionsLow","ReachEstimate","estimationData","pricingModel","isImpressionTooSpecific","privacyResult","isCampaignCreationPlannerIntegrationEnabled","showImpressions","hasAudienceRemarketingList","updateValidation","showBreakdown","audienceSize","showPanel","estimatedReach","setEstimatedReach","_useState5","_useState6","estimatedReachLow","setEstimatedReachLow","_useState7","_useState8","estimatedReachText","setEstimatedReachText","_useState9","_useState10","estimatedImpression","setEstimatedImpression","_useState11","_useState12","estimatedImpressionLow","setEstimatedImpressionLow","_useState13","_useState14","estimatedImpressionText","setEstimatedImpressionText","_useState15","_useState16","errorMessage","setErrorMessage","updateEstimatesOnMeter","_getEstValsAndText","EstImpression","_getEstValsAndText2","estImpressionText","estImpressionLow","estImpressionHigh","estimationText","_getEstValsAndText3","EstAudienceSize","_getEstValsAndText4","estReachText","estReachLow","estReachHigh","errMessage","field","verticalAlign","Spinner","size","SpinnerSize","large","ariaLive","labelPosition","HelpPopup","topic","topicKey","MessageBar","messageBarType","MessageBarType","warning","isMultiline","validatedReachEstimate","withCustomValidation","getLocationIds","bundleCountries","_locationTargets$curr","currentLocations","c","reduce","locationIds","cl","getRadiusCriterions","radiusTargets","CenterLatitude","RadiusCriterion","CenterLongitude","Radius","getExcludedLocationIds","_locationTargets$curr2","getAudienceCriterionIds","_ref7","status","isArray","audienceIds","audience","AudienceId","getInterestIds","_ref8","getExcludedInterestIds","_ref9","getOtherAudienceIds","_ref10","getExcludedOtherAudienceIds","_ref11","getAudienceIds","_ref12","getExcludedAudienceIds","_ref13","getAgeRanges","_ref14","ar","AgeRangesCampaignToAdInsight","getDevices","_ref15","campaignBiddingScheme","dealDetails","BidStrategyToDevices","getAdSchedule","_ref16","adSchedulesBulkUpsert","_a$Criterion$DayTimeC","StartHour","EndHour","formatReachEstimateData","_ref17","campaignSubtype","Age","Includes","Gender","Device","Location","Excludes","RadiusTargets","TimeZone","timeZoneMapper","getAccountIANATimeZone","isXandrDisplayAdsCampaign","CampaignSubTypeMapping","areCriterionTargetsSet","negativeTargets","isTargetSet","targetSetting","isEditFlow","getTargetSettingsFromCriterions","targetSettings","isTargetSetCompanyName","isTargetSetJobFunction","jobTargets","negativeJobTargets","isTargetSetIndustry","industry","negativeIndustry","isTargetSetAudience","getTargetsFromAdgroupModel","age","gender","location","Company","company","Industry","JobFunction","TargetingEstimation","types","audienceUsePrivacyCheck","_ref2$adGroup","_ref2$campaign","audienceCriterion","AudienceType","otherParams","AutoTargeting","CampaignBiddingStrategy","BidStrategy","getOtherParams","_useMemo","targetsForAudienceSize","bidKeyToSend","bidValue","Bid","DailyBudget","_useMemo2","targetsForAudienceSizeEstimation","targetsForAudienceKPIEstimation","interestOnlyTargets","otherAudienceOnlyTargets","subTypes","_useTargetingEstimati","campaignSubTypes","urlBase","audienceEstimationUrl","audienceSizeEstimationUrl","privacyCheckUrl","setIsLoading","setData","setIsImpressionTooSpecific","setPrivacyResult","setAudienceSize","setAgeOnlyEstimation","setGenderOnlyEstimation","setLocationOnlyEstimation","_useState17","_useState18","setAudienceOnlyEstimation","_useState19","_useState20","setInterestOnlyEstimation","defaultPrivacyCheckResult","CheckResult","getAudienceReachEstimation","getAgeOnlyEstimation","getGenderOnlyEstimation","getLocationOnlyEstimation","getAudienceOnlyEstimation","getInterestOnlyEstimation","audienceSizeEstimation","audiencePrivacyCheck","ageOnly","genderOnly","locationOnly","audienceOnly","interestOnly","IsImpressionTooSpecific","err","finally","useTargetingEstimationCaller","_useTargetingEstimati2","isRecommendationDataLoading","estClick","EstClick","estCTR","EstCTR","estSpend","EstSpend","estAvgCPC","EstAvgCPC","dashColor","PredictiveTargetingDescription","href","query","PredictiveTargetingHeader","DataTrending","Label","SectionShimmer","count","index","Shimmer","getCollapsiblePanelStyles","components","theme","borderBottom","themePrimary","themeDarker","textDecoration","getAdGroupStyles","collapsiblePanel","toggle","alignSelf","adgroupShell","adgroupOptions","estimationPart","estimationPartEditFlow","hide","Title","titleKey","titleText","PredictiveTargetingControlHeaderInternal","onToggleEnabledChanged","alwaysDisabled","isEnabled","doesAdGroupHaveAudienceTargeted","doesAdGroupHaveInterestTargeted","doesAdGroupHaveCompanyNameTarget","doesAdGroupHaveJobFunctionTarget","doesAdGroupHaveIndustryTarget","doesAdGroupHaveAgeTarget","doesAdGroupHaveGenderTarget","doesAdGroupHaveDeviceTarget","isVideoCampaign","Toggle","inlineLabel","onChange","e","checked","disabled","PredictiveTargetingControlHeader","formatPlacements","BoostAdunitIds","Productivity","adUnitIds","PlacementDataMapping","productivityIcon","HomePages","homePagesIcon","Games","thematicBundleIcon","placementsIdMap","onRenderField","render","placementsOptionStyle","renderPlacements","iconSectionStyle","iconSectionDisabled","iconSectionChecked","iconSection","placementCard","titleStyle","subheaderStyle","ValidatedPlacementsFunctionPicker","initialSelectedPlacements","placement","initialSelectedAdUnitIds","i","selectedKey","setSelectedKey","selectedPlacements","setSelectedPlacements","selectedAdUnitIds","setSelectedAdUnitIds","placementsDisabledStates","setPlacementsDisabledStates","savedSelectedPlacements","savedSelectedAdUnitIds","newPlacementsDisabledStates","onChangeAllSpecific","option","handlePlacementOnChange","isChecked","currentId","currentAdUnitIds","newSelectedPlacements","newSelectedAdUnitIds","placementsAllSpecificChoiceGroup","ChoiceGroup","CampaignOData","call","currentAccount","PlacementExclusionLists","oolist","severeWarning","itemStyle","Url","placementsCheckboxes","currentItemStyle","itemStyleDisabled","itemStyleChecked","checkedState","disabledState","Checkbox","boxSide","onRenderLabel","AdSchedule","isCreate","hideUseCampaignSetting","showBidAdjustmentColumn","setAdScheduleViewCallback","isDateSettingsDisplayed","EndDate","_ref3$adSchedules","campaignAdSchedules","ValidatedLegacyDateSetting","ValidatedLegacyAdSchedule","isCreation","hideMinuteOptions","level","entity","setAdScheduleView","campaignDayTimeRanges","TARGET_OPTIONS","freeze","BID_ONLY","TARGET_AND_BID","TARGET_OPTIONS_TO_TEXT","TARGET_OPTIONS_TO_DESCRIPTION","TargetItems","TargetOrBidSelector","styleClass","isInitialized","setIsInitialized","areTargetsLoaded","areTargetsSet","Field","RadioGroup","Radio","ValidatedTargetOrBidSelector","ValidatedAudiencePickerWithAudienceInfo","shouldHide","onAudienceTargetInfoChange","isAudienceCreationWorkflow","campaignGoal","boostConversionBasedSegmentEnabled","hideCustomSegmentsOption","rest","currentLevelTargetInfo","AudienceTargetInfo","resourceName","isForVNext","initAudienceAssociationView","getAudienceTargetErrors","audienceList","customerMatchList","chain","excludeCustomerMatchList","includeCustomerMatchList","updatedItems","getSnapshot","off","currentTargets","isSame","every","on","destroyTargetTypeAsync","sortBy","_audience$Criterion3","newCriterion","createAsync","isEmpty","hydratedAudiences","_audience$Criterion2","_getPreExistingBids","_audience$Criterion","BidMultiplier","existingAudience","getPreExistingBids","stopPropagation","ValidatedAudiencePicker","noop","ValidatedAudiencePickerWithBidAdjustment","withBidAdjustment","withError","typeToValidationKey","allAvailableSelection","initialSelection","selection","selectionWithBidAdjustment","DeviceCampaign","ValidatedBidAdjustment","bidAdjustmentRef","setBidAdjustmentRef","hasBidValueChanged","setHasBidValueChanged","getBidAdjustmentStyles","_props$data","criterionType","_props$readOnly","readOnly","_props$criterionLevel","criterionLevel","_props$isAudienceEdit","isAudienceEdit","view","bidAdjustmentGridview","criterionTypes","supportCashbackSettings","showExclusion","readonly","validationKey","childElementCount","innerHTML","append","el","negativeSelection","difference","currentNegativeTargets","targetKey","isTargetSame","target","TypeCriterion","isNegativeTargetSame","updatedCriterion","initialSelectionBidAdjustment","accumulator","currentValue","updatedValue","currentBidAdjustment","criterionList","finalizedBid","criterionBid","RemovedDeviceBidAdjustment","AddedDeviceBidAdjustment","getTargetCriterion","propKey","adGroupViewModel","campaignViewModel","negativeCriterionList","negSelection","overrideType","destroyAllAsync","createMultipleAsync","pickerContainer","ref","newRef","CustomAdapter","AdapterFactory","defaultValue","valueToInject","functionToInject","convertEventToValue","event","ValidatedLevelSwitch","withValidation","Switch","ValidatedAudienceInterestsWithAudienceInfo","interest","ValidatedAudienceInterests","ValidatedAudienceInterestsWithBidAdjustment","getPanelErrorProps","needsAttention","TargetingPreferencesInternal","adScheduleView","optimizedTargetingEnabled","setOptimizedTargetingEnabled","isDeviceCampaignToggleVisible","setIsDeviceCampaignToggleVisible","initialAdGroup","_ref3$campaign","isAdGroupEditFlow","currentDate","XandrNegativeTarget","BoostConversionBasedSegment","ContentTargetingMSNSubcategories","_serverContext$Permis","IsAIMCampaignEnabled","customSegments","deviceTargetingCampaignLevel","campaignLevelDeviceTargets","_useCollapseState","useCollapseState","_useCollapseState2","allAdGroupTargetingSections","adgroupTargetingExpandedSections","setAdGroupTargetingExpandedSections","urlOptions","TrackingUrlTemplate","FinalUrlSuffix","UrlCustomParameters","urlOptionsDetails","getUrlOptionsDetails","webExclusionsError","setExclusionsCallback","exclusionsData","patchedData","exclusions","adgroupExclusions","currentLocationTargets","getCampaignSubType","isAdScheduleCampaignToggleVisible","shouldSelectAllDevices","CampaignSettings","adScheduleDetails","adScheduleDetailsMessage","getAdScheduleDetails","current","getDateSettingDetails","supportExclusion","ValidatedBootstrapPanel","defaultExpanded","BootstrapPanel","Heading","Collapse","Body","allPanelItems","checkItems","skipItemsTypeCheck","activeKeys","setActiveKeys","ValidatedPanel","TextTitle","panelKey","details","formatInterests","showBidAdjustments","isAIMCampaignEnabled","autoTargeting","campaignBiddingStrategy","formatAudience","isIMARedesignEnabled","formatDevices","devices","isCTVSupported","properties","deviceRestrictions","validationPropsField","defaultSelectAll","formatCompany","ValidatedCompanyPicker","formatIndustry","ValidatedIndustryPicker","formatJobFunction","ValidatedJobFunctionPicker","formatCustomSegment","headingRole","headingLevel","noOverflowHidden","ValidatedCustomSegmentsPicker","getContentTargetingPlacementsSummaryText","ContentTargetingPlacements","msnSubcategoriesEnabled","attentionBeaconProps","getExtraProps","ValidatedUrlOptionsParameter","ROTATION_OPTION_TO_TEXT","ValidatedAdRotation","ServerValidatedWebExclusions","showSiteExclusion","ScopeLevel","AdGroup","exclusionData","webExclusionPropertyVal","ValidatedFixedPanel","intent","layout","MessageBarBody","TargetingPreferences","ERROR_ENTITY","Ad","CampaignLocation","CampaignRadius","CampaignNegativeLocation","CampaignLocationIntent","CampaignDayTimeCriterion","CampaignNegativeWebpage","AdGroupLocation","AdGroupRadius","AdGroupNegativeLocation","AdGroupLocationIntent","AdGroupDayTimeCriterion","AdGroupNegativeWebpage","AdGroupLocationTargetError","BidRecommendationInfo","bidRecommendationRange","validationResult","isValidated","messageData","formatCurrency","style","Alert","Component","DefaultBidWithRecommendation","CustomValidatedDefaultBid","_useBidRecommendation","checkIsBidInRecommendedRange","useBidRecommendation","_useBidRecommendation2","setValidationResult","onBidChange","nextValue","nextValidationResult","AudienceBidValue","ceilingValue","floorValue","_ref$stopPropagation","_ref$isEdit","isFCapEnabled","getBidRange","useCampaignBidTypeInfo","_getBidRange","placeholderText","minimum","maximum","required","adGroupBidProp","_getBidRange2","CampaignBidStrategyName","htmlFor","bidStrategy","getBidTitleDetails","ValidatedFrequencyCapping","XandrBidValue","isPremiumStreaming","shouldUsePredefinedFrequencyLimit","bidType","bidRange","VideoViewsCPVBidRange","dealMinimumBid","KeywordCPMBidRange","bidValidationProps","max","CeilingValue","getNetflixFrequencyCapping","adGroupLocationCriterions","anyComp","entityIs","ServerValidatedLocationTargetSetting","withControlErrorHandling","withUnvalidatedControlErrors","ValidatedLocationTargetSetting","ContextualTargetWithStyle","withDefaultStyles","ValidatedContextualTarget","targetsContainer","paddingLeft","treeViewContainer","selectionContainer","paddingRight","contextualTargetTitle","AdGroupStepShell","_data$campaign","_data$campaign2","_data$adGroup","_data$campaign3","_data$adGroup2","onDataChangeProp","isMounted","useIsMounted","bundleLocationCriterions","BoostPublisherIds","BoostAccountIds","BoostTriggerIds","contextualTargets","locationRestricted","allAdGroupSettingsSections","adGroupSettingsExpandedSections","setAdGroupSettingsExpandedSections","AgeGenderDisclaimer","PTPerfEstimationUIUpdate","CampaignCreationPlannerIntegration","CampaignCreationPlannerIntegrationMultiAd","AudienceUsePrivacyCheckV2","_serverContext$Netfli","NetflixEnabledCountryCodes","isCampaignLifetimeBudgetEnabled","useCampaignLevelDates","startDate","endDate","allBasicExpand","collapseExpander","shouldServeOnMSAN","campaignShouldServeOnMSAN","isXandrServing","isXandrCampaign","isAudienceAdGroupCreate","isAudienceAdGroupEditFlow","isDealFlow","isDealTypeRestricted","shouldShowDealLocationTarget","hideLocationTarget","hideGenreTarget","Genre","genreOptions","getDealGenreOptions","getGenreOptions","dealCountryCode","TwoLetterCountryCode","dealSupportedLocationType","SupportedLocationType","showAllValidationErrorsMemo","BidValue","updatedData","isValidTargets","NetflixEnabledCountryCodesArr","split","BundleCountriesCodesArr","expiredAdGroupError","bidAmountsLessThanFloorPriceAdGroupError","shouldShowNetflixTC","some","bundleCountry","indexOf","RemainingCharsValidatedTextField","placeholder","adGroupNameProp","bidValueIcon","startDateEndDateIcon","allowStartDateSelection","allowNoEndDateSelection","allowEndDateSelection","placementTargetIcon","placementTargetingDetails","ValidatedBoostPlacementTarget","hideHeader","boostSetting","publisherIds","accountIds","triggerIds","contextualTargetIcon","contextualTargetDetails","expand","expandKey","getLocationTargetTitleDetails","locationTargetIcon","isRadiusExcludeEnabled","allowNegativeLocationTargeting","showSearchTypeOptions","defaultSelectedSearchType","SEARCH_TYPE","Boundary","isBrandAwarenessCampaignScenario","hideIntent","isAdGroupLevel","showUserParentLevelToggle","bidStrategyType","strings","allowBidAdjustment","dealInfo","isForDeal","NetflixTCAgreement","formatGenders","genderTarget","genders","formatAgeRanges","ageTarget","AgeRange","formatGenreTargets","ValidatedGenreTargets","adScheduleIcon","dismissible","accountId","customerId","DealImpressionPanel","readCampaignCriterions","Campaigns","CampaignCriterions","$cast","where","readDayTimeCriterions","viewModelToBulkModelForAdSchedules","CampaignName","readLocationCriterions","readDeviceCriterion","adGroupId","defaultNativeAdGroup","defaultProperties","setCustomProperties","defaultTargetingProperties","setCustomTargetingProperties","defaultDealAdGroup","defaultCTVAdGroup","useDefaultAdGroup","useDefaultAdGroupForFlow","_ref$getDefaultAdGrou","_ref$setCustomPropert","_ref$setCustomTargeti","defaultAdGroupData","defaultTargeting","useAdGroupRepository","ServicesEndpoints","odataUrl","CampaignAPI","isOnebox","toString","_useAudienceData","useAudienceData","postponeFetch","pathOverride","audienceType","getAudienceData","inMarketAudienceRedesignEnabled","isAdGroupPublishing","loadAudienceData","allSettledPromiseWrapper","promises","wrappedPromises","p","reason","savedCampaign","savedAdGroup","loadPromises","bundleCountriesAndLocationCriterions","loadBundleCountries","loadCampaign","campaignLocationCriterions","campaignReadLocationCriterions","campaignDeviceCriterions","campaignReadDeviceCriterions","campaignDayTimeCriterions","campaignReadDayTimeCriterions","extend","getDealDetails","loadAdGroup","placementCriterions","readPlacementCriterions","locationCriterions","dayTimeCriterions","targetCriterions","readTargetingCriterions","audienceCriterions","readAudienceCriterions","exclusionRepository","resultMap","acc","_ref3$adGroup","_ref3$locationCriteri","_ref3$dayTimeCriterio","_ref3$targetCriterion","_ref3$audienceCriteri","_ref3$exclusions","_ref3$exclusions2","_ref3$exclusions3","campaignExclusions","_ref3$placementCriter","_ref3$dealDetails","modelToViewModelForAdGroup","adGroupModel","campaignModel","locationCriterionsModel","campaignLocationCriterionsModel","dayTimeCriterionsModel","targetCriterionsModel","audienceCriterionsModel","placementCriterionsModel","isAudienceAds","isDisplayAds","isVideoAds","isEnableMSANDisplayCampaignsEnabled","isEnableMSANVideoCampaignsEnabled","separateIMA","constraintModel","modelToViewModelForCampaign","each","cr","getErrorsPlaceholders","savePromises","saveExclusionsData","CampaignId","AdGroupId","AdvancedSettings","ExcludedSites","saveExclusionsPromise","saveExtensions","reject","_result$reason$server","NegativeSitesResult","EntityErrors","disclaimerSettingsStyles","_ref$iconFontFamily","iconFontFamily","float","entitySelectorStyle","paginationStyle","disclaimerPanelStyles","_ref2$iconFontFamily","alertStyle","neutralSecondary","content","cursor","resize","gridTemplateColumns","getCampaignStyles","divider","borderTop","budgetContainer","campaignShell","disclaimerContainerWrapper","XandrBudgetAndBidStrategy","minBudget","topicForBidStrategy","ServerValidatedLegacyBudget","budget","validationDailyMinBudget","hideBudgetMinRecommendation","dateManagementSelector","stackStyles","flexShrink","stackItem","InfoLabel","infoTopic","HelpButton","AudienceBudgetBidStrategyInternal","setBudgetView","hideBidStrategy","showBudgetTypeSelection","allowBudgetTypeSelection","allowSharedBudgetLibrarySelection","bidStrategyName","sharedBudgetRef","setSharedBudgetRef","sharedBudget","sharedBudgetView","SharedBudgetSwitchView","newFactory","factory","accountCurrencyCode","withRealTimeUpdates","onBudgetChange","getValues","validate","BudgetId","update","budgetView","grid","gridView","viewModel","sharedBudgetSwitch","subscribe","isCPSSelected","costPerSale","sharedBudgetIsNotAllowedWarning","budgetHeader","ValidatedLegacyBidStrategy","initialValue","i18nNewDesign","validateWithBudget","budgetAmount","protoTypes","PropTypes","isRequired","BidStrategyId","BidStrategyName","AudienceBudgetBidStrategy","uiblockerStyle","containerBudgetStyle","sharedBudgetGridWrapper","glyphIconStyle","BudgetBidStrategyDetails","budgetTitleDetails","currencySymbol","getCurrencySymbol","individualBudget","bidStrategyDetails","CampaignGoali18nMap","CampaignGoalTypeBoostV2","campaignGoalText","getBidAdjustmentStylesTargetStyles","audienceModalStyles","modalWidth","audienceExpressionStyle","audienceCombinedListStyle","criterionSettingIndustryStyles","targetGridWidth","audienceAssociationSectionStyle","singleListBoxWidth","audienceTargetsSettingsStyles","audienceBudgetBidsStyles","commonDoubleListBoxStyle","tableStyle","searchboxStyle","fontFamily","editTargetButtonContainer","noTargetSelected","criterionTypeToString","CompanyName","criterionsToFetch","changedKey","validationKeys","criterionsByType","adjustedLocations","modelForParsing","CriterionBid","Multiplier","modelToViewModelForLocationTargets","overrideOriginalBidAdjustment","all","fetchCriterions","initializeWithhAdGroupAudience","allKeys","getAllNoneEmptyTypeKeys","document","createElement","cssText","CallToActionOptOut","isCallToActionOptOut","IsCallToActionOptOut","getAssociatedDisclaimer","repository","association","findAll","disclaimerdata","ValidatedDisclaimerExtension","displayPlusDisclaimerRef","useRef","DisclaimerAdsEnabled","associatedDisclaimer","validateAndWarn","AdExtensionAssociations","disclaimerAdsEnabled","setDisClaimerAdsEnabled","AdsCampaignDisclaimers","selectedDisclaimer","onDisclaimerCheckboxChange","isForNew","dateSettingsManageAtAdGroupLevelText","dateManagementSelectorContainer","opacity","DATE_MANAGEMENT_OPTIONS","CampaignLevel","AdGroupLevel","DateManagementSelector","selectionValue","ariaLabel","messageBar","DateManagementInfo","AudienceDateSetting","displayDateManagementSelector","allowDateManagementSelection","restProps","BudgetType","getCurrentDate","validateLifetimeBudgetDateSettings","newData","budgetRangeError","numberOfDaysBetweenDates","validateLifetimeBudgetDateRange","validationError","validateDate","logActivity","action","validationErrors","dateSettingWithDefaultStartDate","amendedData","LegacyDateSetting","ValidatedAudienceDateSetting","WebsiteLists","_ref$selectedExclusio","selectedExclusions","_ref$onExclusionsChan","onExclusionsChange","WebsiteListSelector","listType","selected","CampaignStepShell","_ref3$DynamicPermissi","IsConversionAssociationWarningEnabled","ConversionAssociationWarning","initialCampaign","_wizardData$lifetimeB","lifetimeBudgetFlowData","_lifetimeBudgetFlowDa","isBudgetTypeEditable","_lifetimeBudgetFlowDa2","isDateManagementEditable","_getCampaignPanels","_serverContext$Dynami2","AudienceMMACTAOptOut","EnableDoubleVerify","IsMSANDisclaimerEnabled","IsMSANISPOTEnabled","getCampaignPanels","isAudienceCampaignEditFlow","isAudienceCampaignCreate","isCTVOrDealFlow","isLifetimeBudgetFeatureEnabled","allowStartDateEdit","onExclusionsListSelected","exclusionsList","websiteExclusionLists","list","advertiserCustomerId","AdvertiserCustomerID","optionsShown","setOptionsShown","dateSettings","dateSettingsDetails","getAudienceDateSettingsDetails","isLifetimeBudget","disclaimerRepositoryRef","Repository","DisclaimerAdExtension","skipExtensionCache","DisclaimerStringMap","devicesDetails","getDeviceDetails","filterOutBidPanel","CpvBid","getLaterDate","pricingModelUpdate","PricingModel","getMessageType","customConfirmMessages","onAdGroupValidate","allCampaignSettingsSections","campaignSettingsExpandedSections","setCampaignSettingsExpandedSections","_useCollapseState3","_useCollapseState4","allAdvancedCampaignSettingsSections","advancedCampaignSettingsExpandedSections","setAdvancedCampaignSettingsExpandedSections","advancedSettingsExpand","WebsiteExclusionLists","BudgetAndBidStrategy","setting","verifiedTrackingSettingsValidationProps","campaignFromData","VerifiedTrackingSettings","initialCampaignLevelDeviceTargets","setAssociatedDisclaimer","disclaimer","campaignNameProp","budgetBidStrategyIcon","conversionGoalsIcon","ValidatedConversionGoals","showTrackingStatusIcon","bidAdjustmentIcon","AllowDisclaimerEnabled","usePanel","isNativeAd","CallToActionImg","_data$websiteExclusio","UrlOptionsImg","phoneDesktopIcon","iconStyles","ValidatedBidAdjustmentGrid","webExclusionsIcon","showIPExclusion","showAccordion","siteInputProps","ipInputProps","headingClassName","Ruler","formatVendorSettings","ThirdPartyMeasurementV3WithValidation","AdGroupNegativeReferenceId","_ref$overrideType","AdGroupName","viewModelToBulkModelForBidAdjustmentUI","ageTargets","negativeAgeRanges","negativeGenderTypes","industryTargets","negativeIndustryTargets","ageTargetCriterions","negativeAgeTargetCriterions","genderTargetCriterions","negativeGenderTargetCriterions","jobTargetCriterions","negativeJobTargetCriterions","industryTargetCriterions","negativeIndustryTargetCriterions","companyNameTargetCriterions","negativeCompanyNameTargetCriterions","useCampaignRepository","isPublishing","viewModelToBulkModelForDisclaimerAssociation","viewModelToBulkModelForVerifiedTrackingSettings","saveAdGroupsPromise","customTargetingBulkModel","useCampaignEditRepository","_ref2$DynamicPermissi","isAudienceMMACTAOptOutEnabled","isAudienceMMACTADefaultOptOutEnabled","AudienceMMACTADefaultOptOut","isWebsiteExclusionListsEnabled","isCTVCampaignFlow","isDealCampaignFlow","getListsByCampaignId","saveWebsiteExclusionListsPromise","AdvanceSettings","Exclusions","ExcludedIPs","associateListsToCampaign","BudgetBidCampaignImportNotificationActivity","createScenarioAndActivity","scenarioName","activityName","stepContexts","CAMPAIGN_EDIT","initialData","showBudgetBidCampaignNotifications","campaignItemList","oldBudget","newBudget","oldBidStrategy","newBidStrategy","NegativeIPsResult","useSummarySchemaData","isAudienceCampaignFlow","timeDisplayType","setTimeDisplayType","numberOfAds","isMultiAdsAudienceCampaign","preferencesService","_preferencesService","initialize","isTwelveHourDisplay","findByName","Data","locations","loc","hideGenreTargetForDeal","isUseCampaignLevelDates","adsPanel","isRendered","adCreation","numAds","adGroupName","locationTargeting","genderTargeting","ageRangeTargeting","genreTargeting","predictiveTargeting","isPredictiveTargetingEnabled","advancedTargetingSeparator","companyTargets","negativeCompanyTargets","jobFunction","adScheduleAdGroup","useSearcherTimeZone","AdScheduleUseSearcherTimeZone","campaignName","startEndDatesCampaign","isDateLevelDisplayed","buildSchemaData","SummaryStepShell","schemaData","onAdsHeaderActionClick","onTargetingHeaderActionClick","onCampaignSettingsHeaderActionClick","separatorStyles","actionButton","iconName","dynamicProps","targeting","buildDefaultDataProperty","hd1","campaignSettings","buildSchema","GeneratedUI","customComponentTypes","summaryPageComponentTypes","useSummaryRepository","dayTimeCriterionsCampaign","readDayTimeCriterionsCampaign","saveJustAdGroup","useSelectedAdFormatState","updateSelectedAdFormat","selectedAdFormat","MultiAdFormatStepShell","_ref$adsType","adsType","_useSelectedAdFormatS","_useSelectedAdFormatS2","setSelectedAdFormat","isLoaded","setIsLoaded","isDisabled","setIsDisabled","onFormatChange","ACTIVE","AdFormatOption","SingleMultiAdFormatStepShell","isMultipleNative","useMultiAdFormatRepository","isMultipleFlow","nativeAdSave","multipleNativeAdSave","displayAdSave","videoAdSave","dataToSave","adResource","ResourceIdentifier","deleteAds","adsViewModel","adViewModel","fields","viewModelToModelForAdToDelete","bulkUpdate","bind","DisplayAdPreview","resizeImageHeightForThumbnail","image","cropHeight","cropWidth","aspectRatio","min","CroppedImageView","originalWidth","resizeImageHeight","SourceWidth","SourceX","cropX","SourceY","cropY","NativeAdPreview","imageContainer","nativeAdImage","nativeAdImageForeground","textOverlay","Body2","Caption2","Caption1","VideoAdPreview","controls","kind","srcLang","default","getConfigByType","ContentViewRegular","ImageMultipleRegular","VideoRegular","getDescriptionByType","imageCount","headLinesCount","longHeadLinesCount","LongHeadlines","descriptionCount","headlineCount","descCount","_ad$data$image","targetWidth","targetHeight","duration","videoDuration","minutes","floor","seconds","padStart","getAdThumbnailStyles","objectFit","backgroundImage","previewDescription","getAdsContainerStyles","menuButton","menuContainer","toolbar","radioGroup","radioOption","emptyViewContainer","FilterFormat","native","MultiAdFormatAdsContainer","filterFormat","setFilterFormat","onClickCreateNewAd","Menu","MenuTrigger","MenuButton","MenuPopover","MenuList","MenuItem","ImageRegular","ev","change","horizontalAlign","DesertSvg","adType","editWizardTypeList","StepConfig","StepConfigMultiAdFormat","DisplayPlusWizardInternal","wizardType","flowType","routeToNavigateToWhenDone","initialWizardData","isEnableMultiAdFormat","isConversionAssociationWarningEnabled","wizardPerfMarker","createChild","initialStep","step","machineOptions","guards","needsConfirming","getNeedConfirming","getStepConfigMultiAdFormat","getStepConfig","config","initialFlowFactors","getFlow","actions","onDone","onExited","attachStepActivities","setClarityTag","DisplayPlusCampaigns","PerformanceMarkerProvider","immediateDone","Scenario","MmpFetchProvider","Wizard","WizardPerfMarker","wizardName","wizardMarker","LayoutContainer","DefaultTemplate","Layout","StepContainer","BusyBlocker","loadingText","CancelWizardDialog","ConfirmWizardDialog","useConfirmDialogConfigWithLogger","DisplayPlusWizard","withPermissions","withLoggingContext","withRecommendationContext","shorthands","spacingVerticalL","spacingVerticalNone","SaveAndPublish","isBlocking","FETCHING","onNextClicked","SAVE_AND_EXIT","buttonText","getCurrentStepId","PrimaryButton","SaveAsDraft","_useWizardService2","SaveAndExitButton","_useWizardService3","SkipAdCreationButton","_useWizardService4","SAVE_EMPTY_AND_NEXT","NextButton","_useWizardService5","currentStepId","SAVE_AND_NEXT","BackButton","_useWizardService6","onBackClicked","BACK","DisplayPlusStepFooter","nextButtonText","nextDisabled","backButtonText","cancelButtonText","hideBackButton","showAWFWarning","AWFWebExclusionsWarning","isFirstStep","getIsFirstStep","isLastStep","getIsLastStep","currentStep","isInternalUser","useIsInternalUser","wasAdAlreadyCreated","MessageBarTitle","CancelButton","EditFooter","saveAndExitButtonText","AdGroupCreationFooter","StepList","currentFlow","getCurrentFlow","displayMode","useResponsiveSize","Constants","ResponsiveSizeBreakpoints","stepListConfig","getStepListConfig","getDefaultOnItemClickFn","toStep","firstSubStep","s","isBehind","ResponsiveStepList","getOnItemClickFn","DisplayPlusCampaignWizard","withSiteMap","siteMap","getRoutePathById","displayPlusCampaignType","getDisplayPlusCampaignType","videoDeal","ErrorBar","DisplayPlusEditWizard","useDisplayPlusEditWizardStyles","wizardWrapper","DisplayPlusEditCampaignWizard","currentCampaign","isAudienceNativeAdsCampaign","isAudienceCTVCampaign","isAudienceDealCampaign","getWizardType","mergeClasses","DisplayPlusEditAdGroupWizard","currentAdGroup","DisplayPlusCreateAdGroupWizard","UnstyledCompanyPicker","_validationProps$data","companyAssociationRef","setCompanyAssociationRef","companyAssociationView","companyView","CompanyNameTargetSetting","showBidOnlyNote","defaultBidAdjustment","companyNameTarget","CompanyNameCriterion","negativeCompanyNameTarget","companies","_ref6","isCompanyTargetSame","pluck","isNegativeCompanyTargetSame","_ref8$BidAdjustment","companyTarget","criterionData","companyNameCriterion","criterionHelper","buildLinkedInCriterion","criterionSettingCompanyStyles","contentTargetingGroups","placementId","CheckOOInventoryBlocklists","useContentTargetingStyles","contentTargetingSpecificOptionsContainerStyle","contentTargetingSpecificOptionContainerStyle","spacingHorizontalXS","spacingHorizontalNone","spacingVerticalXS","spacingVerticalS","strokeWidthThin","colorNeutralStroke1","controlWrapperStyle","labelDescriptionStyle","colorNeutralForeground3","entireSpecificSelectionStyle","ENTIRE_MICROSOFT_NETWORK","SPECIFIC_PLACEMENTS","EXCLUDED_PLACEMENT_IDS","isTheEntireMicrosoftNetworkSelected","EntireNetworkOrSpecificSelection","entireSpecificSelection","onChangeEntireSpecific","allPlacementsLabel","allPlacementsSubLabel","specificPlacementsLabel","specificPlacementsSubLabel","Body1Stronger","Body1","ContentTargetingSpecificPlacements","groups","onToggleContentTargetingPlacement","isOnlyOnePlacementSelected","group","placementsSectionLabel","placementOptionsLabel","filteredContentTargetingGroups","setEntireSpecificSelection","v","PlacementId","radioSelection","_e","UnstyledIndustryPicker","industryAssociationRef","setIndustryAssociationRef","industryAssociationView","industryView","IndustryTargetSetting","industryTargetsBidAdjustment","IndustryCriterion","targetWithBidAdjustment","searchView","searchTreeInitializationPromise","treeView","node","child","innerChildren","innerChild","flatIndustryTargets","flatten","selectedIndustries","industryCriterion","selectedNegativeIndustries","trigger","UnstyledIndustryPickerWithBidAdjustment","UnstyledJobFunctionPicker","jobFunctionAssociationRef","setJobFunctionAssociationRef","jobFunctionAssociationView","jobFunctionView","JobFunctionTargetSetting","jobTargetBidAdjustments","jobTarget","JobFunctionCriterion","negativeJobTarget","initializeSearchDataTask","allJobTargets","searchResultView","selectedJobTargets","jobFunctionCriterion","selectedNegativeJobTargets","UnstyledJobFunctionPickerWithBidAdjustment","criterionSettingJobFunctionStyles","TargetEditButton","isBidAdjustmentsVisible","isTargetSelected","Link","inline","targetsFieldNameList","HOC","setIsBidAdjustmentsVisible","targetInfo","setTargetInfo","bidAdjustmentclasses","_props$validationProp","any","targetsFieldName","updateTargetInfo","info","bidAdjustmentView","BidAdjustmentView","updateBidAdjustmentVisibility","isVisible","targetEditButtonProps","EventDelegator","adjustWidth","brandName","brandDomain","Wrapped","memo","Comp","i18nLegacy","manuallyAddBrand","logScope","renderHeaderFactory","BrandName","BrandDomain","rowItem","goalNameColumn","goalTypeColumn","renderItemFactory","isSelected","forwardedRef","isAddedToResultList","rowItemClass","addIconClass","BrandUrl","arrowIcon","renderFooter","ReactTemplate","link","LinkButton","selectionLogger","isRemove","trace","newProps","sourceGoalSelectorOptions","renderHeader","renderItem","onSelect","onSelectAll","resultContainerOptions","isHideSaveBar","onRemove","onRemoveAll","goalSelectorContainer","goalSelector","GoalSelector","flexStyle","getOverviewStyles","visibility","borderRight","overviewContainer","subTitle","placeholderContainer","placeholderImage","addBrandsTip","addButton","tileContainer","emptyResult","totalCount","window","globalLegacyI18n","BrandSelectorUnstyled","customizedBrand","setCustomizedBrand","uid","loading","setLoading","AlertCenter","AlertHelper","onSelectDone","fetch","param","pageNumber","childPerfMarker","willInit","$","getBmcMtEndpoint","xhrFields","withCredentials","encodeURIComponent","success","res","done","hasError","Messages","showAlert","dismissAlert","brandItems","ResponseObject","brand","Loading","PureBrandSelector","selectedItem","selectedItemsForMultiMode","customizedItem","setCustomizedItem","pageSize","searchBoxAriaLabel","searchBoxPlaceholder","isMultiMode","BrandSelector","merge","brandError","ManuallyAddBrandModal","showDialog","setShowDialog","setBrand","brandsList","selectedBrands","setBrandName","setBrandDomain","brandNameError","setBrandNameError","i18nStrings","dialogContentProps","DialogType","normal","closeButtonAriaLabel","resetState","onBrandNameChange","brandNameValue","brandNameTrim","trim","validateDuplicated","onBrandDomainChange","brandDomainValue","saveBrand","canSaveBrand","hidden","onDismiss","brandFormItem","brandLabel","Input","brandInfoInput","currentTarget","errorHint","DialogFooter","tips","overlayProps","AddBrandPanel","isOpen","onClose","brandGrid","setRefreshDataTile","setSelectedBrands","addBrands","brandsData","searchAddedBrand","MmcBrandId","fetchGridData","refresh","onBrandSelectedChange","brands","showManuallyAddBrandDialog","setShowManuallyAddBrandDialog","saveBrandToResultList","cancelAddBrands","Panel","PanelType","custom","hasCloseButton","customWidth","subtitle","alertInfo","bottomBar","saveButton","setItems","total","setTotal","setPageNumber","setQuery","selectedItems","setSelectedItems","columns","helpId","defaultColumn","column","buildColumn","onRender","buildColumns","gridSelectionRef","Selection","onSelectionChanged","itemsInCurrentPage","getItems","getSelection","itemsInOtherPage","setToEmptyResult","params","_query","_pageNumber","setIndexSelected","removeAllSelection","removeItem","findIndex","SearchBox","onSearch","ActionButton","iconProps","CampaignShimmeredDetailsList","enableShimmer","selectionMode","SelectionMode","pager","availablePageSizes","onPageChange","page","SelectedItem","itemText","itemIndex","onDelete","AddBrandPanelUnstyled","HelpIcon","AddBrandPanelV2","DataTile","shouldRefresh","setShouldRefresh","MranSimplificationV2","brandsSubmitted","productsMatchedByBrands","reportDownloadLink","summaryData","setSummaryData","navigateTo","routeName","getRouterDep","showTips","MatchedProductCount","footerTips","tileConfig","tileClassName","dataTileContainer","renderHeaderText","tileHeader","buttons","callback","open","selected_item","fetchSummaryData","obj","SharedTile","classPrefix","dataWrapper","dataItem","dataCount","dataDesc","StyledGridViewWrapperWithFilterContext","withGlobalFilter","StyledGridViewWrapper","NewSummaryPage","preferenceService","crossPageSelectPlugin","toolbarPlugin","onGridInjected","showTopOfGridPanel","changeLayout","renderToolbarContainer","GRID_EVENT_NAMES","rendered","backboneGridView","gridViewConfig","setGridViewConfig","productFeedGrid","setProductFeedGrid","setBrandsList","isAddBrandPanelOpen","setIsAddBrandPanelOpen","refreshDataTile","isAllBrandsVerified","setLayout","tab","mode","showDatePicker","disableCompare","showAddBrandPanel","fetchDataCallback","SHOW_ADD_BRAND_PANEL","DATA_REFRESHED","brandsGridPromise","createBrandsGridForUiNext","hideSubBrand","BrandsGridView","overrideWith","deselectAll","EVENT_NAMES","stickyTopOfGridContent","Fragment","topOfGridContent","fallback","ProgressiveLoadingBlock","StyledTablePageContainer","customClasses","tablePageContainer","gridViewContainer","StyledNewSummaryPage","WrappedComponent","withCurrentExpandedScope","withTablePageStateManager","getToolbarConfig","lazyInject","toolbarSelectedConfig","Map","toolbarUnselectedConfig","iconLeftGlyphName","AddBrandToolbar","handleChange","onBrandSearch","FeedSummary","_React$PureComponent","StyledFeedSummary","compose","withI18nConsumer","getPredicateIconClassNameImpl","constructor","Entity","Scope","levelAtConstant","PredicateIconClassNames","LabelsCellAccount","LabelsCellMCC","getPredicateIconClassName","IsAccountLabelsEnabled","featureNameToSelectableFilterKey","CampaignsGrid","WaterfallFilterType","CampaignStatus","AdgroupGrid","AdGroupStatus","featureNameToPropertyName","featureNameToWaterfallFilterKey","newProductGroupsGrid","shouldCorrelateSelectableFilterWithWaterfall","featureName","contains","FilterViewManagerWithoutGlobalFilterContext","_React$Component","selectableFilterValue","waterfallFilterValue","dateFilterPop","editableFilterValue","editableEntityNameFilterValue","updateWaterfallFilter","newFilterValue","filterType","isNull","$in","prevProps","prevState","isEqual","filterService","refreshWaterfallFilters","_this$props","passThrough","FilterViewManager","isPoPEnabled","newState","newSelectableFilter","newEditableFilter","featureNameToUrlFilter","newEditableEntityNameFilter","featureNameToEntityNameFilter","initializeCombinedFilterPromise","setQuickFilter","filterObject","parse","urlFilterEntity","FilterEntity","fromLegacy","entitySchema","odataOptions","setEditableFilter","intersection","allowedUrlFilterKeys","omit","history","pathname","search","updateUrlFilter","shouldCorrelateEditableFilterWithEntityNameFilter","entityNameFilterEntity","updateEntityNameFilter","waterfallFilerValues","waterfallFilterKey","DateFilter","compared","selector","readOnlyProperties","FilterViewManagerWithGlobalFilterContext","ValidatedTextField","TextField","FrequencyIntervals","FrequencyCapUnit","getKeyStringMap","formatFrequencyCapping","interval","CapValue","TimeGranularity","textStyles","dropDownStyles","dropdown","getStyle","inputContainer","frequency","ValueAndInterval","onIntervalChanged","timeOptions","Dropdown","ValidatedValueAndInterval","FrequencyCapping","newI18n","mergeI18n","_ref4$CapValue","onCountValidate","_result$messages","capValue","customErrors","decimalLength","onText","offText","alwaysShowError","errorProcessor","oldError","columnStyle","themeDark","flexBasis","underlineLinkStyle","elementLocator","adColumnPreviewStyle","deliveryColumnStyle","labelsCellItemStyle","neutralTertiary","campaignGridBudgetCenterEntryStyle","headerStyle","userSelect","popChildCount","footerStyle","rowStyle","cellStyle","wordBreak","groupStyle","scrollbarStyle","overlapStyle","borderLeft","gridFlexStyle","_ComponentSettings$Gr","ComponentSettings","GridSharedStyles","getSharedBodyStyles","getSharedColGroupStyles","getSharedColumnsStyles","getSharedFooterStyles","getSharedGlobalStyles","getSharedHeaderStyles","getSharedTableStyles","variables","dateCellStyles","fontStyle","clear","locationCellStatusStyle","getColumnsStyles","getBodyStyles","budgetLandscapeTable","borderWidth","budGetEditTitle","overflowWrap","uurlTestToolStyle","maxHeight","listStyle","neutralLight","neutralPrimary","speak","fontVariant","textTransform","deliveryStatusStyle","outline","ZIndexContentComponents","GridHeader","gridPaddingLeft","headerRowBackgroundColor","headerRowBorderTop","headerRowBorderBottom","totalRowBackgroundColor","totalRowBorderTop","tableBorder","gridPaddingComponsation","GridViewWrapper","gridViewFromProps","gridEventHandlersFromProps","gridEventHandlers","removeGridOnUmount","getReferenceToGridView","gridClassName","remove","once","handler","BackboneInstanceWrapper","managed","instance","getTableStyles","getGlobalStyles","gridPopUpEditorStyle","deleteColumnModalStyle","pug","module","exports","locals","pug_interp","pug_html","locals_for_with","escape","failInDebug","Error","assert","expression","verboseDebugInfo","assertIsDefined","assertNever","member"],"sourceRoot":""}
setJobFunctionAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledJobFunctionPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n jobTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeJobTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n onAudienceTargetInfoChange: PropTypes.func,\r\n shouldHide: PropTypes.bool,\r\n showExclusion: PropTypes.bool,\r\n initialJobTargets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n\r\nUnstyledJobFunctionPicker.defaultProps = {\r\n shouldHide: false,\r\n showExclusion: true,\r\n onAudienceTargetInfoChange: noop,\r\n};\r\n\r\nconst UnstyledJobFunctionPickerWithBidAdjustment = withBidAdjustment(UnstyledJobFunctionPicker, 'JobFunction', ['jobTargets', 'negativeJobTargets']);\r\n\r\nexport const ValidatedJobFunctionPicker = withDefaultStyles(withCustomValidation(UnstyledJobFunctionPickerWithBidAdjustment), getJobFunctionTargetStyles);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { criterionSettingJobFunctionStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getJobFunctionTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingJobFunctionStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import { tableStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { audienceBudgetBidsStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getBidAdjustmentStyles = (_, { palette }) => ({\r\n pickerContainer: {\r\n ...audienceBudgetBidsStyles({ palette }),\r\n ...tableStyle({ palette }),\r\n overflow: 'auto',\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import { mergeStyles } from '@fluentui/react/lib/Styling';\r\n\r\nexport const placementsOptionStyle = mergeStyles({\r\n paddingLeft: '26px',\r\n fontWeight: '100',\r\n});\r\n\r\nexport const placementsAllSpecificChoiceGroup = mergeStyles({\r\n marginBottom: '20px',\r\n});\r\n\r\nexport const placementsCheckboxes = mergeStyles({\r\n marginBottom: '20px',\r\n});\r\n\r\nexport const itemStyle = mergeStyles({\r\n width: '320px',\r\n border: '1px solid',\r\n borderRadius: '4px',\r\n backgroundColor: '#FFFFFF',\r\n borderColor: '#D1D1D1',\r\n '&:hover': {\r\n backgroundColor: '#F5F5F5 !important',\r\n borderColor: '#BDBDBD !important',\r\n },\r\n});\r\n\r\nexport const itemStyleChecked = mergeStyles({\r\n width: '320px',\r\n border: '1px solid',\r\n borderRadius: '4px',\r\n backgroundColor: 'white !important',\r\n borderColor: '#BDBDBD !important',\r\n '&:hover': {\r\n backgroundColor: '#F5F5F5 !important',\r\n borderColor: '#BDBDBD !important',\r\n },\r\n});\r\n\r\nexport const itemStyleDisabled = mergeStyles({\r\n width: '320px',\r\n border: '1px solid',\r\n borderRadius: '4px',\r\n backgroundColor: '#F5F5F5 !important',\r\n borderColor: '#BDBDBD !important',\r\n});\r\n\r\nexport const placementCard = mergeStyles({\r\n paddingLeft: '16px',\r\n width: '280px',\r\n});\r\n\r\nexport const iconSection = mergeStyles({\r\n padding: '4px',\r\n border: 'solid 1px',\r\n width: '40px',\r\n height: '40px',\r\n marginTop: '8px',\r\n borderColor: 'white',\r\n backgroundColor: '#F0F0F0',\r\n '&:hover': {\r\n backgroundColor: '#E1E4E9 !important',\r\n },\r\n});\r\n\r\nexport const iconSectionChecked = mergeStyles({\r\n padding: '4px',\r\n border: 'solid 1px',\r\n width: '40px',\r\n height: '40px',\r\n marginTop: '8px',\r\n borderColor: 'white',\r\n backgroundColor: '#CFE4FA !important',\r\n '&:hover': {\r\n backgroundColor: '#E1E4E9 !important',\r\n },\r\n});\r\n\r\nexport const iconSectionDisabled = mergeStyles({\r\n padding: '4px',\r\n border: 'solid 1px',\r\n width: '40px',\r\n height: '40px',\r\n marginTop: '8px',\r\n borderColor: 'white',\r\n backgroundColor: '#E1E4E9 !important',\r\n});\r\n\r\nexport const titleStyle = mergeStyles({\r\n paddingLeft: '16px',\r\n fontWeight: '600',\r\n lineHeight: '16px',\r\n});\r\n\r\nexport const subheaderStyle = mergeStyles({\r\n paddingLeft: '56px',\r\n display: 'flex',\r\n paddingBottom: '12px',\r\n color: '#616161',\r\n lineHeight: '0.3',\r\n fontSize: '13px',\r\n});\r\n","import { any } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState, useContext, useMemo, useEffect, useCallback } from 'react';\r\nimport { Button, Link, mergeClasses, makeStyles } from '@fluentui/react-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { BidAdjustment as BidAdjustmentView } from '@bingads-webui-campaign/target-bid-adjustment';\r\n\r\nimport { getBidAdjustmentStyles } from './styles/bid-adjustment-styles';\r\n\r\nconst useStyles = makeStyles({\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst TargetEditButton = (props) => {\r\n const {\r\n isBidAdjustmentsVisible, onClick, isTargetSelected, i18n, classes, readOnly,\r\n } = props;\r\n\r\n if (readOnly || !isBidAdjustmentsVisible) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {\r\n !isTargetSelected && (\r\n \r\n {i18n.getString(_TL_('No targets selected.'))}\r\n \r\n \r\n )\r\n }\r\n {\r\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\r\n onClick()}>{i18n.getString(_TL_('Edit target'))}\r\n }\r\n
\r\n );\r\n};\r\n\r\nTargetEditButton.propTypes = {\r\n isBidAdjustmentsVisible: PropTypes.bool.isRequired,\r\n onClick: PropTypes.func.isRequired,\r\n isTargetSelected: PropTypes.bool.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n editTargetButtonContainer: PropTypes.string,\r\n noTargetSelected: PropTypes.string,\r\n }).isRequired,\r\n readOnly: PropTypes.bool,\r\n};\r\n\r\nTargetEditButton.defaultProps = {\r\n readOnly: false,\r\n};\r\n\r\n// 'targetNameList' is the list of fields in validationProps.data that are used to construct target grid\r\nexport const withBidAdjustment = (Component, criterionType, targetsFieldNameList) => {\r\n const HOC = (props) => {\r\n const { showBidAdjustments, readOnly, ...rest } = props;\r\n const [isBidAdjustmentsVisible, setIsBidAdjustmentsVisible] = useState(showBidAdjustments);\r\n const [bidAdjustmentRef, setBidAdjustmentRef] = useState();\r\n const [targetInfo, setTargetInfo] = useState();\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n const bidAdjustmentclasses = useDefaultStyles(getBidAdjustmentStyles);\r\n const styles = useStyles();\r\n\r\n const { validationProps = {} } = props;\r\n const { data } = validationProps;\r\n\r\n const isTargetSelected = useMemo(() => data && targetsFieldNameList.length > 0 &&\r\n any(targetsFieldNameList, targetsFieldName => data[targetsFieldName] && data[targetsFieldName].length > 0), [data]);\r\n\r\n const updateTargetInfo = useCallback(info => setTargetInfo(info), []);\r\n\r\n useEffect(() => {\r\n if (bidAdjustmentRef && bidAdjustmentRef.childElementCount === 0 && isBidAdjustmentsVisible && targetInfo) {\r\n const bidAdjustmentView = new BidAdjustmentView({\r\n currentLevelTargetInfo: targetInfo,\r\n criterionTypes: [criterionType],\r\n isAudienceCampaign: true,\r\n isForVNext: true,\r\n supportCashbackSettings: false,\r\n readonly: readOnly,\r\n });\r\n\r\n bidAdjustmentView.render();\r\n\r\n bidAdjustmentRef.innerHTML = '';\r\n bidAdjustmentRef.append(bidAdjustmentView.el);\r\n }\r\n }, [bidAdjustmentRef, isBidAdjustmentsVisible, readOnly, targetInfo]);\r\n\r\n const updateBidAdjustmentVisibility = useCallback((isVisible) => {\r\n setIsBidAdjustmentsVisible(isVisible);\r\n }, []);\r\n\r\n const targetEditButtonProps = useMemo(() => ({\r\n readOnly,\r\n isBidAdjustmentsVisible,\r\n onClick: updateBidAdjustmentVisibility,\r\n isTargetSelected,\r\n i18n,\r\n classes: bidAdjustmentclasses,\r\n }), [readOnly, isBidAdjustmentsVisible, updateBidAdjustmentVisibility, isTargetSelected, i18n, bidAdjustmentclasses]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n }), [classes]);\r\n\r\n const renderFooter = useCallback(() => (\r\n \r\n
\r\n );\r\n };\r\n\r\n HOC.propTypes = {\r\n showBidAdjustments: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({}),\r\n }).isRequired,\r\n };\r\n\r\n HOC.defaultProps = {\r\n showBidAdjustments: false,\r\n readOnly: false,\r\n };\r\n\r\n return HOC;\r\n};\r\n","// It's placeholder for event delegator in new UI, will add event process function later\r\nexport class EventDelegator {\r\n on() {}\r\n\r\n trigger() {}\r\n\r\n off() {}\r\n}\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { memo, useCallback, useMemo } from 'react';\r\nimport { Link as LinkButton } from '@fluentui/react';\r\nimport { GoalSelector, getStyles } from '@bingads-webui-campaign-react/goal-selector';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\n\r\nconst adjustWidth = {\r\n brandName: {\r\n width: 180,\r\n },\r\n brandDomain: {\r\n width: 300,\r\n },\r\n};\r\n\r\nconst PureBrandSelectorUnStyled = (props) => {\r\n const {\r\n i18n,\r\n i18nLegacy,\r\n classes,\r\n manuallyAddBrand,\r\n activity,\r\n logScope,\r\n } = props;\r\n\r\n const renderHeaderFactory = useCallback(() => (() => {\r\n const BrandName = i18n.getString(_TL_('Brand Name'));\r\n const BrandDomain = i18n.getString(_TL_('Brand Domain'));\r\n\r\n return (\r\n \r\n
\r\n {\r\n showBidAdjustments && !isBidAdjustmentsVisible && (\r\n \r\n )\r\n }\r\n \r\n
\r\n setBidAdjustmentRef(newRef)} />\r\n
\r\n \r\n
\r\n );\r\n }), [classes, i18n]);\r\n\r\n const renderItemFactory = useCallback(({ isSelected }) => ((item, index, forwardedRef) => {\r\n const { isAddedToResultList } = item;\r\n const rowItemClass = isAddedToResultList ? 'added-to-result-list' : '';\r\n const addIconClass = isAddedToResultList ? 'disabled' : 'enabled';\r\n\r\n return (\r\n \r\n {BrandName}\r\n
\r\n \r\n {BrandDomain}\r\n
\r\n \r\n \r\n {item.BrandName}\r\n
\r\n \r\n {item.BrandUrl}\r\n
\r\n {isSelected ?\r\n :\r\n \r\n }\r\n \r\n {text} ,\r\n }}\r\n template={i18n.getString(_TL_('Not finding your brand? {{link}}Manually add{{/link}}'))}\r\n />\r\n
\r\n ), [i18n, manuallyAddBrand, classes]);\r\n\r\n const selectionLogger = useCallback((isRemove) => {\r\n activity.trace(`${logScope}|PureBrandSelector|${isRemove ? 'ItemRemoved' : 'ItemSelected'}`);\r\n }, [activity, logScope]);\r\n\r\n const newProps = useMemo(() => _.defaults({\r\n sourceGoalSelectorOptions: {\r\n renderHeader: renderHeaderFactory({ isSelected: false }),\r\n renderItem: renderItemFactory({ isSelected: false }),\r\n renderFooter,\r\n onSelect: () => selectionLogger(false),\r\n onSelectAll: () => selectionLogger(false),\r\n },\r\n resultContainerOptions: {\r\n isHideSaveBar: true,\r\n renderHeader: renderHeaderFactory({ isSelected: true }),\r\n renderItem: renderItemFactory({ isSelected: true }),\r\n onRemove: () => selectionLogger(true),\r\n onRemoveAll: () => selectionLogger(true),\r\n },\r\n i18n: i18nLegacy,\r\n }, props), [props, renderFooter, renderHeaderFactory, renderItemFactory, selectionLogger, i18nLegacy]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nPureBrandSelectorUnStyled.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n i18nLegacy: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n goalSelectorContainer: PropTypes.string,\r\n goalSelector: PropTypes.string,\r\n rowItem: PropTypes.string,\r\n goalNameColumn: PropTypes.string,\r\n goalTypeColumn: PropTypes.string,\r\n arrowIcon: PropTypes.string,\r\n hide: PropTypes.string,\r\n manuallyAddBrand: PropTypes.string,\r\n }).isRequired,\r\n manuallyAddBrand: PropTypes.func.isRequired,\r\n activity: PropTypes.shape({\r\n trace: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logScope: PropTypes.string.isRequired,\r\n};\r\n\r\nconst Wrapped = _.compose(\r\n memo,\r\n Comp => withDefaultStyles(Comp, getStyles)\r\n)(PureBrandSelectorUnStyled);\r\n\r\nexport { Wrapped as PureBrandSelector };\r\n","import { merge } from '@bingads-webui/primitive-utilities';\r\nimport { paginationStyle } from '@bingads-webui-campaign-react/common-styles';\r\n\r\nconst flexStyle = {\r\n overflow: 'hidden',\r\n display: 'flex',\r\n flex: 1,\r\n position: 'relative',\r\n flexDirection: 'column',\r\n};\r\n\r\nexport const getOverviewStyles = () => ({\r\n '@global': {\r\n '& .brand-table-hide': {\r\n visibility: 'hidden',\r\n },\r\n '.brand-page .table-container table.table thead.header tr th': {\r\n '&:first-child, &:nth-child(2)': {\r\n 'border-right': '1px solid #EDEBE9',\r\n },\r\n '&:nth-child(5)': {\r\n 'border-right': 'none',\r\n },\r\n '&:last-child': {\r\n 'border-left': 'none',\r\n },\r\n },\r\n '.brand-page .table-container table.table tbody tr td': {\r\n 'overflow-wrap': 'break-word',\r\n '&:first-child, &:nth-child(2)': {\r\n 'border-right': '1px solid #EDEBE9',\r\n },\r\n '&:nth-child(5)': {\r\n 'border-right': 'none',\r\n '&:hover': {\r\n 'border-right': 'none',\r\n },\r\n },\r\n '&:last-child': {\r\n 'border-left': 'none',\r\n '&:hover': {\r\n 'border-left': 'none',\r\n },\r\n },\r\n },\r\n '.brand-page .bingadsgrid .table-container table.table tbody tr:hover': {\r\n '& td': {\r\n borderRight: '1px solid #fff',\r\n },\r\n },\r\n '.brand-page .bingadsgrid': {\r\n paddingRight: 32,\r\n },\r\n '.brand-page .container-fluid': {\r\n marginRight: 32,\r\n height: 56,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n },\r\n '.brand-page .top-grid-form': {\r\n maxWidth: 'none',\r\n },\r\n '.delete-brand': {\r\n background: 'none',\r\n 'vertical-align': 'middle',\r\n '&:active, &:focus, &:hover': {\r\n border: 'none',\r\n },\r\n },\r\n },\r\n overviewContainer: {\r\n padding: '0 32px',\r\n },\r\n subTitle: {\r\n marginTop: 8,\r\n },\r\n placeholderContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n placeholderImage: {\r\n marginTop: 45,\r\n width: 292,\r\n },\r\n addBrandsTip: {\r\n color: '#605E5C',\r\n textAlign: 'center',\r\n fontSize: 26,\r\n lineHeight: '20px',\r\n marginTop: 45,\r\n },\r\n addButton: {\r\n marginTop: 45,\r\n },\r\n tileContainer: {\r\n height: 220,\r\n display: 'flex',\r\n margin: '20px 0',\r\n },\r\n});\r\n\r\nexport const getAddBrandPanelStyles = () => ({\r\n panel: {\r\n '& .ms-Panel-scrollableContent, & .ms-Panel-contentInner, & .ms-Panel-content': {\r\n ...flexStyle,\r\n },\r\n '& .ms-Panel-content': {\r\n padding: 0,\r\n },\r\n },\r\n title: {\r\n paddingLeft: 32,\r\n marginTop: 0,\r\n },\r\n subtitle: {\r\n paddingLeft: 32,\r\n },\r\n alertInfo: {\r\n width: 425,\r\n margin: '10px 0 25px 32px',\r\n },\r\n content: {\r\n ...flexStyle,\r\n paddingLeft: 32,\r\n overflow: 'auto',\r\n },\r\n bottomBar: {\r\n borderTop: '1px solid #EDEBE9',\r\n padding: '0 32px',\r\n height: 63,\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n saveButton: {\r\n marginRight: 12,\r\n },\r\n});\r\n\r\nexport const getAddBrandPanelV2Styles = () => ({\r\n panel: {\r\n '& .ms-Panel-scrollableContent, & .ms-Panel-contentInner, & .ms-Panel-content': {\r\n ...flexStyle,\r\n },\r\n '& .ms-Panel-content': {\r\n padding: 0,\r\n },\r\n },\r\n title: {\r\n paddingLeft: 32,\r\n marginTop: 0,\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n subtitle: {\r\n paddingLeft: 32,\r\n },\r\n alertInfo: {\r\n width: 496,\r\n margin: '10px 0 25px 32px',\r\n },\r\n content: {\r\n ...flexStyle,\r\n padding: '0 32px',\r\n overflow: 'auto',\r\n },\r\n bottomBar: {\r\n borderTop: '1px solid #EDEBE9',\r\n padding: '0 32px',\r\n height: 63,\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n saveButton: {\r\n marginRight: 12,\r\n },\r\n BrandSelector: {\r\n '& .manually-add-btn': {\r\n marginBottom: 24,\r\n },\r\n '& .selected-count': {\r\n display: 'flex',\r\n gap: '10px',\r\n },\r\n '& .selected-items': {\r\n display: 'flex',\r\n gap: '6px',\r\n flexWrap: 'wrap',\r\n },\r\n },\r\n});\r\n\r\nexport const getManuallyAddBrandStyles = () => ({\r\n brandLabel: {\r\n fontSize: 14,\r\n fontWeight: 600,\r\n },\r\n brandFormItem: {\r\n height: 80,\r\n },\r\n brandInfoInput: {\r\n width: 400,\r\n },\r\n tips: {\r\n background: '#EFF6FC',\r\n width: 400,\r\n padding: '8px 32px',\r\n },\r\n errorHint: {\r\n color: '#A80000',\r\n },\r\n});\r\n\r\nexport const getCampaignTileStyles = () => ({\r\n ShoppingCampaignTile: {\r\n width: 606,\r\n height: 330,\r\n borderRadius: 2,\r\n position: 'relative',\r\n '& .tile-content': {\r\n boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n },\r\n '& .tile-contents-container': {\r\n flex: 1,\r\n marginBottom: 0,\r\n },\r\n '& .tile-header': {\r\n height: 44,\r\n },\r\n '& .tile-header-container': {\r\n marginTop: 5,\r\n },\r\n '& .tile-footer': {\r\n height: 48,\r\n },\r\n '& .ms-DetailsHeader': {\r\n paddingTop: 0,\r\n },\r\n '& .ms-DetailsList': {\r\n marginTop: '-14px',\r\n },\r\n '& .ms-DetailsRow-cell': {\r\n padding: '8px 0 8px 12px',\r\n minHeight: 34,\r\n },\r\n '& .ms-DetailsRow-fields': {\r\n minHeight: 34,\r\n },\r\n '& .ms-DetailsRow': {\r\n minHeight: 34,\r\n },\r\n '& .ms-ContextualMenu-container': {\r\n width: 100,\r\n },\r\n },\r\n tileHeader: {\r\n fontSize: 14,\r\n },\r\n createCampaignContainer: {\r\n display: 'flex',\r\n },\r\n createCampaignTextContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: 290,\r\n height: 182,\r\n margin: '20px 88px 0 15px',\r\n },\r\n createCampaignTitle: {\r\n lineHeight: '28px',\r\n },\r\n createCampaignDesc: {\r\n marginBottom: 24,\r\n },\r\n createCampaignBtn: {\r\n padding: '10px 16px',\r\n },\r\n adCard: {\r\n width: 129,\r\n height: 230,\r\n boxShadow: '0px 2px 10px #ccc',\r\n borderRadius: 6,\r\n },\r\n adImageBox: {\r\n position: 'relative',\r\n },\r\n editPenImage: {\r\n position: 'absolute',\r\n left: '-56px',\r\n top: 24,\r\n },\r\n adDesc: {\r\n padding: '8px 6px',\r\n fontSize: 15,\r\n },\r\n adName: {\r\n color: '#1A0DAB',\r\n },\r\n adPrice: {\r\n fontWeight: 500,\r\n color: '#444444',\r\n },\r\n adCategory: {\r\n color: '#006621',\r\n },\r\n spinnerModal: {\r\n width: '100%',\r\n height: '100%',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n background: 'rgba(255,255,255,0.5)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n campaignStatusIcon: {\r\n position: 'absolute',\r\n left: 8,\r\n fontWeight: 600,\r\n },\r\n campaignLink: {\r\n paddingLeft: 14,\r\n },\r\n activeCampaignIcon: {\r\n fontSize: 18,\r\n left: 6,\r\n top: 5,\r\n color: '#107C10',\r\n },\r\n columnHeader: {\r\n position: 'relative',\r\n paddingLeft: 18,\r\n },\r\n headerCheveribDownIcon: {\r\n position: 'absolute',\r\n left: 0,\r\n },\r\n});\r\n\r\nexport const getChartTileStyles = () => ({\r\n chartTileContainer: {\r\n width: 606,\r\n height: 330,\r\n borderRadius: 2,\r\n marginRight: 16,\r\n '& .tile-content': {\r\n boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n },\r\n '& .tile-contents-container': {\r\n marginBottom: 0,\r\n marginTop: 0,\r\n overflow: 'hidden',\r\n },\r\n },\r\n tileHeader: {\r\n fontSize: 14,\r\n },\r\n});\r\n\r\nexport const getDataTileStyles = () => ({\r\n dataTileContainer: {\r\n width: 500,\r\n height: 200,\r\n borderRadius: 2,\r\n marginRight: 16,\r\n position: 'relative',\r\n '& .datatile-content': {\r\n boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n height: '200px!important',\r\n width: '500px!important',\r\n },\r\n '& .tile-contents-container': {\r\n marginBottom: 0,\r\n marginTop: 0,\r\n overflow: 'hidden',\r\n },\r\n '& .datatile-buttons .btn': {\r\n marginRight: 12,\r\n },\r\n },\r\n showTips: {\r\n '& .datatile-content': {\r\n height: '236px!important',\r\n },\r\n },\r\n tileHeader: {\r\n fontSize: 14,\r\n },\r\n dataWrapper: {\r\n display: 'flex',\r\n },\r\n dataItem: {\r\n width: 193,\r\n margin: '22px 0 28px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n dataCount: {\r\n fontSize: 28,\r\n fontWeight: 600,\r\n },\r\n dataDesc: {\r\n fontSize: 12,\r\n color: '#323130',\r\n },\r\n alertInfo: {\r\n marginTop: 10,\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n '& .alert-info-inline': {\r\n textWrap: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n },\r\n});\r\n\r\nexport const getBrandSelectorStyles = ({ palette = {}, iconFontFamily = 'MsAds MDL2 Assets' }) => ({\r\n '@global': merge(\r\n {\r\n '& .arrow-button': {\r\n color: '#0078D4',\r\n },\r\n '& .arrow-button.enabled': {\r\n marginLeft: 10,\r\n overflow: 'visible !important',\r\n textDecoration: 'none !important',\r\n background: 'none !important',\r\n fontFamily: iconFontFamily,\r\n cursor: 'pointer',\r\n },\r\n\r\n '& .arrow-button.enabled:before': {\r\n content: '\"\\\\E710\"',\r\n },\r\n\r\n '& .arrow-button.remove': {\r\n marginTop: 8,\r\n float: 'right',\r\n fontFamily: iconFontFamily,\r\n padding: 0,\r\n },\r\n '& .arrow-button.remove:before': {\r\n content: '\"\\\\E738\"',\r\n },\r\n '& .arrow-button.remove+a': {\r\n width: 'fit-content',\r\n padding: 0,\r\n },\r\n '& .list-selector-container': {\r\n height: '470px!important',\r\n },\r\n '& .list-selector-content': {\r\n height: '365px!important',\r\n },\r\n '& .multi-selector-result-container': {\r\n height: '540px!important',\r\n },\r\n '& .multi-selector-result-container .list-selector-container': {\r\n height: '540px!important',\r\n },\r\n '& .multi-selector-result-container .list-selector-content': {\r\n height: '450px!important',\r\n },\r\n '& .multi-selector-content': {\r\n height: '540px!important',\r\n },\r\n '& .ba-entity-selector': {\r\n height: '540px!important',\r\n },\r\n '& .ba-list-selector': {\r\n height: '470px!important',\r\n justifyContent: 'space-between!important',\r\n },\r\n '.ba-list-selector .list-selector-action-bar .select-all-content': {\r\n padding: '10px 12px 10px 8px!important',\r\n },\r\n '.ba-list-selector .list-selector-action-bar .remove-all-content': {\r\n padding: '10px 12px 10px 8px!important',\r\n },\r\n '& .multi-selector-result-container .ba-list-selector': {\r\n height: 'auto!important',\r\n justifyContent: 'flex-start!important',\r\n },\r\n },\r\n paginationStyle({ palette })\r\n ),\r\n});\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport $ from 'jquery';\r\nimport React, { useCallback, useMemo, useState } from 'react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getBmcMtEndpoint, hasError } from '@bingads-webui-campaign/cpg-product-feed-grid';\r\nimport { Loading } from '@bingads-webui-campaign-react/loading';\r\nimport { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\nimport { PureBrandSelector } from './pure-brand-selector';\r\nimport { getBrandSelectorStyles } from '../../style';\r\n\r\nconst pageSize = 10;\r\nconst emptyResult = {\r\n items: [],\r\n totalCount: 0,\r\n};\r\nconst i18nLegacy = window.globalLegacyI18n.get('component/i18n/loader!legacy/global');\r\n\r\nexport const BrandSelectorUnstyled = (props) => {\r\n const {\r\n i18n,\r\n goalSelection,\r\n onChange,\r\n scope,\r\n manuallyAddBrand,\r\n customizedBrand,\r\n setCustomizedBrand,\r\n activity,\r\n logScope,\r\n perfMarker,\r\n } = props;\r\n\r\n const { aid, cid, uid } = scope.values;\r\n const [loading, setLoading] = useState(false);\r\n const AlertCenter = useMemo(() => new AlertHelper({ i18n }), [i18n]);\r\n\r\n const onSelectDone = useCallback((selection) => {\r\n onChange(selection);\r\n }, [onChange]);\r\n\r\n const fetch = useCallback((param) => {\r\n const { query, pageNumber } = param;\r\n if (_.isEmpty(query)) return Promise.resolve(emptyResult);\r\n const childPerfMarker = perfMarker.createChild('Simplified_SearchBrand');\r\n childPerfMarker.willInit();\r\n activity.trace(`${logScope}|BrandSelector|search brand request data: ${JSON.stringify(param)}`);\r\n setLoading(true);\r\n return new Promise((resolve) => {\r\n $.ajax({\r\n url: `${getBmcMtEndpoint()}/api/v1/manufacturers/${cid}/brands/term-search-v2?cid=${cid}&aid=${aid}&uid=${uid}`,\r\n type: 'POST',\r\n xhrFields: {\r\n withCredentials: true,\r\n },\r\n data: `BrandNameTerm=${encodeURIComponent(query)}&Page=${pageNumber + 1}&PageSize=${pageSize}`,\r\n success: (res) => {\r\n childPerfMarker.done();\r\n if (!hasError(res)) {\r\n AlertCenter.dismissAlert();\r\n const brandItems = _.map(_.result(res.ResponseObject, 'Brands', []), brand => ({ ...brand, Id: `${brand.BrandName}${brand.BrandUrl}` }));\r\n activity.trace(`${logScope}|BrandSelector|search brand request succeed: ${JSON.stringify(_.map(brandItems, brand => `${brand.BrandName}(${brand.BrandUrl})}`))}`);\r\n resolve({\r\n items: brandItems,\r\n totalCount: _.get(res.ResponseObject, 'Total', 0),\r\n });\r\n } else {\r\n activity.error(`${logScope}|BrandSelector|search brand failed: ${res.Messages}`);\r\n AlertCenter.showAlert(res.Messages);\r\n }\r\n setLoading(false);\r\n resolve(emptyResult);\r\n },\r\n error: (err) => {\r\n setLoading(false);\r\n childPerfMarker.done();\r\n activity.error(`${logScope}|BrandSelector|search brand request failed: ${JSON.stringify(err)}`);\r\n AlertCenter.showAlert(_.get(err, ['responseJSON', 'Message']));\r\n resolve(emptyResult);\r\n },\r\n });\r\n });\r\n }, [aid, cid, uid, AlertCenter, activity, logScope, perfMarker]);\r\n\r\n return (\r\n \r\n
\r\n \r\n {loading &&
\r\n );\r\n};\r\n\r\nBrandSelectorUnstyled.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n goalSelection: PropTypes.arrayOf(PropTypes.shape({})),\r\n onChange: PropTypes.func.isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n aid: PropTypes.string.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n uid: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n manuallyAddBrand: PropTypes.func.isRequired,\r\n customizedBrand: PropTypes.shape({}).isRequired,\r\n setCustomizedBrand: PropTypes.func.isRequired,\r\n activity: PropTypes.shape({\r\n trace: PropTypes.func.isRequired,\r\n error: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logScope: PropTypes.string.isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nBrandSelectorUnstyled.defaultProps = {\r\n goalSelection: [],\r\n};\r\n\r\nexport const BrandSelector = withDefaultStyles(BrandSelectorUnstyled, getBrandSelectorStyles);\r\n\r\n","import _ from 'underscore';\r\nimport React, { useState, useCallback, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n PrimaryButton,\r\n DefaultButton,\r\n Dialog,\r\n DialogFooter,\r\n DialogType,\r\n} from '@fluentui/react';\r\nimport { Input } from '@bingads-webui-react/primitive';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getManuallyAddBrandStyles } from '../../style';\r\n\r\nconst brandError = {\r\n tooManyWords: _TL_('Too many words in brand name (> 10)'),\r\n tooLong: _TL_('Should not exceed 256 characters'),\r\n duplicatedBrandName: _TL_('Brand name already exists'),\r\n};\r\n\r\nconst ManuallyAddBrandModalUnstyled = (props) => {\r\n const {\r\n i18n,\r\n showDialog,\r\n setShowDialog,\r\n setBrand,\r\n classes,\r\n brandsList,\r\n selectedBrands,\r\n } = props;\r\n\r\n const [brandName, setBrandName] = useState('');\r\n const [brandDomain, setBrandDomain] = useState('');\r\n const [brandNameError, setBrandNameError] = useState('');\r\n\r\n const i18nStrings = useMemo(() => ({\r\n brandName: i18n.getString(_TL_('Brand name')),\r\n brandDomain: i18n.getString(_TL_('Brand domain')),\r\n }), [i18n]);\r\n\r\n const dialogContentProps = {\r\n type: DialogType.normal,\r\n title: i18n.getString(_TL_('Manually add brand')),\r\n closeButtonAriaLabel: 'Close',\r\n };\r\n\r\n const resetState = useCallback(() => {\r\n setBrandName('');\r\n setBrandDomain('');\r\n setBrandNameError('');\r\n }, [setBrandName, setBrandDomain]);\r\n\r\n const onBrandNameChange = useCallback((brandNameValue) => {\r\n const brandNameTrim = brandNameValue.trim();\r\n if (brandNameTrim.length > 256) {\r\n setBrandNameError(brandError.tooLong);\r\n } else if (_.size(brandNameTrim.split(' ')) > 10) {\r\n setBrandNameError(brandError.tooManyWords);\r\n } else {\r\n setBrandNameError('');\r\n }\r\n setBrandName(brandNameTrim);\r\n }, [setBrandName]);\r\n\r\n const validateDuplicated = useCallback(() => {\r\n const hasDuplicated = _.findIndex([...selectedBrands, ...brandsList], brand => brand.BrandName === brandName) !== -1;\r\n if (hasDuplicated) {\r\n setBrandNameError(brandError.duplicatedBrandName);\r\n return false;\r\n }\r\n return true;\r\n }, [selectedBrands, brandsList, brandName]);\r\n\r\n // For now no need to validate brand domain\r\n const onBrandDomainChange = useCallback((brandDomainValue) => {\r\n setBrandDomain(brandDomainValue.trim());\r\n }, [setBrandDomain]);\r\n\r\n const saveBrand = useCallback(() => {\r\n if (!validateDuplicated()) return;\r\n setBrand({\r\n Id: brandName,\r\n BrandName: brandName,\r\n BrandUrl: brandDomain,\r\n });\r\n setShowDialog(false);\r\n }, [brandName, brandDomain, setBrand, setShowDialog, validateDuplicated]);\r\n\r\n const canSaveBrand = useMemo(\r\n () => !_.isEmpty(brandName) && !_.isEmpty(brandDomain) && _.isEmpty(brandNameError),\r\n [brandName, brandDomain, brandNameError]\r\n );\r\n\r\n useEffect(() => {\r\n if (showDialog) {\r\n resetState();\r\n }\r\n }, [showDialog, resetState]);\r\n\r\n return (\r\n \r\n
\r\n \r\n { i18nStrings.brandName } \r\n onBrandNameChange(e.currentTarget.value)}\r\n />\r\n { brandNameError &&
\r\n {i18n.getString(brandNameError)}
}\r\n \r\n { i18nStrings.brandDomain } \r\n onBrandDomainChange(e.currentTarget.value)}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n { i18n.getString(_TL_('We will do our best to match your info with products from retailers in our database.'))}\r\n
\r\n {i18n.getString(_TL_('Add brands'))}
\r\n{i18n.getString(_TL_('Search for brands to add to your account.'))}
\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('We’ll source your selected brand’s products from our retail partners'))}\r\n
\r\n \r\n setShowManuallyAddBrandDialog(true)}\r\n customizedBrand={customizedBrand}\r\n setCustomizedBrand={setCustomizedBrand}\r\n scope={scope}\r\n activity={activity}\r\n logScope={logScope}\r\n perfMarker={perfMarker}\r\n />\r\n
\r\n \r\n \r\n {i18n.getString(text.add)}\r\n \r\n \r\n {i18n.getString(text.cancel)}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nAddBrandPanelUnstyled.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n classes: PropTypes.shape({\r\n panel: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n content: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n searchBrandsContainer: PropTypes.string.isRequired,\r\n brands: PropTypes.string.isRequired,\r\n results: PropTypes.string.isRequired,\r\n searchBoxContainer: PropTypes.string.isRequired,\r\n searchButton: PropTypes.string.isRequired,\r\n searchBox: PropTypes.string.isRequired,\r\n count: PropTypes.string.isRequired,\r\n selectedBrandName: PropTypes.string.isRequired,\r\n bottomBar: PropTypes.string.isRequired,\r\n saveButton: PropTypes.string.isRequired,\r\n subtitle: PropTypes.string.isRequired,\r\n alertInfo: PropTypes.string.isRequired,\r\n }).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n aid: PropTypes.string.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n uid: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n brandGrid: PropTypes.shape({\r\n fetchGridData: PropTypes.bool.isRequired,\r\n grid: PropTypes.shape({\r\n gridView: PropTypes.shape({\r\n refresh: PropTypes.func.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n activity: PropTypes.shape({\r\n trace: PropTypes.func.isRequired,\r\n error: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logScope: PropTypes.string.isRequired,\r\n setRefreshDataTile: PropTypes.func.isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n brandsList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n\r\nexport const AddBrandPanel = withDefaultStyles(AddBrandPanelUnstyled, getAddBrandPanelStyles);\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';\r\nimport { SearchBox, ActionButton, SelectionMode, Selection, Link } from '@fluentui/react';\r\nimport { CampaignShimmeredDetailsList } from '@bingads-webui-grid/campaign-details-list';\r\nimport { buildColumn } from '@bingads-webui-grid/campaignui-common-columns';\r\nimport { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\nimport { getBmcMtEndpoint, hasError } from '@bingads-webui-campaign/cpg-product-feed-grid';\r\nimport { SelectedItem } from '@bingads-webui-campaign-react/pill-item-components';\r\nimport { ManuallyAddBrandModal } from '../brand-selector/manually-add-brand-modal';\r\n\r\nconst pageSize = 10;\r\nconst defaultColumn = ({ i18n }) => [\r\n {\r\n key: 'BrandName',\r\n title: i18n.getString(_TL_('Brand')),\r\n helpId: 'pop_BA_a',\r\n },\r\n {\r\n key: 'BrandUrl',\r\n title: i18n.getString(_TL_('Brand domain')),\r\n helpId: 'pop_BA_a',\r\n },\r\n {\r\n key: 'MatchedProductCount',\r\n title: i18n.getString(_TL_('Product count')),\r\n helpId: 'pop_BA_a',\r\n },\r\n];\r\n\r\nexport const buildColumns = ({\r\n i18n,\r\n}) => {\r\n const columns = defaultColumn({\r\n i18n,\r\n });\r\n return columns.map(column => ({\r\n ...buildColumn(column),\r\n onRender: column.onRender,\r\n }));\r\n};\r\n\r\nexport const BrandSelector = (props) => {\r\n const {\r\n i18n,\r\n classes,\r\n onChange,\r\n scope,\r\n activity,\r\n logScope,\r\n perfMarker,\r\n brandsList,\r\n } = props;\r\n\r\n const [items, setItems] = useState([]);\r\n const [total, setTotal] = useState(0);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [query, setQuery] = useState('');\r\n const [selectedItems, setSelectedItems] = useState([]);\r\n const columns = useMemo(() => buildColumns({ i18n }), [i18n]);\r\n const gridSelectionRef = useRef(new Selection({\r\n onSelectionChanged: () => {\r\n const itemsInCurrentPage = gridSelectionRef.current.getItems();\r\n if (itemsInCurrentPage[0]) {\r\n const selection = gridSelectionRef.current.getSelection();\r\n setSelectedItems((v) => {\r\n const map = itemsInCurrentPage.reduce((acc, item) => {\r\n acc[item.Id] = true;\r\n return acc;\r\n }, {});\r\n const itemsInOtherPage = v.filter(item => !map[item.Id]);\r\n return [...itemsInOtherPage, ...selection];\r\n });\r\n }\r\n },\r\n }));\r\n\r\n const { aid, cid, uid } = scope.values;\r\n const AlertCenter = useMemo(() => new AlertHelper({ i18n }), [i18n]);\r\n\r\n const [showManuallyAddBrandDialog, setShowManuallyAddBrandDialog] = useState(false);\r\n\r\n const saveBrandToResultList = useCallback((brand) => {\r\n activity.trace(`${logScope}|AddBrandPanel|manually add brand: ${JSON.stringify(brand)}`);\r\n setSelectedItems([...selectedItems, brand]);\r\n }, [activity, logScope, selectedItems]);\r\n\r\n const setToEmptyResult = useCallback(() => {\r\n setItems([]);\r\n setTotal(0);\r\n }, []);\r\n\r\n const fetch = useCallback((params) => {\r\n const { query: _query, pageNumber: _pageNumber } = params;\r\n if (_.isEmpty(_query)) {\r\n setToEmptyResult();\r\n return;\r\n }\r\n const childPerfMarker = perfMarker.createChild('Simplified_SearchBrand');\r\n childPerfMarker.willInit();\r\n activity.trace(`${logScope}|BrandSelector|search brand request data: ${JSON.stringify(params)}`);\r\n setItems(null);\r\n $.ajax({\r\n url: `${getBmcMtEndpoint()}/api/v1/manufacturers/${cid}/brands/term-search-v2?cid=${cid}&aid=${aid}&uid=${uid}`,\r\n type: 'POST',\r\n xhrFields: {\r\n withCredentials: true,\r\n },\r\n data: `BrandNameTerm=${encodeURIComponent(_query)}&Page=${_pageNumber}&PageSize=${pageSize}`,\r\n success: (res) => {\r\n childPerfMarker.done();\r\n if (!hasError(res)) {\r\n AlertCenter.dismissAlert();\r\n const brandItems = _.map(_.result(res.ResponseObject, 'Brands', []), brand => ({ ...brand, Id: `${brand.BrandName}${brand.BrandUrl}` }));\r\n activity.trace(`${logScope}|BrandSelector|search brand request succeed: ${JSON.stringify(_.map(brandItems, brand => `${brand.BrandName}(${brand.BrandUrl})}`))}`);\r\n setItems(brandItems);\r\n setTotal(_.get(res.ResponseObject, 'Total', 0));\r\n brandItems.forEach((item, index) => {\r\n if (selectedItems.find(i => i.Id === item.Id)) {\r\n gridSelectionRef.current.setIndexSelected(index, true);\r\n }\r\n });\r\n return;\r\n }\r\n activity.error(`${logScope}|BrandSelector|search brand failed: ${res.Messages}`);\r\n AlertCenter.showAlert(res.Messages);\r\n setToEmptyResult();\r\n },\r\n error: (err) => {\r\n childPerfMarker.done();\r\n activity.error(`${logScope}|BrandSelector|search brand request failed: ${JSON.stringify(err)}`);\r\n AlertCenter.showAlert(_.get(err, ['responseJSON', 'Message']));\r\n setToEmptyResult();\r\n },\r\n });\r\n }, [perfMarker, activity, logScope, cid, aid, uid, setToEmptyResult, AlertCenter, selectedItems]);\r\n\r\n const removeAllSelection = useCallback(() => {\r\n setSelectedItems([]);\r\n for (let i = 0; i < (items && items.length) || 0; i += 1) {\r\n gridSelectionRef.current.setIndexSelected(i, false);\r\n }\r\n }, [items]);\r\n\r\n const removeItem = useCallback((item) => {\r\n setSelectedItems(v => v.filter(i => i.Id !== item.Id));\r\n const index = items.findIndex(i => i.Id === item.Id);\r\n gridSelectionRef.current.setIndexSelected(index, false);\r\n }, [items]);\r\n\r\n useEffect(() => {\r\n onChange(selectedItems);\r\n }, [onChange, selectedItems]);\r\n\r\n return (\r\n \r\n {\r\n setPageNumber(1);\r\n setQuery(value);\r\n fetch({ query: value, pageNumber: 1 });\r\n }}\r\n />\r\n setShowManuallyAddBrandDialog(true)} className=\"manually-add-btn\">\r\n {i18n.getString(_TL_('Manually Add Brand'))}\r\n \r\n {\r\n setPageNumber(page);\r\n fetch({ query, pageNumber: page });\r\n },\r\n }}\r\n />\r\n
\r\n );\r\n};\r\n\r\nBrandSelector.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n BrandSelector: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n aid: PropTypes.string.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n uid: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n activity: PropTypes.shape({\r\n trace: PropTypes.func.isRequired,\r\n error: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logScope: PropTypes.string.isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n brandsList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState, useCallback, useMemo } from 'react';\r\nimport {\r\n Panel,\r\n PanelType,\r\n PrimaryButton,\r\n DefaultButton,\r\n} from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getBmcMtEndpoint, hasError } from '@bingads-webui-campaign/cpg-product-feed-grid';\r\nimport { Loading } from '@bingads-webui-campaign-react/loading';\r\nimport { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\nimport { HelpIcon } from '@bingads-webui-campaign-react/help';\r\n\r\nimport { BrandSelector } from './brand-selector';\r\nimport { getAddBrandPanelV2Styles } from '../../style';\r\n\r\nconst text = {\r\n add: _TL_('Add'),\r\n cancel: _TL_('Cancel'),\r\n};\r\n\r\nconst overlayProps = {\r\n styles: {\r\n root: {\r\n top: 60,\r\n },\r\n },\r\n};\r\n\r\nconst AddBrandPanelUnstyled = (props) => {\r\n const {\r\n isOpen,\r\n classes,\r\n onClose,\r\n i18n,\r\n scope,\r\n brandGrid,\r\n activity,\r\n logScope,\r\n setRefreshDataTile,\r\n perfMarker,\r\n brandsList,\r\n } = props;\r\n\r\n const { aid, cid, uid } = scope.values;\r\n const [selectedBrands, setSelectedBrands] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const AlertCenter = useMemo(() => new AlertHelper({ i18n }), [i18n]);\r\n\r\n const addBrands = useCallback(() => {\r\n setLoading(true);\r\n const childPerfMarker = perfMarker.createChild('Simplified_BatchAddBrand');\r\n childPerfMarker.willInit();\r\n const brandsData = _.map(\r\n selectedBrands,\r\n (brand, index) => `BrandsBatch[${index}][BrandName]=${encodeURIComponent(brand.BrandName)}&BrandsBatch[${index}][BrandUrl]=${encodeURIComponent(brand.BrandUrl)}`\r\n ).join('&');\r\n\r\n activity.trace(`${logScope}|AddBrandPanel|save brand request data: ${JSON.stringify(selectedBrands)}`);\r\n\r\n $.ajax({\r\n url: `${getBmcMtEndpoint()}/api/v1/manufacturers/${cid}/brands/batch?cid=${cid}&aid=${aid}&uid=${uid}`,\r\n type: 'POST',\r\n data: brandsData,\r\n xhrFields: {\r\n withCredentials: true,\r\n },\r\n success: (res) => {\r\n childPerfMarker.done();\r\n if (!hasError(res)) {\r\n const searchAddedBrand = _.filter(selectedBrands, brand => brand.MmcBrandId);\r\n activity.trace(`${logScope}|AddBrandPanel|save brand Succeed|SearchAddedBrandLength: ${searchAddedBrand.length}|ManuallyAddedBrandLength: ${selectedBrands.length - searchAddedBrand.length}`);\r\n AlertCenter.dismissAlert();\r\n setSelectedBrands([]);\r\n onClose(true);\r\n if (brandGrid) {\r\n brandGrid.fetchGridData = true;\r\n brandGrid.grid.gridView.refresh(true);\r\n setRefreshDataTile(true);\r\n }\r\n } else {\r\n activity.error(`${logScope}|AddBrandPanel|save brand error: ${res.Messages}`);\r\n AlertCenter.showAlert(res.Messages);\r\n }\r\n setLoading(false);\r\n },\r\n error: (err) => {\r\n childPerfMarker.done();\r\n setLoading(false);\r\n activity.error(`${logScope}|AddBrandPanel|save brand request error: ${JSON.stringify(err)}`);\r\n AlertCenter.showAlert(_.get(err, ['responseJSON', 'Message']));\r\n },\r\n });\r\n }, [selectedBrands, aid, cid, uid, onClose, brandGrid, AlertCenter, activity, logScope, setRefreshDataTile, perfMarker]);\r\n\r\n const onBrandSelectedChange = useCallback((brands) => {\r\n setSelectedBrands(brands);\r\n }, [setSelectedBrands]);\r\n\r\n const cancelAddBrands = useCallback(() => {\r\n setSelectedBrands([]);\r\n onClose();\r\n }, [onClose]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('{{count}} brands'), { count: selectedItems.length })}\r\n {selectedItems && selectedItems.length > 0 && removeAllSelection()}>Remove all}\r\n
\r\n\r\n {!_.isEmpty(selectedItems) && selectedItems.map((item, index) => (\r\n removeItem(item)}\r\n />\r\n ))}\r\n
\r\n \r\n {i18n.getString(_TL_('Add your brands'))}\r\n
\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('All brands added here is applied at a manager account level and can have implications on all your campaigns.'))}\r\n
\r\n \r\n
\r\n \r\n \r\n {i18n.getString(text.add)}\r\n \r\n \r\n {i18n.getString(text.cancel)}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nAddBrandPanelUnstyled.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n classes: PropTypes.shape({\r\n panel: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n content: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n searchBrandsContainer: PropTypes.string.isRequired,\r\n brands: PropTypes.string.isRequired,\r\n results: PropTypes.string.isRequired,\r\n searchBoxContainer: PropTypes.string.isRequired,\r\n searchButton: PropTypes.string.isRequired,\r\n searchBox: PropTypes.string.isRequired,\r\n count: PropTypes.string.isRequired,\r\n selectedBrandName: PropTypes.string.isRequired,\r\n bottomBar: PropTypes.string.isRequired,\r\n saveButton: PropTypes.string.isRequired,\r\n subtitle: PropTypes.string.isRequired,\r\n alertInfo: PropTypes.string.isRequired,\r\n }).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n aid: PropTypes.string.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n uid: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n brandGrid: PropTypes.shape({\r\n fetchGridData: PropTypes.bool.isRequired,\r\n grid: PropTypes.shape({\r\n gridView: PropTypes.shape({\r\n refresh: PropTypes.func.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n }),\r\n activity: PropTypes.shape({\r\n trace: PropTypes.func.isRequired,\r\n error: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logScope: PropTypes.string.isRequired,\r\n setRefreshDataTile: PropTypes.func.isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n brandsList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n\r\nAddBrandPanelUnstyled.defaultProps = {\r\n brandGrid: undefined,\r\n};\r\n\r\nexport const AddBrandPanelV2 = withDefaultStyles(AddBrandPanelUnstyled, getAddBrandPanelV2Styles);\r\n","import $ from 'jquery';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React, { useEffect, useMemo, useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { SharedTile } from '@bingads-webui-campaign-react/shared-tile';\r\nimport { getBmcMtEndpoint, hasError } from '@bingads-webui-campaign/cpg-product-feed-grid';\r\nimport { Loading } from '@bingads-webui-campaign-react/loading';\r\nimport { getRouterDep } from '@bingads-webui-campaign-react/legacy-router-dep';\r\n\r\nimport { getDataTileStyles } from '../style';\r\n\r\n\r\nconst DataTileUnstyled = (props) => {\r\n const {\r\n classes,\r\n i18n,\r\n scope,\r\n shouldRefresh,\r\n setShouldRefresh,\r\n activity,\r\n logScope,\r\n brandsList,\r\n permissions,\r\n } = props;\r\n\r\n const { MranSimplificationV2 } = permissions.dynamic;\r\n\r\n const { aid, cid, uid } = scope.values;\r\n const [loading, setLoading] = useState(false);\r\n const [summaryData, setSummaryData] = useState({\r\n brandsSubmitted: 0,\r\n productsMatchedByBrands: 0,\r\n reportDownloadLink: '',\r\n });\r\n\r\n const navigateTo = useCallback((routeName, params) => {\r\n activity.trace(`${logScope}|NewSummaryPage|navigate to: campaign_create_objective`);\r\n getRouterDep(scope).navigateToRoute(routeName, params);\r\n }, [scope, activity, logScope]);\r\n\r\n const showTips = useMemo(() => _.findIndex(brandsList, brand => brand.MatchedProductCount === null) !== -1, [brandsList]);\r\n\r\n const footerTips = useMemo(() => {\r\n const tips = i18n.getString(MranSimplificationV2 ? _TL_('Product matching can take up to 10 hours.') : _TL_('We’re still processing your brands. This may take up to 24 hours.'));\r\n return (\r\n \r\n \r\n
\r\n );\r\n }, [i18n, MranSimplificationV2, classes]);\r\n\r\n const tileConfig = useMemo(() => ({\r\n tileClassName: classes.dataTileContainer,\r\n header: {\r\n isRequired: true,\r\n renderHeaderText: () => { i18n.getString(_TL_('Matched products')) },\r\n i18n,\r\n },\r\n content: {\r\n styles: {\r\n root: {\r\n width: '606px',\r\n height: '330px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n },\r\n },\r\n footer: {\r\n isRequired: true,\r\n buttons: [{\r\n text: i18n.getString(_TL_('Download report')),\r\n disabled: _.isEmpty(summaryData.reportDownloadLink),\r\n callback: () => {\r\n activity.trace(`${logScope}|NewSummaryPage|download report: ${summaryData.reportDownloadLink}`);\r\n window.open(summaryData.reportDownloadLink);\r\n },\r\n },\r\n {\r\n text: i18n.getString(_TL_('Create shopping for brands campaign')),\r\n callback: () => navigateTo('campaign_create_objective', { selected_item: 'SponsoredShoppingCampaign' }),\r\n }],\r\n footerTips: showTips ? footerTips : null,\r\n },\r\n }), [i18n, classes, summaryData, navigateTo, activity, logScope, footerTips, showTips]);\r\n\r\n const fetchSummaryData = useCallback(() => {\r\n setLoading(true);\r\n $.ajax({\r\n url: `${getBmcMtEndpoint()}/api/v1/manufacturers/${cid}/summary?cid=${cid}&aid=${aid}&uid=${uid}`,\r\n type: 'GET',\r\n xhrFields: {\r\n withCredentials: true,\r\n },\r\n success: (obj) => {\r\n if (!hasError(obj)) {\r\n setSummaryData(obj.ResponseObject);\r\n }\r\n setLoading(false);\r\n },\r\n error: () => {\r\n setLoading(false);\r\n },\r\n });\r\n }, [cid, aid, uid]);\r\n\r\n useEffect(() => {\r\n if (shouldRefresh) {\r\n fetchSummaryData();\r\n setShouldRefresh(false);\r\n }\r\n }, [fetchSummaryData, shouldRefresh, setShouldRefresh]);\r\n\r\n return (\r\n \r\n {tips}\r\n
\r\n \r\n {loading && \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nDataTileUnstyled.propTypes = {\r\n classes: PropTypes.shape({\r\n dataTileContainer: PropTypes.string.isRequired,\r\n dataWrapper: PropTypes.string.isRequired,\r\n dataItem: PropTypes.string.isRequired,\r\n dataCount: PropTypes.string.isRequired,\r\n dataDesc: PropTypes.string.isRequired,\r\n tileHeader: PropTypes.string.isRequired,\r\n alertInfo: PropTypes.string.isRequired,\r\n showTips: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n aid: PropTypes.string.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n uid: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n shouldRefresh: PropTypes.bool.isRequired,\r\n setShouldRefresh: PropTypes.func.isRequired,\r\n activity: PropTypes.shape({\r\n trace: PropTypes.func.isRequired,\r\n }).isRequired,\r\n logScope: PropTypes.string.isRequired,\r\n brandsList: PropTypes.arrayOf(PropTypes.shape({\r\n MatchedProductCount: PropTypes.number,\r\n })).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n MranSimplificationV2: PropTypes.bool,\r\n }).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const DataTile = withDefaultStyles(DataTileUnstyled, getDataTileStyles);\r\n","import React, { useCallback, useEffect, useMemo, useState, Fragment, useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { PrimaryButton } from '@fluentui/react';\r\nimport { perfMarkerPropTypes } from '@bingads-webui/performance-marker';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { createBrandsGridForUiNext } from '@bingads-webui-campaign-react/brand-page';\r\nimport { ProgressiveLoadingBlock } from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport { withGlobalFilter } from '@bingads-webui-campaign-react/global-filter-context';\r\nimport { StyledGridViewWrapper } from '@bingads-webui-campaign-react/grid-view-wrapper';\r\nimport { StyledTablePageContainer } from '@bingads-webui-campaign-react/table-page-container';\r\nimport { withTablePageStateManager } from '@bingads-webui-campaign-react/table-page-state-manager';\r\nimport { withCurrentExpandedScope } from '@bingads-webui-campaign-react/use-current-scope-entity';\r\nimport { Activity, Scenario, ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { getToolbarConfig } from './toolbar-config';\r\nimport { AddBrandPanel } from './add-brand-panel';\r\nimport { AddBrandPanelV2 } from './add-brand-panel-v2';\r\nimport { DataTile } from './data-tile';\r\n\r\nimport { getOverviewStyles } from '../style';\r\nimport placeholderImage from '../../media/placeholder.svg';\r\n\r\nconst StyledGridViewWrapperWithFilterContext = withGlobalFilter(StyledGridViewWrapper);\r\n\r\nconst logScope = 'SimplifiedShoppingForBrands';\r\n\r\nconst NewSummaryPage = (props) => {\r\n const {\r\n classes,\r\n i18n,\r\n serverContext,\r\n scope,\r\n preferenceService,\r\n permissions,\r\n crossPageSelectPlugin,\r\n toolbarPlugin,\r\n onGridInjected,\r\n showTopOfGridPanel,\r\n currentCampaign,\r\n currentAdGroup,\r\n siteMap,\r\n perfMarker,\r\n changeLayout,\r\n renderToolbarContainer,\r\n } = props;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const [gridViewConfig, setGridViewConfig] = useState({\r\n GRID_EVENT_NAMES: {},\r\n gridView: null,\r\n brandGrid: {\r\n rendered: false,\r\n fetchGridData: false,\r\n },\r\n backboneGridView: null,\r\n });\r\n const [productFeedGrid, setProductFeedGrid] = useState(null);\r\n const [brandsList, setBrandsList] = useState([]);\r\n const [isAddBrandPanelOpen, setIsAddBrandPanelOpen] = useState(false);\r\n const [refreshDataTile, setRefreshDataTile] = useState(true);\r\n const isAllBrandsVerified = useMemo(() => _.every(brandsList, brand => brand.Status === 1), [brandsList]);\r\n\r\n const { MranSimplificationV2 } = permissions.dynamic;\r\n\r\n const setLayout = useCallback(() => {\r\n changeLayout({\r\n tab: {\r\n mode: 'collapsed',\r\n showDatePicker: false,\r\n disableCompare: true,\r\n },\r\n }, true, true);\r\n }, [changeLayout]);\r\n\r\n const showAddBrandPanel = useCallback(() => {\r\n activity.trace(`${logScope}|NewSummaryPage|open add brand panel`);\r\n setIsAddBrandPanelOpen(true);\r\n }, [activity, setIsAddBrandPanelOpen]);\r\n\r\n const fetchDataCallback = useCallback((brands) => {\r\n activity.trace(`${logScope}|NewSummaryPage|brands length: ${_.size(brands)}`);\r\n setBrandsList(brands);\r\n }, [setBrandsList, activity]);\r\n\r\n useEffect(() => {\r\n if (gridViewConfig.gridView) {\r\n gridViewConfig.gridView.on(gridViewConfig.GRID_EVENT_NAMES.SHOW_ADD_BRAND_PANEL, showAddBrandPanel);\r\n gridViewConfig.gridView.on(gridViewConfig.GRID_EVENT_NAMES.DATA_REFRESHED, setRefreshDataTile);\r\n }\r\n return () => {\r\n if (gridViewConfig.gridView) {\r\n gridViewConfig.gridView.off(gridViewConfig.GRID_EVENT_NAMES.SHOW_ADD_BRAND_PANEL, showAddBrandPanel);\r\n gridViewConfig.gridView.off(gridViewConfig.GRID_EVENT_NAMES.DATA_REFRESHED, setRefreshDataTile);\r\n }\r\n };\r\n }, [gridViewConfig, showAddBrandPanel]);\r\n\r\n useEffect(() => {\r\n activity.trace(`${logScope}|NewSummaryPage|loaded`);\r\n setLayout();\r\n }, [activity, setLayout]);\r\n\r\n useEffect(() => {\r\n const brandsGridPromise = createBrandsGridForUiNext({\r\n crossPageSelectPlugin,\r\n serverContext,\r\n scope,\r\n preferenceService,\r\n permissions,\r\n toolbarPlugin,\r\n currentCampaign,\r\n currentAdGroup,\r\n siteMap,\r\n perfMarker,\r\n fetchDataCallback,\r\n hideSubBrand: true,\r\n });\r\n const BrandsGridView = React.lazy(() => { // eslint-disable-line arrow-body-style\r\n return brandsGridPromise.then(({ gridView }) => {\r\n gridView.overrideWith = showTopOfGridPanel; // eslint-disable-line no-param-reassign\r\n onGridInjected({\r\n backboneGridView: gridView,\r\n deselectAll: gridView.grid.gridView.deselectAll.bind(gridView.grid.gridView),\r\n });\r\n setGridViewConfig({\r\n GRID_EVENT_NAMES: gridView.EVENT_NAMES,\r\n gridView: gridView.grid.gridView,\r\n brandGrid: gridView,\r\n backboneGridView: gridView,\r\n });\r\n\r\n return {\r\n default: () => (\r\n
\r\n { summaryData.brandsSubmitted }
\r\n { i18n.getString(_TL_('Brands submitted')) }
\r\n \r\n
\r\n { summaryData.productsMatchedByBrands }
\r\n { i18n.getString(_TL_('Products matched')) }
\r\n \r\n
\r\n ), [classes, i18n, isAllBrandsVerified, brandsList, MranSimplificationV2, showAddBrandPanel, scope, refreshDataTile, activity, permissions]);\r\n\r\n return (\r\n \r\n { i18n.getString(_TL_('Boost product sales by partnering with retailers to cooperatively bid on shopping campaigns.')) }\r\n
\r\n {!isAllBrandsVerified || _.size(brandsList) === 0 ?\r\n \r\n 
\r\n
\r\n :\r\n \r\n { !isAllBrandsVerified ?\r\n i18n.getString(MranSimplificationV2 ? _TL_('Product matching can take up to 10 hours.') : _TL_('We’re still processing your brands. This may take up to 24 hours.')) :\r\n i18n.getString(_TL_('Start matching with product catalogs by adding brands.'))\r\n }\r\n
\r\n {_.size(brandsList) <= 0 &&\r\n
\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nValueAndInterval.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n TimeGranularity: PropTypes.string,\r\n onIntervalChanged: PropTypes.func.isRequired,\r\n timeOptions: PropTypes.shape({}).isRequired,\r\n validationProps: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nValueAndInterval.defaultProps = {\r\n TimeGranularity: '',\r\n};\r\n\r\nconst ValidatedValueAndInterval = withError(ValueAndInterval);\r\n\r\nconst FrequencyCapping = (props) => {\r\n const {\r\n i18n: newI18n,\r\n legacyI18n,\r\n validationProps,\r\n updateValidation,\r\n } = props;\r\n\r\n const i18n = useMemo(() => mergeI18n(legacyI18n, newI18n), [legacyI18n, newI18n]);\r\n const activity = useContext(ActivityContext);\r\n const { FrequencyCapSettings } = validationProps;\r\n const { CapValue = null, TimeGranularity } = FrequencyCapSettings[0] || {};\r\n const [errorMessage, setErrorMessage] = useState([]);\r\n\r\n const onIntervalChanged = useCallback((e, value) => {\r\n updateValidation(errorMessage, {\r\n FrequencyCapSettings: [{\r\n CapValue,\r\n TimeGranularity: value.key,\r\n FrequencyCapUnit,\r\n }],\r\n });\r\n\r\n if (activity) {\r\n activity.signal(`onFrequencyIntervalChanged - ${JSON.stringify(value)})}`);\r\n }\r\n }, [updateValidation, errorMessage, CapValue, activity]);\r\n\r\n const timeOptions = useMemo(() => getKeyStringMap(i18n), [i18n]);\r\n\r\n const onToggle = useCallback((e, checked) => {\r\n if (checked) {\r\n updateValidation([], {\r\n FrequencyCapSettings: [{\r\n CapValue: undefined,\r\n TimeGranularity: TimeGranularity || FrequencyIntervals.Hour,\r\n FrequencyCapUnit,\r\n }],\r\n });\r\n } else {\r\n updateValidation([], { FrequencyCapSettings: [{}] });\r\n }\r\n\r\n if (activity) {\r\n activity.signal(`onFrequencyCapToggleChanged - toggleStatus: ${checked}`);\r\n }\r\n }, [TimeGranularity, activity, updateValidation]);\r\n\r\n const onCountValidate = useCallback((result) => {\r\n const { messages = [], data: { capValue } } = result;\r\n if (!_.isEqual(messages, errorMessage) || capValue !== CapValue) {\r\n setErrorMessage(messages);\r\n\r\n updateValidation(messages, {\r\n FrequencyCapSettings: [{\r\n CapValue: capValue,\r\n TimeGranularity,\r\n FrequencyCapUnit,\r\n }],\r\n });\r\n }\r\n }, [errorMessage, CapValue, updateValidation, TimeGranularity]);\r\n\r\n const customErrors = {\r\n decimalLength: i18n.getString(_TL_('Field requires integer value')),\r\n };\r\n\r\n const errorProcessor = errors => _.map(\r\n errors,\r\n (oldError, key) => customErrors[key] || oldError\r\n );\r\n\r\n return (\r\n \r\n {gridView &&\r\n
\r\n );\r\n};\r\n\r\nGridViewWrapper.propTypes = {\r\n classes: PropTypes.shape(mapObject(\r\n omit(getStyles({}, {}), '@global'),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n gridView: PropTypes.shape({\r\n render: PropTypes.func,\r\n }),\r\n children: PropTypes.node,\r\n gridClassName: PropTypes.string,\r\n gridEventHandlers: PropTypes.shape({\r\n once: PropTypes.objectOf(PropTypes.func),\r\n on: PropTypes.objectOf(PropTypes.func),\r\n }),\r\n getReferenceToGridView: PropTypes.func,\r\n removeGridOnUmount: PropTypes.bool,\r\n};\r\n\r\nGridViewWrapper.defaultProps = {\r\n gridEventHandlers: {\r\n once: {},\r\n on: {},\r\n },\r\n getReferenceToGridView: null,\r\n removeGridOnUmount: false,\r\n gridView: null,\r\n children: null,\r\n gridClassName: 'bingadsgrid',\r\n};\r\n\r\nexport const StyledGridViewWrapper = withDefaultStyles(memo(GridViewWrapper), getStyles);\r\n","import { gridPopUpEditorStyle, deleteColumnModalStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { merge } from '@bingads-webui/primitive-utilities';\r\nimport getTableStyles from './table';\r\nimport getColGroupStyles from './col-group';\r\nimport getSubComponentStyles from './sub-component';\r\nimport getGlobalStyles from './global';\r\nimport { gridPaddingLeft } from './variables';\r\n\r\nexport const getStyles = (components, { palette = {} }) =>\r\n ({\r\n grid: {\r\n fontFamily: 'Segoe UI',\r\n '& .bingadsgrid': {\r\n paddingLeft: gridPaddingLeft,\r\n },\r\n '& .table-container': {\r\n '& colgroup.column-group': getColGroupStyles(components, { palette }),\r\n '& table.table': getTableStyles(components, { palette }),\r\n '&': getSubComponentStyles(components, { palette }),\r\n },\r\n },\r\n '@global': merge(\r\n {},\r\n getGlobalStyles(components, { palette }),\r\n gridPopUpEditorStyle({ palette }),\r\n deleteColumnModalStyle()\r\n ),\r\n });\r\n","import { getSharedColGroupStyles } from './shared';\r\n\r\nexport default () => ({\r\n '& col': {\r\n ...getSharedColGroupStyles(),\r\n\r\n '&.col-Budget': {\r\n width: 180,\r\n minWidth: 120,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Status, &.col-CampaignStatus, &.col-UiDisplayStatus, &.col-PerformanceTargetStatus': {\r\n width: 60,\r\n minWidth: 60,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-CampaignId, &.col-AdGroupId': {\r\n width: 180,\r\n minWidth: 120,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-AdID': {\r\n width: 240,\r\n minWidth: 120,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Bid': {\r\n minWidth: 100,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-StartDate, &.col-EndDate': {\r\n width: 120,\r\n minWidth: 100,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-SearchBid, &.col-Medium, &.col-AccountInactiveReasons, &.col-AccountNumber, &.col-CTR, &.col-Clicks, &.col-Conversions, &.col-Currency, &.col-Spend, &.col-CPA, &.col-ImpShareLostToBudget, &.col-ImpShareLostToRank, &.col-ImpShareLostToAdRelevance, &.col-ImpShareLostToExpectedCTR, &.col-ImpShareLostToBid, &.col-PhoneCost, &.col-ClickCalls, &.col-PhoneImpressions, &.col-PhoneThroughRate, &.col-AverageCPP, &.col-OverallEndDate, &.col-TotalEffectiveCost, &.col-TotalRemainingIOBudget, &.performance-metrics, &.phone-performance-metrics': {\r\n width: 120,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n // for German text\r\n '&.col-Impressions': {\r\n width: 130,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n // for German text\r\n '&.col-RevenueOnAdSpend, &.col-AllConversionRate': {\r\n width: 140,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-ConversionRate, &.performance-metrics.col-AdvertiserReportedRevenue, &.performance-metrics.col-ConversionRate, &.performance-metrics.col-PhoneCost, &.phone-performance-metrics.col-PhoneCost, &.phone-performance-metrics.col-ClickAndPhoneSpend': {\r\n width: 120,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-AdvertiserReportedRevenue, &.col-ImpShare, &.col-ManualCalls, &.col-AverageCPM, &.col-AverageCPC, &.col-AveragePosition, &.col-CampaignType, &.performance-metrics.col-ConversionRate, &.phone-performance-metrics.col-ConversionRate': {\r\n width: 120,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n // Portuguese text is lont in table header\r\n '&.performance-metrics.col-ExactMatchImpressionSharePercent, &.performance-metrics.col-ClickSharePercent, &.performance-metrics.col-TopImpressionSharePercent': {\r\n width: 140,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.performance-metrics.col-RevenueOnAdSpend, &.phone-performance-metrics.col-RevenueOnAdSpend': {\r\n width: 140,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n // German text is long in table header\r\n '&.performance-metrics.col-PhoneImpressions, &.phone-performance-metrics.col-PhoneImpressions': {\r\n width: 170,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Labels, &.col-Locations, &.col-DeliveryStatus, &.col-Delivery, &.col-ContentBid, &.col-CallForwarding, &.col-QualityScore, &.col-DailyBudget, &.col-MonthlyBudget, &.col-IOBudget, &.col-BillToCustomerName, &.col-CompanyName, &.col-IOPurchaseOrder, &.col-RemainingIOBudget, &.col-FinalUrlSuffix, &.col-AdSchedule, &.col-Demographic, &.col-BidAdj, &.col-CampaignName, &.col-AdGroupName, &.col-Locations, &.col-DayTime, ': {\r\n width: 180,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-AccountName, &.col-DevicePreference, &.col-FirstPageBidEstimation': {\r\n width: 180,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-BestPositionBidEstimation': {\r\n width: 180,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-DisplayBiddingStrategyType, &.col-BidStrategyType, &.col-Language, &.col-Languages, &.col-AdType, &.col-KeywordId': {\r\n width: 240,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-AudienceName, &.col-Keyword, &.col-Name, &.col-AdGroup, &.col-Campaign, &.col-SearchTerm, &.col-LandingPage, &.col-CustomParameters': {\r\n width: 300,\r\n minWidth: 100,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-AdPreview': {\r\n width: 360,\r\n minWidth: 260,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Changes': {\r\n width: 380,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-TrackingTemplate': {\r\n width: 420,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-DateTimeUser': {\r\n width: 220,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Tool': {\r\n width: 150,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Undo': {\r\n width: 150,\r\n minWidth: 80,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Location': {\r\n width: 240,\r\n minWidth: 140,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Industry, &.col-JobFunction': {\r\n width: 300,\r\n minWidth: 120,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-Company': {\r\n width: 300,\r\n minWidth: 200,\r\n maxWidth: 800,\r\n },\r\n\r\n '&.col-DeviceName': {\r\n minWidth: 120,\r\n maxWidth: 800,\r\n },\r\n },\r\n});\r\n","export default () => ({\r\n '& tr': {\r\n '& .grid-edit-icon': {\r\n fontSize: '14px',\r\n lineHeight: '16px',\r\n color: '#005A9E', // @shade20: #005a9e;\r\n visibility: 'visible',\r\n position: 'static',\r\n opacity: 0,\r\n\r\n '&:hover': {\r\n cursor: 'pointer',\r\n },\r\n '&:focus': {\r\n visibility: 'visible',\r\n opacity: 100,\r\n },\r\n },\r\n\r\n '&:hover .grid-edit-icon': {\r\n visibility: 'visible',\r\n opacity: 100,\r\n },\r\n\r\n '&:hover .grid-column-Status .statuschangehover': {\r\n '&:before': {\r\n display: 'inline-block',\r\n },\r\n '&:hover': {\r\n cursor: 'pointer',\r\n },\r\n },\r\n '& .grid-column-Status .statuschangehover:before': {\r\n display: 'none',\r\n },\r\n },\r\n});\r\n","var pug = require(\"!../../../../node_modules/.pnpm/pug@2.0.4/node_modules/pug-runtime/index.js\");\n\nfunction template(locals) {var pug_html = \"\", pug_mixins = {}, pug_interp;;var locals_for_with = (locals || {});(function (model, view) {var i18n = view.i18n\nvar appState = view.appState\nvar customerId = appState.get('customer_id')\nvar accountId = appState.get('account_id')\nif (!model.isLoading) {\npug_html = pug_html + \"\\u003Cdiv class=\\\"experiment-budget-alert\\\"\\u003E\\u003Cdiv class=\\\"alert alert-info form-group page-alert\\\"\\u003E\\u003Cdiv class=\\\"alert-image\\\"\\u003E\\u003C\\u002Fdiv\\u003E\\u003Cdiv class=\\\"alert-info-inline\\\" style=\\\"overflow: hidden; text-overflow: ellipsis;\\\"\\u003E\";\nvar baseCampaign = model.baseCampaign\nif (baseCampaign) {\npug_html = pug_html + ((pug.escape(null == (pug_interp = i18n.getString('Experiment_BudgetReadonlyAlert').split('{{name}}')[0]) ? \"\" : pug_interp)) + \"\\u003Ca class=\\\"base-campaign-settings-link\\\" href=\\\"javascript:void(0);\\\"\\u003E\" + (pug.escape(null == (pug_interp = baseCampaign.Name) ? \"\" : pug_interp)) + \"\\u003C\\u002Fa\\u003E\" + (pug.escape(null == (pug_interp = i18n.getString('Experiment_BudgetReadonlyAlert').split('{{name}}')[1]) ? \"\" : pug_interp)));\n}\nelse\nif (model.campaignId) {\npug_html = pug_html + (pug.escape(null == (pug_interp = i18n.getString('Experiment_BudgetAlert_BaseCampaign1')) ? \"\" : pug_interp)) + (pug.escape(null == (pug_interp = ' ') ? \"\" : pug_interp)) + \"\\u003Ca class=\\\"all-experiments-link\\\" href=\\\"javascript:void(0);\\\"\\u003E\" + (pug.escape(null == (pug_interp = i18n.getString('Experiment_BudgetAlert_BaseCampaign2')) ? \"\" : pug_interp)) + \"\\u003C\\u002Fa\\u003E\";\n}\npug_html = pug_html + \"\\u003C\\u002Fdiv\\u003E\\u003C\\u002Fdiv\\u003E\\u003C\\u002Fdiv\\u003E\";\n}}.call(this,\"model\" in locals_for_with?locals_for_with.model:typeof model!==\"undefined\"?model:undefined,\"view\" in locals_for_with?locals_for_with.view:typeof view!==\"undefined\"?view:undefined));;return pug_html;};\nmodule.exports = template;","// / The whole file is basically copied from typescript repo.\r\n\r\nexport function fail(message?: string) {\r\n const isProduction = true;\r\n if (isProduction) return;\r\n failInDebug(message);\r\n}\r\n\r\nexport function failInDebug(message?: string): never {\r\n // eslint-disable-next-line no-debugger\r\n debugger;\r\n const e = new Error(message ? `Debug Failure. ${message}` : \"Debug Failure.\");\r\n throw e;\r\n}\r\n\r\n\r\nexport function assert(expression: unknown, message?: string, verboseDebugInfo?: string | (() => string)): asserts expression {\r\n if (!expression) {\r\n // eslint-disable-next-line no-param-reassign\r\n message = message ? `False expression: ${message}` : \"False expression.\";\r\n if (verboseDebugInfo) {\r\n // eslint-disable-next-line no-param-reassign\r\n message += `\\r\\nVerbose Debug Information: ${typeof verboseDebugInfo === \"string\" ? verboseDebugInfo : verboseDebugInfo()}`;\r\n }\r\n fail(message);\r\n }\r\n}\r\n\r\nexport function assertEqual\r\n
\r\n }\r\n {children}\r\n