\r\n
setAudienceAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledAudiencePicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isAudienceCreationWorkflow: PropTypes.bool.isRequired,\r\n perfMarker: perfMarkerPropTypes.isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n audiences: PropTypes.arrayOf(PropTypes.shape({})),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n campaignSubType: PropTypes.string,\r\n supportExclusion: PropTypes.bool,\r\n campaignSettings: PropTypes.shape({}).isRequired,\r\n campaignBiddingStrategy: PropTypes.shape({}).isRequired,\r\n siteMap: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string,\r\n })).isRequired,\r\n isIMARedesignEnabled: PropTypes.bool,\r\n hideCustomSegmentsOption: PropTypes.bool,\r\n};\r\n\r\nUnstyledAudiencePicker.defaultProps = {\r\n campaignSubType: null,\r\n supportExclusion: false,\r\n isIMARedesignEnabled: false,\r\n hideCustomSegmentsOption: false,\r\n};\r\n\r\nexport const ValidatedAudiencePicker = withDefaultStyles(withSiteMap(withCustomValidation(UnstyledAudiencePicker)), getAudiencePickerStyle);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const getAudiencePickerStyle = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n '.audience-modal.create-audience': {\r\n width: 700,\r\n },\r\n },\r\n pickerContainer: {\r\n '& .audience-association-view': {\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n\r\n '& .create-audience-link-section': {\r\n marginLeft: 0,\r\n },\r\n\r\n '& .exclude-audience-link-section': {\r\n marginLeft: 0,\r\n },\r\n\r\n '& .ima-reach-ineligible-audience-toggle': {\r\n marginLeft: 16,\r\n marginTop: 8,\r\n },\r\n\r\n '& .association-section, .audience__association, .audience__exclusion': {\r\n '& .DMP_doublelistbox_section .doubleListBox.layout-columns': {\r\n width: 920,\r\n\r\n '& .form-group, .layout-columns-element:nth-child(1) .form-group:nth-child(1) .dlb-filter-alignPlaceholder .form-control-feedback': {\r\n margin: 0,\r\n },\r\n },\r\n\r\n '& .row': {\r\n margin: 0,\r\n },\r\n },\r\n\r\n '& .selectable-treeview ul': {\r\n listStyleType: 'none',\r\n padding: 0,\r\n },\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { Toggle } from '@fluentui/react';\r\nimport { Dropdown, TextField } from '@bingads-webui-react/fabric-with-signal';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation, withValidation, withError } from '@bingads-webui-react/validation';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nconst ValidatedTextField = withValidation(TextField);\r\n\r\nconst FrequencyIntervals = {\r\n Hour: 'HOUR',\r\n Day: 'DAY',\r\n Week: 'WEEK',\r\n Month: 'MONTH',\r\n Lifetime: 'LIFETIME',\r\n};\r\n\r\nconst FrequencyCapUnit = 'IMPRESSION';\r\n\r\nconst getKeyStringMap = i18n => [\r\n { key: FrequencyIntervals.Hour, text: i18n.getString(_TL_('hour')) },\r\n { key: FrequencyIntervals.Day, text: i18n.getString(_TL_('day')) },\r\n { key: FrequencyIntervals.Week, text: i18n.getString(_TL_('week')) },\r\n // Don't support month and lifetime for now\r\n // { key: FrequencyIntervals.Month, text: i18n.getString(_TL_('month')) },\r\n // { key: FrequencyIntervals.Lifetime, text: i18n.getString(_TL_('lifetime')) },\r\n];\r\n\r\nexport const formatFrequencyCapping = ({ CapValue, TimeGranularity, i18n }) => {\r\n let interval;\r\n if (TimeGranularity === undefined || TimeGranularity === null) {\r\n return i18n.getString(_TL_('No limit to how often people see your ads'));\r\n }\r\n if (TimeGranularity === '') {\r\n interval = '';\r\n } else {\r\n interval = getKeyStringMap(i18n).find(({ key }) => key === TimeGranularity).text;\r\n }\r\n return i18n.getString(_TL_('{{count}} times per {{interval}}'), { count: CapValue, interval });\r\n};\r\n\r\nconst textWidth = 100;\r\nconst textStyles = { root: { width: textWidth } };\r\n\r\nconst dropdownWidth = 100;\r\nconst dropDownStyles = { dropdown: { width: dropdownWidth } };\r\n\r\nconst getStyle = () => ({\r\n inputContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n frequency: {\r\n margin: '0 10px',\r\n },\r\n});\r\n\r\nconst ValueAndInterval = ({\r\n i18n,\r\n TimeGranularity,\r\n onIntervalChanged,\r\n timeOptions,\r\n validationProps,\r\n}) => {\r\n const classes = useDefaultStyles(getStyle);\r\n\r\n return (\r\n
\r\n \r\n {formatFrequencyCapping({ CapValue: '', TimeGranularity: '', i18n })}\r\n \r\n
\r\n );\r\n};\r\n\r\nValueAndInterval.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n TimeGranularity: PropTypes.string,\r\n onIntervalChanged: PropTypes.func.isRequired,\r\n timeOptions: PropTypes.shape({}).isRequired,\r\n validationProps: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nValueAndInterval.defaultProps = {\r\n TimeGranularity: '',\r\n};\r\n\r\nconst ValidatedValueAndInterval = withError(ValueAndInterval);\r\n\r\nconst FrequencyCapping = ({\r\n i18n,\r\n validationProps,\r\n updateValidation,\r\n}) => {\r\n const activity = useContext(ActivityContext);\r\n const { data: [{ CapValue = null, TimeGranularity } = {}] = [] } = validationProps;\r\n const [errorMessage, setErrorMessage] = useState([]);\r\n\r\n const onIntervalChanged = useCallback((e, value) => {\r\n updateValidation(errorMessage, {\r\n FrequencyCapSettings: [{\r\n CapValue,\r\n TimeGranularity: value.key,\r\n FrequencyCapUnit,\r\n }],\r\n });\r\n\r\n if (activity) {\r\n activity.signal(`onFrequencyIntervalChanged - ${JSON.stringify(value)})}`);\r\n }\r\n }, [updateValidation, errorMessage, CapValue, activity]);\r\n\r\n const timeOptions = useMemo(() => getKeyStringMap(i18n), [i18n]);\r\n\r\n const onToggle = useCallback((e, checked) => {\r\n if (checked) {\r\n updateValidation([], {\r\n FrequencyCapSettings: [{\r\n CapValue: undefined,\r\n TimeGranularity: TimeGranularity || FrequencyIntervals.Hour,\r\n FrequencyCapUnit,\r\n }],\r\n });\r\n } else {\r\n updateValidation([], { FrequencyCapSettings: [{}] });\r\n }\r\n\r\n if (activity) {\r\n activity.signal(`onFrequencyCapToggleChanged - toggleStatus: ${checked}`);\r\n }\r\n }, [TimeGranularity, activity, updateValidation]);\r\n\r\n const onCountValidate = useCallback((result) => {\r\n const { messages = [], data: { capValue } } = result;\r\n if (!_.isEqual(messages, errorMessage) || capValue !== CapValue) {\r\n setErrorMessage(messages);\r\n\r\n updateValidation(messages, {\r\n FrequencyCapSettings: [{\r\n CapValue: capValue,\r\n TimeGranularity,\r\n FrequencyCapUnit,\r\n }],\r\n });\r\n }\r\n }, [errorMessage, CapValue, updateValidation, TimeGranularity]);\r\n\r\n const customErrors = {\r\n decimalLength: i18n.getString(_TL_('Field requires integer value')),\r\n };\r\n\r\n const errorProcessor = errors => _.map(\r\n errors,\r\n (oldError, key) => customErrors[key] || oldError\r\n );\r\n\r\n return (\r\n
\r\n \r\n { TimeGranularity && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nFrequencyCapping.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n inputContainer: PropTypes.string.isRequired,\r\n frequency: PropTypes.string.isRequired,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n CapValue: PropTypes.string,\r\n TimeGranularity: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const ValidatedFrequencyCapping = withCustomValidation(FrequencyCapping);\r\n","import _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React, { useContext, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ThemeProvider } from 'react-jss';\r\nimport { ComponentSettings, ThemeFluent } from '@bingads-webui-theme-2018/theme-fluent';\r\nimport { DoubleListBox, DoubleListBoxContextProvider, DoubleListBoxContext } from '@bingads-webui-react/double-list-box-fluent';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getStyles } from './get-styles';\r\n\r\nconst DataSource = ({ genreOptions }) => {\r\n const {\r\n state: {\r\n search,\r\n },\r\n dispatch,\r\n } = useContext(DoubleListBoxContext);\r\n\r\n useEffect(() => {\r\n dispatch({ type: 'START_LOAD_DATA' });\r\n\r\n const items = search ? genreOptions.filter(item => item.name.toLowerCase().includes(search.toLowerCase())) : genreOptions;\r\n const start = 0;\r\n const end = items.length;\r\n dispatch({\r\n type: 'FINISH_LOAD_DATA',\r\n payload: {\r\n items: items.slice(start, end),\r\n totalCount: items.length,\r\n },\r\n });\r\n }, [dispatch, search, genreOptions]);\r\n\r\n return null;\r\n};\r\n\r\nDataSource.propTypes = {\r\n genreOptions: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n })).isRequired,\r\n};\r\n\r\nconst UnthemedGenreSelectionDoubleListBox = ({\r\n onSelectionChange, i18n, genreOptions, genreTargets, classes,\r\n}) => {\r\n const selectedItems = useMemo(\r\n () => _.map(genreTargets, genreTarget => _.findWhere(genreOptions, { id: genreTarget }))\r\n , [genreTargets, genreOptions]\r\n );\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nUnthemedGenreSelectionDoubleListBox.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n onSelectionChange: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n genreOptions: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n })).isRequired,\r\n genreTargets: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n};\r\n\r\nconst GenreSelectionDoubleListBox = withDefaultStyles(UnthemedGenreSelectionDoubleListBox, getStyles);\r\n\r\nexport { GenreSelectionDoubleListBox };\r\n","export const getStyles = (_, { palette = {} } = {}) => {\r\n const doubleListBox = {\r\n '& > div': {\r\n height: 470,\r\n },\r\n '& .items .item[aria-selected=\"true\"]': {\r\n backgroundColor: palette.neutralLight,\r\n\r\n '& div:nth-child(2)': {\r\n display: 'none',\r\n },\r\n },\r\n };\r\n\r\n return {\r\n doubleListBox,\r\n };\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useContext, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { RadioGroup } from '@bingads-webui-react/radio';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { GenreSelectionDoubleListBox } from './genre-selection-double-list-box';\r\n\r\nconst genreTargetAllOptionIds = {\r\n AllGenres: 'AllGenres',\r\n SelectSpecifics: 'SelectSpecifics',\r\n};\r\n\r\nconst radioOptions = [\r\n genreTargetAllOptionIds.AllGenres,\r\n genreTargetAllOptionIds.SelectSpecifics,\r\n];\r\n\r\nconst GenreTargets = ({\r\n i18n,\r\n genreTargets,\r\n genreOptions,\r\n updateValidation,\r\n}) => {\r\n const activity = useContext(ActivityContext);\r\n const isAllSelected = genreTargets == null || genreTargets.length === 0;\r\n\r\n const [selectedOptionId, setSelectedOptionId] = useState(radioOptions[isAllSelected ? 0 : 1]);\r\n\r\n const optionToString = {\r\n [genreTargetAllOptionIds.AllGenres]: i18n.getString(_TL_('All genres')),\r\n [genreTargetAllOptionIds.SelectSpecifics]: i18n.getString(_TL_('Let me choose specific genres')),\r\n };\r\n\r\n const renderItem = useCallback(id => optionToString[id], [optionToString]);\r\n const getItemId = _.identity;\r\n\r\n const onGenreTargetsChanged = useCallback((selections) => {\r\n const selectionIds = _.map(selections, selection => selection.id);\r\n updateValidation([], { genreTargets: selectionIds });\r\n if (activity) {\r\n activity.signal(`onGenreTargetChange - ${JSON.stringify({ genreTargets: selectionIds })}`);\r\n }\r\n }, [updateValidation, activity]);\r\n\r\n const onRadioGroupChange = useCallback((id) => {\r\n if (id === genreTargetAllOptionIds.AllGenres) {\r\n // reset the selections.\r\n updateValidation([], { genreTargets: [] });\r\n }\r\n\r\n setSelectedOptionId(id);\r\n }, [updateValidation]);\r\n\r\n return (\r\n
\r\n \r\n { i18n.getString(_TL_('What genre do you want your ads to target?')) }\r\n
\r\n \r\n {\r\n selectedOptionId === genreTargetAllOptionIds.SelectSpecifics &&\r\n \r\n }\r\n \r\n );\r\n};\r\n\r\nGenreTargets.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n genreTargets: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n genreOptions: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n })).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n};\r\n\r\nconst formatGenreTargets = ({ i18n, genreTargets, genreOptions }) => {\r\n if (genreTargets === null ||\r\n genreTargets === undefined ||\r\n genreTargets.length === 0 ||\r\n genreTargets.length === genreOptions.length) {\r\n return i18n.getString(_TL_('All genres'));\r\n }\r\n\r\n const genreTargetStr = genreTargets.length + i18n.getString(_TL_(' targets selected: ')) +\r\n _.chain(genreTargets)\r\n .sortBy()\r\n .take(10)\r\n .map(genreTargetId => _.findWhere(genreOptions, { id: genreTargetId }).name)\r\n .join(i18n.getString(_TL_(', ')))\r\n .value();\r\n\r\n if (genreTargets.length > 10) {\r\n return genreTargetStr + i18n.getString(_TL_('...'));\r\n }\r\n\r\n return genreTargetStr;\r\n};\r\n\r\nconst ValidatedGenreTargets = withCustomValidation(GenreTargets);\r\n\r\nexport { ValidatedGenreTargets, formatGenreTargets };\r\n","const getGenreOptions = i18n =>\r\n [\r\n {\r\n id: 1,\r\n name: i18n.getString(_TL_('Horror')),\r\n },\r\n {\r\n id: 2,\r\n name: i18n.getString(_TL_('Crime')),\r\n },\r\n {\r\n id: 3,\r\n name: i18n.getString(_TL_('Game-show')),\r\n },\r\n {\r\n id: 4,\r\n name: i18n.getString(_TL_('Documentary')),\r\n },\r\n {\r\n id: 5,\r\n name: i18n.getString(_TL_('Romance')),\r\n },\r\n {\r\n id: 6,\r\n name: i18n.getString(_TL_('Sports - Other')),\r\n },\r\n {\r\n id: 7,\r\n name: i18n.getString(_TL_('Talk')),\r\n },\r\n {\r\n id: 8,\r\n name: i18n.getString(_TL_('Drama')),\r\n },\r\n {\r\n id: 9,\r\n name: i18n.getString(_TL_('Fantasy')),\r\n },\r\n {\r\n id: 10,\r\n name: i18n.getString(_TL_('Music')),\r\n },\r\n {\r\n id: 11,\r\n name: i18n.getString(_TL_('Shopping')),\r\n },\r\n {\r\n id: 12,\r\n name: i18n.getString(_TL_('Other')),\r\n },\r\n {\r\n id: 13,\r\n name: i18n.getString(_TL_('Action')),\r\n },\r\n {\r\n id: 14,\r\n name: i18n.getString(_TL_('Thriller')),\r\n },\r\n {\r\n id: 15,\r\n name: i18n.getString(_TL_('News')),\r\n },\r\n {\r\n id: 17,\r\n name: i18n.getString(_TL_('Reality')),\r\n },\r\n {\r\n id: 18,\r\n name: i18n.getString(_TL_('Comedy')),\r\n },\r\n {\r\n id: 19,\r\n name: i18n.getString(_TL_('Business & Finance')),\r\n },\r\n {\r\n id: 20,\r\n name: i18n.getString(_TL_('Cooking')),\r\n },\r\n {\r\n id: 21,\r\n name: i18n.getString(_TL_('Sitcom')),\r\n },\r\n {\r\n id: 22,\r\n name: i18n.getString(_TL_('Adventure')),\r\n },\r\n {\r\n id: 23,\r\n name: i18n.getString(_TL_('Sci-fi')),\r\n },\r\n {\r\n id: 25,\r\n name: i18n.getString(_TL_('Football')),\r\n },\r\n {\r\n id: 26,\r\n name: i18n.getString(_TL_('Animation')),\r\n },\r\n {\r\n id: 27,\r\n name: i18n.getString(_TL_('Baseball')),\r\n },\r\n {\r\n id: 28,\r\n name: i18n.getString(_TL_('Basketball')),\r\n },\r\n {\r\n id: 29,\r\n name: i18n.getString(_TL_('Biography')),\r\n },\r\n {\r\n id: 30,\r\n name: i18n.getString(_TL_('History')),\r\n },\r\n {\r\n id: 31,\r\n name: i18n.getString(_TL_('Musical')),\r\n },\r\n {\r\n id: 32,\r\n name: i18n.getString(_TL_('Mystery')),\r\n },\r\n {\r\n id: 33,\r\n name: i18n.getString(_TL_('Soccer')),\r\n },\r\n {\r\n id: 34,\r\n name: i18n.getString(_TL_('War')),\r\n },\r\n {\r\n id: 35,\r\n name: i18n.getString(_TL_('Western')),\r\n },\r\n {\r\n id: 36,\r\n name: i18n.getString(_TL_('Animals')),\r\n },\r\n {\r\n id: 37,\r\n name: i18n.getString(_TL_('Automotive')),\r\n },\r\n {\r\n id: 38,\r\n name: i18n.getString(_TL_('Science & Technology')),\r\n },\r\n {\r\n id: 39,\r\n name: i18n.getString(_TL_('Travel')),\r\n },\r\n {\r\n id: 40,\r\n name: i18n.getString(_TL_('Golf')),\r\n },\r\n {\r\n id: 41,\r\n name: i18n.getString(_TL_('Ice Hockey')),\r\n },\r\n {\r\n id: 42,\r\n name: i18n.getString(_TL_('Motor Sports')),\r\n },\r\n {\r\n id: 43,\r\n name: i18n.getString(_TL_('Beauty & Fashion')),\r\n },\r\n {\r\n id: 44,\r\n name: i18n.getString(_TL_('Home & Garden')),\r\n },\r\n {\r\n id: 45,\r\n name: i18n.getString(_TL_('Health')),\r\n },\r\n {\r\n id: 46,\r\n name: i18n.getString(_TL_('Fitness')),\r\n },\r\n // Children not allowed\r\n // {\r\n // id: 47,\r\n // name: i18n.getString(_TL_('Children')),\r\n // },\r\n {\r\n id: 48,\r\n name: i18n.getString(_TL_('Weather')),\r\n },\r\n {\r\n id: 49,\r\n name: i18n.getString(_TL_('Education')),\r\n },\r\n {\r\n id: 50,\r\n name: i18n.getString(_TL_('Cycling')),\r\n },\r\n {\r\n id: 51,\r\n name: i18n.getString(_TL_('Gaming')),\r\n },\r\n {\r\n id: 52,\r\n name: i18n.getString(_TL_('Rugby League')),\r\n },\r\n {\r\n id: 53,\r\n name: i18n.getString(_TL_('Rugby Union')),\r\n },\r\n {\r\n id: 54,\r\n name: i18n.getString(_TL_('Australian Rules Football')),\r\n },\r\n {\r\n id: 55,\r\n name: i18n.getString(_TL_('Tennis')),\r\n },\r\n {\r\n id: 56,\r\n name: i18n.getString(_TL_('Olympics')),\r\n },\r\n {\r\n id: 57,\r\n name: i18n.getString(_TL_('Softball')),\r\n },\r\n {\r\n id: 58,\r\n name: i18n.getString(_TL_('Cricket')),\r\n },\r\n {\r\n id: 59,\r\n name: i18n.getString(_TL_('MMA')),\r\n },\r\n {\r\n id: 60,\r\n name: i18n.getString(_TL_('Boxing')),\r\n },\r\n {\r\n id: 61,\r\n name: i18n.getString(_TL_('Horse Racing')),\r\n },\r\n // Religion and Politics not allowed\r\n // {\r\n // id: 62,\r\n // name: i18n.getString(_TL_('Politics')),\r\n // },\r\n // {\r\n // id: 63,\r\n // name: i18n.getString(_TL_('Religion')),\r\n // },\r\n {\r\n id: 64,\r\n name: i18n.getString(_TL_('Nature')),\r\n },\r\n {\r\n id: 65,\r\n name: i18n.getString(_TL_('Outdoors')),\r\n },\r\n {\r\n id: 66,\r\n name: i18n.getString(_TL_('Arts')),\r\n },\r\n {\r\n id: 67,\r\n name: i18n.getString(_TL_('Pop Culture')),\r\n },\r\n {\r\n id: 68,\r\n name: i18n.getString(_TL_('Fishing')),\r\n },\r\n {\r\n id: 69,\r\n name: i18n.getString(_TL_('Surfing')),\r\n },\r\n {\r\n id: 70,\r\n name: i18n.getString(_TL_('Paranormal')),\r\n },\r\n {\r\n id: 71,\r\n name: i18n.getString(_TL_('Awards')),\r\n },\r\n {\r\n id: 72,\r\n name: i18n.getString(_TL_('Martial Arts')),\r\n },\r\n {\r\n id: 73,\r\n name: i18n.getString(_TL_('Hobbies')),\r\n },\r\n {\r\n id: 74,\r\n name: i18n.getString(_TL_('Dance')),\r\n },\r\n {\r\n id: 75,\r\n name: i18n.getString(_TL_('Law')),\r\n },\r\n {\r\n id: 76,\r\n name: i18n.getString(_TL_('Comic Book')),\r\n },\r\n {\r\n id: 77,\r\n name: i18n.getString(_TL_('Holidays')),\r\n },\r\n {\r\n id: 78,\r\n name: i18n.getString(_TL_('Wrestling')),\r\n },\r\n // {\r\n // id: 79,\r\n // name: i18n.getString(_TL_('Gambling')),\r\n // },\r\n {\r\n id: 80,\r\n name: i18n.getString(_TL_('Anime')),\r\n },\r\n {\r\n id: 81,\r\n name: i18n.getString(_TL_('Soap-Opera')),\r\n },\r\n ];\r\n\r\nconst getDealGenreOptions = i18n =>\r\n [\r\n {\r\n id: 1,\r\n name: i18n.getString(_TL_('Horror')),\r\n },\r\n {\r\n id: 4,\r\n name: i18n.getString(_TL_('Documentary')),\r\n },\r\n {\r\n id: 5,\r\n name: i18n.getString(_TL_('Romance')),\r\n },\r\n {\r\n id: 8,\r\n name: i18n.getString(_TL_('Drama')),\r\n },\r\n {\r\n id: 9,\r\n name: i18n.getString(_TL_('Fantasy')),\r\n },\r\n {\r\n id: 13,\r\n name: i18n.getString(_TL_('Action')),\r\n },\r\n {\r\n id: 18,\r\n name: i18n.getString(_TL_('Comedy')),\r\n },\r\n ];\r\n\r\nexport { getGenreOptions, getDealGenreOptions };\r\n","import { getCollapsiblePanelStyles } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\n\r\nexport const getAdGroupStepStyles = (components, theme) => ({\r\n collapsiblePanel: getCollapsiblePanelStyles(components, theme),\r\n container: {\r\n marginTop: 10,\r\n },\r\n reachEstimate: {\r\n height: '100%',\r\n top: 111,\r\n position: 'sticky',\r\n },\r\n reachEstimationError: {\r\n marginBottom: 12,\r\n },\r\n});\r\n","export const getReachEstimateStyles = (_, core) => ({\r\n reachEstimateControl: {\r\n width: 400,\r\n },\r\n\r\n estimateNote: {\r\n color: '#323130',\r\n fontSize: 12,\r\n },\r\n\r\n panel: {\r\n minHeight: 161,\r\n paddingTop: 8,\r\n position: 'relative',\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n borderRadius: 2,\r\n backgroundColor: `${core && core.palette && core.palette.white}`,\r\n },\r\n\r\n panelBody: {\r\n padding: 10,\r\n },\r\n\r\n reachEstimateTitle: {\r\n fontSize: 18,\r\n marginBottom: 8,\r\n },\r\n\r\n impressionsCountMessage: {\r\n fontSize: 18,\r\n },\r\n\r\n impressionsCount: {\r\n fontWeight: 'bold',\r\n },\r\n\r\n meterContainer: {\r\n height: 37,\r\n margin: '10px 0 13px 0',\r\n position: 'relative',\r\n fontSize: 12,\r\n '& .specificMeter': {\r\n width: '10%',\r\n height: 12,\r\n backgroundColor: '#C4C4C4',\r\n position: 'absolute',\r\n top: 17,\r\n },\r\n '& .broadMeter': {\r\n width: '90%',\r\n height: 12,\r\n backgroundColor: '#C4C4C4',\r\n position: 'absolute',\r\n top: 17,\r\n marginLeft: '10%',\r\n },\r\n },\r\n\r\n specificMeter: {\r\n width: '10%',\r\n height: 12,\r\n backgroundColor: '#C4C4C4',\r\n position: 'absolute',\r\n top: 17,\r\n },\r\n\r\n broadMeter: {\r\n width: '90%',\r\n height: 12,\r\n backgroundColor: '#C4C4C4',\r\n position: 'absolute',\r\n top: 17,\r\n marginLeft: '10%',\r\n },\r\n\r\n audienceSpecificLabel: {\r\n position: 'absolute',\r\n top: 35,\r\n fontSize: 12,\r\n },\r\n\r\n audienceBroadLabel: {\r\n position: 'absolute',\r\n top: 35,\r\n fontSize: 12,\r\n right: 0,\r\n },\r\n\r\n arrow: {\r\n backgroundColor: '#107C10',\r\n top: 5,\r\n width: 16,\r\n height: 35,\r\n position: 'absolute',\r\n border: `4px solid ${core && core.palette && core.palette.white} !important`,\r\n zIndex: 1,\r\n },\r\n});\r\n","import React, { useEffect, useRef, useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getReachEstimateStyles } from './reach-estimate-styles';\r\n\r\n\r\nconst meterProps = {\r\n value: 0,\r\n max: 100,\r\n min: 0,\r\n};\r\n\r\nconst calcBroadMeterValue = (estimatedImpressions) => {\r\n // Use logarithmic scale to represent impressions: y = a ln x + b\r\n // 96 = a ln 466B + b: (466B experimentally derived as max impressions value)\r\n // 20 = a ln 1M + b: (1M is required as min broad impressions value)\r\n // TODO: Tune this as needed after initial self-hosting\r\n const transformedVal = (5.82288 * Math.log(estimatedImpressions)) - 60.44618;\r\n\r\n return transformedVal;\r\n};\r\n\r\nexport const AudienceMeter = (props) => {\r\n const {\r\n estimatedImpressions, isImpressionTooSpecific, i18n, isDealEstimate,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getReachEstimateStyles);\r\n\r\n const arrowRef = useRef(null);\r\n const specificMeterRef = useRef(null);\r\n const broadMeterRef = useRef(null);\r\n\r\n const [arrowStyles, setArrowStyles] = useState(null);\r\n const [arrowType, setArrowType] = useState(null);\r\n const [broadMeterStyle, setBroadMeterStyle] = useState(null);\r\n const [specificMeterStyle, setSpecificMeterStyle] = useState(null);\r\n\r\n const calcBroadPos = useCallback((value) => {\r\n const specificMeterSize = specificMeterRef.current.offsetWidth;\r\n const broadMeterSize = broadMeterRef.current.offsetWidth;\r\n const arrowGap = arrowRef.current.style.borderLeftWidth;\r\n\r\n const broadScalePos = value * ((broadMeterSize - arrowGap) / meterProps.max);\r\n\r\n // Offset final position with specific meter width\r\n return (0.1 * specificMeterSize) + broadScalePos;\r\n }, [arrowRef, specificMeterRef, broadMeterRef]);\r\n\r\n const moveAlongBroad = useCallback((value) => {\r\n if (arrowRef && arrowRef.current) {\r\n setArrowStyles({\r\n left: calcBroadPos(value),\r\n borderTopColor: 'green',\r\n backgroundColor: '#107C10',\r\n });\r\n setArrowType('arrow-broad');\r\n }\r\n\r\n if (isDealEstimate && specificMeterRef.current && broadMeterRef.current) {\r\n const totalWidth = (0.1 * specificMeterRef.current.clientWidth) + broadMeterRef.current.clientWidth;\r\n const estimatePos = calcBroadPos(value);\r\n\r\n setSpecificMeterStyle({\r\n width: '100%',\r\n });\r\n setBroadMeterStyle({\r\n width: `${(estimatePos / totalWidth) * 100}%`,\r\n marginLeft: 0,\r\n });\r\n setArrowStyles({\r\n visibility: 'hidden',\r\n });\r\n }\r\n }, [isDealEstimate, calcBroadPos]);\r\n\r\n const calcSpecificPos = useCallback((value) => {\r\n const specificMeterSize = specificMeterRef.current.offsetWidth;\r\n const arrowGap = arrowRef.current.style.borderLeftWidth;\r\n\r\n return value * ((specificMeterSize - arrowGap) / meterProps.max);\r\n }, [arrowRef, specificMeterRef]);\r\n\r\n const moveToSpecific = useCallback(() => {\r\n const midPointVal = 50; // percentage\r\n\r\n if (arrowRef && arrowRef.current) {\r\n setArrowStyles({\r\n left: calcSpecificPos(midPointVal),\r\n borderTopColor: 'red',\r\n backgroundColor: '#A80000',\r\n });\r\n setArrowType('arrow-narrow');\r\n }\r\n }, [calcSpecificPos]);\r\n\r\n useEffect(() => {\r\n if (arrowRef.current && specificMeterRef.current && broadMeterRef.current) {\r\n if (isImpressionTooSpecific) {\r\n moveToSpecific();\r\n } else {\r\n moveAlongBroad(calcBroadMeterValue(estimatedImpressions));\r\n }\r\n }\r\n }, [moveAlongBroad, moveToSpecific, estimatedImpressions, isImpressionTooSpecific, arrowRef, specificMeterRef, broadMeterRef]);\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
\r\n {i18n.getString(_TL_('Low'))}\r\n
\r\n
\r\n {i18n.getString(_TL_('High'))}\r\n
\r\n
\r\n );\r\n};\r\n\r\nAudienceMeter.propTypes = {\r\n estimatedImpressions: PropTypes.number,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isImpressionTooSpecific: PropTypes.bool,\r\n isDealEstimate: PropTypes.bool,\r\n};\r\n\r\nAudienceMeter.defaultProps = {\r\n estimatedImpressions: null,\r\n isImpressionTooSpecific: false,\r\n isDealEstimate: false,\r\n};\r\n","const unitValueMap = {\r\n None: {\r\n value: 1,\r\n unit: '',\r\n },\r\n Thousand: {\r\n value: 1000,\r\n unit: 'K',\r\n },\r\n Million: {\r\n value: 1000000,\r\n unit: 'M',\r\n },\r\n Billion: {\r\n value: 1000000000,\r\n unit: 'B',\r\n },\r\n};\r\n\r\nexport { unitValueMap };\r\n","import PropTypes from 'prop-types';\r\nimport React, { useState, useEffect, useCallback, useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { useFetch } from 'use-http';\r\nimport classNames from 'classnames';\r\nimport { Stack, Spinner, SpinnerSize, MessageBar, MessageBarType } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { getReachEstimateStyles } from './reach-estimate-styles';\r\nimport { AudienceMeter } from './audience-meter';\r\nimport { unitValueMap } from './utils';\r\n\r\nexport const tooNarrowFlag = 'ToNarrow';\r\nexport const tooNarrowErrorMessage = _TL_('Your targeting is too narrow. Update your targets to broaden your audience and increase estimated impressions.');\r\n\r\nconst title = _TL_('Potential monthly impressions');\r\n\r\nconst ReachEstimate = (props) => {\r\n const {\r\n i18n,\r\n permissions,\r\n targets,\r\n accountId,\r\n customerId,\r\n updateValidation,\r\n validationProps,\r\n shouldServeOnMSAN,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getReachEstimateStyles);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const {\r\n post: fetchReachEstimation,\r\n response: reachEstimationResponse,\r\n loading: reachEstimationLoading,\r\n error: reachEstimationError,\r\n } = useFetch(`Customers(${customerId})/Accounts(${accountId})/planner/AudienceEstimation`);\r\n\r\n const [currentTargets, setCurrentTargets] = useState(null);\r\n\r\n const [showPanel, setShowPanel] = useState(true);\r\n const [isLoading, setIsLoading] = useState(true);\r\n\r\n const [estimatedImpressions, setEstimatedImpressions] = useState();\r\n const [estimatedImpressionsText, setEstimatedImpressionsText] = useState();\r\n const [isImpressionTooSpecific, setIsImpressionTooSpecific] = useState();\r\n\r\n const [errorMessage, setErrorMessage] = useState();\r\n\r\n const updateEstimatesOnMeter = useCallback((data) => {\r\n if (!data || !data.estImpression) {\r\n return;\r\n }\r\n\r\n const estImpressionsVal = data.estImpression.value;\r\n const estImpressionsUnit = unitValueMap[data.estImpression.unit].unit;\r\n const estImpressionsUnitVal = unitValueMap[data.estImpression.unit].value;\r\n\r\n const estImpressionsText = `${estImpressionsVal}${estImpressionsUnit}`;\r\n const estImpressions = estImpressionsVal * estImpressionsUnitVal;\r\n\r\n setEstimatedImpressions(estImpressions);\r\n setEstimatedImpressionsText(estImpressionsText);\r\n setIsImpressionTooSpecific(data.isImpressionTooSpecific);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (shouldServeOnMSAN) {\r\n if (isImpressionTooSpecific && !permissions.IsAmplifyEnabled) {\r\n updateValidation([i18n.getString(_TL_('Targeting too specific'))], { [validationProps.field]: tooNarrowFlag }, false);\r\n } else if (isLoading) {\r\n updateValidation([i18n.getString(_TL_('Loading'))], { [validationProps.field]: null }, false);\r\n } else {\r\n updateValidation([], { [validationProps.field]: null }, false);\r\n }\r\n }\r\n }, [i18n, isLoading, updateValidation, isImpressionTooSpecific, permissions.IsAmplifyEnabled, validationProps, shouldServeOnMSAN]);\r\n\r\n const updatePanel = useCallback((data) => {\r\n let currentErrorMessage = null;\r\n if (_.get(data, ['estImpression', 'value']) || data.isImpressionTooSpecific) {\r\n setShowPanel(true);\r\n updateEstimatesOnMeter(data);\r\n\r\n if (data.isImpressionTooSpecific && !permissions.IsAmplifyEnabled) {\r\n currentErrorMessage = tooNarrowErrorMessage;\r\n }\r\n setErrorMessage(currentErrorMessage && i18n.getString(currentErrorMessage));\r\n } else {\r\n setShowPanel(false);\r\n }\r\n }, [i18n, permissions.IsAmplifyEnabled, updateEstimatesOnMeter]);\r\n\r\n useEffect(() => {\r\n if (!reachEstimationLoading) {\r\n const { data } = reachEstimationResponse;\r\n\r\n setIsLoading(false);\r\n\r\n if (data) {\r\n updatePanel(data);\r\n }\r\n\r\n if (reachEstimationError) {\r\n setShowPanel(false);\r\n }\r\n\r\n if (activity) {\r\n activity.signal(`onReachEstimationChange - ${JSON.stringify({ estimation: data })}`);\r\n }\r\n }\r\n }, [reachEstimationError, reachEstimationLoading, reachEstimationResponse, updateValidation, updatePanel, activity]);\r\n\r\n // Allow Updating Estimates no more than once every 2000 ms\r\n const debouncedUpdateEstimate = useCallback(_.debounce(data => fetchReachEstimation('', data), 2000), [fetchReachEstimation]);\r\n\r\n useEffect(() => {\r\n if (targets && !_.isEqual(targets, currentTargets)) {\r\n setIsLoading(true);\r\n setShowPanel(true);\r\n setCurrentTargets(targets);\r\n debouncedUpdateEstimate(targets);\r\n }\r\n }, [targets, debouncedUpdateEstimate, currentTargets]);\r\n\r\n return (\r\n
\r\n {showPanel &&\r\n
\r\n
\r\n {isLoading ? (\r\n <>\r\n {i18n.getString(title)}
\r\n \r\n \r\n \r\n \r\n )\r\n : (\r\n <>\r\n \r\n {i18n.getString(`${title}: `)}
\r\n {estimatedImpressionsText}
\r\n \r\n \r\n \r\n \r\n {i18n.getString(_TL_('These are estimates based on your targeting and audience settings.'))}\r\n
\r\n {errorMessage &&\r\n \r\n {errorMessage}\r\n \r\n }\r\n \r\n \r\n )\r\n }\r\n \r\n
\r\n }\r\n
\r\n );\r\n};\r\n\r\nReachEstimate.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n IsAmplifyEnabled: PropTypes.bool,\r\n IsKPIEstimateForAudienceFeedBasedEnabled: PropTypes.bool,\r\n }).isRequired,\r\n shouldServeOnMSAN: PropTypes.bool,\r\n targets: PropTypes.shape({}),\r\n accountId: PropTypes.number.isRequired,\r\n customerId: PropTypes.number.isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n field: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nReachEstimate.defaultProps = {\r\n targets: null,\r\n shouldServeOnMSAN: false,\r\n};\r\n\r\n\r\nconst validatedReachEstimate = withCustomValidation(ReachEstimate);\r\n\r\nexport { validatedReachEstimate as ReachEstimate };\r\n","export const getDealPotentialImpression = () => ({\r\n dealImpression: {\r\n backgroundColor: 'white',\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n padding: 10,\r\n width: 400,\r\n height: 'fit-content',\r\n marginBottom: 20,\r\n '&.panel-mode': {\r\n height: 'unset',\r\n boxShadow: 'none',\r\n },\r\n '& .deal-seller': {\r\n fontSize: '18px',\r\n fontWeight: 'bold',\r\n marginBottom: '15px',\r\n },\r\n '& .deal-warning': {\r\n fontSize: '18px',\r\n fontWeight: 'bold',\r\n marginBottom: '15px',\r\n '& .deleted-text': {\r\n color: '#A80000',\r\n },\r\n },\r\n '& .desc': {\r\n fontSize: '12px',\r\n fontWeight: 'bold',\r\n },\r\n '& .impression': {\r\n fontSize: '28px',\r\n fontWeight: 'bold',\r\n },\r\n '& .deal-impression': {\r\n marginBottom: '20px',\r\n },\r\n '& .broadMeter': {\r\n backgroundColor: '#004578 !important',\r\n height: '24px !important',\r\n top: '8px !important',\r\n },\r\n '& .specificMeter': {\r\n height: '24px !important',\r\n top: '8px !important',\r\n },\r\n },\r\n});\r\n","import React, { useCallback, useEffect, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { useFetch } from 'use-http';\r\nimport BlockUi from 'react-block-ui';\r\nimport { Link, Panel, Spinner, SpinnerSize } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useBoolean } from '@fluentui/react-hooks';\r\n\r\nimport { DealDetails, bytesForHuman, isNetflixDeal, isDealDeleted } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { AudienceMeter } from '../../steps/ad-group/reach-estimate/audience-meter';\r\nimport { getDealPotentialImpression } from './deal-potential-impression-styles';\r\nimport { unitValueMap } from '../../steps/ad-group/reach-estimate/utils';\r\n\r\nexport const DealImpressionPanel = (props) => {\r\n const {\r\n deal, i18n, isPanelMode, targets, serverContext, impression,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getDealPotentialImpression);\r\n const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);\r\n const [estimateLoaded, setEstimateLoaded] = useState(!!impression);\r\n const [estImpression, setEstImpression] = useState(impression);\r\n\r\n const dealDeleted = isDealDeleted(deal);\r\n // hide impression for netflix\r\n const hideDealImpression = isNetflixDeal(deal) || dealDeleted;\r\n\r\n const {\r\n DynamicPermissions: {\r\n GenreTargets,\r\n },\r\n Permissions: {\r\n IsDealFilterEnabled,\r\n },\r\n } = serverContext;\r\n const shouldShowGenre = GenreTargets && IsDealFilterEnabled && deal;\r\n\r\n const {\r\n post: fetchReachEstimation,\r\n } = useFetch(`Customers(${serverContext.CurrentCustomer.Id})/Accounts(${serverContext.CurrentAccount.Id})/planner/AudienceEstimation`);\r\n\r\n const debouncedUpdateEstimate = useCallback(_.debounce((data) => {\r\n fetchReachEstimation('', data).then((res) => {\r\n if (!res) {\r\n return;\r\n }\r\n const estImpressionsVal = res.estImpression.value;\r\n const estImpressionsUnitVal = unitValueMap[res.estImpression.unit].value;\r\n const estImpressions = estImpressionsVal * estImpressionsUnitVal;\r\n\r\n // set to undefine if 0\r\n if (estImpressions === 0) {\r\n setEstImpression(undefined);\r\n } else {\r\n setEstImpression(estImpressions);\r\n }\r\n setEstimateLoaded(true);\r\n });\r\n }, 3000), []);\r\n\r\n useEffect(() => {\r\n if (!impression && !hideDealImpression) {\r\n setEstimateLoaded(false);\r\n debouncedUpdateEstimate({\r\n ...targets,\r\n DealIds: { Includes: [deal.Id] },\r\n });\r\n }\r\n }, [targets, debouncedUpdateEstimate, deal.Id, impression]);\r\n\r\n\r\n return (\r\n
\r\n {dealDeleted ?\r\n
\r\n {i18n.getString(_TL_('Media deal'))}: {i18n.getString(_TL_('Deleted'))}\r\n
\r\n :
{i18n.getString(_TL_('Media deal'))}: {deal.Name}
\r\n }\r\n { estImpression &&
{i18n.getString(_TL_('Potential impression for this deal'))}
}\r\n { estImpression &&
{bytesForHuman(estImpression)}
}\r\n\r\n {\r\n !hideDealImpression &&\r\n
\r\n }\r\n {\r\n !dealDeleted &&\r\n (\r\n isPanelMode ?\r\n
:\r\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\r\n
{i18n.getString(_TL_('View deal'))}\r\n )\r\n }\r\n {\r\n !isPanelMode &&\r\n
\r\n \r\n \r\n }\r\n \r\n );\r\n};\r\n\r\n\r\nDealImpressionPanel.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n impression: PropTypes.number,\r\n deal: PropTypes.shape({\r\n Seller: PropTypes.string,\r\n Name: PropTypes.string,\r\n AskPrice: PropTypes.number,\r\n EstimatedImpressions: PropTypes.number,\r\n Id: PropTypes.number,\r\n }).isRequired,\r\n isPanelMode: PropTypes.bool,\r\n serverContext: PropTypes.shape({\r\n CurrentCustomer: PropTypes.shape({ Id: PropTypes.string }),\r\n CurrentAccount: PropTypes.shape({ Id: PropTypes.string }),\r\n Permissions: PropTypes.shape({\r\n IsDealFilterEnabled: PropTypes.bool,\r\n }),\r\n DynamicPermissions: PropTypes.shape({\r\n GenreTargets: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n targets: PropTypes.shape({}),\r\n};\r\n\r\nDealImpressionPanel.defaultProps = {\r\n isPanelMode: false,\r\n impression: null,\r\n targets: {},\r\n};\r\n","import React from 'react';\r\nimport { MessageBar } from '@fluentui/react';\r\n\r\nexport const getNetflixFrequencyCapping = i18n => (\r\n
\r\n
\r\n
\r\n {i18n.getString(_TL_('The publisher\\'s frequency limits have been applied: 3 impressions/day, 14 impressions/week, and 40 impressions/month.'))}
\r\n \r\n
\r\n
\r\n);\r\n","import React, { useEffect, useCallback, useState } from 'react';\r\nimport { MessageBar, Checkbox, Spinner, SpinnerSize } from '@fluentui/react';\r\nimport { Link } from '@bingads-webui-react/fabric-with-signal';\r\nimport PropTypes from 'prop-types';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport BlockUi from 'react-block-ui';\r\n\r\nconst NetflixTCAgreement = ({ i18n, cid, aid }) => {\r\n const [fetched, setFetched] = useState(false);\r\n const [accepted, setAccepted] = useState(false);\r\n\r\n const readAccount = useCallback(() => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .get({ select: ['NetflixTCAccepted'] })\r\n .toPromise(), [aid, cid]);\r\n\r\n const patchAccount = useCallback(() => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .patch({ NetflixTCAccepted: 'true' })\r\n .toPromise(), [aid, cid]);\r\n\r\n const onAccept = useCallback(() => {\r\n setFetched(false);\r\n patchAccount()\r\n .then(() => {\r\n setAccepted(true);\r\n setFetched(true);\r\n });\r\n }, [patchAccount]);\r\n\r\n useEffect(() => {\r\n readAccount().then((account) => {\r\n setFetched(true);\r\n setAccepted(account.NetflixTCAccepted === 'true');\r\n });\r\n }, [readAccount]);\r\n\r\n return (\r\n
} >\r\n
\r\n {i18n.getString(_TL_('I have read and agree to the '))}\r\n \r\n {i18n.getString(_TL_('Netflix Inventory Policy'))}\r\n \r\n {i18n.getString(_TL_('.'))}\r\n \r\n }\r\n checked={accepted}\r\n onChange={onAccept}\r\n disabled={accepted}\r\n defaultChecked={false}\r\n />\r\n \r\n {i18n.getString(_TL_('To be eligible to show ads on Netflix, your campaigns must meet all Netflix requirements, such as containing a bid, having a certain video quality and adhering to Netflix’s policies.'))}\r\n \r\n \r\n \r\n {\r\n i18n.getString(_TL_('Advertisers in the following verticals are required to submit their licenses and/or proof of creative approval in select markets to serve their ads on Netflix: Alcohol, Financial Services, Insurance, High fat/sugar/salt foods, online sports betting, state-run lotteries, healthcare, pharmaceuticals, and dating. Licenses and proof of creative approval can be submitted in web forms linked through the'))\r\n }\r\n \r\n \r\n {i18n.getString(_TL_('Restricted policy page.'))}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nNetflixTCAgreement.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n cid: PropTypes.number.isRequired,\r\n aid: PropTypes.number.isRequired,\r\n};\r\n\r\nexport { NetflixTCAgreement };\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useState, useCallback, useMemo } from 'react';\r\nimport _, { compact } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Panel as BootstrapPanel } from 'react-bootstrap';\r\nimport { Link } from '@bingads-webui-react/fabric-with-signal';\r\nimport { MessageBarType, MessageBar } from '@fluentui/react';\r\nimport { Stack, Label } from '@bingads-webui-react/fabric-control';\r\nimport { ValidationGroup, ErrorMessages } from '@bingads-webui-react/validation';\r\nimport { getLocationTargetTitleDetails, getAdScheduleDetails, getBidTitleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { CustomValidatedDefaultBid } from '@bingads-webui-campaign-react/default-bid';\r\nimport { AdGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { ValidatedLegacyDateSetting, getDateSettingDetails } from '@bingads-webui-campaign/date-setting';\r\nimport { ValidatedLocationTargetSetting } from '@bingads-webui-campaign-react/step-wizard-controls';\r\nimport { withStepLoadingShell } from '@bingads-webui-campaign-react/step-wizard';\r\nimport { ValidatedLegacyAdSchedule } from '@bingads-webui-campaign/ad-schedule';\r\nimport { SEARCH_TYPE } from '@bingads-webui-react/bing-maps';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport {\r\n FormErrorGroup, UnmappedFormErrors,\r\n entityIs, andComp, propertyIs, anyComp, notComp,\r\n} from '@bingads-webui-campaign-react/form-error';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { ActuationGroup, withActuation, FocusableActuator } from '@bingads-webui-campaign-react/actuator';\r\nimport { ERROR_ENTITY, getPanelErrorProps, getConvertedCurrencyDealMinimumBid, getAccountExchangeRateFromLocalStorage } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport {\r\n Collapse,\r\n TextTitle,\r\n useCollapseState,\r\n ValidatedBootstrapPanel,\r\n ValidatedFixedPanel,\r\n ValidatedPanel,\r\n collapseExpander,\r\n} from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport {\r\n isXandrDisplayAdsCampaign,\r\n isXandrVideoAdsCampaign,\r\n CampaignSubTypes,\r\n campaignShouldServeOnMSAN,\r\n isXandrServing,\r\n ScopeLevel\r\n} from '@bingads-webui-campaign-react/constants';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport {\r\n ValidatedCompanyPicker,\r\n formatCompany,\r\n ValidatedIndustryPicker,\r\n formatIndustry,\r\n ValidatedJobFunctionPicker,\r\n formatJobFunction,\r\n PredictiveTargetingHeader,\r\n PredictiveTargetingControlHeader,\r\n SectionShimmer,\r\n} from '@bingads-webui-campaign-react/display-plus-native-ads';\r\nimport { ValidatedCustomSegmentsPicker, formatCustomSegment } from '@bingads-webui-campaign-react/custom-segments-edit-create';\r\nimport { ServerValidatedWebExclusionsWithValidation, webExclusionPropertyVal } from '@bingads-webui-react/web-exclusions';\r\nimport { getContentTargetingPlacementsSummaryText, ContentTargetingPlacements } from '@bingads-webui-campaign-react/display-plus-campaigns/src/steps/adgroup/components/content-targeting-placements';\r\nimport { ServerValidatedRemainingCharsValidatedTextField } from '../../common/shared-components';\r\nimport { useStepAdGroupSettingsState } from './use-step-ad-group-state';\r\nimport { AgeRange, formatAgeRanges } from './target/age-range';\r\nimport { Gender, formatGenders } from './target/gender';\r\nimport { Device, formatDevices } from './target/device';\r\nimport { ValidatedAudiencePicker, formatAudience } from './target/audience-picker';\r\nimport { ValidatedFrequencyCapping } from './frequency-capping';\r\nimport { ValidatedGenreTargets, formatGenreTargets } from './genre-targeting';\r\nimport { getGenreOptions, getDealGenreOptions } from './genre-targeting/genre-options';\r\nimport { getAdGroupStepStyles } from './step-ad-group-settings-styles';\r\nimport { ReachEstimate, tooNarrowFlag, tooNarrowErrorMessage } from './reach-estimate';\r\nimport { DealImpressionPanel } from '../../common/deal-potential-impression/deal-potential-impression';\r\nimport { getNetflixFrequencyCapping } from './frequency-capping/netflixFrequencyCapping';\r\nimport { NetflixTCAgreement } from './netflix-tc/netflix-tc-agreement';\r\n\r\nconst FocusableErrorMessage = withActuation(ErrorMessages, { Actuators: [FocusableActuator] });\r\n\r\nconst entityIsAdGroup = entityIs(ERROR_ENTITY.AdGroup);\r\n\r\nconst adGroupUrlOptionsProperties = notComp(andComp(\r\n entityIsAdGroup,\r\n anyComp(\r\n propertyIs('TrackingUrlTemplate'),\r\n propertyIs('UrlCustomParameters'),\r\n propertyIs('FinalUrlSuffix')\r\n )\r\n));\r\n\r\nexport const adGroupNameProp = andComp(entityIsAdGroup, propertyIs('Name'));\r\nexport const adGroupBidProp = andComp(entityIsAdGroup, anyComp(propertyIs('Bid'), propertyIs('BidAmount')));\r\nfunction StepAdGroupSettings(props) {\r\n const {\r\n stepService,\r\n } = props;\r\n\r\n const [optimizedTargetingEnabled, setOptimizedTargetingEnabled] = useState(false);\r\n\r\n const [stepState, stepApi] = useStepAdGroupSettingsState(stepService);\r\n\r\n const [adScheduleView, setAdScheduleView] = useState(null);\r\n const setAdScheduleViewCallback = useCallback((view) => {\r\n setAdScheduleView(view);\r\n }, []);\r\n\r\n const {\r\n i18n,\r\n legacyI18n,\r\n hideStepHeader,\r\n serverContext,\r\n bundleCountries,\r\n locationTargets,\r\n bundleLocationCriterions,\r\n adSchedules,\r\n campaignTimeZone,\r\n genreTargets,\r\n ageRanges,\r\n genderTypes,\r\n deviceTypes,\r\n deviceRestrictions,\r\n deviceRestricted,\r\n companyNameTargets,\r\n negativeCompanyNameTargets,\r\n jobTargets,\r\n negativeJobTargets,\r\n industry,\r\n negativeIndustry,\r\n locationRestricted,\r\n dealLocationList,\r\n genreRestricted,\r\n ageRestricted,\r\n genderRestricted,\r\n audienceRestricted,\r\n campaignBiddingStrategy,\r\n campaignSubtype,\r\n scope,\r\n adGroup,\r\n adGroupErrors,\r\n systemErrors,\r\n navigationConfirmationPrompt,\r\n reachEstimationTargets,\r\n serverErrors,\r\n dealDetails,\r\n areBeaconsActive,\r\n showAllValidationErrors,\r\n campaignSettings,\r\n customSegments,\r\n placements,\r\n exclusions,\r\n initialAdGroup,\r\n } = stepState;\r\n const { onAdGroupValidation } = stepApi;\r\n\r\n const {\r\n DynamicPermissions: {\r\n XandrVideoCampaignsAudienceTargets,\r\n XandrNegativeTarget,\r\n XandrDeviceTarget,\r\n GenreTargets,\r\n ShowNetflixTCAccepted,\r\n AgeGenderDisclaimer,\r\n EnableMSANDisplayCampaigns,\r\n EnableMSANVideoCampaigns,\r\n EnableKeywordCustomSegments,\r\n ContentTargeting,\r\n ContentTargetingMSNSubcategories,\r\n CampaignLifetimeBudget,\r\n },\r\n Permissions: {\r\n IsDealFilterEnabled,\r\n },\r\n CurrentCustomer: {\r\n Id: cid,\r\n },\r\n CurrentAccount: {\r\n Id: aid,\r\n },\r\n NetflixEnabledCountryCodes = 'GB',\r\n } = serverContext;\r\n\r\n const shouldServeOnMSAN = campaignShouldServeOnMSAN(campaignSettings);\r\n const isEnableMSANDisplayCampaignsEnabled = EnableMSANDisplayCampaigns && isXandrDisplayAdsCampaign(campaignSubtype) && shouldServeOnMSAN;\r\n const isEnableMSANVideoCampaignsEnabled = EnableMSANVideoCampaigns && isXandrVideoAdsCampaign(campaignSubtype) && shouldServeOnMSAN;\r\n\r\n const isMSANEnabled = isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled;\r\n const isXandrServingCampaign = isXandrServing(campaignSubtype, campaignSettings);\r\n\r\n const basicOptions = compact([\r\n 'ad-group',\r\n 'bid',\r\n 'locations',\r\n 'age-range',\r\n 'gender',\r\n 'start-end-date',\r\n isMSANEnabled && 'predictive-targeting',\r\n isMSANEnabled && 'web-exclusions',\r\n !isMSANEnabled && 'audience',\r\n !isMSANEnabled && 'device',\r\n !isMSANEnabled && 'frequency-capping',\r\n !isMSANEnabled && 'ad-schedule',\r\n !isMSANEnabled && 'genre-targets',\r\n !isMSANEnabled && 'netflix-tc',\r\n ]);\r\n\r\n const [\r\n allAdGroupSettingsSections,\r\n adGroupSettingsExpandedSections,\r\n setAdGroupSettingsExpandedSections,\r\n flipAdGroupSettingsExpandAllState,\r\n ] = useCollapseState(\r\n basicOptions /* all sections */,\r\n dealDetails ? ['ad-group', 'bid'] : ['ad-group', 'bid', 'locations'] /* initially expanded sections */\r\n );\r\n\r\n const [\r\n allAdGroupSettingsTargetingSections,\r\n adGroupSettingsTargetingExpandedSections,\r\n setAdGroupSettingsTargetingExpandedSections,\r\n ] = useCollapseState(\r\n compact([\r\n 'audience',\r\n 'device',\r\n 'company-target',\r\n 'job-target',\r\n 'industry-target',\r\n 'frequency-capping',\r\n 'ad-schedule',\r\n 'genre-targets',\r\n 'netflix-tc',\r\n 'predictive-targeting-control',\r\n 'start-end-date',\r\n EnableKeywordCustomSegments && 'custom-segments',\r\n ContentTargeting && 'content-targeting-placements',\r\n ]) /* all sections */,\r\n [] /* initially expanded sections */\r\n );\r\n\r\n const classes = useDefaultStyles(getAdGroupStepStyles);\r\n const isDealTypeRestricted = dealDetails && _.isEqual('Restricted', dealDetails.Type);\r\n const shouldUsePredefinedFrequencyLimit = isDealTypeRestricted;\r\n const shouldHideDeviceListForDeal = isDealTypeRestricted;\r\n\r\n let bidType = (campaignBiddingStrategy && campaignBiddingStrategy.Type === 'ManualCpm') ? 'CpmBid' : 'CpvBid';\r\n if (campaignBiddingStrategy.Type === 'EnhancedCpc') {\r\n bidType = 'SearchBid';\r\n }\r\n\r\n let bidRange = serverContext.KeywordBidRange;\r\n\r\n if (isXandrServing(campaignSubtype, campaignSettings) && isXandrVideoAdsCampaign(campaignSubtype)) {\r\n bidRange = bidType === 'CpmBid' ? serverContext.VideoViewsCPMBidRange : serverContext.VideoViewsCPVBidRange;\r\n }\r\n\r\n if (isXandrDisplayAdsCampaign(campaignSubtype)) {\r\n bidRange = serverContext.KeywordCPMBidRange;\r\n }\r\n\r\n const shouldShowDealLocationTarget = IsDealFilterEnabled && dealDetails && !locationRestricted;\r\n const isDealGenreRestricted = GenreTargets && IsDealFilterEnabled && dealDetails && dealDetails.Genre;\r\n const genreOptions = useMemo(() => _.sortBy(isDealGenreRestricted ? getDealGenreOptions(i18n) : getGenreOptions(i18n), 'name'), [i18n, isDealGenreRestricted]);\r\n\r\n const isCTVSupported = !isXandrDisplayAdsCampaign(campaignSubtype) && bidType === 'CpvBid';\r\n const isXandrVideoCampaignsAudienceTargetsEnabled = XandrVideoCampaignsAudienceTargets;\r\n\r\n const shouldShowDeviceTarget = (!dealDetails && bidType !== 'CpvBid' && !isXandrDisplayAdsCampaign(campaignSubtype) && XandrDeviceTarget) || !isXandrServingCampaign;\r\n\r\n let dealMinimumBid = 0;\r\n if (dealDetails) {\r\n const exchangeRateMapping = getAccountExchangeRateFromLocalStorage(serverContext);\r\n dealMinimumBid = getConvertedCurrencyDealMinimumBid(dealDetails.MinimumBid, dealDetails.Currency, serverContext.CurrentAccount.CurrencyCode, exchangeRateMapping.val);\r\n }\r\n\r\n const bidValidationProps = {\r\n field: bidType,\r\n schema: {\r\n properties: {\r\n [bidType]: {\r\n type: 'number',\r\n minimum: dealDetails ? Math.max(dealMinimumBid, bidRange.FloorValue) : bidRange.FloorValue,\r\n maximum: dealDetails ? null : bidRange.CeilingValue,\r\n required: true,\r\n },\r\n },\r\n },\r\n };\r\n\r\n const reachEstimationToNarrowErrorMessage = useMemo(() => {\r\n if (adGroup.data.reachEstimation === tooNarrowFlag) {\r\n return [i18n.getString(tooNarrowErrorMessage)];\r\n }\r\n return null;\r\n }, [adGroup.data.reachEstimation, i18n]);\r\n\r\n const basicSettingsExpand = useMemo(\r\n () => collapseExpander({ setActiveKeys: setAdGroupSettingsExpandedSections }),\r\n [setAdGroupSettingsExpandedSections]\r\n );\r\n\r\n const shouldHideAudiences = !isXandrVideoCampaignsAudienceTargetsEnabled && isCTVSupported;\r\n\r\n const getAdScheduleDetailsCombined = useMemo(() => {\r\n const adScheduleDetails = getAdScheduleDetails(i18n, adScheduleView && adScheduleView.current, true);\r\n\r\n return ` ${adScheduleDetails}`;\r\n }, [adScheduleView, i18n]);\r\n\r\n const NetflixEnabledCountryCodesArr = useMemo(() => NetflixEnabledCountryCodes.split(','), [NetflixEnabledCountryCodes]);\r\n const BundleCountriesCodesArr = useMemo(() => (bundleLocationCriterions && bundleLocationCriterions.map(c => c && c.Criterion && c.Criterion.LocationCriterion && c.Criterion.LocationCriterion.CountryCode)) || [], [bundleLocationCriterions]);\r\n\r\n const webExclusionsError = serverErrors && serverErrors.filter(err => err.property === 'webExclusions');\r\n\r\n const shouldShowNetflixTC = useMemo(() =>\r\n ShowNetflixTCAccepted &&\r\n isCTVSupported &&\r\n locationTargets &&\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'everywhere' ||\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'bundle'\r\n && BundleCountriesCodesArr.some(bundleCountry => NetflixEnabledCountryCodesArr.indexOf(bundleCountry) >= 0)\r\n ) ||\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'specific' &&\r\n _.some(\r\n locationTargets.currentLevelSettings.currentLocations,\r\n location => location.SelectionStatus === 'Included'\r\n && location.Criterion.LocationCriterion\r\n && NetflixEnabledCountryCodesArr.indexOf(location.Criterion.LocationCriterion.CountryCode) >= 0\r\n )\r\n )\r\n ), [ShowNetflixTCAccepted, isCTVSupported, locationTargets, NetflixEnabledCountryCodesArr, BundleCountriesCodesArr]);\r\n\r\n const isFCapEnabled = useMemo(() => (bidType === 'CpmBid'), [bidType]);\r\n\r\n const shouldSelectAllDeviceByDefault = useMemo(() => {\r\n if (campaignSubtype === CampaignSubTypes.AudienceStatic || !isXandrServingCampaign) {\r\n if (adGroup.data && _.isArray(adGroup.data.initialDeviceTypes) && adGroup.data.initialDeviceTypes.length === 0) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n }, [campaignSubtype, adGroup, isXandrServingCampaign]);\r\n\r\n const deviceTargetingPanel = useMemo(() => (\r\n }\r\n >\r\n \r\n \r\n ), [deviceTypes, deviceRestrictions, i18n, isCTVSupported, shouldSelectAllDeviceByDefault]);\r\n\r\n const audienceTargetingPanel = useMemo(() => (\r\n }\r\n >\r\n new Date())}\r\n />\r\n \r\n ), [adGroup.data.audiences, i18n, campaignSubtype, campaignSettings, campaignBiddingStrategy, XandrNegativeTarget, initialAdGroup, adGroup]);\r\n\r\n const genreTargetingPanel = useMemo(() => (\r\n }\r\n >\r\n \r\n \r\n ), [genreTargets, genreOptions, i18n]);\r\n\r\n const adScheduleTargetingPanel = useMemo(() => (\r\n }\r\n >\r\n {\r\n !dealDetails &&\r\n \r\n }\r\n \r\n ), [adGroup, adSchedules, dealDetails, setAdScheduleViewCallback, getAdScheduleDetailsCombined]);\r\n\r\n const getBasicSettingsSection = () => (\r\n \r\n
\r\n \r\n \r\n {adGroupSettingsExpandedSections.length ? i18n.getString(_TL_('Collapse all')) : i18n.getString(_TL_('Expand all'))}\r\n \r\n {reachEstimationToNarrowErrorMessage &&\r\n \r\n \r\n
\r\n }\r\n \r\n }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n >\r\n \r\n \r\n }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n actuationProps={{\r\n expand: basicSettingsExpand,\r\n expandKey: 'budget',\r\n }}\r\n >\r\n \r\n \r\n {\r\n shouldUsePredefinedFrequencyLimit ?\r\n getNetflixFrequencyCapping(i18n)\r\n :\r\n (isFCapEnabled || !(isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled)) &&\r\n \r\n }\r\n \r\n }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n >\r\n new Date()),\r\n },\r\n }}\r\n />\r\n \r\n {\r\n !(dealLocationList && dealLocationList.length === 0) && (!shouldHideDeviceListForDeal || shouldShowDealLocationTarget) &&\r\n }\r\n >\r\n 0)}\r\n scope={scope}\r\n bidStrategyType=\"placeholder\"\r\n strings={{\r\n description: i18n.getString(_TL_('For example, a country/region, state/province, or ZIP/postal code.')),\r\n }}\r\n />\r\n \r\n }\r\n {\r\n shouldShowNetflixTC &&\r\n }\r\n >\r\n \r\n \r\n }\r\n {\r\n !ageRestricted && !shouldHideAudiences &&\r\n }\r\n >\r\n \r\n \r\n }\r\n {\r\n !genderRestricted && !shouldHideAudiences &&\r\n }\r\n >\r\n \r\n \r\n }\r\n {\r\n !shouldHideAudiences && (isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled) &&\r\n : }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n >\r\n \r\n \r\n }\r\n {\r\n (((dealDetails && !(deviceRestricted && deviceTypes.length === 0) && !shouldHideDeviceListForDeal)) || shouldShowDeviceTarget) &&\r\n deviceTargetingPanel\r\n }\r\n {\r\n !audienceRestricted && !shouldHideAudiences &&\r\n (!isEnableMSANDisplayCampaignsEnabled || !isEnableMSANVideoCampaignsEnabled) &&\r\n audienceTargetingPanel\r\n }\r\n {\r\n ((!genreRestricted && isCTVSupported) || (isDealGenreRestricted)) &&\r\n (!isEnableMSANDisplayCampaignsEnabled || !isEnableMSANVideoCampaignsEnabled) &&\r\n genreTargetingPanel\r\n }\r\n {\r\n (!isEnableMSANDisplayCampaignsEnabled || !isEnableMSANVideoCampaignsEnabled) &&\r\n adScheduleTargetingPanel\r\n }\r\n {\r\n (isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled) &&\r\n }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n actuationProps={{\r\n expand: basicSettingsExpand,\r\n expandKey: 'web-exclusions',\r\n }}\r\n >\r\n \r\n {i18n.getString(_TL_('Which websites should not show your ads and which IP addresses should be blocked from seeing your ads?'))}\r\n \r\n \r\n \r\n }\r\n \r\n {\r\n (isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled) &&\r\n \r\n (\r\n <>\r\n \r\n \r\n {i18n.getString(_TL_('Targeting preferences (optional)'))}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {\r\n (((dealDetails && !(deviceRestricted && deviceTypes.length === 0) && !shouldHideDeviceListForDeal)) || shouldShowDeviceTarget) &&\r\n deviceTargetingPanel\r\n }\r\n {\r\n !audienceRestricted && !shouldHideAudiences &&\r\n audienceTargetingPanel\r\n }\r\n {\r\n !shouldHideAudiences &&\r\n }\r\n >\r\n \r\n \r\n }\r\n {\r\n !shouldHideAudiences &&\r\n }\r\n >\r\n \r\n \r\n }\r\n {\r\n !shouldHideAudiences &&\r\n }\r\n >\r\n \r\n \r\n }\r\n {\r\n ((!genreRestricted && isCTVSupported) ||\r\n (isDealGenreRestricted))\r\n &&\r\n genreTargetingPanel\r\n }\r\n {adScheduleTargetingPanel}\r\n {EnableKeywordCustomSegments &&\r\n }\r\n noOverflowHidden\r\n >\r\n \r\n \r\n }\r\n {ContentTargeting &&\r\n }\r\n >\r\n \r\n \r\n }\r\n {\r\n !shouldHideAudiences &&\r\n )\r\n : \r\n }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n >\r\n \r\n {!optimizedTargetingEnabled ?\r\n i18n.getString(_TL_('Predictive targeting is automatically enabled. You can disable it by setting a targeting preference.'))\r\n : i18n.getString(_TL_('Turning off predictive targeting significantly limits our ability to help you reach the best audience for your campaign.'))\r\n }\r\n\r\n \r\n \r\n }\r\n \r\n
\r\n {\r\n dealDetails &&\r\n \r\n }\r\n {\r\n !dealDetails &&\r\n \r\n }\r\n
\r\n \r\n
{i18n.getString(_TL_('Ad group'))}
\r\n {i18n.getString(_TL_(''))}\r\n \r\n }\r\n \r\n {/* // TODO: add error handling for \"CampaignServiceDuplicateAdGroupCriterion\" */}\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {getBasicSettingsSection()}\r\n \r\n {navigationConfirmationPrompt}\r\n {AgeGenderDisclaimer && not use individuals’ demographics—such as age, gender, location, etc.—for the purpose of personalizing advertising, segmenting, or profiling customers.'))}\r\n level=\"Info\"\r\n icon={()}\r\n dismissible={false}\r\n />}\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nStepAdGroupSettings.propTypes = {\r\n stepService: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nconst withLoadingShell = withStepLoadingShell(StepAdGroupSettings);\r\n\r\nexport { withLoadingShell as StepAdGroupSettings };\r\n","const globalLegacyI18n = window.globalLegacyI18n.get('@bingads-webui/i18n-amd-loader!campaignui/campaign-creation-advanced');\r\n\r\nconst parseLoadDate = (i18n, dateString) => globalLegacyI18n.parseDate(dateString.substring(0, 10), { raw: 'yyyy-MM-dd' });\r\n\r\nconst parseDateFromAPIFormat = (i18n, date) => {\r\n if (date == null) {\r\n return null;\r\n }\r\n\r\n if (typeof date === 'string') {\r\n return globalLegacyI18n.parseDate(date.substring(0, 10), { raw: 'M/d/yyyy' });\r\n }\r\n\r\n return date;\r\n};\r\n\r\n\r\n// keeping unused i18n in case we find bugs with replacement to globalLegacyI18n and change need to be reverted\r\nexport const formatDateToAPIFormat = (i18n, date) => {\r\n if (date == null) {\r\n return '';\r\n }\r\n\r\n if (typeof date === 'string') {\r\n return date;\r\n }\r\n\r\n return globalLegacyI18n.formatDate(date, {\r\n raw: 'M/d/yyyy',\r\n });\r\n};\r\n\r\nexport const modelToViewModelForDateSetting = ({ model, i18n }) => ({\r\n StartDate: parseLoadDate(i18n, model.StartDate),\r\n EndDate: model.EndDate ? parseLoadDate(i18n, model.EndDate) : undefined,\r\n});\r\n\r\nexport const bulkModelToViewModelForDateSetting = ({ model, i18n }) => ({\r\n StartDate: parseDateFromAPIFormat(i18n, model.StartDate),\r\n EndDate: model.EndDate ? parseDateFromAPIFormat(i18n, model.EndDate) : undefined,\r\n});\r\n\r\nexport const viewModelToBulkModelForDateSetting = ({ viewModel, i18n }) => ({\r\n StartDate: formatDateToAPIFormat(i18n, viewModel.data.StartDate),\r\n EndDate: viewModel.data.EndDate ? formatDateToAPIFormat(i18n, viewModel.data.EndDate) : '1/1/3000',\r\n});\r\n","import { each, pick, extend, defaults, omit, isString, isEmpty, has, get, find, isArray, without } from 'underscore';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport {\r\n modelToViewModelForLocationTargets,\r\n modelToViewModelForDayTimeTargets,\r\n bulkModelToViewModelForLocationTargets,\r\n bulkModelToViewModelForDayTimeTargets,\r\n modelToViewModelForAudienceCriterions,\r\n modelToViewModelForPlacements,\r\n} from './ad-group-criterions';\r\nimport { modelToViewModelForTargetCriterions } from './criterions';\r\n\r\nimport { AdGroupNegativeReferenceId } from '../common/constants';\r\nimport { modelToViewModelForDateSetting, viewModelToBulkModelForDateSetting, bulkModelToViewModelForDateSetting } from '../common/date-settings';\r\n\r\nconst whitelistedSchemaPropertyKeysForModel = [\r\n 'Id', 'Name', 'Status', 'BidStrategyName', 'Campaign', 'CpmBid', 'CpvBid', 'SearchBid',\r\n 'AdScheduleUseSearcherTimeZone', 'StartDate', 'EndDate', 'FrequencyCapSettings',\r\n 'TrackingUrlTemplate', 'FinalUrlSuffix', 'UrlCustomParameters',\r\n];\r\n\r\nconst readonlyPropertyKeysForModel = [\r\n 'StartDate',\r\n];\r\n\r\nexport const modelToViewModelForAdGroup = ({\r\n adGroupModel,\r\n campaignModel,\r\n locationCriterionsModel,\r\n campaignLocationCriterionsModel,\r\n campaignDeviceCriterions,\r\n dayTimeCriterionsModel,\r\n bundleCountries,\r\n targetCriterionsModel,\r\n audienceCriterionsModel,\r\n placementCriterionsModel,\r\n i18n,\r\n isAudienceAds = false,\r\n isAudienceAdGroupEdit = false,\r\n isDisplayAds = false,\r\n isVideoAds = false,\r\n defaultAdGroupData = null,\r\n defaultTargeting = null,\r\n isXandrServing = false,\r\n separateIMA = false,\r\n campaignExclusions,\r\n adgroupExclusions,\r\n ads,\r\n}) => {\r\n let data = pick(adGroupModel, whitelistedSchemaPropertyKeysForModel);\r\n\r\n if (isAudienceAds) {\r\n const AdRotationSettings = get(adGroupModel, 'AdRotation', {}) || {};\r\n data.AdRotation = AdRotationSettings.RotationType;\r\n }\r\n\r\n if (campaignExclusions || adgroupExclusions) {\r\n data.exclusions = {\r\n campaignExclusions,\r\n adgroupExclusions,\r\n };\r\n }\r\n\r\n if (isAudienceAds ||\r\n (!isXandrServing && isDisplayAds) ||\r\n (!isXandrServing && isVideoAds)) {\r\n if (adGroupModel.UseOptimizedTargeting != null) {\r\n data.UseOptimizedTargeting = adGroupModel.UseOptimizedTargeting;\r\n }\r\n\r\n /**\r\n * NOTE: this is where the default values from getDefaultAdGroup() - are gettting over-written by the value from the adGroupModel odata response.\r\n * MT odata response for AdGroup can have values missing or different from getDefaultAdGroup()\r\n * example: responds with a default value (0.05) for SearchBid, even when it was NOT set by the Bulk Upsert call.\r\n */\r\n\r\n data.CampaignSubType = campaignModel && campaignModel.CampaignSubType;\r\n data.CampaignBidStrategyName = campaignModel && campaignModel.BiddingScheme.Type;\r\n\r\n const adGroupSettings = get(adGroupModel, 'Settings', []);\r\n\r\n const BoostPlacementSetting = find(adGroupSettings, setting => setting['@odata.type'] === '#Model.BoostPlacementSetting') || {};\r\n\r\n data.BoostAdunitIds = BoostPlacementSetting.AdUnitIds;\r\n data.BoostPublisherIds = BoostPlacementSetting.PublisherIds;\r\n data.BoostAccountIds = BoostPlacementSetting.AccountIds;\r\n data.BoostTriggerIds = BoostPlacementSetting.TriggerIds;\r\n\r\n const adGroupTargetSettings = get(adGroupModel, 'TargetSetting', null);\r\n if (adGroupTargetSettings) {\r\n each(adGroupTargetSettings.Details, (targetSetting) => {\r\n data[`isTargetSet${targetSetting.CriterionType}`] = !targetSetting.TargetAll;\r\n });\r\n }\r\n }\r\n\r\n if (placementCriterionsModel) {\r\n data = extend(data, modelToViewModelForPlacements({ model: placementCriterionsModel }));\r\n }\r\n\r\n if (locationCriterionsModel) {\r\n data = extend(data, modelToViewModelForLocationTargets({\r\n model: locationCriterionsModel,\r\n campaignLocationModel: campaignLocationCriterionsModel,\r\n bundleCountries,\r\n adGroupId: adGroupModel.Id,\r\n campaignId: campaignModel && campaignModel.Id,\r\n bidMode: isAudienceAdGroupEdit,\r\n }));\r\n }\r\n\r\n if (dayTimeCriterionsModel) {\r\n data = extend(data, modelToViewModelForDayTimeTargets({\r\n model: dayTimeCriterionsModel,\r\n }));\r\n }\r\n\r\n if (adGroupModel.StartDate) {\r\n data = extend(data, modelToViewModelForDateSetting({\r\n model: adGroupModel,\r\n i18n,\r\n }));\r\n }\r\n\r\n if (targetCriterionsModel) {\r\n data = extend(data, modelToViewModelForTargetCriterions({\r\n model: targetCriterionsModel,\r\n campaignDeviceCriterions,\r\n }));\r\n }\r\n\r\n if ((targetCriterionsModel === null ||\r\n (targetCriterionsModel && isArray(targetCriterionsModel) && targetCriterionsModel.length === 0)) &&\r\n defaultTargeting) {\r\n data = extend(data, defaultTargeting);\r\n }\r\n\r\n if (audienceCriterionsModel) {\r\n data = extend(data, modelToViewModelForAudienceCriterions({\r\n model: audienceCriterionsModel,\r\n separateIMA,\r\n }));\r\n }\r\n\r\n if (defaultAdGroupData) {\r\n defaults(data, defaultAdGroupData);\r\n }\r\n\r\n data.ads = get(ads, 'ads', {});\r\n\r\n const adGroupViewModel = {\r\n data,\r\n isValid: true,\r\n isDirty: false,\r\n };\r\n return adGroupViewModel;\r\n};\r\n\r\nexport const bulkModelToViewModelForAdGroup = ({\r\n adGroupModel,\r\n bundleCountries,\r\n originalAdGroupViewModel,\r\n i18n,\r\n}) => {\r\n let data = pick(adGroupModel, whitelistedSchemaPropertyKeysForModel);\r\n if (data.Id && isString(data.Id)) {\r\n // eslint-disable-next-line no-param-reassign\r\n data.Id = parseInt(data.Id, 10);\r\n }\r\n data = extend(data, bulkModelToViewModelForLocationTargets({\r\n locationTargetsModel: adGroupModel.AdGroupCriterions,\r\n bundleCountries,\r\n }));\r\n data = extend(data, bulkModelToViewModelForDayTimeTargets({\r\n criterions: adGroupModel.AdGroupCriterions,\r\n }));\r\n\r\n data = extend(data, bulkModelToViewModelForDateSetting({ model: adGroupModel, i18n }));\r\n\r\n if (isEmpty(data.FrequencyCapSettings)) {\r\n data = extend(data, { FrequencyCapSettings: [{}] });\r\n }\r\n\r\n if (originalAdGroupViewModel.data.customSegments) {\r\n data = extend(data, { customSegments: originalAdGroupViewModel.data.customSegments });\r\n data = extend(data, { initialCustomSegments: originalAdGroupViewModel.data.initialCustomSegments });\r\n }\r\n\r\n if (originalAdGroupViewModel.data.deal) {\r\n data = extend(data, {\r\n deal: originalAdGroupViewModel.data.deal,\r\n });\r\n }\r\n\r\n if (has(adGroupModel, 'AdRotation')) {\r\n data = extend(data, { AdRotation: adGroupModel.AdRotation });\r\n }\r\n\r\n const adGroupViewModel = {\r\n data,\r\n isValid: true,\r\n isDirty: false,\r\n };\r\n return adGroupViewModel;\r\n};\r\n\r\nexport const viewModelToModelForAdGroup = ({ adGroupViewModel, i18n, isDisplayPlus = false }) => {\r\n let model = pick(adGroupViewModel.data, whitelistedSchemaPropertyKeysForModel);\r\n\r\n model = extend(model, viewModelToBulkModelForDateSetting({ i18n, viewModel: adGroupViewModel }));\r\n\r\n if (!adGroupViewModel.data.Id || adGroupViewModel.data.Id === AdGroupNegativeReferenceId) {\r\n model.Id = AdGroupNegativeReferenceId;\r\n\r\n if (isEmpty(model.FrequencyCapSettings) ||\r\n isEmpty(model.FrequencyCapSettings[0]) ||\r\n !model.FrequencyCapSettings[0].CapValue) {\r\n model = omit(model, 'FrequencyCapSettings');\r\n }\r\n } else if (isDisplayPlus) {\r\n const filteredReadonlyKeys = without(readonlyPropertyKeysForModel, 'StartDate');\r\n model = omit(model, filteredReadonlyKeys);\r\n } else {\r\n model = omit(model, readonlyPropertyKeysForModel);\r\n }\r\n\r\n if (has(adGroupViewModel.data, 'UseOptimizedTargeting') && adGroupViewModel.data.UseOptimizedTargeting !== null) {\r\n model.UseOptimizedTargeting = adGroupViewModel.data.UseOptimizedTargeting;\r\n }\r\n\r\n if (has(adGroupViewModel.data, 'PricingModel')) {\r\n model.PricingModel = adGroupViewModel.data.PricingModel;\r\n }\r\n\r\n if (has(adGroupViewModel.data, 'BoostAdunitIds')) {\r\n const adUnitIds = adGroupViewModel.data.BoostAdunitIds;\r\n model.BoostAdunitIds = isArray(adUnitIds) ? adUnitIds.join(';') : adUnitIds;\r\n model.BoostPublisherIds = adGroupViewModel.data.BoostPublisherIds;\r\n model.BoostAccountIds = adGroupViewModel.data.BoostAccountIds;\r\n model.BoostTriggerIds = adGroupViewModel.data.BoostTriggerIds;\r\n }\r\n\r\n if (has(adGroupViewModel.data, 'TargetSetting') && adGroupViewModel.data.TargetSetting !== null) {\r\n model.TargetSetting = adGroupViewModel.data.TargetSetting;\r\n }\r\n\r\n if (has(adGroupViewModel.data, 'AdRotation')) {\r\n model.AdRotation = adGroupViewModel.data.AdRotation;\r\n }\r\n\r\n return model;\r\n};\r\n\r\n\r\nconst readAdGroup = (cid, aid, campaignId, adGroupId) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns.$withKey(campaignId)\r\n .AdGroups.$withKey(adGroupId)\r\n .get()\r\n .toPromise();\r\n\r\nexport const loadAdGroup = (cid, aid, campaignId, adGroupId) =>\r\n readAdGroup(cid, aid, campaignId, adGroupId);\r\n","import { pick } from 'underscore';\r\nimport { AdGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { isMSANServingDNV, ScopeLevel } from '@bingads-webui-campaign-react/constants';\r\nimport exclusionRepository from '@bingads-webui-campaign-legacy/advanced-settings/util/exclusion-repository';\r\nimport { modelConstraints, ERROR_ENTITY, isBulkWrappedResponse, getBulkUploadErrorType, modelToViewModelForBulkErrors, removeReferencedEntityInvalidIdErrors } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { bulkModelToViewModelForAdGroup, viewModelToModelForAdGroup } from './ad-group';\r\nimport { viewModelToBulkModelForLocationTargets, viewModelToBulkModelForAdSchedules, viewModelToBulkModelForTargeting, viewModelToBulkModelForAudiences, viewModelToBulkModelForPlacements } from './ad-group-criterions';\r\n\r\nconst adGroupEDM = edmCampaign.types.resolve('Model.AdGroup');\r\nconst adGroupResource = new adGroupEDM.ResourceIdentifier();\r\n\r\nconst createOrUpdateAdGroup = (data) => {\r\n const createOrUpdateCall = data && data.Id ?\r\n adGroupResource.bulkUpdate.bind(adGroupResource) :\r\n adGroupResource.bulkCreate.bind(adGroupResource);\r\n return createOrUpdateCall(data);\r\n};\r\n\r\nconst GENERIC_ERROR_MESSAGE_KEY = _TL_(\"We've encountered an error and can't continue. Please contact support for further assistance.\");\r\n\r\nconst bulkUpsertAdGroupSettingsEntityErrorMap = {\r\n [getBulkUploadErrorType(AdGroup)]: ERROR_ENTITY.AdGroup,\r\n};\r\n\r\nconst parallelSave = async (modelToSave, adGroupViewModel, campaign) => {\r\n const savePromise = createOrUpdateAdGroup(modelToSave);\r\n\r\n let saveExclusionsPromise = Promise.resolve();\r\n if (adGroupViewModel && adGroupViewModel.data && adGroupViewModel.data.exclusions) {\r\n const saveExclusionsData = {\r\n CampaignId: campaign.Id,\r\n AdGroupId: adGroupViewModel.data.Id,\r\n AdvancedSettings: {\r\n ExcludedSites: adGroupViewModel.data.exclusions.adgroupExclusions.ExcludedSites,\r\n },\r\n };\r\n saveExclusionsPromise = exclusionRepository.saveExtensions(saveExclusionsData, ScopeLevel.AdGroup);\r\n }\r\n\r\n return {\r\n result: await savePromise,\r\n resultExclusion: await saveExclusionsPromise,\r\n };\r\n};\r\n\r\nexport const getErrorsPlaceholders = () => ({\r\n systemErrors: [],\r\n serverErrors: [],\r\n});\r\n\r\nexport const saveAdGroup = async ({\r\n adGroup: adGroupViewModel,\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n campaign,\r\n customTargetingBulkModel = null,\r\n isDisplayPlus = false,\r\n flow = '',\r\n}, {\r\n scenario, i18n, activityLogger, serverContext,\r\n}) => {\r\n // NOTE: adGroupViewModel.data.CampaignBidStrategyName is not set when this is called first time from create-ad step.\r\n // ensure that you have no logic relying on this or any other fields being set from campaign model onto adgroup model.\r\n\r\n const adGroupModel = viewModelToModelForAdGroup({ adGroupViewModel, i18n, isDisplayPlus });\r\n const locationTargetsModel = viewModelToBulkModelForLocationTargets({\r\n bundleLocationCriterions,\r\n adGroupViewModel,\r\n campaignViewModel: campaign,\r\n });\r\n const adSchedulesModel = viewModelToBulkModelForAdSchedules({ adGroupViewModel, campaignViewModel: campaign });\r\n let isMSANServingDNVCampaign = false;\r\n if (flow === 'VIDEO_CAMPAIGNS' && campaign.CampaignSubType === 4 && serverContext.DynamicPermissions.EnableMSANVideoCampaigns) {\r\n isMSANServingDNVCampaign = true;\r\n } else if (flow === 'DISPLAY_CAMPAIGNS' && campaign.CampaignSubType === 5 && serverContext.DynamicPermissions.EnableMSANDisplayCampaigns) {\r\n isMSANServingDNVCampaign = true;\r\n } else {\r\n isMSANServingDNVCampaign = isMSANServingDNV(campaign.CampaignSubType, campaign.CampaignSettings);\r\n }\r\n\r\n const targetingModel = customTargetingBulkModel ?\r\n customTargetingBulkModel({ adGroupViewModel, campaignViewModel: campaign }) :\r\n viewModelToBulkModelForTargeting({\r\n adGroupViewModel,\r\n campaignViewModel: campaign,\r\n isXandrDeviceTargetEnabled: serverContext.DynamicPermissions.XandrDeviceTarget,\r\n isBoostEnabled: serverContext.Permissions.IsAmplifyEnabled,\r\n isDeviceTargetingForDisplayEnabled: serverContext.DynamicPermissions.DeviceTargetingForDisplay,\r\n isMultiAdFormatEnabled: serverContext.DynamicPermissions.MultiAdFormat,\r\n isPremiumStreamingEnabled: serverContext.DynamicPermissions.PremiumStreaming,\r\n isXandrServing: !isMSANServingDNVCampaign,\r\n });\r\n const audienceCriterionsModel = viewModelToBulkModelForAudiences({ adGroupViewModel, campaignViewModel: campaign });\r\n\r\n const placementCriterionsModel = viewModelToBulkModelForPlacements({ adGroupViewModel, campaignViewModel: campaign });\r\n\r\n const modelToSave = {\r\n ...adGroupModel,\r\n AdGroupCriterions: [\r\n ...locationTargetsModel,\r\n ...adSchedulesModel,\r\n ...targetingModel,\r\n ...placementCriterionsModel,\r\n ],\r\n AdGroupAudienceCriterions: audienceCriterionsModel,\r\n Campaign: pick(campaign, 'Id'),\r\n };\r\n\r\n try {\r\n const saveResult = await parallelSave(modelToSave, adGroupViewModel, campaign);\r\n\r\n const data = {\r\n adGroup: bulkModelToViewModelForAdGroup({\r\n adGroupModel: saveResult.result,\r\n originalAdGroupViewModel: adGroupViewModel,\r\n bundleCountries,\r\n i18n,\r\n }),\r\n ...getErrorsPlaceholders(),\r\n };\r\n return data;\r\n } catch (bulkOrSystemError) {\r\n if (isBulkWrappedResponse(bulkOrSystemError)) {\r\n const { entity, errors } = bulkOrSystemError;\r\n const adGroup = entity ?\r\n bulkModelToViewModelForAdGroup({\r\n adGroupModel: entity,\r\n originalAdGroupViewModel: adGroupViewModel,\r\n bundleCountries,\r\n errors,\r\n i18n,\r\n }) :\r\n adGroupViewModel;\r\n\r\n if (adGroupViewModel.data.deal) {\r\n adGroup.data = await modelConstraints(adGroupViewModel.data.deal, adGroupViewModel.data, serverContext);\r\n }\r\n\r\n let filteredErrors = errors;\r\n if (adGroup.data.Id <= 0) {\r\n filteredErrors = removeReferencedEntityInvalidIdErrors(errors);\r\n }\r\n\r\n const serverErrors = modelToViewModelForBulkErrors(\r\n filteredErrors,\r\n bulkUpsertAdGroupSettingsEntityErrorMap,\r\n scenario,\r\n i18n,\r\n activityLogger\r\n );\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n adGroup,\r\n serverErrors,\r\n });\r\n }\r\n\r\n if (bulkOrSystemError && bulkOrSystemError.NegativeSitesResult) {\r\n const { NegativeSitesResult } = bulkOrSystemError;\r\n const serverErrors = [{\r\n property: 'webExclusions',\r\n NegativeSitesResult: NegativeSitesResult.EntityErrors,\r\n }];\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n adGroup: adGroupViewModel,\r\n serverErrors,\r\n });\r\n }\r\n\r\n // Activity\r\n // eslint-disable-next-line no-console\r\n console.warn(`AdGroup bulk upsert system error: ${bulkOrSystemError.stack || bulkOrSystemError.message || bulkOrSystemError}`);\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n\r\n return {\r\n adGroup: adGroupViewModel,\r\n systemErrors: [i18n.getString(GENERIC_ERROR_MESSAGE_KEY)],\r\n // TODO: We would want to return the criterions with Ids, but UI's bulk drops them\r\n };\r\n }\r\n};\r\n\r\nexport const saveJustAdGroup = async ({\r\n adGroup: adGroupViewModel,\r\n campaign,\r\n}, {\r\n i18n,\r\n}) => {\r\n const adGroupModel = viewModelToModelForAdGroup({ adGroupViewModel, i18n });\r\n\r\n const modelToSave = {\r\n ...adGroupModel,\r\n Campaign: pick(campaign, 'Id'),\r\n };\r\n\r\n try {\r\n const result = await createOrUpdateAdGroup(modelToSave);\r\n const data = {\r\n adGroup: bulkModelToViewModelForAdGroup({\r\n adGroupModel: result,\r\n originalAdGroupViewModel: adGroupViewModel,\r\n i18n,\r\n }),\r\n ...getErrorsPlaceholders(),\r\n };\r\n return data;\r\n } catch (bulkOrSystemError) {\r\n if (isBulkWrappedResponse(bulkOrSystemError)) {\r\n const { errors } = bulkOrSystemError;\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n errors,\r\n });\r\n }\r\n\r\n // Activity\r\n // eslint-disable-next-line no-console\r\n console.warn(`AdGroup bulk upsert system error: ${bulkOrSystemError.stack || bulkOrSystemError.message || bulkOrSystemError}`);\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n\r\n return {\r\n adGroup: adGroupViewModel,\r\n systemErrors: [i18n.getString(GENERIC_ERROR_MESSAGE_KEY)],\r\n // TODO: We would want to return the criterions with Ids, but UI's bulk drops them\r\n };\r\n }\r\n};\r\n","import _ from 'underscore';\r\nimport {\r\n shouldSelectBundleOption,\r\n parseLocationTargets,\r\n convertLocationStateToLocationSchemaCampaign,\r\n} from '@bingads-webui-campaign/hotel-common-targets';\r\nimport { locationTargetsOptionKeys } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { CRITERION_LEVEL, bulkModelToViewModelForLocationTargetsBase } from './criterions';\r\nimport { getTargetCriterion } from './ad-group-criterions';\r\nimport { AddedDeviceBidAdjustment as DefaultDeviceBidAdjustment, RemovedDeviceBidAdjustment } from '../common/constants';\r\nimport { DeviceKeys } from '../steps/ad-group/target/device';\r\n\r\nexport const viewModelToBulkModelForDealTargets = model => ({\r\n CriterionType: 'DealCriterion',\r\n CampaignName: model.data.Name,\r\n Criterion: {\r\n Type: 'DealCriterion',\r\n DealCriterion: {\r\n DealId: _.get(model, ['data', 'deal', 'Id']),\r\n },\r\n },\r\n});\r\n\r\nexport const modelToViewModelForLocationTargets = ({\r\n model, bundleCountries, campaignId, overrideOriginalBidAdjustment = false,\r\n}) => {\r\n const {\r\n locations,\r\n intentId,\r\n intentOption,\r\n } = parseLocationTargets(model, 'campaign', campaignId);\r\n let targetOption = locations.length ? locationTargetsOptionKeys.specific : locationTargetsOptionKeys.everywhere;\r\n targetOption = shouldSelectBundleOption(bundleCountries, locations) ? locationTargetsOptionKeys.bundleOrDefaultMarket : targetOption;\r\n\r\n if (overrideOriginalBidAdjustment) {\r\n locations.forEach((location) => {\r\n // eslint-disable-next-line no-param-reassign\r\n location.Criterion.OriginalBidAdjustment = null;\r\n });\r\n }\r\n\r\n return {\r\n locationTargets: {\r\n currentLevelSettings: {\r\n initLocations: locations,\r\n currentLocations: locations,\r\n targetOption,\r\n intentId,\r\n ...intentOption,\r\n },\r\n bidMode: false,\r\n useParentLevel: false,\r\n },\r\n };\r\n};\r\n\r\nexport const viewModelToBulkModelForLocationTargets = ({ bundleLocationCriterions, campaignViewModel }) => {\r\n if (!campaignViewModel.data.locationTargets || campaignViewModel.data.locationRestricted) {\r\n return [];\r\n }\r\n const bulkUpsertModel = convertLocationStateToLocationSchemaCampaign(\r\n campaignViewModel.data.locationTargets,\r\n bundleLocationCriterions,\r\n {\r\n bidStrategy: { option: 'placeholder' },\r\n ...campaignViewModel.data,\r\n name: {\r\n value: campaignViewModel.data.Name,\r\n },\r\n }\r\n );\r\n return bulkUpsertModel;\r\n};\r\n\r\nexport const bulkModelToViewModelForLocationTargets = ({\r\n locationTargetsModel, bundleCountries,\r\n}) => bulkModelToViewModelForLocationTargetsBase({\r\n locationTargetsModel, bundleCountries, level: CRITERION_LEVEL.CAMPAIGN,\r\n});\r\n\r\nexport const viewModelToBulkModelForDeviceTargets = ({ campaignViewModel }) => {\r\n const deviceTargets = campaignViewModel.data.campaignLevelDeviceTargets || [];\r\n const initialDeviceTargets = campaignViewModel.data.initialCampaignLevelDeviceTargets || [];\r\n const campaignDeviceTypesWithBidAdjustment = campaignViewModel.data.campaignDeviceTypesWithBidAdjustment || [];\r\n const supportedDevices = [DeviceKeys.Computers, DeviceKeys.Tablets, DeviceKeys.Smartphones];\r\n\r\n const isBidAdjustmentSame = initialTarget => campaignDeviceTypesWithBidAdjustment.find(targetWithBid =>\r\n targetWithBid.Criterion.DeviceCriterion.DeviceName === initialTarget.target && targetWithBid.Criterion.BidAdjustment === initialTarget.bidAdjustment);\r\n const isTargetChanged = target => initialDeviceTargets.find(initialTarget => initialTarget.criterion === target && isBidAdjustmentSame(initialTarget)) === undefined;\r\n\r\n const addedDevices = deviceTargets.filter(isTargetChanged).map((target) => {\r\n const deviceTargetWithBid = campaignDeviceTypesWithBidAdjustment.find(deviceWithBid => deviceWithBid.Criterion.DeviceCriterion.DeviceName === target) || {};\r\n const initialDeviceTarget = initialDeviceTargets.find(initialTarget => initialTarget.criterion === target) || {};\r\n const { Id } = initialDeviceTarget || deviceTargetWithBid;\r\n const bid = _.get(deviceTargetWithBid, 'Criterion.BidAdjustment', initialDeviceTarget.bidAdjustment || DefaultDeviceBidAdjustment);\r\n\r\n return {\r\n Id,\r\n criterion: {\r\n Target: target,\r\n BidAdjustment: bid,\r\n },\r\n };\r\n });\r\n\r\n const toRemoveDevices = initialDeviceTargets.length === 0 && deviceTargets.length === 0 ? [] : _.difference(supportedDevices, deviceTargets); // don't remove devices if no change\r\n const isTargetInitiallyRemoved = target => initialDeviceTargets.find(initialTarget =>\r\n initialTarget.criterion === target && initialTarget.bidAdjustment === RemovedDeviceBidAdjustment);\r\n\r\n const removedDevices = toRemoveDevices.filter(target => !isTargetInitiallyRemoved(target)).map((target) => {\r\n const { Id } = initialDeviceTargets.find(initialTarget => initialTarget.criterion === target) || {};\r\n\r\n return {\r\n Id,\r\n criterion: {\r\n Target: target,\r\n BidAdjustment: RemovedDeviceBidAdjustment,\r\n },\r\n };\r\n });\r\n\r\n const defaultBidAdjustment = campaignDeviceTypesWithBidAdjustment ? undefined : DefaultDeviceBidAdjustment;\r\n\r\n const addedDeviceCriterion = getTargetCriterion({\r\n targets: addedDevices, type: 'Device', propKey: 'DeviceName', adGroupViewModel: null, campaignViewModel, bidAdjustment: defaultBidAdjustment, level: 'campaign',\r\n });\r\n\r\n const removedDeviceCriterion = getTargetCriterion({\r\n targets: removedDevices, type: 'Device', propKey: 'DeviceName', adGroupViewModel: null, campaignViewModel, bidAdjustment: RemovedDeviceBidAdjustment, level: 'campaign',\r\n });\r\n\r\n\r\n return [\r\n ...addedDeviceCriterion,\r\n ...removedDeviceCriterion,\r\n ];\r\n};\r\n","import { pick, isString, extend, get, isArray, filter } from 'underscore';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { getDealDetails, fillLocationForDeal } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { CampaignSubTypeMapping, CampaignSubTypeTextMapping } from '@bingads-webui-campaign-react/constants';\r\nimport { getVerifiedTrackingSettingsRead } from '@bingads-webui-campaign-react/third-party-measurement';\r\nimport { modelToViewModelForConversionGoals, bulkModelToViewModelForConversionGoals } from '@bingads-webui-campaign-react/perf-max-step-wizard';\r\nimport { modelToViewModelForDayTimeTargets } from './ad-group-criterions';\r\nimport { modelToViewModelForLocationTargets, bulkModelToViewModelForLocationTargets } from './campaign-criterions';\r\nimport { modelToViewModelForCallToActionSettings } from './call-to-action-settings';\r\nimport { RemovedDeviceBidAdjustment } from '../common/constants';\r\nimport { modelToViewModelForDateSetting, viewModelToBulkModelForDateSetting, bulkModelToViewModelForDateSetting } from '../common/date-settings';\r\n\r\nconst whitelistedSchemaPropertyKeysForModel = [\r\n 'Budget', 'Id', 'Name', 'Status', 'TimeZone', 'BidStrategyName', 'BudgetId',\r\n 'AdScheduleUseSearcherTimeZone',\r\n 'DeliveryStatus', 'DeliveryStatusDetails', 'CampaignType', 'CampaignSubType',\r\n 'StartDate', 'EndDate',\r\n 'UseCampaignLevelDates',\r\n 'IsBidLandscapeAvailable',\r\n 'BiddingScheme',\r\n 'CampaignSettings', 'DisplayBiddingStrategyType',\r\n 'DisplayBiddingStrategyMaxCpc', 'DisplayBiddingStrategyTargetCpa', 'Languages',\r\n 'BaseCampaignName',\r\n 'VerifiedTrackingData',\r\n 'CampaignObjectiveSetting',\r\n 'TrackingUrlTemplate', 'FinalUrlSuffix', 'UrlCustomParameters', 'DisclaimerAdsEnabled',\r\n];\r\n\r\nexport const viewModelToModelForCampaign = (campaignViewModel) => {\r\n let data = {\r\n ...pick(campaignViewModel.data, whitelistedSchemaPropertyKeysForModel),\r\n CampaignSubType: CampaignSubTypeTextMapping[campaignViewModel.data.CampaignSubType],\r\n };\r\n\r\n data = extend(data, viewModelToBulkModelForDateSetting({ i18n: null, viewModel: campaignViewModel }));\r\n\r\n if (campaignViewModel.data && campaignViewModel.data.Status === 'UserPaused') {\r\n data.Status = 'Paused'; // if we send back userpaused mt treats it as active, we explicitly need to send paused\r\n }\r\n\r\n return data;\r\n};\r\n\r\nexport const bulkModelToViewModelForCampaign = ({\r\n campaignModel,\r\n originalCampaignModel,\r\n bundleCountries,\r\n}) => {\r\n let data = {\r\n ...pick(campaignModel, whitelistedSchemaPropertyKeysForModel),\r\n CampaignSubType: CampaignSubTypeMapping[campaignModel.CampaignSubType],\r\n };\r\n\r\n data = extend(data, {\r\n deal: get(originalCampaignModel, ['data', 'deal']),\r\n });\r\n if (data.Id && isString(data.Id)) {\r\n // eslint-disable-next-line no-param-reassign\r\n data.Id = parseInt(data.Id, 10);\r\n }\r\n\r\n if (data.CampaignType === 'Audience') {\r\n data = extend(data, bulkModelToViewModelForConversionGoals({\r\n campaignModel,\r\n originalCampaignViewModel: originalCampaignModel,\r\n }));\r\n }\r\n\r\n if (data.StartDate) {\r\n data = extend(data, bulkModelToViewModelForDateSetting({\r\n model: campaignModel,\r\n i18n: null,\r\n }));\r\n }\r\n\r\n if (campaignModel && campaignModel.CampaignCriterions && isArray(campaignModel.CampaignCriterions)) {\r\n data = extend(data, bulkModelToViewModelForLocationTargets({\r\n locationTargetsModel: campaignModel.CampaignCriterions,\r\n bundleCountries,\r\n }));\r\n }\r\n\r\n const campaignViewModel = {\r\n data,\r\n isValid: true,\r\n isDirty: false,\r\n };\r\n\r\n return campaignViewModel;\r\n};\r\n\r\nconst readCampaign = (cid, aid, campaignId) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns.$withKey(campaignId)\r\n .get({\r\n select: ['Budget', 'CampaignConversionGoal/Goals'],\r\n })\r\n .toPromise();\r\n\r\nexport const loadCampaign = (cid, aid, campaignId) =>\r\n readCampaign(cid, aid, campaignId);\r\n\r\nexport const modelToViewModelForCampaign = ({\r\n campaignModel,\r\n dealDetails,\r\n dayTimeCriterionsModel = [],\r\n locationCriterionsModel,\r\n campaignDeviceCriterions,\r\n bundleCountries,\r\n isAudienceMMACTAOptOutEnabled = false,\r\n isAudienceMMACTADefaultOptOutEnabled = false,\r\n exclusions,\r\n}) => {\r\n let data = {\r\n ...pick(campaignModel, [...whitelistedSchemaPropertyKeysForModel, 'ImportProperties']),\r\n CampaignSubType: CampaignSubTypeMapping[campaignModel.CampaignSubType],\r\n };\r\n\r\n if (dealDetails) {\r\n data = extend(data, { deal: dealDetails });\r\n }\r\n\r\n if (exclusions) {\r\n data = extend(data, { exclusions });\r\n }\r\n\r\n if (data.CampaignType === 'Audience') {\r\n const audienceSettings = filter(\r\n get(data, ['CampaignSettings'], []),\r\n setting => setting['@odata.type'] === '#Model.AudienceSettings'\r\n );\r\n const audienceSetting = get(audienceSettings, [0], {});\r\n data = extend(data, getVerifiedTrackingSettingsRead(audienceSetting));\r\n }\r\n\r\n // adding conversion goals for display ads, video ads and native ads\r\n if (data.CampaignType === 'Audience' &&\r\n (data.CampaignSubType === CampaignSubTypeMapping.AudienceStatic ||\r\n data.CampaignSubType === CampaignSubTypeMapping.DisplayAds ||\r\n data.CampaignSubType === CampaignSubTypeMapping.BrandAwarenessVideoAds\r\n )) {\r\n data = extend(data, modelToViewModelForConversionGoals(campaignModel));\r\n }\r\n\r\n if (data.CampaignType === 'Audience' && data.CampaignSubType === CampaignSubTypeMapping.AudienceStatic) {\r\n data = extend(data, modelToViewModelForDayTimeTargets({ model: dayTimeCriterionsModel }));\r\n\r\n if (isAudienceMMACTAOptOutEnabled) {\r\n data = extend(data, modelToViewModelForCallToActionSettings(campaignModel, isAudienceMMACTADefaultOptOutEnabled));\r\n }\r\n }\r\n\r\n if (locationCriterionsModel) {\r\n data = extend(data, modelToViewModelForLocationTargets({\r\n model: locationCriterionsModel,\r\n bundleCountries,\r\n campaignId: campaignModel.Id,\r\n }));\r\n }\r\n\r\n if (campaignModel.StartDate) {\r\n data = extend(data, modelToViewModelForDateSetting({\r\n model: campaignModel,\r\n i18n: null,\r\n }));\r\n }\r\n\r\n if (campaignDeviceCriterions) {\r\n const initialCampaignLevelDeviceTargets = campaignDeviceCriterions.filter(criterion => criterion.Criterion.Type === 'Device')\r\n .map(criterion => ({\r\n Id: criterion.Id,\r\n criterion: criterion.Criterion.DeviceName,\r\n bidAdjustment: criterion.CriterionBid.Multiplier,\r\n }));\r\n\r\n const campaignLevelDeviceTargets = initialCampaignLevelDeviceTargets\r\n .filter(device => device.bidAdjustment !== RemovedDeviceBidAdjustment && device.bidAdjustment !== undefined)\r\n .map(criterion => criterion.criterion);\r\n\r\n data = extend(data, {\r\n initialCampaignLevelDeviceTargets,\r\n campaignLevelDeviceTargets,\r\n });\r\n }\r\n\r\n const campaignViewModel = {\r\n data,\r\n isValid: true,\r\n isDirty: false,\r\n };\r\n return campaignViewModel;\r\n};\r\n\r\nexport {\r\n getDealDetails,\r\n fillLocationForDeal,\r\n};\r\n","import _ from 'underscore';\r\n\r\nexport const modelToViewModelForCallToActionSettings = (model, isAudienceMMACTADefaultOptOutEnabled) => {\r\n const isOptOut = _.result(_.find(\r\n _.get(model, 'CampaignSettings', []),\r\n setting => setting['@odata.type'] === '#Model.CallToActionSetting'\r\n ), 'CallToActionOptOut', !!isAudienceMMACTADefaultOptOutEnabled);\r\n\r\n return {\r\n IsCallToActionOptOut: isOptOut,\r\n };\r\n};\r\n","import { isEmpty, result, extend } from 'underscore';\r\nimport { assign } from 'xstate';\r\nimport Promise from 'bluebird';\r\nimport { stepStateMachine } from '@bingads-webui-campaign-react/step-wizard-machine';\r\n// import { modelConstraints } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { modelConstraints, getConvertedCurrencyDealMinimumBid, getAccountExchangeRateFromLocalStorage } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { isXandrDisplayAdsCampaign, isXandrVideoAdsCampaign, isXandrServing, ScopeLevel } from '@bingads-webui-campaign-react/constants';\r\nimport exclusionRepository from '@bingads-webui-campaign-legacy/advanced-settings/util/exclusion-repository';\r\n\r\nimport { loadBundleCountries, readLocationCriterions, readDayTimeCriterions, readTargetingCriterions, readAudienceCriterions, readPlacementCriterions } from '../../model/ad-group-criterions';\r\nimport { STEP_PATHS, getInitialAdGroupViewModel, AdGroupNegativeReferenceId } from '../../common/constants';\r\nimport { StepAdGroupSettings } from './step-ad-group-settings';\r\nimport { DeviceKeys, Devices } from './target/device';\r\nimport { saveAdGroup, getErrorsPlaceholders } from '../../model/ad-group-bulk';\r\nimport { viewModelToModelForCampaign, getDealDetails } from '../../model/campaign';\r\nimport { viewModelToModelForAdGroup, loadAdGroup, modelToViewModelForAdGroup } from '../../model/ad-group';\r\n\r\nconst needsLoading = () => true;\r\nconst hasCampaignData = context =>\r\n Boolean(result(context, ['stepsData', 'campaign', 'Id']));\r\n\r\nconst getCampaignId = context => result(context, ['data', 'campaign', 'data', 'Id']) || result(context, ['stepsData', 'campaign', 'Id']) || result(context, ['stepsData', 'currentCampaign', 'Id']);\r\nconst getAdGoupId = context => result(context, ['data', 'adGroup', 'data', 'Id']) || result(context, ['stepsData', 'adGroupId']);\r\nconst getBiddingScheme = context => result(context, ['stepsData', 'currentCampaign', 'BiddingScheme', 'Type']) || result(context, ['stepsData', 'campaign', 'BiddingScheme', 'Type']);\r\nconst getCampaignSubType = context => result(context, ['stepsData', 'currentCampaign', 'CampaignSubType']) || result(context, ['stepsData', 'campaign', 'CampaignSubType']);\r\n\r\nconst getInitDeviceTypes = (context, permissions) => {\r\n const campaignSubType = getCampaignSubType(context);\r\n const biddingScheme = getBiddingScheme(context);\r\n const isDisplayAds = isXandrDisplayAdsCampaign(campaignSubType);\r\n const isVideoAds = isXandrVideoAdsCampaign(campaignSubType);\r\n\r\n if (isDisplayAds) {\r\n return [DeviceKeys.Computers, DeviceKeys.Tablets, DeviceKeys.Smartphones];\r\n }\r\n\r\n if (isVideoAds && permissions.dynamic.XandrDeviceTarget) {\r\n return biddingScheme === 'ManualCpm' ? [DeviceKeys.Computers, DeviceKeys.Tablets, DeviceKeys.Smartphones] : [DeviceKeys.ConnectedTVs];\r\n }\r\n\r\n return Object.keys(Devices);\r\n};\r\n\r\n/**\r\n * Loads step data asynchronously. The returned promise must resolve\r\n * into a single object, opaque to the step, which will be saved\r\n * in the context under the `data` property.\r\n *\r\n * The function is called when the wizard enters the step.\r\n * The step will be blocked until the promise resolves.\r\n * @param {Object} context - the current context\r\n * @returns {Promise