\r\n \r\n
\r\n }\r\n \r\n \r\n onSelectShowAll(!seeLess)}\r\n onKeyDown={() => onSelectShowAll(!seeLess)}\r\n aria-label={text}\r\n >\r\n { !seeLess &&\r\n
\r\n );\r\n}\r\n\r\nImageExtensionItemSeeMoreLess.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onSelectShowAll: PropTypes.func.isRequired,\r\n seeMoreItemsCount: PropTypes.number.isRequired,\r\n seeLess: PropTypes.bool,\r\n};\r\n\r\nImageExtensionItemSeeMoreLess.defaultProps = {\r\n seeLess: false,\r\n};\r\n","import React, { useEffect, useState, useRef, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { List, FocusZone } from '@bingads-webui-react/fabric-control';\r\nimport { ImageExtensionItemPreview } from './image-extension-item-preview';\r\nimport { ImageExtensionItemSeeMoreLess } from './image-extension-item-see-more-less';\r\nimport { getImageExtensionListStyles, ITEM_MARGIN } from '../styles/image-extensions-list-style';\r\nimport { IMAGE_WIDTH_PX, IMAGE_HEIGHT_PX } from './utils/parser';\r\n\r\nexport const ImageExtensionsList = ({\r\n i18n,\r\n items,\r\n className,\r\n onDelete,\r\n onSelect,\r\n onEditImage,\r\n enableEdit,\r\n}) => {\r\n const classes = useDefaultStyles(getImageExtensionListStyles, {\r\n cellWidth: IMAGE_WIDTH_PX,\r\n cellHeight: IMAGE_HEIGHT_PX,\r\n });\r\n const [imageContainerWidth, setImageContainerWidth] = useState(0);\r\n const imageContainerNode = useRef(null);\r\n const [showAll, setShowAll] = useState(false);\r\n const itemsSize = _.size(items);\r\n const initialItemCount = Math.floor((imageContainerWidth + ITEM_MARGIN)\r\n / (IMAGE_WIDTH_PX + ITEM_MARGIN)) * 2;\r\n const hasSeeMoreLess = itemsSize > initialItemCount;\r\n\r\n useEffect(() => {\r\n const handleResize = () => {\r\n if (imageContainerNode.current) {\r\n setImageContainerWidth(imageContainerNode.current.offsetWidth);\r\n }\r\n };\r\n\r\n window.addEventListener('resize', handleResize);\r\n\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }, []);\r\n\r\n const measuredRef = useCallback((node) => {\r\n if (node) {\r\n imageContainerNode.current = node;\r\n setImageContainerWidth(imageContainerNode.current.offsetWidth);\r\n }\r\n }, []);\r\n\r\n const CELL_TYPE = {\r\n MORE: 'more',\r\n LESS: 'less',\r\n EXTENSION: 'extension',\r\n };\r\n\r\n const getCellType = (index) => {\r\n const isSeeMoreItem = !showAll && index === initialItemCount - 1 && hasSeeMoreLess;\r\n const isSeeLessItem = showAll && index === itemsSize && hasSeeMoreLess;\r\n\r\n if (isSeeMoreItem) {\r\n return CELL_TYPE.MORE;\r\n } else if (isSeeLessItem) {\r\n return CELL_TYPE.LESS;\r\n }\r\n return CELL_TYPE.EXTENSION;\r\n };\r\n\r\n const onRenderCell = (item, index) => {\r\n const cellType = getCellType(index);\r\n switch (cellType) {\r\n case CELL_TYPE.MORE:\r\n return (\r\n
\r\n }\r\n {text}
\r\n \r\n \r\n \r\n initialItemCount}\r\n role=\"listbox\"\r\n aria-label={i18n.getString(_TL_('Image extensions'))}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nImageExtensionsList.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({})),\r\n onSelect: PropTypes.func,\r\n onDelete: PropTypes.func,\r\n onEditImage: PropTypes.func.isRequired,\r\n enableEdit: PropTypes.bool,\r\n className: PropTypes.string,\r\n};\r\n\r\nImageExtensionsList.defaultProps = {\r\n items: [],\r\n onSelect: null,\r\n onDelete: null,\r\n className: '',\r\n enableEdit: false,\r\n};\r\n","import { customizedUIBlockerStyle } from './customize-ui-blocker-style';\r\n\r\nexport const getDialogImageExtensionStyle = (components, { palette }) => (\r\n {\r\n labelContainer: {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n },\r\n description: {\r\n paddingBottom: 5,\r\n },\r\n container: {\r\n ...components.reactUIBlockerStyle(palette),\r\n ...customizedUIBlockerStyle,\r\n },\r\n }\r\n);\r\n","import _ from 'underscore';\r\n\r\nexport const DefaultImageAltText = 'Image';\r\n\r\nexport const FieldType = {\r\n DisplayText: 'DisplayText',\r\n AltText: 'AltText',\r\n};\r\n\r\nexport const FieldLimit = {\r\n DisplayText: 35,\r\n AltText: 90,\r\n};\r\n\r\nconst requiredValidateFunc = val => _.size(val) > 0 && val.trim() !== '';\r\n\r\nexport const fieldsConfig = [\r\n {\r\n type: FieldType.DisplayText,\r\n limit: FieldLimit.DisplayText,\r\n labelKeyForLocalization: _TL_('Name/Display Text'),\r\n helpTopic: 'pop_BA_ImageExtension_Name',\r\n description: _TL_('Display text appears to customers as a caption below images in the multi-image layout.'),\r\n },\r\n {\r\n type: FieldType.AltText,\r\n limit: FieldLimit.AltText,\r\n labelKeyForLocalization: _TL_('Image Alt Text (required)'),\r\n helpTopic: 'pop_BA_NewAdCreate_AltText',\r\n description: _TL_('Alt text appears when customers hover over the image on search results pages.'),\r\n required: true,\r\n validators: [\r\n {\r\n validate: requiredValidateFunc,\r\n msg: _TL_('Image Alt Text is required.'),\r\n },\r\n ],\r\n },\r\n];\r\n\r\nconst runValidators = (value, validators) => {\r\n for (let i = 0; i < _.size(validators); i += 1) {\r\n const { validate, msg } = validators[i];\r\n if (!validate(value)) {\r\n return msg;\r\n }\r\n }\r\n\r\n return '';\r\n};\r\n\r\nexport const validateAllFields = (fieldValues, callback) => {\r\n const errors = {};\r\n _.each(fieldsConfig, ({ validators, type }) => {\r\n const msg = runValidators(fieldValues[type], validators);\r\n\r\n if (msg) {\r\n errors[type] = msg;\r\n }\r\n });\r\n\r\n callback(errors);\r\n\r\n return errors;\r\n};\r\n\r\nexport const validateField = (fieldType, fieldValue, callback) => {\r\n const errors = {};\r\n const fieldConfig = _.find(fieldsConfig, field => field.type === fieldType);\r\n const msg = runValidators(fieldValue, fieldConfig.validators);\r\n\r\n if (msg) {\r\n errors[fieldConfig.type] = msg;\r\n }\r\n\r\n callback(errors);\r\n\r\n return errors;\r\n};\r\n","import React, { useCallback, useState, useMemo, useEffect, Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport Promise from 'bluebird';\r\nimport {\r\n Dialog, DialogFooter,\r\n PrimaryButton, DefaultButton,\r\n TextField,\r\n Stack,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { getDialogImageExtensionStyle } from '../styles/image-extension-dialog-style';\r\nimport {\r\n fieldsConfig,\r\n validateAllFields,\r\n validateField,\r\n FieldType,\r\n FieldLimit,\r\n DefaultImageAltText,\r\n} from './image-extension-fields-config';\r\n\r\nexport const CreateImageExtensionDialog = ({\r\n i18n,\r\n createImageExtension,\r\n selectedImage,\r\n onCreateSuccess,\r\n onCancel,\r\n adCreatorScenario,\r\n permissions,\r\n}) => {\r\n const isImageAltTextPrefillEnabled = _.result(permissions, ['dynamic', 'ImageAltTextPrefill'], false);\r\n\r\n const dialogContentProps = { title: i18n.getString(_TL_('New image extension')) };\r\n const classes = useDefaultStyles(getDialogImageExtensionStyle);\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [fieldValues, setFieldValues] = useState({});\r\n const [fieldErrors, setFieldErrors] = useState({});\r\n\r\n const [disableCreate, setDisableCreate] = useState(false);\r\n\r\n const logActivity = useMemo(() => {\r\n if (adCreatorScenario && adCreatorScenario.createActivity) {\r\n return adCreatorScenario.createActivity('New image to extension');\r\n }\r\n return null;\r\n }, [adCreatorScenario]);\r\n\r\n const logTrace = useCallback((...args) => {\r\n if (logActivity) {\r\n logActivity.trace(...args);\r\n }\r\n }, [logActivity]);\r\n\r\n const onCreateButtonClicked = useCallback(() => {\r\n const errors = validateAllFields(fieldValues, setFieldErrors);\r\n\r\n if (_.isEmpty(errors)) {\r\n setLoading(true);\r\n // After a design change, createImageExtension is sync. Keep promise to support both modes\r\n Promise.resolve(createImageExtension(fieldValues, selectedImage))\r\n .finally(() => {\r\n setLoading(false);\r\n })\r\n .then(() => {\r\n logTrace('New image extension dialog - Save button clicked');\r\n onCreateSuccess();\r\n });\r\n } else {\r\n logTrace(`New image extension dialog - failed to save, errors: ${JSON.stringify(errors)}`);\r\n setDisableCreate(true);\r\n }\r\n });\r\n\r\n const onFieldChangeFactory = (type, limit) => (e, newValue) => {\r\n if (_.size(newValue) <= limit) {\r\n setFieldValues({\r\n ...fieldValues,\r\n [type]: newValue,\r\n });\r\n }\r\n const errors = validateField(type, newValue, setFieldErrors);\r\n if (_.isEmpty(errors)) {\r\n setDisableCreate(false);\r\n }\r\n };\r\n\r\n const onCancelClick = useCallback(() => {\r\n logTrace('New image extension dialog - Cancel button clicked');\r\n onCancel();\r\n }, [logTrace, onCancel]);\r\n\r\n const onDismiss = useCallback(() => {\r\n logTrace('New image extension dialog - Dialog dismissed');\r\n onCancel();\r\n }, [logTrace, onCancel]);\r\n\r\n useEffect(() => {\r\n logTrace('New image extension dialog - Dialog is shown');\r\n }, [logTrace]);\r\n\r\n useEffect(() => {\r\n if (isImageAltTextPrefillEnabled) {\r\n let prefillAltText = DefaultImageAltText;\r\n const imageName = _.result(selectedImage, ['0', 'text'], null);\r\n if (imageName && _.isString(imageName) && _.size(imageName.trim()) > 0 && _.size(imageName.trim()) <= FieldLimit.AltText) {\r\n prefillAltText = imageName.trim();\r\n }\r\n\r\n setFieldValues({\r\n ...fieldValues,\r\n [FieldType.AltText]: prefillAltText,\r\n });\r\n validateField(FieldType.AltText, prefillAltText, setFieldErrors);\r\n }\r\n // Only prefill image alt text in the beginning\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n return (\r\n \r\n {originalRenderer(props)}\r\n
\r\n {description &&\r\n \r\n {i18n.getString(description)}\r\n
\r\n }\r\n {i18n.getString(_TL_('Deleting this image extension will remove it from all ads in this ad group that use it but will not delete it from your image extension library. Are you sure you want to remove this image extension from your ad?'))}
\r\n \r\n
\r\n ), [classes.backButton, classes.panelHeader, classes.panelTitle, i18n, onClickCancel, title]);\r\n\r\n const onRenderFooterContent = useCallback(() => (\r\n \r\n
\r\n \r\n {i18n.getString(title)}\r\n
\r\n \r\n onSwitchTheme(key)}\r\n >\r\n \r\n {i18n.getString(_TL_('All'))}\r\n \r\n {map(themeNames, name => (\r\n \r\n {name}\r\n \r\n ))}\r\n \r\n
\r\n \r\n { setSelectedImageEdit(image); }}\r\n eligibleLayouts={selectedImageEligibleLayouts}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n { onUpdateImage(); editImageActivity.trace('save for edit image extension in RSA'); }} >{i18n.getString(_TL_('Save'))} \r\n { closeEditImageView(); editImageActivity.trace('cancel for edit image extension in RSA'); }}>{i18n.getString(_TL_('Cancel'))} \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n }\r\n {emptyFinalUrl &&\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\nImageExtensionsPaneContainerBase.propTypes = {\r\n imageExtRepository: PropTypes.shape({}).isRequired,\r\n adContext: PropTypes.shape({\r\n campaignId: PropTypes.number,\r\n adGroupId: PropTypes.number,\r\n advertiserCustomerId: PropTypes.number,\r\n accountId: PropTypes.number,\r\n }).isRequired,\r\n oDataConfig: PropTypes.shape({\r\n odataRootUrl: PropTypes.string,\r\n odataPath: PropTypes.string,\r\n odataToken: PropTypes.string,\r\n }).isRequired,\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }).isRequired,\r\n adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }),\r\n logActivity: PropTypes.func,\r\n permissions: PropTypes.shape({}).isRequired,\r\n fullUrl: PropTypes.string,\r\n headlines: PropTypes.arrayOf(PropTypes.string),\r\n descriptions: PropTypes.arrayOf(PropTypes.string),\r\n hasErrorInUrl: PropTypes.bool,\r\n maxImageExtensionsPerAdGroup: PropTypes.number,\r\n onImageExtensionChanged: PropTypes.func,\r\n onPreviewImageChanged: PropTypes.func,\r\n preferenceService: PropTypes.shape({\r\n setAtUserLevel: PropTypes.func,\r\n findByNameAtUserLevel: PropTypes.func,\r\n }).isRequired,\r\n activityLogger: PropTypes.shape({}),\r\n assetLibraryEventHandler: PropTypes.shape({}),\r\n dataModelUtil: PropTypes.shape({}),\r\n};\r\n\r\nImageExtensionsPaneContainerBase.defaultProps = {\r\n adCreatorScenario: undefined,\r\n logActivity: _.noop,\r\n fullUrl: '',\r\n hasErrorInUrl: false,\r\n headlines: [],\r\n descriptions: [],\r\n maxImageExtensionsPerAdGroup: 0,\r\n onImageExtensionChanged: _.noop,\r\n onPreviewImageChanged: _.noop,\r\n activityLogger: {},\r\n assetLibraryEventHandler: {},\r\n dataModelUtil: {},\r\n};\r\n\r\nexport const ImageExtensionsPaneContainer =\r\n React.memo(withPreference(ImageExtensionsPaneContainerBase));\r\n","import _ from 'underscore';\r\nimport { getUrlProtocolAndDomain } from '@bingads-webui/url-util';\r\nimport { getCharCountExcludingAdCustomizers } from '@bingads-webui-campaign/ad-customizers-next';\r\nimport { validateAdUrl } from '@bingads-webui-campaign-react/url-input-fluent';\r\n\r\nconst textFieldErrorMessage = _TL_('This field is required');\r\nconst lengthLimitErrorMessage = _TL_('The number of characters in this field cannot exceed {{lengthLimit}}');\r\nconst requirePath1ErrorMessage = _TL_('In order to use path 2, path 1 must also be used.');\r\nconst pathLengthLimitErrorMessages = [\r\n _TL_('Path 1 cannot exceed 15 characters.'),\r\n _TL_('Path 2 cannot exceed 15 characters.'),\r\n];\r\n\r\nexport const URL_COLON_SLASH_SLASH = '://';\r\nexport const DEFAULT_URL_PREFIX = 'https';\r\nexport const IS_DISTINGUISH_WIDE_CHAR = true;\r\nexport const AD_TYPE_RSA = 'ResponsiveSearchAd';\r\n\r\nexport const adsFields = {\r\n DESTINATION_URL: 'FinalUrls',\r\n DISPLAY_URL: 'DisplayUrl',\r\n PATH1: 'Path1',\r\n PATH2: 'Path2',\r\n MOBILE_URL: 'MobileFinalUrls',\r\n HEADLINES: 'Headlines',\r\n DESCRIPTIONS: 'Descriptions',\r\n TRACKING_URL_TEMPLATE: 'TrackingUrlTemplate',\r\n FINAL_URL_SUFFIX: 'FinalUrlSuffix',\r\n URL_CUSTOM_PARAMETERS: 'UrlCustomParameters',\r\n};\r\n\r\nexport const adsFieldAlias = {\r\n [adsFields.HEADLINES]: 'AdHeadlines',\r\n [adsFields.DESCRIPTIONS]: 'AdDescriptions',\r\n};\r\n\r\nexport const adsFieldLengthLimitMap = {\r\n FinalUrls: 2048,\r\n Path1: 15,\r\n Path2: 15,\r\n DisplayUrl: 2048,\r\n MobileFinalUrls: 2048,\r\n Headlines: 30,\r\n LongHeadlines: 90,\r\n Descriptions: 90,\r\n TrackingUrlTemplate: 2048,\r\n FinalUrlSuffix: 1024,\r\n UrlCustomParametersKey: 16,\r\n UrlCustomParametersValue: 2048,\r\n};\r\n\r\n// This was used to bypass the requirement to use the actual i18n object\r\n// in scenarios where we only want to determine if a given field passes\r\n// validation - i.e., we don't care about the actual error message itself.\r\nexport const notI18n = {\r\n getString: _.identity,\r\n};\r\n\r\n/**\r\n * Calculate the max length for the destination URL without prefix.\r\n * @param {String} urlPrefix - URL prefix.\r\n * @returns {Number} - Max length for the destination URL without prefix.\r\n */\r\nexport function getDestinationUrlWithoutPrefixLengthLimit(urlPrefix) {\r\n const key = adsFields.DESTINATION_URL;\r\n\r\n return adsFieldLengthLimitMap[key] - urlPrefix.length - URL_COLON_SLASH_SLASH.length;\r\n}\r\n\r\n/**\r\n * Validates a text field value.\r\n * @param {String} value - Value of the text field.\r\n * @param {Number} lengthLimit - Max length allowed for the value.\r\n * @param {Object} [i18n] - i18n library.\r\n * @param {String} field - field.\r\n * @param {Boolean} [optional=false] - If true, value is allowed to be empty.\r\n * @param {String} [adType] - ResponsiveSearchAd or ResponsiveAd.\r\n * @returns {String} - Null if value is valid. Error message if invalid.\r\n */\r\nexport function validateTextFieldValue(\r\n value, lengthLimit, i18n = notI18n, field,\r\n optional = false, adType = AD_TYPE_RSA\r\n) {\r\n const size = getCharCountExcludingAdCustomizers({\r\n text: value,\r\n adType,\r\n field,\r\n });\r\n\r\n if (!optional && size === 0) {\r\n return i18n.getString(textFieldErrorMessage);\r\n }\r\n\r\n if (size > lengthLimit) {\r\n // character count exceeds limit\r\n return i18n.getString(lengthLimitErrorMessage, { lengthLimit });\r\n }\r\n\r\n return null;\r\n}\r\n\r\nexport function validateTextField(fieldName, i18n, optional, adType = AD_TYPE_RSA) {\r\n return (value) => {\r\n const lengthLimit = adsFieldLengthLimitMap[fieldName];\r\n const errMsg = validateTextFieldValue(value, lengthLimit, i18n, fieldName, optional, adType);\r\n return errMsg || '';\r\n };\r\n}\r\n\r\nexport function validateDestinationUrl(urlPrefix, campaignWebsite, i18n, optional = false) {\r\n const campaignUrlProtocolAndDomain = getUrlProtocolAndDomain(campaignWebsite);\r\n\r\n return (value) => {\r\n if (optional && _.isEmpty(value)) {\r\n return '';\r\n }\r\n\r\n const selectedUrlPrefix = urlPrefix || DEFAULT_URL_PREFIX;\r\n const url = `${selectedUrlPrefix}${URL_COLON_SLASH_SLASH}${value}`;\r\n\r\n const errMsg = validateAdUrl(url, campaignUrlProtocolAndDomain, i18n);\r\n\r\n return errMsg || '';\r\n };\r\n}\r\n\r\nexport function validateTextAssets(assets, config, i18n) {\r\n let error;\r\n const { minSize, errorMap } = config;\r\n\r\n const availableAssets = _.filter(assets, a => !_.isEmpty(a.Asset.Text.trim()))\r\n .map(a => ({\r\n Text: a.Asset.Text.trim(),\r\n PinnedField: a.PinnedField,\r\n }));\r\n\r\n if (_.size(availableAssets) < minSize) {\r\n error = errorMap.lessThanRequired;\r\n } else if (_.size(_.uniq(availableAssets, 'Text')) < _.size(availableAssets)) {\r\n error = errorMap.duplicate;\r\n } else {\r\n const unpinnedSize = _.size(_.filter(availableAssets, a => a.PinnedField === 'None'));\r\n if (unpinnedSize < minSize) {\r\n const pinnedSize = _.size(_.uniq(availableAssets, 'PinnedField')) - (unpinnedSize ? 1 : 0);\r\n if (pinnedSize < minSize - unpinnedSize) {\r\n error = errorMap.lessPosition;\r\n }\r\n }\r\n }\r\n\r\n return error ? i18n.getString(error) : '';\r\n}\r\n\r\nexport function validatePath(values, i18n) {\r\n const errors = [];\r\n\r\n if (_.isEmpty(values[0]) && !_.isEmpty(values[1])) {\r\n errors.push({\r\n Property: adsFields.PATH1,\r\n Message: i18n.getString(requirePath1ErrorMessage),\r\n });\r\n }\r\n\r\n _.each([\r\n adsFields.PATH1,\r\n adsFields.PATH2,\r\n ], (field, index) => {\r\n const error =\r\n validateTextFieldValue(values[index], adsFieldLengthLimitMap[field], i18n, field, true);\r\n if (error) {\r\n errors.push({\r\n Property: field,\r\n Message: i18n.getString(pathLengthLimitErrorMessages[index]),\r\n });\r\n }\r\n });\r\n\r\n return errors;\r\n}\r\n","import _ from 'underscore';\r\nimport React, { useMemo, useContext, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { adsFieldAlias } from '../validators';\r\n\r\nexport const ErrorContext = React.createContext([]);\r\n\r\nexport function Error(props) {\r\n const {\r\n filter,\r\n property,\r\n index,\r\n } = props;\r\n\r\n const { errors, onFirstErrorHandler } = useContext(ErrorContext);\r\n const alertRef = useRef(null);\r\n\r\n const filteredErrors = useMemo(() => {\r\n if (_.isFunction(filter)) {\r\n return _.filter(errors, error => filter(error));\r\n } else if (!_.isEmpty(property)) {\r\n return _.filter(errors, error => (error.Property === property ||\r\n error.Property === adsFieldAlias[property]) &&\r\n (index === null || index === error.Index));\r\n }\r\n return errors;\r\n }, [errors, filter, index, property]);\r\n\r\n useEffect(() => {\r\n if (filteredErrors && filteredErrors.length > 0 && errors[0].Property === filteredErrors[0].Property) {\r\n onFirstErrorHandler(alertRef.current);\r\n }\r\n }, [errors, filteredErrors, onFirstErrorHandler]);\r\n\r\n return filteredErrors && filteredErrors.length > 0 ? (\r\n \r\n {error.Message || error.Code}\r\n
\r\n ))}\r\n \r\n ) : null;\r\n}\r\n\r\nError.propTypes = {\r\n filter: PropTypes.func,\r\n\r\n property: PropTypes.string,\r\n\r\n index: PropTypes.number,\r\n};\r\n\r\nError.defaultProps = {\r\n filter: null,\r\n property: null,\r\n index: null,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useMemo } from 'react';\r\nimport { ErrorContext } from './error';\r\nimport { adsFieldAlias } from '../validators';\r\n\r\nexport const withError = (WrappedComponent, property) => (\r\n React.memo((props) => {\r\n const { errors } = useContext(ErrorContext);\r\n\r\n const filteredErrors = useMemo(() => {\r\n if (!_.isEmpty(property)) {\r\n return _.filter(errors, error => error.Property === property ||\r\n error.Property === adsFieldAlias[property]);\r\n }\r\n return errors;\r\n }, [errors]);\r\n\r\n const errorMessage = _.isEmpty(filteredErrors) ? undefined : _.map(filteredErrors, error => error.Message || error.Code).join('\\n');\r\n\r\n return (\r\n |\r\n
: null\r\n }\r\n\r\n \r\n {isString(urlDomain) && urlDomain.length > 0 ?\r\n urlDomain :\r\n 'www.example.com'\r\n }\r\n
\r\n }\r\n /
\r\n /
\r\n \r\n
\r\n );\r\n};\r\n\r\nResponsiveSearchAdPreviewUAPLUnstyled.propTypes = {\r\n data: PropTypes.shape({\r\n Headlines: PropTypes.arrayOf(PropTypes.string),\r\n Descriptions: PropTypes.arrayOf(PropTypes.string),\r\n FinalUrls: PropTypes.arrayOf(PropTypes.string),\r\n DisplayUrl: PropTypes.string,\r\n Path1: PropTypes.string,\r\n Path2: PropTypes.string,\r\n }),\r\n classes: PropTypes.shape({\r\n adPreviewContainer: PropTypes.string,\r\n }).isRequired,\r\n disclaimerInfo: PropTypes.shape({}) || null,\r\n image: PropTypes.shape({}) || null,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n RSAImageExtensionCrop: PropTypes.bool,\r\n }),\r\n }),\r\n};\r\n\r\nResponsiveSearchAdPreviewUAPLUnstyled.defaultProps = {\r\n data: {},\r\n disclaimerInfo: null,\r\n image: null,\r\n permissions: {},\r\n};\r\n\r\nexport const ResponsiveSearchAdPreviewUAPL =\r\n withDefaultStyles(ResponsiveSearchAdPreviewUAPLUnstyled, getPreviewStyles);\r\n","export const getPreviewStyles = () => ({\r\n adPreviewContainer: {\r\n '& .new-preview-carousel-container-adprelib': {\r\n width: '610px',\r\n minWidth: '610px',\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\n\r\nexport function formatRSAObject(adItem) {\r\n let adObject = _.pick(adItem, [\r\n 'FinalUrls',\r\n 'DisplayUrl',\r\n 'MobileFinalUrls',\r\n 'Path1',\r\n 'Path2',\r\n 'TrackingUrlTemplate',\r\n 'FinalUrlSuffix',\r\n ]);\r\n\r\n adObject = _.extend(\r\n adObject,\r\n {\r\n '@odata.type': 'Model.ResponsiveSearchAd',\r\n Type: 'ResponsiveSearch',\r\n Headlines: _.map(\r\n _.filter(adItem.Headlines, h => !_.isEmpty(h.Asset.Text.trim())),\r\n h => ({\r\n Asset: {\r\n '@odata.type': '#Model.TextAsset',\r\n AssetType: 'Text',\r\n Name: null,\r\n Text: h.Asset.Text.trim(),\r\n },\r\n PinnedField: h.PinnedField,\r\n })\r\n ),\r\n Descriptions: _.map(\r\n _.filter(adItem.Descriptions, d => !_.isEmpty(d.Asset.Text.trim())),\r\n d => ({\r\n Asset: {\r\n '@odata.type': '#Model.TextAsset',\r\n AssetType: 'Text',\r\n Name: null,\r\n Text: d.Asset.Text.trim(),\r\n },\r\n PinnedField: d.PinnedField,\r\n })\r\n ),\r\n UrlCustomParameters: _.filter(adItem.UrlCustomParameters, ({ Key }) => !_.isEmpty(Key)),\r\n },\r\n adItem.Campaign ? {\r\n Campaign: { Id: adItem.Campaign.Id },\r\n } : {},\r\n adItem.AdGroup ? {\r\n AdGroup: { Id: adItem.AdGroup.Id },\r\n } : {},\r\n _.first(adItem.MobileFinalUrls) === 'https://' || _.first(adItem.MobileFinalUrls) === 'http://' ? {\r\n MobileFinalUrls: [],\r\n } : {}\r\n );\r\n\r\n return adObject;\r\n}\r\n\r\nfunction formatAssetRankingTexts(assetValues) {\r\n const textArr = _.map(assetValues, item => item && item.Asset && item.Asset.Text);\r\n\r\n return _.uniq(_.compact(textArr));\r\n}\r\n\r\nexport function formatRankingTexts(assets) {\r\n return _.mapObject(\r\n assets,\r\n assetValues => formatAssetRankingTexts(assetValues)\r\n );\r\n}\r\n\r\nexport function computeRankingTextsUpdates(currentAssets, prevAssetsRankingTexts) {\r\n const rankingTexts = formatRankingTexts(currentAssets);\r\n\r\n return {\r\n needUpdate: !_.isEqual(rankingTexts, prevAssetsRankingTexts),\r\n value: rankingTexts,\r\n };\r\n}\r\n","import { find, noop } from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { CommandButton, registerIcons } from '@fluentui/react';\r\nimport pinIcon from '../media/pin.svg';\r\n\r\nregisterIcons({\r\n icons: {\r\n 'pin-icon': (\r\n {\r\n const text = _.get(newAsset, ['value', 0, 'text']);\r\n logTextAssetApplied(assetType, operationName);\r\n onTextChange(index, text, property);\r\n }}\r\n onSuggestionsRendered={onSuggestionsRendered}\r\n />\r\n
\r\n )}\r\n {showDeleteButton && (\r\n \r\n {showAdvancedInformation ?\r\n i18n.getString(_TL_('Campaign level disclaimer: {{name}}'), { name: disclaimerInfo.Name }) :\r\n i18n.getString(_TL_('Campaign level disclaimer'))}\r\n
\r\n );\r\n }\r\n if (disclaimerInfo.DisclaimerLayout === 'AdditionalLine') {\r\n return (\r\n\r\n {showAdvancedInformation ?\r\n i18n.getString(_TL_('Campaign level disclaimer: {{name}}\\n(Note: Additional line layout disclaimers will not have description 2.)'), { name: disclaimerInfo.Name }) :\r\n i18n.getString(_TL_('Campaign level disclaimer (Note: Additional line layout disclaimers will not have description 2.)'))}\r\n
\r\n );\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nDisclaimer.propTypes = {\r\n disclaimerInfo: PropTypes.shape({\r\n DisclaimerLayout: PropTypes.string,\r\n Name: PropTypes.string,\r\n }),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n SearchCampaignCreationRevamp: PropTypes.bool,\r\n }),\r\n }),\r\n};\r\n\r\nDisclaimer.defaultProps = {\r\n disclaimerInfo: null,\r\n permissions: {\r\n dynamic: {\r\n SearchCampaignCreationRevamp: false,\r\n },\r\n },\r\n};\r\n","import { adsFields } from './validators';\r\n\r\nexport const headlinesConfig = {\r\n property: 'Headlines',\r\n itemProperty: 'Headline',\r\n className: 'rsa-field-headlines',\r\n itemClassName: 'rsa-field-headline',\r\n minSize: 3,\r\n maxSize: 15,\r\n defaultSize: 5,\r\n addLabel: _TL_('Add headline'),\r\n inputLabel: _TL_('Headline {{index}}'),\r\n copilotButtonLabel: _TL_('Get recommendations for headline {{index}}'),\r\n deleteButtonLabel: _TL_('Delete headline {{index}}'),\r\n getPinItems: i18n => [\r\n {\r\n key: 'None',\r\n text: i18n.getString(_TL_('Show this headline in any unpinned position')),\r\n value: i18n.getString(_TL_('Pin')),\r\n },\r\n {\r\n key: 'Headline1',\r\n text: i18n.getString(_TL_('Show this headline only in position 1')),\r\n value: i18n.getString(_TL_('1')),\r\n },\r\n {\r\n key: 'Headline2',\r\n text: i18n.getString(_TL_('Show this headline only in position 2')),\r\n value: i18n.getString(_TL_('2')),\r\n },\r\n {\r\n key: 'Headline3',\r\n text: i18n.getString(_TL_('Show this headline only in position 3')),\r\n value: i18n.getString(_TL_('3')),\r\n },\r\n ],\r\n errorMap: {\r\n lessThanRequired: _TL_('Please add at least three headlines, excluding headlines containing countdowns or location insertions.'),\r\n duplicate: _TL_('Remove duplicate headline.'),\r\n lessPosition: _TL_('You do not have enough headlines. Add at least 3 headlines or pin headlines to each position.'),\r\n },\r\n enableDKI: true,\r\n DKIThemeName: _TL_('Headline with dynamic keyword'),\r\n};\r\n\r\nexport const descriptionsConfig = {\r\n property: 'Descriptions',\r\n itemProperty: 'Description',\r\n className: 'rsa-field-descriptions',\r\n itemClassName: 'rsa-field-description',\r\n minSize: 2,\r\n maxSize: 4,\r\n defaultSize: 2,\r\n addLabel: _TL_('Add description'),\r\n inputLabel: _TL_('Description {{index}}'),\r\n copilotButtonLabel: _TL_('Get recommendations for description {{index}}'),\r\n deleteButtonLabel: _TL_('Delete description {{index}}'),\r\n getPinItems: i18n => [\r\n {\r\n key: 'None',\r\n text: i18n.getString(_TL_('Show this description in any unpinned position')),\r\n value: i18n.getString(_TL_('Pin')),\r\n },\r\n {\r\n key: 'Description1',\r\n text: i18n.getString(_TL_('Show this description only in position 1')),\r\n value: i18n.getString(_TL_('1')),\r\n },\r\n {\r\n key: 'Description2',\r\n text: i18n.getString(_TL_('Show this description only in position 2')),\r\n value: i18n.getString(_TL_('2')),\r\n },\r\n ],\r\n errorMap: {\r\n lessThanRequired: _TL_('Please add at least two descriptions, excluding descriptions containing countdowns or location insertions.'),\r\n duplicate: _TL_('Remove duplicate description.'),\r\n lessPosition: _TL_('You do not have enough descriptions. Add at least 2 descriptions or pin descriptions to each position.'),\r\n },\r\n};\r\n\r\nexport const adFieldsConfig = {\r\n Headlines: {\r\n key: adsFields.HEADLINES,\r\n className: 'rsa-field-headline',\r\n assetsConfig: headlinesConfig,\r\n },\r\n Descriptions: {\r\n key: adsFields.DESCRIPTIONS,\r\n className: 'rsa-field-description',\r\n assetsConfig: descriptionsConfig,\r\n },\r\n DestinationUrl: {\r\n key: adsFields.DESTINATION_URL,\r\n className: 'rsa-field-final-url',\r\n inputClassName: 'no-inline-error',\r\n ariaLabel: _TL_('Final URL'),\r\n dropdownLabel: _TL_('Final URL options'),\r\n optional: false,\r\n },\r\n DisplayUrl: {\r\n key: adsFields.DISPLAY_URL,\r\n className: 'rsa-field-display-url',\r\n inputClassName: 'no-inline-error',\r\n ariaLabel: _TL_('Display URL'),\r\n optional: false,\r\n },\r\n Path1: {\r\n key: adsFields.PATH1,\r\n className: 'rsa-field-path1',\r\n inputClassName: 'no-inline-error',\r\n ariaLabel: _TL_('Path 1'),\r\n },\r\n Path2: {\r\n key: adsFields.PATH2,\r\n className: 'rsa-field-path2',\r\n inputClassName: 'no-inline-error',\r\n ariaLabel: _TL_('Path 2'),\r\n },\r\n MobileUrl: {\r\n key: adsFields.MOBILE_URL,\r\n className: 'rsa-field-mobile-url',\r\n inputClassName: 'no-inline-error',\r\n ariaLabel: _TL_('Mobile URL'),\r\n dropdownLabel: _TL_('Mobile URL options'),\r\n optional: true,\r\n },\r\n TrackingUrlTemplate: {\r\n key: adsFields.TRACKING_URL_TEMPLATE,\r\n className: 'rsa-field-url-tracking-template',\r\n inputClassName: 'no-inline-error',\r\n ariaLabel: _TL_('Tracking template'),\r\n optional: true,\r\n },\r\n FinalUrlSuffix: {\r\n key: adsFields.FINAL_URL_SUFFIX,\r\n className: 'rsa-field-final-url-suffix',\r\n inputClassName: 'no-inline-error',\r\n ariaLabel: _TL_('Final URL suffix'),\r\n optional: true,\r\n },\r\n UrlCustomParameters: {\r\n key: adsFields.URL_CUSTOM_PARAMETERS,\r\n className: 'rsa-field-url-custom-parameters',\r\n inputClassName: 'no-inline-error',\r\n optional: true,\r\n },\r\n};\r\n","import React, { useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { CopilotRecommendationBanner, CopilotThemesRecommendationDialog } from '@bingads-webui/inline-copilot';\r\n\r\nexport function ResponsiveSearchAdCopilotBannerWithDialog(props) {\r\n const {\r\n eventLog,\r\n isCopilotEnabled,\r\n onApply,\r\n onDialogFetchAssetsSucceeded,\r\n onFetch,\r\n onFetchFailed,\r\n onFetchSucceeded,\r\n onReset,\r\n } = props;\r\n\r\n const {\r\n logBannerRefresh,\r\n logBannerRefreshCompleted,\r\n logFetch,\r\n logFetchSucceeded,\r\n } = eventLog;\r\n\r\n const [showCopilotDialog, setShowCopilotDialog] = useState(false);\r\n\r\n const handleCopilotDialogClose = useCallback(() => {\r\n setShowCopilotDialog(false);\r\n }, []);\r\n\r\n const handleRefresh = useCallback(() => {\r\n setShowCopilotDialog(true);\r\n logBannerRefresh();\r\n }, [logBannerRefresh]);\r\n\r\n const handleFetchThemesSucceeded = useCallback((url, themesList) => {\r\n logFetchSucceeded(url, themesList);\r\n }, [logFetchSucceeded]);\r\n\r\n const handleApply = useCallback((selectedThemes, selectedThemesAndAssets) => {\r\n onApply(selectedThemes, selectedThemesAndAssets);\r\n handleCopilotDialogClose();\r\n }, [handleCopilotDialogClose, onApply]);\r\n\r\n if (!isCopilotEnabled) {\r\n // copilot is not enabled, do not display the banner or fetch any recommendations\r\n return null;\r\n }\r\n\r\n return (\r\n\r\n { permissions && permissions.dynamic && !permissions.dynamic.AdStrengthTestingNoPanel &&\r\n
\r\n \r\n \r\n \r\n {renderImageExtension ?\r\n
\r\n \r\n
\r\n );\r\n});\r\n\r\nTextFieldWithAdCustomizerInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n adType: PropTypes.string,\r\n containerSelector: PropTypes.string,\r\n configProps: PropTypes.shape({\r\n id: PropTypes.string,\r\n key: PropTypes.string,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({}),\r\n field: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nTextFieldWithAdCustomizerInternal.defaultProps = {\r\n adType: 'ResponsiveAd',\r\n containerSelector: 'div.crud-multimedia-ad-react .ad-edit-and-preview-container',\r\n};\r\n\r\nexport const ValidatedTextFieldWithAdCustomizer = (TextFieldWithAdCustomizerInternal);\r\n","export const getTextAssetRecommendationsStyles = () => ({\r\n textAssetRecommendationsContent: {\r\n '& .collapsible-content': {\r\n '& .suggested-item-add': {\r\n '& .ms-Button-label': {\r\n height: '30px',\r\n lineHeight: '30px',\r\n },\r\n },\r\n },\r\n },\r\n textAssetRecommendationsPanel: {\r\n '& .ms-Panel-content': {\r\n paddingTop: '20px',\r\n '& .selectable-suggested-item-toggle': {\r\n height: 'auto',\r\n padding: '6px 0',\r\n '& .ms-Button-label': {\r\n lineHeight: '120%',\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import { chain, contains, filter, isEmpty, isFunction, map, negate, noop, property, size, values } from 'underscore';\r\nimport React, { useCallback, useState, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { DefaultButton, PrimaryButton, Panel, PanelType, Stack } from '@fluentui/react';\r\nimport { FluentProvider, makeStyles, webLightTheme } from '@fluentui/react-components';\r\nimport { SuggestedItemsMultiSelect } from '@bingads-webui-campaign-react/pill-item-components';\r\nimport { CopilotTab, CopilotTabItem } from '@bingads-webui/inline-copilot-ui';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\n\r\nconst useInlineCopilotUIStyles = makeStyles({\r\n header: {\r\n display: 'flex',\r\n fontSize: '20px',\r\n fontWeight: '600',\r\n lineHeight: '27px',\r\n justifyContent: 'flex-start',\r\n paddingLeft: '24px',\r\n paddingRight: '24px',\r\n width: '100%',\r\n\r\n '& button': {\r\n marginLeft: '8px',\r\n },\r\n },\r\n theme: {\r\n marginTop: '10px',\r\n marginBottom: '16px',\r\n },\r\n summary: {\r\n marginLeft: '16px',\r\n },\r\n});\r\n\r\nconst deriveSuggestedItems = (recommendations, fieldValues) => () =>\r\n chain(recommendations)\r\n .map(({ name, assets }) => ({\r\n assets: map(assets, asset => ({\r\n key: asset,\r\n itemText: asset,\r\n theme: name,\r\n })),\r\n }))\r\n .pluck('assets')\r\n .flatten()\r\n .filter(({ itemText }) => !contains(fieldValues, itemText))\r\n .value();\r\n\r\nexport const TextAssetRecommendationsWithThemesPanel = ({\r\n i18n,\r\n onSave,\r\n onCancel,\r\n collection,\r\n availableRecommendations,\r\n maxCollectionSize,\r\n title,\r\n topicKey,\r\n topicAriaLabel,\r\n disabledSuggestionTooltip,\r\n reportDisplayedRecommendations,\r\n DKIThemeName,\r\n}) => {\r\n const [activeTheme, setActiveTheme] = useState(i18n.getString(_TL_('All')));\r\n\r\n const fieldValues = useMemo(() => values(collection), [collection]);\r\n const [allSuggestedItems, setAllSuggestedItems] = useState(deriveSuggestedItems(availableRecommendations, fieldValues));\r\n const [suggestedItems, setSuggestedItems] = useState(allSuggestedItems);\r\n\r\n const selectedItemsCount = useMemo(() => size(allSuggestedItems.filter(property('isSelected'))), [allSuggestedItems]);\r\n const emptyFieldsCount = useMemo(() => maxCollectionSize - size(filter(fieldValues, negate(isEmpty))), [maxCollectionSize, fieldValues]);\r\n const remaningItemsCount = useMemo(() => emptyFieldsCount - selectedItemsCount, [emptyFieldsCount, selectedItemsCount]);\r\n\r\n const styles = useInlineCopilotUIStyles();\r\n\r\n useEffect(() => {\r\n if (!isEmpty(availableRecommendations) && isFunction(reportDisplayedRecommendations)) {\r\n // TODO: Logging\r\n // reportDisplayedRecommendations(availableRecommendations);\r\n }\r\n }, [availableRecommendations, reportDisplayedRecommendations]);\r\n\r\n const onSwitchTheme = useCallback((theme) => {\r\n setActiveTheme(theme);\r\n if (theme === i18n.getString(_TL_('All'))) {\r\n setSuggestedItems(allSuggestedItems);\r\n } else {\r\n setSuggestedItems(filter(allSuggestedItems, item => item.theme === theme));\r\n }\r\n }, [allSuggestedItems, i18n]);\r\n\r\n const onSuggestedItemToggle = useCallback((itemIndex, itemText) => {\r\n setSuggestedItems(suggestedItems.map(item => ({\r\n ...item,\r\n isSelected: item.itemText === itemText ? !item.isSelected : item.isSelected,\r\n })));\r\n setAllSuggestedItems(allSuggestedItems.map(item => ({\r\n ...item,\r\n isSelected: item.itemText === itemText ? !item.isSelected : item.isSelected,\r\n })));\r\n }, [allSuggestedItems, suggestedItems]);\r\n\r\n const onSaveClick = useCallback(() => {\r\n onSave(allSuggestedItems.filter(property('isSelected')).map(item => item.itemText));\r\n }, [allSuggestedItems, onSave]);\r\n\r\n const onCancelClick = useCallback(() => {\r\n onCancel();\r\n }, [onCancel]);\r\n\r\n const onRenderHeader = useCallback(() => (\r\n \r\n {title}\r\n { HelpButton &&
\r\n ), [styles.header, title, topicAriaLabel, topicKey]);\r\n\r\n const onRenderFooterContent = useCallback(() => (\r\n \r\n onSwitchTheme(key)}\r\n >\r\n \r\n {i18n.getString(_TL_('All'))}\r\n \r\n {map(availableRecommendations, ({ name }) => (\r\n \r\n {name === DKIThemeName ? i18n.getString(DKIThemeName) : name}\r\n \r\n ))}\r\n \r\n
\r\n \r\n {withInlineRecommendations &&\r\n
\r\n \r\n
);\r\n});\r\n\r\nHeadlineAssetCollection.propTypes = {\r\n data: PropTypes.shape({}).isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n updateSuggestionMeasurement: PropTypes.func.isRequired,\r\n setApplyHeadlinesCallback: PropTypes.func,\r\n};\r\n\r\nHeadlineAssetCollection.defaultProps = {\r\n setApplyHeadlinesCallback: noop,\r\n};\r\n\r\n","import React, { useContext, useMemo } from 'react';\r\nimport { noop } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { TextAssetCollectionWithRecommendations } from './text-asset-collection-with-recommendations';\r\nimport { getTextAssetCollectionConfig } from './config/text-asset-collection-config';\r\n\r\nexport const DescriptionAssetCollection = React.memo((props) => {\r\n const {\r\n data,\r\n onChange,\r\n updateSuggestionMeasurement,\r\n setApplyDescriptionsCallback,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const headlineConfig = useMemo(() => getTextAssetCollectionConfig('descriptions'), []);\r\n\r\n return (\r\n \r\n
);\r\n});\r\n\r\nDescriptionAssetCollection.propTypes = {\r\n data: PropTypes.shape({}).isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n updateSuggestionMeasurement: PropTypes.func.isRequired,\r\n setApplyDescriptionsCallback: PropTypes.func,\r\n};\r\n\r\nDescriptionAssetCollection.defaultProps = {\r\n setApplyDescriptionsCallback: noop,\r\n};\r\n\r\n","import _ from 'underscore';\r\n\r\n\r\nfunction getCollectionAsset(data, validationPropsField) {\r\n const currentCollection = _.result(data, validationPropsField, []); // Currently filled headlines\r\n const currentCollectionAsset = _.pluck(currentCollection, 'Asset').filter(item => (item !== undefined && !_.isNull(item)));\r\n const currentCollectionAssetText = _.pluck(currentCollectionAsset, 'Text');\r\n return currentCollectionAssetText;\r\n}\r\n\r\nfunction getAvailableRecommendations(collectionRecommendations, currentCollectionAssetText) {\r\n return _.filter(collectionRecommendations, recommendation => recommendation && recommendation.Text && !_.contains(currentCollectionAssetText, recommendation.Text));\r\n}\r\n// TODO: will remodify when the data layer is ready\r\nexport function formatToLLMSuggestion(recommendationContext, data) {\r\n if (!recommendationContext.themes) return {};\r\n\r\n const llmSuggestions = {\r\n Perspectives: [], SuggestionLanguage: '', Suggestions: [], SummaryReason: 'summarized_reason',\r\n };\r\n const currentCollectionHeadlines = getCollectionAsset(data, 'Headlines');\r\n const currentCollectionDescriptions = getCollectionAsset(data, 'Descriptions');\r\n\r\n _.each(recommendationContext.themes, (theme) => {\r\n let { headlines, descriptions } = theme;\r\n const { name: Perspective } = theme;\r\n headlines = getAvailableRecommendations(headlines, currentCollectionHeadlines);\r\n descriptions = getAvailableRecommendations(descriptions, currentCollectionDescriptions);\r\n const headlineSuggestions = _.map(headlines, (headline) => {\r\n const { Text, SuggestionId } = headline;\r\n return {\r\n Asset: Text,\r\n AssetType: 'Headline',\r\n Perspective,\r\n Reason: '',\r\n SrcId: '',\r\n SuggestionId,\r\n };\r\n });\r\n const descriptionSuggestions = _.map(descriptions, (description) => {\r\n const { Text, SuggestionId } = description;\r\n return {\r\n Asset: Text,\r\n AssetType: 'Description',\r\n Perspective,\r\n Reason: '',\r\n SrcId: '',\r\n SuggestionId,\r\n };\r\n });\r\n llmSuggestions.Perspectives.push({ Perspective, PitchingPoint: '' });\r\n llmSuggestions.Suggestions.push(...headlineSuggestions, ...descriptionSuggestions);\r\n });\r\n return llmSuggestions;\r\n}\r\n","import _ from 'underscore';\r\n\r\nconst Order = {\r\n 'AddMoreHeadlines-not-met': 1,\r\n 'AddMoreDescriptions-not-met': 2,\r\n 'AddMoreHeadlines-half-met': 3,\r\n 'AddMoreDescriptions-half-met': 4,\r\n 'LongerHeadlines-not-met': 5,\r\n 'LongerDescriptions-not-met': 6,\r\n 'DistinctHeadlines-not-met': 7,\r\n 'DistinctDescriptions-not-met': 8,\r\n 'UnpinHeadlinePositions-not-met': 9,\r\n 'UnpinDescriptionPositions-not-met': 10,\r\n 'LongerHeadlines-half-met': 11,\r\n 'LongerDescriptions-half-met': 12,\r\n 'DistinctHeadlines-half-met': 13,\r\n 'DistinctDescriptions-half-met': 14,\r\n 'UnpinHeadlinePositions-half-met': 15,\r\n 'UnpinDescriptionPositions-half-met': 16,\r\n 'MoreCombinations-not-met': 17,\r\n 'MoreCombinations-half-met': 18,\r\n 'AddMoreHeadlines-met': 19,\r\n 'AddMoreDescriptions-met': 20,\r\n 'LongerHeadlines-met': 21,\r\n 'LongerDescriptions-met': 22,\r\n 'DistinctHeadlines-met': 23,\r\n 'DistinctDescriptions-met': 24,\r\n 'UnpinHeadlinePositions-met': 25,\r\n 'UnpinDescriptionPositions-met': 26,\r\n 'MoreCombinations-met': 27,\r\n};\r\n\r\nconst SuggestionState = {\r\n Met: 'met',\r\n HalfMet: 'half-met',\r\n NotMet: 'not-met',\r\n};\r\n\r\nconst StrengthScore = {\r\n Poor: 25,\r\n Average: 50,\r\n Good: 75,\r\n Excellent: 100,\r\n};\r\n\r\nexport const maxHeadlineCount = 15;\r\n\r\nexport const maxDescriptionCount = 4;\r\n\r\nexport const ViewSuggestionType = {\r\n None: 'none',\r\n Headline: 'headline',\r\n Description: 'description',\r\n};\r\n\r\nexport function getStrengthScore(strength) {\r\n return StrengthScore[strength] || 0;\r\n}\r\n\r\nexport function generateSuggestion({\r\n i18n,\r\n assets,\r\n actionItem,\r\n strength,\r\n}) {\r\n const suggestion = i18n.getString(`Ad_Strength_Suggestion_${actionItem}`);\r\n let state = 'not-met';\r\n let suggestionType = ViewSuggestionType.None;\r\n\r\n switch (actionItem) {\r\n case 'AddMoreHeadlines': {\r\n const headlineCount = assets.headlines.length;\r\n if (headlineCount < 5) {\r\n state = SuggestionState.NotMet;\r\n } else if (headlineCount >= maxHeadlineCount\r\n || (headlineCount > 8 && getStrengthScore(strength) >= StrengthScore.Good)) {\r\n state = SuggestionState.Met;\r\n } else {\r\n state = SuggestionState.HalfMet;\r\n }\r\n suggestionType = ViewSuggestionType.Headline;\r\n break;\r\n }\r\n case 'AddMoreDescriptions': {\r\n const descriptionCount = assets.descriptions.length;\r\n if (descriptionCount < 2) {\r\n state = SuggestionState.NotMet;\r\n } else if (descriptionCount >= maxDescriptionCount\r\n || (descriptionCount > 3 && getStrengthScore(strength) >= StrengthScore.Good)) {\r\n state = SuggestionState.Met;\r\n } else {\r\n state = SuggestionState.HalfMet;\r\n }\r\n suggestionType = ViewSuggestionType.Description;\r\n break;\r\n }\r\n case 'DistinctHeadlines': {\r\n state = _.uniq(assets.headlines).length === assets.headlines.length\r\n ? SuggestionState.HalfMet\r\n : SuggestionState.NotMet;\r\n suggestionType = ViewSuggestionType.Headline;\r\n break;\r\n }\r\n case 'DistinctDescriptions':\r\n state = _.uniq(assets.descriptions).length === assets.descriptions.length\r\n ? SuggestionState.HalfMet\r\n : SuggestionState.NotMet;\r\n suggestionType = ViewSuggestionType.Description;\r\n break;\r\n case 'LongerHeadlines':\r\n state = (_.size(assets.headlines) === 0\r\n || _.any(assets.headlines, headline => _.size(headline) < 10))\r\n ? SuggestionState.NotMet\r\n : SuggestionState.HalfMet;\r\n suggestionType = ViewSuggestionType.Headline;\r\n break;\r\n case 'LongerDescriptions':\r\n state = (_.size(assets.descriptions) === 0\r\n || _.any(assets.descriptions, description => _.size(description) < 10))\r\n ? SuggestionState.NotMet\r\n : SuggestionState.HalfMet;\r\n suggestionType = ViewSuggestionType.Description;\r\n break;\r\n case 'UnpinHeadlinePositions': {\r\n const pinCount = assets.headlinePins.length;\r\n if (pinCount > 0) {\r\n state = pinCount === assets.headlines.length\r\n ? SuggestionState.NotMet\r\n : SuggestionState.HalfMet;\r\n } else {\r\n state = SuggestionState.Met;\r\n }\r\n suggestionType = ViewSuggestionType.None;\r\n break;\r\n }\r\n case 'UnpinDescriptionPositions': {\r\n const pinCount = assets.descriptionPins.length;\r\n if (pinCount > 0) {\r\n state = pinCount === assets.descriptions.length\r\n ? SuggestionState.NotMet\r\n : SuggestionState.HalfMet;\r\n } else {\r\n state = SuggestionState.Met;\r\n }\r\n suggestionType = ViewSuggestionType.None;\r\n break;\r\n }\r\n case 'MoreCombinations':\r\n if (assets.headlines.length < 5 || assets.descriptions.length < 3) {\r\n state = SuggestionState.NotMet;\r\n } else {\r\n state = SuggestionState.HalfMet;\r\n }\r\n if (assets.headlines.length < 10) {\r\n suggestionType = ViewSuggestionType.Headline;\r\n } else if (assets.descriptions.length < maxDescriptionCount) {\r\n suggestionType = ViewSuggestionType.Description;\r\n } else {\r\n suggestionType = ViewSuggestionType.None;\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n return {\r\n action: actionItem,\r\n state,\r\n suggestion,\r\n suggestionType,\r\n };\r\n}\r\n\r\nexport function sortSuggestions(suggestions) {\r\n return _.sortBy(suggestions, suggestion => Order[`${suggestion.action}-${suggestion.state}`] || 100);\r\n}\r\n","import $ from 'jquery';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { HighchartReactWrapper } from '@bingads-webui-react/highchart-react-wrapper';\r\nimport { getStrengthScore } from './ad-strength-helper';\r\n\r\nexport function AdStrengthScore({\r\n isForVNext = false,\r\n label,\r\n strength,\r\n}) {\r\n const score = getStrengthScore(strength);\r\n let options = {\r\n chart: {\r\n marginBottom: 15,\r\n marginTop: 0,\r\n plotBackgroundColor: null,\r\n plotBorderWidth: 0,\r\n plotShadow: false,\r\n type: 'pie',\r\n height: 110,\r\n width: 110,\r\n },\r\n colors: ['#4285f4', '#e8f0fe'],\r\n credits: {\r\n enabled: false,\r\n },\r\n plotOptions: {\r\n pie: {\r\n allowPointSelect: false,\r\n dataLabels: {\r\n enabled: false,\r\n },\r\n endAngle: 360,\r\n startAngle: 0,\r\n size: '100%',\r\n },\r\n series: {\r\n animation: false,\r\n },\r\n },\r\n series: [{\r\n type: 'pie',\r\n name: 'Ad Strength',\r\n data: [score, 100 - score],\r\n innerSize: '75%',\r\n showInLegend: false,\r\n states: {\r\n hover: {\r\n enabled: false,\r\n },\r\n inactive: {\r\n enabled: false,\r\n },\r\n },\r\n }],\r\n title: {\r\n text: label,\r\n align: 'center',\r\n verticalAlign: 'bottom',\r\n style: {\r\n fontSize: 14,\r\n fontWeight: 'bold',\r\n },\r\n },\r\n tooltip: {\r\n enabled: false,\r\n },\r\n };\r\n\r\n if (isForVNext) {\r\n options = $.extend(true, options, {\r\n chart: {\r\n height: 150,\r\n width: 150,\r\n },\r\n colors: ['#0078D4', '#C7E0F4'],\r\n series: [{\r\n innerSize: '80%',\r\n }],\r\n title: {\r\n y: 30,\r\n },\r\n });\r\n }\r\n\r\n return (\r\n {Asset}
: null}\r\n \r\n - \r\n
- \r\n {pickerTitle}\r\n \r\n {contentView}\r\n
{i18n.getString(`Ad_Strength_Suggestion_Tips_Category_${category.name}_Item${num}`)}
\r\n ));\r\n const itemsWithSubtitle = (\r\n \r\n
\r\n );\r\n renderContainer(itemsWithSubtitle, container);\r\n};\r\n\r\nconst viewHeadlineSuggestionTips = (i18n) => {\r\n const categoryItems = _.map(TIPS_CATEGORIES, category => (\r\n {i18n.getString(`Ad_Strength_Suggestion_Tips_Category_${category.name}_Subtitle`)}
\r\n {items}\r\n \r\n viewHeadlineSuggestionTipCategoryItems(category, i18n, e)}\r\n onKeyPress={e => viewHeadlineSuggestionTipCategoryItems(category, i18n, e)}\r\n >\r\n \r\n
\r\n ));\r\n const tips = (\r\n {i18n.getString(`Ad_Strength_Suggestion_Tips_Category_${category.name}_Title`)}
\r\n \r\n \r\n \r\n
\r\n );\r\n return tips;\r\n};\r\n\r\nconst addAssetSuggestion = (assetType, viewModel, e) => {\r\n let target = $(e.target);\r\n if (_.first(target).className === `ad-strength-suggestion-detail-suggestion-add-symbol ${assetType}`\r\n || _.first(target).className === `ad-strength-suggestion-detail-suggestion-content ${assetType}`) {\r\n target = target.parent();\r\n }\r\n if (_.first(target).className === `ad-strength-suggestion-detail-suggestion-disabled ${assetType}`) {\r\n return;\r\n }\r\n const content = _.first(target.find(`.ad-strength-suggestion-detail-suggestion-content.${assetType}`));\r\n if (_.isEmpty(content)) {\r\n return;\r\n }\r\n const suggestionId = _.first(target.find(`.ad-strength-suggestion-detail-suggestion-id.${assetType}`));\r\n if (!_.isEmpty(suggestionId)) {\r\n applySuggestionMeasurement(viewModel, suggestionId.textContent);\r\n }\r\n const suggestionToAdd = content.textContent;\r\n if (assetType === ViewSuggestionType.Headline) {\r\n const index = _.findIndex(_.range(viewModel.showHeadlineCount()), i =>\r\n _.isEmpty(`${viewModel[`Headline${i}`]()}`));\r\n if (index !== -1) {\r\n viewModel[`Headline${index}`](suggestionToAdd);\r\n } else if (viewModel.showHeadlineCount() < maxHeadlineCount) {\r\n viewModel.showHeadlineCount(viewModel.showHeadlineCount() + 1);\r\n viewModel[`Headline${viewModel.showHeadlineCount() - 1}`](suggestionToAdd);\r\n }\r\n } else if (assetType === ViewSuggestionType.Description) {\r\n const index = _.findIndex(_.range(viewModel.showDescriptionCount()), i =>\r\n _.isEmpty(`${viewModel[`Description${i}`]()}`));\r\n if (index !== -1) {\r\n viewModel[`Description${index}`](suggestionToAdd);\r\n } else if (viewModel.showDescriptionCount() < maxDescriptionCount) {\r\n viewModel.showDescriptionCount(viewModel.showDescriptionCount() + 1);\r\n viewModel[`Description${viewModel.showDescriptionCount() - 1}`](suggestionToAdd);\r\n }\r\n }\r\n};\r\n\r\n\r\nconst renderSuggestionContent = (\r\n container,\r\n content,\r\n repository,\r\n i18n,\r\n assetType,\r\n viewModel,\r\n isForVNext\r\n) => {\r\n // Show suggestion\r\n _.first(container).style.display = 'block';\r\n\r\n // Render suggestion static content in advance\r\n renderContainer(content, container);\r\n\r\n if (currentFinalUrl === _.first(viewModel.FinalUrls())) {\r\n return;\r\n }\r\n\r\n currentFinalUrl = _.first(viewModel.FinalUrls());\r\n\r\n // Get suggestion from AdInsight MT\r\n repository.fetchAdStrengthSuggestion().then(({ data }) => {\r\n currentFinalUrl = '';\r\n\r\n const suggestionContainers = container.find(`.ad-strength-suggestion-detail-suggestions-container.${assetType}`);\r\n const noSuggestionContainers = container.find(`.ad-strength-suggestion-detail-nosuggestion-container.${assetType}`);\r\n // Empty suggestions\r\n renderContainer([], suggestionContainers);\r\n\r\n if (!_.isEmpty(data)) {\r\n const {\r\n ErrorCode,\r\n RSAV2AssetsSuggestions,\r\n } = data;\r\n if (ErrorCode !== 'Success' || _.isEmpty(RSAV2AssetsSuggestions)) {\r\n renderNoSuggestion(noSuggestionContainers, i18n);\r\n } else {\r\n const allSuggestions = _.first(RSAV2AssetsSuggestions).Suggestions;\r\n const suggestions = _.filter(allSuggestions, suggestion =>\r\n suggestion.AssetType.toLowerCase() === assetType && !_.isEmpty(suggestion.Asset));\r\n const viewSuggestionIds = [];\r\n const returnSuggestionIds = [];\r\n const items = _.map(suggestions, (suggestion) => {\r\n returnSuggestionIds.push(suggestion.SuggestionId);\r\n const suggestionAssetType = suggestion.AssetType.toLowerCase();\r\n const suggestionClassName = `ad-strength-suggestion-detail-suggestion ${suggestionAssetType}`;\r\n const addSymbolClassName = `ad-strength-suggestion-detail-suggestion-add-symbol ${suggestionAssetType}`;\r\n const idClassName = `ad-strength-suggestion-detail-suggestion-id ${suggestionAssetType}`;\r\n const contentClassName = `ad-strength-suggestion-detail-suggestion-content ${suggestionAssetType}`;\r\n if (!isViewSuggestionApplied(viewModel, assetType, suggestion.Asset)) {\r\n viewSuggestionIds.push(suggestion.SuggestionId);\r\n }\r\n return (\r\n {i18n.getString('Ad_Strength_Suggestion_Tips_Header')}
\r\n {i18n.getString('Ad_Strength_Suggestion_Tips_Header_Desc')}
\r\n {categoryItems}\r\n +
\r\n {suggestion.SuggestionId}
\r\n {suggestion.Asset}
\r\n );\r\n });\r\n\r\n viewSuggestionMeasurement(viewModel, viewSuggestionIds);\r\n returnSuggestionMeasurement(viewModel, returnSuggestionIds);\r\n if (!_.isEmpty(items) && containerExists(suggestionContainers)) {\r\n let suggestionContent = [];\r\n const header = (\r\n \r\n { assetType === ViewSuggestionType.Headline ?\r\n i18n.getString('Ad_Strength_Suggestion_HeadlineSuggestions_Subtitle') :\r\n i18n.getString('Ad_Strength_Suggestion_DescriptionSuggestions_Subtitle')\r\n }\r\n
);\r\n const noAvailableNewAssetContentClassName = `ad-strength-suggestion-detail-no-new-asset-content ${assetType}`;\r\n const noAvailableNewAssetContainerClassName = `alert alert-info form-group ad-strength-suggestion-detail-no-new-asset-container ${assetType}`;\r\n const noAvailableNewAsset = (\r\n \r\n \r\n \r\n
);\r\n suggestionContent.push(header);\r\n suggestionContent.push(noAvailableNewAsset);\r\n suggestionContent = suggestionContent.concat(items);\r\n renderContainer(suggestionContent, suggestionContainers);\r\n updateAdStrengthSuggestion(i18n, viewModel);\r\n } else {\r\n renderNoSuggestion(noSuggestionContainers, i18n);\r\n }\r\n }\r\n } else if (_.isEmpty(viewModel.FinalUrls())) {\r\n const warningIconClassName = isForVNext ?\r\n 'status-icon iconba iconba-Warning' :\r\n 'status_warning status ad-strength-suggestion-detail-warning';\r\n const warningIconStyle = isForVNext ?\r\n { paddingRight: '5px', color: 'red' } :\r\n { paddingRight: '5px' };\r\n const noFinalUrl = (\r\n \r\n \r\n {i18n.getString('Ad_Strength_Suggestion_NoSuggestion_Add_Final_URL')}\r\n
\r\n );\r\n // Add a final URL to see more recommendations.\r\n renderContainer(noFinalUrl, noSuggestionContainers);\r\n } else {\r\n renderNoSuggestion(noSuggestionContainers, i18n);\r\n }\r\n });\r\n};\r\n\r\nconst hideAdStrengthSuggestionContainer = () => {\r\n const container = $('.ad-strength-suggestions-detail');\r\n if (containerExists(container)) {\r\n _.first(container).style.display = 'none';\r\n }\r\n};\r\n\r\nexport const viewInlineSuggestion = (\r\n i18n,\r\n viewModel,\r\n repository,\r\n assetType,\r\n action,\r\n isForVNext\r\n) => {\r\n const suggestionContanerClassName = `ad-strength-suggestion-detail-suggestions-container ${assetType}`;\r\n const noSuggestionContainerClassName = `ad-strength-suggestion-detail-nosuggestion-container ${assetType}`;\r\n const currentActionClasName = 'ad-strength-suggestion-current-action';\r\n\r\n let combinedClickViewIdeas = viewModel.clickViewIdeas || [];\r\n combinedClickViewIdeas = combinedClickViewIdeas.concat([action]);\r\n // eslint-disable-next-line no-param-reassign\r\n viewModel.clickViewIdeas = _.uniq(combinedClickViewIdeas);\r\n\r\n let title = assetType === ViewSuggestionType.Headline ?\r\n i18n.getString('Ad_Strength_Suggestion_HeadlineSuggestions') :\r\n i18n.getString('Ad_Strength_Suggestion_DescriptionSuggestions');\r\n switch (action) {\r\n case 'LongerHeadlines':\r\n title = i18n.getString('Ad_Strength_Suggestion_HeadlineSuggestions_LongerHeadlines');\r\n break;\r\n case 'LongerDescriptions':\r\n title = i18n.getString('Ad_Strength_Suggestion_DescriptionSuggestions_LongerDescriptions');\r\n break;\r\n case 'DistinctHeadlines':\r\n title = i18n.getString('Ad_Strength_Suggestion_HeadlineSuggestions_DistinctHeadlines');\r\n break;\r\n case 'DistinctDescriptions':\r\n title = i18n.getString('Ad_Strength_Suggestion_DescriptionSuggestions_DistinctDescriptions');\r\n break;\r\n default:\r\n break;\r\n }\r\n const content = (\r\n \r\n hideAdStrengthSuggestionContainer()}\r\n onKeyPress={() => hideAdStrengthSuggestionContainer()}\r\n />\r\n
\r\n );\r\n const container = $('.ad-strength-suggestions-detail');\r\n if (containerExists(container)) {\r\n renderSuggestionContent(\r\n container,\r\n content,\r\n repository,\r\n i18n,\r\n assetType,\r\n viewModel,\r\n isForVNext\r\n );\r\n }\r\n};\r\n\r\nexport const AdStrengthSuggestion = ({\r\n i18n,\r\n inlineSuggestionsEnabled,\r\n suggestion,\r\n viewModel,\r\n appState,\r\n token,\r\n odataPath,\r\n isForVNext,\r\n}) => {\r\n const { action, suggestionType } = suggestion;\r\n const repository = new AdStrengthSuggestionRepository({\r\n viewModel,\r\n appState,\r\n token,\r\n odataPath,\r\n });\r\n\r\n if (!inlineSuggestionsEnabled || suggestionType === ViewSuggestionType.None) {\r\n return '';\r\n }\r\n\r\n return (\r\n \r\n { title }\r\n
\r\n \r\n \r\n {action}
\r\n { assetType === ViewSuggestionType.Headline ? viewHeadlineSuggestionTips(i18n) : null }\r\n \r\n {i18n.getString('Ad_Strength_Suggestion_NoSuggestion')}\r\n \r\n \r\n {i18n.getString('Ad_Strength_Suggestion_NoSuggestion_Help')}\r\n \r\n
\r\n );\r\n renderContainer(noSuggestion, container);\r\n};\r\n\r\nconst renderUpdateSuggestion = (i18n, viewModel, assetType) => {\r\n let suggestions = $(`.ad-strength-suggestion-detail-suggestion.${assetType}`);\r\n if (!containerExists(suggestions)) {\r\n suggestions = $(`.ad-strength-suggestion-detail-suggestion-disabled.${assetType}`);\r\n }\r\n if (!containerExists(suggestions)) {\r\n return;\r\n }\r\n let hiddenSuggestionCount = 0;\r\n let viewModelShowCount = 0;\r\n let availableNewAsset = true;\r\n if (assetType === ViewSuggestionType.Headline) {\r\n viewModelShowCount = viewModel.showHeadlineCount();\r\n availableNewAsset = viewModelShowCount < maxHeadlineCount;\r\n } else if (assetType === ViewSuggestionType.Description) {\r\n viewModelShowCount = viewModel.showDescriptionCount();\r\n availableNewAsset = viewModelShowCount < maxDescriptionCount;\r\n } else {\r\n return;\r\n }\r\n const type = assetType === ViewSuggestionType.Headline ? 'Headline' : 'Description';\r\n _.each(suggestions, (suggestion) => {\r\n const content = suggestion.lastChild;\r\n if (!_.isEmpty(content)) {\r\n const suggestionContent = content.textContent.toLowerCase();\r\n const index = _.findIndex(_.range(viewModelShowCount), i =>\r\n suggestionContent === `${viewModel[`${type}${i}`]()}`.toLowerCase());\r\n if (index !== -1) {\r\n suggestion.style.display = 'none';\r\n hiddenSuggestionCount += 1;\r\n } else {\r\n suggestion.style.display = 'inline-block';\r\n }\r\n }\r\n });\r\n\r\n const noAvailableNewAssetContainer = $(`.ad-strength-suggestion-detail-no-new-asset-container.${assetType}`);\r\n\r\n const index = assetType === ViewSuggestionType.Headline ?\r\n _.findIndex(\r\n _.range(viewModel.showHeadlineCount()),\r\n i => _.isEmpty(`${viewModel[`Headline${i}`]()}`)\r\n ) :\r\n _.findIndex(\r\n _.range(viewModel.showDescriptionCount()),\r\n i => _.isEmpty(`${viewModel[`Description${i}`]()}`)\r\n );\r\n const hasEmptyAssetToAdd = index !== -1;\r\n\r\n if (!hasEmptyAssetToAdd && !availableNewAsset && hiddenSuggestionCount < suggestions.length) {\r\n const noAvailableNewAssetContent = assetType === ViewSuggestionType.Headline ?\r\n i18n.getString('Ad_Strength_Suggestion_NoSuggestion_Headline_Number_Limit') :\r\n i18n.getString('Ad_Strength_Suggestion_NoSuggestion_Description_Number_Limit');\r\n if (containerExists(noAvailableNewAssetContainer)) {\r\n _.first(noAvailableNewAssetContainer).style.display = 'flex';\r\n }\r\n const noAvailableNewAssetContentContainer = $(`.ad-strength-suggestion-detail-no-new-asset-content.${assetType}`);\r\n renderContainer(noAvailableNewAssetContent, noAvailableNewAssetContentContainer);\r\n\r\n // Disable all suggestions\r\n _.each(suggestions, (suggestion) => {\r\n suggestion.className = `ad-strength-suggestion-detail-suggestion-disabled ${assetType}`;\r\n });\r\n } else {\r\n if (containerExists(noAvailableNewAssetContainer)) {\r\n _.first(noAvailableNewAssetContainer).style.display = 'none';\r\n }\r\n\r\n // Enable all suggestions\r\n _.each(suggestions, (suggestion) => {\r\n suggestion.className = `ad-strength-suggestion-detail-suggestion ${assetType}`;\r\n });\r\n }\r\n\r\n // No recommendations available.\r\n const noSuggestionContainers = $(`.ad-strength-suggestion-detail-nosuggestion-container.${assetType}`);\r\n if (hiddenSuggestionCount === suggestions.length) {\r\n renderNoSuggestion(noSuggestionContainers, i18n);\r\n } else {\r\n renderContainer('', noSuggestionContainers);\r\n }\r\n};\r\n\r\nexport const updateAdStrengthSuggestion = (i18n, viewModel) => {\r\n const container = $('.ad-strength-suggestions-detail');\r\n if (containerExists(container)\r\n && _.first(container).style.display === 'block') {\r\n renderUpdateSuggestion(i18n, viewModel, ViewSuggestionType.Headline);\r\n renderUpdateSuggestion(i18n, viewModel, ViewSuggestionType.Description);\r\n }\r\n};\r\n\r\nexport const renewAdStrengthSuggestion = (options) => {\r\n const {\r\n i18n, viewModel, appState, token, odataPath, isForVNext,\r\n } = options;\r\n const container = $('.ad-strength-suggestions-detail');\r\n // Renew the suggestions when suggestion pannel is open\r\n if (containerExists(container)\r\n && _.first(container).style.display === 'block') {\r\n const headlineConatiner = container.find('.ad-strength-suggestion-detail-suggestions-container.headline');\r\n const descriptionConatiner = container.find('.ad-strength-suggestion-detail-suggestions-container.description');\r\n let suggestionType = null;\r\n if (containerExists(headlineConatiner)) {\r\n suggestionType = ViewSuggestionType.Headline;\r\n } else if (containerExists(descriptionConatiner)) {\r\n suggestionType = ViewSuggestionType.Description;\r\n }\r\n\r\n let action = null;\r\n const currentActionContainer = container.find('.ad-strength-suggestion-current-action');\r\n if (containerExists(currentActionContainer)) {\r\n action = _.first(currentActionContainer).textContent;\r\n }\r\n\r\n if (!_.isEmpty(suggestionType)) {\r\n const repository = new AdStrengthSuggestionRepository({\r\n viewModel,\r\n appState,\r\n token,\r\n odataPath,\r\n });\r\n viewInlineSuggestion(i18n, viewModel, repository, suggestionType, action, isForVNext);\r\n }\r\n }\r\n};\r\nexport const isViewSuggestionApplied = (viewModel, assetType, suggestionContent = '') => {\r\n let viewModelShowCount = 0;\r\n let type;\r\n if (assetType === ViewSuggestionType.Headline) {\r\n viewModelShowCount = viewModel.showHeadlineCount() > maxHeadlineCount ?\r\n maxHeadlineCount : viewModel.showHeadlineCount();\r\n type = 'Headline';\r\n } else if (assetType === ViewSuggestionType.Description) {\r\n viewModelShowCount = viewModel.showDescriptionCount() > maxDescriptionCount ?\r\n maxDescriptionCount : viewModel.showDescriptionCount();\r\n type = 'Description';\r\n }\r\n const index = _.findIndex(_.range(viewModelShowCount), i =>\r\n suggestionContent.toLowerCase() === `${viewModel[`${type}${i}`]()}`.toLowerCase());\r\n\r\n return (index !== -1);\r\n};\r\n\r\nexport const viewSuggestionMeasurement = (viewModel, viewSuggestionIds) => {\r\n let combinedViewSuggestionIds = viewModel.viewSuggestionIds || [];\r\n combinedViewSuggestionIds = combinedViewSuggestionIds.concat(viewSuggestionIds);\r\n viewModel.viewSuggestionIds = _.uniq(combinedViewSuggestionIds);\r\n};\r\n\r\nexport const applySuggestionMeasurement = (viewModel, suggestionId) => {\r\n const combinedApplySuggestionIds = viewModel.applySuggestionIds || [];\r\n combinedApplySuggestionIds.push(suggestionId);\r\n viewModel.applySuggestionIds = _.uniq(combinedApplySuggestionIds);\r\n};\r\n\r\nexport const returnSuggestionMeasurement = (viewModel, returnSuggestionIds) => {\r\n let combinedReturnSuggestionIds = viewModel.returnSuggestionIds || [];\r\n combinedReturnSuggestionIds = combinedReturnSuggestionIds.concat(returnSuggestionIds);\r\n viewModel.returnSuggestionIds = _.uniq(combinedReturnSuggestionIds);\r\n};\r\n\r\n/*\r\n * Attaches focus, input event listeners to ad text fields\r\n */\r\nexport const attachAdStrengthSuggestionHelpers = ({\r\n element,\r\n viewModel,\r\n appState,\r\n token,\r\n odataPath,\r\n assetType,\r\n i18n,\r\n}) => {\r\n // add the class so that click in the input will not trigger picker to be hidden\r\n element.addClass('ad-strength-suggestion-helper-area');\r\n\r\n element.on('input keyup focus', (event) => {\r\n const { type, target, key } = event;\r\n\r\n const {\r\n selectionStart, selectionEnd,\r\n } = target;\r\n // Ignore if any text is selected, we are only interested in the cursor\r\n if (selectionStart !== selectionEnd) {\r\n return;\r\n }\r\n\r\n // Ignore escape key up since it shouldn't prompt any helper\r\n if (type === 'keyup' && key === 'Escape') {\r\n return;\r\n }\r\n\r\n if (_.isEmpty(controller)) {\r\n controller = new AdStrengthSuggestionController({\r\n container: $(document.body),\r\n appState,\r\n token,\r\n odataPath,\r\n i18n,\r\n });\r\n }\r\n\r\n controller.getAdStrengthSuggestion({\r\n assetType,\r\n target,\r\n input: target.value,\r\n viewModel,\r\n isInitPicker: type === 'focus',\r\n });\r\n });\r\n};\r\n","/* eslint-disable jsx-a11y/label-has-for */\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { AdStrengthScore } from './ad-strength-score';\r\nimport { AdStrengthRepository } from './ad-strength-repository';\r\nimport { generateSuggestion, sortSuggestions } from './ad-strength-helper';\r\nimport { updateAdStrengthSuggestion, renewAdStrengthSuggestion } from './rsa-ad-strength-suggestion-helper';\r\n\r\nexport class AdStrengthView extends React.Component {\r\n static propTypes = {\r\n className: PropTypes.string,\r\n adId: PropTypes.number.isRequired,\r\n edm: PropTypes.objectOf(PropTypes.any).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n jsdata: PropTypes.objectOf(PropTypes.any).isRequired,\r\n viewModel: PropTypes.objectOf(PropTypes.any).isRequired,\r\n isForVNext: PropTypes.bool,\r\n inlineSuggestionsEnabled: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n className: 'responsive-search-ad-strength-view',\r\n isForVNext: false,\r\n inlineSuggestionsEnabled: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {};\r\n this.subscriptions = {};\r\n this.repository = new AdStrengthRepository({\r\n adId: props.adId,\r\n edm: props.edm,\r\n jsdata: props.jsdata,\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData();\r\n\r\n const lazyFetchData = _.debounce(() => this.fetchData(), 1000);\r\n\r\n _.each(_.range(15), (i) => {\r\n this.subscriptions[`Headline${i}`] = this.props.viewModel[`Headline${i}`].subscribe(() => {\r\n lazyFetchData();\r\n });\r\n this.subscriptions[`Headline${i}Position`] = this.props.viewModel[`Headline${i}Position`].subscribe(() => {\r\n lazyFetchData();\r\n });\r\n });\r\n _.each(_.range(4), (i) => {\r\n this.subscriptions[`Description${i}`] = this.props.viewModel[`Description${i}`].subscribe(() => {\r\n lazyFetchData();\r\n });\r\n this.subscriptions[`Description${i}Position`] = this.props.viewModel[`Description${i}Position`].subscribe(() => {\r\n lazyFetchData();\r\n });\r\n });\r\n if (this.props.inlineSuggestionsEnabled) {\r\n this.props.viewModel.FinalUrls.extend({\r\n rateLimit: 1000,\r\n });\r\n this.subscriptions.FinalUrls = this.props.viewModel.FinalUrls.subscribe(() => {\r\n renewAdStrengthSuggestion(_.pick(this.props, 'i18n', 'viewModel', 'appState', 'token', 'odataPath', 'isForVNext'));\r\n });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n _.each(this.subscriptions, subscription => subscription.dispose());\r\n this.subscriptions = {};\r\n }\r\n\r\n fetchData() {\r\n if (!_.isNull(this.props.edm.currentAccount) || !_.isNull(this.props.viewModel.accountId)) {\r\n this.repository.fetchAdStrength(this.props.viewModel)\r\n .then((response) => {\r\n this.parseAdStrengthActionItems(response);\r\n });\r\n }\r\n }\r\n\r\n parseAdStrengthActionItems(response) {\r\n const {\r\n i18n,\r\n viewModel,\r\n } = this.props;\r\n const {\r\n Strength,\r\n ActionItems,\r\n } = response;\r\n\r\n const assets = {\r\n headlines: _.filter(_.map(_.range(15), i => _.result(viewModel, `Headline${i}`)), i => _.size(i) > 0),\r\n descriptions: _.filter(_.map(_.range(4), i => _.result(viewModel, `Description${i}`)), i => _.size(i) > 0),\r\n headlinePins: _.filter(_.range(15), i => _.result(viewModel, `Headline${i}Position`) !== 'None'),\r\n descriptionPins: _.filter(_.range(4), i => _.result(viewModel, `Description${i}Position`) !== 'None'),\r\n };\r\n const suggestions = _.map(ActionItems, item => generateSuggestion({\r\n i18n,\r\n assets,\r\n actionItem: item,\r\n strength: Strength,\r\n }));\r\n const sortedSuggestions = sortSuggestions(suggestions);\r\n\r\n this.setState({\r\n label: i18n.getString(`Ad_Strength_Score_${Strength}`),\r\n strength: Strength,\r\n suggestions: sortedSuggestions.slice(0, 4),\r\n });\r\n\r\n if (this.props.inlineSuggestionsEnabled) {\r\n // Update the corresponding suggestions when all ad strengthes are updated\r\n updateAdStrengthSuggestion(i18n, viewModel);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { DeterministicView } from '@bingads-webui/deterministic-view';\r\nimport { AdStrengthView } from './ad-strength-view';\r\n\r\nexport class ResponsiveSearchAdStrengthView extends DeterministicView {\r\n initialize({\r\n adId,\r\n edm,\r\n i18n,\r\n jsdata,\r\n scope,\r\n viewModel,\r\n isForVNext,\r\n inlineSuggestionsEnabled,\r\n appState,\r\n token,\r\n odataPath,\r\n }) {\r\n super.initialize();\r\n\r\n this.viewRef = React.createRef();\r\n this.view = (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n - \r\n {_.map(this.state.suggestions, suggestion => (\r\n
- \r\n \r\n {suggestion.suggestion}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nAIGenAssetContextualAttribute.propTypes = {\r\n target: PropTypes.shape({}).isRequired,\r\n container: PropTypes.shape({ offset: PropTypes.func }),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isAIGeneratedAsset: PropTypes.bool.isRequired,\r\n improveMMAOption: PropTypes.shape({\r\n type: PropTypes.string,\r\n }),\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n};\r\n\r\n/*\r\n * Attaches event listeners to on the light bulb icon to show contextual attribute\r\n */\r\nexport const attachAIGenAssetContextualAttribute = ({\r\n element,\r\n i18n,\r\n isAIGeneratedAsset,\r\n improveMMAOption,\r\n newI18n,\r\n}) => {\r\n if (!containerExists($('.rsa-ai-generated-asset-container'))) {\r\n const aiGendAssetCAContainer = $('\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {content}\r\n
\r\n ');\r\n aiGendAssetCAContainer.appendTo($(document.body));\r\n }\r\n\r\n element.on('mouseenter mouseout keydown', (event) => {\r\n const { key, target, type } = event;\r\n const existingContextualAttributeContainer = $('.rsa-ai-generated-asset-container');\r\n if (containerExists(existingContextualAttributeContainer)) {\r\n if (type === 'mouseenter' || (type === 'keydown' && key === 'Enter')) {\r\n // Hide previous contextual attribute pop-up\r\n ReactDOM.unmountComponentAtNode(_.first(existingContextualAttributeContainer));\r\n\r\n // Show current contextual attribute pop-up\r\n const contextualAttributeContainer = _.first(existingContextualAttributeContainer);\r\n ReactDOM.render(React.createElement(AIGenAssetContextualAttribute, {\r\n target,\r\n i18n,\r\n isAIGeneratedAsset,\r\n improveMMAOption,\r\n newI18n,\r\n }), contextualAttributeContainer);\r\n } else if (type === 'mouseout') {\r\n // Hide current contextual attribute pop-up\r\n ReactDOM.unmountComponentAtNode(_.first(existingContextualAttributeContainer));\r\n }\r\n }\r\n });\r\n};\r\n"],"names":["ReportingProps","i18n","PropTypes","formatDate","isRequired","formatPercent","getCurrencySymbol","getString","isReady","parseDate","parseDecimal","instrumentationSchema","scenario","name","value","activity","reactRouterLocation","pathname","search","hash","reactRouterMatch","params","path","url","isExact","reactRouterHistory","go","goBack","push","instrumentation","reportList","reportsTree","children","reports","isValidCreateReportId","isValidCategoryId","reportDescription","what","why","reportDefinition","apiKey","description","logger","mark","trace","error","identityDetails","user","Id","Name","ParentCustomerId","customer","lcid","updateId","permissions","reportSchema","repository","getDetailsByExecutionId","servicesEndpoints","CampaignAPI","ClientCenterUIAPI","Token","customizedUIBlockerStyle","backgroundColor","display","alignItems","getImageExtensionsPaneStyle","_","_ref","palette","_ref$iconFontFamily","iconFontFamily","border","panelFooter","background","bottom","position","marginLeft","cropPanel","height","overflowY","marginBottom","color","float","concat","white","neutralSecondaryAlt","borderRadius","boxSizing","fontWeight","margin","themePrimary","content","fontFamily","marginRight","_objectSpread","width","minWidth","multiImageInnerCarouselStyles","overflow","fontSize","lineHeight","paddingTop","textAlign","padding","extend","floatButtonStyle","floatButton","neutralSecondary","marginTop","borderColor","borderWidth","outline","paddingLeft","container","paddingBottom","borderTop","borderBottom","addIcon","top","themeSecondary","listContainer","alertBanner","labelContainer","overrideImageRecommendationClasses","panelHeading","panelTitle","flexGrow","seeAll","maxWidth","DescriptionView","localizedText","selectedImgExtensionsForAssociation","limit","className","_TL_","_jsx","defaultProps","getThumbnailServiceUrl","bingUrl","w","h","baseUrl","Url","URL","urlParams","URLSearchParams","Object","keys","forEach","key","set","toString","getUriWithParam","c","IMAGE_WIDTH_PX","getImageExtensionItemThumbnailUrl","item","itemImage","Images","image","Asset","SubType","ImageUrl","getImageExtensionListStyles","justifyContent","cellWidth","cellHeight","flexWrap","gap","getImageExtensionItemStyles","components","_ref2","itemContainer","cursor","pointerEvents","opacity","borderStyle","left","right","imageExtensionItem","zIndex","btnItem","textItem","textDecoration","selectRadio","imageContainer","boxShadow","deleteButton","itemZIndex","themeDarkAlt","editButton","noImageFallbackContainer","justifyItems","neutralLighter","ImageExtensionItemPreview","onDelete","onSelect","onEditImage","enableEdit","index","classes","useDefaultStyles","_useState","useState","_useState2","_slicedToArray","hovered","setHovered","toggleHoverState","imageUrl","disabledToggleToolTip","_jsxs","ConditionalTooltipHost","condition","disabled","calloutProps","gapSpace","classnames","selected","onMouseEnter","undefined","onMouseLeave","onClick","role","id","tabIndex","onKeyDown","submitEvent","Image","src","alt","AltText","xmlns","viewBox","d","type","checked","onChange","Glyphicon","e","stopPropagation","glyph","iconStyle","ImageExtensionItemSeeMoreLess","onSelectShowAll","seeMoreItemsCount","seeLess","text","imageExtensionContainer","FontIcon","iconName","ImageExtensionsList","items","imageContainerWidth","setImageContainerWidth","imageContainerNode","useRef","_useState3","_useState4","showAll","setShowAll","itemsSize","initialItemCount","Math","floor","hasSeeMoreLess","useEffect","handleResize","current","offsetWidth","window","addEventListener","removeEventListener","measuredRef","useCallback","node","CELL_TYPE","ref","FocusZone","List","onRenderCell","cellType","getCellType","renderCount","getItemCountForPage","getDialogImageExtensionStyle","reactUIBlockerStyle","FieldType","FieldLimit","fieldsConfig","labelKeyForLocalization","helpTopic","required","validators","validate","val","trim","msg","runValidators","i","_validators$i","validateField","fieldType","fieldValue","callback","errors","fieldConfig","field","CreateImageExtensionDialog","createImageExtension","selectedImage","onCreateSuccess","onCancel","adCreatorScenario","isImageAltTextPrefillEnabled","dialogContentProps","title","loading","setLoading","fieldValues","setFieldValues","_useState5","_useState6","fieldErrors","setFieldErrors","_useState7","_useState8","disableCreate","setDisableCreate","logActivity","useMemo","createActivity","logTrace","apply","arguments","onCreateButtonClicked","validateAllFields","Promise","finally","then","JSON","stringify","onFieldChangeFactory","newValue","_defineProperty","onCancelClick","onDismiss","prefillAltText","imageName","Dialog","hidden","modalProps","isBlocking","topOffsetFixed","isClickableOutsideFocusTrap","UiBlocker","blocking","loadingText","Stack","tokens","childrenGap","map","placeholder","TextField","label","onRenderLabel","props","originalRenderer","Fragment","HelpPopupInline","topic","ariaLabel","errorMessage","DialogFooter","PrimaryButton","DefaultButton","DeleteImageExtensionDialog","deleteImageExtension","selectedImageDelete","onDeleteSuccess","getImagesFromImageList","imageList","imageObj","IdString","constants","aspectRatios","Type","associationType","CropX","CropSettings","SourceX","CropY","SourceY","CropHeight","SourceHeight","CropWidth","SourceWidth","Src","isImageExtensionCommitedToServer","getImageSuggestionPanelStyles","panel","panelHeader","paddingRight","alignSelf","backButton","theme","buttonContainer","ImageRecommendationsPanel","images","themes","onSelectImage","loadNextPage","hasMore","activeImages","setActiveImages","activeTheme","setActiveTheme","themeNames","_toConsumableArray","onSwitchTheme","rawImages","chain","filter","first","result","img","onClickCancel","onRenderHeader","IconButton","iconProps","onRenderFooterContent","horizontal","Item","onSelectImageInternal","_activeImages$index","fullUrl","suggestionId","Panel","isOpen","isFooterAtBottom","PanelType","custom","customWidth","styles","panelStylesProp","FluentProvider","webLightTheme","CopilotTab","active","onActiveChange","CopilotTabItem","tabKey","FluentImagePicker","pageSize","loadMoreImages","hasMoreImages","imageCellWidth","imageCellHeight","imageSources","ImageExtensionsPaneView","onImgExtensionSelected","advertiserCustomerId","accountId","updateImageExtension","legacyI18n","dataModelUtil","imagePath","maxImageExtensionsPerAdGroup","perfMarker","preferenceService","oDataConfig","suggestionState","dispatchSuggestionState","suggestionPoller","urlPrefix","onUpdateUrlPrefix","onUpdateUrlValue","dateFormat","timeZone","activityLogger","isAADUser","assetLibraryEventHandler","serverContext","createChild","addImageChildPerfmarker","_useImagePicker","useImagePicker","displayImagePicker","setDisplayImagePicker","displayWebsiteSuggestionTab","selectedMediaPanelSource","setSelectedMediaPanelSource","displayCreateImageExtView","setDisplayCreateImageExtView","displayDeleteImageExtView","setDisplayDeleteImageExtView","setSelectedImage","_useState9","_useState10","setSelectedImageDelete","_useState11","_useState12","selectedImageEligibleLayouts","setSelectedImageEligibleLayouts","_useState13","_useState14","selectedImageEdit","setSelectedImageEdit","_useState15","_useState16","selectedImageEditIndex","setSelectedImageEditIndex","_useState17","_useState18","showEditPanel","setShowEditPanel","emptyFinalUrl","reachLimit","size","_getAdCreatorInstrume","getAdCreatorInstrumentation","websiteSuggestionCarouselActivity","editImageActivity","closeEditImageView","closeCreateImageExtView","closeDeleteImageExtView","isAllUploadFlowImageUpscaleEnabled","_useAssetLibraryImage","useAssetLibraryImagePicker","cid","aid","onNewImageSelected","imagePlacements","source","imagePickerError","setImagePickerError","clearImagePickerError","uploadImage","processUploadedImage","onProcessUploadComplete","minSize","minUploadSize","supportImageUpscale","addImageByUrl","getStockImages","onSelectStockImage","onImageSelected","onImagesSelected","socialMediaDataSource","customMediaSourceConfig","_suggestionState$sugg","suggestion","_suggestionState$caro","carousel","_ref4","dynamic","RSAImageExtensionCrop","RSAImageRecommendationReplace","_useContext","useContext","RecommendationContext","recommendationContext","_useState19","_useState20","imagesToSuggest","setImagesToSuggest","_useState21","_useState22","carouselErrorMessage","setCarouselErrorMessage","_useState23","_useState24","isSuggestionsPanelOpen","setIsSuggestionsPanelOpen","imageAssets","copilotTracking","_useMemo","carouselState","isError","panelState","panelImages","_ref5","suggestionFromCopilot","carouselFromCopilot","_ref6","suggestionImages","suggestionInProgress","inProgress","truncatedImages","slice","messageInfo","message","isLoading","isEmpty","length","MessageBarType","trackSelectedImageAssets","ImageAssets","imageId","processedImage","idString","reject","WebsiteCarousel","SuggestionStatus","SelectSuggestionError","SelectSuggestionComplete","selectedIndex","onClose","panelClassName","ExtensionImagesControl","genericImage","isForVNext","isStockPhotoEnabled","newI18n","preferencesService","onImageListChanged","eligibleLayouts","Alert","level","icon","dismissible","Label","align","getImageListFromMTImagesAsync","EligibleLayout","onRenderIcon","ImageSuggestionCarousel","onSelectSeeAll","isCollapsible","selectable","hideData","enablePolicyMessage","showViewAllInHeader","stylingOverrides","classOverrides","seeAllLinkText","allowToggleSelectable","getMoreImageSuggestions","AddImageCrudAdComponent","setIsOpen","newOpen","maxUploadNum","imageExperienceProps","finalUrl","finalUrlProtocol","onUpdateFinalUrl","onUpdateFinalUrlPrefix","isMultimediaAd","imageOption","defaultImageOption","managedViewSelectionState","updateManagedViewSelectionState","stockImageConfig","socialImageConfig","assetLibraryConfig","onImageAddError","imageType","eventHandler","noop","decorateUIState","computeNewItemsMtModels","model","ImageExtensionsPaneContainerBase","imageExtRepository","adContext","hasErrorInUrl","headlines","descriptions","onImageExtensionChanged","onPreviewImageChanged","cachedImageExtensionChanges","rest","_objectWithoutProperties","_excluded","_useWebsiteSuggestion","useWebsiteSuggestion","added","removed","updated","changes","setChanges","association","findAll","where","adGroupId","campaignId","query","$orderby","data","prev","imageExtensionForPreview","previewImage","previewUrl","extensionData","DisplayText","Scheduling","createImageExtensionMtModel","itemState","isItemAssociated","newCurrent","cloneDeep","newUpdateItem","ImageExtensionsPaneContainer","React","withPreference","pathLengthLimitErrorMessages","AD_TYPE_RSA","adsFields","adsFieldAlias","adsFieldLengthLimitMap","FinalUrls","Path1","Path2","DisplayUrl","MobileFinalUrls","Headlines","LongHeadlines","Descriptions","TrackingUrlTemplate","FinalUrlSuffix","UrlCustomParametersKey","UrlCustomParametersValue","notI18n","validateTextFieldValue","lengthLimit","optional","adType","getCharCountExcludingAdCustomizers","validateTextField","fieldName","validatePath","values","Property","Message","ErrorContext","Error","property","onFirstErrorHandler","alertRef","filteredErrors","Index","Code","withError","WrappedComponent","join","contentStyles","contentContainerStackToken","urlFieldStackToken","pathFieldStackToken","actionStackToken","errorStackToken","textFieldStyles","charCountDescription","root","dynamicLinkContainer","dynamicLink","selectors","inputClassName","containerStyles","minHeight","input","preview","contentContainer","overflowX","urlPath","flexFlow","wordBreak","stickyAdPreviewStyles","DynamicTextExtention","onTextFieldChange","cachedValue","showContextualMenu","setShowContextualMenu","target","setTarget","linkRef","onShowContextualMenu","preventDefault","onHideContextualMenu","menuItems","Link","componentRef","ContextualMenu","onItemClick","BaseTextField","configProps","updateItem","adsFieldId","allowNewLines","showCharRemaining","showErrorMessage","isForVnext","assets","updateSuggestionMeasurement","showDynamicTextExtention","onBlur","llmAssetsSuggestions","containerSelector","enableDKI","DKIThemeName","setCachedValue","restProps","charLimit","charRemaining","setCharRemaining","inputRef","debouncedUpdateItem","event","textValue","populatedWithFullValue","replace","dynamicErrorMessage","focus","onBlurCheck","document","activeElement","onRenderDescription","horizontalAlign","style","useAdCustomizers","updateAction","useAdStrengthSuggestion","assetType","autoComplete","component","_textElement","validateOnLoad","gapCompensation","campaignWebsite","isAutoAdsEnabled","Path1Field","Path2Field","DisplayUrlField","UrlPath","config","IsVanityUrlEnabled","_value","urlDomain","getDomain","onTextChange","verticalAlign","partial","isString","urlPrefixOptions","UrlInput","UrlTextField","getUrlPrefixAndDestination","_useMemo2","urlWithoutPrefix","setKey","onUrlPrefixChanged","newItem","getUpdatedFullUrlOnPrefixUpdate","getUpdatedFullUrlOnTextUpdate","Dropdown","options","selectedKey","dropdownLabel","grow","RSAPreviewGroupType","AdPlacementKeys","previewLayoutConfig","groupsDefinitions","groupType","placementFilterPredicate","tmp","ResponsiveSearchAdPreviewUAPLUnstyled","_ref$data","disclaimerInfo","headline","setHeadline","setDescription","urlPath1","setUrlPath1","urlPath2","setUrlPath2","contains","displayUrl","GroupsPreviewer","useGroupsPreviewerLayout","headerButtonProps","onEdit","onAddAspectRatio","onRemoveAspectRatio","evaluateAdCustomizers","getTitlePreview","evaluatedText","getDescPreview","LineText","adData","longHeadline","decoratorsData","disclaimer","imageExtension","enableCrop","adPreviewContainer","ResponsiveSearchAdPreviewUAPL","withDefaultStyles","formatRSAObject","adItem","adObject","Text","AssetType","PinnedField","UrlCustomParameters","Key","Campaign","AdGroup","formatRankingTexts","assetValues","textArr","formatAssetRankingTexts","PinButton","getPinItems","pinnedPosition","pinItems","selectedText","find","onMenuItemClick","onMenuClick","pickerContainer","querySelector","ReactDOM","CommandButton","menuIconProps","menuProps","registerIcons","icons","pinIcon","textAssetsStyles","newPositionDeleteButton","newDeleteButton","newPositionPinButton","newPinButton","pinButton","textAssetsStackToken","TextAssetFields","Headline","Description","deleteIcon","recommendationAssetTypeMap","recommendationAssetTypePluralMap","getStyles","copilotButton","TextAssets","showDeleteButton","showCopilotButton","finalUrlWithoutPrefix","existingAssets","onSuggestionsRendered","isNewTextAssetsButtonStyle","copilotButtonLabel","defaultSize","deleteButtonLabel","inputLabel","itemProperty","maxSize","_recommendationContex","postAssetEventLog","_useEventLog","useEventLog","logTextAssetMenuOpen","logTextAssetDialogOpen","logRefineTextAsset","logTextAssetApplied","logRemoveSingleAsset","logEditSingleAsset","cachedAssets","setCachedAssets","filledAssets","onAddAsset","newAssets","deletedAsset","pluralAssetType","isInRemainingInitialSuggestions","removeInitialSuggestion","recommendationId","get","asset","compact","onTextBlur","onPinChange","onDeleteAsset","splice","isPinningEnabled","TextAsset","itemClassName","CopilotDKIRecommendation","classNames","CopilotTextAssetRecommendation","currentIndex","disableReason","EMPTY_ASSET_HINTS","NO_FINAL_URL_HINT","menuButtonAriaLabel","onMenuOpen","onOperationDialogOpen","onFetch","newAsset","operationName","ActionButton","allowDisabledFocus","addLabel","Disclaimer","showAdvancedInformation","SearchCampaignCreationRevamp","DisclaimerLayout","headlinesConfig","errorMap","lessThanRequired","duplicate","lessPosition","descriptionsConfig","adFieldsConfig","assetsConfig","DestinationUrl","MobileUrl","ResponsiveSearchAdCopilotBannerWithDialog","eventLog","isCopilotEnabled","onApply","onDialogFetchAssetsSucceeded","onFetchFailed","onFetchSucceeded","onReset","logBannerRefresh","logBannerRefreshCompleted","logFetch","logFetchSucceeded","showCopilotDialog","setShowCopilotDialog","handleCopilotDialogClose","handleRefresh","handleFetchThemesSucceeded","themesList","handleApply","selectedThemes","selectedThemesAndAssets","CopilotRecommendationBanner","isToastEnabled","onRefresh","onBannerRefreshCompleted","shouldFetchRecommendations","CopilotThemesRecommendationDialog","onClosed","onFetchAssetsSucceeded","open","adsFieldsToValidate","optionalFields","requiredCompoundFields","textAssets","fieldMappings","fieldDependencies","validateTrackingUrlTemplate","validateFinalUrlSuffix","validateUrlCustomParameters","useStyles","makeStyles","ResponsiveSearchAdEditorBase","onSave","onChanged","onFetchAdStrengthV2","onFetchDisclaimerInfo","showActionBar","showInitialErrors","AdPreviewComponent","token","triggerTestUurl","showUurlTestTool","showFinalUrlSuffix","showAdCustomizers","edmCampaign","jsDataCampaign","renderImageExtension","injectSetPreviewImage","scope","editMode","saveLogAppliedSuggestionsFunc","saveAssetLibraryEventHandler","isSaving","isCanceling","InstrumentationContext","initializeAdCustomizer","deps","cachedAd","setCachedAd","cachedValuesForImageSuggestions","setCachedValuesForImageSuggestions","clientErrors","formErrors","setFormErrors","errorContextValue","finalUrlPrefix","finalUrlForRecommendation","urlField","getId","mobileUrlField","pathField","displayUrlField","isInExclusionList","setIsInExclusionList","setDisclaimerInfo","hasDisclaimer","setHasDisclaimer","setPreviewImage","setLLMAssetsSuggestions","activeKeys","setActiveKeys","shortHeadlines","singleItem","_useContext2","setRecommendationContext","_useCopilotRecommenda","useCopilotRecommendations","entityId","logRecommendationsAPIError","resetRecommendations","_useCopilotForRespons","setIsCopilotEnabled","sendCopilotBannerNotification","useBannerService","send","isCopilotRegionRestricted","feature","isRestricted","useCopilotForResponsiveSearchAd","useAssetLibraryEventHandler","logEnterFlow","logBannerGenerated","logFetchAssetsSucceeded","logApplyThemes","logSuggestionsViewed","logSuggestionsApplied","logRefineTextAssetSucceeded","logPrefillAssets","logPrefillAssetsApplied","logPrefilledAdStrength","logRemoveAssets","_useCopilotRecommenda2","useCopilotRecommendationSurvey","AssetEventFeature","RSA","triggerSurveyOnSubmit","triggerSurveyOnCancel","isPrefilled","setIsPrefilled","shouldLogPrefilledAdStrength","setShouldLogPrefilledAdStrength","applyHeadlinesCallback","setApplyHeadlinesCallback","_useState25","_useState26","applyDescriptionsCallback","setApplyDescriptionsCallback","logPrefilledAdStrengthCallback","adStrength","initialSuggestionsData","_getCopilotRecommenda","getCopilotRecommendationIdsFromThemes","descriptionRecommendationIds","headlineRecommendationIds","AdStrengthTestingNoPrefill","newThems","DKITheme","normalThemes","newHeadlines","getUniqueAssetsFromThemes","trackInitialSuggestions","AssetPropertyName","HEADLINE","newDescriptions","DESCRIPTION","displayedDescriptions","MAX_INLINE_RECOMMENDATIONS_PER_PAGE","displayedHeadlines","displayedTextAssets","viewedTextSuggestionIds","getUntrackedViewedSuggestionIds","trackViewedSuggestionIds","_ref2$suggestedAdExte","suggestedAdExtensions","logCopilotRecommendations","assetGroup","ImageList","ext","isEditing","handleCopilotBannerFetchSucceeded","assetsResponse","IsCustomerIdInExclusionList","trackReturnedTextAssets","RecommendedAssets","formattedThemesAndAssets","Themes","getFormattedThemeForApplying","getFormattedImage","onApplyCopilotRecommendation","handleFetchAssetsSucceeded","assetsRecommendationData","handleTextAssetSuggestionsRendered","textSuggestions","textSuggestionIds","formatRecommendationsToLLMSuggestions","formatToLLMSuggestion","onValidate","newErrors","errorFields","activeField","shouldValidateAllFields","f","dependantField","aliasField","incomplete","adField","isOptional","hasError","maxLength","_getUrlPrefixAndDesti","destination","validateAdUrl","displayUrlError","availableAssets","a","unpinnedSize","validateTextAssets","_newErrors","errorList","isCompoundFieldRequired","isFieldEmpty","onClearTextAssets","validatedItem","reduce","acc","removeAllInitialSuggestions","onUpdateItemByKey","prevCachedAd","updatedData","onDebouncedUpdateItemByKey","onItemBlurBykey","fieldToUpdate","_computeRankingTextsU","currentAssets","prevAssetsRankingTexts","rankingTexts","needUpdate","computeRankingTextsUpdates","evt","newPrefix","onUpdateFinalUrlValue","onSaveClicked","onCancelClicked","copilotSuggestions","disclaimerData","setClarityTag","RSANewCopilotUI","Provider","PermissionsContext","errorProperties","renderCardError","properties","renderCardTitle","helpId","TextTitle","titleKey","iconAltText","topicKey","as","headingClassName","CopilotRepositoryProvider","locale","getLocale","recommendationType","Collapse","UrlIcon","htmlFor","TextIcon","HeadlineAssetCollection","DescriptionAssetCollection","ImageIcon","DisclaimerIcon","UrlOptionsParameters","trackingUrlTemplate","finalUrlSuffix","urlCustomParameters","renderLeftColumnWithNewCopilotUI","AdStrengthTestingNoPanel","ResponsiveSearchAdStrength","onFetchAdStrength","logAdStrength","urlOptionsElement","ResponsiveSearchAdEditor","withActivityContext","withBannerService","withRecommendationContext","Adapter","AdapterFactory","convertEventToValue","functionToInject","validatedTextField","withValidation","ValidatedTextFieldWithErrors","withControlErrorHandling","withUnvalidatedControlErrors","getTextInputContainerStyles","TextInputContainer","TextFieldWithAdCustomizerInternal","validationProps","newValidationProps","validator","newData","ValidatedTextFieldWithAdCustomizer","getTextAssetRecommendationsStyles","textAssetRecommendationsContent","textAssetRecommendationsPanel","useInlineCopilotUIStyles","header","summary","TextAssetRecommendationsWithThemesPanel","_ref3","collection","availableRecommendations","maxCollectionSize","topicAriaLabel","disabledSuggestionTooltip","reportDisplayedRecommendations","recommendations","itemText","pluck","flatten","deriveSuggestedItems","allSuggestedItems","setAllSuggestedItems","suggestedItems","setSuggestedItems","selectedItemsCount","emptyFieldsCount","negate","remaningItemsCount","isFunction","onSuggestedItemToggle","itemIndex","isSelected","onSaveClick","HelpButton","count","closeButtonAriaLabel","onOuterClick","medium","focusTrapZoneProps","disableFirstFocus","SuggestedItemsMultiSelect","disableAllUnselectedSuggestions","keyIsEmpty","InlineRecommendations","singleAssetValidationPropsField","inlineRecommendationsHelpTopicKey","inlineRecommendationsHelpTopicAriaLabel","inlineRecommendationsTitle","inlineRecommendationsDisabledItemTooltip","applyRecommendation","applyRecommendations","flattenedAvailableRecommendations","uniq","_useCircularBufferVie","page","setPage","setCurrentIndex","newPage","useCircularBufferView","flattenedAvailableDKIRecommendations","flattenedAvailableNoDKIRecommendations","_useCircularBufferVie2","availableInlineRecommendations","canMoveNext","moveNext","firstAvailableKey","findKey","prevAvailbleKeyWasDefined","setPrevAvailbleKeyWasDefined","shouldForceCloseCollapse","setShouldForceCloseCollapse","firstAvailableKeyIsDefined","onAddSuggestedItem","onAddAllSuggestedItems","onMoreSuggestionsButtonClick","onCancelAddingMultipleRecommendations","onAddMultipleRecommendations","_Fragment","Separator","SuggestionSectionCollapse","RecommendationsSectionIcon","suggestedSectionTitle","showSuggestionsSectionShimmer","showMoreSuggestionsInlineButton","onMoreSuggestionsInlineButtonClick","showAddAllSuggestionsButton","addAllSuggestionsButtonText","showMoreSuggestionsButton","moreSuggestionsButtonText","disableAllSuggestions","useStyleFluent2","forceClose","allRecommendations","DKIThemeDefaultName","rsaCollectionConfig","validationPropsField","minCollectionSize","getTextAssetCollectionConfig","collectionName","unlocalizedArgs","getEmptyRecommendationsContext","SuggestionsTracker","_createClass","_classCallCheck","this","trackingData","suggestions","suggestionsReport","allTextSuggestions","view","returned","RecommendationContextProvider","finalUrls","tracking","CopilotSuggestionsTracker","updateRecommendationContext","delta","currentContext","reportRecommendations","recommendationsReport","add","HoC","displayName","getDisplayName","hoistNonReactStatics","ActivityContext","useLogRecommendationsApiError","AdsCopilot","create","Permissions","DynamicPermissions","isRegionRestricted","setIsRegionRestricted","usePostAssetEvent","shouldLog","channel","AssetChannel","WEB_UI","AssetScenario","EDIT_WORK_FLOW","CREATE_WORK_FLOW","assetGroupId","newFinalUrl","recommendationFieldMap","assetCountMap","TextAssetCollectionWithRecommendations","withInlineRecommendations","setApplyTextAssetCallback","currentCollection","currentCollectionAsset","currentCollectionAssetText","viewedCopilotSuggestions","setViewedCopilotSuggestions","logCopilotSuggestions","suggestionIds","suggestionsToLog","EventName","POST_ASSET_EVENT_NAME","EventValue","TEXT","SuggestionIds","RecordType","AssetEventRecordType","VIEWED","recommendationsField","collectionRecommendations","availableCollectionRecommendations","DKItheme","recommendation","flattenedCollectionRecommendations","recommendationsMap","SuggestionId","RecommendationId","object","getSuggestionIds","displayedRecommendations","displayedRecommendationsIds","addAssetSuggestion","applySuggestionIds","collectionData","isAbleToAddSuggestion","addAllAssetSuggestion","texts","newViewedCopilotSuggestions","ThemeProvider","ComponentSettings","core","ThemeFluent","I18nContext","headlineConfig","getCollectionAsset","getAvailableRecommendations","llmSuggestions","Perspectives","SuggestionLanguage","Suggestions","SummaryReason","currentCollectionHeadlines","currentCollectionDescriptions","_llmSuggestions$Sugge","Perspective","headlineSuggestions","Reason","SrcId","descriptionSuggestions","PitchingPoint","Order","SuggestionState","StrengthScore","Poor","Average","Good","Excellent","ViewSuggestionType","getStrengthScore","strength","AdStrengthScore","_ref$isForVNext","score","chart","plotBackgroundColor","plotBorderWidth","plotShadow","colors","credits","enabled","plotOptions","pie","allowPointSelect","dataLabels","endAngle","startAngle","series","animation","innerSize","showInLegend","states","hover","inactive","tooltip","$","y","HighchartReactWrapper","getAssets","pinPosition","AdStrengthRepository","adId","edm","jsdata","viewModel","currentAccount","entitySet","Ads","$call","ad","toJSON","currentCustomer","Accounts","$withKey","Ad","cacheResponse","formatUrl","odataPath","appState","AdStrengthSuggestionRepository","requestBody","option","contentType","headers","authorization","stringifySync","resolve","rawData","AdStrengthSuggestionPicker","_React$Component","_callSuper","_inherits","$target","targetOffset","offset","containerOffset","outerHeight","_this$props","applySuggestionMeasurement","contentView","_this","_this$props2","itemsToDisplay","getDisplayPosition","containerStyle","pickerTitle","href","body","currentFinalUrl","TIPS_CATEGORIES","numItems","viewHeadlineSuggestionTipCategoryItems","category","targetContainer","expandingIcon","detailContainer","parent","expendingContainer","isDetailSuggestionVisible","is","hide","removeClass","addClass","show","manageVisiblity","num","itemsWithSubtitle","renderContainer","viewHeadlineSuggestionTips","categoryItems","onKeyPress","textContent","suggestionToAdd","showHeadlineCount","showDescriptionCount","hideAdStrengthSuggestionContainer","containerExists","viewInlineSuggestion","action","suggestionContanerClassName","noSuggestionContainerClassName","combinedClickViewIdeas","clickViewIdeas","fetchAdStrengthSuggestion","suggestionContainers","noSuggestionContainers","warningIconClassName","warningIconStyle","noFinalUrl","renderNoSuggestion","ErrorCode","RSAV2AssetsSuggestions","allSuggestions","toLowerCase","viewSuggestionIds","returnSuggestionIds","suggestionAssetType","suggestionClassName","addSymbolClassName","idClassName","contentClassName","isViewSuggestionApplied","viewSuggestionMeasurement","returnSuggestionMeasurement","suggestionContent","noAvailableNewAssetContentClassName","noAvailableNewAssetContainerClassName","noAvailableNewAsset","updateAdStrengthSuggestion","renderSuggestionContent","noSuggestion","renderUpdateSuggestion","hiddenSuggestionCount","viewModelShowCount","availableNewAsset","lastChild","noAvailableNewAssetContainer","noAvailableNewAssetContent","noAvailableNewAssetContentContainer","combinedViewSuggestionIds","combinedApplySuggestionIds","combinedReturnSuggestionIds","AdStrengthView","state","subscriptions","_this2","fetchData","lazyFetchData","subscribe","inlineSuggestionsEnabled","rateLimit","headlineConatiner","descriptionConatiner","suggestionType","currentActionContainer","renewAdStrengthSuggestion","subscription","dispose","_this3","fetchAdStrength","response","parseAdStrengthActionItems","Strength","ActionItems","headlinePins","descriptionPins","actionItem","headlineCount","descriptionCount","pinCount","generateSuggestion","sortedSuggestions","sortSuggestions","setState","HelpPopup","ResponsiveSearchAdStrengthView","_DeterministicView","_superPropGet","viewRef","el","DeterministicView","AIGenAssetContextualAttribute","isAIGeneratedAsset","improveMMAOption","attachAIGenAssetContextualAttribute","element","appendTo","on","existingContextualAttributeContainer","contextualAttributeContainer"],"sourceRoot":""}