\r\n 
\r\n
\r\n 
\r\n \r\n ))}\r\n \r\n \r\n {i18n.getString(STATUS_STRING[asset.EditorialStatus])}\r\n
\r\n );\r\n}\r\n","import { PaginationConfigProps } from './types';\r\n\r\nexport function getPageAssets(assets: any[], paginationConfig: PaginationConfigProps, assetsPerPage: number) {\r\n return assets.slice((paginationConfig.current - 1) * assetsPerPage, paginationConfig.current * assetsPerPage);\r\n}\r\n","export const DESCRIPTION_STRING = {\r\n Best: _TL_('The asset has the highest-rated performance. We recommend you keep using it. You may want to add similar assets.'),\r\n Good: _TL_('The asset is performing well. We recommend you keep using it. You may want to add similar assets to continue improving ad performance.'),\r\n Low: _TL_('The asset has the lowest-rated performance. We recommend you replace it to improve ad performance.'),\r\n Unrated: _TL_('We don\\'t have any performance rating for this asset. This can be due to the asset being inactive, not having enough information to determine its performance, or if there aren\\'t enough similar assets to compare against it.'),\r\n Learning: _TL_('The asset\\'s performance is being actively evaluated. Once the evaluation is complete, the asset rating will be Low, Good, Best, or Unrated'),\r\n};\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nconst row = {\r\n display: 'flex',\r\n flow: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n height: '24px',\r\n marginBottom: '5px',\r\n};\r\n\r\nexport const usePopoverStyles = makeStyles({\r\n container: {\r\n width: '174px',\r\n color: '#323130',\r\n },\r\n title: {\r\n marginBottom: '5px',\r\n },\r\n row,\r\n perfEditorialRow: {\r\n ...row,\r\n height: 'auto',\r\n flexWrap: 'wrap',\r\n },\r\n description: {\r\n display: 'flex',\r\n marginTop: '8px',\r\n marginBottom: '8px',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Body1Strong as BoldText,\r\n Caption2 as SmallText,\r\n Divider,\r\n} from '@fluentui/react-components';\r\n\r\nimport { DESCRIPTION_STRING } from './consts';\r\nimport { useGetStyledAssetStatus } from '../utils/use-get-styled-asset-status';\r\nimport { useGetPerformanceTag } from '../utils/use-get-performance-tag';\r\nimport { Asset } from '../utils/types';\r\nimport { usePopoverStyles } from '../styles/popover-styles';\r\n\r\ninterface AssetPerformancePopoverProps {\r\n i18n: any;\r\n asset: Asset;\r\n}\r\n\r\nexport function AssetPerformancePopover({ i18n, asset }: AssetPerformancePopoverProps) {\r\n const styles = usePopoverStyles();\r\n const getPerformanceTag = useGetPerformanceTag(i18n);\r\n const getStyledAssetStatus = useGetStyledAssetStatus(i18n);\r\n\r\n return (\r\n{i18n.getString(_TL_('Impressions'))}
\r\n{i18n.getString(_TL_('Clicks'))}
\r\n{i18n.getString(_TL_('Conversions'))}
\r\n{i18n.getString(_TL_('Revenue'))}
\r\n{i18n.getString(_TL_('Impressions'))}
\r\n{i18n.getString(_TL_('Clicks'))}
\r\n\r\n {asset.PerformanceMetrics.ConversionsCredit}\r\n
\r\n );\r\n}\r\n\r\n","import _ from 'underscore';\r\nimport { useState, useEffect, useMemo } from 'react';\r\n\r\nimport { Asset } from '../utils/types';\r\n\r\nexport const usePaginationConfig = (assets: Array(WrappedComponent: ComponentType
): ComponentType (WrappedComponent: ComponentType ): ComponentType {i18n.getString(warningPopupLocalizedMessage.subtitle)} {trackingStatusHelp} \r\n {i18n.getString(_TL_('Recommendation: '))}\r\n {i18n.getString(config.description)}\r\n {config.description2 && {i18n.getString(config.description2, { ...defaultParameters, ...params }) }}\r\n {trackingStatusHelp} (WrappedComponent: ComponentType ): ComponentType (WrappedComponent: ComponentType ): ComponentType (WrappedComponent: ComponentType ): ComponentType\r\n {assetContainer.Status === 'Active' ? \r\n {assetContainer.Name}\r\n \r\n);\r\n\r\n","import React, { ComponentType, useState, useContext, useEffect } from 'react';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\n\r\nimport { AssetContainer, IScopeContext } from '../utils/types';\r\nimport { AssetPerformanceFilterProps } from './types';\r\nimport { MAX_ASSET_CONTAINERS_IN_FILTER } from './const';\r\n\r\nexport const select = [\r\n 'Id',\r\n 'Status',\r\n 'Name',\r\n 'DeliveryStatus',\r\n 'DeliveryStatusDetails',\r\n];\r\n\r\nexport function useAssetGroupsData() {\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const {\r\n values: {\r\n cid,\r\n aid,\r\n campaignId,\r\n },\r\n } = scope;\r\n\r\n const [assetContainers, setAssetContainers] = useState\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nAssetPerformanceFilter.defaultProps = {\r\n state: undefined,\r\n};\r\n\r\nexport const AssetPerformanceFilterWithAssetGroupsData = withSiteMap(withAssetGroupsData(AssetPerformanceFilter));\r\n","import Promise from 'bluebird';\r\nimport { useState, useCallback, useEffect, useContext } from 'react';\r\nimport { odata } from '@bingads-webui/http-util';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\n\r\n\r\nconst oDataParams = {\r\n contentType: 'application/json',\r\n path: 'AdInsight/V2/',\r\n customHeader: {\r\n name: 'x-ms-scenarioname',\r\n value: 'DisplayPlusCampaign',\r\n },\r\n};\r\n\r\nconst FetchType = { total: 'total', included: 'included', all: 'all' };\r\n\r\nexport const useIMATargetingEstimationCaller = (targetsForTotalAudienceSizeEstimation, targetsForIncludedAudienceSizeEstimation, targetsForFullTargetedAudienceSizeEstimation) => {\r\n const { scope } = useContext(ScopeContext) || {};\r\n const serverContext = useContext(ServerContext);\r\n const { cid, aid } = scope.values;\r\n const {\r\n ServicesEndpoints: { CampaignAPI: host },\r\n Token: token,\r\n Urls: { SignOutUrl = null } = {},\r\n } = serverContext;\r\n const urlBase = `Customers(${cid})/Accounts(${aid})/`;\r\n const audienceSizeEstimationUrl = `${urlBase}Default.AudienceEstimationV2`;\r\n\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [totalPotentialData, setTotalPotentialData] = useState(null);\r\n const [includedOnlyData, setIncludedOnlyData] = useState(null);\r\n const [allTargetedData, setAllTargetedData] = useState(null);\r\n const [isImpressionTooSpecific, setIsImpressionTooSpecific] = useState(false);\r\n\r\n const getAudienceReachEstimation = useCallback((fetchType, targets) => {\r\n setIsLoading(true);\r\n\r\n return Promise.props({\r\n audienceSizeEstimation: odata.post({\r\n url: audienceSizeEstimationUrl,\r\n SignOutUrl,\r\n host,\r\n oDataToken: token,\r\n data: { request: targets },\r\n ...oDataParams,\r\n }),\r\n })\r\n .then(({ audienceSizeEstimation }) => {\r\n if (audienceSizeEstimation) {\r\n switch (fetchType) {\r\n case FetchType.total:\r\n setTotalPotentialData(audienceSizeEstimation);\r\n break;\r\n case FetchType.included:\r\n setIncludedOnlyData(audienceSizeEstimation);\r\n break;\r\n case FetchType.all:\r\n setAllTargetedData(audienceSizeEstimation);\r\n break;\r\n default:\r\n break;\r\n }\r\n setIsImpressionTooSpecific(audienceSizeEstimation.IsImpressionTooSpecific);\r\n }\r\n })\r\n .catch(err => Promise.reject(err))\r\n .finally(() => {\r\n setIsLoading(false);\r\n });\r\n }, [audienceSizeEstimationUrl, setTotalPotentialData, setIncludedOnlyData, setAllTargetedData]);\r\n\r\n useEffect(() => {\r\n getAudienceReachEstimation(FetchType.total, targetsForTotalAudienceSizeEstimation);\r\n }, [targetsForTotalAudienceSizeEstimation, getAudienceReachEstimation]);\r\n\r\n useEffect(() => {\r\n getAudienceReachEstimation(FetchType.included, targetsForIncludedAudienceSizeEstimation);\r\n }, [getAudienceReachEstimation, targetsForIncludedAudienceSizeEstimation]);\r\n\r\n useEffect(() => {\r\n getAudienceReachEstimation(FetchType.all, targetsForFullTargetedAudienceSizeEstimation);\r\n }, [getAudienceReachEstimation, targetsForFullTargetedAudienceSizeEstimation]);\r\n\r\n return [isLoading, totalPotentialData, includedOnlyData, allTargetedData, isImpressionTooSpecific];\r\n};\r\n","import { extend } from 'underscore';\r\nimport { jsonTreeParse } from '@bingads-webui/json-tree-parser';\r\n\r\n\r\nexport const formatIMATree = (imaList) => {\r\n const IMATree = jsonTreeParse(imaList, {\r\n field: 'Name',\r\n delimeter: '/',\r\n });\r\n\r\n // flatten the tree to a list\r\n const IMATreeItems = [];\r\n const IMATreeItemIdxMap = {};\r\n const IdMap = {};\r\n let idx = 0;\r\n const flattenTree = (tree, parentValue) => {\r\n tree.forEach((node) => {\r\n const {\r\n id, name, children, data,\r\n } = node;\r\n const item = {};\r\n\r\n if (data && data.Id) {\r\n item.allowedCheck = true;\r\n IdMap[data.Id] = item;\r\n }\r\n if (!IMATreeItemIdxMap[id]) {\r\n IMATreeItemIdxMap[id] = idx;\r\n extend(item, {\r\n value: id,\r\n name,\r\n data,\r\n childIds: children && children.map(child => child.id),\r\n });\r\n if (parentValue) {\r\n item.parentValue = parentValue;\r\n }\r\n IMATreeItems.push(item);\r\n idx += 1;\r\n }\r\n if (children) {\r\n flattenTree(children, id);\r\n }\r\n });\r\n };\r\n\r\n flattenTree(IMATree, null);\r\n\r\n return {\r\n IMATreeItems, IMATreeItemIdxMap, IdMap,\r\n };\r\n};\r\n\r\n/**\r\n * For impressions and clicks, 0-2 decimal places\r\n */\r\nexport const impreAndClicksOptions = {\r\n compact: 'short',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 2,\r\n};\r\n\r\n/**\r\n * For no decimals, 0 decimal places\r\n */\r\nexport const noDecimalOptions = {\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0,\r\n};\r\n\r\nexport const formatBigDecimal = (value, i18n) => {\r\n if (value > 999999) {\r\n return i18n.formatDecimal(value, impreAndClicksOptions);\r\n }\r\n return i18n.formatDecimal(value, noDecimalOptions);\r\n};\r\n","import React, { useMemo, useEffect, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport { PropTypes } from 'prop-types';\r\nimport { MessageBar, MessageBarTitle, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { StackedBarChart } from '@fluentui/react-charting';\r\nimport { Stack } from '@fluentui/react';\r\nimport { Divider, makeStyles, tokens } from '@fluentui/react-components';\r\nimport { isXandrCampaign, CampaignSubTypeMapping } from '@bingads-webui-campaign-react/constants';\r\nimport { unitValueMap } from '@bingads-webui-campaign/reach-estimate-control';\r\n\r\nimport { useIMATargetingEstimationCaller } from './use-targeting-estimation-caller';\r\nimport { formatBigDecimal } from '../utils';\r\n\r\nconst useStackStyles = makeStyles({\r\n estimationBody: {\r\n marginBottom: tokens.spacingVerticalMNudge,\r\n },\r\n firstDivider: {\r\n marginBottom: tokens.spacingVerticalMNudge,\r\n },\r\n});\r\n\r\nconst estimation = (data) => {\r\n const estimationAudienceUnit = _.get(data, ['EstAudienceSize', 'Unit']) || 'None';\r\n return unitValueMap[estimationAudienceUnit].value * (_.get(data, ['EstAudienceSize', 'Value']) || 0);\r\n};\r\n\r\nexport const IMAAudienceEstimation = ({\r\n targetedInterests = [], excludedInterests = [], i18n, autoTargeting, campaignBiddingStrategy, campaignSubType,\r\n}) => {\r\n const stackStyles = useStackStyles();\r\n const [errorMessage, setErrorMessage] = useState('');\r\n const otherProps = useMemo(() => ({\r\n AutoTargeting: autoTargeting,\r\n CampaignBiddingStrategy: campaignBiddingStrategy,\r\n CampaignSubType: CampaignSubTypeMapping[campaignSubType],\r\n }), [autoTargeting, campaignBiddingStrategy, campaignSubType]);\r\n\r\n const includesAudiences = useMemo(() => (targetedInterests ? targetedInterests.map(({ Criterion }) => Criterion.AudienceId) : []), [targetedInterests]);\r\n const excludesAudiences = useMemo(() => (excludedInterests ? excludedInterests.map(({ Criterion }) => Criterion.AudienceId) : []), [excludedInterests]);\r\n\r\n const IMATotal = useMemo(() => ({ Audience: { Includes: [], Excludes: [] }, ...otherProps }), [otherProps]);\r\n const IMAIncluded = useMemo(() => ({ Audience: { Includes: includesAudiences, Excludes: [] }, ...otherProps }), [includesAudiences, otherProps]);\r\n const IMAAll = useMemo(() => ({ Audience: { Includes: includesAudiences, Excludes: excludesAudiences }, ...otherProps }), [includesAudiences, excludesAudiences, otherProps]);\r\n\r\n const [\r\n isAudienceEstimationLoading,\r\n totalPotentialData,\r\n includedOnlyData,\r\n allTargetedData,\r\n isImpressionTooSpecific,\r\n ] = useIMATargetingEstimationCaller(IMATotal, IMAIncluded, IMAAll);\r\n\r\n let selectedData;\r\n let excludedData;\r\n let potentialdata;\r\n\r\n const includedAudiencesOnly = useMemo(() => targetedInterests.length > 0 && !excludedInterests.length, [targetedInterests, excludedInterests]);\r\n const excludedAudiencesOnly = useMemo(() => !targetedInterests.length && excludedInterests.length > 0, [targetedInterests, excludedInterests]);\r\n\r\n const estimatedIncludedOnlyData = estimation(includedOnlyData) || 0;\r\n const estimatedAllTargetedData = estimation(allTargetedData) || 0;\r\n const estimatedPotentialData = estimation(totalPotentialData) || 0;\r\n\r\n if (targetedInterests.length === 0 && excludedInterests.length === 0) {\r\n selectedData = 0;\r\n excludedData = 0;\r\n potentialdata = estimatedPotentialData;\r\n } else if (includedAudiencesOnly) {\r\n selectedData = estimatedIncludedOnlyData;\r\n excludedData = 0;\r\n potentialdata = estimatedPotentialData - estimatedIncludedOnlyData;\r\n } else if (excludedAudiencesOnly) {\r\n selectedData = estimatedAllTargetedData;\r\n excludedData = estimatedPotentialData - estimatedAllTargetedData;\r\n potentialdata = 0;\r\n } else {\r\n selectedData = estimatedAllTargetedData;\r\n excludedData = estimatedIncludedOnlyData - estimatedAllTargetedData;\r\n potentialdata = estimatedPotentialData - estimatedIncludedOnlyData;\r\n }\r\n\r\n const points = [\r\n {\r\n legend: i18n.getString(_TL_('Selected audience size')), data: selectedData, color: '#637CEF', xAxisCalloutData: i18n.getString(_TL_('Selected audience size')), yAxisCalloutData: formatBigDecimal(selectedData, i18n),\r\n },\r\n {\r\n legend: i18n.getString(_TL_('Excluded')), data: excludedData, color: '#F1511B', xAxisCalloutData: i18n.getString(_TL_('Excluded')), yAxisCalloutData: formatBigDecimal(excludedData, i18n),\r\n },\r\n {\r\n legend: i18n.getString(_TL_('Potential available reach')), data: potentialdata, color: '#D9D9D9', xAxisCalloutData: i18n.getString(_TL_('Potential available reach')), yAxisCalloutData: formatBigDecimal(potentialdata, i18n),\r\n },\r\n ];\r\n\r\n const data = {\r\n chartTitle: i18n.getString(_TL_('Audience size')),\r\n chartData: points,\r\n };\r\n\r\n useEffect(() => {\r\n if (!isAudienceEstimationLoading) {\r\n if (isImpressionTooSpecific) {\r\n setErrorMessage(i18n.getString(_TL_('Very narrow.')));\r\n } else {\r\n setErrorMessage('');\r\n }\r\n }\r\n }, [isAudienceEstimationLoading, i18n, isImpressionTooSpecific]);\r\n\r\n if (isXandrCampaign(campaignSubType)) {\r\n // ad insight estimation API does not support Xandr campaigns\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nIMAAudienceEstimation.propTypes = {\r\n targetedInterests: PropTypes.arrayOf(PropTypes.shape({})),\r\n excludedInterests: PropTypes.arrayOf(PropTypes.shape({})),\r\n i18n: PropTypes.shape({ getString: PropTypes.func }).isRequired,\r\n autoTargeting: PropTypes.string.isRequired,\r\n campaignBiddingStrategy: PropTypes.string.isRequired,\r\n campaignSubType: PropTypes.string.isRequired,\r\n};\r\n\r\nIMAAudienceEstimation.defaultProps = {\r\n targetedInterests: [],\r\n excludedInterests: [],\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Tooltip, makeStyles, tokens, shorthands } from '@fluentui/react-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nconst useStyles = makeStyles({\r\n searchBox: {\r\n maxWidth: '100%',\r\n '& input[type=\"search\"]': {\r\n paddingLeft: tokens.spacingHorizontalSNudge,\r\n backgroundImage: 'none',\r\n },\r\n },\r\n item: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginRight: '5px',\r\n },\r\n estimatedReach: {\r\n marginLeft: '10px',\r\n alignContent: 'center',\r\n },\r\n toolTip: {\r\n maxWidth: '350px',\r\n },\r\n toolTipContentWithSpace: {\r\n marginBottom: tokens.spacingVerticalS,\r\n },\r\n toolTipContent: {\r\n maxHeight: '400px',\r\n overflowY: 'auto',\r\n wordWrap: 'break-word',\r\n\r\n '&::-webkit-scrollbar': {\r\n backgroundColor: 'transparent',\r\n width: tokens.spacingHorizontalS,\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\r\n backgroundColor: tokens.colorNeutralBackground3,\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\r\n backgroundColor: tokens.colorNeutralForeground3,\r\n },\r\n '&::-webkit-scrollbar-thumb:hover': {\r\n backgroundColor: tokens.colorNeutralForeground3Hover,\r\n },\r\n },\r\n});\r\n\r\n\r\nconst ToolTipContent = ({ i18n, list, styles }) => (\r\n \r\n );\r\n\r\nToolTipContent.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func }).isRequired,\r\n list: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n styles: PropTypes.shape({\r\n toolTipContentWithSpace: PropTypes.string,\r\n toolTipContent: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nexport const Estimation = ({\r\n estimation, localizedMarkets,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useStyles();\r\n const [toolTipVisible, setToolTipVisible] = React.useState(false);\r\n\r\n return (\r\n {i18n.getString(_TL_('Locations where this audience serves'))}\r\n {list.length > 0 ? list.join(', ') : i18n.getString(_TL_('None'))}\r\n {i18n.getString(_TL_('Note: '))}{i18n.getString(_TL_('These locations are based on your campaign settings.'))}\r\n \r\n {estimation}\r\n \r\n \r\n );\r\n};\r\n\r\nEstimation.propTypes = {\r\n estimation: PropTypes.string.isRequired,\r\n localizedMarkets: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n};\r\n","/* eslint-disable no-param-reassign */\r\nimport _, { groupBy, isString, compact, difference, forEach } from 'underscore';\r\nimport React, { useContext, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\nimport { makeStyles, tokens, Checkbox, mergeClasses } from '@fluentui/react-components';\r\nimport { ContextualClientSelectionTree } from '@bingads-webui-fluent-component/selection-tree';\r\nimport { Tags } from '@bingads-webui-fluent-component/tags';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { extendListSizeItem, extendInternalizationReach, getLocalizedMarkets, formatReachEstimation } from '@bingads-webui-campaign-react/ima-reach-representation';\r\n\r\nimport { Estimation } from './estimation';\r\n\r\nconst useStyles = makeStyles({\r\n searchBox: {\r\n maxWidth: '100%',\r\n '& input[type=\"search\"]': {\r\n paddingLeft: tokens.spacingHorizontalSNudge,\r\n backgroundImage: 'none',\r\n },\r\n },\r\n item: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginRight: '5px',\r\n cursor: 'default',\r\n },\r\n checkboxCursor: {\r\n cursor: 'pointer',\r\n },\r\n});\r\n\r\nexport const InterestsSelector = ({\r\n locationTargets,\r\n treeItems,\r\n treeItemIdxMap,\r\n isAIMCampaignEnabled,\r\n campaignType,\r\n selectedItems,\r\n disabledItems,\r\n onChange,\r\n containerClassName,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useStyles();\r\n\r\n const treeItemsWithReach = useMemo(() => {\r\n if (!treeItems) {\r\n return undefined;\r\n }\r\n\r\n const { Included = [], Excluded = [] } = groupBy(locationTargets.currentLocations, 'SelectionStatus');\r\n const targetedLocationCriterions = Included.map((location) => {\r\n const criterion = location.Criterion.Type === 'Location' ? location.Criterion.LocationCriterion : location.Criterion.RadiusCriterion;\r\n return criterion.CountryCode.toUpperCase();\r\n });\r\n const excludedLocationCriterions = Excluded.map((location) => {\r\n const criterion = location.Criterion.Type === 'Location' ? location.Criterion.LocationCriterion : location.Criterion.RadiusCriterion;\r\n return criterion.CountryCode.toUpperCase();\r\n });\r\n\r\n const processedList = treeItems.map((item) => {\r\n const result = cloneDeep(item);\r\n\r\n if (result.data) {\r\n if (result.data.InternalizationReach) {\r\n result.data = extendInternalizationReach({\r\n item: result.data,\r\n peopleInLocation: locationTargets.peopleInLocation,\r\n targetedLocationCriterions,\r\n excludedLocationCriterions,\r\n i18n,\r\n });\r\n }\r\n result.data = extendListSizeItem({\r\n item: result.data,\r\n isAIMCampaignEnabled,\r\n campaignType,\r\n i18n,\r\n });\r\n }\r\n return result;\r\n });\r\n\r\n return processedList;\r\n }, [locationTargets, campaignType, i18n, isAIMCampaignEnabled, treeItems]);\r\n\r\n const ineligibleItems = useMemo(() => compact(treeItemsWithReach.map((item) => {\r\n if (item.data && item.data.isInEligibleIMA) {\r\n return item.value;\r\n }\r\n return null;\r\n })), [treeItemsWithReach]);\r\n\r\n // process disabled items\r\n const processedTreeItems = useMemo(() => {\r\n forEach(treeItemsWithReach, (item) => {\r\n item.disabled = false;\r\n });\r\n\r\n const queue = [...difference(ineligibleItems, selectedItems), ...disabledItems];\r\n while (queue.length > 0) {\r\n const item = queue.shift();\r\n const idx = treeItemIdxMap[item];\r\n const node = treeItemsWithReach[idx];\r\n node.disabled = true;\r\n }\r\n\r\n return treeItemsWithReach;\r\n }, [disabledItems, treeItemsWithReach, treeItemIdxMap, ineligibleItems, selectedItems]);\r\n\r\n const checkedItems = useMemo(() => {\r\n const checked = new Map();\r\n selectedItems.forEach(item => checked.set(item, true));\r\n\r\n return checked;\r\n }, [selectedItems]);\r\n\r\n const onTargetSelect = useCallback(({ item, data }) => {\r\n const isAddingTarget = data.checked;\r\n\r\n if (isAddingTarget) {\r\n onChange([...selectedItems, item.value]);\r\n } else {\r\n const removedTarget = selectedItems && selectedItems.filter(selected => selected !== item.value);\r\n onChange([...removedTarget]);\r\n }\r\n }, [onChange, selectedItems]);\r\n\r\n const onRenderFlatTreeItem = useCallback((item) => {\r\n const {\r\n name, data: itemData, value, disabled, index,\r\n } = item;\r\n\r\n const isItemChecked = checkedItems && checkedItems.has(value);\r\n const isDisabled = !isItemChecked && disabled;\r\n\r\n if (!itemData) {\r\n return (\r\n {name}\r\n );\r\n }\r\n\r\n const localizedMarkets = itemData.listSize === '-' ? [] : getLocalizedMarkets({\r\n item: itemData,\r\n i18n,\r\n campaignType,\r\n });\r\n const estimation = isString(itemData.listSize) ? itemData.listSize : formatReachEstimation(itemData.listSize, i18n);\r\n\r\n return (\r\n \r\n \r\n );\r\n }, [styles, i18n, campaignType, checkedItems, processedTreeItems]);\r\n\r\n const onRenderTagContent = useCallback((item) => {\r\n const idx = treeItemIdxMap[item];\r\n const node = treeItemsWithReach[idx];\r\n\r\n const { name } = node;\r\n return (\r\n {name}\r\n );\r\n }, [treeItemIdxMap, treeItemsWithReach]);\r\n\r\n const flatTreeItemFilter = useCallback((item, searchQuery) => {\r\n const name = item.name || '';\r\n return name.toLowerCase().includes(searchQuery.toLowerCase());\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nInterestsSelector.propTypes = {\r\n locationTargets: PropTypes.shape({\r\n currentLocations: PropTypes.arrayOf(PropTypes.shape({})),\r\n peopleInLocation: PropTypes.number,\r\n }).isRequired,\r\n treeItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n treeItemIdxMap: PropTypes.shape({}).isRequired,\r\n isAIMCampaignEnabled: PropTypes.bool.isRequired,\r\n campaignType: PropTypes.string.isRequired,\r\n selectedItems: PropTypes.arrayOf(PropTypes.string),\r\n disabledItems: PropTypes.arrayOf(PropTypes.string),\r\n onChange: PropTypes.func.isRequired,\r\n containerClassName: PropTypes.string,\r\n};\r\n\r\nInterestsSelector.defaultProps = {\r\n selectedItems: [],\r\n disabledItems: [],\r\n containerClassName: '',\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { groupBy } from 'underscore';\r\nimport React, { useContext, useCallback, useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Link, Divider, makeStyles, tokens, mergeClasses } from '@fluentui/react-components';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\n\r\nimport { IMAAudienceEstimation } from './audience-estimation/ima-audience-estimation';\r\nimport { InterestsSelector } from './interests-selector/interests-selector';\r\nimport { formatIMATree } from './utils';\r\n\r\nconst groupInterests = (interests) => {\r\n const groupedInterests = groupBy(interests, 'Status');\r\n return {\r\n targetedInterests: groupedInterests.Active || [],\r\n excludedInterests: groupedInterests.Excluded || [],\r\n };\r\n};\r\n\r\nexport const formatInterests = ({ interests, i18n }) => {\r\n if (!interests || !interests.length) {\r\n return i18n.getString(_TL_('Targeting: No interests selected.'));\r\n }\r\n\r\n const { targetedInterests, excludedInterests } = groupInterests(interests);\r\n let targetedInterestDetails = '';\r\n let excludedInterestDetails = '';\r\n\r\n if (targetedInterests.length === 1) {\r\n targetedInterestDetails = i18n.getString(_TL_('Targeted: 1 interest'));\r\n } else if (targetedInterests.length > 1) {\r\n targetedInterestDetails = i18n.getString(_TL_('Targeted: {{count}} interests'), { count: (targetedInterests.length) });\r\n }\r\n\r\n if (excludedInterests.length === 1) {\r\n excludedInterestDetails = i18n.getString(_TL_('Excluded: 1 interest'));\r\n } else if (excludedInterests.length > 1) {\r\n excludedInterestDetails = i18n.getString(_TL_('Excluded: {{count}} interests'), { count: (excludedInterests.length) });\r\n }\r\n\r\n return `${targetedInterestDetails}${targetedInterestDetails && excludedInterestDetails && i18n.getString(_TL_('. '))}${excludedInterestDetails}`;\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n marginBottom: tokens.spacingVerticalM,\r\n },\r\n interestsHeader: {\r\n marginBottom: tokens.spacingVerticalM,\r\n },\r\n divider: {\r\n marginTop: tokens.spacingVerticalL,\r\n marginBottom: tokens.spacingVerticalL,\r\n },\r\n});\r\n\r\nconst AudienceInterests = React.memo(({\r\n supportExclusion,\r\n isAIMCampaignEnabled,\r\n locationTargets,\r\n audienceList,\r\n campaignType,\r\n validationProps,\r\n updateValidation,\r\n autoTargeting,\r\n campaignBiddingStrategy,\r\n campaignSubType,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n data: { interests },\r\n } = validationProps;\r\n const i18n = useContext(I18nContext);\r\n const { IMATreeItems: treeItems, IMATreeItemIdxMap: treeItemIdxMap, IdMap: audienceIdMap } = useMemo(() => {\r\n if (!audienceList) {\r\n return {};\r\n }\r\n return formatIMATree(audienceList);\r\n }, [audienceList]);\r\n const { targetedInterests, excludedInterests } = useMemo(() => groupInterests(interests), [interests]);\r\n const { targetedItems, excludedItems } = useMemo(() => {\r\n if (!audienceIdMap) {\r\n return {\r\n targetedItems: [],\r\n excludedItems: [],\r\n };\r\n }\r\n const targeted = targetedInterests.map(({ Criterion }) => audienceIdMap[Criterion.AudienceId].value);\r\n const excluded = excludedInterests.map(({ Criterion }) => audienceIdMap[Criterion.AudienceId].value);\r\n return { targetedItems: targeted, excludedItems: excluded };\r\n }, [targetedInterests, excludedInterests, audienceIdMap]);\r\n\r\n const [expandExclusions, setExpandExclusions] = useState(excludedItems.length > 0);\r\n\r\n const onTarget = useCallback((newTargeted) => {\r\n const newInterests = newTargeted.map((interest) => {\r\n const interestData = treeItems[treeItemIdxMap[interest]].data;\r\n return {\r\n Status: 'Active',\r\n Criterion: {\r\n AudienceId: interestData.Id,\r\n AudienceName: interestData.Name,\r\n AudienceType: 'InMarket',\r\n BidMultiplier: 0,\r\n Type: 'Audience',\r\n },\r\n BidType: 'TargetAndBid',\r\n };\r\n });\r\n const remainingSelected = targetedInterests.filter(interest => newInterests.some(newInterest => newInterest.Criterion.AudienceId === interest.Criterion.AudienceId));\r\n const newlySelected = newInterests.filter(newInterest => !targetedInterests.some(interest => interest.Criterion.AudienceId === newInterest.Criterion.AudienceId));\r\n updateValidation([], { interests: [...excludedInterests, ...remainingSelected, ...newlySelected] });\r\n }, [treeItemIdxMap, updateValidation, targetedInterests, excludedInterests, treeItems]);\r\n\r\n const onExclude = useCallback((newExcluded) => {\r\n const newInterests = newExcluded.map((interest) => {\r\n const interestData = treeItems[treeItemIdxMap[interest]].data;\r\n return {\r\n Status: 'Excluded',\r\n Criterion: {\r\n AudienceId: interestData.Id,\r\n AudienceName: interestData.Name,\r\n AudienceType: 'InMarket',\r\n BidMultiplier: 0,\r\n Type: 'Audience',\r\n },\r\n BidType: 'Exclude',\r\n };\r\n });\r\n const remainingSelected = excludedInterests.filter(interest => newInterests.some(newInterest => newInterest.Criterion.AudienceId === interest.Criterion.AudienceId));\r\n const newlySelected = newInterests.filter(newInterest => !excludedInterests.some(interest => interest.Criterion.AudienceId === newInterest.Criterion.AudienceId));\r\n updateValidation([], { interests: [...targetedInterests, ...remainingSelected, ...newlySelected] });\r\n }, [treeItemIdxMap, updateValidation, excludedInterests, targetedInterests, treeItems]);\r\n\r\n const onExpandExclusions = useCallback(() => {\r\n setExpandExclusions(true);\r\n }, []);\r\n\r\n if (!treeItems || !treeItemIdxMap) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n );\r\n});\r\n\r\nAudienceInterests.propTypes = {\r\n supportExclusion: PropTypes.bool,\r\n isAIMCampaignEnabled: PropTypes.bool.isRequired,\r\n campaignType: PropTypes.string.isRequired,\r\n locationTargets: PropTypes.shape({\r\n useParentLevel: PropTypes.bool.isRequired,\r\n parentLevelSettings: PropTypes.shape({}),\r\n currentLevelSettings: PropTypes.shape({}),\r\n peopleInLocation: PropTypes.number,\r\n }).isRequired,\r\n audienceList: PropTypes.arrayOf(PropTypes.shape({})),\r\n classes: PropTypes.shape({\r\n interestsHeader: PropTypes.string.isRequired,\r\n tooltip: PropTypes.string.isRequired,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n interests: PropTypes.arrayOf(PropTypes.shape({})),\r\n }),\r\n audienceListInFlatTree: PropTypes.arrayOf(PropTypes.shape({})),\r\n valueToFlatItem: PropTypes.shape({}),\r\n valueToAudience: PropTypes.shape({}),\r\n interests: PropTypes.arrayOf(PropTypes.string),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n autoTargeting: PropTypes.string.isRequired,\r\n campaignBiddingStrategy: PropTypes.string.isRequired,\r\n campaignSubType: PropTypes.string.isRequired,\r\n};\r\n\r\nAudienceInterests.defaultProps = {\r\n supportExclusion: true,\r\n audienceList: undefined,\r\n};\r\n\r\nexport const ValidatedAudienceInterests = withCustomValidation(AudienceInterests);\r\n","import { useContext } from 'react';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\nexport const useBudgetRange = () => {\r\n const serverContext = useContext(ServerContext) as any;\r\n const currencyCode = serverContext?.CurrentAccount?.CurrencyCode || 'USD';\r\n\r\n const minDailyBudget = serverContext?.BudgetRange?.DailyRange?.FloorValue;\r\n\r\n // Currently the max daily budget returned by server context is the same as max monthly budget https://msasg.visualstudio.com/Bing_Ads/_git/AdsAppUI?path=/private/UI/OpportunityUI/Microsoft.AdCenter.UI.Web.Opportunity/Repository/StaticEntityRepository.cs&version=GBmaster&line=86&lineEnd=86&lineStartColumn=13&lineEndColumn=122&lineStyle=plain&_a=contents\r\n // Because of that we use the same logic as on MT where maxDailyBudget = maxMonthlyBudget / 28 https://msasg.visualstudio.com/DefaultCollection/Bing_Ads/_git/AdsAppsMT?path=/private/Common/BusinessRules/CampaignValidators/BudgetLimitHelper.cs&version=GBmaster&line=10&lineEnd=12&lineStartColumn=1&lineEndColumn=35&lineStyle=plain&_a=contents\r\n const maxDailyBudget = serverContext?.BudgetRange?.MonthlyRange?.CeilingValue\r\n ? Number((serverContext.BudgetRange.MonthlyRange.CeilingValue / 28).toFixed(2))\r\n : serverContext?.BudgetRange?.DailyRange?.CeilingValue;\r\n\r\n return {\r\n currencyCode,\r\n minDailyBudget,\r\n maxDailyBudget,\r\n };\r\n};\r\n","import { makeStyles, tokens, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useBudgetInputStyles = makeStyles({\r\n row: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n label: {\r\n marginBottom: tokens.spacingVerticalXS,\r\n },\r\n input: {\r\n maxWidth: '280px',\r\n ...shorthands.flex(1),\r\n },\r\n dropdown: {\r\n minWidth: '150px',\r\n marginLeft: tokens.spacingHorizontalXS,\r\n },\r\n currency: {\r\n ...shorthands.margin('0', '0', '0', tokens.spacingHorizontalS),\r\n },\r\n});\r\n","import React, { useCallback, useContext, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Input,\r\n InputProps,\r\n Label,\r\n mergeClasses,\r\n useId,\r\n Dropdown,\r\n Option,\r\n} from '@fluentui/react-components';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\n\r\nimport { useBudgetInputStyles } from './styles/budget-input-styles';\r\n\r\ndeclare function _TL_(arg0: string): string;\r\n\r\ninterface BudgetInputPureProps {\r\n className?: string;\r\n value?: string;\r\n onChange: (value: string) => void;\r\n currency: string;\r\n label?: string;\r\n helpTopic?: string;\r\n helpLabel?: string;\r\n showDropdown?: boolean;\r\n onSelectCurrency?: (event: any, data: any) => void;\r\n currencies?: { code: string; text: string }[];\r\n}\r\n\r\nexport const BudgetInputPure: React.FC\r\n \r\n {i18n.getString(_TL_('Reach people who are ready to buy or interested in:'))}\r\n \r\n {i18n.getString(_TL_('Exclude people who are looking to buy:'))}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nBudgetInputPure.defaultProps = {\r\n className: '',\r\n value: undefined,\r\n label: undefined,\r\n helpTopic: undefined,\r\n helpLabel: undefined,\r\n showDropdown: false,\r\n onSelectCurrency: _.noop,\r\n currencies: [],\r\n};\r\n","import { makeStyles, tokens } from '@fluentui/react-components';\r\n\r\nexport const useValidatedBudgetInputStyles = makeStyles({\r\n root: {\r\n marginBottom: tokens.spacingVerticalMNudge,\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo, useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withValidation, GenericAdapter } from '@bingads-webui-react/validation';\r\nimport { withErrorField } from '@bingads-webui-react/primitive-validation-fluent';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\n\r\nimport { BudgetInputPure } from './budget-input-pure';\r\nimport { useBudgetRange } from './use-budget-range';\r\nimport { useValidatedBudgetInputStyles } from './styles/validated-budget-input-styles';\r\n\r\nconst BudgetInput = withErrorField(withValidation(BudgetInputPure, GenericAdapter));\r\n\r\ndeclare function _TL_(arg0: string): string;\r\n\r\ninterface ValidatedBudgetInputProps {\r\n budgetKey?: string;\r\n maxBudget?: number;\r\n minBudget?: number;\r\n currency?: string;\r\n validationProps: {},\r\n}\r\n\r\nexport const ValidatedBudgetInput: React.FC\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nValidatedBudgetInput.defaultProps = {\r\n budgetKey: 'Budget',\r\n maxBudget: undefined,\r\n minBudget: undefined,\r\n currency: undefined,\r\n};\r\n","import { useContext, useMemo } from 'react';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\nexport const useIsReadOnlyUser = (): boolean => {\r\n const serverContext = useContext(ServerContext) as any;\r\n return useMemo(() => (serverContext?.CurrentAccountInActive || serverContext?.Permissions?.IsReadOnlyUser), [serverContext]);\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport {\r\n Menu,\r\n MenuButton,\r\n MenuItemRadio,\r\n MenuList,\r\n MenuPopover,\r\n MenuTrigger,\r\n MenuProps,\r\n tokens,\r\n} from '@fluentui/react-components';\r\nimport {\r\n ChevronDown16Regular,\r\n FluentIcon,\r\n} from '@fluentui/react-icons';\r\n\r\nimport { useIsReadOnlyUser } from './use-is-read-only-user';\r\n\r\ninterface IMenuItemConfig {\r\n icon?: FluentIcon;\r\n iconColor?: string;\r\n text: string;\r\n value: string;\r\n}\r\n\r\nexport interface IDropdownMenuButtonProps {\r\n checkedValue: string;\r\n onChange: MenuProps['onCheckedValueChange'];\r\n menuItemConfigs: IMenuItemConfig[];\r\n buttonAriaLabel: string;\r\n}\r\n\r\nexport const DropdownMenuButton: React.FunctionComponent\r\n \r\n );\r\n});\r\n","import React, { memo, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Card,\r\n CardHeader,\r\n Text,\r\n Caption1,\r\n Tooltip,\r\n Button,\r\n} from '@fluentui/react-components';\r\nimport { Shimmer } from '@fluentui/react';\r\nimport {\r\n Warning16Regular,\r\n} from '@fluentui/react-icons';\r\n\r\nimport { DropdownMenuButton, IDropdownMenuButtonProps } from './components/dropdown-menu-button';\r\nimport { DialogEditButton, IDialogEditButtonProps } from './components/dialog-edit-button';\r\nimport { StatusSummaryCardIcon, IIconProps } from './components/icon';\r\nimport { useStyles } from './styles/styles';\r\n\r\nexport interface IStatusSummaryCardProps extends IIconProps {\r\n header: string;\r\n description: string;\r\n dropdownMenuProps?: IDropdownMenuButtonProps;\r\n dialogEditProps?: IDialogEditButtonProps;\r\n isLoading: boolean;\r\n className?: string;\r\n warningMessage?: string;\r\n}\r\n\r\nexport const StatusSummaryCard: React.FunctionComponent\r\n \r\n \r\n \r\n );\r\n});\r\n\r\nStatusSummaryCard.defaultProps = {\r\n dropdownMenuProps: undefined,\r\n dialogEditProps: undefined,\r\n className: '',\r\n warningMessage: undefined,\r\n};\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useFooterStyles = makeStyles({\r\n container: {\r\n marginTop: '8px',\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n saveButton: {\r\n marginRight: '8px',\r\n },\r\n containerLeft: {\r\n marginTop: '8px',\r\n display: 'flex',\r\n },\r\n});\r\n","import React, { useContext, useCallback } from 'react';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { FORM_STATES, FORM_EVENTS, useFormService } from '@bingads-webui-react/form';\r\nimport { Button } from '@fluentui/react-components';\r\n\r\nimport { useFooterStyles } from '../styles/footer-styles';\r\n\r\nexport function withFooter(WrappedComponent, showBudgetSuggestion?) {\r\n const HoC = (props) => {\r\n const i18n = useContext(I18nContext) as any;\r\n const styles = useFooterStyles();\r\n const { state, send } = useFormService();\r\n const isLoading = state.matches(FORM_STATES.LOADING);\r\n\r\n const onSave = useCallback(() => send(FORM_EVENTS.SAVE), [send]);\r\n const onCancel = useCallback(() => send(FORM_EVENTS.CANCEL), [send]);\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 {showBudgetSuggestion &&\r\n \r\n \r\n \r\n }\r\n \r\n );\r\n };\r\n HoC.defaultProps = {\r\n headerState: undefined,\r\n };\r\n return HoC;\r\n}\r\n","import { useContext, useCallback } from 'react';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { getCampaignStatus, getCampaignStatusPromise } from '@bingads-webui-campaign-react/pmax-overview-data';\r\n\r\nexport const useReadCampaign = ({ set }) => {\r\n const { scope } = useContext(ScopeContext) as any;\r\n const {\r\n cid, aid, campaignId,\r\n } = scope.values;\r\n\r\n return useCallback(() => getCampaignStatus({\r\n cid, aid, campaignId, set,\r\n }), [aid, campaignId, cid, set]);\r\n};\r\n\r\nexport const useReadCampaignPromise = () => {\r\n const { scope } = useContext(ScopeContext) as any;\r\n const {\r\n cid, aid, campaignId,\r\n } = scope.values;\r\n\r\n return useCallback(() => getCampaignStatusPromise({ cid, aid, campaignId }), [aid, campaignId, cid]);\r\n};\r\n","import { edmCampaign } from '@bingads-webui/edm-campaign';\r\n\r\nexport const createOrUpdateCampaign = (data) => {\r\n const campaignEDM = edmCampaign.types.resolve('Model.ShoppingCampaign');\r\n const campaignResource = new campaignEDM.ResourceIdentifier();\r\n const createOrUpdateCall = data && data.Id ?\r\n campaignResource.bulkUpdate.bind(campaignResource) :\r\n campaignResource.bulkCreate.bind(campaignResource);\r\n return createOrUpdateCall(data);\r\n};\r\n","import { useState, useCallback, useContext, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { MAX_CONVERSIONS } from '@bingads-webui-campaign-react/bid-strategy-component';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { showBudgetBidCampaignNotifications } from '@bingads-webui-campaign/import-shared-utils';\r\nimport { LogTargetCpaCheckOnSave } from '@bingads-webui-campaign-react/target-cpa-warning-banner';\r\n\r\nimport { useReadCampaignPromise } from './use-read-campaign';\r\nimport { createOrUpdateCampaign } from '../utils/create-or-update-campaign';\r\n\r\nexport const useRepository = (isBudget: Boolean) => {\r\n const { scope } = useContext(ScopeContext) as any;\r\n const { campaignId } = scope.values;\r\n const instrumentation = useContext(InstrumentationContext) as any;\r\n const readCampaign = useReadCampaignPromise();\r\n const [initialCampaign, setInitialCampaign] = useState\r\n \r\n );\r\n};\r\n\r\nconst BudgetForm = ({ closeDialog, log, showBudgetSuggestion }: { closeDialog: Function, log: { trace: Function }, showBudgetSuggestion: Boolean}) => {\r\n const onDoneSaving = useCallback((...params) => {\r\n log.trace('Budget form popover closed: saved');\r\n closeDialog(...params);\r\n }, [log, closeDialog]);\r\n\r\n const onCanceled = useCallback((...params) => {\r\n log.trace('Budget form popover closed: canceled');\r\n closeDialog(...params);\r\n }, [log, closeDialog]);\r\n\r\n useEffect(() => {\r\n log.trace('Budget card popover rendered');\r\n }, [log]);\r\n\r\n const config = useMemo(() => ({\r\n id: 'budget-form',\r\n view: withFooter(FormViewWrapper, showBudgetSuggestion),\r\n repository: useBudgetRepository,\r\n machineOptions: {\r\n actions: {\r\n onDoneSaving,\r\n onCanceled,\r\n },\r\n },\r\n }), [onCanceled, onDoneSaving, showBudgetSuggestion]);\r\n return ();\r\n};\r\n\r\nexport const BudgetCard: React.FunctionComponent<{ contentReady: Function }> = ({ contentReady }: { contentReady: Function }) => {\r\n const i18n = useContext(I18nContext) as any;\r\n const instrumentation = useContext(InstrumentationContext) as any;\r\n const serverContext = useContext(ServerContext) as any;\r\n const currency = serverContext?.CurrentAccount?.CurrencyCode;\r\n\r\n const log = useMemo(() => {\r\n if (instrumentation && instrumentation.campaignOverviewEdit) {\r\n const scenario = instrumentation.campaignOverviewEdit.create();\r\n return scenario.budgetEdit.create();\r\n }\r\n return {\r\n trace: _.noop,\r\n error: _.noop,\r\n };\r\n }, [instrumentation]);\r\n\r\n const [budgetText, setBudgetText] = useState\r\n {!showBudgetSuggestionData &&\r\n \r\n }\r\n \r\n {i18n.getString(_TL_('Your ads could be shown more often. You can increase your budget to ensure more ad exposure.'))}\r\n \r\n }\r\n \r\n );\r\n};\r\n\r\nconst BidStrategyForm = ({ closeDialog, log }: { closeDialog: Function, log: { trace: Function } }) => {\r\n const onDoneSaving = useCallback((...params) => {\r\n log.trace('Bid strategy form popover closed: saved');\r\n closeDialog(...params);\r\n }, [log, closeDialog]);\r\n\r\n const onCanceled = useCallback((...params) => {\r\n log.trace('Bid strategy form popover closed: canceled');\r\n closeDialog(...params);\r\n }, [log, closeDialog]);\r\n\r\n useEffect(() => {\r\n log.trace('Bid strategy card popover rendered');\r\n }, [log]);\r\n\r\n const config = useMemo(() => ({\r\n id: 'bid-strategy-form',\r\n view: withFooter(FormViewWrapper),\r\n repository: useBidStrategyRepository,\r\n machineOptions: {\r\n actions: {\r\n onDoneSaving,\r\n onCanceled,\r\n },\r\n },\r\n }), [onCanceled, onDoneSaving]);\r\n return ();\r\n};\r\n\r\nconst getBidStrategyText = (campaign, i18n) => {\r\n if (campaign.CampaignType === 'PerformanceMax') {\r\n return campaign?.BiddingScheme?.Type === MAX_CONVERSIONS.type ? i18n.getString(MAX_CONVERSIONS.text) : i18n.getString(MAX_CONVERSIONS_VALUE.text);\r\n }\r\n if (campaign.CampaignType === 'LinkedIn') {\r\n return getLinkedInBidStrategyText(campaign, i18n);\r\n }\r\n return '';\r\n};\r\n\r\nexport const BidStrategyCard: React.FunctionComponent<{ contentReady: Function }> = ({ contentReady }: { contentReady: Function }) => {\r\n const i18n = useContext(I18nContext) as any;\r\n const instrumentation = useContext(InstrumentationContext) as any;\r\n\r\n const [bidStrategyText, setBidStrategyText] = useState\r\n \r\n );\r\n });\r\n","import performanceImage from '../media/performance.svg';\r\nimport recommendationsImage from '../media/recommendations.svg';\r\nimport campaignsImage from '../media/campaigns.svg';\r\nimport topChangesImage from '../media/top-changes.svg';\r\nimport conversionTrackingImage from '../media/conversion-tracking.svg';\r\nimport keywordsImage from '../media/keywords.svg';\r\nimport searchTermsImage from '../media/search-terms.svg';\r\nimport devicesImage from '../media/devices.svg';\r\nimport competitionImage from '../media/competition.svg';\r\nimport adGroupsImage from '../media/ad-groups.svg';\r\nimport accountsImage from '../media/accounts.svg';\r\nimport topLocationsImage from '../media/top-locations.svg';\r\n\r\nexport const CARD_CONFIG = {\r\n 'CardType-Performance': {\r\n icon: performanceImage,\r\n title: _TL_('Performance'),\r\n description: _TL_('View your campaigns\\' key performance data all in one place'),\r\n },\r\n 'CardType-Recommendations': {\r\n icon: recommendationsImage,\r\n title: _TL_('Recommendations'),\r\n description: _TL_('View key untapped strategies to ensure that you are getting the most out of your Microsoft advertising experience.'),\r\n },\r\n 'CardType-TopCampaigns': {\r\n icon: campaignsImage,\r\n title: _TL_('Campaigns'),\r\n description: _TL_('View your top campaigns of interest based on their performance data.'),\r\n },\r\n 'CardType-TopChanges-Campaign': {\r\n icon: topChangesImage,\r\n title: _TL_('Top changes'),\r\n description: _TL_('Identify which campaigns and ad groups are responsible for the biggest changes to your account.'),\r\n },\r\n 'CardType-TopChanges-Account': {\r\n icon: topChangesImage,\r\n title: _TL_('Top changes'),\r\n description: _TL_('Identify which accounts are responsible for the biggest changes.'),\r\n },\r\n 'CardType-TopChanges-AdGroup': {\r\n icon: topChangesImage,\r\n title: _TL_('Top changes'),\r\n description: _TL_('Identify which campaigns and ad groups are responsible for the biggest changes to your account.'),\r\n },\r\n 'CardType-Conversion-Tracking': {\r\n icon: conversionTrackingImage,\r\n title: _TL_('Conversion tracking'),\r\n description: _TL_('Conversions track website actions to measure campaign performance.'),\r\n },\r\n 'CardType-TopKeyword': {\r\n icon: keywordsImage,\r\n title: _TL_('Keywords'),\r\n description: _TL_('View your top keywords of interest based on their performance data.'),\r\n },\r\n 'CardType-TopSearchTerms': {\r\n icon: searchTermsImage,\r\n title: _TL_('What people searched'),\r\n description: _TL_('Get a quick glance into what queries potential customers are searching for to trigger your ads.'),\r\n },\r\n 'CardType-Device': {\r\n icon: devicesImage,\r\n title: _TL_('Devices'),\r\n description: _TL_('Get insights on how your campaigns perform by device type.'),\r\n },\r\n 'CardType-Competition': {\r\n icon: competitionImage,\r\n title: _TL_('Competition'),\r\n description: _TL_('View your campaign\\'s key performance data all in one place.'),\r\n },\r\n 'CardType-TopLocations': {\r\n icon: topLocationsImage,\r\n title: _TL_('Top locations'),\r\n description: _TL_('Highlights the top 10 best performing locations within the location targets you initially set.'),\r\n },\r\n 'CardType-TopAdGroup': {\r\n icon: adGroupsImage,\r\n title: _TL_('Ad groups'),\r\n description: _TL_('View your top ad groups of interest based on their performance data.'),\r\n },\r\n 'CardType-TopAccounts': {\r\n icon: accountsImage,\r\n title: _TL_('Accounts'),\r\n description: _TL_('View your top accounts of interest based on their performance data.'),\r\n },\r\n};\r\n","import { makeStyles, tokens, shorthands } from '@fluentui/react-components';\r\n\r\nconst cardStyle = {\r\n width: '280px',\r\n height: '185px',\r\n};\r\nexport const useCardStyles = makeStyles({\r\n card: cardStyle,\r\n cardSelected: {\r\n ...cardStyle,\r\n ...shorthands.border('1px', 'solid', tokens.colorNeutralForeground2BrandHover),\r\n },\r\n checkmark: {\r\n position: 'absolute',\r\n top: '0',\r\n right: '0',\r\n width: '16px',\r\n height: '16px',\r\n marginTop: '16px',\r\n marginRight: '16px',\r\n color: tokens.colorNeutralForeground2BrandHover,\r\n },\r\n image: {\r\n ...shorthands.margin('8px'),\r\n height: '45px',\r\n width: '45px',\r\n },\r\n header: {\r\n maxHeight: '52px',\r\n },\r\n textArea: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n title: {\r\n marginTop: '16px',\r\n marginBottom: '4px',\r\n },\r\n});\r\n","import React, { useCallback } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Card as FluentCard,\r\n Caption1,\r\n Text,\r\n Image,\r\n} from '@fluentui/react-components';\r\nimport { CheckmarkCircleFilled } from '@fluentui/react-icons';\r\n\r\nimport { CARD_CONFIG } from './card-config';\r\nimport { CardProps } from './types';\r\nimport { useCardStyles } from './styles/card-styles';\r\n\r\nexport function Card({\r\n i18n,\r\n cardId,\r\n isSelected,\r\n onCardSelectionChange,\r\n}: CardProps) {\r\n const styles = useCardStyles() as any;\r\n const onCardClicked = useCallback(() => onCardSelectionChange(cardId, !isSelected), [cardId, isSelected, onCardSelectionChange]);\r\n const handleSpace = useCallback((e) => {\r\n if (e.key === ' ') {\r\n onCardClicked();\r\n }\r\n }, [onCardClicked]);\r\n if (!CARD_CONFIG[cardId]) return null;\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import { ITreeItem, ITreeIndexes } from './types';\r\n\r\nexport function buildMap(flatTreeItems: Array\r\n {_.map(\r\n localCardsState,\r\n (card: CardConfigProps) => (\r\n {_.isFunction(onRenderContent) ? onRenderContent(flatTreeItem) : content}\r\n }\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nDropdownTreeSelect.defaultProps = {\r\n placeholder: '',\r\n items: [],\r\n checkedItems: [],\r\n onChange: _.noop,\r\n openItems: [],\r\n onOpenChange: _.noop,\r\n onRenderContent: null,\r\n onRenderTooltip: null,\r\n customFilter: undefined,\r\n isMultiSelect: true,\r\n};\r\n","import Promise from 'bluebird';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { FetchDataResponseType } from '@bingads-webui-fluent-component/entity-selector';\r\n\r\nimport { FetchDataResponseTypeExtend, FetchGoalFactoryParams } from './types';\r\n\r\nexport const getPaginationData = (page: number, pageSize: number) => ({\r\n top: pageSize,\r\n skip: (page - 1) * pageSize,\r\n count: true,\r\n});\r\n\r\nexport const mapGoalsToItems = goals => goals.map(goal => ({\r\n value: String(goal.Id),\r\n content: goal.Name,\r\n data: goal,\r\n}));\r\n\r\nconst fetchConversionGoals = (cid : string, aid : string, dataQuery: any) => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Goals['Default.GetConversionGoals']\r\n .$makeCall({\r\n query: {\r\n ...dataQuery,\r\n },\r\n })\r\n .toPromise();\r\n\r\nexport const fetchConversionGoalFactory =\r\n ({\r\n cid, aid, options = {},\r\n }: FetchGoalFactoryParams) => ({\r\n page, pageSize, search, sortState,\r\n }): Promise<(FetchDataResponseType & FetchDataResponseTypeExtend)> => {\r\n const select = ['Id', 'Name', 'GoalCategory', 'Status', 'TrackingStatus', 'Type', 'IsMainConversionGoal', 'GoalDiagnosticsInfo'];\r\n\r\n let filter = '(Status eq Enum.GoalStatus\\'Active\\') and ((GoalCategory eq Enum.GoalCategory\\'InStoreVisit\\') eq false)';\r\n\r\n if (options.filter) {\r\n filter += options.filter;\r\n }\r\n\r\n if (search && search !== '') {\r\n filter += ` and (contains(tolower(Name), '${search.toLowerCase()}'))`;\r\n }\r\n\r\n const defaultOrder = { IsMainConversionGoal: 0 };\r\n const orderby = (sortState && sortState.sortColumn) ? { [sortState.sortColumn]: sortState.sortDirection === 'ascending' ? 0 : 1 } : defaultOrder;\r\n const dataQuery = {\r\n top: pageSize,\r\n skip: (page - 1) * pageSize,\r\n filter: { where: filter },\r\n orderby,\r\n count: true,\r\n select,\r\n };\r\n\r\n return fetchConversionGoals(cid, aid, dataQuery).then(({ '@odata.count': count, value: goals }) => ({\r\n items: mapGoalsToItems(goals),\r\n currentPage: page,\r\n count,\r\n totalPages: Math.ceil(count / pageSize),\r\n }));\r\n };\r\n","import {\r\n makeStyles,\r\n shorthands,\r\n tokens,\r\n typographyStyles,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useTableStyles = makeStyles({\r\n dataGridWrapper: {\r\n width: '100%',\r\n ...shorthands.padding('10px', '5px'),\r\n ...shorthands.borderRadius('5px'),\r\n ...shorthands.border('2px', 'solid', tokens.colorNeutralBackground1Pressed),\r\n '& thead th:nth-child(2)': {\r\n width: '280px',\r\n },\r\n '& thead th:nth-child(3)': {\r\n width: '130px',\r\n },\r\n },\r\n accountCheckbox: {\r\n '& thead th:nth-child(1)': {\r\n width: '40px',\r\n },\r\n '& thead th:nth-child(2)': {\r\n width: '280px',\r\n },\r\n '& thead th:nth-child(3)': {\r\n width: '130px',\r\n },\r\n },\r\n dataGridContainer: {\r\n maxHeight: '350px',\r\n overflowY: 'auto',\r\n '& .loading-goal': {\r\n height: '100px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n },\r\n dataGrid: {\r\n width: '100%',\r\n marginTop: '15px',\r\n },\r\n mainConversionCheckbox: {\r\n width: '20px',\r\n },\r\n searchbox: {\r\n minWidth: '400px',\r\n marginLeft: '20px',\r\n },\r\n headerBar: {\r\n width: '100%',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n ...shorthands.borderBottom('2px', 'solid', tokens.colorNeutralBackground1Pressed),\r\n paddingTop: '10px',\r\n paddingBottom: '15px',\r\n '& .show-select-control input[type=\"checkbox\"]': {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n },\r\n footer: {\r\n display: 'flex',\r\n ...shorthands.padding('10px', '10px'),\r\n '& .page-selector': {\r\n marginRight: '20px',\r\n maxWidth: 'max-content',\r\n '& label': {\r\n fontWeight: tokens.fontWeightRegular,\r\n },\r\n },\r\n },\r\n clearAllBtn: {\r\n width: '100px', // ui-next\r\n '& div': {\r\n justifyContent: 'center',\r\n },\r\n },\r\n headerTitle: {\r\n ...typographyStyles.caption1Strong,\r\n fontSize: tokens.fontSizeBase200,\r\n },\r\n});\r\n","import ContactIcon from '../media/contact.svg';\r\nimport AddToCartIcon from '../media/addToCart.svg';\r\nimport BookAppointmentIcon from '../media/bookAppointment.svg';\r\nimport DownloadIcon from '../media/download.svg';\r\nimport GetDirectionIcon from '../media/getDirection.svg';\r\nimport LeadFormIcon from '../media/leadForm.svg';\r\nimport OtherIcon from '../media/other.svg';\r\nimport OutboundClickIcon from '../media/outboundClick.svg';\r\nimport PageViewIcon from '../media/pageView.svg';\r\nimport PurchaseIcon from '../media/purchase.svg';\r\nimport RequestQuoteIcon from '../media/requestQuote.svg';\r\nimport SignupIcon from '../media/signup.svg';\r\nimport SubscribeIcon from '../media/subscribe.svg';\r\nimport CheckoutIcon from '../media/checkout.svg';\r\n\r\nimport { ErrorCodeMapping } from './types';\r\n\r\nexport const Scopes = Object.freeze({\r\n ACCOUNT: 'account-scope',\r\n CAMPAIGN: 'campaign-scope',\r\n});\r\n\r\nexport const trackingStatusMapping = {\r\n Unverified: _TL_('Unverified'),\r\n NoRecentConversion: _TL_('No recent conversions'),\r\n RecordingConversions: _TL_('Recording conversions'),\r\n TagInactive: _TL_('Tag inactive'),\r\n InactiveDueToTagUnavailable: _TL_('Unavailable UET'),\r\n};\r\n\r\nexport const GoalDiagnosticsInfoErrorCode = {\r\n UETMismatch: 'UETMismatch',\r\n UrlGoalInvalidParameter: 'UrlGoalInvalidParameter',\r\n EventGoalInvalidParameter: 'EventGoalInvalidParameter',\r\n UETActiveMissingConversionEvent: 'UETActiveMissingConversionEvent',\r\n NotUploadOfflineConversion: 'NotUploadOfflineConversion',\r\n\r\n // tracking status\r\n Unverified: 'Unverified',\r\n NoRecentConversion: 'NoRecentConversion',\r\n RecordingConversions: 'RecordingConversions',\r\n TagInactive: 'TagInactive',\r\n InactiveDueToTagUnavailable: 'InactiveDueToTagUnavailable',\r\n};\r\n\r\nexport const EXTERNAL_LINK = {\r\n CONVERSION_GOAL: 'conversion-goals',\r\n UET_TAG_PAGE: 'uet-tag',\r\n OFFLINE_GOALS: 'offline-conversions',\r\n};\r\n\r\nexport const warningPopupLocalizedMessage = {\r\n title: _TL_(\"You're leaving?\"),\r\n subtitle: _TL_(\"All changes will be discarded if you leave this page. You can still modify your campaign after it's created.\"),\r\n};\r\n\r\nexport const localizedParameters = {\r\n NoExpression: _TL_('no Expression'),\r\n NoValue: _TL_('no Value'), // ValueOperatorEnum\r\n EqualsTo: _TL_('equals to'),\r\n BeginsWith: _TL_('begins with'),\r\n Contains: _TL_('contains'),\r\n RegularExpression: _TL_('regular expression'),\r\n LessThan: _TL_('less than'),\r\n GreaterThan: _TL_('greater than'),\r\n};\r\n\r\nexport const needLocalizedPropName = {\r\n CurrentDestinationUrlOperatorName: 'CurrentDestinationUrlOperatorName',\r\n SuggestedDestinationUrlOperatorName: 'SuggestedDestinationUrlOperatorName',\r\n CurrentEventActionOperator: 'CurrentEventActionOperator',\r\n CurrentEventCategoryOperator: 'CurrentEventCategoryOperator',\r\n CurrentEventValueOperator: 'CurrentEventValueOperator',\r\n SuggestedEventActionOperator: 'SuggestedEventActionOperator',\r\n SuggestedEventCategoryOperator: 'SuggestedEventCategoryOperator',\r\n SuggestedEventValueOperator: 'SuggestedEventValueOperator',\r\n};\r\n\r\nexport const errorcodeMapping: { [key: string]: ErrorCodeMapping } = {\r\n [GoalDiagnosticsInfoErrorCode.UETMismatch]: {\r\n parameterPropertyName: 'UETMismatch',\r\n actionLink: EXTERNAL_LINK.CONVERSION_GOAL,\r\n actionTitle: _TL_('Troubleshoot Conversions Goals page'),\r\n helpText: _TL_('UET tags'),\r\n helpId: 'app51207',\r\n title: _TL_('Incorrectly matched UET tags'),\r\n description: _TL_('You are recording conversion events from a different UET tag.'),\r\n description2: _TL_('The Tag used by the goal is {{ CurrentTagName }} ({{ CurrentTagId }}), actual tag is {{ SuggestedTagName }} ({{ SuggestedTagId }}).'),\r\n requiredParameters: ['CurrentTagName', 'CurrentTagId', 'SuggestedTagName', 'SuggestedTagId'],\r\n },\r\n [GoalDiagnosticsInfoErrorCode.UrlGoalInvalidParameter]: {\r\n parameterPropertyName: 'FixDestinationUrlGoal',\r\n actionLink: EXTERNAL_LINK.CONVERSION_GOAL,\r\n actionTitle: _TL_('Troubleshoot conversion goals'),\r\n helpText: _TL_('conversion goals'),\r\n helpId: 'app54813',\r\n title: _TL_('Invalid Destination URL'),\r\n description: _TL_('We identified a potential error in your conversion goal setting, which might have resulted in missed tracking of conversions.'),\r\n description2: _TL_('The current URL setting is {{CurrentDestinationUrlOperatorName}} {{CurrentDestinationUrl}}. We recommend changing this to {{SuggestedDestinationUrlOperatorName}} {{SuggestedDestinationUrl}}.'),\r\n requiredParameters: ['CurrentDestinationUrlOperatorName', 'CurrentDestinationUrl', 'SuggestedDestinationUrlOperatorName', 'SuggestedDestinationUrl'],\r\n },\r\n [GoalDiagnosticsInfoErrorCode.EventGoalInvalidParameter]: {\r\n parameterPropertyName: 'FixEventGoal',\r\n actionLink: EXTERNAL_LINK.CONVERSION_GOAL,\r\n actionTitle: _TL_('Troubleshoot conversion goals'),\r\n helpText: _TL_('conversion goals.'),\r\n helpId: 'app54813',\r\n title: _TL_('Invalid conversion events'),\r\n description: _TL_('We identified a potential error in your conversion goal setting, which might have resulted in missed tracking of conversions.'),\r\n description2: _TL_('The current setting is {{current}}. We recommend changing this setting to {{suggested}}.'),\r\n requiredParameters: ['current', 'suggested'],\r\n },\r\n [GoalDiagnosticsInfoErrorCode.UETActiveMissingConversionEvent]: {\r\n actionLink: EXTERNAL_LINK.UET_TAG_PAGE,\r\n actionTitle: _TL_('Troubleshoot UET tag'),\r\n helpText: _TL_('conversion goals.'),\r\n helpId: 'app54813',\r\n title: _TL_('No events matched the goal definition'),\r\n description: _TL_('We\\'ve detected the UET tag on your website, but there have been no conversion events matching your definition in the last seven days. Check that the goal has the correct event definition.'),\r\n },\r\n [GoalDiagnosticsInfoErrorCode.NotUploadOfflineConversion]: {\r\n actionLink: EXTERNAL_LINK.OFFLINE_GOALS,\r\n actionTitle: _TL_('Go to offline conversion page'),\r\n helpText: _TL_('offline conversions'),\r\n helpId: 'app54554',\r\n title: _TL_('No offline conversions'),\r\n description: _TL_('No offline conversions were uploaded recently. Go to your offline goals to upload conversions that may be associated to this campaign.'),\r\n },\r\n\r\n // Default tracking status\r\n [GoalDiagnosticsInfoErrorCode.Unverified]: {\r\n actionLink: EXTERNAL_LINK.UET_TAG_PAGE,\r\n actionTitle: _TL_('Troubleshoot UET tag'),\r\n helpText: _TL_('using UET tags.'),\r\n helpId: 'app54867',\r\n title: _TL_('UET Unverified'),\r\n description: _TL_('The UET tag associated with your website has no activity in the past 24 hours.'),\r\n },\r\n [GoalDiagnosticsInfoErrorCode.NoRecentConversion]: {\r\n actionLink: EXTERNAL_LINK.CONVERSION_GOAL,\r\n actionTitle: _TL_('Troubleshoot Conversions Goals'),\r\n helpText: _TL_('conversion goals'),\r\n helpId: 'app54867',\r\n title: _TL_('No Recent Conversion'),\r\n description: _TL_('We\\'ve seen your UET tag but haven\\'t recorded any conversions in the last seven days.'),\r\n },\r\n [GoalDiagnosticsInfoErrorCode.TagInactive]: {\r\n actionLink: EXTERNAL_LINK.UET_TAG_PAGE,\r\n actionTitle: _TL_('Troubleshoot UET tag'),\r\n helpText: _TL_('using UET tags.'),\r\n helpId: 'app54867',\r\n title: _TL_('Inactive UET tag'),\r\n description: _TL_('Your UET tag has not recorded any conversions in the past seven days.'),\r\n },\r\n [GoalDiagnosticsInfoErrorCode.InactiveDueToTagUnavailable]: {\r\n actionLink: EXTERNAL_LINK.UET_TAG_PAGE,\r\n actionTitle: _TL_('Go to UET tag page'),\r\n helpText: _TL_('UET tags.'),\r\n helpId: 'app54813',\r\n title: _TL_('Unavailable UET'),\r\n description: _TL_('The account no longer has access to the UET tag. Permissions to a UET tag in another manager account may have been removed, or this account was transferred and lost permission to a UET tag in a previous manager account.'),\r\n },\r\n};\r\n\r\nexport const EMPTY_STATE = {\r\n NoGoalInitial: 'NoGoalInitial',\r\n SearchEmpty: 'SearchEmpty',\r\n};\r\n\r\nexport const healthyTrackingStatus = 'RecordingConversions';\r\n\r\nexport const categoryMapping = {\r\n Purchase: { text: _TL_('Purchase'), icon: PurchaseIcon },\r\n AddToCart: { text: _TL_('Add to cart'), icon: AddToCartIcon },\r\n BeginCheckout: { text: _TL_('Begin checkout'), icon: CheckoutIcon },\r\n Subcribe: { text: _TL_('Subscribe'), icon: SubscribeIcon },\r\n SubmitLeadForm: { text: _TL_('Submit lead form'), icon: LeadFormIcon },\r\n BookAppointment: { text: _TL_('Book appointment'), icon: BookAppointmentIcon },\r\n Signup: { text: _TL_('Sign - up'), icon: SignupIcon },\r\n RequestQuote: { text: _TL_('Request quote'), icon: RequestQuoteIcon },\r\n GetDirections: { text: _TL_('Get directions'), icon: GetDirectionIcon },\r\n OutboundClick: { text: _TL_('Outbound click'), icon: OutboundClickIcon },\r\n Contact: { text: _TL_('Contact'), icon: ContactIcon },\r\n PageView: { text: _TL_('Page view'), icon: PageViewIcon },\r\n Other: { text: _TL_('Other'), icon: OtherIcon },\r\n Download: { text: _TL_('Download'), icon: DownloadIcon },\r\n};\r\n","import { makeStyles, shorthands, tokens, typographyStyles, } from '@fluentui/react-components';\r\n\r\nexport const useTrackingStatusPopoverStyles = makeStyles({\r\n root: {\r\n color: tokens.colorStatusSuccessForeground1,\r\n backgroundColor: tokens.colorStatusSuccessBackground1,\r\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1),\r\n },\r\n warningState: {\r\n color: tokens.colorStatusWarningForeground2,\r\n backgroundColor: tokens.colorStatusWarningBackground1,\r\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1),\r\n },\r\n popover: {\r\n maxWidth: 'fit-content',\r\n paddingRight: '30px',\r\n '& .tracking-status-col': {\r\n paddingRight: '10px',\r\n },\r\n },\r\n popoverLearnMore: {\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n popoverContent: {\r\n maxWidth: '350px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('10px'),\r\n alignItems: 'flex-start',\r\n },\r\n title: {\r\n ...typographyStyles.title3,\r\n },\r\n});\r\n","// @ts-nocheck\r\nimport React from 'react';\r\nimport { useConfirmDialog } from '@bingads-webui-campaign-react/confirmation-dialog-v2';\r\n\r\nexport interface I18n {\r\n getString: (key: string, params?: any) => string\r\n}\r\n\r\nexport interface ProtectedLinkProps {\r\n i18n: I18n;\r\n onNavigation: () => void;\r\n dialogProps: any;\r\n enabled?: boolean;\r\n children: React.ReactNode;\r\n className: string | undefined;\r\n}\r\n\r\nexport const ProtectedLink: React.FC\r\n {\r\n filteredTreeItems.length\r\n ? (\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 no results)\r\n }\r\n \r\n {children && React.Children.map(children, child =>\r\n React.cloneElement((child), {\r\n onClick,\r\n }))}\r\n {shouldShow && dialogView}\r\n \r\n );\r\n};\r\n\r\nProtectedLink.defaultProps = {\r\n enabled: false,\r\n};\r\n","import React from 'react';\r\nimport { Button, ButtonProps, mergeClasses } from '@fluentui/react-components';\r\nimport { ProtectedLink } from '@bingads-webui-campaign-react/protected-link';\r\n\r\nimport { I18n } from '../types';\r\nimport { warningPopupLocalizedMessage } from '../constants';\r\n\r\ninterface NavigationPopupProps {\r\n i18n: I18n;\r\n onNavigation: () => void;\r\n enabled?: boolean;\r\n confirmButtonText: string;\r\n appearance?: ButtonProps['appearance'];\r\n className?: string;\r\n}\r\n\r\nexport const NavigationPopup: React.FC\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nLearnMoreComponent.defaultProps = {\r\n activityLogger: undefined,\r\n};\r\n\r\ninterface TrackingStatusPopoverProps {\r\n i18n: I18n;\r\n goal: GoalType;\r\n isCreationWorkflow: boolean;\r\n activityLogger?: {\r\n trace: (data: any) => void;\r\n };\r\n}\r\n\r\nexport const TrackingStatusPopover: React.FC\r\n \r\n ) : \r\n \r\n {config ? i18n.getString(config.title) : trackingStatusConfig && (i18n.getString(trackingStatusConfig.title))}\r\n \r\n\r\n \r\n \r\n {config ? (\r\n <>\r\n \r\n {(config && config.helpId) ?\r\n (\r\n \r\n );\r\n};\r\n","import { makeStyles, shorthands, tokens, typographyStyles, } from '@fluentui/react-components';\r\n\r\nexport const useHeaderControlStyles = makeStyles({\r\n title: { ...typographyStyles.body1Strong },\r\n required: {\r\n color: tokens.colorStatusDangerForeground1,\r\n },\r\n resetButton: {\r\n ...shorthands.border('none'),\r\n backgroundColor: 'transparent',\r\n },\r\n wrapper: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignContent: 'center',\r\n ...shorthands.padding('10px', 0),\r\n },\r\n header: {\r\n marginBottom: '10px',\r\n '& .helpbutton ': {\r\n paddingLeft: '5px',\r\n display: 'inline-block',\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport { Field, mergeClasses, Radio, RadioGroup } from '@fluentui/react-components';\r\nimport { MessageBar, MessageBarBody, MessageBarTitle } from '@fluentui/react-message-bar';\r\n\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { useDataSource } from '@bingads-webui-react/data-source';\r\n\r\nimport { useHeaderControlStyles } from './header-control-styles';\r\nimport { Scopes } from '../constants';\r\nimport { I18n } from '../types';\r\n\r\nconst scopeOptions = {\r\n [Scopes.ACCOUNT]: _TL_('Use the account \"Include in conversions\" setting'),\r\n [Scopes.CAMPAIGN]: _TL_('Choose conversion goals for this campaign'),\r\n};\r\n\r\ninterface HeaderControlComponentProps {\r\n i18n: I18n;\r\n scope: string | undefined;\r\n setScope: (value)=> void;\r\n showNoMainGoalWarning: boolean;\r\n}\r\n\r\nexport const HeaderControlComponent: React.FC\r\n \r\n }\r\n >\r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { ServerEntitySelectorEmbedded } from '@bingads-webui-fluent-component/entity-selector';\r\n\r\nimport { useGoalSelectorState } from './use-goal-selector-state';\r\nimport { GoalSelectorConfigProps } from './types';\r\nimport { fetchConversionGoalFactory } from './data';\r\nimport { TableViewSection } from './table-view-section';\r\nimport { EMPTY_STATE, Scopes } from './constants';\r\nimport { EmptyStateResultComponent } from './components/empty-state-result';\r\n\r\nexport const GoalSelector: React.FC<(GoalSelectorConfigProps)> = ({\r\n i18n,\r\n cid,\r\n aid,\r\n value: valueFromProps,\r\n onChange: onChangeFromProps,\r\n goalScopeSelection,\r\n isCreationWorkflow,\r\n activityLogger,\r\n ...props\r\n}) => {\r\n const [scope, setScope] = useState(goalScopeSelection);\r\n const [emptyStateNoGoal, setEmptyStateNoGoal] = useState(false);\r\n\r\n const fetchData = fetchConversionGoalFactory({\r\n options: scope === Scopes.ACCOUNT ? { filter: ' and (IsMainConversionGoal eq true)' } : {},\r\n cid,\r\n aid,\r\n });\r\n\r\n const onSetScope = (newScope) => {\r\n if (activityLogger && activityLogger.trace) {\r\n activityLogger.trace(`[GoalSelectorV3] goal scope change: ${newScope}`);\r\n }\r\n onChangeFromProps({\r\n goalScopeSelection: newScope,\r\n });\r\n\r\n setScope(newScope);\r\n };\r\n\r\n const onChangeGoalSelector = (items) => {\r\n onChangeFromProps({\r\n goalSelection: items,\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n fetchConversionGoalFactory({ cid, aid })({\r\n page: 1, pageSize: 5, search: '', sortState: null,\r\n }).then((response) => {\r\n if (response && response.count === 0) {\r\n setEmptyStateNoGoal(true);\r\n }\r\n });\r\n }, [aid, cid]);\r\n\r\n const { value, onChange } = useGoalSelectorState({ value: valueFromProps, onChange: onChangeGoalSelector });\r\n if (emptyStateNoGoal) {\r\n return \r\n \r\n \r\n {isLoading && (\r\n \r\n { isSearchEmptyState && !isLoading &&\r\n \r\n )\r\n }\r\n {!isLoading && \r\n \r\n \r\n }\r\n ;\r\n }\r\n return (\r\n <>\r\n \r\n {footerButtonConfigs?.map((config) => {\r\n const hiddenButton = useRef(null);\r\n const onClick = useCallback(() => {\r\n config.onClick();\r\n hiddenButton?.current?.click();\r\n }, [config, hiddenButton]);\r\n return (\r\n \r\n {renderPagination && renderPagination()}\r\n \r\n \r\n {i18n.getString(_TL_('{{current}} of {{total}}'), { current: state.current, total: state.total })}\r\n \r\n \r\n );\r\n }\r\n return null;\r\n }, [data, i18n, onNext, onPrevious, state]);\r\n\r\n return {\r\n state,\r\n getDataToDisplayFromSortedData,\r\n resetToFirstPage: () => setState({ ...state, current: 1 }),\r\n renderPagination,\r\n };\r\n};\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n PauseFilled,\r\n BeakerRegular,\r\n BeakerFilled,\r\n CircleFilled,\r\n SubtractRegular,\r\n ErrorCircleRegular,\r\n SubtractCircleRegular,\r\n CheckmarkCircleRegular,\r\n} from '@fluentui/react-icons';\r\nimport { makeStyles, tokens } from '@fluentui/react-components';\r\n\r\nconst dimensions = {\r\n width: '14px',\r\n minWidth: '14px',\r\n height: '20px',\r\n marginRight: '4px',\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n inactive: {\r\n color: tokens.colorNeutralForeground1,\r\n ...dimensions,\r\n },\r\n active: {\r\n color: tokens.colorPaletteGreenBackground3,\r\n ...dimensions,\r\n },\r\n error: {\r\n color: tokens.colorPaletteRedBackground3,\r\n ...dimensions,\r\n },\r\n deleted: {\r\n color: tokens.colorNeutralForeground4,\r\n ...dimensions,\r\n },\r\n enabled: {\r\n color: tokens.colorPaletteGreenBackground3,\r\n ...dimensions,\r\n },\r\n});\r\n\r\nexport const StatusIcon = ({ status, isExperiment, entityType }: { status?: string; isExperiment: boolean; entityType: string; }) => {\r\n const styles = useStyles();\r\n\r\n if (!status || entityType === 'SearchTerm') {\r\n return null;\r\n }\r\n\r\n if (entityType === 'Account') {\r\n if (status === 'Errors') {\r\n return \r\n {addAction}\r\n {\r\n searchTermExcluded ? (\r\n \r\n );\r\n});\r\n\r\nSearchTermActions.defaultProps = {\r\n i18n: null,\r\n triggerSearchTermDrawer: undefined,\r\n rowRawItem: null,\r\n};\r\n","import React, { memo, FC, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport { Link } from 'react-router-dom';\r\nimport {\r\n makeStyles,\r\n shorthands,\r\n TableCellLayout,\r\n Tooltip,\r\n Popover,\r\n PopoverTrigger,\r\n PopoverSurface,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nimport { StatusIcon } from './status-icon';\r\nimport { SearchTermActions } from './search-term-actions';\r\n\r\nexport const useStyles = makeStyles({\r\n entityNameLink: {\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n ...shorthands.overflow('hidden'),\r\n width: '100%',\r\n },\r\n container: {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n },\r\n entityNameRow: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start',\r\n width: '100%',\r\n },\r\n searchTermActionRow: {\r\n // cannot find better way, use this hack to align the button with the text\r\n display: 'inline-block',\r\n '& .search-term-added + .search-term-exclude': {\r\n left: '0',\r\n },\r\n },\r\n searchTermButton: {\r\n fontSize: tokens.fontSizeBase200,\r\n fontWeight: 'normal',\r\n ...shorthands.padding('0px'),\r\n position: 'relative',\r\n // cannot find better way, use this hack to align the button with the text\r\n left: '-12px',\r\n top: '-2px',\r\n },\r\n leftSide: {\r\n ...shorthands.margin('0px', '8px', '0px', '0px'),\r\n },\r\n});\r\n\r\nexport interface IEntityNameProps {\r\n entityType: string;\r\n href?: string;\r\n name: string;\r\n status?: string;\r\n isExperiment: boolean;\r\n popoverContent?: React.ReactNode;\r\n triggerSearchTermDrawer?: Function;\r\n className?: string;\r\n searchTermStatus?: string;\r\n i18n?: any;\r\n rowRawItem?: any;\r\n}\r\n\r\nexport const EntityName: FC\r\n \r\n ), [className, classes, status, isExperiment, entityType, href, name,\r\n triggerSearchTermDrawer, i18n, searchTermStatus, rowRawItem]);\r\n\r\n if (popoverContent) {\r\n return (\r\n \r\n \r\n {\r\n entityType === 'SearchTerm' &&\r\n {name}\r\n }\r\n \r\n \r\n );\r\n }, [classes, positionMap, shouldShowComparison, values]);\r\n\r\n const major = shouldShowComparison ? values[positionMap.value] : values.value;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n });\r\n","import React, { memo, FC } from 'react';\r\nimport classNames from 'classnames';\r\nimport { makeStyles,\r\n tokens,\r\n shorthands,\r\n TableCellLayout,\r\n Tooltip,\r\n Text, } from '@fluentui/react-components';\r\n\r\nimport { MetricPickerMenuButton } from './metric-picker-menu-button';\r\nimport { ISelectedMetric } from '../types';\r\n\r\nexport const useStyles = makeStyles({\r\n metricCell: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n metricCellContent: {\r\n display: 'flex',\r\n },\r\n metricCellHeaderText: {\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n sorted: {\r\n backgroundColor: tokens.colorSubtleBackgroundHover,\r\n },\r\n});\r\n\r\nexport interface IMetricHeaderCellProps {\r\n metricDisplayName: string;\r\n dropdownMetrics?: ISelectedMetric[];\r\n onMetricDropdownSelect?: (key: string) => void;\r\n}\r\n\r\nexport const MetricHeaderCell: FC\r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { memo, FC, useCallback, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport {\r\n Caption1,\r\n Caption1Stronger,\r\n DataGridBody,\r\n DataGridRow,\r\n DataGrid,\r\n DataGridHeader,\r\n DataGridHeaderCell,\r\n DataGridCell,\r\n Image,\r\n useTableSort,\r\n useTableFeatures,\r\n tokens,\r\n makeStyles,\r\n} from '@fluentui/react-components';\r\nimport classNames from 'classnames';\r\nimport { OverviewCardFooter, usePaginationConfig, IFooterButtonConfig } from '@bingads-webui-campaign-react/overview-card-footer';\r\n\r\nimport { IPerformanceData, ISelectedMetric, ISortState, IColumnData, IMetricFormatter, TMajorMetric } from './types';\r\nimport { getColumns } from './columns';\r\nimport { TableShimmer } from './table-shimmer';\r\nimport { EntityNameColumnId } from './const';\r\nimport SearchExclamationImage from '../media/search-exclamation-image.png';\r\n\r\nexport const useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n },\r\n grid: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n },\r\n sorted: {\r\n backgroundColor: tokens.colorSubtleBackgroundHover,\r\n flexGrow: 1.5,\r\n },\r\n entityNameColumn: {\r\n flexGrow: 1.8,\r\n },\r\n noDataContainer: {\r\n flexGrow: 1,\r\n textAlign: 'center',\r\n alignContent: 'center',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n});\r\n\r\nexport interface IOverviewPerformanceTableProps {\r\n isLoading?: boolean;\r\n entityDisPlayName: string;\r\n selectedMetrics?: ISelectedMetric[];\r\n allMetrics: ISelectedMetric[];\r\n sortState?: ISortState;\r\n data?: IPerformanceData[];\r\n onChange: ({\r\n newSelectedMetrics,\r\n newSortState,\r\n }: {\r\n newSelectedMetrics?: ISelectedMetric[],\r\n newSortState?: ISortState,\r\n }) => void;\r\n i18n: any;\r\n metricFormatter: IMetricFormatter;\r\n comparisonMajorMetric: TMajorMetric;\r\n footerButtonConfigs?: IFooterButtonConfig[];\r\n getHref: Function;\r\n getPopoverContent?: Function;\r\n triggerSearchTermDrawer?: Function;\r\n entityType: string;\r\n}\r\n\r\nexport const OverviewPerformanceTable: FC\r\n \r\n );\r\n});\r\n\r\nOverviewPerformanceTable.defaultProps = {\r\n isLoading: false,\r\n selectedMetrics: undefined,\r\n sortState: undefined,\r\n data: [],\r\n footerButtonConfigs: null,\r\n getPopoverContent: undefined,\r\n triggerSearchTermDrawer: undefined,\r\n};\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport {\r\n TableColumnDefinition,\r\n TableCellLayout,\r\n createTableColumn,\r\n} from '@fluentui/react-components';\r\nimport { EntityName } from '@bingads-webui-campaign-react/overview-grid-entity-name';\r\n\r\nimport { IColumnData, ISelectedMetric, TMajorMetric, IMetricFormatter } from './types';\r\nimport { MetricCell } from './table-cell/metric-cell';\r\nimport { MetricHeaderCell } from './table-cell/metric-header-cell';\r\nimport { EntityNameColumnId } from './const';\r\n\r\ninterface IGetColumnsProps {\r\n entityDisPlayName: string;\r\n selectedMetrics: ISelectedMetric[];\r\n allMetrics: ISelectedMetric[];\r\n onColumnChange: ({\r\n newSelectedMetrics,\r\n }: {\r\n newSelectedMetrics: ISelectedMetric[],\r\n }) => void;\r\n metricFormatter: IMetricFormatter;\r\n comparisonMajorMetric: TMajorMetric;\r\n i18n: any;\r\n}\r\n\r\n// TODO: [yaoyao] Do we show less columns in small screen? Designer should provide the design.\r\n// https://msasg.visualstudio.com/Bing_Ads/_workitems/edit/7235904\r\nexport function getColumns({\r\n entityDisPlayName,\r\n selectedMetrics,\r\n allMetrics,\r\n onColumnChange,\r\n metricFormatter,\r\n comparisonMajorMetric,\r\n i18n,\r\n}: IGetColumnsProps): TableColumnDefinition\r\n \r\n }\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n });\r\n","import React, { memo, FC } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n makeStyles,\r\n shorthands,\r\n TableCellLayout,\r\n Text,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n textCell: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n textCellContent: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n ...shorthands.gap('8px'),\r\n },\r\n});\r\n\r\nexport interface ITextCellProps {\r\n value: string;\r\n cellName: string;\r\n}\r\n\r\nexport const TextCell: FC\r\n \r\n \r\n \r\n );\r\n});\r\n","import React, { useState, useRef, useCallback } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Button,\r\n makeStyles,\r\n tokens,\r\n shorthands,\r\n Tooltip,\r\n Popover,\r\n PopoverTrigger,\r\n PopoverSurface,\r\n} from '@fluentui/react-components';\r\nimport { LightbulbFilamentRegular } from '@fluentui/react-icons';\r\nimport { getFluctuationContentStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { IColumnData } from '../types';\r\n\r\nexport const useStyles = makeStyles({\r\n button: {\r\n color: tokens.colorNeutralForeground2BrandHover,\r\n },\r\n popover: {\r\n '& .bingads-fluctuation-wrapper': {\r\n width: '500px',\r\n '& .fluc-description': {\r\n fontSize: '12px',\r\n },\r\n '& .cause-container-wrapper': {\r\n paddingLeft: '31px',\r\n marginLeft: '-16px',\r\n paddingRight: '31px',\r\n marginRight: '-16px',\r\n },\r\n },\r\n '& .loading-dialog': {\r\n position: 'static',\r\n boxShadow: 'none',\r\n ...shorthands.borderStyle('none'),\r\n },\r\n },\r\n});\r\n\r\nconst backupPalette = { themePrimary: tokens.colorPaletteBlueBorderActive };\r\nconst getStyles = ({ palette = backupPalette, iconFontFamily }) => ({ popover: { ...getFluctuationContentStyle({ palette, iconFontFamily }) } });\r\n\r\ninterface InsightCellProps {\r\n i18n: any;\r\n fluctuationTypeIds: Array\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import classNames from 'classnames';\r\nimport React, { useMemo } from 'react';\r\nimport {\r\n makeStyles,\r\n Popover,\r\n PopoverSurface,\r\n PopoverTrigger,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nimport { IMetricFormatter } from './types';\r\n\r\nconst useStyles = makeStyles({\r\n trigger: {\r\n display: 'flex',\r\n height: '44px',\r\n justifyContent: 'center',\r\n },\r\n metricContainer: {\r\n display: 'flex',\r\n columnGap: '12px',\r\n marginTop: '8px',\r\n marginBottom: '8px',\r\n },\r\n metric: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n rowGap: '6px',\r\n },\r\n separator: {\r\n borderRightStyle: 'solid',\r\n borderRightWidth: '1px',\r\n borderRightColor: tokens.colorNeutralStroke1Selected,\r\n },\r\n box: {\r\n width: '12px',\r\n height: '12px',\r\n marginRight: '5px',\r\n },\r\n positiveBox: {\r\n backgroundColor: tokens.colorPaletteBlueBorderActive,\r\n },\r\n negativeBox: {\r\n backgroundColor: tokens.colorPaletteLilacForeground2,\r\n },\r\n changeContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n});\r\n\r\nfunction formatDate(i18n: any, date: { start: Date, end: Date }) {\r\n const formattedStart = i18n.formatDate(date.start);\r\n const formattedEnd = i18n.formatDate(date.end);\r\n\r\n if (formattedStart === formattedEnd) {\r\n return formattedStart;\r\n }\r\n return `${formattedStart} - ${formattedEnd}`;\r\n}\r\n\r\ninterface IPopoverInfoProps {\r\n i18n: any;\r\n change: number;\r\n percentageChange: string;\r\n metricName: string;\r\n localizedMetricName: string;\r\n currentMetric: string;\r\n periodMetric: string;\r\n entityName: string;\r\n currentDateRange: {\r\n end: Date;\r\n start: Date;\r\n };\r\n comparisonDateRange: {\r\n end: Date;\r\n start: Date;\r\n };\r\n metricFormatter: IMetricFormatter;\r\n currency: string;\r\n}\r\nexport const PopoverInfo: React.FC\r\n {renderFluctuationPopup({\r\n fluctuationTypeIds, isOpen, setIsOpen, entity, metric,\r\n })}\r\n \r\n \r\n \r\n }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n actuationProps={{\r\n expand: diagnosticsSectionExpand,\r\n expandKey: 'issues',\r\n }}\r\n >\r\n {entityName}\r\n \r\n \r\n \r\n \r\n \r\n {formatDate(i18n, currentDateRange)}\r\n {`${localizedMetricName}: ${formattedCurrentMetric}`}\r\n \r\n \r\n {formatDate(i18n, comparisonDateRange)}\r\n {`${localizedMetricName}: ${formattedPeriodMetric}`}\r\n \r\n {change !== 0 && \r\n \r\n \r\n );\r\n};\r\n","export const EntityNameColumnId = 'entityDisplayName';\r\nexport const ChangeBarColumnId = 'changeBar';\r\nexport const InsightColumnId = 'insight';\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport {\r\n TableColumnDefinition,\r\n createTableColumn,\r\n} from '@fluentui/react-components';\r\nimport { EntityName } from '@bingads-webui-campaign-react/overview-grid-entity-name';\r\n\r\nimport { IColumnData, IMetricFormatter } from './types';\r\nimport { TextCell } from './table-cell/text-cell';\r\nimport { ChangeBarCell } from './table-cell/change-bar-cell';\r\nimport { InsightCell } from './table-cell/insight-cell';\r\nimport { PopoverInfo } from './popover-info';\r\nimport { EntityNameColumnId, ChangeBarColumnId, InsightColumnId } from './const';\r\n\r\ninterface IGetColumnsProps {\r\n selectedMetric: string;\r\n metricFormatter: IMetricFormatter;\r\n currentDateRange: {\r\n end: Date;\r\n start: Date;\r\n };\r\n comparisonDateRange: {\r\n end: Date;\r\n start: Date;\r\n };\r\n i18n: any;\r\n renderFluctuationPopup: Function;\r\n metrics: Array<{\r\n key: string,\r\n displayName: string,\r\n }>;\r\n}\r\n\r\nconst FluctuationTypeMap = {\r\n Clicks: 'Click',\r\n Impressions: 'Impression',\r\n Spend: 'Spend',\r\n Conversions: 'Conversion',\r\n};\r\n\r\nfunction hasFluctuation(availableInsights, selectedMetric) {\r\n const current = FluctuationTypeMap[selectedMetric];\r\n return current && _.contains(availableInsights, current);\r\n}\r\n\r\nexport function getColumns({\r\n selectedMetric,\r\n metricFormatter,\r\n currentDateRange,\r\n comparisonDateRange,\r\n i18n,\r\n metrics,\r\n renderFluctuationPopup,\r\n}: IGetColumnsProps): TableColumnDefinition 0 ? styles.positiveBox : styles.negativeBox)} />}\r\n {i18n.getString(_TL_('Change: {{changeValue}} ({{changePercentage}})'), { changeValue: formattedChange, changePercentage: formattedPercentageChange })}\r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { memo, FC, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport {\r\n Button,\r\n Caption1,\r\n Caption1Stronger,\r\n Caption2,\r\n DataGridBody,\r\n DataGridRow,\r\n DataGrid,\r\n DataGridCell,\r\n DataGridHeader,\r\n Image,\r\n Popover,\r\n PopoverTrigger,\r\n PopoverSurface,\r\n makeStyles,\r\n} from '@fluentui/react-components';\r\nimport { Info16Regular } from '@fluentui/react-icons';\r\nimport classNames from 'classnames';\r\nimport { OverviewCardFooter, usePaginationConfig, IFooterButtonConfig } from '@bingads-webui-campaign-react/overview-card-footer';\r\n\r\nimport { IPerformanceData, IColumnData, IMetricFormatter } from './types';\r\nimport { MetricPicker } from './metric-picker';\r\nimport { getColumns } from './columns';\r\nimport { TableShimmer } from './table-shimmer';\r\nimport { EntityNameColumnId, InsightColumnId, ChangeBarColumnId } from './const';\r\nimport { getComparisonText } from './get-comparison-text';\r\nimport SearchExclamationImage from '../media/search-exclamation-image.png';\r\n\r\nexport const useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n },\r\n grid: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n },\r\n entityNameColumn: {\r\n flexGrow: 1.8,\r\n },\r\n insightColumn: {\r\n flexGrow: 0.3,\r\n },\r\n barColumn: {\r\n flexGrow: 2,\r\n },\r\n contentHeaderContainer: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n popover: {\r\n width: '300px',\r\n },\r\n noDataContainer: {\r\n flexGrow: 1,\r\n textAlign: 'center',\r\n alignContent: 'center',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n dateContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n});\r\n\r\nexport interface IOverviewTopChangesProps {\r\n isLoading?: boolean;\r\n selectedMetric: string;\r\n data?: IPerformanceData[];\r\n i18n: any;\r\n metricFormatter: IMetricFormatter;\r\n footerButtonConfigs?: IFooterButtonConfig[];\r\n getHref: Function;\r\n getPopoverContent?: Function;\r\n entityType: string;\r\n metrics: Array<{\r\n key: string,\r\n displayName: string,\r\n }>;\r\n onMetricSelect: (key: string) => void;\r\n currentDateRange: {\r\n end: Date;\r\n start: Date;\r\n };\r\n comparisonDateRange: {\r\n end: Date;\r\n start: Date;\r\n };\r\n renderFluctuationPopup: Function;\r\n}\r\n\r\nexport const OverviewTopChanges: FC\r\n \r\n );\r\n});\r\n\r\nOverviewTopChanges.defaultProps = {\r\n isLoading: false,\r\n data: [],\r\n footerButtonConfigs: null,\r\n getPopoverContent: undefined,\r\n};\r\n","export const getComparisonText = (i18n, comparisonDateRange) => {\r\n let comparisonDateRangeDateRangeText;\r\n let comparisonText;\r\n\r\n if (comparisonDateRange.rangeInDays <= 7) {\r\n comparisonText = i18n.getString(_TL_('last week'));\r\n } else {\r\n comparisonText = i18n.getString(_TL_('previous period'));\r\n }\r\n\r\n const formattedStart = i18n.formatDate(comparisonDateRange.start);\r\n const formattedEnd = i18n.formatDate(comparisonDateRange.end);\r\n\r\n if (formattedStart === formattedEnd) {\r\n comparisonDateRangeDateRangeText = `(${formattedStart})`;\r\n } else {\r\n comparisonDateRangeDateRangeText = `(${formattedStart} - ${formattedEnd})`;\r\n }\r\n\r\n if (comparisonDateRange.key === 'customPeriod') {\r\n comparisonText = '';\r\n }\r\n\r\n return `${i18n.getString(_TL_('Compared to '))}${comparisonText} ${comparisonDateRangeDateRangeText}`;\r\n};\r\n","import classNames from 'classnames';\r\nimport React from 'react';\r\nimport { Shimmer, ShimmerElementType } from '@fluentui/react';\r\nimport { makeStyles } from '@fluentui/react-components';\r\n\r\nconst rowElement = [{ type: ShimmerElementType.line, height: 32 }];\r\nconst buttonElement = [\r\n { type: ShimmerElementType.line, height: 32, width: '25%' },\r\n { type: ShimmerElementType.gap, width: '60%' },\r\n { type: ShimmerElementType.line, height: 16, width: '15%' },\r\n];\r\n\r\nconst useShimmerStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n justifyContent: 'space-between',\r\n },\r\n});\r\n\r\nexport function LoadShimmer() {\r\n const styles = useShimmerStyles();\r\n return (\r\n \r\n \r\n \r\n {_.isEmpty(dataToDisplay) &&\r\n \r\n {i18n.getString(_TL_('Change the date range of this tile by using the date selector in the upper right-hand corner of the Overview page.'))}\r\n \r\n \r\n \r\n }\r\n {!_.isEmpty(dataToDisplay) &&\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","export const TIP_ID = {\r\n PROMO: 'promotion',\r\n ADD_PAYMENT: 'add_payment',\r\n CREATE_CAMPAIGN: 'create_campaign',\r\n COACHING: 'coaching',\r\n HELP: 'help',\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { Image } from '@fluentui/react-components';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { getRoutePathById, allSiteMap } from '@bingads-webui-react/with-site-map';\r\n\r\nimport { TIP_ID } from './consts';\r\n\r\nimport createCampaignImage from '../media/create-campaign.png';\r\nimport promoImage from '../media/promo.png';\r\nimport paymentImage from '../media/payment.png';\r\nimport coachingImage from '../media/coaching.png';\r\nimport helpImage from '../media/help.png';\r\n\r\nfunction getCreateCampaignText({ i18n, hasCoupon, scope }) {\r\n const href = `${getRoutePathById(allSiteMap, 'import-google')}?${scope.stringify()}`;\r\n const template = hasCoupon ? _TL_('Reach millions on the Microsoft Advertising Network. Start now by building your first campaign or {{importLink}}importing them directly from Google Ads{{/importLink}}. Once you do, you\\'ll unlock our promotional offer for new customers!') : _TL_('Reach millions on the Microsoft Advertising Network. Start now by building your first campaign or {{importLink}}importing them directly from Google Ads{{/importLink}}.');\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import _ from 'underscore';\r\nimport { useMemo, useContext } from 'react';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById, allSiteMap } from '@bingads-webui-react/with-site-map';\r\n\r\nimport { TIP_ID } from './consts';\r\n\r\nexport const useActionButtons = ({\r\n serverContext, getLocalizedSupportLink, i18n, hasPaymentPermission, isPaymentFirstTile, hasCoupon, showWelcomeMsg,\r\n}) => {\r\n const { scope } = useContext(ScopeContext) as any;\r\n\r\n return useMemo(() => {\r\n const ccBaseUrlNoTrailingSlash = _.get(serverContext, ['Urls', 'ClientCenterBaseUrl'], '').replace(/\\/$/, '');\r\n return ({\r\n [TIP_ID.PROMO]: [{\r\n text: i18n.getString(_TL_('See promotional offers')),\r\n onClick: () => scope.save(`${ccBaseUrlNoTrailingSlash}${getRoutePathById(allSiteMap, 'coupon')}`),\r\n analyticsId: 'welcome-coupon-status',\r\n }],\r\n [TIP_ID.CREATE_CAMPAIGN]: [{\r\n text: i18n.getString(_TL_('Create campaign')),\r\n onClick: () => scope.save(getRoutePathById(allSiteMap, 'campaign-create-objective')),\r\n analyticsId: hasCoupon ? 'welcome-create-campaign-coupon' : 'welcome-create-campaign',\r\n }],\r\n [TIP_ID.ADD_PAYMENT]: [{\r\n text: i18n.getString(_TL_('Do this now')),\r\n onClick: () => {\r\n if (!hasPaymentPermission) {\r\n return;\r\n }\r\n scope.set({ ...scope.values, showTaxForm: false });\r\n scope.save(`${ccBaseUrlNoTrailingSlash}${getRoutePathById(allSiteMap, 'paymentMethods')}`);\r\n },\r\n analyticsId: showWelcomeMsg && isPaymentFirstTile ? 'welcome-add-payment-first' : 'welcome-add-payment-second',\r\n }],\r\n [TIP_ID.COACHING]: [{\r\n text: i18n.getString(_TL_('Learn more')),\r\n onClick: () => scope.save(getLocalizedSupportLink({\r\n Culture: serverContext.CurrentLocale,\r\n }).coachingLink),\r\n analyticsId: 'welcome-onboarding-consultation',\r\n }],\r\n [TIP_ID.HELP]: [{\r\n text: i18n.getString(_TL_('Learn more')),\r\n onClick: () => { },\r\n analyticsId: 'welcome-help',\r\n helpId: 'ext51022',\r\n }],\r\n });\r\n }, [i18n, hasCoupon, showWelcomeMsg, isPaymentFirstTile, scope, hasPaymentPermission, getLocalizedSupportLink, serverContext]);\r\n};\r\n","import React, { memo, FC, useMemo } from 'react';\r\nimport {\r\n makeStyles,\r\n} from '@fluentui/react-components';\r\nimport classNames from 'classnames';\r\nimport { OverviewCardFooter, usePaginationConfig } from '@bingads-webui-campaign-react/overview-card-footer';\r\n\r\nimport { LoadShimmer } from './load-shimmer';\r\nimport { Tip } from './tip';\r\nimport { useActionButtons } from './use-action-buttons';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n },\r\n});\r\n\r\ninterface IOverviewWelcomeTipsProps {\r\n isLoading?: boolean;\r\n pages: string[];\r\n hasPaymentPermission: boolean;\r\n showWelcomeMsg: boolean;\r\n isPaymentFirstTile: boolean;\r\n hasCoupon: boolean\r\n name: string;\r\n serverContext: any;\r\n getLocalizedSupportLink: Function;\r\n i18n: any;\r\n}\r\n\r\nexport const OverviewWelcomeTips: FC\r\n {config[tipId].image}\r\n \r\n \r\n \r\n );\r\n});\r\n\r\nOverviewWelcomeTips.defaultProps = {\r\n isLoading: false,\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\nimport circleSolid from '../../media/chart/CircleSolid.svg';\r\nimport circleDotted from '../../media/chart/CircleDotted.svg';\r\nimport diamondSolid from '../../media/chart/DiamondSolid.svg';\r\nimport diamondDotted from '../../media/chart/DiamondDotted.svg';\r\nimport triangleDownSolid from '../../media/chart/TriangleDownSolid.svg';\r\nimport triangleDownDotted from '../../media/chart/TriangleDownDotted.svg';\r\nimport triangleUpSolid from '../../media/chart/TriangleUpSolid.svg';\r\nimport triangleUpDotted from '../../media/chart/TriangleUpDotted.svg';\r\n\r\nconst metricPickerBorderColor = [\r\n '#2e76bc',\r\n '#022F22',\r\n '#e2068c',\r\n '#4a0b3f',\r\n];\r\n\r\nconst getMetricPickerBorderStyle = column => ({\r\n ...shorthands.border('1px', 'solid', metricPickerBorderColor[column]),\r\n});\r\n\r\nexport const useStyles = makeStyles({\r\n metricPickerItem: {\r\n display: 'flex',\r\n flexGrow: 1,\r\n flexBasis: 0,\r\n flexDirection: 'column',\r\n ...shorthands.borderRadius('4px'),\r\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\r\n minWidth: '1px',\r\n alignItems: 'stretch',\r\n justifyContent: 'flex-start',\r\n height: '70px',\r\n maxWidth: '160px',\r\n boxSizing: 'border-box',\r\n '&.ba-pc-metric-picker-item-size-s': {\r\n width: '100%',\r\n maxWidth: 'unset',\r\n flexBasis: 'unset',\r\n },\r\n '&.ba-pc-metric-picker-item-size-m': {\r\n width: 'calc((100% - 12px) / 2)',\r\n maxWidth: 'unset',\r\n flexBasis: 'unset',\r\n },\r\n '&.ba-pc-metric-picker-item-index-0': {\r\n '& .original-marker': {\r\n backgroundImage: `url(\"${circleSolid}\")`,\r\n },\r\n '& .comparison-marker': {\r\n backgroundImage: `url(\"${circleDotted}\")`,\r\n },\r\n ...getMetricPickerBorderStyle(0),\r\n },\r\n '&.ba-pc-metric-picker-item-index-1': {\r\n '& .original-marker': {\r\n backgroundImage: `url(\"${diamondSolid}\")`,\r\n },\r\n '& .comparison-marker': {\r\n backgroundImage: `url(\"${diamondDotted}\")`,\r\n },\r\n ...getMetricPickerBorderStyle(1),\r\n },\r\n '&.ba-pc-metric-picker-item-index-2': {\r\n '& .original-marker': {\r\n backgroundImage: `url(\"${triangleDownSolid}\")`,\r\n },\r\n '& .comparison-marker': {\r\n backgroundImage: `url(\"${triangleDownDotted}\")`,\r\n },\r\n ...getMetricPickerBorderStyle(2),\r\n },\r\n '&.ba-pc-metric-picker-item-index-3': {\r\n '& .original-marker': {\r\n backgroundImage: `url(\"${triangleUpSolid}\")`,\r\n },\r\n '& .comparison-marker': {\r\n backgroundImage: `url(\"${triangleUpDotted}\")`,\r\n },\r\n ...getMetricPickerBorderStyle(3),\r\n },\r\n },\r\n dropdown: {\r\n ...shorthands.flex(0, 0, 'auto'),\r\n alignSelf: 'stretch',\r\n },\r\n pickerName: {\r\n ...shorthands.overflow('hidden'),\r\n fontSize: '14px',\r\n height: '19px',\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n },\r\n dropdownTriggerButton: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n ...shorthands.padding('2px', '12px'),\r\n },\r\n\r\n toggleButton: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start',\r\n ...shorthands.padding('0px', '8px', '8px', '8px'),\r\n },\r\n pickerValue: {\r\n display: 'block',\r\n alignItems: 'center',\r\n ...shorthands.overflow('hidden'),\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n color: '#797775',\r\n fontSize: '24px',\r\n fontWeight: '600',\r\n },\r\n imageIndicator: {\r\n ...shorthands.flex(0, 0, 'auto'),\r\n display: 'flex',\r\n minWidth: '14px',\r\n height: '27px',\r\n },\r\n marker: {\r\n backgroundRepeat: 'no-repeat',\r\n width: '14px',\r\n height: '27px',\r\n backgroundPositionX: 'center',\r\n backgroundPositionY: 'center',\r\n backgroundSize: 'contain',\r\n ...shorthands.flex(0, 0, 'auto'),\r\n },\r\n});\r\n","import React, { useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Tooltip,\r\n Button,\r\n Menu,\r\n MenuTrigger,\r\n MenuPopover,\r\n MenuList,\r\n MenuItem,\r\n Text,\r\n} from '@fluentui/react-components';\r\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\r\nimport { TooltipHost } from '@fluentui/react';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive-unthemed';\r\nimport { ResponsiveSize } from '@bingads-webui-campaign-react/pmax-overview-responsive-utils';\r\n\r\nimport { useStyles } from '../styles/metric-picker-item';\r\n\r\nexport interface IMetricPickerItemProps {\r\n isSelected: boolean;\r\n index: number;\r\n displayName: string;\r\n total: string;\r\n i18n: any;\r\n hideCurrency: boolean;\r\n dropdownMetrics: Array<{\r\n key: string,\r\n displayName: string,\r\n }>;\r\n isComparisonEnabled: boolean;\r\n responsiveSize: ResponsiveSize;\r\n onMetricToggle: () => void;\r\n onMetricDropdownSelect: (key: string) => void;\r\n}\r\n\r\nexport function MetricPickerItem(props: IMetricPickerItemProps) {\r\n const {\r\n isSelected,\r\n index,\r\n displayName,\r\n total,\r\n i18n,\r\n hideCurrency,\r\n dropdownMetrics,\r\n isComparisonEnabled = false,\r\n responsiveSize,\r\n onMetricToggle,\r\n onMetricDropdownSelect,\r\n } = props;\r\n const classes = useStyles();\r\n const dropdownItems = useMemo(() => dropdownMetrics.map((metric) => {\r\n const handleDropdownSelect = () => onMetricDropdownSelect(metric.key);\r\n return (\r\n \r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { Shimmer, ShimmerElementType, ThemeProvider, mergeStyles } from '@fluentui/react';\r\n\r\nconst wrapperClass = mergeStyles({\r\n padding: 2,\r\n selectors: {\r\n '& > .ms-Shimmer-container': {\r\n margin: '10px 0',\r\n },\r\n },\r\n});\r\n\r\nconst shimmerWithElement = [\r\n { type: ShimmerElementType.line, height: 80, width: 160 },\r\n { type: ShimmerElementType.gap, width: 12 },\r\n { type: ShimmerElementType.line, height: 80, width: 160 },\r\n { type: ShimmerElementType.gap, width: 12 },\r\n { type: ShimmerElementType.line, height: 80, width: 160 },\r\n { type: ShimmerElementType.gap, width: 12 },\r\n { type: ShimmerElementType.line, height: 80, width: 160 },\r\n];\r\n\r\nexport function MetricPickerShimmer() {\r\n return (\r\n \r\n \r\n \r\n \r\n {isSelected &&\r\n <>\r\n \r\n {isComparisonEnabled && }\r\n \r\n }\r\n \r\n \r\n {items}\r\n \r\n );\r\n}\r\n\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n height: '100%',\r\n ...shorthands.borderTop('1px', 'solid', tokens.colorNeutralStroke1),\r\n ...shorthands.margin('0', '23px'),\r\n },\r\n});\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Text,\r\n} from '@fluentui/react-components';\r\n\r\nimport { useStyles } from '../styles/no-data';\r\n\r\nexport function NoData({ i18n, showErrorText } : {\r\n i18n: { getString: (key: string) => string },\r\n showErrorText?: boolean,\r\n}) {\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n );\r\n}\r\n\r\nNoData.defaultProps = {\r\n showErrorText: false,\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nimport circleSolid from '../../media/chart/CircleSolid.svg';\r\nimport circleDotted from '../../media/chart/CircleDotted.svg';\r\nimport diamondSolid from '../../media/chart/DiamondSolid.svg';\r\nimport diamondDotted from '../../media/chart/DiamondDotted.svg';\r\nimport triangleDownSolid from '../../media/chart/TriangleDownSolid.svg';\r\nimport triangleDownDotted from '../../media/chart/TriangleDownDotted.svg';\r\nimport triangleUpSolid from '../../media/chart/TriangleUpSolid.svg';\r\nimport triangleUpDotted from '../../media/chart/TriangleUpDotted.svg';\r\n\r\nexport const useStyles = makeStyles({\r\n cardContent: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('12px'),\r\n\r\n '& .highcharts-tooltip': {\r\n '& .highcharts-label-box.highcharts-tooltip-box': {\r\n opacity: 0,\r\n },\r\n '& > span': {\r\n zIndex: 1,\r\n },\r\n '& .perf-graph-tool-tip': {\r\n display: 'flex',\r\n boxShadow: '0 3.2px 7.2px 0 rgba(0,0,0,.132), 0 0.6px 1.8px 0 rgba(0,0,0,.108)',\r\n backgroundColor: 'rgba(255, 255, 255, 0.95)',\r\n '@supports (backdrop-filter: blur(60px))': {\r\n backdropFilter: 'blur(60px)',\r\n },\r\n '& .charts-tooltip': {\r\n ...shorthands.margin('15px'),\r\n\r\n '& .tool-tip-title': {\r\n marginBottom: '10px',\r\n },\r\n '& .tool-tip-properties': {\r\n display: 'grid',\r\n '& .tool-tip-property:nth-child(1)': {\r\n '-ms-grid-row': '1',\r\n gridRowStartStart: '1',\r\n '-ms-grid-column': '1',\r\n gridColumnStartStart: '1',\r\n marginRight: '30px',\r\n },\r\n '& .tool-tip-property:nth-child(2)': {\r\n '-ms-grid-row': '1',\r\n gridRowStart: '1',\r\n '-ms-grid-column': '2',\r\n gridColumnStart: '2',\r\n },\r\n '& .tool-tip-property:nth-child(3)': {\r\n '-ms-grid-row': '2',\r\n gridRowStart: '2',\r\n '-ms-grid-column': '1',\r\n gridColumnStart: '1',\r\n marginRight: '30px',\r\n marginTop: '10px',\r\n },\r\n '& .tool-tip-property:nth-child(4)': {\r\n '-ms-grid-row': '2',\r\n gridRowStart: '2',\r\n '-ms-grid-column': '2',\r\n gridColumnStart: '2',\r\n marginTop: '10px',\r\n },\r\n '& .tool-tip-property': {\r\n display: 'flex',\r\n\r\n '& .tool-tip-icon': {\r\n backgroundRepeat: 'no-repeat',\r\n width: '14px',\r\n height: '40px',\r\n backgroundPositionX: 'center',\r\n backgroundPositionY: 'center',\r\n backgroundSize: 'contain',\r\n marginRight: '15px',\r\n },\r\n '& .circle-solid': {\r\n backgroundImage: `url(\"${circleSolid}\")`,\r\n },\r\n '& .circle-shortdash': {\r\n backgroundImage: `url(\"${circleDotted}\")`,\r\n },\r\n '& .diamond-solid': {\r\n backgroundImage: `url(\"${diamondSolid}\")`,\r\n },\r\n '& .diamond-shortdash': {\r\n backgroundImage: `url(\"${diamondDotted}\")`,\r\n },\r\n '& .triangle-down-solid': {\r\n backgroundImage: `url(\"${triangleDownSolid}\")`,\r\n },\r\n '& .triangle-down-shortdash': {\r\n backgroundImage: `url(\"${triangleDownDotted}\")`,\r\n },\r\n '& .triangle-solid': {\r\n backgroundImage: `url(\"${triangleUpSolid}\")`,\r\n },\r\n '& .triangle-shortdash': {\r\n backgroundImage: `url(\"${triangleUpDotted}\")`,\r\n },\r\n\r\n '& .tool-tip-details': {\r\n\r\n '& .tool-tip-value': {\r\n fontSize: '16px',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .perf-graph-tool-tip.pop': {\r\n '& .charts-tooltip': {\r\n ...shorthands.margin('15px'),\r\n\r\n '& .tool-tip-properties': {\r\n display: 'block',\r\n\r\n '& .tool-tip-property + .tool-tip-property': {\r\n marginTop: '20px',\r\n },\r\n\r\n '& .tool-tip-property': {\r\n display: 'flex',\r\n marginRight: '0px !important',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .highcharts-xaxis-labels+.highcharts-xaxis-labels': {\r\n marginTop: '-22px',\r\n },\r\n },\r\n chartContainer: {\r\n height: '225px',\r\n fontSize: '12px',\r\n '& [data-highcharts-chart]': {\r\n ...shorthands.overflow('visible !important'),\r\n '& .highcharts-container': {\r\n ...shorthands.overflow('visible !important'),\r\n zIndex: 'auto !important', // Fix for the tooltip hidden behind the tile below\r\n '& .highcharts-root': {\r\n ...shorthands.overflow('visible'),\r\n },\r\n },\r\n },\r\n },\r\n spinner: {\r\n marginTop: '70px',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport { formatMetric } from '@bingads-webui-campaign-legacy/performance-metric-formatter/index';\r\n\r\nimport tooltipTemplateVNext from './tooltip-template-ui-next.pug';\r\n\r\nfunction formatPoint(point, options) {\r\n return formatMetric(point.series.options.category, point.y, options);\r\n}\r\n\r\nexport function formatTooltip({\r\n points,\r\n hideCurrency,\r\n}) {\r\n const originalPoints = [];\r\n const comparativePoints = [];\r\n\r\n _.each(points, (point) => {\r\n if (point.series.options.isOriginal) {\r\n originalPoints.push(point);\r\n } else if (point.series.options.isComparison) {\r\n comparativePoints.push(point);\r\n }\r\n });\r\n\r\n const tooltip = tooltipTemplateVNext;\r\n const originalPointsTooltip = _.isEmpty(originalPoints) ?\r\n '' :\r\n tooltip({\r\n title: originalPoints[0].key,\r\n points: originalPoints,\r\n formatPoint,\r\n formatOption: { hideCurrency },\r\n });\r\n\r\n const comparativePointsTooltip = _.isEmpty(comparativePoints) ?\r\n '' :\r\n tooltip({\r\n // we don't have moving average config for overview performance card\r\n title: comparativePoints[0].key,\r\n points: comparativePoints,\r\n formatPoint,\r\n formatOption: { hideCurrency },\r\n });\r\n\r\n const havePop = !_.isEmpty(comparativePoints);\r\n const className = havePop ? 'perf-graph-tool-tip pop' : 'perf-graph-tool-tip';\r\n\r\n return `\r\n {showErrorText &&\r\n \r\n ${originalPointsTooltip}${comparativePointsTooltip}`;\r\n}\r\n","const originalPrimary = '#01188F';\r\nconst comparativePrimary = '#808CC7'; // 50% mix of originalPrimary and white\r\nconst originalSecondary = '#B40091';\r\nconst comparativeSecondary = '#D980C8'; // 50% mix of originalSecondary and white\r\nconst originalTertiary = '#006D21';\r\nconst comparativeTertiary = '#80B690'; // 50% mix of originalTertiary and white\r\nconst originalQuaternary = '#0078D7';\r\nconst comparativeQuaternary = '#8CC2ED'; // 50% mix of originalQuaternary and white\r\n\r\nexport const colors = [\r\n {\r\n original: originalPrimary,\r\n comparative: comparativePrimary,\r\n },\r\n {\r\n original: originalSecondary,\r\n comparative: comparativeSecondary,\r\n },\r\n {\r\n original: originalTertiary,\r\n comparative: comparativeTertiary,\r\n },\r\n {\r\n original: originalQuaternary,\r\n comparative: comparativeQuaternary,\r\n },\r\n];\r\n\r\nexport const primary = colors[0];\r\n\r\nexport const secondary = colors[1];\r\n\r\nexport const original = {\r\n primary: originalPrimary,\r\n secondary: originalSecondary,\r\n tertiary: originalTertiary,\r\n quaternary: originalQuaternary,\r\n};\r\n\r\nexport const comparative = {\r\n primary: comparativePrimary,\r\n secondary: comparativeSecondary,\r\n tertiary: comparativeTertiary,\r\n quaternary: comparativeQuaternary,\r\n};\r\n\r\nexport const uiNextColors = [\r\n {\r\n original: '#0078D4',\r\n comparative: '#0078D4',\r\n },\r\n {\r\n original: '#022F22',\r\n comparative: '#022F22',\r\n },\r\n {\r\n original: '#E3008C',\r\n comparative: '#E3008C',\r\n },\r\n {\r\n original: '#4B003F',\r\n comparative: '#4B003F',\r\n },\r\n];\r\n\r\nexport const uiNextOriginal = '#484644';\r\n\r\nexport const uiNextComparative = '#605e5c';\r\n","import { TAxisOptions } from '../types/types';\r\n\r\nexport const symbols = [\r\n 'circle',\r\n 'diamond',\r\n 'triangle-down',\r\n 'triangle',\r\n];\r\n\r\nexport const gridLineStyle: TAxisOptions = {\r\n gridLineDashStyle: 'Solid',\r\n gridLineColor: '#E1DFDD',\r\n tickPixelInterval: 150,\r\n};\r\n","import _ from 'underscore';\r\nimport { get } from 'lodash';\r\nimport { useMemo } from 'react';\r\nimport { fromLegacyTimeZone, toIANATimeZone } from '@bingads-webui-universal/time-zone-converter';\r\n\r\nimport { uiNextColors } from '../styles/color';\r\nimport { symbols } from '../styles/line';\r\n\r\nexport interface IDataPoint {\r\n DateTime: string;\r\n Value: number;\r\n}\r\nexport interface IDataPointWithDate {\r\n DateTime: Date;\r\n Value: number;\r\n}\r\nexport interface IPerformanceTimeSeries {\r\n UniqueId: string;\r\n MetricName: string;\r\n PrimaryDataPoints: IDataPoint[];\r\n ComparisonDataPoints: IDataPoint[];\r\n}\r\n\r\ninterface ISeriesWithDate {\r\n MetricName: string;\r\n PrimaryDataPoints: ArrayMock Fluent Chart);\r\n// *********** DELETE THIS WHEN FLUENT CHART IS ADDED ***********************\r\nexport function withFluentChart\r\n \r\n );\r\n}\r\n\r\nPerformanceCardInternal.defaultProps = {\r\n isLoading: false,\r\n hasError: false,\r\n hideCurrency: false,\r\n};\r\n\r\nexport const PerformanceCard = withHighchartsChart(PerformanceCardInternal);\r\nexport const PerformanceCardFluent = withFluentChart(PerformanceCardInternal);\r\n","import { ResponsiveSize } from './types';\r\n\r\nexport const SortedResponsiveSizes: ResponsiveSize[] = ['s', 'm', 'l', 'xl', 'xxl'];\r\n\r\nexport const isSizeInList = (size: ResponsiveSize, list: ResponsiveSize[]) => list.includes(size);\r\n\r\nexport const isSizeLargerThan = (size: ResponsiveSize, reference: ResponsiveSize) => SortedResponsiveSizes.indexOf(size) > SortedResponsiveSizes.indexOf(reference);\r\n\r\nexport const isSizeSmallerThan = (size: ResponsiveSize, reference: ResponsiveSize) => SortedResponsiveSizes.indexOf(size) < SortedResponsiveSizes.indexOf(reference);\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useSearchableMultiSelectorComboboxStyles = makeStyles({\r\n root: {\r\n maxWidth: '400px',\r\n minWidth: 'auto',\r\n\r\n // '&::after': {\r\n // content: 'none', // Removes the line\r\n // borderBottom: 'none',\r\n // },\r\n },\r\n resultsTitleContainer: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n selectAllButton: {\r\n display: 'flex',\r\n color: '#115EA3',\r\n fontFamily: 'var(--FamilyBase)',\r\n fontSize: 'var(--Size300)',\r\n fontWeight: 400,\r\n lineHeight: 'var(--Lineheight300)',\r\n textAlign: 'left',\r\n textUnderlinePosition: 'from-font',\r\n },\r\n});\r\n\r\nexport const useSearchableMultiSelectorTagsStyles = makeStyles({\r\n root: {\r\n marginBottom: '8px',\r\n },\r\n group: {\r\n flexWrap: 'wrap',\r\n ...shorthands.gap('8px'),\r\n },\r\n});\r\n\r\nexport const useSearchableMultiSelectorStyles = makeStyles({\r\n labelContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginBottom: tokens.spacingVerticalXS,\r\n justifyContent: 'space-between',\r\n },\r\n labelContent: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginBottom: tokens.spacingVerticalXS,\r\n },\r\n removeAllButton: {\r\n display: 'flex',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '12px',\r\n fontWeight: 400,\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\r\nimport { Button, Combobox, mergeClasses, Option, OptionGroup, Tooltip } from '@fluentui/react-components';\r\nimport { SearchRegular } from '@fluentui/react-icons';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nimport { useSearchableMultiSelectorComboboxStyles } from './styles';\r\nimport { FetchingStatus } from '../hooks/use-fetching-state';\r\nimport { BaseResultType } from '../types';\r\n\r\ndeclare function _TL_(arg0: string): string;\r\n\r\nconst InvalidOptionValues = ['empty-option', 'loading-option', 'no-more-option', undefined];\r\n\r\nexport interface SearchableMultiSelectorComboboxProps\r\n \r\n \r\n {resultsTitle}\r\n {allowSelectAll && (\r\n \r\n ), [i18n, classes, resultsTitle, allowSelectAll, onSelectAll]);\r\n\r\n return (\r\n {result?.name}\r\n );\r\n }, [value]);\r\n\r\n const onChangeTagItems = useCallback((newTagItems) => {\r\n const newSelected = value.filter(({ id }) => newTagItems.includes(id));\r\n onChange(newSelected);\r\n }, [onChange, value]);\r\n\r\n const addItem = useCallback(newItem =>\r\n onChange(value.concat(newItem)), [onChange, value]);\r\n\r\n const removeItem = useCallback(removedId =>\r\n onChange(value.filter(({ id }) => id !== removedId)), [onChange, value]);\r\n\r\n const toggleOption = useCallback((newSelected) => {\r\n const isAlreadySelected = value.some(({ id }) => id === newSelected.id);\r\n\r\n if (isAlreadySelected) {\r\n removeItem(newSelected.id);\r\n } else {\r\n addItem(newSelected);\r\n }\r\n }, [addItem, removeItem, value]);\r\n\r\n const selectAllOptions = useCallback(() => {\r\n const newSelected = results.filter(({ id }) => !value.some(({ id: selectedId }) => id === selectedId));\r\n onChange(value.concat(newSelected));\r\n }, [value, results, onChange]);\r\n\r\n const removeAllSelected = useCallback(() => {\r\n onChange([]);\r\n }, [onChange]);\r\n\r\n const renderLabelWithHelpButton = useCallback(() => (\r\n \r\n \r\n ), [label, helpTopic, helpLabel, classes.labelContent]);\r\n\r\n const renderLabel = useCallback(() => (\r\n \r\n {onRenderLabel ? onRenderLabel() : renderLabelWithHelpButton()}\r\n\r\n {allowRemoveAll && tagItems.length > 0 && (\r\n \r\n ), [classes.labelContainer, classes.removeAllButton, onRenderLabel, renderLabelWithHelpButton, allowRemoveAll, removeAllSelected, i18n, tagItems.length]);\r\n\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nSearchableMultiSelectorInput.defaultProps = {\r\n className: undefined,\r\n helpTopic: undefined,\r\n helpLabel: undefined,\r\n loadingText: undefined,\r\n placeholderText: undefined,\r\n noResultsText: undefined,\r\n tooltipText: undefined,\r\n disabled: false,\r\n disableTags: false,\r\n fetchOnEmptyInput: false,\r\n multiSelect: true,\r\n onRenderOption: undefined,\r\n allowSelectAll: false,\r\n allowRemoveAll: false,\r\n resultsTitle: undefined,\r\n tagViewLimit: undefined,\r\n onRenderLabel: undefined,\r\n pageSize: undefined,\r\n};\r\n","import _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { useCallback, useState } from 'react';\r\n\r\nimport { BaseResultType } from '../types';\r\n\r\nconst DEBOUNCE_DELAY = 300;\r\n\r\nexport interface UsePaginatedFetchingStateProps\r\n \r\n \r\n );\r\n}\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useFooterStyles = makeStyles({\r\n footer: {\r\n marginTop: '12px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n});\r\n\r\n","import classNames from 'classnames';\r\nimport React, { useCallback, useContext } from 'react';\r\nimport { Button } from '@fluentui/react-components';\r\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\n\r\nimport { useFooterStyles } from '../styles/footer-styles';\r\nimport { IScopeContext, FooterProps } from '../utils/types';\r\n\r\nexport function Footer({\r\n showPagination,\r\n paginationConfig,\r\n i18n,\r\n campaignType,\r\n}: FooterProps) {\r\n const styles = useFooterStyles();\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const {\r\n current, total, onNext, onPrevious,\r\n } = paginationConfig;\r\n\r\n const onClick = useCallback(() => {\r\n let path = '/campaign/vnext/locations/campaign';\r\n // LinkedIn campaigns don't support campaign locations grid so far, so route user to campaign settings page\r\n if (campaignType === 'LinkedIn') {\r\n path = '/campaign/vnext/settings';\r\n }\r\n scope.save(path);\r\n }, [campaignType, scope]);\r\n\r\n return (\r\n \r\n \r\n {showPagination &&\r\n \r\n );\r\n}\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useNoLocationsStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n },\r\n imageContainer: {\r\n flexGrow: 1,\r\n flexBasis: '0',\r\n maxHeight: '210px',\r\n width: '100%',\r\n overflowY: 'hidden',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n display: 'flex',\r\n backgroundColor: '#FAFAFA',\r\n },\r\n image: {\r\n maxHeight: '148px',\r\n },\r\n title: {\r\n marginTop: '16px',\r\n },\r\n});\r\n\r\n","import classNames from 'classnames';\r\nimport React from 'react';\r\nimport { Image, Subtitle2, Body1 } from '@fluentui/react-components';\r\n\r\nimport { useNoLocationsStyles } from '../styles/no-locations-styles';\r\nimport { i18nProps } from '../utils/types';\r\nimport noDataImage from '../../media/no-data-image.png';\r\n\r\nexport function NoData({ i18n }: { i18n: i18nProps }) {\r\n const styles = useNoLocationsStyles();\r\n return (\r\n \r\n } appearance=\"transparent\" aria-label={i18n.getString('Previous')} />\r\n {i18n.getString(_TL_('{{current}} of {{total}}'), { current, total })}\r\n \r\n }\r\n \r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { Shimmer, ShimmerElementType } from '@fluentui/react';\r\n\r\nconst rowElement = [{ type: ShimmerElementType.line, height: 43 }];\r\nconst mapElement = [{ type: ShimmerElementType.line, height: 240 }];\r\n\r\nexport function TableShimmer() {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport function MapShimmer() {\r\n return (\r\n \r\n \r\n );\r\n}\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useTableStyles = makeStyles({\r\n value: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n});\r\n\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Table, TableCell, TableRow, TableBody, Body1 as Text\r\n} from '@fluentui/react-components';\r\n\r\nimport { TableShimmer } from './shimmer';\r\nimport { LOCATIONS_PER_PAGE } from '../utils/const';\r\nimport { getPageLocations } from '../utils/get-page-locations';\r\nimport { TopLocationsTableProps } from '../utils/types';\r\nimport { useTableStyles } from '../styles/table-styles';\r\n\r\nexport function TopLocationsTable({\r\n i18n,\r\n isLoading,\r\n locations,\r\n paginationConfig,\r\n}: TopLocationsTableProps) {\r\n const styles = useTableStyles();\r\n if (isLoading) {\r\n return \r\n
\r\n );\r\n}\r\n","import { PaginationConfigProps, LocationData } from './types';\r\n\r\nexport function getPageLocations(locations: LocationData[], paginationConfig: PaginationConfigProps, locationsPerPage: number) {\r\n return locations.slice((paginationConfig.current - 1) * locationsPerPage, paginationConfig.current * locationsPerPage);\r\n}\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useMapStyles = makeStyles({\r\n container: {\r\n height: '240px',\r\n width: '100%',\r\n '& .tool-tip-container': {\r\n ...shorthands.padding('15px'),\r\n boxShadow: '0 3.2px 7.2px 0 rgba(0,0,0,.132), 0 0.6px 1.8px 0 rgba(0,0,0,.108)',\r\n backgroundColor: 'rgba(255, 255, 255, 0.95)',\r\n '@supports (backdrop-filter: blur(60px))': {\r\n backdropFilter: 'blur(60px)',\r\n backgroundColor: 'rgba(255, 255, 255, 0.25)',\r\n },\r\n\r\n '& .date-range': {\r\n whiteSpace: 'nowrap',\r\n ...shorthands.margin('10px 0'),\r\n },\r\n '& .metric-container': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n '& .metric-container .metric-name': {\r\n marginRight: '5px',\r\n },\r\n '& .metric-container .metric-value': {\r\n fontWeight: 'bold',\r\n },\r\n '& .bubble-icon': {\r\n width: '12px',\r\n height: '12px',\r\n ...shorthands.borderStyle('solid'),\r\n ...shorthands.borderWidth('1px'),\r\n ...shorthands.borderColor('#107C10'),\r\n ...shorthands.borderRadius('6px'),\r\n marginRight: '5px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n '& .bubble-icon .dot': {\r\n width: '4px',\r\n height: '4px',\r\n ...shorthands.borderStyle('solid'),\r\n ...shorthands.borderWidth('2px'),\r\n ...shorthands.borderColor('#107C10'),\r\n ...shorthands.borderRadius('4px'),\r\n backgroundColor: '#107C10',\r\n },\r\n },\r\n },\r\n});\r\n\r\n","import React, { useRef, useMemo, useCallback } from 'react';\r\nimport { BingMapsView, LocationTarget, TARGETING_TYPE } from '@bingads-webui-react/bing-maps';\r\n\r\n// @ts-ignore\r\nimport tooltip from './map-tooltip.pug';\r\nimport { MapShimmer } from './shimmer';\r\nimport { TopLocationsMapProps, LocationData } from '../utils/types';\r\nimport { useMapStyles } from '../styles/map-styles';\r\n\r\nclass TopLocationTarget extends LocationTarget {\r\n topLocation: LocationData;\r\n\r\n constructor(topLocation: LocationData) {\r\n const location = {\r\n GeoPoint: topLocation.location,\r\n ExpandedName: topLocation.name,\r\n };\r\n super(location, TARGETING_TYPE.Top, topLocation.radius, 'mi');\r\n this.topLocation = topLocation;\r\n }\r\n}\r\n\r\nexport function TopLocationsMap({\r\n isLoading,\r\n locations,\r\n}: TopLocationsMapProps) {\r\n const styles = useMapStyles();\r\n const mapRef = useRef();\r\n\r\n const locationTargets = useMemo(() => {\r\n if (locations) {\r\n return locations.map(l => new TopLocationTarget(l));\r\n }\r\n return [];\r\n }, [locations]);\r\n\r\n const onGetTooltipHtmlContent = useCallback((event, locationTarget) => tooltip({\r\n name: locationTarget.topLocation.name,\r\n metricName: `${locationTarget.topLocation.metricName}:`,\r\n formattedValue: locationTarget.topLocation.formattedValue,\r\n date: locationTarget.topLocation.date,\r\n }), []);\r\n\r\n if (isLoading) {\r\n return \r\n \r\n );\r\n}\r\n","import _ from 'underscore';\r\nimport { useState, useEffect, useMemo } from 'react';\r\n\r\nimport { LOCATIONS_PER_PAGE } from '../utils/const';\r\nimport { LocationData, paginationConfigProps } from '../utils/types';\r\n\r\nexport const usePaginationConfig = (locations: Array\r\n \r\n );\r\n }\r\n\r\n if (headerState?.viewOption === VIEWS.MAP) {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport const TopLocationsCard = withPMaxPreferencesMetric(withBingMapsContext(withHeaderState(TopLocationsCardInternal)));\r\n","import React, { useContext } from 'react';\r\nimport hoistNonReactStatics from 'hoist-non-react-statics';\r\n\r\nimport { getDisplayName } from '@bingads-webui-react/hoc-utils';\r\nimport { BingMapsContextProvider } from '@bingads-webui-react/bing-maps';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\n// TODO: Send this in serverContext\r\nconst BING_MAPS_API_KEY = 'AgRuCtepgsuuCYV9J6S6w1j8ay2JJwnu8f5EPgv4kkoJoIuka8yui-NzKrvlESTQ';\r\n\r\nexport function withBingMapsContext(WrappedComponent) {\r\n const HOC = (props) => {\r\n const serverContext = useContext(ServerContext) as any;\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nTopLocationViewSelector.defaultProps = {\r\n state: undefined,\r\n};\r\n"],"names":["getAdStatuStyles","dropdown","borderColor","display","selectedOption","backgroundColor","option","adStatusOptions","textKey","_TL_","value","dropdownId","AdStatus","_ref","onAdStatusChange","data","i18n","useContext","I18nContext","classes","useDefaultStyles","handleStatusChange","useCallback","e","optionValue","currentValue","currentText","getString","_","_jsx","FluentProvider","theme","webLightTheme","children","_jsxs","className","Label","id","Dropdown","onOptionSelect","selectedOptions","map","Option","classNames","ValidatedAdStatus","withCustomValidation","validationProps","updateValidation","status","newData","useEffect","AdStatusSection","React","props","expand","rest","_objectWithoutProperties","_excluded","descriptionsCardSummaryDetails","useMemo","getStatusSummary","ValidatedPanel","_objectSpread","title","TextTitle","titleKey","iconAltText","details","attentionBeaconProps","getExtraProps","getPanelErrorProps","actuationProps","expandKey","countries","AE","code","name","AF","AD","AI","AG","AL","AM","AO","AQ","AR","AT","AU","AW","BB","BD","BF","BG","BH","BI","BJ","BM","BN","BO","BR","BS","BT","BV","BY","CA","CC","CD","CF","CG","CH","CI","CK","CL","CM","CN","CO","CR","CU","CV","CW","CX","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE","EG","EH","ER","ES","ET","FI","FJ","FM","FR","GA","GB","GD","GE","GG","GH","GI","GR","GT","GW","GY","HK","HN","HR","HT","HU","ID","IE","IL","IN","IQ","IR","IS","IT","JE","JM","JO","JP","KE","KG","KH","KI","KM","KN","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MG","MK","ML","MM","MN","MO","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PG","PH","PK","PL","PT","PS","QA","RO","RS","RU","RW","SA","SB","SC","SD","SE","SG","SH","SI","SK","SM","SN","SO","SR","ST","SV","SZ","TC","TD","TF","TG","TH","TJ","TK","TL","TM","TN","TR","TT","TV","TW","TZ","UA","UG","UM","US","UY","UZ","VA","VC","VE","VG","VN","VU","WS","YE","ZM","ZW","IO","XK","BQ","GS","WF","platforms","IOS","ANDROID","WINDOWS","attachIdsToResults","results","result","AppStoreId","AppTitle","useAppStoreRepository","platform","serverContext","ServerContext","acid","CurrentAccount","AdvertiserCustomerID","_scope$values","ScopeContext","scope","values","aid","cid","oDataConfig","odataPath","hostname","document","location","toLowerCase","indexOf","isLocal","odataToken","Token","oDataToken","concat","ServicesEndpoints","CampaignAPI","oDataPath","getODataConfig","searchAppManual","searchQuery","country","baseURL","url","queryify","$top","$skip","$search","$filter","countryCode","odata","get","then","response","searchApp","publisherQueries","getMatchedPublishers","newMenuItems","MatchingAppications","app","AppId","IconUrl","ImageLink","DeveloperName","PublisherName","AppPlatform","searchAppById","useStyles","makeStyles","appPanel","alignItems","marginTop","marginBottom","padding","columnGap","marginRight","flexDirection","fontSize","fontWeight","AppPanel","selectedApp","readOnly","onRemoveApp","AppUrl","FinalAppUrl","style","justifyContent","Image","height","width","src","Link","href","inine","target","Button","icon","Dismiss16Filled","appearance","onClick","useAppItemStyles","appItem","image","marginLeft","lineHeight","color","tokens","colorNeutralForeground1","AppItem","appTitle","appLogoUrl","appCountryCode","mergeClasses","Text","defaultProps","appStoreSelector","rowGap","maxWidth","UnvalidatedStoreAppSelector","onChange","defaultSelected","placeholderText","isCountryRefinementEnabled","_useState","useState","_useState2","_slicedToArray","setSelectedOption","_useState3","_useState4","advancedSearchMode","setAdvancedSearchMode","_useState5","_useState6","selectedCountry","setSelectedCountry","_useAppStoreRepositor","placeholder","onInputChange","searchValue","customRender","CountryCode","onCountrySelect","manualSearch","length","appStoreContainer","SearchableMultiSelectorInput","fetchFn","multiSelect","disableTags","onRenderOption","Checkbox","label","labelPosition","checked","StoreAppSelectorInternal","_ref2","isMounted","AppSetting","StoreAppSelector","withError","parseBudgetDetails","currency","BudgetDetailKeys","key","detail","Low","Mid","High","Range","formatNumber","CostPerConversion","CostPerClick","formatCurrency","Math","round","CTR","parseViewModelToMTModelForPMax","campaign","assetGroup","latestSuggestedBudget","isPerformanceEstimation","Budget","BiddingScheme","CampaignType","Languages","conversionGoals","locationTargets","_ref3","BusinessName","Descriptions","Headlines","LongHeadlines","CurrentBudgetAmount","Amount","_ref5","Type","TargetCpa","TargetRoas","TargetImpressionShare","MaxCpcAmount","MaxCpc","_ref7","goalSelection","goalScopeSelection","currentLocations","currentLevelSettings","LocationTargets","CriterionType","Criterion","LocationCriterion","LocationId","RadiusTargets","Radius","RadiusCriterion","Latitude","Longitude","BiddingSchemeId","biddingStrategyTypeId","MaxConversions","GoalCategory","goal","CampaignTypeId","CampaignTypeToAdvertiserChannelTypeId","LocationIds","CurrencyCode","GetBudget","RecommendedBudget","AdvertiserBudget","floor","Keywords","Age","MODE","CREATION","EDITING","BudgetSuggestionTiers","Advanced","Balanced","Starter","CustomBudget","BudgetSuggestionOfflineTiers","RecommendedBudgetSuggestionTier","ApiKeysBudgetSuggestion","BudgetTierTitles","Suggested","Current","Impressions","Clicks","Conversions","BudgetDetailKeysByBidType","_defineProperty","MaxConversionValue","MaxClicks","EnhancedCpc","CostPerSale","BudgetDetailKeysByCampaignType","CampaignTypes","PerformanceMax","BudgetDetailsKeysText","popupId","getMatchingBudgetTierBasedOnBudget","budgetSuggestionData","budgetAmount","mode","matchingBudgetTier","budget","BudgetAmountDaily","parseFloat","BudgetAmountMonthly","parserByCampaignType","getParserByCampaignType","campaignType","Default","num","toFixed","toString","Product","Shopping","DynamicSearchAds","Hotel","Audience","Smart","getRadioStyles","root","radioTitle","flexBox","flexWrap","leftBox","budgetDay","borderRight","verticalAlign","paddingRight","budgetMonth","column","metric","rightBox","badge","borderRadius","textAlign","border","background","metricTitle","metricValue","budgetDisclaimer","skeletionStyle","Metrics","budgetDetails","isLoading","bidType","getStyles","useResponsiveStyles","Skeleton","animation","SkeletonItem","_Fragment","HelpIcon","topic","BudgetItemLabel","tier","BudgetDetails","as","size","CustomBudgetLabel","_ref4","isSelected","onUpdateCustomBudget","customPerformanceData","hidePerformanceData","customBudgetResult","defaultBudget","minBudget","maxBudget","showDropdown","onSelectCurrency","currencies","ValidatedBudgetInput","onValidate","initialValue","alwaysShowError","isValid","budgetKey","selectedRadio","radio","radioGroup","BudgetSuggestionContainer","onBudgetValidate","selectedBudget","setSelectedBudget","setCustomBudgetResult","hasError","BudgetAmount","budgetTier","messages","matchingTier","RadioGroup","defaultValue","val","Object","keys","Radio","radioGroupContainer","gap","currentBudget","paddingLeft","borderBottom","budgetTitle","BudgetSuggestionOfflineContainer","formatBudgetSuggestionResponse","budgetResponse","template","JSON","stringify","formatBudgetTemplate","appliedBudget","Id","formattedBudgetResponse","CampaignID","CurrentBudget","BiddingStrategy","BudgetApplied","BudgetTier","useBudgetMetricsLogger","activity","ActivityContext","logBudgetFetchMetrics","trace","logCustomBudgetPerformanceMetrics","_ref6","performanceMetricsResponse","CustomBudgetPerformance","formatCustomBudgetPerformanceMetrics","logBudgetLandscapeMetrics","budgetLandscapeResponse","formatBudgetLandscapeTemplate","saveBudgetSuggestionMetrics","_ref8","useBudgetSuggestionRepository","campaignId","campaignIdFromScope","currentCampaignId","_useBudgetMetricsLogg","AdInsightAPI","oDataOptions","contentType","path","useRef","fetchBudgetSuggestionData","payload","options","post","parsedBudgetSuggestion","budgetSuggestions","budgetDailyKey","budgetDetailsKey","parseBudgetSuggestionAPI","current","fetchInitialBudgetSuggestionData","parser","saveBudget","biddingScheme","campaignResource","edmCampaign","types","resolve","ResourceIdentifier","bulkUpdate","bind","bulkCreate","createOrUpdateCampaign","parseDecimal","res","catch","error","Promise","fetchBudgetLandscapeData","parsedBudgetLandscape","budgetLandscapeData","BudgetCurrent","BudgetCurrentDaily","BudgetCurrentDetails","BudgetSuggested","BudgetSuggestedDaily","BudgetSuggestedDetails","parseBudgetLandscapeAPI","loadBudget","fetchCustomBudgetPerformanceData","parsedBudgetSuggestionResponse","updatedCampaign","sort","a","b","parsedPerformanceEstimate","performanceEstimate","BudgetAdvertiser30Day","AdvertiserBudgetDetails","parsePerformanceEstimateAPI","loadBudgetPartial","args","BudgetSuggestion","_useBudgetSuggestionR","setIsLoading","setBudgetSuggestionData","setCustomPerformanceData","finally","onBudgetSuggestionChange","err","undefined","editBudgetSuggestionButton","learnMoreContent","outline","BudgetSuggestionDialog","onBudgetChange","enableSaving","onGridRefresh","showDialog","onTriggerDialog","isOpen","setIsOpen","_useState7","_useState8","triggerDialog","isDialogOpen","Dialog","modalType","open","dialog","DialogSurface","DialogBody","DialogTitle","DialogContent","LearnMoreLink","linkText","DialogActions","position","buttonGroup","applyButton","useConfirmDialog","instrumentationInfo","arguments","hidden","additionalProps","setAdditionalProps","_defaultProps$additio","content","_defaultProps$additio2","hideCancel","_defaultProps$additio3","hideConfirm","onConfirm","originalOnCancel","onCancel","_defaultProps$additio4","secondaryButtons","onDisplay","_defaultProps$additio5","passThroughProps","dialogName","periodProps","dismissDialog","buttonKey","internalOnCancel","onConfirmClicked","onOpenChange","fluid","disabled","isConfirmButtonDisabled","confirmText","buttonProps","cancelText","imageWrapper","useConfirmDialogWithImage","newContent","Fragment","imageSrc","alt","_useConfirmDialog","_useConfirmDialog2","TABLIST","SEARCH_INPUT_TYPES","SEARCH_INPUT_TITLES","SEARCH_INPUT_PLACEHOLDERS","getTabListStyles","divider","KeywordTab","selectedTab","onTabSelect","TabList","selectedValue","Tab","Divider","compact","minimumFractionDigits","maximumFractionDigits","getSearchRangeString","range","base","pow","log10","ceil","getSearchRange","formatDecimal","columnOrder","fieldName","minWidth","sortable","onRender","_item","index","pagination","GridContext","state","pageNumber","pageSize","columnKeyword","isResizable","columnSearches","item","AggregateMetric","AverageSearchVolume","onRenderHeader","topicId","HelpPopup","GridDataSource","onSelectChange","_useContext","dispatch","sortedColumn","sourceItemsInAllPages","selectedItemsInAllPages","isSortedDescending","useClientSortingPaging","sortFunction","usePreservedSelection","type","items","slice","totalCount","propTypes","PropTypes","isRequired","getNoDataWarningStyles","imageContainer","keyHint","description","NoRecommendationWarning","searchImage","getGridStyles","borderTop","KeywordRanking","allData","selectedData","gridColumns","columns","initialGridContext","selectionMode","SelectionMode","multiple","allColumns","selectedColumns","initAllItems","initSelectedItems","GridContextProvider","ContextualDetailsList","stickyHeader","checkboxVisibility","CheckboxVisibility","always","getSearchInputStyles","searchInputContainer","searchBox","searchInputTitleStyles","SearchInput","onSearch","enabled","SearchBox","ariaLabel","iconProps","iconName","pointerEvents","cursor","showIcon","SearchInputStack","keywords","inputStatus","onUrlChange","onKeywordsChange","Stack","childrenGap","horizontal","isAllLocationsUnsupported","targetedLocationInfo","locations","numLocationsTargeted","onlyTire2LangaugesSelected","languages","languagesCanUse","useTireTwoMarkets","locationSupportedLanguages","getKeywordPlannerSupportedLanguagesByLocationIds","getLanguagesSupportedByLocations","isSelectedLanguagesOnlyTire2ForKeywordPlanner","exampleData","Name","TimePeriod","AverageCPC","CompetitionLevel","Suggestions","Keyword","SourceType","Tag","Existing","odataLimits","useKeywordSuggestion","_ref2$scenario","scenario","window","e2eTestEnvironment","requestDataObj","req","criteria","hasOnlyKeyword","requestUrl","substr","push","Url","keywordsArray","keyword","languagesToUse","countryLocationInfo","language","Language","languageSupportedLoations","getKeywordPlannerSupportedLocationIdsByLangauges","locationIdsSupportedByLanguage","countryLocationId","locationId","requestLocations","requestData","customHeader","dummy","textStatus","xhr","currentSourceReqId","getResponseHeader","suggestions","suggestion","RequestId","getSearchIdeaModel","_ref3$keywords","_ref3$url","isIdeas","CONTROL_TYPES","SEARCH_IDEA_PRODUCTS","rawKeywords","parsedKeywords","LANDING_PAGE","URL_OPTION_TYPES","PAGE","LANGUAGE","LOCATION_LD","LOCATION_TARGET_LIMIT","NETWORK","NETWORK_TYPES","ALL","KEYWORD_FILTERS_GROUP","KEYWORD_FILTER_WITH_RANGE_TYPES","rangeKeywordFilterType","operator","OPERATOR_TYPES","START","COMPETITION","INCLUDED_KEYWORD","NEGATIVE_KEYWORD","ACCOUNT_KEYWORD_DEDUPE","CATEGORY","categoryId","DATE_RANGE","getTargetedLocationInfo","criterions","permissions","dynamic","KeywordPlannerLiteRefactorPhase1","KPLocations","includedCriterions","Status","SelectionStatus","LocationTargetTypes","criterion","locationType","LocationType","LOCATION_COUNTRYCODE_WHITE_LIST","LOCATION_TYPE","COUNTRY","locationsObj","locationFilters","keywordPlannerSupportedLanguagesIdValueMap","keywordPlannerSupportedLanguages","supportedLanguages","getSupportedLanguages","languageOptions","languages2Use","lang","SearchInputStackContainer","beforeSearch","onSearchSuccess","onSearchFinally","setUrl","setKeywords","recommendateRequest","Permissions","DynamicPermissions","useSearchBoxStatus","getSearchIdea","useKeywordPlannerService","signal","model","isLanguageDecoupling","channel","CHANNEL_TYPES","CAMPAIGN_CREATION","ErrorStatus","getKeywordGroupsStyles","container","getKeywordGroupStyles","checkAllLink","addAllLink","getViewAllPanelStyles","getActionBarStyles","bottom","margin","ActionBar","onAdd","Item","getPanelHeaderStyles","PanelHeader","SparkleIcon","KeywordGroupViewAllPanel","onClose","selection","setSelection","onSelectionChange","GridKeywords","Panel","panelClassName","flexContainer","SelectableSuggestedItemInternal","onItemToggle","selectedItems","onKeywordToggle","itemIndex","itemText","GroupKeyword","SelectableSuggestedItem","onToggle","some","s","KeywordGroup","groupName","groupItems","onAddAll","onBulkChange","isPanelOpen","setIsPanelOpen","currentSelectedItems","sortedGroupItems","g","unSelectedItems","_useCircularBufferVie","unselectedCollection","selectedCollection","page","setPage","currentIndex","setCurrentIndex","selectedCount","unselectedCount","newPage","count","useCircularBufferViewWithSelected","_useCircularBufferVie2","availableInlineRecommendations","canMoveNext","moveNext","onClickRefresh","GroupKeywordsSize","onPanelOpen","onAddAllClick","GroupKeywords","newSelectedItems","differenceBy","onRemoveAllClick","renderSelectableSuggestedItem","renderButtons","MoreSuggestionsInlineButton","useStyleFluent2","SuggestedItemsMultiSelect","suggestedItems","onSuggestedItemToggle","wrap","KeywordGroups","selectedItem","find","filter","_toConsumableArray","unionBy","deselectItems","selectedResult","disableShrink","getKeywordPlannerStyles","dataContainer","overflowY","overflowX","NoData","KeywordPlanner","setSelectedTab","blocking","setBlocking","setAllData","setSelectedData","_useState9","_useState10","refreshKey","setRefreshKey","_e","tabData","onRecommendationSuccess","traceInfo","dataWithKey","keywordAggregations","Aggregations","group","keywordText","requestId","unblockPanel","blockPanel","allRankingData","UiBlocker","loadingText","getPanelStyles","overflow","KeywordPlannerPanel","ThemeProvider","components","ComponentSettings","core","ThemeFluent","statusList","shorthands","alignContent","progressBar","StatusSection","denominator","numerator","Active","max","StatusPopoverItem","ProgressBar","thickness","carouselParent","flexGrow","alignSelf","parentContainer","transitionProperty","transitionDuration","transitionTimingFunction","chevronButton","boxShadow","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","borderLeftStyle","borderRightStyle","borderTopStyle","borderBottomStyle","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth","borderLeftColor","borderRightColor","borderTopColor","borderBottomColor","chevronButtonLeft","zIndex","left","chevronButtonRight","right","hintRight","backgroundImage","hintLeft","transform","useSimpleCarouselStyles","paddingBottom","cardContents","Carousel","contents","contentWidth","offset","setOffset","contentContainerWidth","setContentContainerWidth","contentContainerNode","handleResize","offsetWidth","addEventListener","removeEventListener","measuredRef","node","displayedContentCount","getFullyShownContentsCount","noMoreResult","leftIconButton","shape","ChevronLeft12Regular","onKeyDown","event","querySelector","focus","preventDefault","rightIconButton","ChevronRight12Regular","role","total","current1","Array","join","current2","tabIndex","showRightIconButton","ref","SimpleCarousel","actionCardsList","card","iconArea","cardsMessage","cardTitle","textOverflow","textWrap","cardMessage","cardButton","nameText","footer","ActionCard","cardMsg","onCardButtonClicked","cardButtonText","learnMoreLink","StatusIcon","Body2","Tooltip","relationship","Body1","block","rel","ActionCards","isSmallScreen","inset","Caption1","campaignTitle","campaignMsg","DiagnosticCard","campaignStatusTitle","campaignStatusMsg","responsiveSize","detailsToFix","Title2","SupportedFontsSVGIcons","Arial","Bahnschrift","Calibri","Consolas","Garamond","Georgia","Impact","Tahoma","Verdana","fontFamilies","text","svg","fontWeights","useFontsSelectorStyles","fontSelectWrapper","spacingVerticalS","fontSelect","fontSelectValue","top","fontSelectInputVisible","fontSelectInputTransparent","FontsFamilySelector","inlinePopup","selectClassName","overrideFontFamilies","fontSelectId","fontFamilyOptions","selectedFontSvg","selectedFont","family","Body1Stronger","Combobox","freeform","_ev","fontWeightSelectWrapper","fontWeightSelect","FontsWeightSelector","overrideFontWeights","fontWeightSelectId","fontWeightOptions","selectedFontWeightText","selectedFontWeight","weight","PAGE_TYPES","SEARCH_VOLUME_PRODUCTS","SEARCH_VOLUME_UPLOAD_PRODUCTS","TRAFFIC_ESTIMATE_KEYWORDS","TRAFFIC_ESTIMATE_UPLOAD_KEYWORDS","TRAFFIC_ESTIMATE_ADGROUP_KEYWORDS","TRAFFIC_ESTIMATE_BID","TRAFFIC_ESTIMATE_BUDGET","LOCATION","LOCATION_LEVEL","SEARCH_VOLUME_CHART_TYPE","AVERAGE_MONTHLY_SEARCH","SUGGESTED_BID","AD_IMPRESSION_SHARE","IDEA_DATE_RANGE_DATA_TYPE","DOMAIN","LANGUAGE_TYPES","OWNED_AND_OPERATED","SYNDICATION","END","COMPETITION_LEVEL_TYPES","GRID_TYPES","GRID_LEVELS","ADGROUP","KEYWORD","INNER_KEYWORD","ADGROUP_ESTIMATE","KEYWORD_ESTIMATE","INNER_KEYWORD_ESTIMATE","DEVICE_ESTIMATE","LOCATION_ESTIMATE","ADGROUP_ESTIMATE_COLUMNS","AVERAGE_CPC","AVERAGE_POSITION","CLICK","COST","IMPRESSION","KEYWORD_ESTIMATE_COLUMNS","IDEA_ATTRIBUTE_TYPES","LANDSCAPE_TYPES","SECTION_TYPES","GROUP_POSITION","PERIOD_TYPE","TRAFFIC_EST_CHART_TYPE","STATE","SUBGEOGRAPHY","METROAREA","CITY","POSTALCODE","COUNTY","DMA","TARGETED","SEARCH_VOLUME_LOCATION_LEVEL","KEYWORD_PLANNER_PREFERENCE_PREFIX","REQUEST_SUPPORTED_LANGUAGES","countryId","prefix","lcid","DeviceTypes","MATCH_TYPE","EST_BUTTON_TYPE","EST_DATA_TYPE","EST_DEVICE_DROPDOWN_TYPE","LOG_TYPES","LOG_ACTION_TYPES","LOG_TAB_OPTIONS","LOG_SORT_BY_OPTIONS","LOG_TRACKING_ACTIONS","AdGroupName","MaxCPC","KEYWORD_IDEA_INNER","LANDING_PAGE_OPTIONS","KEYWORD_PLANNER_TOOL","ADGROUP_CREATION","KEYWORD_CREATION","REPAIR_KEYWORD_CREATION","CHANNEL_TYPES_MAPPING","defaultIdeaAttributes","defaultIdeaAggregations","AggregationKey","AggregationValues","IdeaAttribute","AggregationType","defaultDevicesTypeIds","defaultIdeaOverview","Segment","Devices","isJsonEqual","v1","v2","formatUrl","scopeValues","replace","getOptions","token","_ref2$data","_ref2$channel","headers","authorization","stringifySync","getRequestSupportedLocaleId","localeString","parsedLanguage","supportedLanguage","RegExp","test","formatTargetings","isLanguageSkipped","targetings","deviceType","DeviceType","AdjustmentPercantage","SuggestionType","networkType","NetworkType","formatFilters","isCategoryFilter","filters","AverageSearchVolumeRange","SuggestedBidRange","AdImpressionShareRange","CompetitionLevels","Included","Excluded","AdvertiserId","AdvertiserLevel","Category","Number","formatPeriod","periodSetting","PeriodType","start","Date","end","DateRange","Start","toISOString","End","formatTrafficEstimateNegatieKeywords","MatchType","formatIdeaOverviews","mergeLocation","ideaOverviews","LocationLevel","formatAdGroupTrafficEstimateParameters","adgroups","AdGroupTrafficEstimateParameters","cloneDeep","adGroupTrafficEstimateParameter","KeywordTrafficEstimateParameters","hasBid","hasInlineCustomBid","isTrafficEstScale","trafficEstLandscapeScale","scaleLandScape","requestLandscape","formatLocationLevels","formatAdGroupEstimatedTraffics","adgroupKeywords","KeywordEstimatedTraffics","HasOwnMaxCPC","formatAdGroupEstimatedTrafficsForMaxCPC","adGroupEstimatedTraffics","emptyTrafficTemplate","TotalCost","entity","AdGroupEstimatedTraffic","traffic","KeywordEstimatedTraffic","formatDeviceTraffics","deviceList","deviceName","Device","DeviceName","formatDeviceTrafficsWithBid","deviceTraffics","Traffic","formatLocationTraffics","locationList","Location","LocationTraffics","LocationName","formatLocationTrafficsWithBid","locationTraffics","formatKeywordEstimatedTraffics","adGroupItem","keywordItem","modelAdgroup","modelKeyword","normalizeTrafficEstimate","rawData","isBackfilled","backfilledValues","Identifier","AdGroupEstimatedTrafficRanges","AdGroupEstimatedTraffics","DeviceTraffics","LandscapesEstimate","controlId","_languageOptions","landingPage","impreAndClicksOptions","chartType","subTitle","emptyMsg","series","mobile","defaultGridLevel","monetaryOptions","formatOptions","formatShortOptions","searchIdeaExampleData","Index","urlPrefix","getAvailableDateRangeAPI","getIdeaCategoryDataAPI","getSearchIdeaAPI","getTrafficEstimateAPI","getLocationsAPI","PermissionsContext","CurrentUser","LocaleID","locale","CurrentLocale","_serverContext$Servic","odataCampaignPath","lastSearchIdeaRequestBody","lastTrafficEstimateRequestBody","handleAjaxError","protocol","host","notificationApi","showWarning","generateGetSearchIdeaRequestRequest","_ref$mergeLocation","_ref$useCategoryFilte","useCategoryFilter","_ref$isLanguageDecoup","products","productsModel","formatProducts","SearchIdeaParameter","IsIdeas","Products","LandingPage","split","CategoryId","Targetings","Filters","PeriodSetting","IdeaOverviews","IdeaAttributes","IdeaAggregations","Locale","getAvailableDateRange","datatype","generateGetAvailableDateRangeRequest","reject","$","getIdeaCategoryData","generateGetIdeaCategoryDataRequest","_ref2$useCategoryFilt","_ref2$isLanguageDecou","isDirty","jqXHR","_textStatus","trackId","getSearchLocations","search","$count","$expand","queryString","generateGetSearchLocationsRequest","getTrafficEstimate","_formatAdGroupTraffic","IsDomesticSimplifiedChineseEnabled","CampaignTrafficEstimate","NegativeKeywords","DevicesTypeIds","LocationLevels","LandscapeEstimateParameters","LandscapeType","generateGetTrafficEstimateRequest","_KRTLocations","landingPageAll","withMultiSelectCombobox","ComboboxOriginal","MultiSelectCombobox","onOptionSelectProp","restProps","isInNewSelectedOptionIds","contains","newSelectedOptions","uniq","property","resolvedSelectedOptions","selectedOptionKeys","pluck","multiselect","displayName","getDisplayName","hoistNonReactStatics","MultiSelectorContext","useMultiSelectContext","Consumer","MultiSelectorContextProvider","useOptions","useSelectedOptions","selectedOptionsLimit","optionsDisplayLimit","onSelectedOptionsUpdate","savedAddedSelectedOptionsKeys","savedDeletedSelectedOptionsKeys","_React$useState","_React$useState2","searchFilter","setSearchFilter","_useOptions","_useOptions2","isLoadingOptions","isFirstOptionsLoad","isNoOptionsAfterFirstLoad","isMoreOptionsThanLimit","optionsLoadError","lastLoadedSearchFilter","triggerLoadOptions","_useSelectedOptions","_useSelectedOptions2","isLoadingSelectedOptions","initialSelectedOptions","selectedOptionsLoadError","setSelectedOptions","isSelectedOptionsLimitReached","isFunction","Provider","makeUseOptionsAsyncDataSource","loadOptions","optionsLimit","MAX_SAFE_INTEGER","isFirstLoad","noDataAfterFirstLoad","asyncTokenRef","setIsMoreOptionsThanLimit","setOptions","setLastLoadedSearchFilter","loadError","setLoadError","onDoneLoading","loadedSearchFilter","newOptions","isEmpty","first","onErrorLoading","onCancelLoading","cancel","createAsyncToken","on","onSuccess","_len","_key","apply","onError","makeUseOptionsAsyncDataSourceWithClientFilter","filterPredicate","onDoneCallback","noop","srcOptions","setSrcOptions","_useState11","_useState12","filteredOptions","getSelectionStats","initialOptions","currentOptions","initialOptionKeys","currentOptionKeys","addedOptionKeys","difference","makeUseSelectedOptionsAsyncDataSource","loadSelectedOptions","savedAddedOptionKeys","savedDeletedOptionKeys","handleOptionsChangeByUser","_getSelectionStats","_getSelectionStats2","deletedOptionKeys","setOptionsByUser","newInitialOptions","includes","_getSelectionStats3","_getSelectionStats4","useFluentV1Styles","switch","getSummary","level","parentToggleDescription","ScopeLevel","AdGroup","useParentLevel","bidAdjustment","parentLevelData","bidAdjustmentInput","currentLevelData","RANGE","MultimediaAdBidAdjustment","onDataChange","multimediaAds","nameColumn","parentLevelSettings","headerClassName","GridTargetsBase","setData","basicConfig","minBid","maxBid","disableDecrease","AutomatedCallToActionOptOut","ev","SwitchUseCampaignSetting","Campaign","Switch","MultimediaAdBidAdjustmentSettings","MultimediaAdBidAdjustmentSection","setIsValid","isDataValid","validateBidAdjustment","min","isBidAdjustmentValid","MMAForCN","topicKey","AdditionalConversionInputPure","currencySymbol","useId","Input","contentBefore","NCA_STRATEGY_OPTIONS","ADDITIONAL_CONVERSION_VALUE_TYPES","newCustomerAcquisitionServerErrorFilter","andComp","entityIs","anyComp","codeIs","AdditionalConversionInput","withErrorField","withValidation","GenericAdapter","useAdditionalConversionInputStyle","additionalValueInputSection","radioOption","ValidatedAdditionalConversionInput","isAccountLevel","accountAdditionalConversionValue","conversionValueOption","setConversionValueOption","styles","_useBudgetRange","useBudgetRange","currencyCode","minDailyBudget","maxDailyBudget","budgetSchema","properties","required","maximum","minimum","customErrorProcessor","errors","oldError","decimalLength","accountCurrencyCode","dailyRangeFloorValue","renderAccountLevelSettings","italic","getCurrencySymbol","schema","field","errorProcessor","onConversionValueOptionChange","renderCampaignLevelSettings","TABLE_COLUMNS","getAudiencesLibraryUrl","audiencesLibraryPath","getRoutePathById","allSiteMap","searchParams","useAudienceListSectionStyle","audienceListSection","colorNeutralForeground2Link","combobox","listbox","maxHeight","TypeInContent","NonOptionContent","audienceTable","AudienceListSection","comboboxId","_useMultiSelectContex","setSearchFilterFromContext","isAnyLoading","canUserStartOperating","selectedOptionsSet","Set","shouldDisableSelection","has","_useDebouncedState","useDebouncedState","_useDebouncedState2","debouncedSearchFilter","onSearchInputChange","rawValue","isSearchFilterEmpty","isComboboxOpen","setIsComboboxOpen","onDeleteItem","clone","splice","renderMultiSelectCombobox","LoadingOverlay","isVisible","renderTable","Table","TableHeader","TableRow","TableHeaderCell","TableBody","audienceName","audienceType","found","o","TableCell","TableCellLayout","DeleteRegular","InlineLoading","loadAudiencesFactory","deliverychannel","where","toLocaleLowerCase","Customers","$withKey","Accounts","Audiences","toPromise","audience","loadAssociatedAudiencesFactory","NewCustomerAcquisitionGoals","useCustomerAcquisitionSetupStyle","rootContainer","bodyContainer","colorPaletteRedForeground1","footerContainer","messageBar","whiteSpace","paddingTop","CustomerAcquisitionSetup","CampaignSettings","newCustomerAcquisition","isCampaignCreation","onChangeFromProp","isEditorOpen","accountSettings","campaignSettings","additionalConversionValue","accountBudgetInput","setAccountBudgetInput","campaignBudgetInput","setCampaignBudgetInput","isUpdating","setIsUpdating","userErrors","setUserErrors","serverErrors","setServerErrors","_useState13","_useState14","shouldDisableSave","setShouldDisableSave","hasAccountBudgetError","hasCampaignBudgetError","onValidateBudgetInput","newAccountBudget","newCampaignBudget","onSave","goalId","AudienceIds","AdditionalConversionValue","saveCallPromise","edmEntityAccount","entityName","createOrUpdateNewCustomerAcquisitionGoal","audienceIdList","newAccountSettings","audiences","getBulkApiErrors","Drawer","DrawerHeader","DrawerHeaderTitle","action","DismissRegular","DrawerBody","message","MessageBar","intent","layout","MessageBarBody","MessageBarTitle","DrawerFooter","BiddingStrategyWarning","inline","AccountLevelRequiredWarning","useNewCustomerAcquisitionStyle","additionalConversionValueContainer","existingAudiencesContainer","NewCustomerAcquisitionImpl","bidStrategy","optOut","bidOnlyMode","isSetupEditorOpen","setIsSetupEditorOpen","onOpenSetupEditor","onCloseSetupEditor","hasValidationError","MAX_CONVERSIONS_VALUE","onRadioChange","renderSettings","Edit16Regular","TagGroup","renderEditorButton","renderBidHigher","renderBidOnly","renderEditor","ValidatedNewCustomerAcquisition","loadAudiences","loadAssociatedAudiences","errorMessages","ValidatedNewCustomerAcquisitionHeader","newCustomerAcquisitionOptOut","Toggle","inlineLabel","stopPropagation","PERFORMANCE_INSIGHTS_TYPE","PERFORMANCE_INSIGHTS_ISSUE","PERFORMANCE_INSIGHTS_ACTION","PERFORMANCE_INSIGHTS_POPUP_CONFIG","chartTitle","pitching","actionDetails","PERFORMANCE_INSIGHTS_PANEL_CONTAINER","calloutStyles","mergeStyleSets","callout","minHeight","inlineChart","PerformanceInsightsPanel","newI18n","ReactDOM","getColor","metricName","budgetResult","legend","actualBudgetPoints","lineOptions","strokeWidth","legendShape","estimatedBudgetPoints","strokeDasharray","strokeDashoffset","strokeLinecap","bidResult","actualBidPoints","estimatedBidPoints","budgetChartData","lineChartData","bidChartData","chartClasses","colorFillBarData","startX","x","endX","Caption1Stronger","campaignName","Surface","LineChart","legendsOverflowText","allowMultipleShapesForPoints","tickFormat","tickValues","point","colorFillBars","PerformanceInsightsToolTipCard","closePerformanceInsightsPopup","isBlocking","setIsBlocking","CheckpointEntities","CheckpointEntityId","CheckpointEntityLevel","CheckpointIdentifiers","CheckpointKey","CheckpointDataTypes","fetchPerformanceInsightsData","CheckpointResults","CheckpointDataMap","CheckpointDataJsonString","checkpointResults","checkpointResult","CheckpointData","parseSync","normalizedData","reversedBidPoints","BidPoints","reverse","startDate","formatDate","skeleton","timeZone","toIANATimeZone","fromLegacyTimeZone","endDate","missedConversions","MissingConversion","latestActualTarget","LatestActualTarget","latestSuggestTarget","LatestSuggestTarget","verticalTarget","VerticalTarget","verticalPercentage","VerticalPercentage","raw","y","Actual_Conversion","Estimate_Conversion","reversedBudgetPoints","BudgetPoints","missedImpressions","MissingImpressions","actualBudget","OriginalBudget","recommendedBudget","ProjectedImpressionsRecommendedBudget","normalizeData","subType","onMouseLeave","Callout","directionalHint","DirectionalHint","rightCenter","BlockUi","loader","Spinner","SparkleImg","registerIcons","icons","SparkleImgSVGIcon","SparkleImgIcon","Pending","Warning","Error","parentShared","parentActive","parentPending","parentWarning","parentError","childActive","childPending","childWarning","childError","_useMemo","IconElement","CheckmarkCircleRegular","parentClass","childClass","CircleRegular","WarningRegular","ErrorCircleRegular","statusItem","statusLabelMsg","statusLabelMsgWithPopover","popover","popoverTitle","popoverTitleText","popoverMsg","customPopoverProps","triggerRef","setFocus","labelMsgPart","Popover","trapFocus","withArrow","openOnHover","PopoverTrigger","underline","onMouseOver","PopoverSurface","popoverButton","autoFocus","learnMore","popoverTitleName","popoverTitleValue","replaceAll","isValidCustomUrlProtocol","doesUrlContainUnsafeCharacters","UrlLengthLimit","pathLengthLimitErrorMessages","pathLengthLimit","urlInputContainer","boxSizing","urlInput","urlProtocol","customUrlProtocol","urlPath","wordBreak","UrlPathFluent","_value","Path1","Path2","urlDomain","getDomain","onPathChange","newValue","path1","trim","path2","validatePath","onPath1Change","onPath2Change","isString","URL_COLON_SLASH_SLASH","DEFAULT_URL_PREFIX","getUrlPrefixAndDestination","finalUrl","defaultUrlPrefix","substring","getUpdatedFullUrlOnPrefixUpdate","urlWithoutPrefix","newPrefix","slash","getUpdatedFullUrlOnTextUpdate","_getUrlPrefixAndDesti","_getUrlPrefixAndDesti2","destination","urlPrefixOptions","UrlInputFluent","containerClassName","additionalValidation","prepopulateUrl","dropdownOptionAriaLabel","propertyKey","validateOnRender","additionalProperties","textFieldAriaLabel","enableSpecialCharactersValidation","hideProtocol","_useMemo2","selectedOptionText","validateAndUpdateUrl","currentURL","finalUrlValidatorError","requiredUrlProtocolAndDomain","urlLengthLimit","lengthLimit","isValidUrl","getUrlProtocolAndDomain","validateAdUrl","onUrlPrefixChanged","newItem","onCustomUrlProtocolChanged","onTextChange","contentAfter","withNoProtocol","WrappedComponent","urlWithProtocol","FinalURlKey","ValidatedFinalUrl","validationOnUrlChange","helpTopicId","hideLabel","finalUrls","createFinalUrlsViewModel","urls","HelpPopupInline","FinalUrls","updateOnMount","radiusShimmerElement","ShimmerElementType","line","SectionShimmer","Shimmer","shimmerElements","__","placementTargetSettingContainer","creationCommonStyle","advancedSettingsSectionStyle","toggleButtonStyle","listStyle","RadioGroupOption","titleString","descriptionString","updateSelection","setIsSelected","titleStyle","PlacementTargetingSettingsInternal","mobilePlacementsTitleString","mobilePlacementsDescriptionString","gamingPlacementsTitleString","gamingPlacementsDescriptionString","setActiveKey","intentOptions","activeKey","placementTarget","intentOptionsKeys","intentOptionsKeysMap","onIntentOptionChanged","renderItem","getItemId","PlacementTargetSettings","PlacementTargetPanel","PlacementImg","PANEL_KEYS","PLACEMENT_TARGET","pug","module","exports","locals","pug_interp","pug_html","locals_for_with","formatOption","formatPoint","points","escape","$$obj","pug_index0","$$l","marker","symbol","dashStyle","attr","call","this","date","formattedValue","rowElement","buttonElement","ShimmerCard","useNoAssetCardStyles","flexBasis","colorNeutralBackground2","gradient","NO_ASSETS_STATE","config","NO_ASSETS","fit","NO_ASSETS_FILTERED","NoAssetsCard","Subtitle2","performanceOrder","policyStatusOrder","columnId","compare","PerformanceLabel","EditorialStatus","columnsWithConversions","PerformanceMetrics","ConversionsCredit","useAssetPreviewStyles","imagePreviewContainer","objectFit","aspectRatio","callToActionStrings","ActNow","ApplyNow","BetNow","BidNow","BookACar","BookHotel","BookNow","BuildNow","BuyNow","ChatNow","Compare","ContactUs","Dealers","Directions","Donate","Download","EmailNow","EnrollNow","FileNow","FindJob","FindStore","FreePlay","FreeQuote","FreeTrial","Coupon","GetDeals","GetDemo","GetNow","GetOffer","GetQuote","GoToDemo","JoinNow","LearnMore","ListenNow","LogIn","OrderNow","PlayGame","PlayNow","PostJob","Register","RenewNow","RentACar","RentNow","Reorder","Reserve","SaveNow","Schedule","SeeDemo","SeeMenu","SeeModels","SeeOffer","SeeOffers","Sale","SellNow","ShopNow","Showtimes","SignIn","SignUp","StartNow","Subscribe","SwitchNow","TestDrive","TryNow","ViewCars","ViewDemo","ViewPlans","VisitStore","VoteNow","Watch","WatchMore","WatchNow","getLocalizedCallToActionString","callToAction","mappedCallToAction","AssetPreview","asset","withAspectRatio","preview","assetType","Asset","AssetType","resizeImageHeight","ImageUrl","originalWidth","CropWidth","originalHeight","CropHeight","CallToAction","ThumbnailUrl","Width","Height","usePerformanceTagStyles","low","colorStatusDangerForeground1","colorStatusDangerBackground1","colorStatusDangerBorder1","neutral","colorNeutralForeground3","colorNeutralBackground4","colorNeutralStroke2","high","colorStatusSuccessForeground1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","LABEL_STRING","Good","Best","Learning","Unrated","getStyle","useGetPerformanceTag","Badge","iconPosition","useAssetStatusStyles","rejected","STATUS_STRING","Approved","ApprovedLimited","Rejected","useGetStyledAssetStatus","getPageAssets","assets","paginationConfig","assetsPerPage","DESCRIPTION_STRING","row","flow","usePopoverStyles","perfEditorialRow","AssetPerformancePopover","getPerformanceTag","getStyledAssetStatus","align","useAssetTableStyles","headerRow","conversionsHeader","performanceHeader","policyStatusHeader","headerText","performanceCell","MIN_WITH_ASPECT_RATIO_WIDTH","resetToFirstPage","setWithAspectRatio","setWithAspectRatioValue","getRows","getSortDirection","toggleColumnSort","useTableFeatures","useTableSort","headerSortProps","sortDirection","rowsToDisplay","mouseLeaveDelay","AssociationType","AssetPerformancePopoverWithConversions","AdvertiserReportedRevenue","AssetTableWithConversions","getStyledAssetConversions","usePaginationConfig","setState","next","onNext","previous","onPrevious","getFullYear","getMonth","padStart","getDate","All","LongHeadline","ShortHeadline","Description","Logo","Video","AssetTypeString","MAX_ASSET_CONTAINERS_IN_FILTER","useFilteredAssetData","headerState","dateRange","setAssets","assetContainer","Campaigns","AssetGroups","$makeCall","query","skip","gridDataParameters","StartDate","EndDate","subscribe","filterByAssetType","useCardStyles","ASSETS_PER_PAGE","AssetPerformanceCard","onActionButtonClick","perfMarkerUtils","siteMap","isSDK","instrumentationContextValue","InstrumentationContext","activityAndScenario","createScenarioAndActivity","scenarioName","activityName","AssetTable","isConversionsEnabled","AssetPerformanceTileWithConversions","isCampaignTypeApp","hasAssets","assetGroupId","route","save","uid","assetsRoute","createAssetsRoute","done","AssetPerformanceCardWithAssetData","withSiteMap","withPermissions","HoC","withFilteredAssetData","getAssetContainerNameWithStatus","primaryFill","assetContainerText","useAssetGroupsData","assetContainers","setAssetContainers","select","assetGroups","withAssetGroupsData","useFilterStyles","button","assetContainerFilterButton","buttonText","lineBreak","viewAll","AssetPerformanceFilter","onViewAllButtonClick","onAssetTypeClick","onAssetContainerClick","selectedAssetContainer","onViewAllAssetGroupsClick","Menu","MenuTrigger","disableButtonEnhancement","MenuButton","MenuPopover","MenuList","MenuItem","AssetPerformanceFilterWithAssetGroupsData","oDataParams","FetchType","noDecimalOptions","formatBigDecimal","useStackStyles","estimationBody","spacingVerticalMNudge","firstDivider","estimation","estimationAudienceUnit","unitValueMap","IMAAudienceEstimation","excludedData","potentialdata","_ref$targetedInterest","targetedInterests","_ref$excludedInterest","excludedInterests","autoTargeting","campaignBiddingStrategy","campaignSubType","stackStyles","errorMessage","setErrorMessage","otherProps","AutoTargeting","CampaignBiddingStrategy","CampaignSubType","CampaignSubTypeMapping","includesAudiences","AudienceId","excludesAudiences","_useIMATargetingEstim","targetsForTotalAudienceSizeEstimation","targetsForIncludedAudienceSizeEstimation","targetsForFullTargetedAudienceSizeEstimation","_serverContext$Urls","Urls","_serverContext$Urls2$","SignOutUrl","urlBase","audienceSizeEstimationUrl","totalPotentialData","setTotalPotentialData","includedOnlyData","setIncludedOnlyData","allTargetedData","setAllTargetedData","isImpressionTooSpecific","setIsImpressionTooSpecific","getAudienceReachEstimation","fetchType","targets","audienceSizeEstimation","request","IsImpressionTooSpecific","useIMATargetingEstimationCaller","Includes","Excludes","_useIMATargetingEstim2","isAudienceEstimationLoading","includedAudiencesOnly","excludedAudiencesOnly","estimatedIncludedOnlyData","estimatedAllTargetedData","estimatedPotentialData","xAxisCalloutData","yAxisCalloutData","chartData","isXandrCampaign","StackedBarChart","ignoreFixStyle","spacingHorizontalSNudge","estimatedReach","toolTip","toolTipContentWithSpace","toolTipContent","wordWrap","spacingHorizontalS","borderRadiusMedium","colorNeutralBackground3","colorNeutralForeground3Hover","ToolTipContent","list","Estimation","localizedMarkets","toolTipVisible","setToolTipVisible","visible","onVisibleChange","checkboxCursor","InterestsSelector","treeItems","treeItemIdxMap","isAIMCampaignEnabled","disabledItems","treeItemsWithReach","_groupBy","groupBy","_groupBy$Included","_groupBy$Excluded","targetedLocationCriterions","toUpperCase","excludedLocationCriterions","InternalizationReach","extendInternalizationReach","peopleInLocation","extendListSizeItem","ineligibleItems","isInEligibleIMA","processedTreeItems","forEach","queue","shift","idx","checkedItems","Map","set","onTargetSelect","removedTarget","selected","onRenderFlatTreeItem","itemData","isItemChecked","isDisabled","listSize","getLocalizedMarkets","formatReachEstimation","onRenderTagContent","flatTreeItemFilter","Tags","tagItems","tagViewLimit","ContextualClientSelectionTree","onRenderContent","customFilter","searchBoxClassName","showTags","groupInterests","interests","groupedInterests","formatInterests","_groupInterests","targetedInterestDetails","excludedInterestDetails","spacingVerticalM","interestsHeader","spacingVerticalL","AudienceInterests","supportExclusion","audienceList","imaList","IMATree","jsonTreeParse","delimeter","IMATreeItems","IMATreeItemIdxMap","IdMap","flattenTree","tree","parentValue","allowedCheck","extend","childIds","child","formatIMATree","audienceIdMap","_useMemo3","targetedItems","excludedItems","expandExclusions","setExpandExclusions","onTarget","newTargeted","newInterests","interest","interestData","AudienceName","AudienceType","BidMultiplier","BidType","remainingSelected","newInterest","newlySelected","onExclude","newExcluded","onExpandExclusions","ValidatedAudienceInterests","BudgetRange","DailyRange","FloorValue","MonthlyRange","CeilingValue","useBudgetInputStyles","spacingVerticalXS","input","flex","spacingHorizontalXS","BudgetInputPure","helpTopic","helpLabel","c","htmlFor","useValidatedBudgetInputStyles","BudgetInput","finalMaxBudget","finalMinBudget","finalCurrency","String","useIsReadOnlyUser","CurrentAccountInActive","IsReadOnlyUser","DropdownMenuButton","checkedValue","menuItemConfigs","buttonAriaLabel","isReadOnly","checkedValues","menuItems","menuItemConfig","MenuItemRadio","iconColor","onCheckedValueChange","DialogEditButton","ChildComponent","closeDialog","DialogTrigger","colors","green","colorPaletteDarkGreenBackground2","colorPaletteDarkGreenForeground2","gray","colorNeutralBackground1Hover","colorNeutralForeground2","purple","colorPalettePurpleBackground2","colorPalettePurpleForeground2","brown","colorPaletteBrownBackground2","colorPaletteBrownForeground2","blue","colorPaletteBlueBackground2","colorPaletteBlueForeground2","cardContainer","cardText","cardDescription","cardWarning","textDecorationStyle","textDecorationLine","iconWarning","useIconStyles","iconContainer","useIconColorStyles","StatusSummaryCardIcon","memo","IconComponent","colorClasses","StatusSummaryCard","header","dropdownMenuProps","dialogEditProps","warningMessage","Card","CardHeader","shimmerWrapper","truncate","useFooterStyles","saveButton","containerLeft","withFooter","showBudgetSuggestion","send","useFormService","matches","FORM_STATES","LOADING","FORM_EVENTS","SAVE","CANCEL","useReadCampaign","useRepository","isBudget","instrumentation","readCampaign","useReadCampaignPromise","initialCampaign","setInitialCampaign","log","campaignOverviewEdit","create","budgetEdit","bidStrategyEdit","localizeBudget","withSymbol","loadCampaign","campaignGoal","Goal","cpa","roas","isInitialAdditionalDetailsChecked","deliveryStatus","DeliveryStatus","deliveryStatusDetails","DeliveryStatusDetails","initialBudget","load","campaignData","isBudgetValid","isMarketingMetricValid","marketingMetric","modelToSave","BudgetBidCampaignImportNotificationActivity","campaignItemList","oldBudget","newBudget","oldBidStrategy","newBidStrategy","updateCampaign","TargetCpaValueCheck","useBudgetRepository","useBidStrategyRepository","getApiErrorMapper","useBudgetCardStyles","colorPaletteCranberryBorderActive","UnmappedFormErrors","FormViewWrapper","logger","EnableBudgetSuggestion","isBSLoading","setIsBSLoading","isBSCalled","setIsBSCalled","apiErrorMapper","legacyI18n","buildLegacyI18n","ValidationStringMap","mergedI18n","Currency","GlobalMaximumBudget","DailyBudget","Max","GlobalMinimumBudget","Min","MaximumBudget","onFieldChange","updatedData","prevData","shouldLocalize","budgetAmountValue","budgetVal","budgetErrors","datas","showBudgetSuggestionData","formErrorProps","errorMapper","ValidationGroup","onNotifyValidation","budgetSuggestion","withSlider","isUnderlineLink","isGreyBackground","BudgetForm","onDoneSaving","params","onCanceled","view","repository","machineOptions","actions","Form","BudgetCard","contentReady","budgetText","setBudgetText","setBudgetTitle","campaignInfo","setCampaignInfo","dataBs","localizedBudget","LINKEDIN_CAMPAIGN_GOALS","useBidStrategyCardStyles","bidRange","KeywordBidRange","getLinkedInBidStrategyOptions","onBidStrategyChange","bidStrategyType","onMarketingMetricChange","newMarketingMetric","marketingMetricErrors","selectedBidStrategy","marketingMetricsValue","defaultChecked","inputUnit","hideMessage","hideAdditionalDetails","withTargetCpaWarning","BidStrategyForm","BidStrategyCard","bidStrategyText","setBidStrategyText","getLinkedInBidStrategyText","getBidStrategyText","CampaignStatusCard","campaignStatusEdit","pausedCampaignImportNotificationActivity","colorPaletteGreenForeground1","setCheckedValue","campaignItemData","seCampaignItemData","updateStatus","isActive","useCampaignStatusSummaryCardsStyles","fullWidthCards","shouldUseFullWidthCards","CampaignStatusSummaryCards","campaignStatusContentReady","budgetContentReady","bidStrategyContentReady","CARD_CONFIG","cardStyle","cardSelected","colorNeutralForeground2BrandHover","checkmark","textArea","cardId","onCardSelectionChange","onCardClicked","handleSpace","useCardSelectorStyles","cardsContainer","CardSelector","cards","setOpen","localCardsState","setLocalCardsState","newCards","onSaveClicked","restoreFocusTargetAttributes","useRestoreFocus","restoreFocusSourceAttributes","tileLabel","defaultFilter","collectChildren","flatTreeItems","entry","childValue","filterTreeItems","filteredTreeItemIndexes","ancestor","orderedFilteredIndexes","from","filteredTreeItems","useDropdownTreeStyles","dropdownContent","branch","hideContent","noResults","treeItemLayout","CustomTreeItem","flatTreeItem","onCheckedChange","lazyLoadingEnabled","treeItemsProps","getTreeItemProps","treeItemProps","itemType","expandIcon","isChecked","TreeItem","TreeItemLayout","onRenderLabel","DropdownTreeSelect","openItems","onRenderTooltip","lazyLoad","isMultiSelect","containerRef","setSearchValue","isResultOpen","setIsResultOpen","lazyLoadedData","setLazyLoadedData","lazyLoadedParents","setLazyLoadedParents","onChangeSearchValue","trimmedValue","itemsToUse","array","parent","myself","childMapValue","buildMap","parentsWithChild","parentsWithChildOrLoaded","onOpenChangeInternal","openedItem","itemChildData","onItemChecked","flatTree","useHeadlessFlatTree","handleBlur","setTimeout","showResults","onFocus","FlatTree","getTreeProps","showTips","positioning","mapGoalsToItems","goals","fetchConversionGoalFactory","sortState","orderby","sortColumn","IsMainConversionGoal","dataQuery","Goals","fetchConversionGoals","currentPage","totalPages","useTableStyles","dataGridWrapper","colorNeutralBackground1Pressed","accountCheckbox","dataGridContainer","dataGrid","mainConversionCheckbox","searchbox","headerBar","fontWeightRegular","clearAllBtn","headerTitle","typographyStyles","caption1Strong","fontSizeBase200","Scopes","freeze","ACCOUNT","CAMPAIGN","trackingStatusMapping","Unverified","NoRecentConversion","RecordingConversions","TagInactive","InactiveDueToTagUnavailable","GoalDiagnosticsInfoErrorCode","EXTERNAL_LINK","warningPopupLocalizedMessage","localizedParameters","NoExpression","NoValue","EqualsTo","BeginsWith","Contains","RegularExpression","LessThan","GreaterThan","needLocalizedPropName","CurrentDestinationUrlOperatorName","SuggestedDestinationUrlOperatorName","CurrentEventActionOperator","CurrentEventCategoryOperator","CurrentEventValueOperator","SuggestedEventActionOperator","SuggestedEventCategoryOperator","SuggestedEventValueOperator","errorcodeMapping","parameterPropertyName","actionLink","actionTitle","helpText","helpId","description2","requiredParameters","EMPTY_STATE","categoryMapping","Purchase","AddToCart","BeginCheckout","Subcribe","SubmitLeadForm","BookAppointment","Signup","RequestQuote","GetDirections","OutboundClick","Contact","PageView","Other","useTrackingStatusPopoverStyles","warningState","colorStatusWarningForeground2","colorStatusWarningBackground1","colorStatusWarningBorder1","popoverLearnMore","popoverContent","title3","ProtectedLink","onNavigation","dialogProps","dialogView","shouldShow","NavigationPopup","confirmButtonText","dialogContent","TrackingStatusComponent","LearnMoreComponent","activityLogger","goalFixType","isCreationWorkflow","history","pathname","TrackingStatusPopover","trackingStatusConfig","TrackingStatus","isOfflineGoal","rawParams","parmas","outputMessage","currentMessages","suggestedMessages","CurrentEventCategory","CurrentEventAction","CurrentEventLabel","CurrentEventLabelOperator","CurrentEventValue","SuggestedEventCategory","SuggestedEventAction","SuggestedEventLabel","SuggestedEventLabelOperator","SuggestedEventValue","suggested","generateEventGoalFixMessage","trackingStatusHelp","defaultParameters","reduce","obj","param","newObj","useEmptyStateStyle","emptyStateWrap","emptyStateLink","emptyStateMapping","subtext1","actionButton","actionButtonTitle","siteMapId","EmptyStateResultComponent","emptyState","EmptyState","EmptyStateSize","largeSurface","EmptyStateContent","subtext","EmptyStateSurfaceIcon","defaultOnClick","useHeaderControlStyles","body1Strong","resetButton","wrapper","scopeOptions","HeaderControlComponent","setScope","showNoMainGoalWarning","refetch","useDataSource","Field","HelpButton","TableViewSection","childrenProps","resetProps","searchTerm","showSelectedOnly","setShowNoMainGoalWarning","setSortState","isAccountLevelScope","renderHeaderCell","renderCell","media","useRenderingData","isSearchEmptyState","renderingColumns","TableGridView","aggregateMode","showClearAllHeader","disabledToggleWholeRow","disableClientSort","showDefaultSelectionHeader","appearanceRow","additionalDataGridProps","onSortChange","PageSizeSelector","pageSizeOptions","Paginator","GoalSelector","valueFromProps","onChangeFromProps","emptyStateNoGoal","setEmptyStateNoGoal","fetchData","prevValueRef","setValue","cmp","newSelectedGoal","useGoalSelectorState","ServerEntitySelectorEmbedded","newScope","buttons","OverviewCardFooter","footerButtonConfigs","renderPagination","CardFooter","hiddenButton","click","analyticsId","initialized","getDataToDisplayFromSortedData","sortedData","dimensions","inactive","active","colorPaletteGreenBackground3","colorPaletteRedBackground3","deleted","colorNeutralForeground4","isExperiment","entityType","searchTermActionRow","searchTermButton","leftSide","SearchTermActions","triggerSearchTermDrawer","searchTermStatus","rowRawItem","searchTermAdded","searchTermExcluded","onClickAdd","isNegative","adGroup","onClickExclude","addAction","entityNameLink","entityNameRow","EntityName","to","metricCell","metricCellContent","metricCellComparison","comparisonValuePositionMap","sup","sub","PerformanceMetricsChangePercentage","PerformanceMetricsChange","MetricCell","columnData","metricFormatter","comparisonMajorMetric","formatMetric","formatMetricWithSign","formatChangePercentageWithSign","columnConfig","shouldShowComparison","isSorted","changePercentValue","changeValue","positionMap","comparisonContent","supValue","subValue","major","dropdownTriggerButton","colorNeutralStroke1Hover","MetricPickerMenuButton","dropdownMetrics","onMetricDropdownSelect","dropdownItems","onMenuClick","metricCellHeaderText","sorted","colorSubtleBackgroundHover","MetricHeaderCell","metricDisplayName","EntityNameColumnId","headerElement","TableShimmer","grid","entityNameColumn","noDataContainer","OverviewPerformanceTable","entityDisPlayName","selectedMetrics","allMetrics","getHref","getPopoverContent","onColumnChange","newSelectedMetrics","m","newSortState","every","sm","metricColumns","selectedMetric","ExperimentId","SearchTermStatus","getColumns","u","nextSortState","dataToDisplay","isSortColumn","sortClassObj","DataGrid","getRowId","DataGridHeader","DataGridRow","DataGridHeaderCell","DataGridBody","rowId","DataGridCell","MetricPicker","metrics","onMetricSelect","selectedMetricKey","Caption1Strong","textCell","textCellContent","TextCell","cellName","cell","negative","colorPaletteLilacForeground2","middleMark","positive","colorPaletteBlueBorderActive","getBarWidth","change","maxChange","abs","ChangeBarCell","negativeBarWidth","positiveBarWidth","borderStyle","backupPalette","themePrimary","palette","iconFontFamily","getFluctuationContentStyle","InsightCell","fluctuationTypeIds","renderFluctuationPopup","buttonRef","trigger","metricContainer","separator","colorNeutralStroke1Selected","box","positiveBox","negativeBox","changeContainer","formattedStart","formattedEnd","PopoverInfo","localizedMetricName","currentMetric","periodMetric","percentageChange","currentDateRange","comparisonDateRange","formattedChange","formattedPercentageChange","formattedCurrentMetric","formattedPeriodMetric","changePercentage","ChangeBarColumnId","InsightColumnId","FluctuationTypeMap","Spend","PeriodPerformanceMetrics","availableInsights","hasFluctuation","AvailableInsightTypeIds","MTMetric","insightColumn","barColumn","contentHeaderContainer","dateContainer","OverviewTopChanges","paginationState","comparisonText","comparisonDateRangeDateRangeText","rangeInDays","getComparisonText","Caption2","useShimmerStyles","LoadShimmer","TIP_ID","PROMO","ADD_PAYMENT","CREATE_CAMPAIGN","COACHING","HELP","getCreateCampaignText","hasCoupon","ReactTemplate","importLink","useTipStyles","Tip","tipId","showWelcomeMsg","isPaymentFirstTile","useTipsConfig","OverviewWelcomeTips","pages","hasPaymentPermission","getLocalizedSupportLink","actionButtons","ccBaseUrlNoTrailingSlash","showTaxForm","Culture","coachingLink","useActionButtons","metricPickerBorderColor","getMetricPickerBorderStyle","metricPickerItem","colorNeutralStroke1","pickerName","toggleButton","pickerValue","imageIndicator","backgroundRepeat","backgroundPositionX","backgroundPositionY","backgroundSize","MetricPickerItem","hideCurrency","isComparisonEnabled","onMetricToggle","TooltipHost","Glyphicon","glyph","wrapperClass","mergeStyles","selectors","shimmerWithElement","MetricPickerShimmer","metricPicker","visibleMetrics","selectedMetricIndexes","onMetricUpdate","newSelectedMetricIndexes","i","newVisibleMetrics","showErrorText","cardContent","opacity","backdropFilter","gridRowStartStart","gridColumnStartStart","gridRowStart","gridColumnStart","chartContainer","spinner","category","uiNextColors","original","comparative","symbols","gridLineStyle","gridLineDashStyle","gridLineColor","tickPixelInterval","transformPoints","ianaTimeZone","DateTime","Value","parsedDate","dateParser","parseAPIDate","mismatches","granularityOptions","Hour","datetime","Day","Week","Month","Quarter","timestamp","granularity","TimeZone","formattedDate","highchartsPoints","getTime","highchartsSeries","PrimaryDataPoints","ComparisonDataPoints","MetricName","coerceMetric","fillColor","lineColor","lineWidth","radius","isOriginal","yAxis","isComparison","xAxis","useChartData","performanceTimeSeries","visibleMetricsDisplayNames","seriesWithDate","getSeriesWithDate","chartSeries","metricIndex","staticChartStyleOption","labels","showFirstLabel","showLastLabel","tickLength","plotBands","opposite","tickInterval","tooltip","crosshairs","borderWidth","useHTML","shared","shadow","valueDecimals","chart","spacingTop","spacingLeft","spacingRight","spacingBottom","credits","formatTickValue","tickValue","interval","formatXAxisLabel","isFirst","isLast","axis","clsModifier","getLabel","userOptions","tickPositioner","dataMin","dataMax","fontFamily","useChartViewOptions","isAllValuesZero","isAllLineValuesZero","hasMultipleXAxis","hasMultipleYAxis","endOnTick","formatter","startOnTick","reserveSpace","hideYAxisLabels","originalPoints","comparativePoints","tooltipTemplateVNext","originalPointsTooltip","comparativePointsTooltip","havePop","formatTooltip","outside","chartStyleOption","highchartsOptions","highcharts","merge","hasChartData","useFluentChartViewOptions","MockFluentChart","ChartView","chartProps","Chart","shellContentElement","reflow","useLayoutEffect","resizeObserver","ResizeObserver","observe","disconnect","PerformanceCardInternal","aggregatedMetricPickerData","useChartProps","PerformanceCard","PerformanceCardFluent","withFluentChart","isSizeInList","useSearchableMultiSelectorComboboxStyles","resultsTitleContainer","selectAllButton","textUnderlinePosition","useSearchableMultiSelectorStyles","labelContainer","labelContent","removeAllButton","InvalidOptionValues","SearchableMultiSelectorCombobox","hasMore","allowSelectAll","noResultsText","tooltipText","resultsTitle","onChangeQuery","onSelectOption","onCleanUp","onSelectAll","onFetchMore","setQuery","loadingOption","checkIcon","emptyOption","noMoreOption","selectedIds","resultIds","TooltipWrapper","updateQuery","newQuery","handleChange","handleOptionSelect","handleSearchBoxClick","handleKeyDown","handleScroll","currentTarget","scrollTop","clientHeight","scrollHeight","renderLabel","onBlur","onScroll","OptionGroup","fetchOnEmptyInput","allowRemoveAll","paginatedFetchingState","fetch","prevState","isArray","preState","fetchNextPage","debouncedFetch","usePaginatedFetchingState","fetchingState","useFetchingState","resultId","onChangeTagItems","newTagItems","newSelected","addItem","removeItem","removedId","toggleOption","selectAllOptions","selectedId","removeAllSelected","renderLabelWithHelpButton","Body1Strong","useFilterOnClient","originalFn","cachedResults","setCachedResults","fetchResults","filterPredicateFactory","DiagnosticsTypes","Issue","Recommendation","useDiagnosticsBarStyles","colorBrandBackground2","colorBrandBackground2Pressed","messageBarBody","messageBarAction","iconIssue","colorStatusWarningForeground1","iconRecommendation","DiagnosticBar","itemList","onActionClick","renderActions","locator","link","MessageBarActions","useDiagnosticsSectionStyles","diagnosticsSection","SummaryDiagnostic","issues","recommendations","diagnosticsExpandedSection","setDiagnosticsExpandedSection","diagnosticsSectionExpand","setActiveKeys","allPanelItems","checkItems","skipItemsTypeCheck","activeKeys","isTagetCpaHigherThanBudget","getLogString","checkValue","LogTargetCpaCheckOnSave","TargetCpaWarningBannerInternal","isSignup","tcpaCheckEnabled","shouldShowBanner","TargetCpaWarningBanner","filterLocationData","latitude","longitude","VIEWS","VIEW_STRINGS","MAP","TABLE","LOCATIONS_PER_PAGE","locationGranularity","county","stateOrProvince","city","postalCode","METRIC_STRINGS","TopImpressionRatePercent","AbsoluteTopImpressionRatePercent","PartialConversionRate","PartialConversionCPA","RevenueOnAdSpend","METRIC_FULL_STRINGS","bubbleColorForVNext","createPushpinOption","locationInfo","fillOpacity","getPushPinIcon","anchor","roundClickableArea","formatLocationData","locationData","maxValue","sortBy","pushpinOption","getCustomPushpin","pinOption","Maps","Pushpin","Point","useTopLocationsData","willFetchData","willRender","setLocations","setTopLocationValues","fetchCountryData","fetchStateOrProvinceData","fetchCountyData","fetchCityData","fetchPostalCodeData","fetchLocationData","countryData","countryLocationData","CountryLatitude","CountryLongitude","isUSorCanada","stateOrProvinceData","stateOrProvinceLocationData","countyData","countyLocationData","cityData","cityLocationData","postalCodeData","postalCodeLocationData","useMetricSelectorStyles","colorPaletteGreenBackground2","MetricSelector","onMetricChange","Footer","showPagination","useNoLocationsStyles","mapElement","MapShimmer","TopLocationsTable","locationsPerPage","getPageLocations","useMapStyles","TopLocationTarget","LocationTarget","constructor","topLocation","super","GeoPoint","ExpandedName","TARGETING_TYPE","Top","TopLocationsMap","mapRef","l","onGetTooltipHtmlContent","locationTarget","BingMapsView","wideContainer","wideContentWrapper","TopLocationsCardInternal","hasLocations","contentArea","isWideMode","viewOption","TopLocationsCard","HOC","BingMapsContextProvider","campaignApiServiceRoot","CampaignAPIPath","campaignApiToken","bingMapsApiKey","withBingMapsContext","preferenceFromServer","patchPreference","preferenceService","PreferenceContext","preferences","findByName","cardPreferences","Data","currentCardPreferences","initMetric","setMetric","newMetric","preferencesData","useViewSelectorStyles","WIDE_MODE_WIDTH","TopLocationViewSelector","onViewSelected"],"sourceRoot":""}