();\r\n const [isLoading, setIsLoading] = useState(true);\r\n\r\n // Competition card is handling data internally\r\n // but we need to trigger a re-fetch when the date range changes\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n const dataSource = useMemo(() => getAuctionInsightDataSource(), [dateRange]);\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n createAsyncToken(dataSource.query()).on({\r\n onSuccess: (chartData: any) => {\r\n setData(chartData);\r\n setIsLoading(false);\r\n clearCache();\r\n },\r\n onError: () => {\r\n setData(undefined);\r\n setIsLoading(false);\r\n clearCache();\r\n },\r\n onCancel: () => {\r\n setData(undefined);\r\n setIsLoading(false);\r\n clearCache();\r\n },\r\n });\r\n }, [dataSource]);\r\n\r\n return { data, isLoading };\r\n}\r\n","import _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React, { useCallback, useContext } from 'react';\r\nimport { AdvisorChartWithMetrics, CHART_TYPES } from '@bingads-webui-campaign-react/advisor-chart';\r\nimport { Button } from '@fluentui/react-components';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\n\r\nimport { ShimmerCard } from './shimmer-card';\r\nimport { NoDataCard } from './no-data-card';\r\nimport { useCardStyles } from '../styles/card-styles';\r\nimport { CompetitionCardProps, IScopeContext } from '../utils/types';\r\n\r\nimport { withAuctionInsightData } from '../data/with-auction-insight-data';\r\nimport { withFilterData } from './with-filter-data';\r\n\r\nexport function CompetitionCard({\r\n data,\r\n isLoading,\r\n i18n,\r\n perfMarkerUtils,\r\n selectedMetric,\r\n competitors = null,\r\n}: CompetitionCardProps) {\r\n const styles = useCardStyles();\r\n\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n // @ts-ignore\r\n const legacyI18n = window.globalLegacyI18n.get('@bingads-webui/i18n-amd-loader!campaignui/feature/dashboard-cards');\r\n\r\n const onClick = useCallback(() => {\r\n scope.save('/campaign/vnext/competitionauction');\r\n }, [scope]);\r\n\r\n const {\r\n willFetchData,\r\n willRender,\r\n done,\r\n } = perfMarkerUtils;\r\n\r\n if (isLoading) {\r\n willFetchData();\r\n return (\r\n
\r\n
\r\n {i18n.getString(_TL_('Go to Competition tab'))} \r\n
\r\n
(WrappedComponent: ComponentType
) {\r\n const HoC = React.memo((props: Omit) => {\r\n const { dateRange } = props;\r\n const { data, isLoading } = useAuctionInsightData({\r\n dateRange,\r\n });\r\n\r\n return ((WrappedComponent: ComponentType
) {\r\n const HoC = (props: Omit & { headerState?: State }) => {\r\n const { headerState, isLoading } = props;\r\n return ((_.find(metrics, (m: Metric) => m.metric === preferences[metricPreferenceKeyName])\r\n || _.find(metrics, (m: Metric) => m.metric === METRICS.ImpressionShare));\r\n\r\n const setMetric = useCallback((metricObj) => {\r\n setMetricValue(metricObj);\r\n onMetricSet(metricObj.metric);\r\n saveGeneralInsightsPreferences({\r\n [metricPreferenceKeyName]: metricObj.metric,\r\n }, preferenceService);\r\n }, [metricPreferenceKeyName, onMetricSet, preferenceService]);\r\n\r\n return {\r\n metrics,\r\n selectedMetric,\r\n setMetric,\r\n };\r\n};\r\n","import { CAMPAIGN_TYPES, CAMPAIGN_TYPES_ENUM_VALUE } from '@bingads-webui-campaign/competition-auction-insight-preferences';\r\n\r\nexport function getCampaignType(serverContext, currentCampaign) {\r\n if (!serverContext?.Permissions?.IsBAACompetitionBSCAuctionInsightsEnabled) {\r\n return CAMPAIGN_TYPES.Search;\r\n } else if (currentCampaign?.CampaignType === CAMPAIGN_TYPES_ENUM_VALUE[CAMPAIGN_TYPES.Shopping]) {\r\n // CurrentCampaign only has enum value.\r\n return CAMPAIGN_TYPES.Shopping;\r\n }\r\n // for account scope, directly use search\r\n return CAMPAIGN_TYPES.Search;\r\n}\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useFilterStyles = makeStyles({\r\n container: {\r\n maxWidth: '300px',\r\n width: '50%',\r\n display: 'flex',\r\n flexGrow: '1',\r\n justifyContent: 'flex-end',\r\n },\r\n button: {\r\n paddingTop: 0,\r\n paddingLeft: '5px',\r\n paddingRight: '0px',\r\n paddingBottom: '0px',\r\n width: 'fit-content',\r\n },\r\n buttonText: {\r\n ...shorthands.overflow('hidden'),\r\n lineBreak: 'anywhere',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n color: tokens.colorNeutralForeground2,\r\n },\r\n listbox: {\r\n maxHeight: '300px',\r\n minWidth: '250px',\r\n },\r\n dropdown: {\r\n ...shorthands.border('none'),\r\n minWidth: '100px',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useEffect, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Menu,\r\n MenuButton,\r\n MenuPopover,\r\n MenuList,\r\n MenuItem,\r\n MenuTrigger,\r\n Caption1 as Text,\r\n Dropdown,\r\n DropdownProps,\r\n Option,\r\n OptionGroup,\r\n Tooltip\r\n} from '@fluentui/react-components';\r\n\r\nimport { usePreferenceMetrics } from './use-preference-metrics';\r\nimport { CompetitionFilterProps } from '../utils/types';\r\nimport { withCompetitorsData } from '../data/with-competitors-data';\r\nimport { useFilterStyles } from '../styles/filter-styles';\r\n\r\nexport function CompetitionFilter({\r\n isLoading,\r\n state,\r\n setState,\r\n competitors,\r\n i18n,\r\n}: CompetitionFilterProps) {\r\n const styles = useFilterStyles();\r\n\r\n const [selectedCompetitors, setSelectedCompetitors] = React.useState();\r\n\r\n const onMetricSet = useCallback((metric: string) => {\r\n setState(s => ({\r\n ...s,\r\n metric,\r\n }));\r\n }, [setState]);\r\n\r\n const {\r\n metrics,\r\n selectedMetric,\r\n setMetric,\r\n } = usePreferenceMetrics({ onMetricSet });\r\n\r\n useEffect(() => {\r\n if (!state && !isLoading && selectedMetric) {\r\n const initCompetitors = _.first(competitors, 4) || [];\r\n setSelectedCompetitors(initCompetitors);\r\n setState({\r\n metric: selectedMetric?.metric,\r\n competitors: initCompetitors,\r\n });\r\n }\r\n }, [selectedMetric, isLoading, state, setState, competitors]);\r\n\r\n const onSelect: DropdownProps['onOptionSelect'] = (event, data) => {\r\n setSelectedCompetitors(data.selectedOptions);\r\n setState(s => ({\r\n ...s,\r\n competitors: data.selectedOptions,\r\n }));\r\n };\r\n\r\n const dropdownButtonText = useMemo(() => {\r\n const text = selectedCompetitors?.length > 0 ?\r\n i18n.getString(_TL_('{{selected}} similar advertisers'), { selected: selectedCompetitors?.length })\r\n : i18n.getString(_TL_('Compare up to 4 similar advertisers'));\r\n return (\r\n \r\n {text} \r\n \r\n );\r\n }, [selectedCompetitors, styles, i18n]);\r\n\r\n if (!state) {\r\n return <>;\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {competitors.map(option => (\r\n = 4 && !selectedCompetitors.includes(option)}>{option} \r\n ))}\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {selectedMetric.value} \r\n \r\n \r\n \r\n \r\n \r\n {\r\n _.map(metrics, metric =>\r\n setMetric(metric)} key={metric.metric}>{metric.value} )\r\n }\r\n \r\n \r\n \r\n
(WrappedComponent: ComponentType
) {\r\n const HoC = React.memo((props: Omit) => {\r\n const { dateRange } = props;\r\n const { data, isLoading } = useAuctionInsightData({\r\n dateRange,\r\n });\r\n\r\n const competitors = _.reject(_.pluck(data?.items, 'DisplayDomain'), name => name === 'You');\r\n return ( = ({ color, useGradient }) => {\r\n const boxStyle: React.CSSProperties = {\r\n width: '10px',\r\n height: '10px',\r\n ...(useGradient\r\n ? { backgroundImage: `linear-gradient(90deg, ${color} 50%, white 50%)` }\r\n : { backgroundColor: color }),\r\n backgroundSize: '4px 4px',\r\n };\r\n\r\n return
;\r\n};\r\n\r\nLegendIcon.defaultProps = {\r\n useGradient: false,\r\n};\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport { LegendIcon } from '../utils/callout-legend-icon';\r\nimport { DeviceCardProps } from '../utils/types';\r\n\r\nexport const renderCustomCallout = (data: any, styles: any, dateRange: DeviceCardProps['dateRange'], i18n: DeviceCardProps['i18n']) => {\r\n if (!data) {\r\n return null;\r\n }\r\n\r\n const {\r\n legend, legendColor, metricValue, total, displayName,\r\n } = data;\r\n\r\n return (\r\n \r\n
{i18n.getString(legend)}
\r\n
{displayName}
\r\n
\r\n \r\n {dateRange.RangeStartDate} - {dateRange.RangeEndDate}\r\n \r\n
\r\n
{metricValue} ({total}{i18n.getString(_TL_('% of total'))})
\r\n
), [data]);\r\n\r\n const overallTotals = useMemo(() => {\r\n if (Array.isArray(deviceData) && deviceData.length > 0) {\r\n return deviceData[0]?.PerformanceMetrics || {};\r\n } else if (deviceData?.PerformanceMetrics) {\r\n return deviceData.PerformanceMetrics;\r\n }\r\n return deviceData?.OverallTotals?.PerformanceMetrics || {};\r\n }, [deviceData]);\r\n\r\n const updatedChartPoints = useMemo(() => {\r\n const updatedPoints = { ...chartPoints };\r\n\r\n Object.keys(updatedPoints).forEach((metric) => {\r\n const typedMetric = metric as Metric;\r\n\r\n updatedPoints[typedMetric][0].chartData = updatedPoints[typedMetric][0].chartData.map((chartData) => {\r\n const deviceMetrics = deviceTypeMap[chartData.legend.toLowerCase()];\r\n\r\n const value = deviceMetrics && deviceMetrics[typedMetric] !== null && deviceMetrics[typedMetric] !== undefined\r\n ? deviceMetrics[typedMetric]\r\n : 0;\r\n const overallValue = overallTotals[typedMetric] !== null && overallTotals[typedMetric] !== undefined\r\n ? overallTotals[typedMetric]\r\n : 1;\r\n\r\n const total = (overallValue === 0) ? 0 : ((value / overallValue) * 100).toFixed(2);\r\n\r\n return {\r\n ...chartData,\r\n data: value,\r\n total,\r\n metricValue: formatMetric(typedMetric, value),\r\n };\r\n });\r\n });\r\n\r\n return updatedPoints;\r\n }, [chartPoints, deviceTypeMap, overallTotals]);\r\n\r\n const [selectedViews, setSelectedViews] = useState(initialSelectedMetrics.map(metric => metric.key));\r\n\r\n const dropdownOptions = useMemo(\r\n () =>\r\n selectedViews.map((_, index) => {\r\n const remainingMetrics = allMetrics.filter(metric => !selectedViews.includes(metric.key) || metric.key === selectedViews[index]);\r\n return {\r\n key: selectedViews[index],\r\n text: remainingMetrics.find(m => m.key === selectedViews[index])?.displayName || '',\r\n options: remainingMetrics.map(metric => ({\r\n key: metric.key,\r\n text: metric.displayName,\r\n })),\r\n };\r\n }),\r\n [selectedViews, allMetrics]\r\n );\r\n const styles = useDefaultStyles(() => getStyles(footerVisible));\r\n\r\n const dataViews = selectedViews.map(view => updatedChartPoints[view]);\r\n\r\n const handleViewChange = useCallback(index => (event, option) => {\r\n setSelectedViews((prevSelectedViews) => {\r\n const newViews = [...prevSelectedViews];\r\n newViews[index] = option.key;\r\n patchPreference({ selectedColumns: newViews });\r\n return newViews;\r\n });\r\n }, [patchPreference]);\r\n\r\n return (\r\n \r\n {dropdownOptions.map((option, index) => (\r\n
\r\n \r\n \r\n
\r\n \r\n renderCustomCallout(data, styles, dateRange, i18n)}\r\n />\r\n
\r\n \r\n ))}\r\n
\r\n \r\n {patterns.map(pattern => (\r\n \r\n \r\n \r\n );\r\n};\r\n","export const legendKeyMap = {\r\n SmartPhone: 'Smartphone',\r\n};\r\n","import _ from 'underscore';\r\nimport { mapSegmentData } from './metric-mapper';\r\n\r\nexport const getSegmentedData = (data, keyPath) => {\r\n if (keyPath.length === 0) return [];\r\n\r\n if (Array.isArray(data)) {\r\n return _.flatten(data.map((item) => {\r\n const segmentedData = _.get(item, keyPath);\r\n return segmentedData ? mapSegmentData(segmentedData) : [];\r\n }));\r\n }\r\n\r\n let segmentedData = _.get(data, keyPath);\r\n\r\n if (!segmentedData && data?.DeviceSegmentedPerformanceData) {\r\n segmentedData = _.get(data.DeviceSegmentedPerformanceData, keyPath);\r\n }\r\n\r\n return segmentedData ? mapSegmentData(segmentedData) : [];\r\n};\r\n","export const extractNumericValue = (value) => {\r\n const symbolRegex = /[^\\d.-]/g;\r\n if (typeof value === 'string') {\r\n const sanitizedValue = value.replace(symbolRegex, '');\r\n return parseFloat(sanitizedValue);\r\n }\r\n return Number(value);\r\n};\r\n","import { extractNumericValue } from './numeric-value-extractor';\r\n\r\nexport function calculatePercentageOfTotal(metricValue: string | undefined, totalMetric: number): string {\r\n if (totalMetric > 0) {\r\n const numericValue = extractNumericValue(metricValue ?? '0');\r\n return ((numericValue / totalMetric) * 100).toFixed(2);\r\n }\r\n return '0.00';\r\n}\r\n","import React, { useCallback, useState, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport { MultiStackedBarChart, IChartProps } from '@fluentui/react-charting';\r\nimport { TooltipHost } from '@fluentui/react';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive-unthemed';\r\nimport { Dropdown } from '@fluentui/react/lib/Dropdown';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { formatMetric, formatMetricWithSign, formatChangePercentageWithSign } from '@bingads-webui-campaign-legacy/performance-metric-formatter/index';\r\nimport { computerColor, tabletColor, mobileColor, connectedTVColor } from '../constants/device-color';\r\nimport { DeviceComparisonPatterns } from '../helpers/svg-pattern-comparison-state';\r\nimport { legendKeyMap } from '../utils/legend-key-map';\r\nimport { DeviceCardProps } from '../utils/types';\r\nimport { getSegmentedData } from '../utils/segment-data-extractor';\r\nimport { LegendIcon } from '../utils/callout-legend-icon';\r\nimport { Metric } from '../utils/metric-formatter';\r\nimport { calculatePercentageOfTotal } from '../utils/total-percentage-calculator';\r\nimport { metrics } from '../constants/metrics-data';\r\nimport { dropdownCustomStyles } from '../styles/dropdown-styles';\r\nimport { getStyles } from '../styles/devices-comparison-card';\r\n\r\nexport function DeviceComparisonCard({\r\n i18n, deviceData, dateRange, allMetrics, initialSelectedMetrics, patchPreference, hideCurrency, footerVisible,\r\n}: DeviceCardProps) {\r\n const currentComparisonData = useMemo(() => getSegmentedData(deviceData, ['PerformanceMetrics', 'SegmentedData']), [deviceData]);\r\n\r\n const previousComparisonData = useMemo(() => getSegmentedData(deviceData, ['PeriodPerformanceMetrics', 'SegmentedData']), [deviceData]);\r\n\r\n const changeData = useMemo(() => {\r\n if (!currentComparisonData.length || !previousComparisonData.length) return [];\r\n\r\n const previousDataMap = previousComparisonData.reduce((acc, item) => {\r\n const deviceIdentifier = item.deviceType || 'defaultDevice';\r\n acc[deviceIdentifier] = item;\r\n return acc;\r\n }, {});\r\n\r\n return currentComparisonData.map((current) => {\r\n const deviceIdentifier = current.deviceType || 'defaultDevice';\r\n\r\n const previous = previousDataMap[deviceIdentifier] || {};\r\n\r\n return Object.keys(current).reduce((acc, key) => {\r\n acc[key] =\r\n typeof current[key] === 'number' && typeof previous[key] === 'number'\r\n ? current[key] - previous[key]\r\n : current[key];\r\n\r\n return acc;\r\n }, { deviceIdentifier });\r\n });\r\n }, [currentComparisonData, previousComparisonData]);\r\n\r\n const changeDataPercentage = useMemo(() => getSegmentedData(deviceData, ['PerformanceMetricsChangePercentage', 'SegmentedData']), [deviceData]);\r\n const currentDateRange = dateRange ? `${dateRange.RangeStartDate} - ${dateRange.RangeEndDate}` : '';\r\n const previousDateRange = dateRange && dateRange.compared ? `${dateRange.compared.formattedStart} - ${dateRange.compared.formattedEnd}` : '';\r\n\r\n const currentPeriodTotals = deviceData?.OverallTotals?.PerformanceMetrics || deviceData?.PerformanceMetrics;\r\n const previousPeriodTotals = deviceData?.OverallTotals?.PeriodPerformanceMetrics || deviceData?.PeriodPerformanceMetrics;\r\n const styles = useDefaultStyles(() => getStyles(footerVisible));\r\n\r\n const createChartSeriesData = useCallback(\r\n (deviceMetrics, metric, dateRange, isPattern = false) => {\r\n /**\r\n * Maps device types to their respective colors or patterns.\r\n * This mapping is used to set the colors or patterns for chart bars based on current or previous date range.\r\n *\r\n * @param isPattern - A boolean indicating whether to use a pattern (true) or solid color (false).\r\n * @returns An object where each device type is associated with either a pattern URL or a solid color.\r\n */\r\n const colorMap = {\r\n Computer: isPattern ? 'url(#pattern1)' : computerColor,\r\n Tablet: isPattern ? 'url(#pattern2)' : tabletColor,\r\n SmartPhone: isPattern ? 'url(#pattern3)' : mobileColor,\r\n ConnectedTV: isPattern ? 'url(#pattern4)' : connectedTVColor,\r\n };\r\n\r\n const validDevices = ['Computer', 'Tablet', 'SmartPhone', 'ConnectedTV'];\r\n\r\n return validDevices\r\n .filter(deviceType => deviceMetrics[deviceType])\r\n .map((deviceType) => {\r\n const value = deviceMetrics[deviceType][metric];\r\n const formattedValue = formatMetric(metric, value);\r\n\r\n return {\r\n legend: deviceType,\r\n data: value,\r\n color: colorMap[deviceType],\r\n legendColor: colorMap[deviceType],\r\n metric,\r\n dateRange,\r\n metricValue: formattedValue,\r\n };\r\n });\r\n },\r\n []\r\n );\r\n\r\n const prepareDeviceData = useCallback(\r\n comparisonData => comparisonData.reduce((deviceDataAccumulator, { deviceType, ...metrics }) => ({\r\n ...deviceDataAccumulator, [deviceType]: metrics,\r\n }), {}),\r\n []\r\n );\r\n\r\n const createChartPoints = useCallback(\r\n (metric: Metric): IChartProps[] => {\r\n const currentDeviceData = prepareDeviceData(currentComparisonData);\r\n const previousDeviceData = prepareDeviceData(previousComparisonData);\r\n\r\n return [\r\n {\r\n chartTitle: '',\r\n chartData: createChartSeriesData(currentDeviceData, metric, currentDateRange),\r\n },\r\n {\r\n chartTitle: '',\r\n chartData: createChartSeriesData(previousDeviceData, metric, previousDateRange, true),\r\n },\r\n ];\r\n },\r\n [prepareDeviceData, currentComparisonData, previousComparisonData, createChartSeriesData, currentDateRange, previousDateRange]\r\n );\r\n\r\n const chartPoints: Record = useMemo(\r\n () =>\r\n metrics.reduce((accumulator, metric) => ({\r\n ...accumulator,\r\n [metric]: createChartPoints(metric),\r\n }), {} as Record),\r\n [createChartPoints]\r\n );\r\n\r\n const getCombinedDataPoints = useCallback((data) => {\r\n const combined = {};\r\n\r\n if (Array.isArray(data)) {\r\n data.forEach((entry) => {\r\n if (entry.chartData) {\r\n entry.chartData.forEach((dataPoint) => {\r\n const { legend } = dataPoint;\r\n if (!combined[legend]) {\r\n combined[legend] = [];\r\n }\r\n combined[legend].push(dataPoint);\r\n });\r\n }\r\n });\r\n }\r\n\r\n return combined;\r\n }, []);\r\n\r\n const calloutStyles = useMemo(() => ({\r\n customCallout: styles.customCallout,\r\n dataItem: styles.dataItem,\r\n gridContainerStyle: styles.gridContainerStyle,\r\n separator: styles.separator,\r\n leftGrid: styles.leftGrid,\r\n rightGrid: styles.rightGrid,\r\n legend: styles.legend,\r\n }), [styles]);\r\n\r\n const renderCustomCallout = useCallback((point, combinedData) => {\r\n if (!point || !point.legend) return null;\r\n\r\n // Map legend to its updated version if needed\r\n const mappedLegend = legendKeyMap[point.legend] || point.legend;\r\n\r\n const changeDataEntry = changeData.find(entry => entry.deviceIdentifier === point.legend);\r\n const change = changeDataEntry ? changeDataEntry[point.metric] : null;\r\n let roundedValue: number = 0;\r\n\r\n if (change !== null) {\r\n const numericChange = Number(change);\r\n if (Number.isFinite(numericChange)) {\r\n roundedValue = numericChange;\r\n }\r\n }\r\n\r\n const changeDataPercentageEntry = changeDataPercentage.find(entry => entry.deviceType === point.legend);\r\n const changePercentage = changeDataPercentageEntry?.[point.metric] ?? null;\r\n let roundedValuePercentage = '0.00%';\r\n\r\n if (changePercentage !== null) {\r\n const numericChangePercentage = Number(changePercentage);\r\n\r\n if (Number.isFinite(numericChangePercentage)) {\r\n if (numericChangePercentage === 0) {\r\n roundedValuePercentage = '0.00%';\r\n } else if (numericChangePercentage > 1e10) {\r\n roundedValuePercentage = '+∞';\r\n } else if (numericChangePercentage < -1e10) {\r\n roundedValuePercentage = '-∞';\r\n } else {\r\n roundedValuePercentage = formatChangePercentageWithSign(numericChangePercentage);\r\n }\r\n }\r\n }\r\n\r\n const legendData = Array.isArray(combinedData[point.legend])\r\n ? combinedData[point.legend]\r\n : [combinedData[point.legend]];\r\n\r\n const metricDisplayName = allMetrics.find(metric => metric.key === point.metric)?.displayName || point.metric;\r\n\r\n const metricsToHidePercentage = new Set([\r\n 'CTR',\r\n 'Top impr. rate',\r\n 'Abs. top impr. rate',\r\n 'Conv. rate',\r\n 'Return on ad spend',\r\n ]);\r\n const hidePercentageOfTotal = metricsToHidePercentage.has(metricDisplayName);\r\n\r\n const metricValue = legendData[0]?.metricValue || '0';\r\n const totalMetric = currentPeriodTotals?.[point.metric] ?? 0;\r\n\r\n const currentPercentageOfTotalMetric = calculatePercentageOfTotal(metricValue, totalMetric);\r\n\r\n const previousMetricValue = legendData[1]?.metricValue ?? '0';\r\n const previousTotalMetric = previousPeriodTotals?.[point.metric] ?? 1;\r\n\r\n const previousPercentageOfTotalMetric = calculatePercentageOfTotal(previousMetricValue, previousTotalMetric);\r\n const renderMetricValue = (metricValue, percentageMetricKey, percentageMetricValue) => (\r\n \r\n {metricValue}\r\n {!hidePercentageOfTotal &&\r\n i18n.getString(_TL_(' ({{percentage}}% of total)'), {\r\n percentage: percentageMetricValue,\r\n })\r\n }\r\n \r\n );\r\n\r\n const changeValue = formatMetricWithSign(allMetrics.find(metric => metric.key === point.metric).key, roundedValue);\r\n\r\n return (\r\n \r\n {legendData.length > 0 && (\r\n <>\r\n
{i18n.getString(mappedLegend)}
\r\n
{metricDisplayName}
\r\n
\r\n
\r\n {legendData[0] && (\r\n <>\r\n
\r\n
\r\n
{legendData[0].dateRange}
\r\n \r\n )}\r\n
\r\n
\r\n
\r\n {legendData[1] && (\r\n <>\r\n
\r\n
\r\n
{legendData[1].dateRange}
\r\n \r\n )}\r\n
\r\n
\r\n {renderMetricValue(legendData[0]?.metricValue, 'currentPercentageOfTotalMetric', currentPercentageOfTotalMetric)}\r\n
\r\n
\r\n
\r\n {renderMetricValue(legendData[1]?.metricValue, 'previousPercentageOfTotalMetric', previousPercentageOfTotalMetric)}\r\n
\r\n
\r\n
\r\n {\r\n i18n.getString(_TL_('Change: {{changeValue}} ({{roundedValuePercentage}})'), {\r\n changeValue,\r\n roundedValuePercentage,\r\n })\r\n }\r\n
\r\n \r\n )}\r\n
\r\n {selectedViews.map((view, index) => (\r\n
\r\n
\r\n handleDropdownChange(view.id, option)}\r\n selectedKey={view.selectedKey}\r\n styles={dropdownCustomStyles}\r\n aria-label={i18n.getString(_TL_('Select an option from the dropdown'))}\r\n />\r\n {hideCurrency && (view.selectedKey === 'AverageCPC' || view.selectedKey === 'Spend' || view.selectedKey === 'PartialConversionCPA' || view.selectedKey === 'AdvertiserReportedRevenue') && (\r\n \r\n
\r\n
\r\n
\r\n
\r\n renderCustomCallout(props, getCombinedDataPoints(chartPoints[view.selectedKey]))}\r\n />\r\n
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\n\r\nexport const ComputerIcon = ({ color }) => (\r\n \r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const TabletIcon = ({ color }) => (\r\n \r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const MobileIcon = ({ color }) => (\r\n \r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const ConnectedTVIcon = ({ color }) => (\r\n \r\n \r\n);\r\n","const container = {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n};\r\n\r\nconst chartContainer = {\r\n flexGrow: 1,\r\n minHeight: 0,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n};\r\n\r\nconst deviceLegend = {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n flexDirection: 'row',\r\n columnGap: '20px',\r\n};\r\n\r\nconst title = {\r\n display: 'flex',\r\n alignItems: 'center',\r\n cursor: 'pointer',\r\n};\r\n\r\nconst icon = {\r\n paddingTop: 3,\r\n};\r\n\r\nconst footer = {\r\n marginTop: 'auto',\r\n};\r\n\r\nexport const getStyles = () => ({\r\n container,\r\n chartContainer,\r\n deviceLegend,\r\n title,\r\n icon,\r\n footer,\r\n});\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport { initializeIcons } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { computerColor, tabletColor, mobileColor, connectedTVColor } from '../constants/device-color';\r\nimport { ComputerIcon } from '../media/computer-icon-svg';\r\nimport { TabletIcon } from '../media/tablet-icon-svg';\r\nimport { MobileIcon } from '../media/mobile-icon-svg';\r\nimport { ConnectedTVIcon } from '../media/connectedTV-icon-svg';\r\nimport { getStyles } from '../styles/devices-card';\r\n\r\ninitializeIcons();\r\ninterface LegendProps {\r\n i18n: {\r\n getString: (key: string) => string;\r\n };\r\n}\r\ninterface LegendItem {\r\n title: string;\r\n color: string;\r\n icon: any;\r\n}\r\nexport const Legend: React.FC = ({ i18n }) => {\r\n const styles = useDefaultStyles(getStyles);\r\n const legends: LegendItem[] = [\r\n { title: i18n.getString(_TL_('Computer')), color: computerColor, icon: \r\n {legends.map((legend, index) => (\r\n
\r\n {legend.icon}
\r\n {legend.title} \r\n \r\n
\r\n
\r\n
\r\n {!isComparisonScenario && (\r\n
\r\n {footerVisible && (\r\n
\r\n \r\n {i18n.getString(_TL_('View devices'))}\r\n \r\n
\r\n )}\r\n
(false);\r\n const [isLoading, setIsLoading] = useState(true);\r\n\r\n const extendedFilter = useMemo(() => {\r\n if (campaignId) {\r\n return [...filter, {\r\n filter: {\r\n key: 'CampaignId',\r\n value: {\r\n query: {\r\n Id: Number(campaignId),\r\n },\r\n },\r\n },\r\n }];\r\n }\r\n return filter;\r\n }, [campaignId, filter]);\r\n\r\n const fetchSingleTile = navigationLevel === NavigationLevel.Campaign;\r\n\r\n const entitySet = useMemo(() => {\r\n if (campaignId) {\r\n return edm.currentCampaign.AdGroups;\r\n }\r\n if (isAccountIdAvailable) {\r\n return edm.currentAccount.Campaigns;\r\n }\r\n return edm.currentCustomer.Accounts;\r\n }, [campaignId, isAccountIdAvailable]);\r\n\r\n const fetcher = useCallback(async () => {\r\n setIsLoading(true);\r\n const data = await fetchAggregatedData({\r\n entitySet,\r\n dateRange,\r\n filter: extendedFilter,\r\n campaignType,\r\n jsdata,\r\n dateUtil,\r\n navigationLevel,\r\n getCardsConfig,\r\n fetchSingleTile,\r\n isDevice: true,\r\n permissions: config.get('Permissions'),\r\n dfmCacheKey: cardDeviceId,\r\n });\r\n\r\n if (!data || (!data.raw && !data.OverallTotals)) {\r\n throw new Error('Error loading data for device card');\r\n }\r\n\r\n return data;\r\n }, [entitySet, dateRange, extendedFilter, getCardsConfig, navigationLevel, fetchSingleTile, campaignType]);\r\n\r\n const { data, error } = useSWR(\r\n [dateRange, extendedFilter, getCardsConfig, navigationLevel, fetchSingleTile],\r\n fetcher,\r\n {\r\n onSuccess: () => {\r\n setIsLoading(false);\r\n willRender();\r\n done();\r\n },\r\n onError: () => {\r\n setIsLoading(false);\r\n setHasError(true);\r\n },\r\n }\r\n );\r\n\r\n useEffect(() => {\r\n if (dateRange && filter) {\r\n willFetchData();\r\n }\r\n }, [dateRange, filter, getCardsConfig, granularity, navigationLevel, willFetchData]);\r\n\r\n const deviceData = useMemo(() => {\r\n if (campaignId) {\r\n return data?.raw?.['@ns.unfiltered.totals'] || {};\r\n }\r\n return data || {};\r\n }, [data, campaignId]);\r\n\r\n return {\r\n aggregatedData: deviceData || null,\r\n isLoading,\r\n hasError: !!error,\r\n };\r\n}\r\n","import {\r\n TMajorMetric,\r\n} from '@bingads-webui-campaign-react/overview-performance-table';\r\n\r\nimport { TDataRequestSortDirection } from './types';\r\n\r\nexport function getOrderFromGridSortForCombinedCall({\r\n sortColumn,\r\n sortDirection,\r\n dateRange,\r\n comparisonMajorMetric,\r\n}: {\r\n sortColumn: string | number;\r\n sortDirection: 'ascending' | 'descending';\r\n dateRange: any;\r\n comparisonMajorMetric: TMajorMetric;\r\n}) : {\r\n sortColumn: string;\r\n sortDirection: TDataRequestSortDirection;\r\n} {\r\n const order = sortDirection === 'ascending' ? 'ASC' : 'DESC';\r\n let orderByValue;\r\n\r\n if (dateRange.compared) {\r\n switch (comparisonMajorMetric) {\r\n case 'PerformanceMetricsChange':\r\n orderByValue = 'PoPPerformanceMetricsChange';\r\n break;\r\n case 'PerformanceMetricsChangePercentage':\r\n orderByValue = 'PoPPerformanceMetricsChangePercentage';\r\n break;\r\n case 'PerformanceMetrics':\r\n orderByValue = 'PerformanceMetrics';\r\n break;\r\n default:\r\n orderByValue = 'PerformanceMetrics';\r\n break;\r\n }\r\n } else {\r\n orderByValue = 'PerformanceMetrics';\r\n }\r\n\r\n return {\r\n sortColumn: `${orderByValue}/${sortColumn}`,\r\n sortDirection: order,\r\n };\r\n}\r\n\r\nexport function getOrderFromGridSort({\r\n sortColumn,\r\n sortDirection,\r\n dateRange,\r\n comparisonMajorMetric,\r\n}: {\r\n sortColumn: string | number;\r\n sortDirection: 'ascending' | 'descending';\r\n dateRange: any;\r\n comparisonMajorMetric: TMajorMetric;\r\n}) : {\r\n orderby: string | number;\r\n direction: number;\r\n} {\r\n const direction = sortDirection === 'ascending' ? 1 : -1;\r\n let orderByValue;\r\n\r\n if (dateRange.compared) {\r\n switch (comparisonMajorMetric) {\r\n case 'PerformanceMetricsChange':\r\n orderByValue = 'PoPPerformanceMetricsChange';\r\n break;\r\n case 'PerformanceMetricsChangePercentage':\r\n orderByValue = 'PoPPerformanceMetricsChangePercentage';\r\n break;\r\n case 'PerformanceMetrics':\r\n orderByValue = 'PerformanceMetrics';\r\n break;\r\n default:\r\n orderByValue = 'PerformanceMetrics';\r\n break;\r\n }\r\n } else {\r\n orderByValue = 'PerformanceMetrics';\r\n }\r\n\r\n return {\r\n orderby: sortColumn,\r\n direction,\r\n };\r\n}\r\n","export const defaultComparisonMetric = 'PerformanceMetrics';\r\n","import _ from 'underscore';\r\nimport React, { useState, useCallback, useMemo, useEffect } from 'react';\r\nimport {\r\n OverviewPerformanceTable,\r\n ISortState,\r\n} from '@bingads-webui-campaign-react/overview-performance-table';\r\nimport { useHeaderStateContext } from '@bingads-webui-campaign-react/overview-card';\r\nimport { getUIMetrics } from '@bingads-webui-campaign/overview-cards-common';\r\n\r\n\r\nimport { IGridDataTableProps } from './types';\r\nimport { useGridData } from './use-grid-data';\r\nimport { getOrderFromGridSort } from './order-by-helper';\r\nimport { defaultComparisonMetric } from './consts';\r\n\r\nexport function GridDataTable({\r\n metricFormatter,\r\n i18n,\r\n constructOptions,\r\n dateRange,\r\n filter,\r\n permissions,\r\n jsdata,\r\n dateUtil,\r\n allMetrics,\r\n initialSelectedMetrics,\r\n initialSortColumn,\r\n initialSortDirection,\r\n patchPreference,\r\n cardTypeId,\r\n footerButtonConfigs,\r\n entityDisPlayName,\r\n perfMarkerUtils,\r\n getHref,\r\n getPopoverContent,\r\n triggerSearchTermDrawer,\r\n entityType,\r\n navigationLevel,\r\n campaignType,\r\n}: IGridDataTableProps) {\r\n const [selectedMetrics, setSelectedMetrics] = useState(initialSelectedMetrics);\r\n const [uiMetrics] = useState(getUIMetrics(allMetrics, campaignType, cardTypeId));\r\n const [sortState, setSortState] = useState({ sortColumn: initialSortColumn, sortDirection: initialSortDirection });\r\n const headerState = useHeaderStateContext();\r\n const comparisonMajorMetric = dateRange.compared ? headerState?.selectedItemValue : defaultComparisonMetric;\r\n const [isFirstDataLoaded, setIsFirstDataLoaded] = useState(false);\r\n const {\r\n willFetchData,\r\n willRender,\r\n done,\r\n } = perfMarkerUtils;\r\n\r\n const {\r\n orderby,\r\n direction,\r\n } = useMemo(() => getOrderFromGridSort({\r\n sortColumn: sortState.sortColumn,\r\n sortDirection: sortState.sortDirection,\r\n dateRange,\r\n comparisonMajorMetric,\r\n }), [comparisonMajorMetric, dateRange, sortState]);\r\n const columns = useMemo(() => selectedMetrics.map(m => m.key), [selectedMetrics]);\r\n\r\n const {\r\n data,\r\n isLoading,\r\n } = useGridData({\r\n dateRange,\r\n filter,\r\n constructOptions,\r\n permissions,\r\n jsdata,\r\n dateUtil,\r\n orderby,\r\n direction,\r\n selectedMenuItem: comparisonMajorMetric,\r\n columns,\r\n cardTypeId,\r\n willFetchData,\r\n willRender,\r\n navigationLevel,\r\n });\r\n\r\n useEffect(() => {\r\n if (!isFirstDataLoaded && !isLoading) {\r\n setIsFirstDataLoaded(true);\r\n done();\r\n }\r\n }, [data, done, isFirstDataLoaded, isLoading, willRender]);\r\n\r\n const onChange = useCallback(({\r\n newSelectedMetrics,\r\n newSortState,\r\n }) => {\r\n if (newSelectedMetrics) {\r\n setSelectedMetrics(newSelectedMetrics);\r\n const newSelectedColumns = newSelectedMetrics.map(m => m.key);\r\n patchPreference({\r\n selectedColumns: newSelectedColumns,\r\n });\r\n }\r\n if (newSortState) {\r\n setSortState(newSortState);\r\n patchPreference(newSortState);\r\n }\r\n }, [patchPreference]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\n","import _ from 'underscore';\r\nimport { useMemo, useCallback } from 'react';\r\nimport { AccountUtils } from '@bingads-webui-clientcenter/entity-utils';\r\nimport useSwr from 'swr';\r\n\r\nimport {\r\n fetchEntityGridCombined,\r\n} from '@bingads-webui-campaign/overview-cards-common';\r\n\r\nimport { TDataRequestSortDirection } from './types';\r\n\r\nexport interface IUseCombinedCallDataProps {\r\n dateRange: {\r\n RangeStartDate: string;\r\n RangeEndDate: string;\r\n compared: object;\r\n },\r\n filter: {\r\n filter: {\r\n key: number;\r\n value: object;\r\n }\r\n }[],\r\n campaignType: string | number;\r\n constructOptions: () => { entitySet: object };\r\n permissions: any;\r\n jsdata: any;\r\n dateUtil: any;\r\n getCardsConfig: () => { id: string }[];\r\n sortColumn: string | number;\r\n sortDirection: TDataRequestSortDirection;\r\n willFetchData: Function;\r\n willRender: Function;\r\n}\r\n\r\nexport function useCombinedCallData({\r\n dateRange,\r\n filter,\r\n campaignType,\r\n constructOptions,\r\n permissions,\r\n jsdata,\r\n dateUtil,\r\n getCardsConfig,\r\n sortColumn,\r\n sortDirection,\r\n willFetchData,\r\n willRender,\r\n}: IUseCombinedCallDataProps) {\r\n const {\r\n entitySet,\r\n } = constructOptions();\r\n const orderByValue = useMemo(() => [[sortColumn, sortDirection]], [sortColumn, sortDirection]);\r\n\r\n const fetch = useCallback(({ dateRange, filter, orderBy }) => {\r\n willFetchData();\r\n return fetchEntityGridCombined({\r\n entitySet,\r\n dateRange,\r\n comparisonDateRange: dateRange.compared,\r\n orderBy,\r\n jsdata,\r\n dateUtil,\r\n getCardsConfig,\r\n // TODO: [yaoyao] when orderBy is ready, we need to figure out how to set value for fetchSingleTile\r\n fetchSingleTile: false,\r\n filter,\r\n permissions,\r\n // now we only have expert mode?\r\n accountsMode: 1,\r\n campaignType,\r\n }).then((data) => {\r\n willRender();\r\n\r\n if (data?.[0]?.AccountInactiveReasons) {\r\n return _.map(data, entity => ({ ...entity, Status: AccountUtils.activityStatus(entity) }));\r\n }\r\n\r\n return data;\r\n });\r\n }, [willFetchData, entitySet, jsdata, dateUtil, getCardsConfig, permissions, willRender, campaignType]);\r\n\r\n const { data, isLoading } = useSwr({ dateRange, filter, orderBy: orderByValue }, fetch, {\r\n revalidateOnFocus: false,\r\n });\r\n\r\n return {\r\n data,\r\n isLoading,\r\n };\r\n}\r\n","import React, { useState, useCallback, useMemo, useEffect, useContext } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n OverviewPerformanceTable,\r\n ISortState,\r\n} from '@bingads-webui-campaign-react/overview-performance-table';\r\nimport { useHeaderStateContext } from '@bingads-webui-campaign-react/overview-card';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById, allSiteMap } from '@bingads-webui-react/with-site-map';\r\n\r\nimport { IOverviewTableProps, IScopeContext } from './types';\r\nimport { useCombinedCallData } from './use-combined-call-data';\r\nimport { getOrderFromGridSortForCombinedCall } from './order-by-helper';\r\nimport { defaultComparisonMetric } from './consts';\r\nimport { useStyles } from './overview-grid-card-style';\r\n\r\nexport function OverviewAccountTable({\r\n metricFormatter,\r\n i18n,\r\n constructOptions,\r\n dateRange,\r\n filter,\r\n permissions,\r\n jsdata,\r\n dateUtil,\r\n getCardsConfig,\r\n allMetrics,\r\n initialSelectedMetrics,\r\n initialSortColumn,\r\n initialSortDirection,\r\n patchPreference,\r\n perfMarkerUtils,\r\n campaignType,\r\n}: IOverviewTableProps) {\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const { cid, uid } = scope?.values;\r\n const [selectedMetrics, setSelectedMetrics] = useState(initialSelectedMetrics);\r\n const [sortState, setSortState] = useState({ sortColumn: initialSortColumn, sortDirection: initialSortDirection });\r\n const headerState = useHeaderStateContext();\r\n const comparisonMajorMetric = dateRange.compared ? headerState?.selectedItemValue : defaultComparisonMetric;\r\n const [isFirstDataLoaded, setIsFirstDataLoaded] = useState(false);\r\n const classes = useStyles();\r\n const {\r\n willFetchData,\r\n willRender,\r\n done,\r\n } = perfMarkerUtils;\r\n\r\n const {\r\n sortColumn,\r\n sortDirection,\r\n } = useMemo(() => getOrderFromGridSortForCombinedCall({\r\n sortColumn: sortState.sortColumn,\r\n sortDirection: sortState.sortDirection,\r\n dateRange,\r\n comparisonMajorMetric,\r\n }), [comparisonMajorMetric, dateRange, sortState]);\r\n\r\n const {\r\n data,\r\n isLoading,\r\n } = useCombinedCallData({\r\n dateRange,\r\n filter,\r\n constructOptions,\r\n permissions,\r\n jsdata,\r\n dateUtil,\r\n getCardsConfig,\r\n sortColumn,\r\n sortDirection,\r\n willFetchData,\r\n willRender,\r\n campaignType,\r\n });\r\n\r\n useEffect(() => {\r\n if (!isFirstDataLoaded && !isLoading) {\r\n setIsFirstDataLoaded(true);\r\n done();\r\n }\r\n }, [data, done, isFirstDataLoaded, isLoading, willRender]);\r\n\r\n const onChange = useCallback(({\r\n newSelectedMetrics,\r\n newSortState,\r\n }) => {\r\n if (newSelectedMetrics) {\r\n setSelectedMetrics(newSelectedMetrics);\r\n const newSelectedColumns = newSelectedMetrics.map(m => m.key);\r\n patchPreference({\r\n selectedColumns: newSelectedColumns,\r\n });\r\n }\r\n if (newSortState) {\r\n setSortState(newSortState);\r\n patchPreference(newSortState);\r\n }\r\n }, [patchPreference]);\r\n\r\n const onFooterButtonClick = useCallback(() => {\r\n scope.save(getRoutePathById(allSiteMap, 'performance'));\r\n }, [scope]);\r\n\r\n const getHref = useCallback((entityId: string) => {\r\n const route = getRoutePathById(allSiteMap, 'overview');\r\n const search = `cid=${cid}&uid=${uid}&aid=${entityId}`;\r\n return `${route}?${search}`;\r\n }, [cid, uid]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\n","import React, { useState, useCallback, useMemo, useEffect, useContext } from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n OverviewPerformanceTable,\r\n ISortState,\r\n} from '@bingads-webui-campaign-react/overview-performance-table';\r\nimport { useHeaderStateContext } from '@bingads-webui-campaign-react/overview-card';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById, allSiteMap } from '@bingads-webui-react/with-site-map';\r\n\r\nimport { IOverviewTableProps, IScopeContext } from './types';\r\nimport { useCombinedCallData } from './use-combined-call-data';\r\nimport { getOrderFromGridSortForCombinedCall } from './order-by-helper';\r\nimport { defaultComparisonMetric } from './consts';\r\nimport { useStyles } from './overview-grid-card-style';\r\n\r\nexport function OverviewCampaignTable({\r\n metricFormatter,\r\n i18n,\r\n constructOptions,\r\n dateRange,\r\n filter,\r\n permissions,\r\n jsdata,\r\n dateUtil,\r\n getCardsConfig,\r\n allMetrics,\r\n initialSelectedMetrics,\r\n initialSortColumn,\r\n initialSortDirection,\r\n patchPreference,\r\n perfMarkerUtils,\r\n campaignType,\r\n}: IOverviewTableProps) {\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const { aid, cid, uid } = scope?.values;\r\n const [selectedMetrics, setSelectedMetrics] = useState(initialSelectedMetrics);\r\n const [sortState, setSortState] = useState({ sortColumn: initialSortColumn, sortDirection: initialSortDirection });\r\n const headerState = useHeaderStateContext();\r\n const comparisonMajorMetric = dateRange.compared ? headerState?.selectedItemValue : defaultComparisonMetric;\r\n const [isFirstDataLoaded, setIsFirstDataLoaded] = useState(false);\r\n const classes = useStyles();\r\n const {\r\n willFetchData,\r\n willRender,\r\n done,\r\n } = perfMarkerUtils;\r\n\r\n const {\r\n sortColumn,\r\n sortDirection,\r\n } = useMemo(() => getOrderFromGridSortForCombinedCall({\r\n sortColumn: sortState.sortColumn,\r\n sortDirection: sortState.sortDirection,\r\n dateRange,\r\n comparisonMajorMetric,\r\n }), [comparisonMajorMetric, dateRange, sortState]);\r\n\r\n const {\r\n data,\r\n isLoading,\r\n } = useCombinedCallData({\r\n dateRange,\r\n filter,\r\n constructOptions,\r\n permissions,\r\n jsdata,\r\n dateUtil,\r\n getCardsConfig,\r\n sortColumn,\r\n sortDirection,\r\n willFetchData,\r\n willRender,\r\n campaignType,\r\n });\r\n\r\n useEffect(() => {\r\n if (!isFirstDataLoaded && !isLoading) {\r\n setIsFirstDataLoaded(true);\r\n done();\r\n }\r\n }, [data, done, isFirstDataLoaded, isLoading, willRender]);\r\n\r\n const onChange = useCallback(({\r\n newSelectedMetrics,\r\n newSortState,\r\n }) => {\r\n if (newSelectedMetrics) {\r\n setSelectedMetrics(newSelectedMetrics);\r\n const newSelectedColumns = newSelectedMetrics.map(m => m.key);\r\n patchPreference({\r\n selectedColumns: newSelectedColumns,\r\n });\r\n }\r\n if (newSortState) {\r\n setSortState(newSortState);\r\n patchPreference(newSortState);\r\n }\r\n }, [patchPreference]);\r\n\r\n const onFooterButtonClick = useCallback(() => {\r\n scope.save(getRoutePathById(allSiteMap, 'campaigns'));\r\n }, [scope]);\r\n\r\n const getHref = useCallback((entityId: string, campaignType?: string) => {\r\n if (campaignType === 'Smart') {\r\n return `/campaign/smart?cid=${cid}&uid=${uid}&aid=${aid}#/campaign/${entityId}`;\r\n }\r\n const route = getRoutePathById(allSiteMap, 'overview');\r\n const search = `cid=${cid}&uid=${uid}&aid=${aid}&campaignId=${entityId}`;\r\n return `${route}?${search}`;\r\n }, [aid, cid, uid]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import React, { useCallback, useContext } from 'react';\r\nimport classNames from 'classnames';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById, allSiteMap } from '@bingads-webui-react/with-site-map';\r\n\r\nimport { IOverviewTableProps, IScopeContext } from './types';\r\nimport { GridDataTable } from './grid-data-table';\r\nimport { useStyles } from './overview-grid-card-style';\r\n\r\nconst MATCH_TYPE = {\r\n Exact: _TL_('Type: Exact'),\r\n Phrase: _TL_('Type: Phrase'),\r\n Broad: _TL_('Type: Broad'),\r\n};\r\n\r\nconst getPopoverContentFunction = i18n => ({\r\n Name, MatchType, AdGroup, Campaign,\r\n}: any) => {\r\n const matchType = MATCH_TYPE[MatchType] ? i18n.getString(MATCH_TYPE[MatchType]) : null;\r\n return (\r\n <>\r\n {Name}
\r\n {`${Campaign?.Name} > ${AdGroup?.Name}`}
\r\n {matchType && {matchType}
}\r\n \r\n );\r\n};\r\n\r\nexport function OverviewKeywordTable(props: IOverviewTableProps) {\r\n const { i18n } = props;\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const { aid, cid, uid } = scope?.values;\r\n const classes = useStyles();\r\n\r\n const onFooterButtonClick = useCallback(() => {\r\n scope.save(getRoutePathById(allSiteMap, 'keywords'));\r\n }, [scope]);\r\n\r\n const getHref = useCallback((entityId: string) => {\r\n const route = getRoutePathById(allSiteMap, 'keywords');\r\n const search = `cid=${cid}&uid=${uid}&aid=${aid}&campaignId=${entityId}`;\r\n return `${route}?${search}`;\r\n }, [aid, cid, uid]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import _ from 'underscore';\r\nimport useSwr from 'swr';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\n\r\nconst pageSize = 10000;\r\n\r\nexport function getCampaignData({\r\n jsdata,\r\n isAdGroupLevel,\r\n campaignId,\r\n}) {\r\n const filter = '(CampaignType ne Enum.CampaignType\\'Smart\\')';\r\n\r\n const $select = [\r\n 'Id',\r\n 'Name',\r\n 'Status',\r\n 'CampaignType',\r\n 'CampaignSubType',\r\n 'CampaignSettings',\r\n ].join(', ');\r\n\r\n const formatQuery : {\r\n $select: string,\r\n $skip: number,\r\n $top: number,\r\n $orderby: string,\r\n $filter?: string,\r\n } = {\r\n $select,\r\n $skip: 0,\r\n $top: pageSize,\r\n $orderby: 'Name asc',\r\n };\r\n\r\n if (filter) {\r\n formatQuery.$filter = filter;\r\n }\r\n\r\n return jsdata.Campaign.findAll({\r\n query: formatQuery,\r\n }).then((data) => {\r\n const dataList = _.map(data, (item : {\r\n Id: number,\r\n Name: string,\r\n }) => ({\r\n value: item.Id.toString(),\r\n content: item.Name,\r\n allowedCheck: !isAdGroupLevel,\r\n }));\r\n\r\n if (campaignId) {\r\n return dataList.filter(item => item.value === campaignId.toString());\r\n }\r\n\r\n return dataList;\r\n }, (error) => {\r\n // TODO: handle error\r\n });\r\n}\r\n\r\nexport function getAdGroupData({\r\n query,\r\n cid,\r\n aid,\r\n jsdata,\r\n campaignId,\r\n}) {\r\n const signleQuoteTerminatedQuery = query.replace('\\'', '\\'\\'');\r\n\r\n const filter = _.compact([\r\n query && `contains(Name, '${signleQuoteTerminatedQuery}')`,\r\n ]).join(' and ');\r\n\r\n const $expand = [\r\n 'Id',\r\n 'Name',\r\n 'CampaignType',\r\n 'CampaignSubType',\r\n ];\r\n\r\n const $select = [\r\n 'Id',\r\n 'Name',\r\n 'Status',\r\n 'Language',\r\n ].join(', ');\r\n\r\n const formatQuery : {\r\n $expand: string,\r\n $select: string,\r\n $skip: number,\r\n $top: number,\r\n $orderby: string,\r\n $filter?: string,\r\n $count: boolean,\r\n } = {\r\n $expand: `Campaign($select=${$expand.join(',')})`,\r\n $select,\r\n $orderby: 'Name asc',\r\n $skip: 0,\r\n $top: pageSize,\r\n $count: true,\r\n };\r\n\r\n if (campaignId) {\r\n _.extend(formatQuery, {\r\n entitySet: edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns\r\n .$withKey(Number(campaignId))\r\n .AdGroups\r\n .toJSON(),\r\n });\r\n }\r\n\r\n if (filter) {\r\n formatQuery.$filter = filter;\r\n }\r\n\r\n return jsdata.AdGroup.findAll({\r\n query: formatQuery,\r\n }).then(data => _.map(data, (item : {\r\n Id: number,\r\n Name: string,\r\n }) => ({\r\n value: item.Id.toString(),\r\n content: item.Name,\r\n parentValue: campaignId,\r\n allowedCheck: true,\r\n })), (error) => {\r\n // TODO: handle error\r\n });\r\n}\r\n\r\nexport function useCampaignData({\r\n jsdata,\r\n isAdGroupLevel,\r\n campaignId,\r\n}) {\r\n return useSwr({ jsdata, isAdGroupLevel, campaignId }, getCampaignData, {\r\n revalidateOnFocus: false,\r\n });\r\n}\r\n","import _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React, { useCallback, useState, useEffect } from 'react';\r\nimport {\r\n makeStyles,\r\n tokens,\r\n shorthands,\r\n Text,\r\n Tooltip,\r\n} from '@fluentui/react-components';\r\n\r\nimport { DropdownTreeSelect } from '@bingads-webui-campaign-react/dropdown-tree-select';\r\n\r\nimport { useCampaignData, getAdGroupData } from './adgroup-selector-data';\r\n\r\ninterface ICampaignAdgroupSelectorProps {\r\n defalutSelectedCampaign?: {\r\n Id: string;\r\n Name: string;\r\n };\r\n defalutSelectedAdGroup?: {\r\n Id: string;\r\n Name: string;\r\n };\r\n showSelectedTag?: boolean;\r\n isAdGroupLevel: boolean;\r\n onSelectionChange: ({\r\n selectedCampaign,\r\n selectedAdGroup,\r\n }: {\r\n selectedCampaign: { Id: string, Name: string },\r\n selectedAdGroup?: { Id: string, Name: string },\r\n }) => void;\r\n onInitFinished: () => void;\r\n jsdata: any;\r\n cid: number,\r\n aid: number,\r\n campaignId?: number,\r\n}\r\n\r\nconst useStyles = makeStyles({\r\n selectedTag: {\r\n display: 'inline-block',\r\n maxWidth: '100%',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n fontWeight: 600,\r\n backgroundColor: tokens.colorNeutralBackground1Selected,\r\n ...shorthands.overflow('hidden'),\r\n ...shorthands.borderRadius('3px'),\r\n ...shorthands.gap('6px'),\r\n ...shorthands.padding('6px', '12px'),\r\n ...shorthands.margin('0px', '0px', '6px'),\r\n },\r\n});\r\n\r\nexport function CampaignAdgroupSelector({\r\n defalutSelectedCampaign,\r\n defalutSelectedAdGroup,\r\n isAdGroupLevel,\r\n showSelectedTag,\r\n onInitFinished,\r\n onSelectionChange,\r\n jsdata,\r\n cid,\r\n aid,\r\n campaignId,\r\n}: ICampaignAdgroupSelectorProps) {\r\n const classes = useStyles();\r\n const {\r\n data: items,\r\n isLoading,\r\n } = useCampaignData({ jsdata, isAdGroupLevel, campaignId });\r\n\r\n const [checkedItems, setCheckedItems] = useState([]);\r\n const [openItems, setOpenItems] = useState([]);\r\n const [selectedCampaign, setSelectedCampaign] = useState(defalutSelectedCampaign);\r\n const [selectedAdGroup, setSelectedAdGroup] = useState(defalutSelectedAdGroup);\r\n\r\n useEffect(() => {\r\n if (!isLoading) {\r\n onInitFinished();\r\n }\r\n }, [isLoading, onInitFinished]);\r\n\r\n const onChange = useCallback(([{ value, content, parentValue }]) => {\r\n setCheckedItems([value]);\r\n if (isAdGroupLevel) {\r\n const adGroup = {\r\n Id: value,\r\n Name: content,\r\n };\r\n setSelectedAdGroup(adGroup);\r\n const campaignFromItems = _.find(items, (item : {\r\n value: string,\r\n content: string,\r\n }) => item.value === parentValue);\r\n const campaign = {\r\n Id: parentValue,\r\n Name: campaignFromItems?.content,\r\n };\r\n setSelectedCampaign(campaign);\r\n onSelectionChange({\r\n selectedCampaign: campaign,\r\n selectedAdGroup: adGroup,\r\n });\r\n } else {\r\n const campaign = {\r\n Id: value,\r\n Name: content,\r\n };\r\n setSelectedCampaign(campaign);\r\n onSelectionChange({\r\n selectedCampaign: campaign,\r\n });\r\n }\r\n }, [isAdGroupLevel, items, onSelectionChange]);\r\n\r\n const onOpenChange = useCallback((allOpenItems) => {\r\n setOpenItems(allOpenItems);\r\n }, []);\r\n const lazyLoad = useCallback(parentValue => getAdGroupData({\r\n query: '',\r\n jsdata,\r\n cid,\r\n aid,\r\n campaignId: parentValue,\r\n }), [aid, cid, jsdata]);\r\n\r\n const selectedEntityName = isAdGroupLevel ? selectedAdGroup?.Name : selectedCampaign?.Name;\r\n\r\n return (\r\n \r\n { showSelectedTag &&\r\n \r\n {selectedEntityName} \r\n \r\n }\r\n { !isLoading &&\r\n
\r\n );\r\n}\r\n\r\nCampaignAdgroupSelector.defaultProps = {\r\n defalutSelectedCampaign: {},\r\n defalutSelectedAdGroup: {},\r\n showSelectedTag: true,\r\n campaignId: null,\r\n};\r\n","import _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React, { useCallback, useState, useMemo, useContext } from 'react';\r\nimport {\r\n Button,\r\n Divider,\r\n Field,\r\n RadioGroup,\r\n Radio,\r\n Label,\r\n Input,\r\n Dropdown,\r\n Option,\r\n Text,\r\n makeStyles,\r\n useId,\r\n} from '@fluentui/react-components';\r\nimport {\r\n DrawerBody,\r\n DrawerHeader,\r\n DrawerHeaderTitle,\r\n DrawerFooter,\r\n Drawer,\r\n} from '@fluentui/react-drawer';\r\nimport { Dismiss24Regular } from '@fluentui/react-icons';\r\n\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\n\r\nimport { CampaignAdgroupSelector } from './campaign-adgroup-selector';\r\n\r\ninterface IAddKeywordPanelProps {\r\n campaign: {\r\n Id: string;\r\n Name: string;\r\n };\r\n adGroup: {\r\n Id: string;\r\n Name: string;\r\n };\r\n keywordText: string;\r\n isNegative: boolean;\r\n onClose: (dataSaved? : boolean) => void;\r\n i18n: any;\r\n jsdata: any;\r\n cid: number,\r\n aid: number,\r\n campaignId?: number,\r\n}\r\n\r\ntype TRadioGroupValue = 'campaign' | 'adgroup';\r\n\r\nconst useStyles = makeStyles({\r\n divider: {\r\n maxHeight: '1px',\r\n },\r\n keywordText: {\r\n width: '100%',\r\n },\r\n dropdown: {\r\n width: '100%',\r\n },\r\n helpLink: {\r\n marginTop: '8px',\r\n },\r\n});\r\n\r\nexport function AddKeywordDrawer({\r\n campaign,\r\n adGroup,\r\n keywordText,\r\n isNegative,\r\n onClose,\r\n i18n,\r\n jsdata,\r\n cid,\r\n aid,\r\n campaignId,\r\n}: IAddKeywordPanelProps) {\r\n const classes = useStyles();\r\n const inputId = useId('input');\r\n const dropdownId = useId('dropdown');\r\n const campaignAdGroupSelectorId = useId('campaign-adgroup-selector');\r\n const [keywordValue, setKeywordValue] = useState(keywordText);\r\n const options = useMemo(() => (isNegative ? [{\r\n key: 'Exact',\r\n text: i18n.getString(_TL_('Exact')),\r\n }, {\r\n key: 'Phrase',\r\n text: i18n.getString(_TL_('Phrase')),\r\n }] : [{\r\n key: 'Exact',\r\n text: i18n.getString(_TL_('Exact')),\r\n }, {\r\n key: 'Phrase',\r\n text: i18n.getString(_TL_('Phrase')),\r\n }, {\r\n key: 'Broad',\r\n text: i18n.getString(_TL_('Broad')),\r\n }]), [i18n, isNegative]);\r\n const [selectedOption, setSelectedOption] = useState(options[0].key);\r\n const [selectedOptionText, setSelectedOptionText] = useState(options[0].text);\r\n const [radioGroupValue, setRadioGroupValue] = useState('adgroup');\r\n const isAdGroupLevel = radioGroupValue === 'adgroup';\r\n const [isSelectorDataLoaded, setIsSelectorDataLoaded] = useState(false);\r\n\r\n const title = isNegative ? i18n.getString(_TL_('Add as negative keyword')) : i18n.getString(_TL_('Add as keyword'));\r\n const alertHelper = useMemo(() => new AlertHelper({ i18n }), [i18n]);\r\n\r\n const instrumentation = useContext(InstrumentationContext) as any;\r\n const { activity } = useMemo(() => instrumentation.createScenarioAndActivity({\r\n scenarioName: 'Fluent2OverviewPage',\r\n activityName: 'SearchTerm',\r\n }), [instrumentation]);\r\n\r\n const [selectedCampaign, setSelectedCampaign] = useState(campaign);\r\n const [selectedAdGroup, setSelectedAdGroup] = useState(adGroup);\r\n const selectorTitle = isAdGroupLevel ? i18n.getString(_TL_('Select ad group')) : i18n.getString(_TL_('Select campaign'));\r\n\r\n const onSavedClose = useCallback(() => { onClose(true); }, [onClose]);\r\n const onCancelClose = useCallback(() => { onClose(false); }, [onClose]);\r\n\r\n const onSaveClicked = useCallback(() => {\r\n if (isNegative) {\r\n const negativeKeyword = {\r\n NegativeKeywords: [{\r\n Text: keywordValue,\r\n EntityType: isAdGroupLevel ? 'AdGroup' : 'Campaign',\r\n CampaignId: selectedCampaign.Id,\r\n AdGroupId: selectedAdGroup.Id,\r\n MatchType: selectedOption,\r\n }],\r\n };\r\n const campaignEntity = edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns.$withKey(selectedCampaign.Id);\r\n let entitySet = campaignEntity;\r\n\r\n if (isAdGroupLevel) {\r\n entitySet = campaignEntity.AdGroups.$withKey(selectedAdGroup.Id);\r\n }\r\n\r\n jsdata.NegativeKeyword.create(negativeKeyword, {\r\n entitySet: entitySet.NegativeKeywords['Default.PostNegativeKeywords'],\r\n })\r\n .then(() => {\r\n onSavedClose();\r\n alertHelper.showSuccess(i18n.getString(_TL_('Keyword added.')));\r\n })\r\n .catch((error) => {\r\n activity.error(JSON.stringify(error));\r\n alertHelper.showError(i18n.getString(_TL_('We’ve encountered an error and can’t continue. Please contact support for further assistance.')));\r\n });\r\n } else {\r\n const keywordData = {\r\n Campaign: { Id: selectedCampaign.Id },\r\n Name: selectedAdGroup.Name,\r\n Id: selectedAdGroup.Id,\r\n Keywords: [{\r\n Text: keywordValue,\r\n MatchType: selectedOption,\r\n Bid: {},\r\n AdGroup: { Id: selectedAdGroup.Id },\r\n }],\r\n };\r\n\r\n jsdata.AdGroup\r\n .update(keywordData.Id, keywordData, { adapter: 'bulk' })\r\n .then(() => {\r\n onSavedClose();\r\n alertHelper.showSuccess(i18n.getString(_TL_('Keyword added.')));\r\n })\r\n .catch((error) => {\r\n activity.error(JSON.stringify(error));\r\n alertHelper.showError(i18n.getString(_TL_('We’ve encountered an error and can’t continue. Please contact support for further assistance.')));\r\n });\r\n }\r\n }, [activity, aid, alertHelper, cid, i18n, isAdGroupLevel, isNegative,\r\n jsdata, keywordValue, onSavedClose, selectedAdGroup, selectedCampaign, selectedOption]);\r\n\r\n const onRadioGroupChange = useCallback((_, data) => {\r\n setRadioGroupValue(data.value);\r\n }, []);\r\n\r\n const onKeywordChange = useCallback((ev, data) => {\r\n setKeywordValue(data.value.trim());\r\n }, []);\r\n\r\n const onOptionSelect = useCallback((ev, data) => {\r\n setSelectedOption(data.optionValue);\r\n setSelectedOptionText(data.optionText);\r\n }, []);\r\n\r\n const onSelectorDataLoaded = useCallback(() => {\r\n setIsSelectorDataLoaded(true);\r\n }, []);\r\n\r\n const onSelectorSelectionChange = useCallback(({\r\n selectedCampaign: newSelectedCampaign,\r\n selectedAdGroup: newSelectedAdGroup,\r\n }) => {\r\n if (isAdGroupLevel) {\r\n setSelectedCampaign(newSelectedCampaign);\r\n setSelectedAdGroup(newSelectedAdGroup);\r\n } else {\r\n setSelectedCampaign(newSelectedCampaign);\r\n }\r\n }, [isAdGroupLevel]);\r\n\r\n return (\r\n \r\n \r\n \r\n\r\n \r\n {isNegative &&\r\n \r\n \r\n \r\n \r\n }\r\n \r\n {selectorTitle}\r\n \r\n \r\n {i18n.getString(_TL_('Keyword'))}\r\n \r\n {i18n.getString(_TL_('Type'))} \r\n \r\n {options.map(option => (\r\n {option.text} \r\n ))}\r\n \r\n \r\n {i18n.getString(_TL_('Not sure which match type to use?'))} \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Apply'))} \r\n {i18n.getString(_TL_('Cancel'))} \r\n \r\n \r\n );\r\n}\r\n\r\nAddKeywordDrawer.defaultProps = {\r\n campaignId: null,\r\n};\r\n","import React, { useCallback, useContext, useState } from 'react';\r\nimport classNames from 'classnames';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById, allSiteMap } from '@bingads-webui-react/with-site-map';\r\nimport { Text } from '@fluentui/react-components';\r\n\r\nimport { IOverviewTableProps, IScopeContext } from './types';\r\nimport { GridDataTable } from './grid-data-table';\r\nimport { AddKeywordDrawer } from './search-term-components/add-keyword-drawer';\r\nimport { useStyles } from './overview-grid-card-style';\r\n\r\nconst getPopoverContentFunction = i18n => ({\r\n Name, Keyword,\r\n}: {\r\n Name: string;\r\n Keyword: {\r\n Text: string;\r\n };\r\n}) => (\r\n <>\r\n {Name} \r\n {\r\n Keyword?.Text && (\r\n <>\r\n {i18n.getString(_TL_('Matched keyword'))} \r\n {Keyword.Text} \r\n \r\n )\r\n }\r\n \r\n);\r\n\r\nexport function OverviewSearchTermTable(props: IOverviewTableProps) {\r\n const { i18n, jsdata } = props;\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const {\r\n aid, cid, uid, campaignId,\r\n } = scope?.values;\r\n const [showDrawer, setShowDrawer] = useState(false);\r\n const [selectedCampaign, setSelectedCampaign] = useState(null);\r\n const [selectedAdGroup, setSelectedAdGroup] = useState(null);\r\n const [isNegative, setIsNegative] = useState(false);\r\n const [keywordText, setKeywordText] = useState('');\r\n const classes = useStyles();\r\n\r\n const onFooterButtonClick = useCallback(() => {\r\n scope.save(getRoutePathById(allSiteMap, 'search-terms'));\r\n }, [scope]);\r\n\r\n const getHref = useCallback(() => {\r\n const route = getRoutePathById(allSiteMap, 'search-terms');\r\n const search = `cid=${cid}&uid=${uid}&aid=${aid}`;\r\n return `${route}?${search}`;\r\n }, [aid, cid, uid]);\r\n\r\n const triggerSearchTermDrawer = useCallback(({\r\n campaign, adGroup, isNegative, keywordText,\r\n }) => {\r\n setSelectedCampaign(campaign);\r\n setSelectedAdGroup(adGroup);\r\n setKeywordText(keywordText);\r\n setIsNegative(isNegative);\r\n setShowDrawer(true);\r\n }, []);\r\n\r\n const [tableKey, setTableKey] = useState(0);\r\n const onClose = useCallback((dataSaved: boolean = false) => {\r\n setShowDrawer(false);\r\n if (dataSaved) {\r\n // if data saved, we use key update to force table to fetch new data\r\n setTableKey(tableKey + 1);\r\n }\r\n }, [tableKey]);\r\n\r\n return (\r\n <>\r\n {showDrawer && (\r\n \r\n
\r\n \r\n\r\n );\r\n}\r\n","import _ from 'underscore';\r\nimport { FAC_FEATURE_ID } from '@bingads-webui-campaign/recommendation-core';\r\n\r\nexport const logApi = 'tips-card/index';\r\nexport const TipDismissalExpirationDays = 7;\r\nexport const numberOfTipsAndRecommendations = 9;\r\nexport const numberOfAccountRecommendations = 6;\r\nexport const numberOfCustomerRecommendations = 6;\r\nexport const numberOfCampaignRecommendations = 4;\r\nexport const numberOfTipsShown = 3;\r\n\r\n// mapping of FeatureId to tipIds, sorted by priority\r\nexport const FAC_FEATUREID_TIPID_PRIORITY_MAPPING = {\r\n [FAC_FEATURE_ID.GOOGLE_IMPORT]: [\r\n 1701,\r\n 101,\r\n ],\r\n [FAC_FEATURE_ID.CONVERSION_TRACKING]: [\r\n 801, // conversionTrackingVideo\r\n ],\r\n};\r\n\r\n// mapping of tipIds to FeatureId\r\nexport const FAC_TIPID_FEATUREID_MAPPING = _.reduce(\r\n FAC_FEATUREID_TIPID_PRIORITY_MAPPING,\r\n (mapping, priorities, featureId) =>\r\n _.extend(mapping, ..._.map(priorities, tipId => ({ [tipId]: featureId }))),\r\n {}\r\n);\r\n\r\nexport const instrumentationSchema = {\r\n scenario: [\r\n {\r\n name: 'loadRecommendationOverviewTile',\r\n value: 'LoadRecommendationOverviewTile',\r\n setting: {},\r\n activity: [\r\n {\r\n name: 'loadRecommendationOverviewTile',\r\n value: 'LoadRecommendationOverviewTile',\r\n },\r\n ],\r\n },\r\n ],\r\n};\r\n","import _ from 'underscore';\r\nimport {\r\n RECOMMENDATION_CATEGORIES_IDS,\r\n RECOMMENDATION_TYPES,\r\n normalize,\r\n formatCoupon,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport {\r\n fetchCoupons,\r\n} from '@bingads-webui-campaign/overview-cards-common';\r\nimport {\r\n getCcJsData,\r\n fetchRecommendations,\r\n clearRecommendationsCache,\r\n fetchTips,\r\n fetchMCCOverviewRecommendations,\r\n} from '@bingads-webui-campaign/fluent-page-data';\r\nimport { tipsConfig, tipNames } from '@bingads-webui-campaign/overview-recommendations-config';\r\n\r\nimport {\r\n FAC_FEATUREID_TIPID_PRIORITY_MAPPING,\r\n FAC_TIPID_FEATUREID_MAPPING,\r\n logApi,\r\n numberOfTipsAndRecommendations,\r\n numberOfAccountRecommendations,\r\n numberOfCustomerRecommendations,\r\n numberOfCampaignRecommendations,\r\n numberOfTipsShown,\r\n} from './const';\r\n\r\n// @ts-ignore\r\nconst i18n = window.globalLegacyI18n.get('@bingads-webui/i18n-amd-loader!campaignui/feature/dashboard-cards');\r\n\r\nexport function logAdInsightOppTracking({\r\n oppt,\r\n isClick,\r\n position,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n}) {\r\n instrumentationLegacy.logMessage([instrumentationConstants.LOGCATEGORY.TRACE], instrumentationConstants.LOGLEVEL.INFO, isMCC ? 'MCCOverviewOpportunityTile' : 'OverviewOpportunityTile', {\r\n type: oppt.opportunityType || oppt.type,\r\n id: 0,\r\n campaignId,\r\n isClick,\r\n guid,\r\n position,\r\n typeId: oppt.opportunityTypeId,\r\n });\r\n}\r\n\r\n\r\nexport function logSlideDisplay({\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n reason,\r\n activeItems,\r\n currentSlide,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n}) {\r\n if (activeItems.length !== 0 && activeItems[currentSlide].type && activeItems[currentSlide].type.indexOf('Opportunity') !== -1) {\r\n const opportunityType = activeItems[currentSlide].opportunityType ? activeItems[currentSlide].opportunityType : activeItems[currentSlide].type;\r\n\r\n instrumentationLegacy.logMessage(\r\n [instrumentationConstants.LOGCATEGORY.TRACE],\r\n instrumentationConstants.LOGLEVEL.INFO,\r\n logApi,\r\n `Opportunity displayed. Opportunity Id: ${opportunityType} . Reason: ${reason}.`\r\n );\r\n logAdInsightOppTracking({\r\n oppt: activeItems[currentSlide],\r\n isClick: false,\r\n position: currentSlide + 1,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n });\r\n } else {\r\n const tipId = activeItems.length === 0 ? 0 : activeItems[currentSlide].tipId;\r\n\r\n instrumentationLegacy.logMessage(\r\n [instrumentationConstants.LOGCATEGORY.TRACE],\r\n instrumentationConstants.LOGLEVEL.INFO,\r\n logApi,\r\n `Tip displayed. Tip Id: ${tipId} . Reason: ${reason}.`\r\n );\r\n }\r\n}\r\n\r\n\r\nfunction willDisplayImportRelatedtips({\r\n tips,\r\n}: {\r\n tips: {\r\n isImportRelatedTip: boolean,\r\n }[],\r\n}) {\r\n const importRelatedTips = _.filter(tips, tip => tip.isImportRelatedTip);\r\n\r\n return importRelatedTips.length !== 0;\r\n}\r\n\r\n\r\nfunction getRecommendationCounts({\r\n tips,\r\n recommendations,\r\n}) {\r\n const tipsCount = _.size(tips);\r\n\r\n const recommendationsCount = _.size(recommendations);\r\n let recommendationsToShow = numberOfAccountRecommendations;\r\n\r\n // if we do not have enough tips, show recommendations instead.\r\n if (tipsCount < numberOfTipsShown) {\r\n recommendationsToShow += numberOfTipsShown - tipsCount;\r\n }\r\n\r\n return { recommendationsCount, recommendationsToShow };\r\n}\r\n\r\nfunction getCarouselActiveItems({\r\n navigationLevel,\r\n tips,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n overallOptimizationScoreBar,\r\n}: {\r\n navigationLevel: string,\r\n tips: {\r\n tipId: string,\r\n type: string,\r\n tipName: string,\r\n helpType: string,\r\n isImportRelatedTip: boolean,\r\n }[],\r\n recommendations: any,\r\n permissions: any,\r\n instrumentationLegacy: any,\r\n instrumentationConstants: any,\r\n campaignId: number,\r\n guid: string,\r\n isMCC: boolean,\r\n overallOptimizationScoreBar?: object,\r\n}) {\r\n let allItems;\r\n if (navigationLevel === 'account') {\r\n const { recommendationsCount, recommendationsToShow } = getRecommendationCounts({\r\n tips,\r\n recommendations,\r\n });\r\n\r\n if (recommendationsToShow < recommendationsCount) {\r\n allItems = [\r\n ..._.first(recommendations, recommendationsToShow),\r\n ...tips,\r\n ..._.last(recommendations, recommendationsCount - recommendationsToShow),\r\n ];\r\n } else {\r\n allItems = [..._.first(recommendations, recommendationsToShow), ...tips];\r\n }\r\n\r\n if (permissions.IsImportTipsPriorityEnabled) {\r\n const otherThanImportTips = _.filter(allItems, tip => !tip.isImportRelatedTip);\r\n\r\n const importTips = _.filter(allItems, tip => tip.isImportRelatedTip);\r\n\r\n allItems = [\r\n ...importTips,\r\n ...otherThanImportTips,\r\n ];\r\n }\r\n } else {\r\n allItems = recommendations;\r\n }\r\n const numberOfRecommendations = navigationLevel === 'customer' ? numberOfCustomerRecommendations : numberOfCampaignRecommendations;\r\n\r\n const activeItems = _.first(allItems, navigationLevel === 'account' ? numberOfTipsAndRecommendations : numberOfRecommendations);\r\n\r\n const loaded = true;\r\n const currentSlide = 0;\r\n\r\n logSlideDisplay({\r\n reason: 'initial load',\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n activeItems,\r\n currentSlide,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n });\r\n\r\n return {\r\n allItems,\r\n activeItems,\r\n loaded,\r\n currentSlide,\r\n overallOptimizationScoreBar,\r\n };\r\n}\r\n\r\nfunction getCarouselActiveItemsWithCouponDataInternal({\r\n p$Coupons,\r\n serverContext,\r\n tips,\r\n navigationLevel,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n overallOptimizationScoreBar,\r\n}) {\r\n return p$Coupons.then((coupons) => {\r\n let newTips = tips;\r\n if (coupons.length) {\r\n const rawCoupon = coupons[0];\r\n const coupon = formatCoupon({\r\n i18n,\r\n coupon: rawCoupon,\r\n currency: serverContext.CurrentAccount.CurrencyCode,\r\n });\r\n const couponFeatureId = rawCoupon.FeatureId.toString();\r\n const tipPriorities = FAC_FEATUREID_TIPID_PRIORITY_MAPPING[couponFeatureId];\r\n\r\n // check if a coupon is valid for tips\r\n const couponEligibleTip = _.chain(tips)\r\n .filter(tip => _.contains(tipPriorities, tip.tipId))\r\n .sortBy(tip => _.indexOf(tipPriorities, tip.tipId))\r\n .first()\r\n .value();\r\n\r\n if (couponEligibleTip) {\r\n const tipWithCoupon = {\r\n ...couponEligibleTip,\r\n coupon,\r\n };\r\n // move tip with coupon to front of tips\r\n newTips = [tipWithCoupon, ..._.reject(tips, tip => tip === couponEligibleTip)];\r\n }\r\n }\r\n\r\n return getCarouselActiveItems({\r\n tips: newTips,\r\n navigationLevel,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n overallOptimizationScoreBar,\r\n });\r\n });\r\n}\r\n\r\n// previous handleCouponsThenSetUpCarousel function\r\nfunction getCarouselActiveItemsWithCouponData({\r\n isMCC,\r\n serverContext,\r\n tips,\r\n navigationLevel,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n overallOptimizationScoreBar,\r\n}: {\r\n isMCC: boolean,\r\n serverContext: any,\r\n tips: {\r\n tipId: string,\r\n type: string,\r\n tipName: string,\r\n helpType: string,\r\n isImportRelatedTip: boolean,\r\n coupon?: any,\r\n }[],\r\n navigationLevel: string,\r\n recommendations: any,\r\n permissions: any,\r\n instrumentationLegacy: any,\r\n instrumentationConstants: any,\r\n campaignId: number,\r\n guid: string,\r\n overallOptimizationScoreBar?: object,\r\n}) {\r\n const ccJsData = getCcJsData({ serverContext });\r\n if (!isMCC && _.any(tips, tip => _.has(FAC_TIPID_FEATUREID_MAPPING, tip.tipId))) {\r\n const p$Coupons = fetchCoupons({\r\n ccJsData,\r\n });\r\n\r\n return getCarouselActiveItemsWithCouponDataInternal({\r\n p$Coupons,\r\n serverContext,\r\n tips,\r\n navigationLevel,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n overallOptimizationScoreBar,\r\n });\r\n }\r\n\r\n return getCarouselActiveItems({\r\n navigationLevel,\r\n tips,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n overallOptimizationScoreBar,\r\n });\r\n}\r\n\r\n// previous loadOpportunitiesData function\r\nfunction getRecommendationsFromOpportunitiesData({\r\n opportunitiesData,\r\n}) {\r\n // TODO: [yaoyao] do we need this in new overview page?\r\n // dataFetched = true;\r\n const categories = _.invert(RECOMMENDATION_CATEGORIES_IDS);\r\n\r\n let recommendations = _.map(normalize(opportunitiesData) as {\r\n category: string,\r\n type: string,\r\n }[], oppt => ({\r\n ...oppt,\r\n category: categories[oppt.category],\r\n }));\r\n\r\n recommendations = _.compact(recommendations);\r\n const accountRecommendationIdsToShow = _.chain(recommendations)\r\n .first(numberOfAccountRecommendations)\r\n // eslint-disable-next-line no-confusing-arrow\r\n .map(recommendation => recommendation.type)\r\n .value();\r\n const overallOptimizationScoreBar = opportunitiesData.OverallOptimizationScoreBar;\r\n\r\n return {\r\n recommendations,\r\n accountRecommendationIdsToShow,\r\n overallOptimizationScoreBar,\r\n };\r\n}\r\n\r\n\r\nfunction willDisplayAccountRecommendation({\r\n type,\r\n accountRecommendationIdsToShow,\r\n}) {\r\n if (_.isArray(type)) {\r\n return !_.chain(accountRecommendationIdsToShow).intersection(type).isEmpty().value();\r\n }\r\n\r\n return _.contains(accountRecommendationIdsToShow, type);\r\n}\r\n\r\n// Filter tips based on language and market and recommendations\r\n\r\nfunction shouldShowTip({\r\n tipName,\r\n helpType,\r\n permissions,\r\n serverContext,\r\n accountRecommendationIdsToShow,\r\n}) {\r\n const market = serverContext.CurrentUser.Market;\r\n const language = serverContext.CurrentUser.Language;\r\n\r\n if ((tipName === tipNames.calloutsMktg || tipName === tipNames.calloutsHelp) && market === 'CN') {\r\n return false;\r\n }\r\n\r\n if (tipName === tipNames.dsa && (market !== 'US' && market !== 'GB')) {\r\n return false;\r\n }\r\n\r\n const autoBidMarket = ['AU', 'CA', 'CH', 'DE', 'ES', 'FR', 'GB', 'IN', 'IT', 'NL', 'SE', 'US'];\r\n\r\n if ((tipName === tipNames.autoBidHelp || tipName === tipNames.autoBidMktg) && _.indexOf(autoBidMarket, market) === -1) {\r\n return false;\r\n }\r\n\r\n if ((tipName === tipNames.autoBidMktg || helpType === 'video') && language !== 'EN') {\r\n return false;\r\n }\r\n\r\n if (helpType === 'tour') {\r\n return false;\r\n }\r\n\r\n if ((tipName === tipNames.importHelp || tipName === tipNames.importVideo) &&\r\n willDisplayAccountRecommendation({ type: RECOMMENDATION_TYPES.GOOGLE_IMPORT, accountRecommendationIdsToShow }) &&\r\n !permissions.IsImportTipsPriorityEnabled) {\r\n return false;\r\n }\r\n\r\n if (tipName === tipNames.broadMatchVideo &&\r\n willDisplayAccountRecommendation({ type: RECOMMENDATION_TYPES.BROAD_MATCH_MODIFIER_KEYWORD, accountRecommendationIdsToShow })) {\r\n return false;\r\n }\r\n\r\n if ((tipName === tipNames.calloutsMktg || tipName === tipNames.calloutsHelp) &&\r\n willDisplayAccountRecommendation({ type: RECOMMENDATION_TYPES.CALLOUT, accountRecommendationIdsToShow })) {\r\n return false;\r\n }\r\n\r\n if (tipName === tipNames.dsa &&\r\n willDisplayAccountRecommendation({ type: RECOMMENDATION_TYPES.DYNAMIC_SEARCH_ADS, accountRecommendationIdsToShow })) {\r\n return false;\r\n }\r\n\r\n if ((tipName === tipNames.autoBidHelp || tipName === tipNames.autoBidMktg) &&\r\n willDisplayAccountRecommendation({\r\n type: [\r\n RECOMMENDATION_TYPES.AUTOBIDDING_ENHANCEDCPC,\r\n RECOMMENDATION_TYPES.AUTOBIDDING_MAXCLICKS,\r\n RECOMMENDATION_TYPES.AUTOBIDDING_MAXCONVERSIONS,\r\n RECOMMENDATION_TYPES.AUTOBIDDING_TARGETCPA,\r\n ],\r\n accountRecommendationIdsToShow,\r\n })) {\r\n return false;\r\n }\r\n\r\n if (tipName === tipNames.broadMatchHelp &&\r\n willDisplayAccountRecommendation({ type: RECOMMENDATION_TYPES.BROAD_MATCH_KEYWORD, accountRecommendationIdsToShow })) {\r\n return false;\r\n }\r\n\r\n if ((tipName === tipNames.sitelinksMktg || tipName === tipNames.sitelinksHelp) &&\r\n willDisplayAccountRecommendation({ type: RECOMMENDATION_TYPES.SITE_LINK, accountRecommendationIdsToShow })) {\r\n return false;\r\n }\r\n\r\n if (tipName === tipNames.ScheduledImportHelp &&\r\n willDisplayAccountRecommendation({ type: RECOMMENDATION_TYPES.GOOGLE_IMPORT_SCHEDULED, accountRecommendationIdsToShow })) {\r\n return false;\r\n }\r\n\r\n return true;\r\n}\r\n\r\n\r\nfunction loadTipsData({\r\n tipList,\r\n recommendations,\r\n permissions,\r\n serverContext,\r\n accountRecommendationIdsToShow,\r\n}): {\r\n tips: {\r\n tipId: string,\r\n type: string,\r\n tipName: string,\r\n helpType: string,\r\n isImportRelatedTip: boolean,\r\n }[],\r\n recommendations: any\r\n} {\r\n const tips = _.chain(tipList)\r\n .map((tip) => {\r\n if (tip == null) {\r\n return null;\r\n }\r\n const { TipId } = tip;\r\n const tipConfig = tipsConfig[TipId];\r\n\r\n if (tipConfig) {\r\n return _.extend(\r\n tipConfig,\r\n {\r\n tipId: TipId,\r\n type: 'Tip',\r\n }\r\n );\r\n }\r\n\r\n return null;\r\n })\r\n .compact()\r\n .filter(({ tipName, helpType }) => shouldShowTip({\r\n tipName,\r\n helpType,\r\n permissions,\r\n serverContext,\r\n accountRecommendationIdsToShow,\r\n }))\r\n .shuffle()\r\n .value();\r\n\r\n let newRecommendations = recommendations;\r\n if (permissions.IsImportTipsPriorityEnabled && willDisplayImportRelatedtips({ tips })) {\r\n // filter out import related recommendations\r\n // if we are showing import related tips.\r\n newRecommendations = _.filter(recommendations, recommendation => recommendation !== RECOMMENDATION_TYPES.GOOGLE_IMPORT);\r\n }\r\n\r\n return {\r\n tips,\r\n recommendations: newRecommendations,\r\n };\r\n}\r\n\r\n\r\n// load tips data if we have more tips else load opportunities.\r\nfunction loadTipAndOpportunities({\r\n p$Tips,\r\n opportunitiesData,\r\n permissions,\r\n serverContext,\r\n isMCC,\r\n navigationLevel,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n}) {\r\n if (p$Tips) {\r\n return p$Tips.then((tipList) => {\r\n // need to load recommendations first to filter tips based on available opportunities\r\n const {\r\n recommendations: recommendationsOriginal,\r\n accountRecommendationIdsToShow,\r\n overallOptimizationScoreBar,\r\n } = getRecommendationsFromOpportunitiesData({\r\n opportunitiesData,\r\n });\r\n const {\r\n tips,\r\n recommendations,\r\n } = loadTipsData({\r\n tipList,\r\n recommendations: recommendationsOriginal,\r\n permissions,\r\n serverContext,\r\n accountRecommendationIdsToShow,\r\n });\r\n return getCarouselActiveItemsWithCouponData({\r\n isMCC,\r\n serverContext,\r\n tips,\r\n navigationLevel,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n overallOptimizationScoreBar,\r\n });\r\n });\r\n }\r\n const {\r\n recommendations,\r\n overallOptimizationScoreBar,\r\n } = getRecommendationsFromOpportunitiesData({\r\n opportunitiesData,\r\n });\r\n return getCarouselActiveItemsWithCouponData({\r\n isMCC,\r\n serverContext,\r\n tips: [],\r\n navigationLevel,\r\n recommendations,\r\n permissions,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n overallOptimizationScoreBar,\r\n });\r\n}\r\n\r\n\r\nfunction getRecommendationsData({\r\n entitySet,\r\n navigationLevel,\r\n featureInstrumentation,\r\n legacyConfig,\r\n campaignType,\r\n serverContext,\r\n jsdata,\r\n permissions,\r\n cid,\r\n aid,\r\n campaignId,\r\n}) {\r\n if (navigationLevel === 'customer') {\r\n return fetchMCCOverviewRecommendations({\r\n entitySet,\r\n jsdata,\r\n permissions,\r\n });\r\n }\r\n const ccJsData = getCcJsData({ serverContext });\r\n\r\n return fetchRecommendations({\r\n navigationLevel,\r\n featureInstrumentation,\r\n legacyConfig,\r\n permissions,\r\n serverContext,\r\n campaignType,\r\n ccJsData,\r\n cid,\r\n aid,\r\n campaignId,\r\n });\r\n}\r\n\r\n// previous loadOpportunities function\r\n// the return value is a promise from getCarouselActiveItems with a format:\r\n// {\r\n// allItems,\r\n// activeItems,\r\n// loaded,\r\n// currentSlide,\r\n// }\r\n// plus a new key overallOptimizationScoreBar\r\nexport function getCardData({\r\n entitySet,\r\n navigationLevel,\r\n featureInstrumentation,\r\n legacyConfig,\r\n campaignType,\r\n serverContext,\r\n jsdata,\r\n permissions,\r\n cid,\r\n aid,\r\n campaignId,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n isMCC,\r\n guid,\r\n}) {\r\n let p$Tips;\r\n\r\n if (navigationLevel === 'account') {\r\n p$Tips = fetchTips({\r\n aid,\r\n cid,\r\n });\r\n }\r\n\r\n return getRecommendationsData({\r\n entitySet,\r\n navigationLevel,\r\n featureInstrumentation,\r\n legacyConfig,\r\n campaignType,\r\n serverContext,\r\n jsdata,\r\n permissions,\r\n cid,\r\n aid,\r\n campaignId,\r\n }).then((response) => {\r\n const opportunitiesData = navigationLevel === 'customer' ? { value: response.Recommendations?.value } : response.data;\r\n\r\n return loadTipAndOpportunities({\r\n p$Tips,\r\n opportunitiesData,\r\n permissions,\r\n serverContext,\r\n isMCC,\r\n navigationLevel,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n });\r\n }).catch((response) => {\r\n // no need to log ajax error here.\r\n if (response.status === undefined) {\r\n instrumentationLegacy.logMessage([instrumentationConstants.LOGCATEGORY.ERROR], instrumentationConstants.LOGLEVEL.INFO, logApi, response.stack);\r\n }\r\n\r\n // If there are exceptions load tips\r\n return loadTipAndOpportunities({\r\n p$Tips,\r\n opportunitiesData: { values: [] },\r\n permissions,\r\n serverContext,\r\n isMCC,\r\n navigationLevel,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n });\r\n })\r\n .finally(() => clearRecommendationsCache());\r\n}\r\n","import React from 'react';\r\n\r\nexport const EmptyCarouselContent = ({ i18n, consultationLink } : {\r\n i18n: {\r\n getString: (key: string) => string;\r\n };\r\n consultationLink: string;\r\n}) => (\r\n \r\n
\r\n
\r\n
{i18n.getString(_TL_('Keep up the good work!'))} \r\n
\r\n
\r\n {i18n.getString(_TL_('At this current time, there are no more recommendations here for you to utilize. In the meantime, we’d be happy to set you up with a consultant to further optimize your campaigns.'))}\r\n \r\n \r\n
\r\n
\r\n \r\n {i18n.getString(_TL_('Learn more'))}\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('{{value}} offer'), { value: coupon.value.toString() })}\r\n \r\n \r\n \r\n
\r\n ), [coupon.value, i18n, rightAlign]);\r\n\r\n const flyout = useMemo(() => (\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Get {{value}} when you {{tagMessage}}.'), coupon)}\r\n \r\n \r\n {i18n.getString(_TL_('This is a limited-time offer. Please act soon!'))}\r\n \r\n
\r\n
\r\n \r\n {trigger}\r\n \r\n \r\n {flyout}\r\n \r\n \r\n );\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo, useRef } from 'react';\r\nimport classNames from 'classnames';\r\nimport Promise from 'bluebird';\r\nimport { Button } from '@fluentui/react-components';\r\n\r\nimport { CouponFlag } from './coupon-flag';\r\nimport { ITip } from '../types';\r\nimport { logApi, TipDismissalExpirationDays } from '../const';\r\n\r\nexport const TipItem = ({\r\n item, i18n, walkme, jsdata, instrumentationConstants, instrumentationLegacy, logSlideDisplay, removeTipLocally,\r\n}: {\r\n item: ITip;\r\n i18n: {\r\n getString: (key: string) => string;\r\n };\r\n walkme: any;\r\n jsdata: any;\r\n instrumentationConstants: any,\r\n instrumentationLegacy: any,\r\n logSlideDisplay: ({ reason }: { reason: string }) => void;\r\n removeTipLocally: (tipId: string) => void;\r\n}) => {\r\n const videoRef = useRef(null);\r\n const clickTip = useCallback(() => {\r\n const { tipId, helpType, helpLink } = item;\r\n\r\n if (helpType === 'tour') {\r\n if (window.WalkMeAPI && _.isFunction(window.WalkMeAPI.startWalkthruById)) {\r\n window.WalkMeAPI.startWalkthruById(helpLink);\r\n } else {\r\n walkme.whenLoaded().then(() => {\r\n window.WalkMeAPI.startWalkthruById(helpLink);\r\n });\r\n }\r\n } else if (helpType === 'video') {\r\n // Trigger video popup.\r\n // ApexVideoHandler removes all other event handler before attaching event handler for video popup. It also stops click event bubbling up.\r\n // So, we are using hidden button instead of on click button on the tip.\r\n videoRef.current.click();\r\n }\r\n\r\n instrumentationLegacy.logMessage([instrumentationConstants.LOGCATEGORY.TRACE], instrumentationConstants.LOGLEVEL.INFO, logApi, `Learn more clicked. Tip Id: ${tipId}`);\r\n\r\n jsdata.Tip.update(tipId, {\r\n TipId: tipId,\r\n Status: 'Clicked',\r\n }, {\r\n afterUpdate: () => Promise.resolve({ TipId: tipId }),\r\n });\r\n }, [instrumentationConstants.LOGCATEGORY.TRACE, instrumentationConstants.LOGLEVEL.INFO, instrumentationLegacy, item, jsdata.Tip, walkme]);\r\n\r\n const dismissTip = useCallback(() => {\r\n const { tipId, helpType, helpLink } = item;\r\n\r\n instrumentationLegacy.logMessage([instrumentationConstants.LOGCATEGORY.TRACE], instrumentationConstants.LOGLEVEL.INFO, logApi, `Dismiss clicked. Tip Id: ${tipId}`);\r\n\r\n removeTipLocally(tipId);\r\n\r\n logSlideDisplay({ reason: 'dismissed current' });\r\n\r\n const expirationTime = new Date();\r\n\r\n expirationTime.setDate(expirationTime.getDate() + TipDismissalExpirationDays);\r\n\r\n jsdata.Tip.update(tipId, {\r\n TipId: tipId,\r\n Status: 'Dismissed',\r\n DismissalExpirationDateTime: expirationTime,\r\n }, {\r\n afterUpdate: () => Promise.resolve({ TipId: tipId }),\r\n });\r\n }, [instrumentationConstants, instrumentationLegacy, item, jsdata.Tip, logSlideDisplay, removeTipLocally]);\r\n\r\n const couponFlag = useMemo(() => {\r\n if (item.coupon) {\r\n return \r\n {couponFlag}\r\n
\r\n
\r\n
{item.title}
\r\n
\r\n
{item.description}
\r\n
\r\n
\r\n
\r\n {item.helpType === 'side_pane' && (\r\n
\r\n {/* @ts-ignore */}\r\n \r\n {i18n.getString(_TL_('Learn more'))}\r\n \r\n \r\n )}\r\n {item.helpType === 'new_page' && (\r\n
\r\n \r\n {i18n.getString(_TL_('Learn more'))}\r\n \r\n \r\n )}\r\n {item.helpType === 'video' && (\r\n
\r\n \r\n {i18n.getString(_TL_('Watch now'))}\r\n \r\n {/* @ts-ignore */}\r\n
\r\n \r\n )}\r\n {item.helpType === 'tour' && (\r\n
\r\n \r\n {i18n.getString(_TL_('Guide me'))}\r\n \r\n \r\n )}\r\n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\r\n
\r\n {i18n.getString(_TL_('Dismiss'))}\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 {activeItems?.length > 0 ? (\r\n activeItems.map((item, i) => (\r\n \r\n \r\n ))\r\n ) : (\r\n \r\n\r\n {haveVideo && }\r\n\r\n {activeItems?.length > 1 && (\r\n
\r\n \r\n {i18n.getString(_TL_('{{itemIndex}} of {{itemCount}}'), { itemIndex: currentSlide + 1, itemCount: activeItems.length })}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n\r\n {/* TODO: a help link for customer page, this is not in scope for now */}\r\n {/*
*/}\r\n
\r\n
\r\n );\r\n}\r\n","import _ from 'underscore';\r\nimport React, { useMemo, useContext, useCallback, useState, useEffect } from 'react';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { generateGuid } from '@bingads-webui-universal/primitive-utilities';\r\nimport { getLocalizedSupportLink } from '@bingads-webui-campaign/overview-cards-common';\r\nimport { getScope } from '@bingads-webui-campaign/fluent-page-data';\r\nimport {\r\n ADINSIGHT_LOG_API_NAME,\r\n RECOMMENDATION_IDS,\r\n getChannel,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\nimport { withDelayedStyles } from '@bingads-webui-campaign-react/common-utils';\r\nimport { getTipCardFluentV2Style } from '@bingads-webui-campaign-react/overview-card-styles';\r\n\r\nimport { IOverviewRecommendationsCardProps, IScopeContext } from './types';\r\nimport { useRecommendationsData } from './use-recommendations-data';\r\nimport { CardContent } from './components/card-content';\r\nimport { instrumentationSchema, logApi, numberOfTipsAndRecommendations } from './const';\r\nimport { logAdInsightOppTracking, logSlideDisplay as log } from './card-data';\r\nimport { ShimmerCard } from './components/shimmer-card';\r\n\r\nconst getDefaultStyles = (_, { palette = {} }) => ({\r\n '@global': Object.assign(getTipCardFluentV2Style(palette)),\r\n});\r\n\r\nexport function OverviewRecommendationsCardInternal({\r\n i18n,\r\n perfMarkerUtils,\r\n navigationLevel,\r\n campaignType,\r\n serverContext,\r\n permissions,\r\n legacyConfig,\r\n jsdata,\r\n featureInstrumentation,\r\n instrumentationConstants,\r\n instrumentationLegacy,\r\n constructOptions,\r\n i18nErrors,\r\n preferencesService,\r\n locationMap,\r\n legacyRouter,\r\n walkme,\r\n adDisplayUrlService,\r\n}: IOverviewRecommendationsCardProps) {\r\n const isMCC = navigationLevel === 'customer';\r\n const {\r\n entitySet,\r\n navigationLevel: navigationLevelOption,\r\n } = constructOptions({\r\n navigationLevel,\r\n campaignType,\r\n });\r\n const [activeItemsInternal, setActiveItemsInternal] = useState([]);\r\n const [allItemsInternal, setAllItemsInternal] = useState([]);\r\n const [currentSlide, setCurrentSlide] = useState(0);\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const { aid, cid, campaignId } = scope?.values;\r\n const guid = useMemo(() => generateGuid(), []);\r\n\r\n // we have internal state to allow user to dismiss tips\r\n // so when we reload data due to filter change, we need to reset the state\r\n const onSuccess = useCallback(() => {\r\n setActiveItemsInternal([]);\r\n setAllItemsInternal([]);\r\n setCurrentSlide(0);\r\n }, []);\r\n const { data, isLoading } = useRecommendationsData({\r\n entitySet,\r\n navigationLevel: navigationLevelOption,\r\n featureInstrumentation,\r\n legacyConfig,\r\n campaignType,\r\n serverContext,\r\n jsdata,\r\n permissions,\r\n cid,\r\n aid,\r\n campaignId,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n isMCC,\r\n guid,\r\n willFetchData: perfMarkerUtils.willFetchData,\r\n onSuccess,\r\n });\r\n const { activeItems, allItems } = data || { activeItems: [], allItems: [] };\r\n const { consultationLink } = getLocalizedSupportLink({\r\n Culture: serverContext.CurrentLocale,\r\n });\r\n const currentActivity = useMemo(() => {\r\n featureInstrumentation.addScenario(instrumentationSchema);\r\n const currentScenario = featureInstrumentation.loadRecommendationOverviewTile.create();\r\n return currentScenario.loadRecommendationOverviewTile.create();\r\n }, [featureInstrumentation]);\r\n const recommendationScope = getScope({\r\n navigationLevel: navigationLevelOption,\r\n legacyConfig,\r\n cid,\r\n aid,\r\n campaignId,\r\n });\r\n const viewRecommendation = useCallback((opportunityType, category) => () => {\r\n if (isMCC) {\r\n legacyConfig.set('recsrc', 'bingadsweb[mccoverviewpage]');\r\n } else {\r\n legacyConfig.set('recsrc', 'Opportunities[Overview]');\r\n }\r\n\r\n instrumentationLegacy.logMessage([instrumentationConstants.LOGCATEGORY.TRACE], instrumentationConstants.LOGLEVEL.INFO, logApi, `Opportunity clicked. Opportunity Id: ${opportunityType}`);\r\n logAdInsightOppTracking({\r\n oppt: opportunityType === 'All' ? { opportunityType: 'All' } : activeItemsInternal[currentSlide],\r\n isClick: true,\r\n position: currentSlide + 1,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n });\r\n\r\n if (navigationLevelOption === 'account') {\r\n legacyRouter.navigateToRoute('recommendation_details', _.extend({\r\n type: opportunityType,\r\n }, category ? { category } : undefined));\r\n } else if (navigationLevelOption === 'customer') {\r\n legacyRouter.navigateToRoute('mcc_recommendation_details', _.extend({\r\n type: opportunityType,\r\n }, category ? { category } : undefined));\r\n } else {\r\n legacyRouter.navigateToRoute('campaign_recommendation_details', _.extend({\r\n campaign_id: campaignId,\r\n type: opportunityType,\r\n }, category ? { category } : undefined));\r\n }\r\n }, [activeItemsInternal, campaignId, currentSlide, guid, instrumentationConstants,\r\n instrumentationLegacy, isMCC, legacyConfig, legacyRouter, navigationLevelOption]);\r\n\r\n const logOpportunityEvent = useCallback(({\r\n type = null,\r\n action,\r\n position = null,\r\n input = null,\r\n context = null,\r\n }) => {\r\n const api = ADINSIGHT_LOG_API_NAME.RECOMMENDATION;\r\n\r\n currentActivity.trace({\r\n type: type || '',\r\n typeId: RECOMMENDATION_IDS[type],\r\n action,\r\n input,\r\n campaignId: recommendationScope.campaignId,\r\n channel: getChannel(type, false, isMCC),\r\n position,\r\n guid,\r\n context: JSON.stringify(context),\r\n }, api);\r\n }, [currentActivity, guid, isMCC, recommendationScope.campaignId]);\r\n const logSlideDisplay = useCallback((reason) => {\r\n log({\r\n reason,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n activeItems: activeItemsInternal,\r\n currentSlide,\r\n campaignId,\r\n guid,\r\n isMCC,\r\n });\r\n }, [activeItemsInternal, campaignId, currentSlide, guid, instrumentationConstants, instrumentationLegacy, isMCC]);\r\n\r\n useEffect(() => {\r\n if (!isLoading && _.isEmpty(activeItemsInternal)) {\r\n perfMarkerUtils.willRender();\r\n setActiveItemsInternal(activeItems);\r\n setAllItemsInternal(allItems);\r\n perfMarkerUtils.done();\r\n }\r\n }, [activeItems, activeItemsInternal, allItems, isLoading, perfMarkerUtils]);\r\n\r\n const removeTipLocally = useCallback((tipId) => {\r\n const index = _.findIndex(allItemsInternal, tip => tip.tipId === tipId);\r\n\r\n let newAllItemsInternal = allItemsInternal;\r\n if (index >= 0 && index < allItemsInternal.length) {\r\n newAllItemsInternal = [\r\n ...allItemsInternal.slice(0, index),\r\n ...allItemsInternal.slice(index + 1),\r\n ];\r\n setAllItemsInternal(newAllItemsInternal);\r\n } else {\r\n instrumentationLegacy.logMessage(\r\n [instrumentationConstants.LOGCATEGORY.ERROR],\r\n instrumentationConstants.LOGLEVEL.INFO,\r\n logApi,\r\n `Dismiss tip not found. Tip Id: ${tipId}`\r\n );\r\n }\r\n const newActiveItemsInternal = _.first(newAllItemsInternal, numberOfTipsAndRecommendations);\r\n setActiveItemsInternal(newActiveItemsInternal);\r\n if (currentSlide >= newActiveItemsInternal.length) {\r\n setCurrentSlide(newActiveItemsInternal.length - 1);\r\n }\r\n }, [allItemsInternal, currentSlide, instrumentationConstants, instrumentationLegacy]);\r\n\r\n if (isLoading) {\r\n return \r\n
\r\n );\r\n}\r\n\r\nexport const OverviewRecommendationsCard = withDelayedStyles(OverviewRecommendationsCardInternal, getDefaultStyles);\r\n","import { useCallback, useMemo } from 'react';\r\nimport useSwr from 'swr';\r\nimport { getCardData } from './card-data';\r\n\r\nexport interface IUseRecommendationsDataProps {\r\n entitySet: object;\r\n legacyConfig: object;\r\n jsdata: object;\r\n featureInstrumentation: object;\r\n instrumentationConstants: object;\r\n instrumentationLegacy: object;\r\n navigationLevel: string;\r\n campaignType: number;\r\n serverContext: object;\r\n permissions: object;\r\n cid: number;\r\n aid: number;\r\n campaignId: number;\r\n isMCC: boolean;\r\n guid: string;\r\n willFetchData: Function;\r\n onSuccess: () => void;\r\n}\r\n\r\nexport function useRecommendationsData({\r\n entitySet,\r\n navigationLevel,\r\n featureInstrumentation,\r\n legacyConfig,\r\n campaignType,\r\n serverContext,\r\n jsdata,\r\n permissions,\r\n cid,\r\n aid,\r\n campaignId,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n isMCC,\r\n guid,\r\n willFetchData,\r\n onSuccess,\r\n}: IUseRecommendationsDataProps) {\r\n const fetch = useCallback(({\r\n navigationLevel, campaignType, cid, aid, campaignId, isMCC,\r\n }) => {\r\n willFetchData();\r\n return getCardData({\r\n entitySet,\r\n navigationLevel,\r\n featureInstrumentation,\r\n legacyConfig,\r\n campaignType,\r\n serverContext,\r\n jsdata,\r\n permissions,\r\n cid,\r\n aid,\r\n campaignId,\r\n instrumentationLegacy,\r\n instrumentationConstants,\r\n isMCC,\r\n guid,\r\n });\r\n }, [willFetchData, entitySet, featureInstrumentation, legacyConfig, serverContext,\r\n jsdata, permissions, instrumentationLegacy, instrumentationConstants, guid]);\r\n const swrKeyObject = useMemo(() => ({\r\n navigationLevel, campaignType, cid, aid, campaignId, isMCC,\r\n }), [aid, campaignId, campaignType, cid, isMCC, navigationLevel]);\r\n const {\r\n data, isLoading, mutate,\r\n } = useSwr(swrKeyObject, fetch, {\r\n revalidateOnFocus: false,\r\n onSuccess,\r\n });\r\n\r\n return {\r\n data,\r\n isLoading,\r\n };\r\n}\r\n"],"names":["permissions","config","get","validMetricIndexes","defaultSelectedMetricIndexes","availableMetricKeys","allMetrics","preferenceName","dashboardPreferenceKey","PerfMarkerFactory","createMarker","willInit","PerformanceCardContainer","props","dateRange","filter","serverContext","perfMarkerUtils","sesId","i18n","preferenceService","selectedMetricIndexes","metrics","patchPreference","getCardsConfig","responsiveSize","shellContentElement","campaignType","constructOptions","TimeZone","CurrentAccount","instrumentation","useContext","InstrumentationContext","activity","useMemo","createScenarioAndActivity","scenarioName","activityName","willFetchData","willRender","done","_useMemo2","initialSelectedMetricIndexesFromPreference","initialMetricsFromPreference","preferencePatch","_getPreference","_ref","cardId","boardPreference","getPreferenceForDashboard","preference","cardPreferenceOptions","getCardPreferenceOptions","_","metric","includes","length","index","trace","concat","JSON","stringify","defaultMetrics","set","data","setPreferenceForCard","cardOptions","getPreference","cardPerformanceId","_get","_useData","_useState","useState","_useState2","_slicedToArray","setSelectedMetricIndexes","_useState3","_useState4","visibleMetrics","setVisibleMetrics","_useState5","_useState6","performanceData","setPerformanceData","_useState7","_useState8","aggregatedMetricPickerData","setAggregatedMetricPickerData","_useState9","_useState10","hideCurrency","setHideCurrency","_useState11","_useState12","isChartLoading","setIsChartLoading","_useState13","_useState14","isMetricLoading","setIsMetricLoading","_useState15","_useState16","isFirstDataLoaded","setIsFirstDataLoaded","_useState17","_useState18","hasError","setHasError","scope","ScopeContext","navigationLevel","getNavigationLevel","values","granularity","availableGranularities","dateUtil","isPreferenceInitialized","useIsPreferenceInitialized","legacyPreference","useEffect","isLoading","dateString","filterString","entitySet","edm","currentAccount","Campaigns","campaignId","URLSearchParams","document","location","search","extendedFilter","extraFilter","_constructOptions$ext","key","value","query","Id","Number","baseFilter","item","_toConsumableArray","fetchSingleTile","NavigationLevel","Campaign","fetchPerformanceTimeSeries","movingAverage","period","accountsMode","dfmCacheKey","then","performanceTimeSeries","error","finally","catch","e","fetchAggregatedData","jsdata","raw","OverallTotals","totalMetrics","getFilteredTotalsMetrics","AccountsMode","Expert","availableTotalMetrics","AccountsHaveDifferentCurrencies","metricPickerData","Object","keys","map","total","formatMetric","displayName","getString","metricToDisplayNameMap","useData","selectedMetricIndexesFromDataHook","onMetricUpdate","useCallback","newSelectedMetricIndexes","newVisibleMetrics","Card","PerformanceCardFluent","PerformanceCard","_jsx","isComparisonEnabled","compared","defaultProps","id","querySelector","undefined","DetailCardsKey","campaign","billing","editorial","conversionTracking","bidding","assetGroup","statusAndActionReport","type","status","details","message","action","auditPointDisplayed","_ref2","auditPoint","area","getFullProductUrl","routeName","params","arguments","pathname","getRoutePathById","allSiteMap","reduce","result","param","join","BILLING_ISSUE_LIST","BANNER_ALERT","DANGER","STATUS_TEXT","Active","_TL_","Paused","UnderReview","BudgetPaused","getCampaignStatus","locale","alertHelper","name","cardDetails","_scope$values","cid","aid","onNavigateToBudgetEditSettingsPage","isSDK","url","save","cardTitle","cardMsg","onCardButtonClicked","edmCampaign","Customers","$withKey","Accounts","bulkUpdate","Status","showSuccess","showError","cardButtonText","statusLabelMsg","Warning","learnMoreLink","getCardDetails","statusIcon","Error","Pending","_objectSpread","InReview","Rejected","Approved","Limited","getEditorialStatus","_ref3","isCampaignTypeApp","window","open","assetGroupUrl","NoIssue","InappropriateTarget","getBiddingStatus","ACTION_OPERATOR_TEXT","EqualsTo","BeginsWith","Contains","RegularExpression","CATEGORY_OPERATOR_TEXT","LABEL_OPERATOR_TEXT","VALUE_OPERATOR_TEXT","LessThan","GreaterThan","NotSetUpGoal","NotSetUpGoalMaxClicks","Unverified","UnverifiedMaxClicks","RecordingConversions","NoConversions","NoConversionsMaxClicks","NoConversionGoal","NoConversionGoalMaxClicks","PendingMaxClicks","MissGoalWithRevenueValue","MissGoalWithRevenueValueMaxClicks","InactiveDueToTagUnavailable","InactiveDueToTagUnavailableMaxClicks","TagInactive","TagInactiveMaxClicks","NoRecentConversion","NoRecentConversionMaxClicks","AUDIT_POINT_STATUS_TEXT","TrackingStatusUnverified","TrackingStatusTagInactive","TrackingStatusInactiveDueToTagUnavailable","TrackingStatusUnverified_UETMismatch","TrackingStatusTagInactive_UETMismatch","TrackingStatusInactiveDueToTagUnavailable_UETMismatch","AUDIT_POINT_TITLE_TEXT","OPERATORS_TEXT","CHANGE_TO_MAIN_GOAL_TEXT","TrackingStatusNoConversions_ChangeToMainGoal","TrackingStatusUnverified_ChangeToMainGoal","TrackingStatusTagInactive_ChangeToMainGoal","TrackingStatusInactiveDueToTagUnavailable_ChangeToMainGoal","ConversionGoalPending_ChangeToMainGoal","onClickNavigateToUETTagPage","remove","onClickNavigateToOfflineConversionsPage","onClickNavigateToConversionGoalsPage","strings","CampaignTypes","Audience","GoalWithTopPriority","GoalName","FixEventGoal","_getInvalidEventStrin","_ref$fix","fix","CurrentEventCategory","CurrentEventCategoryOperator","CurrentEventAction","CurrentEventActionOperator","CurrentEventLabel","CurrentEventLabelOperator","CurrentEventValue","CurrentEventValueOperator","SuggestedEventCategory","SuggestedEventCategoryOperator","SuggestedEventAction","SuggestedEventActionOperator","SuggestedEventLabel","SuggestedEventLabelOperator","SuggestedEventValue","SuggestedEventValueOperator","currentArray","suggestedArray","push","current","suggested","getInvalidEventStrings","FixDestinationUrlGoal","CurrentDestinationUrlOperatorName","CurrentDestinationUrl","SuggestedDestinationUrlOperatorName","SuggestedDestinationUrl","UETMismatch","SuggestedTagName","DynamicPermissions","isConversionApplicable","conversionDetails","getConversionStatus","statusValue","parsed","parse","diagnosticDetails","CardStatus","title","text","some","hasWarning","isCampaignActive","campaignDetail","find","logStatusText","texts","perfMarker","setBilling","diagnosticsData","setDiagnosticsData","isDataFetchDone","setIsDataFetchDone","setError","AlertHelper","areas","getAreasForCampaignType","scopeCID","uid","Areas","Billing","getBillingStatus","ccBaseUrl","isNewConversionsEnabled","isNewApiEnabledForAudienceCampaigns","withNewApi","App","getCampaignDiagnostics","timeZoneId","adInsightBaseUrl","Token","useNewConversionDiagnostics","billingDetail","Array","isArray","notification","alertType","NotificationLevel","NotificationId","ccBaseUrlNoTrailingSlash","replace","paymentPath","getBillingDetail","diagnosticsDetail","toLowerCase","split","campaignDetails","Key","Editorial","editorialDetails","Bidding","biddingDetails","Conversion","getDiagnosticsDetail","rawDetails","acc","a","totalStatusCount","Boolean","readyState","_getCardStatusText","campaignStatusTitle","campaignStatusMsg","getCardStatusText","wrapperClass","mergeStyles","padding","overflowX","selectors","margin","titleShimmerClass","width","messageShimmerClass","shimmerWithElement1stRow","ShimmerElementType","line","height","shimmerWithElement2ndRow","shimmerWithElement3rdRow","shimmerWithElement4thRow","gap","shimmerWithElement5thRow","shimmerWithElement6thRow","DiagnosticCardShimmer","_jsxs","_Fragment","children","className","Shimmer","shimmerElements","Separator","OverviewDiagnosticCard","DiagnosticCard","entityName","customer","account","TopChangesCard","legacyI18n","cardTypeId","preferenceFromServer","PermissionsContext","comparisonDateRange","getComparisonDateRange","headerState","selectedMenuItem","selectedItemValue","TopChangesFilterOption","AllChanges","dismissLastFluctuation","setDismissLastFluctuation","useRef","selectedMetric","setSelectedMetric","onMetricSelect","selection","onFooterButtonClick","footerButtonConfigs","onClick","getHref","entityId","route","cacheManager","uiActivity","scenario","fetch","fetchTopChanges","isDevice","disableCache","dataError","gridData","entity","PerformanceMetricsChange","AvailableInsightTypeIds","fromScenario","CampaignType","toString","AccountInactiveReasons","AccountUtils","activityStatus","TopDecliners","TopGainers","Insights","isInsightsMetric","response","revalidateOnFocus","useTopChangesData","getTopChangesAllMetrics","renderFluctuationPopup","fluctuationTypeIds","isOpen","setIsOpen","context","CurrentCampaign","isFluctuationsExperiementEnabled","Permissions","IsFluctuationExperimentEnabled","FluctuationPopup","deps","token","imagePath","appConfig","onClose","onFlucDismiss","isLastFluc","canViewAllInsights","asyncLoadFluctuationConfig","startDate","start","endDate","end","withPopoverAdapter","useFluctuationPopup","metricFormatter","entityType","currentDateRange","dashboardPreferencesName","useDashboardPreferences","dashboardPreferences","findByNameAtAccountLevel","dashboardId","options","setOptions","saveDashBoardOptions","newOptions","setAtAccountLevel","Name","Data","cards","logApi","WelcomeTipsCard","createdCampaign","skippedBothAtAccountCreation","skippedNoneAtAccountCreation","pages","hasPaymentPermission","showWelcomeMsg","isPaymentFirstTile","hasCoupon","PreferenceContext","accountId","userId","customerId","scopes","alerts","paymentAlert","alert","indexOf","hasValidPaymentMethod","skippedNoneInFirstLoad","coupon","Redemptions","redeemedCoupons","redeemed","StatusId","AssociatedCoupon","matchResult","exec","ExpiryDateFromAssociation","expirationDate","parseInt","Date","stack","PROMO","CREATE_CAMPAIGN","ADD_PAYMENT","COACHING","HELP","useWelcomeTipPages","CurrentUser","FirstName","getLocalizedSupportLink","useOverviewPageStyles","makeStyles","pageContainer","maxWidth","minWidth","usePageStyles","main","position","overflow","content","display","clear","shorthands","cardSmall","cardMedium","cardLarge","cardFull","column","getStyleFromCardSize","size","styles","containerWidth","CardSize","FullScreen","Large","useOverviewPhase2WindowSizeChange","setResponsiveSize","onShellContentResize","func","delay","timer","_len","args","_key","clearTimeout","setTimeout","apply","debounce","getResponsiveSize","offsetWidth","resizeObserver","ResizeObserver","observe","disconnect","useLayoutEffect","lazy","module","default","OverviewRecommendationsCard","OverviewCampaignTable","OverviewAccountTable","OverviewKeywordTable","OverviewSearchTermTable","OverviewAdGroupTable","ConversionTrackingCardFluent","DeviceCard","TopLocationsCard","TopLocationViewSelector","CompetitionCardWithData","CompetitionFilterWithData","AssetPerformanceCard","AssetPerformanceCardWithAssetData","AssetPerformanceCardHeader","AssetPerformanceFilterWithAssetGroupsData","NavigateToFullProductCard","assetPerfId","getDefaultCardState","isResizable","reactView","isInViewportOnPageLoad","cardTopLocationsId","Small","CardHeaderContent","AssetPerformanceFilter","parentPerfMarker","campaignStateCard","budgetCard","bidStrategyCard","campaignStatusSummaryCards","PerformanceMaxSingleCampaign","defaultCardViewState","cardViewState","setCardViewState","remainingViewportCards","card","waterfallFilterStorage","WaterfallFilterStorage","waterfallDateFilterProcessor","getFilters","WaterfallFilterType","DateFilter","CampaignStatus","AdGroupStatus","getFilteredCampaignTypeFromWaterfallFilter","contentReady","PageReady","pageIsReady","onWindowResize","chartWidth","getElementsByClassName","newCarViewState","viewState","addEventListener","removeEventListener","useOverviewWindowSizeChange","cardState","backboneInstance","updateState","campaignStatusContentReady","budgetContentReady","bidStrategyContentReady","newI18n","sesIdRef","initialized","setInitialized","backboneCreator","createChild","on","useInitializeBackboneView","classNames","CampaignStatusSummaryCards","trigger","OverviewCard","currentSize","cardHeaderContentProps","CustomCardView","BackboneInstanceWrapper","managed","instance","PerformanceMax","viewProps","StyledPerformanceMaxSingleCampaign","withDefaultStyles","_ref$palette","palette","assign","metricPickerFluentV2Style","getPerformanceCardFluentV2Style","getPerformanceGraphStyle","getTopLocationCardFluentV2Style","competitionCardStyle","OverviewPage","legacyRouter","_bingads_webui_component_legacy_legacy_router_index","s$i18n","globalLegacyI18n","pageContext","constants","conversionTrackingDeps","tableDeps","recommendationsDeps","legacyConfig","featureInstrumentation","instrumentationConstants","instrumentationLegacy","i18nErrors","preferencesService","locationMap","walkme","adDisplayUrlService","topChangesLegacyDeps","legacyDeps","_defineProperty","cardRecommendationsId","cardTopCampaignsId","cardTopAccountsId","cardTopKeywordsId","cardSearchTermsId","cardTopAdGroupsId","cardConversionTrackingId","cardTopChangesAccountId","cardTopChangesCampaignId","cardTopChangesAdGroupId","childPerfMarkers","getChildPerfMarkers","configs","cardSize","forEach","typeId","childPerfMarker","useStableObject","obj","stableObj","setStableObject","isEqual","userWelcomePrefName","doneInitialLoad","cardsContainer","disclaimer","cardWidth33","cardWidth50","cardWidth66","cardWidth100","cardBasic","dynamicHeight","errorContainer","flexDirection","alignItems","textAlign","marginTop","errorImage","marginBottom","errorMessage","TooMuchAccountsError","src","tooManyAccountsError","alt","Button","appearance","SummaryCardsConfigs","getCardSizeClass","OverviewPagePhase2","currentCampaign","instrumentationContextValue","dfmActivity","overviewPageActivity","refreshKey","setRefreshKey","stableDateRange","stableFilter","filterCampaignType","isLinkedInCampaignOverview","isPMaxCampaignOverview","isShowCampaignStatusSummaryCards","isMobileAppCampaign","CampaignSettings","isAppCampaign","getCampaignSetting","setting","AppStore","welcomeTipsConfig","WelcomeStatus","welcomeTipsStatus","setWelcomeTipsStatus","_useDashboardPreferen","userWelcomePref","findByNameAtUserLevel","cancel","doNotShowWelcomeTips","Promise","resolve","showWelcomeTips","ShowWelcomeTips","HasCampaigns","odata","HasBIData","HasOtherAccounts","startScenario","instrumentationSettings","SCENARIONAME","LoadOverviewPage","startActivity","ACTIVITYNAME","logMessage","LOGCATEGORY","TRACE","LOGLEVEL","INFO","setAtUserLevel","useWelcomeTips","isLoadingWelcomeCardConfig","cardsConfigs","getFluentCardsConfigs","_useSelectedCardsWith","useSelectedCardsWithPreference","selectedCardsConfigs","cardSelectionCards","onCardSelectionSaved","getCardPreferenceOptionsForDfm","pageViewPortCardSizeFallback","getViewPortCardsCount","pageViewPortSizeFromDfm","FluentOverviewPageDataFetchManagerCardsConfigObject","viewPortCardSize","pageViewPortCardSize","setPageViewPortCardSize","viewportReady","setViewportReady","showTooMuchDataError","tiles","setShowTooMuchDataError","hasFetchedRef","currentCustomer","cardDeviceId","errors","Code","console","useHasTooManyAccounts","timeoutId","perfMarkers","perfMarkersWithSummaryCards","_window$FluentOvervie","dfmConfig","isKeywordInViewPort","isSearchTermInViewPort","innerHeight","innerWidth","dfmCampaignType","strConfig","strDfmConfig","doneCallback","first","cardConfig","CardView","getCardViewProps","cardPreference","getPropsFromPreferenceForPerformanceChart","getPropsForRecommendations","getTablePropsFromPreferenceForPerformanceTable","DefaultHeaderDropdown","getCardHeaderContentProps","getHeaderPropsFromPreferenceForPerformanceTable","getPropsFromPreferenceForConversionTracking","getHeaderPropsFromPreferenceForConversionTracking","getTablePropsFromPreferenceForDevices","getPropsFromPreferenceForTopLocations","cardCompetitionId","getPropsForTopChanges","getHeaderPropsFromPreferenceForTopChanges","cardWelcomeTipsId","_ref4","cardDiagnosticId","_ref5","cardAssetPerformanceId","_ref6","_ref7","cardNavigateToFullProductId","ERROR","contentType","getCardViewConstructor","campaignStatus","dynamic","AppCampaignNewCampaignGridColumns","renderCards","_ref3$getCardHeaderCo","_ref3$getCardViewProp","cardPreferenceKey","getCardPreferenceKey","getCardPreferenceWithDefault","getPreferencePatcher","staticDepsProps","isDiagnositcCard","dynamicHeightForNarrow","isFullWidthCard","getEntitySetOptions","cardSelectorKey","showCardSelector","CardSelector","onSave","DisclaimerBanner","timezone","onMounted","eventDispatcher","state","azure","azureUrlRewrite","localInstrumentation","logger","rowElement","buttonElement","footerButtonElement","ShimmerCard","style","paddingLeft","paddingRight","flex","useNoDataStyles","noDataContainer","flexGrow","alignContent","justifyContent","textContainer","justifyItems","NoDataCard","Image","Caption1Stronger","Caption1","useCardStyles","container","paddingTop","listStyleType","backgroundRepeat","backgroundPositionX","backgroundPositionY","backgroundSize","marginRight","marginLeft","cursor","textOverflow","whiteSpace","opacity","backgroundImage","fontFamily","fontSize","color","boxShadow","backgroundColor","backdropFilter","wordWrap","useAuctionInsightData","setData","setIsLoading","dataSource","getAuctionInsightDataSource","createAsyncToken","onSuccess","chartData","clearCache","onError","onCancel","CompetitionCard","competitors","items","domains","chartType","SmallTile","WrappedComponent","HoC","withFilterData","usePreferenceMetrics","onMetricSet","preferences","IsBAACompetitionBSCAuctionInsightsEnabled","Shopping","Search","getCampaignType","IsAvgPositionDeprecationPhase1Enabled","IsAvgPositionDeprecationPhase2Enabled","metricPreferenceKeyName","setMetricValue","m","ImpressionShare","setMetric","metricObj","useFilterStyles","button","paddingBottom","buttonText","lineBreak","tokens","colorNeutralForeground2","listbox","maxHeight","dropdown","border","CompetitionFilter","setState","selectedCompetitors","setSelectedCompetitors","s","initCompetitors","dropdownButtonText","selected","Tooltip","relationship","Dropdown","multiselect","selectedOptions","onOptionSelect","event","disabled","OptionGroup","label","option","Option","Menu","MenuTrigger","disableButtonEnhancement","MenuButton","MenuPopover","MenuList","MenuItem","withCompetitorsData","computerColor","tabletColor","mobileColor","connectedTVColor","mapSegmentData","segmentedData","segment","deviceType","StringValue","Impressions","Clicks","CTR","Spend","TopImpressionRate","AbsoluteTopImpressionRate","ConversionsCredit","PartialConversionRate","PartialConversionCPA","AdvertiserReportedRevenue","RevenueOnAdSpend","AverageCPC","LegendIcon","useGradient","boxStyle","renderCustomCallout","legend","legendColor","metricValue","customCallout","legendIcon","date","RangeStartDate","RangeEndDate","dropdownCustomStyles","root","outline","lineHeight","caretDown","caretDownWrapper","dropdownItem","deviceDefaultCard","footerVisible","dropdownDefaultCard","multiStackedChart","getStyles","DeviceDefaultCard","deviceData","initialSelectedMetrics","chartPoints","chartPointsTemplate","callOutAccessibilityData","ariaLabel","metricChartPointsMap","flatMap","PerformanceMetrics","SegmentedData","DeviceSegmentedPerformanceData","deviceTypeMap","deviceMetricsMap","overallTotals","updatedChartPoints","updatedPoints","typedMetric","deviceMetrics","overallValue","toFixed","selectedViews","setSelectedViews","dropdownOptions","remainingMetrics","useDefaultStyles","dataViews","view","handleViewChange","prevSelectedViews","newViews","selectedColumns","selectedKey","onChange","TooltipHost","Glyphicon","glyph","MultiStackedBarChart","culture","navigator","language","hideLegend","onRenderCalloutPerDataPoint","chartStyles","deviceComparisonCard","dropdownComparisonCard","gridContainerStyle","gridTemplateColumns","gridTemplateRows","dataItem","separator","borderLeft","multiStackedBarChart","comparisonCardPattern","left","top","leftGrid","gridColumn","rightGrid","patterns","path","DeviceComparisonPatterns","pattern","patternUnits","x1","y1","x2","y2","stroke","strokeWidth","legendKeyMap","SmartPhone","getSegmentedData","keyPath","extractNumericValue","symbolRegex","sanitizedValue","parseFloat","calculatePercentageOfTotal","totalMetric","DeviceComparisonCard","currentComparisonData","previousComparisonData","changeData","previousDataMap","deviceIdentifier","previous","changeDataPercentage","previousDateRange","formattedStart","formattedEnd","currentPeriodTotals","previousPeriodTotals","PeriodPerformanceMetrics","createChartSeriesData","isPattern","colorMap","Computer","Tablet","ConnectedTV","formattedValue","prepareDeviceData","comparisonData","deviceDataAccumulator","createChartPoints","currentDeviceData","previousDeviceData","chartTitle","accumulator","getCombinedDataPoints","combined","entry","dataPoint","calloutStyles","point","combinedData","mappedLegend","changeDataEntry","change","roundedValue","numericChange","isFinite","changeDataPercentageEntry","changePercentage","roundedValuePercentage","numericChangePercentage","formatChangePercentageWithSign","legendData","metricDisplayName","hidePercentageOfTotal","Set","has","currentPercentageOfTotalMetric","previousPercentageOfTotalMetric","renderMetricValue","percentageMetricKey","percentageMetricValue","percentage","changeValue","formatMetricWithSign","currentMetric","selectedKeys","v","handleDropdownChange","newSelectedViews","chartTitleHidden","headerElement","buttonRowElement","largeBlockElement","footerElement","shimmerContainer","shimmerElement","ComputerIcon","xmlns","viewBox","fill","d","TabletIcon","MobileIcon","ConnectedTVIcon","x","y","chartContainer","minHeight","deviceLegend","flexWrap","columnGap","icon","footer","Legend","legends","uiMetrics","getUIMetrics","aggregatedData","isAccountIdAvailable","AdGroups","fetcher","async","isComparisonScenario","getOrderFromGridSortForCombinedCall","sortColumn","sortDirection","comparisonMajorMetric","order","orderByValue","defaultComparisonMetric","GridDataTable","initialSortColumn","initialSortDirection","entityDisPlayName","getPopoverContent","triggerSearchTermDrawer","selectedMetrics","setSelectedMetrics","sortState","setSortState","orderby","direction","getOrderFromGridSort","columns","fetchGridData","keywordText","Text","MatchType","useGridData","newSelectedMetrics","newSortState","newSelectedColumns","useStyles","gridStyle","classes","useCombinedCallData","orderBy","fetchEntityGridCombined","MATCH_TYPE","Exact","Phrase","Broad","getPopoverContentFunction","AdGroup","matchType","pageSize","getCampaignData","isAdGroupLevel","formatQuery","$select","$skip","$top","$orderby","$filter","findAll","dataList","allowedCheck","selectedTag","fontWeight","colorNeutralBackground1Selected","borderRadius","CampaignAdgroupSelector","defalutSelectedCampaign","defalutSelectedAdGroup","showSelectedTag","onInitFinished","onSelectionChange","useCampaignData","checkedItems","setCheckedItems","openItems","setOpenItems","selectedCampaign","setSelectedCampaign","selectedAdGroup","setSelectedAdGroup","parentValue","adGroup","campaignFromItems","onOpenChange","allOpenItems","lazyLoad","signleQuoteTerminatedQuery","$expand","$count","toJSON","getAdGroupData","selectedEntityName","placeholder","isMultiSelect","divider","helpLink","AddKeywordDrawer","isNegative","inputId","useId","dropdownId","campaignAdGroupSelectorId","keywordValue","setKeywordValue","selectedOption","setSelectedOption","selectedOptionText","setSelectedOptionText","radioGroupValue","setRadioGroupValue","isSelectorDataLoaded","setIsSelectorDataLoaded","selectorTitle","onSavedClose","onCancelClose","onSaveClicked","negativeKeyword","NegativeKeywords","EntityType","CampaignId","AdGroupId","campaignEntity","NegativeKeyword","create","keywordData","Keywords","Bid","update","adapter","onRadioGroupChange","onKeywordChange","ev","trim","optionValue","optionText","onSelectorDataLoaded","onSelectorSelectionChange","newSelectedCampaign","newSelectedAdGroup","Drawer","DrawerHeader","DrawerHeaderTitle","DrawerBody","Field","RadioGroup","Radio","Label","htmlFor","required","Input","linkText","topic","Divider","DrawerFooter","Keyword","block","weight","showDrawer","setShowDrawer","setIsNegative","setKeywordText","tableKey","setTableKey","dataSaved","FAC_FEATUREID_TIPID_PRIORITY_MAPPING","GOOGLE_IMPORT","CONVERSION_TRACKING","FAC_TIPID_FEATUREID_MAPPING","mapping","priorities","featureId","tipId","instrumentationSchema","logAdInsightOppTracking","oppt","isClick","guid","isMCC","opportunityType","opportunityTypeId","reason","activeItems","currentSlide","getCarouselActiveItems","tips","recommendations","overallOptimizationScoreBar","allItems","recommendationsCount","recommendationsToShow","tipsCount","getRecommendationCounts","IsImportTipsPriorityEnabled","otherThanImportTips","tip","isImportRelatedTip","numberOfRecommendations","loaded","getCarouselActiveItemsWithCouponData","ccJsData","getCcJsData","p$Coupons","coupons","newTips","rawCoupon","currency","CurrencyCode","couponFeatureId","FeatureId","tipPriorities","couponEligibleTip","sortBy","getCarouselActiveItemsWithCouponDataInternal","fetchCoupons","getRecommendationsFromOpportunitiesData","opportunitiesData","categories","category","accountRecommendationIdsToShow","recommendation","OverallOptimizationScoreBar","willDisplayAccountRecommendation","intersection","isEmpty","loadTipsData","tipList","TipId","tipConfig","compact","tipName","helpType","market","Market","Language","calloutsMktg","calloutsHelp","dsa","autoBidHelp","autoBidMktg","importHelp","importVideo","broadMatchVideo","BROAD_MATCH_MODIFIER_KEYWORD","CALLOUT","DYNAMIC_SEARCH_ADS","AUTOBIDDING_ENHANCEDCPC","AUTOBIDDING_MAXCLICKS","AUTOBIDDING_MAXCONVERSIONS","AUTOBIDDING_TARGETCPA","broadMatchHelp","BROAD_MATCH_KEYWORD","sitelinksMktg","sitelinksHelp","SITE_LINK","ScheduledImportHelp","GOOGLE_IMPORT_SCHEDULED","shouldShowTip","shuffle","newRecommendations","willDisplayImportRelatedtips","loadTipAndOpportunities","p$Tips","recommendationsOriginal","getCardData","fetchTips","fetchMCCOverviewRecommendations","fetchRecommendations","getRecommendationsData","Recommendations","clearRecommendationsCache","EmptyCarouselContent","consultationLink","role","tabIndex","href","target","rel","CouponFlag","rightAlign","flyout","Popover","withArrow","openOnHover","PopoverTrigger","PopoverSurface","TipItem","logSlideDisplay","removeTipLocally","videoRef","clickTip","WalkMeAPI","startWalkthruById","whenLoaded","click","Tip","afterUpdate","dismissTip","expirationTime","setDate","getDate","DismissalExpirationDateTime","couponFlag","imgClass","description","ref","videoId","onKeyUp","combineText","textPart1","textPart2","slice","CarouselItem","currentActivity","logOpportunityEvent","viewRecommendation","isTip","summaryCardModel","errI18n","levelAt","summaryCardOptions","opportunityCount","optimizationScore","version","isInlineView","applyAllCallback","isOverviewPage","isOptimizationScoreOn","OptimizationScore","viewDetails","SummaryCard","SummaryFooter","carouselFooter","CardContent","setCurrentSlide","haveVideo","goPrev","goNext","i","active","itemIndex","itemCount","imageElement","navigationLevelOption","activeItemsInternal","setActiveItemsInternal","allItemsInternal","setAllItemsInternal","generateGuid","swrKeyObject","mutate","useRecommendationsData","Culture","CurrentLocale","addScenario","loadRecommendationOverviewTile","recommendationScope","getScope","navigateToRoute","campaign_id","input","api","RECOMMENDATION","channel","newAllItemsInternal","newActiveItemsInternal"],"sourceRoot":""}