\r\n {\r\n loading ?\r\n
\r\n );\r\n};\r\n\r\nImagePreview.propTypes = {\r\n loading: PropTypes.bool,\r\n loadingText: PropTypes.string,\r\n\r\n baseImageSrc: PropTypes.string,\r\n baseImageWidth: PropTypes.number,\r\n resizeImageHeight: PropTypes.number,\r\n\r\n aspectRatio: PropTypes.number,\r\n cropSettings: PropTypes.shape({\r\n SourceX: PropTypes.number,\r\n SourceY: PropTypes.number,\r\n SourceWidth: PropTypes.number,\r\n SourceHeight: PropTypes.number,\r\n }),\r\n};\r\n\r\nImagePreview.defaultProps = {\r\n loading: false,\r\n loadingText: '',\r\n baseImageSrc: null,\r\n baseImageWidth: null,\r\n resizeImageHeight: undefined,\r\n cropSettings: null,\r\n aspectRatio: null,\r\n};\r\n","export const getEffectPickerStyles = () => ({\r\n container: {\r\n margin: '0 auto',\r\n display: 'table',\r\n },\r\n label: {\r\n margin: '24px 0 12px 8px',\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n fontWeight: 600,\r\n },\r\n labelWrapper: {\r\n maxWidth: 78,\r\n '& > span': {\r\n textOverflow: 'ellipsis',\r\n overflow: 'hidden',\r\n display: '-webkit-box',\r\n WebkitLineClamp: 2,\r\n WebkitBoxOrient: 'vertical',\r\n whiteSpace: 'normal',\r\n },\r\n },\r\n innerField: {\r\n boxSizing: 'content-box',\r\n },\r\n});\r\n","import { reduce, map } from 'underscore';\r\n\r\nimport { EffectChoiceKey, EffectChoiceOrder } from '@bingads-webui-campaign/media-common-utils';\r\n\r\nconst NoneIcon =\r\n 'data:image/svg+xml;utf8,';\r\n\r\nconst BackgroundBlurIcon =\r\n 'data:image/svg+xml;utf8,';\r\n\r\nconst BackgroundSolidColorIcon =\r\n 'data:image/svg+xml;utf8,';\r\n\r\nconst DesignerEffectsIcon =\r\n 'data:image/svg+xml;utf8,';\r\n\r\n\r\nconst commonConfig = {\r\n imageSize: { width: 32, height: 32 },\r\n};\r\n\r\nconst EffectOptions = {\r\n [EffectChoiceKey.None]: {\r\n ...commonConfig,\r\n key: EffectChoiceKey.None,\r\n imageSrc: NoneIcon,\r\n localizeKey: _TL_('None'),\r\n },\r\n [EffectChoiceKey.DesignerEffects]: {\r\n ...commonConfig,\r\n key: EffectChoiceKey.DesignerEffects,\r\n imageSrc: DesignerEffectsIcon,\r\n localizeKey: _TL_('Designer effects'),\r\n },\r\n [EffectChoiceKey.BackgroundBlur]: {\r\n ...commonConfig,\r\n key: EffectChoiceKey.BackgroundBlur,\r\n imageSrc: BackgroundBlurIcon,\r\n localizeKey: _TL_('Background blur'),\r\n },\r\n [EffectChoiceKey.BackgroundSolidColor]: {\r\n ...commonConfig,\r\n key: EffectChoiceKey.BackgroundSolidColor,\r\n imageSrc: BackgroundSolidColorIcon,\r\n localizeKey: _TL_('Background color'),\r\n disclaimerText: _TL_('Your image must have a clear subject that occupies more than 50% of the image for background color to produce a result.'),\r\n thresholdErrorText: _TL_('Your selected background color failed because this effect produces low-quality results when combined with your image.'),\r\n showDisclaimerOnChecked: false,\r\n },\r\n};\r\n\r\nexport const effectChoiceGroupOptions = map(reduce(EffectChoiceOrder, (memo, order, effectType) => {\r\n memo[order] = effectType; // eslint-disable-line no-param-reassign\r\n\r\n return memo;\r\n}, []), effectType => EffectOptions[effectType]);\r\n","const eyedropIcon = 'data:image/svg+xml;utf8,';\r\n\r\nexport const getColorPickerStyles = (showColorPicker, components, { palette = {} } = {}) => {\r\n const styles = {\r\n container: {\r\n margin: '0 auto',\r\n display: 'table',\r\n '& .ms-swatchColorPickerBodyContainer td:first-child span': {\r\n content: `url(\"${eyedropIcon}\")`,\r\n backgroundColor: palette.neutralLighter,\r\n },\r\n },\r\n label: {\r\n margin: '24px 0 7px 0',\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n fontWeight: 600,\r\n },\r\n root: {},\r\n panel: {\r\n padding: 12,\r\n background: '#FFFFFF',\r\n borderWidth: 1,\r\n borderStyle: 'solid',\r\n borderColor: palette.neutralSecondary,\r\n },\r\n overlay: {\r\n top: -379,\r\n width: 300,\r\n height: 334,\r\n backgroundColor: '#FFFFFF',\r\n opacity: 0.5,\r\n pointerEvents: 'none',\r\n },\r\n };\r\n\r\n if (showColorPicker) {\r\n styles.root = {\r\n position: 'relative',\r\n zIndex: 10,\r\n marginLeft: 32,\r\n top: -45,\r\n };\r\n }\r\n\r\n return styles;\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { FocusLock } from '@bingads-webui-react/focus-lock';\r\nimport { ColorPickerWithClickOutside } from '@bingads-webui-campaign-react/color-picker-with-click-outside';\r\n\r\nconst WrappedColorPicker = ({\r\n i18n,\r\n updateColor,\r\n color,\r\n showColorPicker,\r\n hideColorPicker,\r\n styles,\r\n}) => { // eslint-disable-line arrow-body-style\r\n return (\r\n \r\n { baseImageSrc &&\r\n
\r\n }\r\n \r\n {\r\n showColorPicker ?\r\n (\r\n \r\n { updateColor(event, changedColor); }}\r\n alphaType=\"none\"\r\n showPreview={false}\r\n outsideClickIgnoreClass=\"color-picker-toggler\"\r\n strings={{\r\n hex: i18n.getString(_TL_('Hex')),\r\n red: i18n.getString(_TL_('Red')),\r\n green: i18n.getString(_TL_('Green')),\r\n blue: i18n.getString(_TL_('Blue')),\r\n alpha: i18n.getString(_TL_('Alpha')),\r\n }}\r\n styles={styles}\r\n />\r\n \r\n ) : null\r\n }\r\n
\r\n );\r\n};\r\n\r\n\r\nWrappedColorPicker.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n updateColor: PropTypes.func.isRequired,\r\n color: PropTypes.shape({\r\n r: PropTypes.number,\r\n g: PropTypes.number,\r\n b: PropTypes.number,\r\n }).isRequired,\r\n showColorPicker: PropTypes.bool.isRequired,\r\n hideColorPicker: PropTypes.func.isRequired,\r\n styles: PropTypes.shape({\r\n root: PropTypes.object,\r\n panel: PropTypes.object,\r\n }).isRequired,\r\n};\r\n\r\nexport { WrappedColorPicker };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport _ from 'underscore';\r\n\r\nimport { getColorFromString, SwatchColorPicker } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getColorPickerStyles } from '../../styles/color-picker-style';\r\nimport { WrappedColorPicker } from './wrapped-color-picker';\r\n\r\nconst mtColorFormat = /(\\d*),\\s?(\\d*),\\s?(\\d*)/;\r\n\r\nexport function convertColorToRGBFormat({ r, g, b }) {\r\n return `${r},${g},${b}`;\r\n}\r\n\r\nexport function convertRGBToColor({ backgroundColor }) {\r\n if (backgroundColor) {\r\n const values = mtColorFormat.exec(backgroundColor);\r\n const hex = _.reduce([values[1], values[2], values[3]], (str, val) => {\r\n let hexValueOfChannel = parseInt(val, 10).toString(16);\r\n hexValueOfChannel = hexValueOfChannel.length === 2 ? hexValueOfChannel : `0${hexValueOfChannel}`;\r\n\r\n return str.concat(hexValueOfChannel);\r\n }, '#');\r\n return getColorFromString(hex);\r\n }\r\n return getColorFromString('#ffffff');\r\n}\r\n\r\nfunction getSwatchColorCells(defaultColor, i18n) {\r\n return defaultColor ? [\r\n { id: 'showColorPicker', label: i18n.getString(_TL_('Show color picker')), color: '#F3F2F1' },\r\n { id: defaultColor, label: i18n.getString(_TL_('Default color')), color: defaultColor },\r\n { id: '#C20734', label: i18n.getString(_TL_('Red')), color: '#C20734' },\r\n { id: '#ECABCE', label: i18n.getString(_TL_('Pink')), color: '#ECABCE' },\r\n { id: '#E3BC67', label: i18n.getString(_TL_('Orange')), color: '#E3BC67' },\r\n { id: '#F8E3AC', label: i18n.getString(_TL_('Yellow')), color: '#F8E3AC' },\r\n { id: '#E7E7E7', label: i18n.getString(_TL_('Gray')), color: '#E7E7E7' },\r\n { id: '#4DBAA9', label: i18n.getString(_TL_('Green')), color: '#4DBAA9' },\r\n { id: '#0E92BE', label: i18n.getString(_TL_('Turquoise')), color: '#0E92BE' },\r\n { id: '#5074B9', label: i18n.getString(_TL_('Blue')), color: '#5074B9' },\r\n { id: '#6F146E', label: i18n.getString(_TL_('Purple')), color: '#6F146E' },\r\n { id: '#112355', label: i18n.getString(_TL_('Dark blue')), color: '#112355' },\r\n ] : [];\r\n}\r\n\r\nconst BackgroundColorPicker = ({\r\n effectOptions,\r\n onColorPickerChange,\r\n loading,\r\n i18n,\r\n}) => {\r\n const colorPickerClasses = useDefaultStyles(getColorPickerStyles);\r\n const selectedColor = convertRGBToColor(effectOptions);\r\n const [color, setColor] = React.useState(selectedColor);\r\n const [selectedSwatch, setSelectedSwatch] = React.useState(selectedColor.str.toUpperCase());\r\n const [showColorPicker, setShowColorPicker] = React.useState(false);\r\n const [hideOptionsDuringLoad, setHideOptionsDuringLoad] = React.useState(true);\r\n const [colorPickerThrottler, setColorPickerThrottler] = React.useState(null);\r\n const [defaultColor, setDefaultColor] = React.useState(null);\r\n\r\n if (!defaultColor && effectOptions.backgroundColor) {\r\n // set color properly the first time we get back default color values\r\n const swatchId = selectedColor.str.toUpperCase();\r\n setDefaultColor(swatchId);\r\n setSelectedSwatch(swatchId);\r\n setColor(selectedColor);\r\n }\r\n\r\n const swatchColorCells = getSwatchColorCells(defaultColor, i18n);\r\n\r\n if (!loading && hideOptionsDuringLoad) {\r\n // when the user first navigates to this effect option, should not show\r\n // color picker options until the effect loads. on subsequent\r\n // loads, the user has triggered the load by clicking an option\r\n // in the picker, so the color picker should be visible (but disabled)\r\n setHideOptionsDuringLoad(false);\r\n }\r\n\r\n const updateColorInternal = React.useCallback(\r\n (colorObj) => {\r\n setColor(colorObj);\r\n onColorPickerChange(convertColorToRGBFormat(colorObj));\r\n const colorObjStr = colorObj.str.toUpperCase();\r\n if (_.some(swatchColorCells, cell => cell.color === colorObjStr)) {\r\n setSelectedSwatch(colorObjStr);\r\n } else {\r\n setSelectedSwatch(null);\r\n }\r\n },\r\n [\r\n setColor,\r\n setSelectedSwatch,\r\n swatchColorCells,\r\n onColorPickerChange,\r\n ]\r\n );\r\n\r\n const updateColor = React.useCallback(\r\n (e, colorObj) => {\r\n if (colorPickerThrottler) {\r\n clearTimeout(colorPickerThrottler);\r\n }\r\n\r\n // ColorPicker fires a continuous stream of events as the\r\n // user moves the dot around the wheel, without an option\r\n // to provide a callback for mouseup events\r\n // working around this by implementing a throttler which will\r\n // only update state and call the callback when the user has\r\n // stopped updating color when using mouse controls\r\n if (e.type !== 'input') {\r\n setColorPickerThrottler(setTimeout(() => {\r\n updateColorInternal(colorObj);\r\n }, 500));\r\n } else { // however, allow continuous updates when using keyboard\r\n updateColorInternal(colorObj);\r\n }\r\n },\r\n [\r\n colorPickerThrottler,\r\n setColorPickerThrottler,\r\n updateColorInternal,\r\n ]\r\n );\r\n\r\n const updateSwatchColor = React.useCallback(\r\n (id) => {\r\n if (id === 'showColorPicker') {\r\n setShowColorPicker(!showColorPicker);\r\n setSelectedSwatch(selectedSwatch);\r\n } else {\r\n const colorObj = getColorFromString(id);\r\n setColor(colorObj);\r\n setSelectedSwatch(id);\r\n onColorPickerChange(convertColorToRGBFormat(colorObj));\r\n }\r\n },\r\n [\r\n onColorPickerChange,\r\n setColor,\r\n showColorPicker,\r\n setShowColorPicker,\r\n selectedSwatch,\r\n setSelectedSwatch,\r\n ]\r\n );\r\n\r\n return (\r\n \r\n {\r\n !hideOptionsDuringLoad && (\r\n
\r\n );\r\n};\r\n\r\nBackgroundColorPicker.propTypes = {\r\n effectOptions: PropTypes.shape({\r\n backgroundColor: PropTypes.string,\r\n }),\r\n onColorPickerChange: PropTypes.func.isRequired,\r\n loading: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nBackgroundColorPicker.defaultProps = {\r\n effectOptions: {},\r\n loading: false,\r\n};\r\n\r\nexport { BackgroundColorPicker };\r\n","export const RIGHT_RAIL_GUTTER = 24;\r\nexport const SECONDARY_CONTROL_PADDING = 8;\r\nexport const MAX_WIDTH_RR = 528;\r\nexport const MAX_WIDTH_NO_RR = 596;\r\n","import {\r\n RIGHT_RAIL_GUTTER,\r\n SECONDARY_CONTROL_PADDING,\r\n MAX_WIDTH_RR,\r\n MAX_WIDTH_NO_RR,\r\n} from './effect-picker-style-consts';\r\n\r\n // two different widths depending on whether or not there's a right rail in the media editor panel\r\n // unfortunately, it can't directly be derived from the maxWidth, as there's an additional gutter\r\n // on the right of the maxWidth in the case where there is a right rail\r\n // the formula is either (no right rail): (maxWidth - 32 { padding between options * 4 }) / 5\r\n // or (with right rail)\r\n // (maxWidth - 24 { right rail gutter } - 32 { padding between options * 4}) / 5\r\nconst NUMBER_OF_DESIGNER_EFFECT_OPTIONS = 5;\r\n\r\nexport const getDesignerEffectChoiceMaxDimension = (maxWidth) => {\r\n const paddingBetweenOptions = SECONDARY_CONTROL_PADDING * (NUMBER_OF_DESIGNER_EFFECT_OPTIONS - 1);\r\n if (maxWidth === MAX_WIDTH_RR) {\r\n return (MAX_WIDTH_RR - RIGHT_RAIL_GUTTER -\r\n paddingBetweenOptions) / NUMBER_OF_DESIGNER_EFFECT_OPTIONS;\r\n }\r\n return (MAX_WIDTH_NO_RR - paddingBetweenOptions) / NUMBER_OF_DESIGNER_EFFECT_OPTIONS;\r\n};\r\n\r\nexport const getDesignerEffectPickerStyles = (imageWidth, imageHeight) => ({\r\n container: {\r\n margin: '0 auto',\r\n display: 'table',\r\n },\r\n label: {\r\n margin: '24px 0 12px 0',\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n fontWeight: 600,\r\n },\r\n labelWrapper: {\r\n maxWidth: 78,\r\n },\r\n innerField: {\r\n boxSizing: 'content-box',\r\n },\r\n\r\n designerEffectChoiceGroup: {\r\n '& .ms-Label, & .ms-ChoiceField-labelWrapper': {\r\n display: 'none',\r\n },\r\n\r\n '& .ms-ChoiceFieldGroup-flexContainer': {\r\n display: 'flex',\r\n flexFlow: 'row',\r\n\r\n '& .ms-ChoiceField': {\r\n margin: 0,\r\n\r\n '& ~ .ms-ChoiceField': {\r\n marginLeft: 8,\r\n },\r\n\r\n '& .ms-ChoiceField-field': {\r\n borderWidth: 2,\r\n height: imageHeight,\r\n width: imageWidth,\r\n padding: 0,\r\n\r\n '&:before, &:after': {\r\n zIndex: 1,\r\n },\r\n },\r\n\r\n '& .ms-ChoiceField-innerField': {\r\n padding: 0,\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\n\r\nimport { ChoiceGroup } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getDesignerEffectPickerStyles, getDesignerEffectChoiceMaxDimension } from '../../styles/designer-effect-picker-style';\r\n\r\n\r\nfunction designerEffectChoiceGroupOptions(designerEffectSrcs, imageWidth, imageHeight) {\r\n const commonConfig = {\r\n imageSize: { width: imageWidth, height: imageHeight },\r\n text: '',\r\n onRenderLabel: () => null,\r\n };\r\n\r\n return ([\r\n {\r\n ...commonConfig,\r\n key: designerEffectSrcs[0].Effect,\r\n imageSrc: designerEffectSrcs[0].Thumbnail,\r\n },\r\n {\r\n ...commonConfig,\r\n key: designerEffectSrcs[1].Effect,\r\n imageSrc: designerEffectSrcs[1].Thumbnail,\r\n },\r\n {\r\n ...commonConfig,\r\n key: designerEffectSrcs[2].Effect,\r\n imageSrc: designerEffectSrcs[2].Thumbnail,\r\n },\r\n {\r\n ...commonConfig,\r\n key: designerEffectSrcs[3].Effect,\r\n imageSrc: designerEffectSrcs[3].Thumbnail,\r\n },\r\n {\r\n ...commonConfig,\r\n key: designerEffectSrcs[4].Effect,\r\n imageSrc: designerEffectSrcs[4].Thumbnail,\r\n },\r\n ]);\r\n}\r\n\r\nconst DesignerEffectsSecondaryPicker = ({\r\n designerEffectSrcs,\r\n loading,\r\n baseImageWidth,\r\n baseImageHeight,\r\n effectOptions,\r\n onDesignerChange,\r\n i18n,\r\n maxWidth,\r\n}) => {\r\n const maxDimension = getDesignerEffectChoiceMaxDimension(maxWidth);\r\n const imageHeight = baseImageWidth > baseImageHeight ?\r\n baseImageHeight / (baseImageWidth / maxDimension) : maxDimension;\r\n const imageWidth = baseImageWidth <= baseImageHeight ?\r\n baseImageWidth / (baseImageHeight / maxDimension) : maxDimension;\r\n\r\n const designerClasses = useDefaultStyles(getDesignerEffectPickerStyles);\r\n const selectedDesignerEffectKey = effectOptions.designerEffect;\r\n\r\n if (designerEffectSrcs.length > 1 && !loading) {\r\n const designerOptions =\r\n _.map(designerEffectChoiceGroupOptions(designerEffectSrcs, imageWidth, imageHeight), ({\r\n key,\r\n text,\r\n imageSrc,\r\n imageSize,\r\n onRenderLabel,\r\n onRenderField,\r\n }) => ({\r\n key,\r\n text,\r\n imageSrc,\r\n imageSize,\r\n onRenderLabel,\r\n onRenderField,\r\n selectedImageSrc: imageSrc,\r\n disabled: loading && key !== selectedDesignerEffectKey,\r\n }));\r\n\r\n return (\r\n \r\n (selected ? {\r\n colorCell: {\r\n border: '4px solid #0078D4',\r\n padding: '0px',\r\n marginBottom: '5px',\r\n },\r\n } : {})}\r\n />\r\n setShowColorPicker(false)}\r\n pickerPosition={getColorPickerStyles(showColorPicker).root}\r\n styles={_.pick(getColorPickerStyles(showColorPicker), 'panel', 'root')}\r\n />\r\n { loading && showColorPicker &&\r\n
\r\n )\r\n }\r\n {i18n.getString(_TL_('Background color'))}
\r\n \r\n
\r\n );\r\n }\r\n\r\n return null;\r\n};\r\n\r\nDesignerEffectsSecondaryPicker.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n baseImageWidth: PropTypes.number,\r\n baseImageHeight: PropTypes.number,\r\n onDesignerChange: PropTypes.func.isRequired,\r\n maxWidth: PropTypes.number.isRequired,\r\n designerEffectSrcs: PropTypes.arrayOf(PropTypes.object),\r\n loading: PropTypes.bool,\r\n effectOptions: PropTypes.shape({\r\n designerEffect: PropTypes.string,\r\n }),\r\n};\r\n\r\nDesignerEffectsSecondaryPicker.defaultProps = {\r\n baseImageWidth: null,\r\n baseImageHeight: null,\r\n effectOptions: {},\r\n designerEffectSrcs: [],\r\n loading: false,\r\n};\r\n\r\n\r\nexport { DesignerEffectsSecondaryPicker };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Slider, MessageBar } from '@bingads-webui-react/fabric-control';\r\n\r\nexport const DEFAULT_BLUR_AMOUNT = 50;\r\n\r\nconst BLUR_MAX = 100;\r\nconst BLUR_MIN = 1;\r\n\r\nconst BackgroundBlurPicker = ({\r\n onBlurChange,\r\n effectOptions,\r\n i18n,\r\n loading,\r\n}) => {\r\n const defaultValue = effectOptions.backgroundBlur || DEFAULT_BLUR_AMOUNT;\r\n\r\n const [hideOptionsDuringLoad, setHideOptionsDuringLoad] = React.useState(true);\r\n\r\n const updateBlur = React.useCallback(\r\n (e, newBlur) => {\r\n onBlurChange(newBlur);\r\n },\r\n [onBlurChange]\r\n );\r\n\r\n if (!loading && hideOptionsDuringLoad) {\r\n // when the user first navigates to this effect option, should not show\r\n // color picker options until the effect loads. on subsequent\r\n // loads, the user has triggered the load by clicking an option\r\n // in the picker, so the color picker should be visible (but disabled)\r\n setHideOptionsDuringLoad(false);\r\n }\r\n\r\n return (\r\n !hideOptionsDuringLoad && {i18n.getString(_TL_('Auto-generated images'))}
\r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Background blur works best when the image has a clear subject.'))}\r\n \r\n
// eslint-disable-line react/jsx-closing-tag-location\r\n );\r\n};\r\n\r\nBackgroundBlurPicker.propTypes = {\r\n onBlurChange: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n effectOptions: PropTypes.shape({\r\n backgroundBlur: PropTypes.number,\r\n }),\r\n loading: PropTypes.bool,\r\n};\r\n\r\nBackgroundBlurPicker.defaultProps = {\r\n effectOptions: {},\r\n loading: false,\r\n};\r\n\r\nexport { BackgroundBlurPicker };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { EffectChoiceKey } from '@bingads-webui-campaign/media-common-utils';\r\nimport { BackgroundColorPicker } from './background-color';\r\nimport { DesignerEffectsSecondaryPicker } from './designer-effect';\r\nimport { BackgroundBlurPicker } from './background-blur';\r\n\r\nconst SecondaryEffectPicker = (props) => {\r\n const { selectedKey } = props;\r\n\r\n switch (selectedKey) {\r\n case EffectChoiceKey.BackgroundSolidColor:\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('Smart effects'))}
\r\n \r\n
\r\n );\r\n};\r\n\r\nImageEffectEditor.propTypes = {\r\n baseImage: PropTypes.shape({\r\n Type: PropTypes.string,\r\n Src: PropTypes.string,\r\n Width: PropTypes.number,\r\n Height: PropTypes.number,\r\n AltText: PropTypes.string,\r\n }),\r\n cropSettings: PropTypes.shape({\r\n SourceWidth: PropTypes.number,\r\n SourceHeight: PropTypes.number,\r\n }),\r\n selectedEffectKey: PropTypes.string.isRequired,\r\n onEffectChange: PropTypes.func.isRequired,\r\n onDesignerChange: PropTypes.func.isRequired,\r\n effectOptions: PropTypes.shape({\r\n backgroundColor: PropTypes.string,\r\n }),\r\n allEffectSrcs: PropTypes.arrayOf(PropTypes.object),\r\n unavailableEffectsConfig: PropTypes.objectOf(PropTypes.any),\r\n loading: PropTypes.bool,\r\n onColorPickerChange: PropTypes.func.isRequired,\r\n maxWidth: PropTypes.number.isRequired,\r\n onBlurChange: PropTypes.func,\r\n onAltTextChange: PropTypes.func,\r\n isLogo: PropTypes.bool,\r\n permissions: PropTypes.shape(),\r\n};\r\n\r\nImageEffectEditor.defaultProps = {\r\n baseImage: null,\r\n cropSettings: null,\r\n effectOptions: {},\r\n allEffectSrcs: [],\r\n unavailableEffectsConfig: {},\r\n loading: false,\r\n onBlurChange: noop,\r\n onAltTextChange: noop,\r\n isLogo: false,\r\n permissions: {},\r\n};\r\n","export const AspectRatiosForDisplayAds = {\r\n Image300x250: {\r\n aspectRatio: 1.2,\r\n type: 'Image300x250',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image300x250',\r\n minSize: [300, 250],\r\n },\r\n Image728x90: {\r\n aspectRatio: 8.088888888888889,\r\n type: 'Image728x90',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image728x90',\r\n minSize: [728, 90],\r\n },\r\n Image160x600: {\r\n aspectRatio: 0.26666666666666666,\r\n type: 'Image160x600',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image160x600',\r\n minSize: [160, 600],\r\n },\r\n Image300x600: {\r\n aspectRatio: 0.5,\r\n type: 'Image300x600',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image300x600',\r\n minSize: [300, 600],\r\n },\r\n Image120x600: {\r\n aspectRatio: 0.2,\r\n type: 'Image120x600',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image120x600',\r\n minSize: [120, 600],\r\n },\r\n Image468x60: {\r\n aspectRatio: 7.8,\r\n type: 'Image468x60',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image468x60',\r\n minSize: [468, 60],\r\n },\r\n Image336x280: {\r\n aspectRatio: 1.2,\r\n type: 'Image336x280',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image336x280',\r\n minSize: [336, 280],\r\n },\r\n Image250x250: {\r\n aspectRatio: 1,\r\n type: 'Image250x250',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image250x250',\r\n minSize: [250, 250],\r\n },\r\n Image180x150: {\r\n aspectRatio: 1.2,\r\n type: 'Image180x150',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image180x150',\r\n minSize: [180, 150],\r\n },\r\n Image970x250: {\r\n aspectRatio: 3.88,\r\n type: 'Image970x250',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image970x250',\r\n minSize: [970, 250],\r\n },\r\n Image234x60: {\r\n aspectRatio: 3.9,\r\n type: 'Image234x60',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image234x60',\r\n minSize: [234, 60],\r\n },\r\n Image970x90: {\r\n aspectRatio: 10.777777777777779,\r\n type: 'Image970x90',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image970x90',\r\n minSize: [970, 90],\r\n },\r\n\r\n Image320x50: {\r\n aspectRatio: 6.4,\r\n type: 'Image320x50',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image320x50',\r\n minSize: [320, 50],\r\n },\r\n Image300x50: {\r\n aspectRatio: 6,\r\n type: 'Image300x50',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image300x50',\r\n minSize: [300, 50],\r\n },\r\n Image320x480: {\r\n aspectRatio: 0.6666666666666666,\r\n type: 'Image320x480',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image320x480',\r\n minSize: [320, 480],\r\n },\r\n Image480x320: {\r\n aspectRatio: 1.5,\r\n type: 'Image480x320',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image480x320',\r\n minSize: [480, 320],\r\n },\r\n Image320x100: {\r\n aspectRatio: 3.2,\r\n type: 'Image320x100',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image320x100',\r\n minSize: [320, 100],\r\n },\r\n Image216x36: {\r\n aspectRatio: 6,\r\n type: 'Image216x36',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image216x36',\r\n minSize: [216, 36],\r\n },\r\n Image168x28: {\r\n aspectRatio: 6,\r\n type: 'Image168x28',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image168x28',\r\n minSize: [168, 28],\r\n },\r\n Image120x20: {\r\n aspectRatio: 6,\r\n type: 'Image120x20',\r\n imagePreviewHeight: 75,\r\n simplifiedType: 'Image120x20',\r\n minSize: [120, 20],\r\n },\r\n};\r\n","import _ from 'underscore';\r\nimport { UAPCroppingType, UAPImageExpansionType } from '@bingads-webui-campaign-react/unified-ad-preview-library-util';\r\nimport { AspectRatiosForDisplayAds } from './aspect-ratios-for-display-ads';\r\nimport { AspectRatiosForLinkedInAds } from './aspect-ratios-for-linkedin-ads';\r\n\r\nconst constants = {\r\n brandkitMinSize: [128, 128],\r\n aspectRatios: {\r\n Image191x100: {\r\n aspectRatio: 1.91,\r\n type: 'Image191x100',\r\n associationType: 'LandscapeImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_191x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_191x100',\r\n previewTypeString: _TL_('MSN feed'),\r\n imagePreviewHeight: 200,\r\n previewWidth: '191px',\r\n previewHeight: '100px',\r\n simplifiedType: 'Image191x100',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [703, 368],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'audience-network-wide',\r\n showShortHeadline: true,\r\n showDescription: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image178x100: {\r\n aspectRatio: 1.78,\r\n type: 'Image178x100',\r\n associationType: 'ImageMedia178X100',\r\n stringKey: 'ImageExperience_Image_Ratio_178x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_178x100',\r\n previewTypeString: _TL_('Microsoft Edge single carousel'),\r\n imagePreviewHeight: 350,\r\n minimumRequirements: 0,\r\n minSize: [624, 350],\r\n previewSettings: {\r\n previewContentClassName: 'edge-single-carousel',\r\n showShortHeadline: true,\r\n showDescription: false,\r\n showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image172x100: {\r\n aspectRatio: 1.72,\r\n type: 'Image172x100',\r\n associationType: 'ImageMedia172X100',\r\n stringKey: 'ImageExperience_Image_Ratio_172x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_172x100',\r\n previewTypeString: _TL_('Microsoft Edge medium headline'),\r\n imagePreviewHeight: 174,\r\n minimumRequirements: 0,\r\n minSize: [300, 174],\r\n previewSettings: {\r\n previewContentClassName: 'edge-medium-headline',\r\n showShortHeadline: false,\r\n showLongHeadline: true,\r\n showDescription: false,\r\n showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image169x100: {\r\n aspectRatio: 1.69,\r\n type: 'Image169x100',\r\n associationType: 'ImageMedia169X100',\r\n stringKey: 'ImageExperience_Image_Ratio_169x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_169x100',\r\n previewTypeString: _TL_('MSN carousel'),\r\n imagePreviewHeight: 368,\r\n minimumRequirements: 0,\r\n minSize: [622, 368],\r\n previewSettings: {\r\n previewContentClassName: 'msn-single-carousel',\r\n showShortHeadline: false,\r\n showLongHeadline: true,\r\n showDescription: false,\r\n showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image155x100: {\r\n aspectRatio: 1.55,\r\n type: 'Image155x100',\r\n associationType: 'ImageMedia155X100',\r\n stringKey: 'ImageExperience_Image_Ratio_155x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_155x100',\r\n previewTypeString: _TL_('MSN medium headline'),\r\n imagePreviewHeight: 194,\r\n minimumRequirements: 0,\r\n minSize: [300, 194],\r\n previewSettings: {\r\n previewContentClassName: 'msn-medium-headline',\r\n showShortHeadline: false,\r\n showLongHeadline: true,\r\n showDescription: false,\r\n },\r\n isLogo: false,\r\n },\r\n Image150x100: {\r\n aspectRatio: 1.50,\r\n type: 'Image150x100',\r\n associationType: 'ImageMedia15X10',\r\n stringKey: 'ImageExperience_Image_Ratio_150x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_150x100',\r\n previewTypeString: _TL_('MSN in-article ad'),\r\n imagePreviewHeight: 200,\r\n minimumRequirements: 0,\r\n minSize: [300, 200],\r\n previewSettings: {\r\n previewContentClassName: 'msn-in-article',\r\n showShortHeadline: true,\r\n showDescription: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image133x100: {\r\n aspectRatio: 1.33,\r\n type: 'Image133x100',\r\n associationType: 'ImageMedia133X100',\r\n stringKey: 'ImageExperience_Image_Ratio_133x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_133x100',\r\n previewTypeString: _TL_('MSN small headline'),\r\n imagePreviewHeight: 75,\r\n minimumRequirements: 0,\r\n minSize: [100, 75],\r\n previewSettings: {\r\n previewContentClassName: 'msn-small-headline',\r\n showShortHeadline: true,\r\n showDescription: false,\r\n },\r\n isLogo: false,\r\n },\r\n Image1x1: {\r\n aspectRatio: 1,\r\n type: 'Image1x1',\r\n associationType: 'SquareImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_1x1',\r\n previewTypeString: _TL_('MSN square image'),\r\n imagePreviewHeight: 75,\r\n previewWidth: '200px',\r\n previewHeight: '200px',\r\n simplifiedType: 'Image1x1',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [300, 300],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'audience-network-square-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image93x100: {\r\n aspectRatio: 0.93,\r\n type: 'Image93x100',\r\n associationType: 'ImageMedia93X100',\r\n stringKey: 'ImageExperience_Image_Ratio_93x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_93x100',\r\n previewTypeString: _TL_('MSN double carousel'),\r\n imagePreviewHeight: 333,\r\n minimumRequirements: 0,\r\n minSize: [311, 333],\r\n previewSettings: {\r\n previewContentClassName: 'msn-double-carousel',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n },\r\n aspectRatiosForMMAV2: {\r\n OriginalImage: {\r\n aspectRatio: 1.91, // this is just a placeholder since we will not show original image in UI.\r\n type: 'OriginalImage',\r\n associationType: 'OriginalImage',\r\n stringKey: 'ImageExperience_Image_Ratio_ImageOriginal',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_ImageOriginal',\r\n previewTypeString: _TL_('Original image'),\r\n imagePreviewHeight: 200,\r\n previewWidth: '380px',\r\n previewHeight: '200px',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [703, 368],\r\n previewSettings: {\r\n previewContentClassName: 'original-image',\r\n showShortHeadline: true,\r\n showDescription: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n shouldIgnoreCropSetting: true,\r\n },\r\n Image201x100: {\r\n aspectRatio: 2.01,\r\n type: 'Image201x100',\r\n associationType: 'ImageMedia201X100',\r\n stringKey: 'ImageExperience_Image_Ratio_201x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_201x100',\r\n previewTypeString: _TL_('Microsoft Edge carousel'),\r\n imagePreviewHeight: 304,\r\n minimumRequirements: 0,\r\n minSize: [612, 304],\r\n previewSettings: {\r\n previewContentClassName: 'edge-carousel ',\r\n showShortHeadline: true,\r\n showDescription: false,\r\n showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image200x100: {\r\n aspectRatio: 2,\r\n type: 'Image200x100',\r\n associationType: 'ImageMedia200X100',\r\n stringKey: 'ImageExperience_Image_Ratio_200x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_200x100',\r\n previewTypeString: _TL_('MSN banner'),\r\n imagePreviewHeight: 90,\r\n minimumRequirements: 0,\r\n minSize: [200, 100],\r\n previewSettings: {\r\n previewContentClassName: 'audience-network-banner ',\r\n showShortHeadline: true,\r\n showDescription: false,\r\n showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image191x100: {\r\n aspectRatio: 1.91,\r\n type: 'Image191x100',\r\n associationType: 'LandscapeImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_191x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_191x100_V2',\r\n previewTypeString: _TL_('MSN feed'),\r\n imagePreviewHeight: 157,\r\n minimumRequirements: 0,\r\n minSize: [300, 157],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'audience-network-wide-v2',\r\n showShortHeadline: true,\r\n showDescription: true,\r\n showGradient: true,\r\n showAdsIcon: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image169x100: {\r\n aspectRatio: 1.69,\r\n type: 'Image169x100',\r\n associationType: 'ImageMedia169X100',\r\n stringKey: 'ImageExperience_Image_Ratio_169x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_169x100_V2',\r\n previewTypeString: _TL_('MSN carousel'),\r\n imagePreviewHeight: 372,\r\n minimumRequirements: 0,\r\n minSize: [628, 372],\r\n previewSettings: {\r\n previewContentClassName: 'msn-single-carousel-v2',\r\n showShortHeadline: false,\r\n showLongHeadline: true,\r\n showDescription: false,\r\n showGradient: true,\r\n showAdsIcon: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image153x100: {\r\n aspectRatio: 1.53,\r\n type: 'Image153x100',\r\n associationType: 'ImageMedia153X100',\r\n stringKey: 'ImageExperience_Image_Ratio_153x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_153x100',\r\n previewTypeString: _TL_('MSN partner stripe'),\r\n imagePreviewHeight: 197,\r\n minimumRequirements: 0,\r\n minSize: [306, 200],\r\n previewSettings: {\r\n previewContentClassName: 'msn-partner-stripe',\r\n showShortHeadline: false,\r\n showLongHeadline: true,\r\n showDescription: false,\r\n },\r\n isLogo: false,\r\n },\r\n Image124x100: {\r\n aspectRatio: 1.24,\r\n type: 'Image124x100',\r\n associationType: 'ImageMedia124X100',\r\n stringKey: 'ImageExperience_Image_Ratio_124x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_124x100',\r\n previewTypeString: _TL_('MSN Restoday'),\r\n imagePreviewHeight: 84,\r\n minimumRequirements: 0,\r\n minSize: [104, 84],\r\n previewSettings: {\r\n previewContentClassName: 'msn-restoday',\r\n showShortHeadline: true,\r\n showDescription: false,\r\n showAdsIcon: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image120x100: {\r\n aspectRatio: 1.2,\r\n type: 'Image120x100',\r\n associationType: 'ImageMedia120X100',\r\n stringKey: 'ImageExperience_Image_Ratio_120x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_120x100',\r\n previewTypeString: _TL_('MSN rectangle image'),\r\n imagePreviewHeight: 250,\r\n minimumRequirements: 0,\r\n minSize: [300, 250],\r\n previewSettings: {\r\n previewContentClassName: 'audience-network-rectangle',\r\n showShortHeadline: true,\r\n showDescription: false,\r\n showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image1x1: {\r\n aspectRatio: 1,\r\n type: 'Image1x1',\r\n associationType: 'SquareImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_1x1_V2',\r\n previewTypeString: _TL_('Edge Mobile'),\r\n imagePreviewHeight: 75,\r\n previewWidth: '150',\r\n previewHeight: '150',\r\n simplifiedType: 'Image1x1',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [114, 114],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'audience-network-square-image-v2',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n },\r\n aspectRatiosForDisplayAds: AspectRatiosForDisplayAds,\r\n aspectRatiosForBoostPortrait: {\r\n Image1x2: {\r\n aspectRatio: 0.5,\r\n type: 'Image1x2',\r\n associationType: 'ImageMedia1x2',\r\n stringKey: 'ImageExperience_Image_Ratio_1x2',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_1x2',\r\n previewTypeString: _TL_('Vertical image'),\r\n imagePreviewHeight: 400,\r\n previewWidth: '200px',\r\n previewHeight: '400px',\r\n simplifiedType: 'Image1x2',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [470, 940],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-portrait-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n isPortrait: true,\r\n },\r\n },\r\n aspectRatiosForBoost200x100: {\r\n Image200x100: {\r\n aspectRatio: 2,\r\n type: 'Image200x100',\r\n associationType: 'ImageMedia200X100',\r\n stringKey: 'ImageExperience_Image_Ratio_200x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_200x100_Boost',\r\n previewTypeString: _TL_('Hero Image Carousel 200x100'),\r\n imagePreviewHeight: 320,\r\n minimumRequirements: 0,\r\n minSize: [200, 100],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-preview-200',\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n },\r\n },\r\n },\r\n aspectRatiosForBoostNewSupport: {\r\n Image122x100: {\r\n aspectRatio: 1.225,\r\n type: 'Image122x100',\r\n associationType: 'ImageMedia122X100',\r\n stringKey: 'ImageExperience_Image_Ratio_122x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_122x100',\r\n previewTypeString: _TL_('Hero Image Carousel 122x100'),\r\n imagePreviewHeight: 320,\r\n minimumRequirements: 0,\r\n minSize: [450, 368],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-preview-122',\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n },\r\n },\r\n Image159x100: {\r\n aspectRatio: 1.59,\r\n type: 'Image159x100',\r\n associationType: 'ImageMedia159X100',\r\n stringKey: 'ImageExperience_Image_Ratio_159x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_159x100',\r\n previewTypeString: _TL_('Hero Image Carousel 159x100'),\r\n imagePreviewHeight: 320,\r\n minimumRequirements: 0,\r\n minSize: [585, 368],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-preview-159',\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n },\r\n },\r\n Image180x100: {\r\n aspectRatio: 1.805,\r\n type: 'Image180x100',\r\n associationType: 'ImageMedia180X100',\r\n stringKey: 'ImageExperience_Image_Ratio_180x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_180x100',\r\n previewTypeString: _TL_('Hero Image Carousel 180x100'),\r\n imagePreviewHeight: 320,\r\n minimumRequirements: 0,\r\n minSize: [664, 368],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-preview-180',\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n },\r\n },\r\n Image233x100: {\r\n aspectRatio: 2.33,\r\n type: 'Image233x100',\r\n associationType: 'ImageMedia233X100',\r\n stringKey: 'ImageExperience_Image_Ratio_233x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_233x100',\r\n previewTypeString: _TL_('Hero Image Carousel 233x100'),\r\n imagePreviewHeight: 250,\r\n minimumRequirements: 0,\r\n minSize: [703, 301],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-preview-233',\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n },\r\n },\r\n Image320x100: {\r\n aspectRatio: 3.20,\r\n type: 'Image320x100',\r\n associationType: 'ImageMedia320X100',\r\n stringKey: 'ImageExperience_Image_Ratio_320x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_320x100',\r\n previewTypeString: _TL_('Hero Image Carousel 320x100'),\r\n imagePreviewHeight: 180,\r\n minimumRequirements: 0,\r\n minSize: [703, 219],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-preview-320',\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n },\r\n },\r\n Image57x100: {\r\n aspectRatio: 0.57,\r\n type: 'Image57x100',\r\n associationType: 'ImageMedia57X100',\r\n stringKey: 'ImageExperience_Image_Ratio_57x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_57x100',\r\n previewTypeString: _TL_('Hero Image Carousel 57x100'),\r\n imagePreviewHeight: 320,\r\n minimumRequirements: 0,\r\n minSize: [210, 368],\r\n previewSettings: {\r\n previewContentClassName: 'boost-ad-preview-57',\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n },\r\n },\r\n },\r\n videoAspectRatios: {\r\n VideoMedia16X9: {\r\n ratio: 16 / 9,\r\n text: '16 : 9',\r\n stringKey: 'ImageExperience_Video_Ratio_16x9',\r\n cropSetting: {\r\n minSize: {\r\n width: 160,\r\n height: 90,\r\n },\r\n },\r\n thumbnailCropSetting: {\r\n minSize: [224, 126],\r\n },\r\n },\r\n VideoMedia5X4: {\r\n ratio: 1.25,\r\n text: '5 : 4',\r\n stringKey: 'ImageExperience_Video_Ratio_5x4',\r\n cropSetting: {\r\n minSize: {\r\n width: 100,\r\n height: 80,\r\n },\r\n },\r\n thumbnailCropSetting: {\r\n minSize: [150, 120],\r\n },\r\n },\r\n VideoMedia1X1: {\r\n ratio: 1,\r\n text: '1 : 1',\r\n stringKey: 'ImageExperience_Video_Ratio_1x1',\r\n cropSetting: {\r\n minSize: {\r\n width: 100,\r\n height: 100,\r\n },\r\n },\r\n thumbnailCropSetting: {\r\n minSize: [120, 120],\r\n },\r\n },\r\n VideoMedia4X5: {\r\n ratio: 0.8,\r\n text: '4 : 5',\r\n stringKey: 'ImageExperience_Video_Ratio_4x5',\r\n cropSetting: {\r\n minSize: {\r\n width: 80,\r\n height: 100,\r\n },\r\n },\r\n thumbnailCropSetting: {\r\n minSize: [120, 150],\r\n },\r\n },\r\n VideoMedia9X16: {\r\n ratio: 9 / 16,\r\n text: '9 : 16',\r\n stringKey: 'ImageExperience_Video_Ratio_9x16',\r\n cropSetting: {\r\n minCropSize: {\r\n width: 90,\r\n height: 160,\r\n },\r\n },\r\n thumbnailCropSetting: {\r\n minSize: [126, 224],\r\n },\r\n },\r\n },\r\n aspectRatiosForAppCampaign: {\r\n ImagePRONG: {\r\n aspectRatio: 300 / 304,\r\n type: 'ImagePRONG',\r\n associationType: 'ImagePRONG',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_1x1',\r\n previewTypeString: _TL_('MSN square image'),\r\n imagePreviewHeight: 75,\r\n previewWidth: '200px',\r\n previewHeight: '200px',\r\n simplifiedType: 'ImagePRONG',\r\n isRequired: false,\r\n minimumRequirements: 0,\r\n minSize: [300, 304],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'audience-network-square-image',\r\n // showShortHeadline: true,\r\n // showLongHeadline: false,\r\n // showDescription: false,\r\n // showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n ImageSPOTLIGHT: {\r\n aspectRatio: 1.78,\r\n type: 'ImageSPOTLIGHT',\r\n associationType: 'ImageSPOTLIGHT',\r\n stringKey: 'ImageExperience_Image_Ratio_178x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_178x100',\r\n previewTypeString: _TL_('Microsoft Edge single carousel'),\r\n imagePreviewHeight: 350,\r\n minimumRequirements: 0,\r\n minSize: [1920, 1080],\r\n previewSettings: {\r\n // previewContentClassName: 'edge-single-carousel',\r\n // showShortHeadline: true,\r\n // showDescription: false,\r\n // showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n TransparentLogo: {\r\n aspectRatio: 1,\r\n type: 'TransparentLogo',\r\n associationType: 'TransparentLogo',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_178x100',\r\n previewTypeString: _TL_('Microsoft Edge single carousel'),\r\n imagePreviewHeight: 350,\r\n minimumRequirements: 0,\r\n minSize: [300, 300],\r\n maxSize: [1000, 1000],\r\n previewSettings: {\r\n // previewContentClassName: 'edge-single-carousel',\r\n // showShortHeadline: true,\r\n // showDescription: false,\r\n // showGradient: true,\r\n },\r\n isLogo: false,\r\n },\r\n },\r\n aspectRatiosForLinkedInAds: AspectRatiosForLinkedInAds,\r\n videoPreviewsSettings: [\r\n {\r\n type: '16X9-Homepage',\r\n videoType: 'VideoMedia16X9',\r\n text: '16 : 9',\r\n stringKey: 'ImageExperience_Video_Ratio_16x9',\r\n previewContainerHeight: 360,\r\n previewContainerWidth: 640,\r\n hideTextWhenPlay: true,\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showAdditionalDisclaimer: false,\r\n showProgressText: true,\r\n className: 'preview-16-9-homepage',\r\n },\r\n {\r\n type: '16X9-Infopane',\r\n videoType: 'VideoMedia16X9',\r\n text: '16 : 9',\r\n stringKey: 'ImageExperience_Video_Ratio_16x9',\r\n previewContainerHeight: 360,\r\n previewContainerWidth: 640,\r\n hideTextWhenPlay: true,\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showAdditionalDisclaimer: false,\r\n showProgressText: true,\r\n className: 'preview-16-9-infopane',\r\n },\r\n {\r\n type: '16X9-InArticleAd',\r\n videoType: 'VideoMedia16X9',\r\n text: '16 : 9',\r\n stringKey: 'ImageExperience_Video_Ratio_16x9',\r\n previewContainerHeight: 296,\r\n previewContainerWidth: 318,\r\n hideTextWhenPlay: false,\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showAdditionalDisclaimer: false,\r\n showProgressText: false,\r\n className: 'preview-16-9-inarticlead',\r\n },\r\n ],\r\n videoPreviewDefaultWidth: 640,\r\n videoPreviewDefaultHeight: 300,\r\n resizeImageHeightInList: 80,\r\n sortBySelections: {\r\n recentUpload: {\r\n id: 1,\r\n enum: 'recentUpload',\r\n stringKey: 'ImageExperience_SortBy_RecentUpload',\r\n query: '$orderby=UploadedTime desc',\r\n },\r\n imageText: {\r\n id: 2,\r\n enum: 'imageText',\r\n stringKey: 'ImageExperience_SortBy_ImageText',\r\n query: '$orderby=Text asc',\r\n },\r\n },\r\n videoSortBySelections: {\r\n recentUpload: {\r\n id: 1,\r\n enum: 'recentUpload',\r\n stringKey: 'ImageExperience_Sort_Recent_Upload',\r\n query: '$orderby=UploadedTime desc',\r\n edmDefinition: { UploadedTime: -1 },\r\n },\r\n description: {\r\n id: 2,\r\n enum: 'description',\r\n stringKey: 'ImageExperience_Sort_Video_Text',\r\n query: '$orderby=Text asc',\r\n edmDefinition: { Text: 1 },\r\n },\r\n },\r\n imageTypesWithOrder: [\r\n 'Image191x100',\r\n 'Image178x100',\r\n 'Image172x100',\r\n 'Image169x100',\r\n 'Image155x100',\r\n 'Image150x100',\r\n 'Image133x100',\r\n 'Image1x1',\r\n 'Image93x100',\r\n ],\r\n videoTypesWithOrder: [\r\n 'VideoMedia16X9',\r\n 'VideoMedia5X4',\r\n 'VideoMedia1X1',\r\n 'VideoMedia4X5',\r\n 'VideoMedia9X16',\r\n ],\r\n videoTypeToThumbnailType: {\r\n VideoMedia16X9: 'VideoMedia16X9Thumbnail',\r\n VideoMedia5X4: 'VideoMedia5X4Thumbnail',\r\n VideoMedia1X1: 'VideoMedia1X1Thumbnail',\r\n VideoMedia4X5: 'VideoMedia4X5Thumbnail',\r\n VideoMedia9X16: 'VideoMedia9X16Thumbnail',\r\n },\r\n subTypeToType: {\r\n // notice that 'X' is in capital\r\n ImageMedia4X1: 'Image4x1',\r\n LandscapeImageMedia: 'Image191x100',\r\n ImageMedia178X100: 'Image178x100',\r\n ImageMedia172X100: 'Image172x100',\r\n ImageMedia169X100: 'Image169x100',\r\n ImageMedia155X100: 'Image155x100',\r\n ImageMedia15X10: 'Image150x100',\r\n ImageMedia133X100: 'Image133x100',\r\n SquareImageMedia: 'Image1x1',\r\n ImageMedia93X100: 'Image93x100',\r\n ImageMedia1X2: 'Image1x2',\r\n LandscapeLogoMedia: 'Image4x1',\r\n SquareLogoMedia: 'Image1x1',\r\n OriginalImage: 'OriginalImage',\r\n ImageMedia201X100: 'Image201x100',\r\n ImageMedia200X100: 'Image200x100',\r\n ImageMedia153X100: 'Image153x100',\r\n ImageMedia124X100: 'Image124x100',\r\n ImageMedia120X100: 'Image120x100',\r\n ImageMedia122X100: 'Image122x100',\r\n ImageMedia159X100: 'Image159x100',\r\n ImageMedia180X100: 'Image180x100',\r\n ImageMedia233X100: 'Image233x100',\r\n ImageMedia320X100: 'Image320x100',\r\n ImageMedia57X100: 'Image57x100',\r\n ImagePRONG: 'ImagePRONG',\r\n ImageSPOTLIGHT: 'ImageSPOTLIGHT',\r\n TransparentLogo: 'TransparentLogo',\r\n PortraitImageMedia: 'Image4x5',\r\n },\r\n pageSize: 12,\r\n imageAdExtSettings: {\r\n MobileMultiImage: {\r\n previewContentClassName: 'mobile-multi-img',\r\n imagePreviewHeight: 310,\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MobileMulti',\r\n previewTypeString: _TL_('Bing mobile multi-image extension'),\r\n },\r\n BingDesktopImage: {\r\n previewContentClassName: 'bing-desktop-img',\r\n imagePreviewHeight: 100,\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_BingDeskMulti',\r\n previewTypeString: _TL_('Bing desktop multi-image extension'),\r\n },\r\n BingSingleImage: {\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_BingSingleImage',\r\n previewTypeString: _TL_('Bing desktop single-image extension'),\r\n imagePreviewHeight: 45,\r\n previewSettings: {\r\n previewContentClassName: 'bing-single-image',\r\n showShortHeadline: false,\r\n showLongHeadline: true,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n },\r\n },\r\n },\r\n};\r\n\r\nconstants.GenericImage = {\r\n minWidth: 128,\r\n minHeight: 128,\r\n};\r\n\r\nconstants.DefaultImageMinimumSize = [703, 368];\r\n\r\nconstants.getMinimumSizeForImage = (\r\n type,\r\n isMultimediaAd = false,\r\n imageOption = constants.defaultImageOption,\r\n isCombinedMsanAndMmaAspectRatios = false,\r\n isMMAV2Enabled = false,\r\n isDisplayAds = false,\r\n isPortraitImage = false,\r\n isBoost200x100ImageEnabled = false,\r\n isBoostNewAspectRatioSupportEnabled = false,\r\n isStoreAppProng = false,\r\n isStoreAppSpotLight = false,\r\n isStoreAppTransparentLogo = false,\r\n isLinkedInAd = false,\r\n isUnifiedAppCampaignWindowsStore = false,\r\n isPMaxAspectRatiosV2Enabled = false,\r\n isBrandKit = false\r\n) => {\r\n // if type is undefined or null , then it is for all aspect ratio minimum size.\r\n // if type is not undefined or not null, then it is to return minimum size for a certain aspect ratio.\r\n\r\n if (isLinkedInAd && !type) {\r\n return [0, 0];\r\n }\r\n\r\n if (isBrandKit) {\r\n return constants.brandkitMinSize;\r\n }\r\n\r\n if (isStoreAppProng) {\r\n return constants.aspectRatiosForAppCampaign.ImagePRONG.minSize;\r\n }\r\n\r\n if (isStoreAppSpotLight) {\r\n return constants.aspectRatiosForAppCampaign.ImageSPOTLIGHT.minSize;\r\n }\r\n\r\n if (isStoreAppTransparentLogo) {\r\n return constants.aspectRatiosForAppCampaign.TransparentLogo.minSize;\r\n }\r\n\r\n if (isUnifiedAppCampaignWindowsStore) {\r\n return constants.aspectRatiosForAppCampaign.ImagePRONG.minSize;\r\n }\r\n\r\n if (isMMAV2Enabled && !type && imageOption !== constants.imageOptionKeys.Logo) {\r\n // we want to return the minimum size for the default image (703x368)\r\n // but in V2 images, 1.69 aspecr ratio is 703x372, which is a corner case\r\n // hard code here to return 703x368\r\n return constants.DefaultImageMinimumSize;\r\n }\r\n\r\n if (isCombinedMsanAndMmaAspectRatios && !type) {\r\n // Minimum uploaded image dimensions for PMax\r\n return constants.DefaultImageMinimumSize;\r\n }\r\n\r\n const aspectRatios = constants.getAspectRatios({\r\n imageOption,\r\n isMultimediaAd,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n isDisplayAds,\r\n isPortraitImage,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n isLinkedInAd,\r\n isUnifiedAppCampaignWindowsStore,\r\n isPMaxAspectRatiosV2Enabled,\r\n });\r\n\r\n if (type) {\r\n return aspectRatios[type].minSize;\r\n } else if (isMultimediaAd) {\r\n return [constants.GenericImage.minWidth, constants.GenericImage.minHeight];\r\n }\r\n\r\n if (isDisplayAds || imageOption === constants.imageOptionKeys.Logo) {\r\n // pick the smallest size for display ads and for logo, since logo can be square or landscape.\r\n return _.reduce(aspectRatios, (memo, val) => [\r\n memo[0] < val.minSize[0] ? memo[0] : val.minSize[0],\r\n memo[1] < val.minSize[1] ? memo[1] : val.minSize[1],\r\n ], [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]);\r\n }\r\n\r\n return _.reduce(aspectRatios, (memo, val) => [\r\n memo[0] > val.minSize[0] ? memo[0] : val.minSize[0],\r\n memo[1] > val.minSize[1] ? memo[1] : val.minSize[1],\r\n ], [0, 0]);\r\n};\r\n\r\nconstants.getMinSizeForRequiredRatios = (isMultimediaAd) => {\r\n const aspectRatios = isMultimediaAd ?\r\n constants.getMmaAspectRatios() :\r\n constants.aspectRatios;\r\n\r\n const requiredRatios = _.filter(aspectRatios, ratio => ratio.minimumRequirements > 0);\r\n\r\n return _.reduce(requiredRatios, (memo, val) => [\r\n memo[0] > val.minSize[0] ? memo[0] : val.minSize[0],\r\n memo[1] > val.minSize[1] ? memo[1] : val.minSize[1],\r\n ], [0, 0]);\r\n};\r\n\r\nconstants.getMinSizeForAllRequiredRatios = () => {\r\n const minSizeForMMA = constants.getMinSizeForRequiredRatios(true);\r\n const minSizeForOther = constants.getMinSizeForRequiredRatios(false);\r\n\r\n return [\r\n Math.max(minSizeForMMA[0], minSizeForOther[0]),\r\n Math.max(minSizeForMMA[1], minSizeForOther[1]),\r\n ];\r\n};\r\n\r\nconstants.getImageTypesWithOrder = (\r\n isMultimediaAd = false,\r\n isCombinedMsanAndMmaAspectRatios = false,\r\n isStoreAppProng = false,\r\n isStoreAppSpotLight = false,\r\n isStoreAppTransparentLogo = false,\r\n isLinkedInAd = false,\r\n isPMaxAspectRatiosV2Enabled = false,\r\n isRefreshedExtensionRatiosEnabled = false\r\n) => {\r\n if (isLinkedInAd) {\r\n return [\r\n 'Image191x100',\r\n 'Image1x1',\r\n 'Image4x5',\r\n ];\r\n }\r\n\r\n if (isStoreAppProng) {\r\n return [\r\n 'ImagePRONG',\r\n ];\r\n }\r\n if (isStoreAppSpotLight) {\r\n return [\r\n 'ImageSPOTLIGHT',\r\n ];\r\n }\r\n if (isStoreAppTransparentLogo) {\r\n return [\r\n 'TransparentLogo',\r\n ];\r\n }\r\n if (isCombinedMsanAndMmaAspectRatios) {\r\n return isPMaxAspectRatiosV2Enabled\r\n ? [\r\n 'Image4x1',\r\n 'Image191x100',\r\n 'Image201x100',\r\n 'Image169x100',\r\n 'Image153x100',\r\n 'Image124x100',\r\n 'Image1x1',\r\n 'Image1x2',\r\n ]\r\n : [\r\n 'Image4x1',\r\n 'Image191x100',\r\n 'Image178x100',\r\n 'Image150x100',\r\n 'Image133x100',\r\n 'Image1x1',\r\n 'Image1x2',\r\n ];\r\n }\r\n\r\n if (isMultimediaAd) {\r\n return [\r\n 'Image4x1',\r\n 'Image191x100',\r\n 'Image1x1',\r\n 'Image1x2',\r\n ];\r\n }\r\n\r\n if (isRefreshedExtensionRatiosEnabled) {\r\n return [\r\n 'Image191x100',\r\n 'Image178x100',\r\n 'Image133x100',\r\n 'Image169x100',\r\n 'Image1x1',\r\n 'Image155x100',\r\n 'Image172x100',\r\n 'Image150x100',\r\n 'Image93x100',\r\n ];\r\n }\r\n\r\n return constants.imageTypesWithOrder;\r\n};\r\n\r\nconstants.getDefaultRatio = (width, height, aspectRatios) =>\r\n _.chain(aspectRatios)\r\n .filter(ratio => width >= ratio.minSize[0] && height >= ratio.minSize[1])\r\n .sortBy(ratio => Math.abs(ratio.aspectRatio - (width / height)))\r\n .first()\r\n .value();\r\n\r\nconstants.logoSubtypes = {\r\n LandscapeLogoMedia: 'Image4x1',\r\n SquareLogoMedia: 'Image1x1',\r\n};\r\n\r\nconstants.portraitSubtypes = {\r\n ImageMedia1X2: 'Image1x2',\r\n};\r\n\r\nconst logoAspectRatios = {\r\n Image4x1: {\r\n aspectRatio: 4,\r\n type: 'Image4x1',\r\n associationType: 'LandscapeLogoMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_4x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_4x1',\r\n imagePreviewHeight: 152,\r\n previewWidth: '608px',\r\n previewHeight: '152px',\r\n simplifiedType: 'Image4x1',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [512, 128],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-wide-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: true,\r\n },\r\n Image1x1: {\r\n aspectRatio: 1,\r\n type: 'Image1x1',\r\n associationType: 'SquareLogoMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_1x1',\r\n imagePreviewHeight: 400,\r\n previewWidth: '400px',\r\n previewHeight: '400px',\r\n simplifiedType: 'Image1x1',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [128, 128],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-square-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: true,\r\n },\r\n};\r\n\r\nconstants.getMmaAspectRatios = (imageOption) => {\r\n if (imageOption === constants.imageOptionKeys.Logo) {\r\n return logoAspectRatios;\r\n }\r\n return {\r\n Image191x100: {\r\n aspectRatio: 1.91,\r\n type: 'Image191x100',\r\n associationType: 'LandscapeImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_191x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_191x100',\r\n previewTypeString: _TL_('Landscape image'),\r\n imagePreviewHeight: 244,\r\n previewWidth: '600px',\r\n previewHeight: '244px',\r\n simplifiedType: 'Image191x100',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [703, 368],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-landscape-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image4x1: {\r\n aspectRatio: 4,\r\n type: 'Image4x1',\r\n associationType: 'ImageMedia4x1',\r\n stringKey: 'ImageExperience_Image_Ratio_4x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_4x1',\r\n previewTypeString: _TL_('Wide image'),\r\n imagePreviewHeight: 152,\r\n previewWidth: '608px',\r\n previewHeight: '152px',\r\n simplifiedType: 'Image4x1',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [608, 152],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-wide-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image1x1: {\r\n aspectRatio: 1,\r\n type: 'Image1x1',\r\n associationType: 'SquareImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_1x1',\r\n previewTypeString: _TL_('Square image'),\r\n imagePreviewHeight: 400,\r\n previewWidth: '400px',\r\n previewHeight: '400px',\r\n simplifiedType: 'Image1x1',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [470, 470],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-square-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image1x2: {\r\n aspectRatio: 0.5,\r\n type: 'Image1x2',\r\n associationType: 'ImageMedia1x2',\r\n stringKey: 'ImageExperience_Image_Ratio_1x2',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_1x2',\r\n previewTypeString: _TL_('Vertical image'),\r\n imagePreviewHeight: 400,\r\n previewWidth: '200px',\r\n previewHeight: '400px',\r\n simplifiedType: 'Image1x2',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [470, 940],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-vertical-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n };\r\n};\r\n\r\nconstants.getAspectRatios = ({\r\n isMultimediaAd,\r\n isMultimediaAdinMSANEnabled,\r\n imageOption = constants.defaultImageOption,\r\n isCombinedMsanAndMmaAspectRatios = false,\r\n isBoost200x100ImageEnabled = false,\r\n isBoostNewAspectRatioSupportEnabled = false,\r\n isMMAV2Enabled = false,\r\n isDisplayAds = false,\r\n isPortraitImage = false,\r\n isStoreAppProng = false,\r\n isStoreAppSpotLight = false,\r\n isStoreAppTransparentLogo = false,\r\n isUnifiedAppCampaignWindowsStore = false,\r\n isLinkedInAd = false,\r\n isPMaxAspectRatiosV2Enabled = false,\r\n}) => {\r\n if (isLinkedInAd) {\r\n return constants.aspectRatiosForLinkedInAds;\r\n }\r\n if (isStoreAppProng) {\r\n return { ImagePRONG: { ...constants.aspectRatiosForAppCampaign.ImagePRONG } };\r\n }\r\n if (isStoreAppSpotLight) {\r\n return { ImageSPOTLIGHT: { ...constants.aspectRatiosForAppCampaign.ImageSPOTLIGHT } };\r\n }\r\n if (isStoreAppTransparentLogo) {\r\n return { TransparentLogo: { ...constants.aspectRatiosForAppCampaign.TransparentLogo } };\r\n }\r\n\r\n if (isUnifiedAppCampaignWindowsStore) {\r\n return { ImagePRONG: { ...constants.aspectRatiosForAppCampaign.ImagePRONG }, ImageSPOTLIGHT: { ...constants.aspectRatiosForAppCampaign.ImageSPOTLIGHT } };\r\n }\r\n // old boost portrait uses separate image experience and they pass in isPotraitImage prop.\r\n // for new boost campaigns in display plus we reuse pmax image experience and for that we need to rely on imageOptionstate.\r\n if (isPortraitImage || imageOption === constants.imageOptionKeys.Portrait) {\r\n return constants.aspectRatiosForBoostPortrait;\r\n }\r\n if (isDisplayAds) {\r\n return constants.aspectRatiosForDisplayAds;\r\n }\r\n\r\n if (imageOption === constants.imageOptionKeys.Logo) {\r\n return logoAspectRatios;\r\n }\r\n\r\n if (isCombinedMsanAndMmaAspectRatios) {\r\n return isPMaxAspectRatiosV2Enabled\r\n ? constants.pmaxV2Ratios\r\n : { ..._.pick(constants.aspectRatios, constants.pmaxMsanRatios), ..._.pick(constants.getMmaAspectRatios(), constants.pmaxMmaRatios) };\r\n }\r\n\r\n let aspectRatios = isMultimediaAd ? constants.getMmaAspectRatios() : constants.aspectRatios;\r\n\r\n if (isMultimediaAdinMSANEnabled) {\r\n aspectRatios = _.pick(aspectRatios, constants.multimediaAdinMSANRatios);\r\n }\r\n\r\n if (isBoost200x100ImageEnabled || isBoostNewAspectRatioSupportEnabled) {\r\n _.extend(aspectRatios, constants.aspectRatiosForBoost200x100);\r\n\r\n if (isBoostNewAspectRatioSupportEnabled) {\r\n _.extend(aspectRatios, constants.aspectRatiosForBoostNewSupport);\r\n }\r\n }\r\n\r\n if (isMMAV2Enabled) {\r\n aspectRatios = _.pick(constants.aspectRatiosForMMAV2, constants.audienceMMAV2AspectRatios);\r\n }\r\n\r\n return aspectRatios;\r\n};\r\n\r\nconstants.SupportedCaptionLocales = [\r\n {\r\n Lcid: 1033,\r\n FullName: 'English (US): en_US',\r\n Tag: 'en_US',\r\n },\r\n];\r\n\r\nconstants.LcidToFullName = (Lcid) => {\r\n const locale = constants.SupportedCaptionLocales.find(loc => loc.Lcid === Lcid);\r\n return locale ? locale.FullName : Lcid.toString();\r\n};\r\n\r\nconstants.TagToLcid = (tag) => {\r\n const locale = constants.SupportedCaptionLocales\r\n .find(loc => loc.Tag.toLowerCase() === tag.toLowerCase());\r\n return locale ? locale.Lcid : null;\r\n};\r\n\r\nconstants.DEFAULT_MAX_IMAGE = 16;\r\nconstants.DEFAULT_MAX_LOGO = 5;\r\nconstants.DEFAULT_MAX_PORTRAIT = 1;\r\n\r\nconstants.audienceMMAV2WithDiffAspectRatio = ['Image191x100', 'Image169x100', 'Image1x1'];\r\n\r\nconstants.multimediaAdinMSANRatios = ['Image191x100', 'Image178x100', 'Image150x100', 'Image133x100', 'Image1x1'];\r\nconstants.boostMultimediaAdinMSANRatios = constants.multimediaAdinMSANRatios.concat('Image200x100');\r\nconstants.boostMultimediaAdinMSANRatiosNewSupport = constants.boostMultimediaAdinMSANRatios\r\n .concat('Image122x100', 'Image159x100', 'Image180x100', 'Image233x100', 'Image320x100', 'Image57x100');\r\nconstants.pmaxMsanRatios = ['Image191x100', 'Image178x100', 'Image150x100', 'Image133x100', 'Image1x1'];\r\nconstants.pmaxMmaRatios = ['Image4x1', 'Image1x2'];\r\n\r\nconstants.pmaxV2Ratios = {\r\n Image191x100: {\r\n aspectRatio: 1.91,\r\n type: 'Image191x100',\r\n associationType: 'LandscapeImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_191x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_191x100',\r\n previewTypeString: _TL_('Landscape image'),\r\n imagePreviewHeight: 244,\r\n previewWidth: '600px',\r\n previewHeight: '244px',\r\n simplifiedType: 'Image191x100',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [703, 368],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-landscape-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image4x1: {\r\n aspectRatio: 4,\r\n type: 'Image4x1',\r\n associationType: 'ImageMedia4x1',\r\n stringKey: 'ImageExperience_Image_Ratio_4x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_4x1',\r\n previewTypeString: _TL_('Wide image'),\r\n imagePreviewHeight: 152,\r\n previewWidth: '608px',\r\n previewHeight: '152px',\r\n simplifiedType: 'Image4x1',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [608, 152],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-wide-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image1x1: {\r\n aspectRatio: 1,\r\n type: 'Image1x1',\r\n associationType: 'SquareImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_1x1',\r\n previewTypeString: _TL_('Square image'),\r\n imagePreviewHeight: 400,\r\n previewWidth: '400px',\r\n previewHeight: '400px',\r\n simplifiedType: 'Image1x1',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [470, 470],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-square-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image1x2: {\r\n aspectRatio: 0.5,\r\n type: 'Image1x2',\r\n associationType: 'ImageMedia1x2',\r\n stringKey: 'ImageExperience_Image_Ratio_1x2',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_MultimediaAd_1x2',\r\n previewTypeString: _TL_('Vertical image'),\r\n imagePreviewHeight: 400,\r\n previewWidth: '200px',\r\n previewHeight: '400px',\r\n simplifiedType: 'Image1x2',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [470, 940],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'multimedia-ad-vertical-image',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image201x100: {\r\n aspectRatio: 2.01,\r\n type: 'Image201x100',\r\n associationType: 'ImageMedia201X100',\r\n stringKey: 'ImageExperience_Image_Ratio_201x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_201x100',\r\n previewTypeString: _TL_('Microsoft Edge carousel'),\r\n imagePreviewHeight: 304,\r\n minimumRequirements: 0,\r\n minSize: [612, 304],\r\n previewSettings: {\r\n previewContentClassName: 'edge-carousel ', // ???\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image169x100: {\r\n aspectRatio: 1.69,\r\n type: 'Image169x100',\r\n associationType: 'ImageMedia169X100',\r\n stringKey: 'ImageExperience_Image_Ratio_169x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_169x100_V2',\r\n previewTypeString: _TL_('MSN Single Carousel'),\r\n imagePreviewHeight: 372,\r\n minimumRequirements: 0,\r\n minSize: [628, 372],\r\n previewSettings: {\r\n previewContentClassName: 'msn-single-carousel-v2', // ???\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image153x100: {\r\n aspectRatio: 1.53,\r\n type: 'Image153x100',\r\n associationType: 'ImageMedia153X100',\r\n stringKey: 'ImageExperience_Image_Ratio_153x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_153x100',\r\n previewTypeString: _TL_('MSN partner stripe'),\r\n imagePreviewHeight: 197,\r\n minimumRequirements: 0,\r\n minSize: [306, 200],\r\n previewSettings: {\r\n previewContentClassName: 'msn-partner-stripe', // ???\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n Image124x100: {\r\n aspectRatio: 1.24,\r\n type: 'Image124x100',\r\n associationType: 'ImageMedia124X100',\r\n stringKey: 'ImageExperience_Image_Ratio_124x100',\r\n previewTypeStringKey: 'ImageExperience_Preview_Type_124x100',\r\n previewTypeString: _TL_('MSN Restoday'),\r\n imagePreviewHeight: 84,\r\n minimumRequirements: 0,\r\n minSize: [104, 84],\r\n previewSettings: {\r\n previewContentClassName: 'msn-restoday', // ???\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showDescription: true,\r\n showBusinessName: false,\r\n showUrl: true,\r\n showAction: true,\r\n showAdsLabel: true,\r\n showAdditionalDisclaimer: true,\r\n },\r\n isLogo: false,\r\n },\r\n};\r\n\r\nconstants.audienceMMAV2AspectRatiosWithoutOriginalImage =\r\n ['Image201x100', 'Image200x100', 'Image191x100',\r\n 'Image169x100', 'Image153x100', 'Image124x100', 'Image120x100', 'Image1x1'];\r\n\r\nconstants.audienceMMAV2AspectRatios =\r\n ['OriginalImage', constants.audienceMMAV2AspectRatiosWithoutOriginalImage];\r\n\r\nconstants.imageSources = {\r\n Website: 'Website',\r\n WebsiteCarousel: 'WebsiteCarousel',\r\n Upload: 'Upload',\r\n Existing: 'Existing',\r\n Stock: 'Stock',\r\n AdRecommendation: 'AdRecommendation',\r\n Social: 'Social',\r\n AIGenerated: 'AIGenerated',\r\n Invest: 'Invest',\r\n BackgroundChangeGenerated: 'BackgroundChangeGenerated',\r\n};\r\n\r\n// image asset from MT\r\nconstants.sourceTypes = {\r\n TwitterImported: 'TwitterImported',\r\n WebsiteImported: 'WebsiteImported',\r\n UserUploaded: 'UserUploaded',\r\n AIGenerated: 'AIGenerated',\r\n BackgroundChangeGenerated: 'BackgroundChangeGenerated',\r\n AIGeneratedByRecraft: 'AIGeneratedByRecraft',\r\n};\r\n\r\nconstants.getSourceTypeFromImageSource = (imageSource) => {\r\n if (imageSource === constants.imageSources.Website || imageSource === constants.imageSources.WebsiteCarousel) {\r\n return constants.sourceTypes.WebsiteImported;\r\n }\r\n if (imageSource === constants.imageSources.Social) {\r\n return constants.sourceTypes.TwitterImported;\r\n }\r\n if (imageSource === constants.imageSources.BackgroundChangeGenerated) {\r\n return constants.sourceTypes.BackgroundChangeGenerated;\r\n }\r\n\r\n return undefined;\r\n};\r\n\r\nconstants.preferenceFlags = {\r\n MMATeachingBubble: 'WebApp.CampaignUI.ShowAdCreatorEditImageBubble',\r\n MMAWebsiteImageOptIn: 'WebApp.CampaignUI.MMAWebsiteImageOptIn',\r\n MMAInMSANTeachingBubble: 'WebApp.CampaignUI.ShowAdCreatorEditImageBubbleInMSAN',\r\n MMAInMSANWebsiteImageOptIn: 'WebApp.CampaignUI.MMAInMSANWebsiteImageOptIn',\r\n};\r\n\r\nconstants.imageOptionKeys = {\r\n Image: 'Image',\r\n Logo: 'Logo',\r\n Portrait: 'Portrait',\r\n};\r\n\r\nconstants.getImageOptions = ({\r\n i18n = {\r\n getString: _.noop,\r\n },\r\n disableImage = false,\r\n disableLogo = false,\r\n disablePortrait = false,\r\n}) => [{\r\n key: constants.imageOptionKeys.Image,\r\n text: i18n.getString(`ImageOptionDropdown_${constants.imageOptionKeys.Image}`),\r\n disabled: disableImage,\r\n}, {\r\n key: constants.imageOptionKeys.Logo,\r\n text: i18n.getString(`ImageOptionDropdown_${constants.imageOptionKeys.Logo}`),\r\n disabled: disableLogo,\r\n}, {\r\n key: constants.imageOptionKeys.Portrait,\r\n text: i18n.getString(`ImageOptionDropdown_${constants.imageOptionKeys.Portrait}`),\r\n disabled: disablePortrait,\r\n}];\r\n\r\nconstants.defaultImageOption = _.first(constants.getImageOptions({})).key;\r\n\r\nconstants.getAspectRatioOptions = (i18n = {\r\n getString: _.noop,\r\n}) => [{\r\n key: constants.logoSubtypes.SquareLogoMedia,\r\n labelId: constants.logoSubtypes.SquareLogoMedia,\r\n text: i18n.getString(`AspectRatioChoiceGroup_${constants.logoSubtypes.SquareLogoMedia}`),\r\n}, {\r\n key: constants.logoSubtypes.LandscapeLogoMedia,\r\n labelId: constants.logoSubtypes.LandscapeLogoMedia,\r\n text: i18n.getString(`AspectRatioChoiceGroup_${constants.logoSubtypes.LandscapeLogoMedia}`),\r\n}];\r\n\r\nconstants.defaultAspectRatioOption = _.first(constants.getAspectRatioOptions()).key;\r\n\r\nconstants.getBoostAspectRatios = i18n => ({\r\n windowsSpotlight: {\r\n aspectRatio: 1.9,\r\n type: 'Image191x100',\r\n associationType: 'LandscapeImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_191x100',\r\n previewTypeStringKey: i18n.getString(_TL_('Windows Spotlight')),\r\n previewTypeString: '',\r\n imagePreviewHeight: 400,\r\n simplifiedType: 'Image191x100',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [268, 140],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-windows',\r\n showLongHeadline: true,\r\n showBusinessName: false,\r\n multipleLineLongHeadline: true,\r\n multipleDescription: true,\r\n showDescription: true,\r\n hideLabel: true,\r\n showHotspots: true,\r\n },\r\n },\r\n discoverCard: {\r\n aspectRatio: 1,\r\n type: 'Image1x1',\r\n associationType: 'SquareImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_1x1',\r\n previewTypeStringKey: i18n.getString(_TL_('Discover card')),\r\n previewTypeString: _TL_('MSN square image'),\r\n imagePreviewHeight: 250,\r\n previewWidth: '200px',\r\n previewHeight: '200px',\r\n simplifiedType: 'Image1x1',\r\n isRequired: true,\r\n minimumRequirements: 0,\r\n minSize: [300, 300],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-discover-card',\r\n showShortHeadline: true,\r\n showLongHeadline: false,\r\n showBusinessName: false,\r\n multipleDescription: true,\r\n showDescription: true,\r\n showAction: true,\r\n },\r\n },\r\n startMeno: {\r\n aspectRatio: 1.75,\r\n type: 'Image178x100',\r\n previewTypeString: '',\r\n previewTypeStringKey: i18n.getString(_TL_('Start Menu')),\r\n imagePreviewHeight: 160,\r\n logoHeight: 24,\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [280, 160],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-start-menu',\r\n showLogo: true,\r\n showShortHeadline: true,\r\n multipleLineLongHeadline: true,\r\n showLongHeadline: true,\r\n showAction: false,\r\n showBusinessName: false,\r\n showImage: false,\r\n showDismiss: true,\r\n },\r\n },\r\n actionCenter: {\r\n aspectRatio: 1.75,\r\n type: 'Image178x100',\r\n previewTypeString: '',\r\n previewTypeStringKey: i18n.getString(_TL_('Action Center')),\r\n imagePreviewHeight: 160,\r\n logoHeight: 48,\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [280, 160],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-actionCenter',\r\n showLogo: true,\r\n showShortHeadline: true,\r\n multipleDescription: true,\r\n showDescription: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n showImage: false,\r\n showDismiss: true,\r\n },\r\n },\r\n banner: {\r\n aspectRatio: 1.75,\r\n type: 'Image178x100',\r\n previewTypeString: '',\r\n previewTypeStringKey: i18n.getString(_TL_('Banner')),\r\n imagePreviewHeight: 160,\r\n logoHeight: 20,\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [280, 160],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-banner',\r\n showLogo: true,\r\n showShortHeadline: true,\r\n showAction: true,\r\n showBusinessName: false,\r\n showImage: false,\r\n showDismiss: true,\r\n },\r\n },\r\n Image191x100: {\r\n aspectRatio: 1.914,\r\n type: 'Image191x100',\r\n associationType: 'LandscapeImageMedia',\r\n stringKey: 'ImageExperience_Image_Ratio_191x100',\r\n previewTypeStringKey: i18n.getString(_TL_('Prong 1 / Prong 2 / Feed')),\r\n previewTypeString: '',\r\n imagePreviewHeight: 140,\r\n simplifiedType: 'Image191x100',\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [268, 140],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-191X1',\r\n showBusinessName: true,\r\n showLongHeadline: true,\r\n multipleLineLongHeadline: true,\r\n hideLabel: true,\r\n },\r\n },\r\n coachmark: {\r\n aspectRatio: 1.75,\r\n type: 'Image178x100',\r\n previewTypeString: '',\r\n previewTypeStringKey: i18n.getString(_TL_('CoachMark')),\r\n imagePreviewHeight: 160,\r\n isRequired: true,\r\n minimumRequirements: 1,\r\n minSize: [280, 160],\r\n maxSize: [0, 0],\r\n previewSettings: {\r\n previewContentClassName: 'boost-coachmark',\r\n showDescription: true,\r\n showShortHeadline: true,\r\n showBusinessName: false,\r\n multipleLineLongHeadline: true,\r\n multipleDescription: true,\r\n showAction: true,\r\n },\r\n },\r\n});\r\n\r\n//\r\n// Image expansion/Fitting - Begin\r\n// None/WhitePadding/Blur/Outpainting/SingleColorPadding\r\nconstants.ImageExpansionType = UAPImageExpansionType;\r\n\r\nconstants.CroppingType = UAPCroppingType;\r\nconstants.ImageExpansionDataSource = {\r\n Existing: 'Existing', // the data is loaded from image assets\r\n ImageFittingAPI: 'ImageFittingAPI', // the data is created by calling image fitting API\r\n};\r\n// Image expansion/Fitting - End\r\n\r\nexport default constants;\r\n","export const AspectRatiosForLinkedInAds = {\r\n Image191x100: {\r\n aspectRatio: 1.91,\r\n type: 'Image191x100',\r\n associationType: 'LandscapeImageMedia',\r\n minSize: [690, 360],\r\n maxSize: [7680, 4320],\r\n isLogo: false,\r\n },\r\n Image1x1: {\r\n aspectRatio: 1,\r\n type: 'Image1x1',\r\n associationType: 'SquareImageMedia',\r\n minSize: [360, 360],\r\n maxSize: [4320, 4320],\r\n isLogo: false,\r\n },\r\n Image4x5: {\r\n aspectRatio: 0.8,\r\n type: 'Image4x5',\r\n associationType: 'PortraitImageMedia',\r\n minSize: [512, 640],\r\n maxSize: [2430, 4320],\r\n isLogo: false,\r\n },\r\n};\r\n","import Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\nimport { serializeImageAssetMetadata } from '@bingads-webui-campaign/media-metadata-model';\r\nimport { getExpandedImageUrl as getExpandedImageUrlUAPL, setROIInfo } from '@bingads-webui-campaign-react/unified-ad-preview-library-util';\r\nimport C from './constants';\r\n\r\n/**\r\n * ImageExperienceImage Class\r\n * This class is used internally to the ImageExperience pacakge\r\n * Main purpose is to have a consistant object across different components\r\n *\r\n * @class ImageExperienceImage\r\n */\r\nclass ImageExperienceImage {\r\n /**\r\n * Creates an instance of ImageExperienceImage.\r\n *\r\n * @param {Object} imageObj - image object\r\n * @param {id} imageObj.id - id of the image\r\n * @param {String} imageObj.idString - id of the image\r\n * @param {Number} imageObj.width - Width of the image\r\n * @param {Number} imageObj.heigth - Height of the image\r\n * @param {string} imageObj.type - Type of the image\r\n * @param {string} imageObj.associationType - Sub type of the image\r\n * @param {string} imageObj.text - Text of the image\r\n * @param {string} imageObj.altText - Alt Text of the image\r\n * @param {Object} imageObj.cropSettings - Crop setting object of the image\r\n * @param {Object} imageObj.effectSettings - Effect setting object of the image\r\n * @param {string} imageObj.baseId - base id of the image without metadata\r\n * @param {string} imageObj.metadata - string metadata of the image, e.g. effect info\r\n * @param {Boolean} imageObj.isIncluded - Is the aspect ratio included\r\n * @param {Boolean} imageObj.isLogo - Is a logo aspect ratio\r\n * @param {Boolean} imageObj.isPortrait - Is a portrait aspect ratio\r\n * @param {Boolean} imageObj.isRecommendedImage - Is an recommended image\r\n * @param {Boolean} imageObj.disableEdit - disable image edit\r\n * @param {Boolean} createBaseImageInfo - Whether to create base image info\r\n * @param {Object} imageObj.originCropSetting - cropsetting without manual cropping\r\n * @param {boolean} imageObj.isAutoCropping - auto cropping\r\n * @param {string} imageObj.source - source of image (e.g. website images, carousel, etc.)\r\n * @param {string} imageObj.originalUrl - original url of image if user has done a bulk crop\r\n * @param {string} imageObj.cropSettingOnOriginal - crop setting to derive current image\r\n * from original\r\n * @param {array} imageObj.placementSettings - placement settings if bulk crop was done\r\n * image source (Website, Upload, Existing or Stock)\r\n * @param {number} imageObj.originalHeight - original height of image pre-bulk crop\r\n * @param {number} imageObj.originalWidth - original width of the image pre-bulk crop\r\n *\r\n * @param {string} imageObj.imageExpansionType - image expansion type, constants.ImageExpansionType\r\n * @param {Object} imageObj.originalImageCropSettings - {SourceX, SourceY, SourceWidth, SourceHeight}\r\n * @param {Object} imageObj.expandedImageCropSettings - {SourceX, SourceY, SourceWidth, SourceHeight}\r\n * @param {string} imageObj.expandedImageUrl - expanded image url, for outpainting only, and only for return from fitting api\r\n * @param {number} expandedImageWidth - expanded image width\r\n * @param {number} expandedImageHeight - expanded image height\r\n * @param {string} paddingColor - padding color for single color padding\r\n */\r\n constructor(imageObj, createBaseImageInfo = true) {\r\n this.id = imageObj.id;\r\n this.idString = imageObj.idString;\r\n this.src = imageObj.src;\r\n this.type = imageObj.type;\r\n this.associationType = imageObj.associationType;\r\n this.width = imageObj.width;\r\n this.height = imageObj.height;\r\n this.cropSettings = imageObj.cropSettings;\r\n this.effectSettings = imageObj.effectSettings;\r\n this.baseId = imageObj.baseId;\r\n this.metadata = imageObj.metadata;\r\n this.isIncluded = imageObj.isIncluded;\r\n this.isLogo = imageObj.isLogo;\r\n this.isPortrait = imageObj.isPortrait;\r\n this.isRecommendedImage = imageObj.isRecommendedImage;\r\n this.disableEdit = imageObj.disableEdit;\r\n this.originCropSetting = imageObj.originCropSetting || this.cropSettings;\r\n this.isAutoCropping = imageObj.isAutoCropping;\r\n this.text = imageObj.text;\r\n this.altText = imageObj.altText;\r\n this.source = imageObj.source;\r\n this.originalSourceType = imageObj.originalSourceType;\r\n this.originalUrl = imageObj.originalUrl;\r\n this.cropSettingOnOriginal = imageObj.cropSettingOnOriginal;\r\n this.placementSettings = imageObj.placementSettings;\r\n this.originalHeight = imageObj.originalHeight;\r\n this.originalWidth = imageObj.originalWidth;\r\n\r\n // constants.ImageExpansionType\r\n this.imageExpansionType = imageObj.imageExpansionType;\r\n this.expandedImageCropSettings = imageObj.expandedImageCropSettings;\r\n // expanded image url from imageFitting response, for outpainting only, and it's the url on blob storage\r\n this.expandedImageUrl = imageObj.expandedImageUrl;\r\n this.expandedImageWidth = imageObj.expandedImageWidth;\r\n this.expandedImageHeight = imageObj.expandedImageHeight;\r\n this.cropSettings = this.cropSettings || imageObj.originalImageCropSettings || null;\r\n this.originalImageCropSettings = imageObj.originalImageCropSettings;\r\n this.paddingColor = imageObj.paddingColor;\r\n\r\n if (createBaseImageInfo && this.type) {\r\n // parent-child relationship will only be one level deep\r\n this.baseImage = new ImageExperienceImage(_.defaults({\r\n cropSettings: null,\r\n effectSettings: null,\r\n type: null,\r\n id: this.BaseId,\r\n baseId: null,\r\n metadata: null,\r\n // don't keep expansion cropping info in baseImage\r\n expandedImageCropSettings: null,\r\n originalImageCropSettings: null,\r\n }, imageObj), false /* createBaseImageInfo */);\r\n } else {\r\n this.baseImage = imageObj.baseImage;\r\n }\r\n }\r\n\r\n /**\r\n * Get base image\r\n *\r\n * @readonly\r\n * @returns {Number} - base image\r\n */\r\n get BaseImage() {\r\n return this.baseImage;\r\n }\r\n\r\n setBaseImage(baseImage) {\r\n this.baseImage = baseImage;\r\n }\r\n\r\n /**\r\n * Get source of the image\r\n *\r\n * @readonly\r\n * @returns {Number} - id of the saved image\r\n */\r\n get Id() {\r\n return this.id;\r\n }\r\n\r\n /**\r\n * Get base source of the image without metadata\r\n *\r\n * @readonly\r\n * @returns {String} - id of base image.\r\n */\r\n get BaseId() {\r\n // if baseId is not set in constructor, this is already original image, return Id instead.\r\n return this.baseId || this.Id;\r\n }\r\n\r\n /**\r\n * Get source of the image\r\n *\r\n * @readonly\r\n * @returns {string} - id of the saved image\r\n */\r\n get IdString() {\r\n return this.idString;\r\n }\r\n\r\n /**\r\n * Get source of the image\r\n *\r\n * @readonly\r\n * @returns {string} - string source of the image either base64 or url\r\n */\r\n get Src() {\r\n return this.src;\r\n }\r\n\r\n setSrc(src) {\r\n this.src = src;\r\n }\r\n\r\n /**\r\n * Get metadata of the image\r\n *\r\n * @readonly\r\n * @returns {string} - Metadata associated with this image\r\n */\r\n get Metadata() {\r\n return this.metadata;\r\n }\r\n\r\n /**\r\n * Get width of the image\r\n *\r\n * @readonly\r\n * @returns {Number} - Width of the image\r\n */\r\n get Width() {\r\n return this.width;\r\n }\r\n\r\n /**\r\n * Get height of the image\r\n *\r\n * @readonly\r\n * @returns {Number} - Height of the image\r\n */\r\n get Height() {\r\n return this.height;\r\n }\r\n\r\n /**\r\n * Get type of the image\r\n *\r\n * @readonly\r\n * @returns {string} - Type of the image\r\n */\r\n get Type() {\r\n return this.type;\r\n }\r\n\r\n /**\r\n * Get text of the image\r\n *\r\n * @readonly\r\n * @returns {string} - Text of the image\r\n */\r\n get Text() {\r\n return this.text;\r\n }\r\n\r\n get AltText() {\r\n return this.altText;\r\n }\r\n\r\n setType(type) {\r\n this.type = type;\r\n }\r\n\r\n /**\r\n * Get crop settings of the image\r\n *\r\n * @readonly\r\n * @returns {Object} - crop settings of the image\r\n */\r\n get CropSettings() {\r\n return this.cropSettings;\r\n }\r\n\r\n /**\r\n * Get effect settings of the image\r\n *\r\n * @readonly\r\n * @returns {Object} - crop settings of the image\r\n */\r\n get EffectSettings() {\r\n return this.effectSettings;\r\n }\r\n\r\n setEffectSettings(effectSettings) {\r\n this.effectSettings = effectSettings;\r\n }\r\n\r\n isMaunalCropped() {\r\n return !_.isEqual(this.originCropSetting, this.cropSettings);\r\n }\r\n\r\n isEffectEdited() {\r\n const metadata = serializeImageAssetMetadata({ effectSettings: this.EffectSettings });\r\n\r\n if (_.isEmpty(this.Metadata) && _.isEmpty(metadata)) {\r\n return false;\r\n }\r\n\r\n return !_.isEqual(this.Metadata, metadata);\r\n }\r\n\r\n isManualEdited(isAdCreatorEnabled = false) {\r\n if (!isAdCreatorEnabled) {\r\n return this.isMaunalCropped();\r\n }\r\n\r\n return this.isEffectEdited() || this.isMaunalCropped();\r\n }\r\n\r\n setIncluded(value) {\r\n this.isIncluded = value;\r\n }\r\n\r\n setAutoCropping(value) {\r\n this.isAutoCropping = value;\r\n }\r\n\r\n /**\r\n * Get final src of the image with effect if any.\r\n *\r\n * @readonly\r\n * @returns {string} - final image src with effect\r\n */\r\n get FinalSrc() {\r\n if (this.effectSettings && this.effectSettings.effectKey) {\r\n return this.effectSettings.effectSrc;\r\n }\r\n return this.src;\r\n }\r\n\r\n /**\r\n * Get if the aspect ratio is included\r\n *\r\n * @readonly\r\n * @returns {Boolean} - is default ratio of the image\r\n */\r\n get IsIncluded() {\r\n return this.isIncluded;\r\n }\r\n\r\n /**\r\n * Get crop settings of the image\r\n *\r\n * @readonly\r\n * @returns {string} - thumbnail url for the AdList\r\n */\r\n get ThumbnailForAdList() {\r\n return `${this.ThumbnailUrl}&w=191&h=100`;\r\n }\r\n\r\n get ThumbnailUrl() {\r\n const srcWithQuery = this.src.indexOf('?') > 0 ? this.src : `${this.src}?`;\r\n let cropQuery = '';\r\n\r\n if (this.cropSettings) {\r\n const left = this.cropSettings.SourceX / this.width;\r\n const top = this.cropSettings.SourceY / this.height;\r\n const right = (this.cropSettings.SourceX + this.cropSettings.SourceWidth) / this.width;\r\n const bottom = (this.cropSettings.SourceY + this.cropSettings.SourceHeight) / this.height;\r\n\r\n cropQuery = `&c=16&roil=${left}&roit=${top}&roir=${right}&roib=${bottom}`;\r\n }\r\n\r\n return `${srcWithQuery}${cropQuery}`;\r\n }\r\n\r\n copyThumbnailLookToNewImage({ id, src }) {\r\n return new ImageExperienceImage({\r\n id,\r\n src,\r\n cropSettings: cloneDeep(this.CropSettings),\r\n width: this.Width,\r\n height: this.Height,\r\n });\r\n }\r\n\r\n // they are coming from same base image, but with different look\r\n copyEffectsFromOther(another) {\r\n const fields = [\r\n 'id',\r\n 'idString',\r\n 'src',\r\n 'effectSettings',\r\n 'baseId',\r\n 'metadata',\r\n 'isLogo',\r\n 'isPortrait',\r\n 'isRecommendedImage',\r\n 'text',\r\n 'source',\r\n ];\r\n _.extend(this, _.pick(another, fields));\r\n }\r\n\r\n /**\r\n * Get source of the image, either Website, Upload, Existing or Stock\r\n *\r\n * @readonly\r\n * @returns {string} - thumbnail url for the AdList\r\n */\r\n get Source() {\r\n return this.source;\r\n }\r\n\r\n get OriginalSourceType() {\r\n return this.originalSourceType;\r\n }\r\n\r\n get OriginalUrl() {\r\n return this.originalUrl;\r\n }\r\n\r\n get PlacementSettings() {\r\n return this.placementSettings;\r\n }\r\n\r\n get OriginalHeight() {\r\n return this.originalHeight;\r\n }\r\n\r\n get OriginalWidth() {\r\n return this.originalWidth;\r\n }\r\n\r\n get CropSettingOnOriginal() {\r\n return this.cropSettingOnOriginal;\r\n }\r\n\r\n get IsBulkCropped() {\r\n return this.Src !== this.OriginalUrl;\r\n }\r\n\r\n setCropSettings(cropSettings) {\r\n this.cropSettings = cropSettings;\r\n }\r\n\r\n setAltText(text) {\r\n this.altText = text;\r\n }\r\n\r\n // for some recommend ads, id of ImageExperienceImage could be null\r\n setNewId(id) {\r\n this.id = id;\r\n this.idString = String(id);\r\n }\r\n\r\n setAssociationType(associationType) {\r\n this.associationType = associationType;\r\n }\r\n\r\n // if the image is processed by imageFitting api, no matter if it's be able to be expaneded.\r\n get isImageExpanded() {\r\n return !!this.imageExpansionType;\r\n }\r\n\r\n getExpandedImageUrl() {\r\n return getExpandedImageUrlUAPL(this.imageExpansionType, this.src, this.paddingColor, this.expandedImageWidth, this.expandedImageHeight);\r\n }\r\n\r\n /**\r\n * Get the clone of this object\r\n *\r\n * @returns {ImageExperienceImage} - cloned ImageExperienceImage\r\n */\r\n clone() {\r\n const base = this.baseImage ? new ImageExperienceImage(cloneDeep({\r\n ...this.baseImage,\r\n }), false) : null;\r\n\r\n return new ImageExperienceImage(_.extend(cloneDeep({\r\n id: this.id,\r\n idString: this.idString,\r\n src: this.src,\r\n type: this.type,\r\n associationType: this.associationType,\r\n width: this.width,\r\n height: this.height,\r\n altText: this.altText,\r\n cropSettings: this.cropSettings,\r\n effectSettings: this.effectSettings,\r\n isIncluded: this.isIncluded,\r\n isLogo: this.isLogo,\r\n isPortrait: this.isPortrait,\r\n isRecommendedImage: this.isRecommendedImage,\r\n disableEdit: this.disableEdit,\r\n baseId: this.baseId,\r\n metadata: this.metadata,\r\n source: this.source,\r\n originalSourceType: this.originalSourceType,\r\n originalUrl: this.originalUrl,\r\n originalWidth: this.originalWidth,\r\n originalHeight: this.originalHeight,\r\n cropSettingOnOriginal: this.cropSettingOnOriginal,\r\n placementSettings: this.placementSettings,\r\n\r\n // image fitting info\r\n imageExpansionType: this.imageExpansionType,\r\n expandedImageCropSettings: this.expandedImageCropSettings,\r\n expandedImageUrl: this.expandedImageUrl,\r\n expandedImageWidth: this.expandedImageWidth,\r\n expandedImageHeight: this.expandedImageHeight,\r\n paddingColor: this.paddingColor,\r\n originalImageCropSettings: this.originalImageCropSettings,\r\n }), {\r\n baseImage: base,\r\n }), false);\r\n }\r\n\r\n copyExpandedImageInfo(expandedImage) {\r\n if (expandedImage && expandedImage.isImageExpanded) {\r\n this.imageExpansionType = expandedImage.imageExpansionType;\r\n this.expandedImageCropSettings = expandedImage.expandedImageCropSettings;\r\n this.expandedImageUrl = expandedImage.expandedImageUrl;\r\n this.expandedImageWidth = expandedImage.expandedImageWidth;\r\n this.expandedImageHeight = expandedImage.expandedImageHeight;\r\n this.paddingColor = expandedImage.paddingColor;\r\n this.originalImageCropSettings = expandedImage.originalImageCropSettings;\r\n }\r\n }\r\n\r\n setROIInfo(roiInfoStr, isMMAV2Enabled = false, isPlacementLevel = false) {\r\n if (_.isEmpty(roiInfoStr)) {\r\n return;\r\n }\r\n\r\n const {\r\n expandedImageWidth,\r\n expandedImageHeight,\r\n expandedImageCropSettings,\r\n originalImageCropSettings,\r\n imageExpansionType,\r\n paddingColor,\r\n } = setROIInfo(roiInfoStr, this.src);\r\n\r\n this.imageExpansionType = imageExpansionType;\r\n this.expandedImageWidth = expandedImageWidth;\r\n this.expandedImageHeight = expandedImageHeight;\r\n this.expandedImageCropSettings = expandedImageCropSettings;\r\n this.originalImageCropSettings = originalImageCropSettings;\r\n this.paddingColor = paddingColor;\r\n\r\n if (isPlacementLevel) {\r\n let aspectRatio = C.aspectRatios[this.type] && C.aspectRatios[this.type].aspectRatio;\r\n if (isMMAV2Enabled) {\r\n aspectRatio = C.aspectRatiosForMMAV2[this.type] && C.aspectRatiosForMMAV2[this.type].aspectRatio;\r\n }\r\n const ecsForCurAspectRatio = this.expandedImageCropSettings ? _.filter(this.expandedImageCropSettings, ({ AspectRatio: ar }) => ar === aspectRatio) : [];\r\n if (ecsForCurAspectRatio.length > 0) {\r\n this.expandedImageCropSettings = {\r\n SourceHeight: ecsForCurAspectRatio[0].CropSetting.SourceHeight,\r\n SourceWidth: ecsForCurAspectRatio[0].CropSetting.SourceWidth,\r\n SourceX: ecsForCurAspectRatio[0].CropSetting.SourceX,\r\n SourceY: ecsForCurAspectRatio[0].CropSetting.SourceY,\r\n };\r\n } else {\r\n this.expandedImageCropSettings = undefined;\r\n }\r\n\r\n const originalEcsForCurAspectRatio = this.originalImageCropSettings ? _.filter(this.originalImageCropSettings, ({ AspectRatio: ar }) => ar === aspectRatio) : [];\r\n if (originalEcsForCurAspectRatio.length > 0) {\r\n // save croppingType as CenterCrop for Outpainting and OriginalImage\r\n const croppingType = this.imageExpansionType === C.ImageExpansionType.Outpainting || this.type === 'OriginalImage' ? C.CroppingType.CenterCrop : C.CroppingType.SmartCrop;\r\n this.originalImageCropSettings = {\r\n SourceHeight: originalEcsForCurAspectRatio[0].CropSetting.SourceHeight,\r\n SourceWidth: originalEcsForCurAspectRatio[0].CropSetting.SourceWidth,\r\n SourceX: originalEcsForCurAspectRatio[0].CropSetting.SourceX,\r\n SourceY: originalEcsForCurAspectRatio[0].CropSetting.SourceY,\r\n CroppingType: croppingType,\r\n };\r\n if (this.cropSettings && this.cropSettings.CroppingType !== C.CroppingType.ManualCrop) {\r\n this.cropSettings = this.originalImageCropSettings;\r\n }\r\n }\r\n }\r\n }\r\n\r\n getBasicData() {\r\n return {\r\n id: this.id,\r\n idString: this.idString,\r\n src: this.src,\r\n width: this.width,\r\n height: this.height,\r\n text: this.text,\r\n altText: this.altText,\r\n type: this.type,\r\n isIncluded: this.isIncluded,\r\n source: this.source,\r\n originalSourceType: this.originalSourceType,\r\n };\r\n }\r\n\r\n /**\r\n * Get the object formatted in JSON to save\r\n *\r\n * @param {Boolean} isMultimediaAd - Is multimedia ad\r\n * @param {Boolean} isVideoThumbnail - Is this image used for video thumbnail\r\n * @param {Boolean} overrideInfo - If field exists, take this isntead of member field.\r\n * @param {Boolean} isMMAV2Enabled - If field exists, take this isntead of member field.\r\n * @returns {Object} - Object formatted to be saved on MT\r\n */\r\n formatToSave(\r\n isMultimediaAd = false,\r\n isVideoThumbnail = false,\r\n overrideInfo = {},\r\n isMMAV2Enabled = false,\r\n shouldSaveCroppingType = false\r\n ) {\r\n let subType;\r\n\r\n if (isVideoThumbnail) {\r\n subType = this.Type;\r\n } else {\r\n /* eslint-disable no-lonely-if */\r\n if (this.associationType) {\r\n subType = this.associationType;\r\n } else {\r\n subType = isMultimediaAd ?\r\n C.getMmaAspectRatios()[this.Type].associationType :\r\n C.aspectRatios[this.Type] && C.aspectRatios[this.Type].associationType;\r\n if (isMMAV2Enabled) {\r\n subType = C.aspectRatiosForMMAV2[this.Type] && C.aspectRatiosForMMAV2[this.Type].associationType;\r\n }\r\n }\r\n }\r\n\r\n let result = _.extend({}, _.isEmpty(overrideInfo) ? {\r\n id: this.Id,\r\n idString: this.IdString || this.Id.toString(),\r\n } : {\r\n id: overrideInfo.id,\r\n idString: overrideInfo.id.toString(),\r\n }, { subType });\r\n\r\n if (this.cropSettings) {\r\n result = {\r\n ...result,\r\n cropX: this.cropSettings.SourceX,\r\n cropY: this.cropSettings.SourceY,\r\n cropWidth: this.cropSettings.SourceWidth,\r\n cropHeight: this.cropSettings.SourceHeight,\r\n };\r\n if (shouldSaveCroppingType && this.cropSettings.CroppingType) {\r\n result = {\r\n ...result,\r\n croppingType: this.cropSettings.CroppingType,\r\n };\r\n }\r\n }\r\n\r\n return result;\r\n }\r\n}\r\n\r\n/**\r\n * Returns a promise of returning ImageExperienceImage\r\n *\r\n * @param {string} imageSource - string representation of image source\r\n * @returns {Promise} - promise of returning loaded ImageExperienceImage\r\n */\r\nconst newImageFromSourceAsync = (imageSource) => {\r\n const nativeImage = new Image();\r\n\r\n nativeImage.src = imageSource;\r\n\r\n let imageLoadResolve = null;\r\n\r\n const imageLoadPromise = new Promise((resolve) => {\r\n imageLoadResolve = resolve;\r\n });\r\n\r\n nativeImage.onload = () => {\r\n const imageObj = new ImageExperienceImage({\r\n src: nativeImage.src,\r\n width: nativeImage.naturalWidth,\r\n height: nativeImage.naturalHeight,\r\n cropSettings: {\r\n SourceX: 0,\r\n SourceY: 0,\r\n SourceWidth: nativeImage.naturalWidth,\r\n SourceHeight: nativeImage.naturalHeight,\r\n },\r\n });\r\n\r\n imageLoadResolve(imageObj);\r\n };\r\n\r\n return imageLoadPromise;\r\n};\r\n\r\n/**\r\n * Returns a {ImageExperienceImage} object\r\n *\r\n * @param {object} imageObjectMT - object returned from MT for the image\r\n * @param {string} source - source of the image\r\n * @returns {ImageExperienceImage} - ImageExperienceImage object\r\n */\r\nconst newImageFromMTObject = (imageObjectMT, source) => {\r\n const imageExpansionType = imageObjectMT.ImageExpansionType || imageObjectMT.imageExpansionType;\r\n const cropSettings = imageObjectMT.OriginalImageCroppingSettings || imageObjectMT.originalImageCroppingSettings;\r\n const imageObj = new ImageExperienceImage({\r\n id: imageObjectMT.Id || imageObjectMT.id,\r\n idString: imageObjectMT.IdString || imageObjectMT.idString,\r\n src: imageObjectMT.Url || imageObjectMT.url,\r\n width: imageObjectMT.Width || imageObjectMT.width,\r\n height: imageObjectMT.Height || imageObjectMT.height,\r\n text: imageObjectMT.Text || imageObjectMT.text,\r\n altText: imageObjectMT.AltText || imageObjectMT.altText,\r\n cropSettingOnOriginal: imageObjectMT.CropSettingOnOriginal || imageObjectMT.cropSettingOnOriginal,\r\n originalUrl: imageObjectMT.OriginalUrl || imageObjectMT.originalUrl,\r\n placementSettings: imageObjectMT.PlacementSettings || imageObjectMT.placementSettings,\r\n originalHeight: imageObjectMT.OriginalHeight || imageObjectMT.originalHeight,\r\n originalWidth: imageObjectMT.OriginalWidth || imageObjectMT.originalWidth,\r\n metadata: imageObjectMT.Metadata || imageObjectMT.metadata,\r\n source,\r\n originalSourceType: imageObjectMT.SourceType || imageObjectMT.sourceType,\r\n // image fitting info\r\n imageExpansionType,\r\n expandedImageCropSettings: imageObjectMT.ExpandedImageCroppingSettings || imageObjectMT.expandedImageCropSettings,\r\n expandedImageUrl: imageObjectMT.ExpandedImageUrl || imageObjectMT.expandedImageUrl,\r\n expandedImageWidth: imageObjectMT.ExpandedImageWidth || imageObjectMT.expandedImageWidth,\r\n expandedImageHeight: imageObjectMT.ExpandedImageHeight || imageObjectMT.expandedImageHeight,\r\n paddingColor: imageObjectMT.PaddingColor || imageObjectMT.paddingColor,\r\n cropSettings,\r\n originalImageCropSettings: imageObjectMT.OriginalImageCropSettings || imageObjectMT.originalImageCropSettings,\r\n });\r\n\r\n if (imageObjectMT.ROIInfo) {\r\n imageObj.setROIInfo(imageObjectMT.ROIInfo);\r\n }\r\n\r\n return imageObj;\r\n};\r\n\r\nexport {\r\n ImageExperienceImage,\r\n newImageFromSourceAsync,\r\n newImageFromMTObject,\r\n};\r\n","import { newImageFromMTObject } from './image-experience-image';\r\n\r\nexport const addCropSettingsToCreativeImage = (imgObjMT) => {\r\n const imageObject = newImageFromMTObject(imgObjMT);\r\n\r\n imageObject.SourceWidth = imageObject.width;\r\n imageObject.SourceHeight = imageObject.height;\r\n\r\n imageObject.originalWidth = imageObject.width;\r\n imageObject.originalHeight = imageObject.height;\r\n imageObject.cropWidth = imageObject.width;\r\n imageObject.cropHeight = imageObject.height;\r\n imageObject.cropX = 0;\r\n imageObject.cropY = 0;\r\n imageObject.targetWidth = imageObject.width;\r\n imageObject.targetHeight = imageObject.height;\r\n\r\n return imageObject;\r\n};\r\n","/* eslint-disable max-len */\r\n/**\r\n * ImageExperienceVideo Class\r\n * This class is used internally to the ImageExperience pacakge\r\n * Main purpose is to have a consistant object across different components\r\n *\r\n * @class ImageExperienceVideo\r\n */\r\nclass ImageExperienceVideo {\r\n /**\r\n * Creates an instance of ImageExperienceVideo.\r\n *\r\n * @param {Object} videoObj - video object\r\n * @param {id} videoObj.id - id of the video\r\n * @param {String} videoObj.idString - id of the video\r\n * @param {Number} videoObj.width - Width of the video\r\n * @param {Number} videoObj.heigth - Height of the video\r\n * @param {string} videoObj.type - Type of the video\r\n */\r\n constructor(videoObj) {\r\n this.id = videoObj.id;\r\n this.idString = videoObj.idString;\r\n this.thumbnailUrl = videoObj.thumbnailUrl;\r\n this.type = videoObj.type;\r\n this.width = videoObj.width;\r\n this.height = videoObj.height;\r\n this.text = videoObj.text;\r\n this.src = videoObj.src;\r\n this.status = videoObj.status;\r\n this.failureCode = videoObj.failureCode;\r\n this.duration = videoObj.duration;\r\n this.altText = videoObj.altText;\r\n this.srcUrl = videoObj.srcUrl;\r\n this.quality = videoObj.quality;\r\n this.sourceVideoBitRate = videoObj.sourceVideoBitRate;\r\n this.sourceType = videoObj.SourceType;\r\n this.sourceUrl = videoObj.SourceUrl;\r\n this.description = videoObj.Description;\r\n this.metadata = videoObj.metadata;\r\n this.template = videoObj.template;\r\n this.recommendationId = videoObj.recommendationId;\r\n this.savedMaterial = videoObj.savedMaterial;\r\n }\r\n\r\n /**\r\n * Get source of the video\r\n *\r\n * @readonly\r\n * @returns {Number} - id of the saved video\r\n */\r\n get Id() {\r\n return this.id;\r\n }\r\n\r\n /**\r\n * Get source of the video\r\n *\r\n * @readonly\r\n * @returns {string} - id of the saved video\r\n */\r\n get IdString() {\r\n return this.idString;\r\n }\r\n\r\n /**\r\n * Get thumbnail of the video\r\n *\r\n * @readonly\r\n * @returns {string} - string thumbnail of the video either base64 or url\r\n */\r\n get ThumbnailUrl() {\r\n return this.thumbnailUrl;\r\n }\r\n\r\n /**\r\n * Get thumbnail of the video for ad list\r\n *\r\n * @readonly\r\n * @returns {string} - string thumbnail of the video either base64 or url\r\n */\r\n get ThumbnailForAdList() {\r\n return this.thumbnailUrl;\r\n }\r\n\r\n /**\r\n * Get width of the video\r\n *\r\n * @readonly\r\n * @returns {Number} - Width of the video\r\n */\r\n get Width() {\r\n return this.width;\r\n }\r\n\r\n /**\r\n * Get height of the video\r\n *\r\n * @readonly\r\n * @returns {Number} - Height of the video\r\n */\r\n get Height() {\r\n return this.height;\r\n }\r\n\r\n /**\r\n * Get type of the video\r\n *\r\n * @returns {string} - Type of the video\r\n */\r\n get Type() {\r\n return this.type;\r\n }\r\n\r\n /**\r\n * Get text of the video\r\n *\r\n * @readonly\r\n * @returns {string} - Text of the video\r\n */\r\n get Text() {\r\n return this.text;\r\n }\r\n\r\n /**\r\n * Get duration of the video\r\n *\r\n * @readonly\r\n * @returns {string} - Text of the video\r\n */\r\n get Duration() {\r\n return this.duration;\r\n }\r\n\r\n /**\r\n * Get src url of the video\r\n *\r\n * @readonly\r\n * @returns {string} - src url of video\r\n */\r\n get Src() {\r\n return this.src;\r\n }\r\n\r\n /**\r\n * Get status of the video\r\n *\r\n * @readonly\r\n * @returns {string} - status of video\r\n */\r\n get Status() {\r\n return this.status;\r\n }\r\n\r\n /**\r\n * Get status of the video\r\n *\r\n * @readonly\r\n * @returns {string} - status of video\r\n */\r\n get FailureCode() {\r\n return this.failureCode;\r\n }\r\n\r\n /**\r\n * Get the clone of this object\r\n *\r\n * @returns {ImageExperienceVideo} - cloned ImageExperienceVideo\r\n */\r\n clone() {\r\n return new ImageExperienceVideo(this);\r\n }\r\n\r\n /**\r\n * Get the object formatted in JSON to save\r\n *\r\n * @returns {Object} - Object formatted to be saved on MT\r\n */\r\n formatToSave() {\r\n return {\r\n id: this.Id,\r\n idString: this.IdString,\r\n subType: this.Type,\r\n };\r\n }\r\n}\r\n\r\nconst getVideoSrc = (DownloadUrl) => {\r\n if (!DownloadUrl) return null;\r\n const downloadUrlMapping = JSON.parse(DownloadUrl);\r\n const resolutions = Object.keys(downloadUrlMapping).map(h => parseInt(h, 10));\r\n const highestResolution = Math.max(...resolutions);\r\n return downloadUrlMapping[highestResolution];\r\n};\r\n\r\nconst getCommonVideoFields = (videoObject) => {\r\n let template;\r\n let { recommendationId } = videoObject;\r\n\r\n if (videoObject.Metadata && !videoObject.Metadata.includes('VideoMetadataBlobName')) {\r\n const metadata= JSON.parse(videoObject.Metadata);\r\n if (metadata) {\r\n ({ template } = metadata);\r\n ({ recommendationId } = metadata);\r\n }\r\n }\r\n\r\n return {\r\n src: getVideoSrc(videoObject.DownloadUrl),\r\n width: videoObject.Width,\r\n height: videoObject.Height,\r\n type: videoObject.SubType,\r\n text: videoObject.Description,\r\n status: videoObject.Status,\r\n thumbnailUrl: videoObject.ThumbnailUrl,\r\n failureCode: videoObject.FailureCode,\r\n duration: videoObject.DurationInMilliSeconds || videoObject.DurationInMS,\r\n srcUrl: videoObject.SourceUrl,\r\n quality: videoObject.Quality,\r\n sourceVideoBitRate: videoObject.SourceVideoBitRate,\r\n metadata: videoObject.Metadata,\r\n recommendationId,\r\n template,\r\n SourceType: videoObject.SourceType,\r\n SourceUrl: videoObject.SourceUrl,\r\n Description: videoObject.Description,\r\n };\r\n};\r\n\r\n/**\r\n * Returns a {ImageExperienceVideo} object\r\n *\r\n * @param {object} videoMT - object returned from MT for the video whose Id is string and no IdString field\r\n * @returns {ImageExperienceVideo} - ImageExperienceVideo object\r\n */\r\nconst newVideoFromMTObject = (videoMT) => {\r\n const imageObj = new ImageExperienceVideo({\r\n id: parseInt(videoMT.Id, 10),\r\n idString: String(videoMT.Id),\r\n ...getCommonVideoFields(videoMT),\r\n });\r\n\r\n return imageObj;\r\n};\r\n\r\n/**\r\n * Returns a {ImageExperienceVideo} object\r\n *\r\n * @param {object} videoGrid - object returned from Grid for the video whose Id is integer and IdString is string\r\n * @returns {ImageExperienceVideo} - ImageExperienceVideo object\r\n */\r\nconst newVideoFromGridObject = (videoGrid) => {\r\n const imageObj = new ImageExperienceVideo({\r\n id: videoGrid.Id,\r\n idString: videoGrid.IdString,\r\n ...getCommonVideoFields(videoGrid),\r\n });\r\n\r\n return imageObj;\r\n};\r\n\r\nexport {\r\n ImageExperienceVideo,\r\n newVideoFromMTObject,\r\n newVideoFromGridObject,\r\n};\r\n","export const getMultiVideoListViewStyles = () => ({\r\n videoContainerStyle: {\r\n position: 'relative',\r\n width: '112px',\r\n height: '99px',\r\n borderRadius: '8px',\r\n margin: '5px',\r\n '&:hover, &:focus': {\r\n outline: '2px solid black',\r\n },\r\n '&:hover $hoverButtonsStyle, &:focus $hoverButtonsStyle': {\r\n display: 'block',\r\n },\r\n '&:hover .hover-button, &:focus .hover-button': {\r\n display: 'block',\r\n },\r\n },\r\n hoverButtonsStyle: {\r\n display: 'none',\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n zIndex: 1,\r\n },\r\n videoThumbnail: {\r\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)',\r\n borderRadius: 6,\r\n position: 'relative',\r\n width: '112px',\r\n height: '99px',\r\n margin: 5,\r\n },\r\n videoImageStyle: {\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n borderRadius: 6,\r\n },\r\n removeIconStyle: {\r\n color: '#106ebe',\r\n border: 'none',\r\n padding: 0,\r\n background: '#f3f2f1',\r\n backgroundColor: '#ffffffd4',\r\n borderRadius: '50%',\r\n width: '30px',\r\n height: '30px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n radioGroupContainer: {\r\n flexWrap: 'wrap',\r\n alignItems: 'center !important',\r\n '& .fui-Radio__label': {\r\n padding: 0,\r\n },\r\n },\r\n uploadingContainer: {\r\n zIndex: 10000,\r\n display: 'flex',\r\n position: 'absolute',\r\n backgroundColor: 'rgba(255,255,255,0.8)',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n flexDirection: 'column',\r\n gap: '8px',\r\n\r\n '& .radial-progress-text': {\r\n color: 'black !important',\r\n },\r\n },\r\n radioOption: {\r\n '& .fui-Radio__indicator': {\r\n position: 'absolute',\r\n top: 3,\r\n right: 3,\r\n width: 18,\r\n height: 18,\r\n background: 'white',\r\n zIndex: 1,\r\n display: 'none',\r\n },\r\n '&:hover .fui-Radio__indicator, &.selected .fui-Radio__indicator': {\r\n display: 'flex',\r\n },\r\n '&.selected $videoContainerStyle': {\r\n outline: '2px solid #0078d4',\r\n },\r\n },\r\n radioOptionHidden: {\r\n padding: '0 3px',\r\n '& .fui-Radio__indicator': {\r\n display: 'none',\r\n },\r\n },\r\n});\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport { Radio, RadioGroup, } from '@fluentui/react-components';\r\nimport { DefaultButton } from '@bingads-webui-react/fabric-control';\r\nimport { UploadProgress } from '@bingads-webui-campaign-react/upload-file-picker';\r\nimport {\r\n EncodingPlaceholderWithStyle,\r\n UnverifiedPlaceholderWithStyle,\r\n FailedPlaceholderWithStyle,\r\n} from '@bingads-webui-campaign-react/video-status-placeholder';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { ImageExperienceVideo } from '../model/image-experience-video';\r\nimport { getMultiVideoListViewStyles } from '../../style/js/multi-video-list-view-styles';\r\n\r\nconst DisplayPlusMaxVideoCount = 5;\r\n\r\nexport const MultiVideoListView = ({\r\n i18n,\r\n onCancelUpload,\r\n isVideoUploading,\r\n totalBytes,\r\n uploadedBytes,\r\n onVideoSelect,\r\n videoList,\r\n CustomAddVideoControl,\r\n onAddVideo,\r\n onRenderItemDropdown,\r\n}) => {\r\n const [selectedVideoIdx, setSelectedVideoIdx] = useState(null);\r\n\r\n const classes = useDefaultStyles(getMultiVideoListViewStyles);\r\n\r\n const onThumbnailClick = (idxString) => {\r\n const idx = parseInt(idxString, 10);\r\n if (!_.isNaN(idx)) {\r\n setSelectedVideoIdx(idx);\r\n if (onVideoSelect) {\r\n onVideoSelect(idx);\r\n }\r\n }\r\n };\r\n\r\n const renderVideoComponent = (video, idx) => {\r\n let component = null;\r\n\r\n if (video.status === 'Active') {\r\n component = (\r\n \r\n {isLogo ?\r\n i18n.getString(_TL_('Enhance your logo with smart effects.')) :\r\n i18n.getString(_TL_('Enhance your image with smart effects.'))}\r\n
\r\n \r\n
\r\n );\r\n } else if (video.status === 'Draft' || video.status === 'Transcoding') {\r\n component = (\r\n \r\n
\r\n \r\n {onRenderItemDropdown(videoList[idx], idx)}\r\n
\r\n \r\n
\r\n );\r\n } else if (video.status === 'Unverified') {\r\n component = (\r\n \r\n {onRenderItemDropdown(videoList[idx], idx)}\r\n
\r\n \r\n
\r\n );\r\n } else if (video.status === 'Failed') {\r\n component = (\r\n \r\n {onRenderItemDropdown(videoList[idx], idx)}\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n return component;\r\n };\r\n\r\n return (\r\n \r\n {onRenderItemDropdown(videoList[idx], idx)}\r\n
\r\n \r\n onThumbnailClick(data.value)}\r\n >\r\n {_.map(videoList, (video, idx) => (\r\n
\r\n );\r\n};\r\n\r\nMultiVideoListView.propTypes = {\r\n videoList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceVideo)).isRequired,\r\n onCancelUpload: PropTypes.func.isRequired,\r\n onVideoSelect: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n CustomAddVideoControl: PropTypes.elementType.isRequired,\r\n onAddVideo: PropTypes.func.isRequired,\r\n onRenderItemDropdown: PropTypes.func.isRequired,\r\n isVideoUploading: PropTypes.bool.isRequired,\r\n totalBytes: PropTypes.number,\r\n uploadedBytes: PropTypes.number,\r\n};\r\n\r\nMultiVideoListView.defaultProps = {\r\n onVideoSelect: null,\r\n totalBytes: 0,\r\n uploadedBytes: 0,\r\n};\r\n","// moved the content to another package to be reused by other packages\r\n// keep this file to support existing codes importing this file.\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience-model';\r\n\r\nexport default constants;\r\n","import _ from 'underscore';\r\n\r\n/**\r\n * Try to parse error message for video feature,\r\n * if error code is not localized, it uses error code directly.\r\n * @param {object} response Error response returned from MT\r\n * @param {object} i18n Localization service object\r\n * @returns {Array} Formatted error message list\r\n */\r\nexport const FormatVideoError = (response, i18n) => {\r\n if (response.status === 200 ||\r\n !response.responseJSON ||\r\n !response.responseJSON.value ||\r\n response.responseJSON.value.length === 0) {\r\n return [];\r\n }\r\n return _.compact(response.responseJSON.value.map(error => error.Code))\r\n .map(code => i18n.getString(`ImageExperience_Video_Error_${code}`) || /* istanbul ignore next */code);\r\n};\r\n\r\n/**\r\n * Get formatted video errors for video editor\r\n * if error code is not localized, it uses error code directly.\r\n * @param {string} scenario Error scenario\r\n * @param {object} response Error response returned from MT\r\n * @param {object} i18n Localization service object\r\n * @returns {Array} Formatted error message list\r\n */\r\nexport const FormatVideoErrorForVideoEditor = (scenario, response, i18n) => {\r\n /* istanbul ignore next */\r\n const rawErrorList = FormatVideoError(response, i18n);\r\n /* istanbul ignore next */\r\n return rawErrorList.map(message => ({\r\n scenario,\r\n message,\r\n id: _.uniqueId('edit_video_error_'),\r\n }));\r\n};\r\n","/* eslint-disable max-len */\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState } from 'react';\r\nimport { FocusLock } from '@bingads-webui-react/focus-lock';\r\nimport { ImageItemModelShape } from '@bingads-webui-react/image-picker';\r\nimport {\r\n EncodingPlaceholderWithStyle,\r\n UnverifiedPlaceholderWithStyle,\r\n FailedPlaceholderWithStyle\r\n} from '@bingads-webui-campaign-react/video-status-placeholder';\r\nimport { NameEditor } from '@bingads-webui-campaign-react/image-experience';\r\n\r\n/* istanbul ignore next */\r\nconst loadingPlaceholderGetter = (img, i18n, uploading, progressBar) => {\r\n if (uploading) {\r\n return progressBar;\r\n }\r\n\r\n if (img.status === 'Draft') {\r\n return \r\n
\r\n }\r\n \r\n
\r\n \r\n setEditMode(false)}\r\n >\r\n setEditText(e.target.value)}\r\n onSave={() => {\r\n onEdited(videoThumbnail.idString, editText);\r\n setEditMode(false);\r\n }}\r\n onCancel={() => setEditMode(false)}\r\n />\r\n \r\n )\r\n }\r\n
\r\n );\r\n };\r\n\r\n UserVideoItemWrapper.propTypes = {\r\n children: PropTypes.element.isRequired,\r\n image: ImageItemModelShape.isRequired,\r\n itemHeight: PropTypes.number.isRequired,\r\n };\r\n\r\n return UserVideoItemWrapper;\r\n};\r\n\r\nexport default getUserVideoItemWrapper;\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { ImagePickerContainer } from '@bingads-webui-react/image-picker';\r\nimport { LoadingPlaceholder } from '@bingads-webui-campaign-react/image-experience';\r\n\r\nimport getUserVideoItemWrapper from './user-video-wrapper';\r\nimport { FormatVideoError } from '../../util/format-video-error';\r\nimport { ImageExperienceVideo } from '../../model/image-experience-video';\r\n\r\nconst itemHeight = 180;\r\nconst getPickerHeight = () => {\r\n if (window.innerHeight > 1000) {\r\n return 580;\r\n } else if (window.innerHeight > 870) {\r\n return 450;\r\n }\r\n return 350;\r\n};\r\n\r\nconst loadingPlaceholder = () => (\r\n
\r\n {\r\n !editMode &&\r\n (\r\n \r\n
\r\n \r\n {videoThumbnail.status === 'Active' ? children :\r\n loadingPlaceholderGetter(videoThumbnail, i18n)}\r\n
\r\n \r\n \r\n {videoText}\r\n \r\n { setEditText(videoText); setEditMode(true); }}\r\n aria-label={i18n.getString('ImageExperience_Edit_Image_Name')}\r\n />\r\n
\r\n )\r\n }\r\n {\r\n editMode &&\r\n (\r\n \r\n
\r\n );\r\n};\r\n\r\nUserVideoPickerContainer.propTypes = {\r\n userVideoDataSource: PropTypes.shape({\r\n reload: PropTypes.func.isRequired,\r\n loadMore: PropTypes.func.isRequired,\r\n searchAsync: PropTypes.func.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showErrors: PropTypes.func,\r\n videoRepository: PropTypes.shape({\r\n deleteVideo: PropTypes.func.isRequired,\r\n patchVideo: PropTypes.func.isRequired,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n IsGoogleImportVideoAdsEnabled: PropTypes.bool,\r\n }),\r\n onVideoSelected: PropTypes.func.isRequired,\r\n showUiBlocker: PropTypes.func,\r\n isLazyLoadEnabled: PropTypes.bool.isRequired,\r\n videoList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceVideo)),\r\n videoPickerContainerHeight: PropTypes.number,\r\n};\r\n\r\nUserVideoPickerContainer.defaultProps = {\r\n showErrors: _.noop,\r\n showUiBlocker: _.noop,\r\n videoList: [],\r\n permissions: {},\r\n videoPickerContainerHeight: null,\r\n};\r\n\r\nexport default UserVideoPickerContainer;\r\n","/* eslint-disable jsx-a11y/media-has-caption */\r\n/* eslint-disable max-len */\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState } from 'react';\r\nimport { ImageItemModelShape } from '@bingads-webui-react/image-picker';\r\n\r\nconst emptyButtonStyle = {\r\n padding: '2px',\r\n margin: '0px',\r\n background: 'none',\r\n color: 'unset',\r\n cursor: 'pointer',\r\n borderImage: 'unset',\r\n borderColor: 'unset',\r\n borderStyle: 'none',\r\n};\r\n\r\nconst getInvestVideoItemWrapper = ({ onInvestVideoSelected }) => {\r\n const InvestVideoItemWrapper = (props) => {\r\n const { itemHeight, image: videoThumbnail } = props;\r\n\r\n const [videoText] = useState(videoThumbnail.altText);\r\n\r\n const thumbnailHeight = itemHeight;\r\n const thumbnailWidth = Math.round((videoThumbnail.width * thumbnailHeight) / videoThumbnail.height);\r\n const limitedThumbnailWidth =\r\n thumbnailWidth / thumbnailHeight > 1.6 ? thumbnailHeight * 1.6 : thumbnailWidth;\r\n\r\n const wrapperStyle = {\r\n maxHeight: thumbnailHeight,\r\n height: thumbnailHeight,\r\n width: limitedThumbnailWidth,\r\n position: 'relative',\r\n overflow: 'visible',\r\n margin: '5px',\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n InvestVideoItemWrapper.propTypes = {\r\n image: ImageItemModelShape.isRequired,\r\n itemHeight: PropTypes.number.isRequired,\r\n };\r\n\r\n return InvestVideoItemWrapper;\r\n};\r\n\r\nexport default getInvestVideoItemWrapper;\r\n","// Get video object used for video picker\r\n// Thus, we set `src` to `item.ThumbnailUrl `because we wanna reuse `image-picker`\r\n// which uses `src` as image source.\r\nexport const getVideoObjectForImagePickerFromMTObject = (item) => {\r\n let videoSrc = null;\r\n if (item.DownloadUrl) {\r\n const downloadUrlMapping = JSON.parse(item.DownloadUrl);\r\n const resolutions = Object.keys(downloadUrlMapping).map(h => parseInt(h, 10));\r\n const smallestResolution = Math.min(...resolutions);\r\n videoSrc = downloadUrlMapping[smallestResolution];\r\n }\r\n const video = {\r\n id: parseInt(item.Id, 10),\r\n idString: item.Id,\r\n src: item.ThumbnailUrl,\r\n videoSrc,\r\n thumbnailUrl: item.ThumbnailUrl,\r\n width: item.Width || 150,\r\n height: item.Height || 0,\r\n altText: item.Description || '',\r\n status: item.Status,\r\n duration: item.DurationInMilliSeconds || item.DurationInMS,\r\n durationInMs: item.DurationInMS,\r\n uploadedTime: item.UploadedTime,\r\n textFields: [item.Description || ''],\r\n quality: item.Quality,\r\n sourceVideoBitRate: item.SourceVideoBitRate,\r\n metadata: item.Metadata,\r\n };\r\n return video;\r\n};\r\n\r\nexport const getVideoObjectFromInvestAssets = (item) => {\r\n const DEFAULT_HEIGHT = 954;\r\n const DEFAULT_WIDTH = 1144;\r\n const video = {\r\n id: parseInt(item.XandrAssetId, 10),\r\n idString: item.XandrAssetId,\r\n videoSrc: item.Url,\r\n textFields: [item.Description || ''],\r\n altText: item.Description || '',\r\n height: DEFAULT_HEIGHT,\r\n width: DEFAULT_WIDTH,\r\n };\r\n return video;\r\n};\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { ImagePickerContainer } from '@bingads-webui-react/image-picker';\r\nimport { LoadingPlaceholder } from '@bingads-webui-campaign-react/image-experience';\r\nimport getInvestVideoItemWrapper from './invest-video-wrapper';\r\nimport { getVideoObjectForImagePickerFromMTObject } from '../../util/video-converter';\r\n\r\nconst itemHeight = 180;\r\nconst getPickerHeight = () => {\r\n if (window.innerHeight > 1000) {\r\n return 580;\r\n } else if (window.innerHeight > 870) {\r\n return 450;\r\n }\r\n return 350;\r\n};\r\n\r\nconst loadingPlaceholder = () => (\r\n
\r\n \r\n
\r\n \r\n onInvestVideoSelected([videoThumbnail])}\r\n id={videoThumbnail.id}\r\n style={emptyButtonStyle}\r\n height={thumbnailHeight}\r\n width={limitedThumbnailWidth}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n {videoText}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nInvestVideoPickerContainer.propTypes = {\r\n investVideoDataSource: PropTypes.shape({\r\n reload: PropTypes.func.isRequired,\r\n loadMore: PropTypes.func.isRequired,\r\n searchAsync: PropTypes.func.isRequired,\r\n saveVideoAsync: PropTypes.func.isRequired,\r\n }).isRequired,\r\n videoRepository: PropTypes.shape({\r\n getVideo: PropTypes.func.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n permissions: PropTypes.shape({}),\r\n onVideoSelected: PropTypes.func.isRequired,\r\n showErrors: PropTypes.func,\r\n showUiBlocker: PropTypes.func,\r\n isLazyLoadEnabled: PropTypes.bool.isRequired,\r\n videoPickerContainerHeight: PropTypes.number,\r\n};\r\n\r\nInvestVideoPickerContainer.defaultProps = {\r\n showErrors: _.noop,\r\n showUiBlocker: _.noop,\r\n permissions: {},\r\n videoPickerContainerHeight: null,\r\n};\r\n\r\nexport default InvestVideoPickerContainer;\r\n","import _ from 'underscore';\r\nimport { DataSourceState } from '@bingads-webui-react/image-picker'; // eslint-disable-line\r\nimport { getVideoObjectForImagePickerFromMTObject } from '../../util/video-converter';\r\n\r\nclass UserVideoDataSource {\r\n constructor(options) {\r\n this.currentData = [];\r\n\r\n this.sortById = options.sortById;\r\n this.videoRepository = options.videoRepository;\r\n this.currentSearchTerm = '';\r\n\r\n this.pageSize = 20;\r\n }\r\n\r\n subscribe(callback) {\r\n this.callback = callback;\r\n }\r\n\r\n unsubscribe() {\r\n this.callback = null;\r\n }\r\n\r\n excuteCallBackIfExsit(status) {\r\n if (this.callback) {\r\n this.callback(status);\r\n }\r\n }\r\n\r\n loadMore() {\r\n this.currentPage += 1;\r\n\r\n return this.fetchVideoAsync();\r\n }\r\n\r\n reload() {\r\n this.currentData = [];\r\n this.currentPage = 0;\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n\r\n return this.fetchVideoAsync();\r\n }\r\n\r\n searchAsync(searchTerm, sortById) {\r\n this.currentData = [];\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n\r\n if (searchTerm === null) {\r\n this.currentSearchTerm = '';\r\n } else {\r\n this.currentSearchTerm = searchTerm;\r\n }\r\n this.sortById = sortById || this.sortById;\r\n this.currentPage = 0;\r\n\r\n return this.fetchVideoAsync();\r\n }\r\n\r\n /* istanbul ignore next */\r\n replace(videoFromMT) {\r\n const index = this.currentData.findIndex(item => videoFromMT.Id === item.idString);\r\n if (index < 0) {\r\n console.warn(`unable to find video id: ${videoFromMT.id} in currentData`);\r\n return;\r\n }\r\n this.currentData[index] = getVideoObjectForImagePickerFromMTObject(videoFromMT);\r\n\r\n this.currentData = [...this.currentData];\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n }\r\n\r\n fetchVideoAsync() {\r\n this.excuteCallBackIfExsit(DataSourceState.Loading);\r\n\r\n return this.videoRepository.getVideos({\r\n sortById: this.sortById,\r\n searchTerm: this.currentSearchTerm,\r\n pageNumber: this.currentPage,\r\n pageSize: this.pageSize,\r\n }).then((response) => {\r\n this.hasMore = response['@odata.count'] > _.get(response, ['value', 'length'], 0) + this.currentData.length;\r\n const moreData = _.map(response.value, getVideoObjectForImagePickerFromMTObject);\r\n\r\n this.currentData = this.currentData.concat(moreData);\r\n }).finally(() => {\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n });\r\n }\r\n\r\n getData() {\r\n return { hasMore: this.hasMore, data: this.currentData };\r\n }\r\n}\r\n\r\nconst initializeUserVideoDataSource = ({\r\n videoRepository,\r\n}) => {\r\n const userVideoDataSource = new UserVideoDataSource({\r\n videoRepository,\r\n sortById: 1,\r\n filter: (() => true),\r\n });\r\n\r\n return userVideoDataSource;\r\n};\r\n\r\nexport { UserVideoDataSource, initializeUserVideoDataSource };\r\n","import _ from 'underscore';\r\nimport { DataSourceState } from '@bingads-webui-react/image-picker'; // eslint-disable-line\r\nimport { getVideoObjectFromInvestAssets } from '../../util/video-converter';\r\n\r\nconst ASSET_TYPE_VIDEOS = 2;\r\n\r\nclass InvestVideoDataSource {\r\n constructor(options) {\r\n this.currentData = [];\r\n\r\n this.investImageDataService = options.investImageDataService;\r\n this.currentSearchTerm = '';\r\n\r\n this.pageSize = 20;\r\n }\r\n\r\n subscribe(callback) {\r\n this.callback = callback;\r\n }\r\n\r\n unsubscribe() {\r\n this.callback = null;\r\n }\r\n\r\n excuteCallBackIfExsit(status) {\r\n if (this.callback) {\r\n this.callback(status);\r\n }\r\n }\r\n\r\n loadMore() {\r\n this.currentPage += 1;\r\n\r\n return this.fetchVideoAsync();\r\n }\r\n\r\n reload() {\r\n this.currentData = [];\r\n this.currentPage = 0;\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n\r\n return this.fetchVideoAsync();\r\n }\r\n\r\n searchAsync(searchTerm) {\r\n this.currentData = [];\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n\r\n if (searchTerm === null) {\r\n this.currentSearchTerm = '';\r\n } else {\r\n this.currentSearchTerm = searchTerm;\r\n }\r\n this.currentPage = 0;\r\n\r\n return this.fetchVideoAsync();\r\n }\r\n\r\n fetchVideoAsync() {\r\n this.excuteCallBackIfExsit(DataSourceState.Loading);\r\n\r\n const customQueries = {\r\n appName: 'CampaignUI',\r\n assetTypeId: ASSET_TYPE_VIDEOS,\r\n $skip: this.currentPage * this.pageSize,\r\n $top: this.pageSize,\r\n };\r\n\r\n if (this.currentSearchTerm) {\r\n customQueries.creativeId = this.currentSearchTerm;\r\n }\r\n\r\n return this.investImageDataService.getInvestAssets({ customQueries }).then((response) => {\r\n this.hasMore = response['@odata.count'] > _.get(response, ['value', 'length'], 0) + this.currentData.length;\r\n\r\n const moreData = _.map(response.value, getVideoObjectFromInvestAssets);\r\n this.currentData = this.currentData.concat(moreData);\r\n }).finally(() => {\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n });\r\n }\r\n\r\n getData() {\r\n return { hasMore: this.hasMore, data: this.currentData };\r\n }\r\n\r\n saveVideoAsync(options) {\r\n return this.investImageDataService.addInvestVideoAsset(options);\r\n }\r\n}\r\n\r\nconst initializeInvestVideoDataSource = ({\r\n investImageDataService,\r\n}) => {\r\n const investVideoDataSource = new InvestVideoDataSource({\r\n investImageDataService,\r\n });\r\n\r\n return investVideoDataSource;\r\n};\r\n\r\nexport { InvestVideoDataSource, initializeInvestVideoDataSource };\r\n","/* eslint-disable max-len */\r\n/* eslint-disable jsx-a11y/label-has-for */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ValidatedInput } from '@bingads-webui-react/validation-controls';\r\nimport { DefaultButton } from '@bingads-webui-react/fabric-control';\r\n\r\nexport class UrlEditor extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isValid: true,\r\n };\r\n }\r\n\r\n onValidate = (result) => {\r\n this.setState({\r\n isValid: result.isValid,\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {\r\n shouldShowUploadProgress &&\r\n \r\n
\r\n \r\n );\r\n\r\n if (shouldShowContentOnly) {\r\n return addVideoContent();\r\n }\r\n\r\n return (\r\n \r\n this.onPillChange({ name, value, index })}\r\n items={this.pillControlItems}\r\n />\r\n (\r\n \r\n {render(props)}\r\n {this.state.uploadOptionKey === 'upload-local-file' && uploadOptionMapping[this.state.uploadOptionKey]}\r\n \r\n ),\r\n disabled: this.state.isVideoUploading,\r\n },\r\n {\r\n key: 'upload-from-url',\r\n text: i18n.getString('ImageExperience_Add_Video_Option_URL'),\r\n ariaLabel: i18n.getString('ImageExperience_Add_Video_Option_URL'),\r\n onRenderField: (props, render) => (\r\n \r\n {render(props)}\r\n {this.state.uploadOptionKey === 'upload-from-url' && uploadOptionMapping[this.state.uploadOptionKey]}\r\n \r\n ),\r\n disabled: this.state.isVideoUploading,\r\n },\r\n ]}\r\n onChange={(ev, option) => this.setState({ uploadOptionKey: option.key })}\r\n disabled={this.props.isVideoUploading}\r\n />\r\n }\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n \r\n {`${i18n.getString('ImageExperience_AddVideoDescription')} `}\r\n \r\n
\r\n \r\n {\r\n shouldShowExisting &&\r\n
\r\n {\r\n shouldShowExisting &&\r\n \r\n
\r\n }\r\n \r\n this.onUserVideoSearch(searchValue)}\r\n searchBoxPlacedHolderText={i18n.getString('ImageExperience_Sort_Video_Text')}\r\n searchBoxAriaLabel={i18n.getString('ImageExperience_Sort_Video_Text')}\r\n />\r\n
\r\n \r\n
\r\n \r\n {i18n.getString('ImageExperience_SortBy')}\r\n \r\n \r\n {\r\n shouldShowInvest &&\r\n
\r\n {\r\n shouldShowInvest &&\r\n \r\n
\r\n }\r\n \r\n this.onInvestVideoSearch(creativeId)}\r\n searchBoxPlacedHolderText={i18n.getString('ImageExperience_Creative_Id_Text')}\r\n searchBoxAriaLabel={i18n.getString('ImageExperience_Creative_Id_Text')}\r\n />\r\n
\r\n \r\n \r\n {i18n.getString('Audience_Campaign_Cancel_Label')}\r\n \r\n
\r\n \r\n {\r\n this.props.isOpen && (\r\n \r\n \r\n {addVideoContent()}\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nAddVideo.propTypes = {\r\n isOpen: PropTypes.bool,\r\n onVideoSelected: PropTypes.func.isRequired,\r\n onSelectionCanceled: PropTypes.func.isRequired,\r\n isReplace: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape(mapObject(\r\n getAddImageStyle({}, {}),\r\n constant(PropTypes.string)\r\n )).isRequired,\r\n cid: PropTypes.string,\r\n aid: PropTypes.string.isRequired,\r\n isLazyLoadEnabled: PropTypes.bool.isRequired,\r\n videoRepository: PropTypes.shape({\r\n postVideoByUrl: PropTypes.func.isRequired,\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 applicationName: PropTypes.string,\r\n oDataTokenType: PropTypes.string,\r\n }),\r\n staticImagePath: PropTypes.string,\r\n videoFile: PropTypes.instanceOf(File),\r\n isVideoUploading: PropTypes.bool,\r\n repairMode: PropTypes.bool,\r\n videoUploadedBytes: PropTypes.number,\r\n onFileRead: PropTypes.func.isRequired,\r\n onCancelUpload: PropTypes.func.isRequired,\r\n onVideoPostByUrl: PropTypes.func.isRequired,\r\n logToSubstrateAdvanced: PropTypes.func,\r\n videoList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceVideo)),\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func.isRequired,\r\n }),\r\n shouldShowContentOnly: PropTypes.bool,\r\n videoPickerContainerHeight: PropTypes.number,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n XandrIntegrationEnabled: PropTypes.bool,\r\n }),\r\n }),\r\n};\r\n\r\nAddVideo.defaultProps = {\r\n isReplace: false,\r\n isOpen: false,\r\n cid: '',\r\n staticImagePath: null,\r\n videoFile: null,\r\n repairMode: false,\r\n isVideoUploading: false,\r\n videoUploadedBytes: 0,\r\n videoList: [],\r\n logToSubstrateAdvanced: null,\r\n oDataConfig: null,\r\n activityLogger: {\r\n signal: _.noop,\r\n },\r\n shouldShowContentOnly: false,\r\n videoPickerContainerHeight: null,\r\n permissions: { dynamic: { XandrIntegrationEnabled: false } },\r\n};\r\n\r\nconst AddVideoContainer = withDefaultStyles(withPerfMarker(AddVideo), getAddImageStyle);\r\n\r\nexport { AddVideoContainer, AddVideo };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const PreviewThumbnail = (props) => {\r\n const {\r\n ratio,\r\n thumbnail,\r\n containerHeight,\r\n thumbnailMode,\r\n } = props;\r\n // To get a fixed height\r\n const containerWidth = containerHeight * ratio;\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nPreviewThumbnail.propTypes = {\r\n ratio: PropTypes.number.isRequired,\r\n thumbnail: PropTypes.string,\r\n thumbnailMode: PropTypes.string.isRequired,\r\n containerHeight: PropTypes.number.isRequired,\r\n};\r\n\r\nPreviewThumbnail.defaultProps = {\r\n thumbnail: '',\r\n};\r\n","export const getVideoListViewStyle = () => ({\r\n root: {\r\n '& .cancel-upload-button-container': {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n marginTop: 4,\r\n '& button': {\r\n height: 24,\r\n minWidth: 56,\r\n width: 56,\r\n },\r\n },\r\n },\r\n});\r\n","/* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content, no-script-url */\r\n/* istanbul ignore file */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _, { mapObject, constant } from 'underscore';\r\nimport {\r\n Dropdown,\r\n MenuItem,\r\n} from '@bingads-webui-react/primitive-unthemed';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\nimport { DefaultButton, Label, Stack } from '@bingads-webui-react/fabric-control';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { UploadProgress } from '@bingads-webui-campaign-react/upload-file-picker';\r\nimport {\r\n EncodingPlaceholderWithStyle,\r\n UnverifiedPlaceholderWithStyle,\r\n FailedPlaceholderWithStyle\r\n} from '@bingads-webui-campaign-react/video-status-placeholder';\r\n\r\nimport { ImageExperienceVideo } from '../model/image-experience-video';\r\nimport C from '../constants';\r\nimport { PreviewThumbnail } from '../edit-video/thumbnail/preview-thumbnail';\r\nimport { getVideoListViewStyle } from '../../style/js/video-list-view-style';\r\nimport { CustomThumbnailRecordType } from '../types';\r\n\r\nexport class VideoListViewInternal extends React.PureComponent {\r\n onEditSelect = (eventKey, event) => {\r\n const { type } = event.target.parentNode.parentNode.dataset;\r\n\r\n switch (eventKey) {\r\n case 'replace':\r\n this.props.onReplace(type);\r\n break;\r\n case 'edit':\r\n this.props.onEdit(type);\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n render() {\r\n const {\r\n i18n,\r\n onCancelUpload,\r\n uploadVideo,\r\n permissions: { IsVideoAdEditorEnabled },\r\n customThumbnailRecord,\r\n allowedVideoSizes,\r\n onRenderItemDropdown,\r\n disableRemoveAll,\r\n hideRatioLabel,\r\n } = this.props;\r\n\r\n const videoTypes = allowedVideoSizes || C.videoTypesWithOrder;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n } else if (video.status === 'Failed') {\r\n component = (\r\n \r\n \r\n
\r\n );\r\n } else if (video.status === 'Unverified') {\r\n component = (\r\n \r\n \r\n
\r\n \r\n {\r\n videoTypes.map((type) => {\r\n const video = _.find(this.props.videoList, _video => _video.Type === type);\r\n let isUpload = false;\r\n\r\n let component = null;\r\n if (!video) {\r\n component = null;\r\n } else if (uploadVideo && uploadVideo.type === video.Type) {\r\n isUpload = true;\r\n component = (\r\n \r\n
\r\n );\r\n } else if (video.status === 'Active') {\r\n const thumbnail = customThumbnailRecord[C.videoTypeToThumbnailType[video.Type]];\r\n const thumbnailSrc =\r\n (thumbnail && thumbnail.ThumbnailUrl) || video.ThumbnailUrl;\r\n component = (\r\n \r\n
\r\n \r\n {component}\r\n {dropdownComponent}\r\n
\r\n {!hideRatioLabel && (\r\n \r\n {this.props.i18n.getString(C.videoAspectRatios[type].stringKey)}\r\n
)\r\n }\r\n \r\n );\r\n })\r\n }\r\n {\r\n !disableRemoveAll && (\r\n \r\n onThumbnailModeChanged(option.key)}\r\n selectedKey={mode}\r\n options={[\r\n {\r\n key: 'Automatic',\r\n text: `${i18n.getString('ImageExperience_AutomaticThumbnail')} - ${i18n.getString('ImageExperience_AutomaticThumbnailDescription')}`,\r\n },\r\n {\r\n key: 'Manual',\r\n text: i18n.getString('ImageExperience_ManualThumbnail'),\r\n },\r\n ]}\r\n />\r\n
\r\n );\r\n};\r\n\r\nEditThumbnail.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onThumbnailModeChanged: PropTypes.func,\r\n mode: PropTypes.string.isRequired,\r\n};\r\n\r\nEditThumbnail.defaultProps = {\r\n onThumbnailModeChanged: _.noop,\r\n};\r\n","/* istanbul ignore file */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { DefaultButton } from '@bingads-webui-react/fabric-control';\r\nimport { ImageCropper } from '@bingads-webui-campaign-react/image-cropper';\r\nimport { AddImageContainer } from '@bingads-webui-campaign-react/image-experience';\r\n\r\nimport { EditThumbnail } from './edit-thumbnail';\r\nimport C from '../../constants';\r\nimport { ImageExperienceVideo } from '../../model/image-experience-video';\r\nimport { CustomThumbnailRecordType } from '../../types';\r\n\r\nexport const useThumbnailEditor = (props) => {\r\n const {\r\n i18n,\r\n video,\r\n perfMarker,\r\n cid,\r\n aid,\r\n oDataConfig,\r\n isStockPhotoEnabled,\r\n isLazyLoadEnabled,\r\n permissions,\r\n staticImagePath,\r\n activityLogger,\r\n thumbnailRecord: initialThumbnailRecord,\r\n } = props;\r\n\r\n const [thumbnailRecord, setThumbnailRecord] = React.useState(initialThumbnailRecord);\r\n const initialMode = thumbnailRecord[C.videoTypeToThumbnailType[video.Type]] ? 'Manual' : 'Automatic';\r\n const [thumbnailMode, setThumbnailMode] = React.useState(initialMode);\r\n\r\n const component = (\r\n {i18n.getString('ImageExperience_ThumbnailDescription')}
\r\n {i18n.getString('ImageExperience_VideoNoCustomThumbnail_NoPreview')}
;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n { thumbnailMode === 'Manual' &&\r\n \r\n {getThumbnailCropper()}\r\n setIsImageSelectorDisplayed(true)} />\r\n
\r\n }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nCaptionPicker.propTypes = {\r\n onFileRead: PropTypes.func.isRequired,\r\n captionFile: PropTypes.instanceOf(File),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showErrors: PropTypes.func.isRequired,\r\n};\r\n\r\nCaptionPicker.defaultProps = {\r\n captionFile: null,\r\n};\r\n\r\nexport default CaptionPicker;\r\n","/* istanbul ignore file */\r\n/* eslint-disable no-nested-ternary */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport {\r\n MessageBar,\r\n MessageBarType,\r\n Dialog, DialogType,\r\n DialogFooter,\r\n PrimaryButton,\r\n DefaultButton,\r\n Spinner,\r\n SpinnerSize,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { Tag } from '@bingads-webui-campaign-react/image-experience';\r\n\r\nimport CaptionPicker from './caption-picker';\r\nimport C from '../../constants';\r\nimport { FormatVideoError } from '../../util/format-video-error';\r\nimport { CaptionType } from '../../types';\r\n\r\nexport const useCaptionEditor = (props) => {\r\n const {\r\n i18n,\r\n resourceRepository,\r\n video,\r\n activityLogger,\r\n } = props;\r\n const [captions, setCaptions] = React.useState([]);\r\n const [errors, setErrors] = React.useState([]);\r\n const [block, setBlock] = React.useState(false);\r\n\r\n const updateCaptions = React.useCallback(\r\n () => resourceRepository\r\n .getResources({ videoId: video.IdString })\r\n .then(resources => (resources.value ? resources.value.filter(res => res.Type === 'Caption') : []))\r\n .then((existedCaptions) => {\r\n setCaptions(existedCaptions);\r\n })\r\n .catch(response => setErrors(FormatVideoError(response, i18n))),\r\n [video.IdString, resourceRepository, i18n]\r\n );\r\n\r\n React.useEffect(() => {\r\n setBlock(true);\r\n updateCaptions()\r\n .finally(() => setBlock(false));\r\n }, [updateCaptions]);\r\n\r\n const component = (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n { errors.map(error => (\r\n \r\n {error}\r\n ))\r\n }\r\n
);\r\n};\r\n\r\nCaptionEditor.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n videoId: PropTypes.string.isRequired,\r\n resourceRepository: PropTypes.shape({\r\n createResource: PropTypes.func.isRequired,\r\n getResources: PropTypes.func.isRequired,\r\n deleteResource: PropTypes.func.isRequired,\r\n }).isRequired,\r\n captions: CaptionType,\r\n updateCaptions: PropTypes.func,\r\n errors: PropTypes.arrayOf(PropTypes.string),\r\n setErrors: PropTypes.func,\r\n block: PropTypes.bool,\r\n setBlock: PropTypes.func,\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func.isRequired,\r\n error: PropTypes.func.isRequired,\r\n }),\r\n};\r\n\r\nCaptionEditor.defaultProps = {\r\n captions: [],\r\n updateCaptions: _.noop,\r\n errors: [],\r\n setErrors: _.noop,\r\n block: false,\r\n setBlock: _.noop,\r\n activityLogger: {\r\n signal: _.noop,\r\n error: _.noop,\r\n },\r\n};\r\n","export const CONTAINER_HEIGHT = 400;\r\nexport const CLIPPER_MIN_WIDTH = 320;\r\n\r\nexport const VideoEditor = {\r\n Clipper: 'Clipper',\r\n Cropper: 'Cropper',\r\n Thumbnail: 'Thumbnail',\r\n};\r\n","/* eslint-disable jsx-a11y/media-has-caption */\r\n/* istanbul ignore file */\r\n/* eslint-disable no-nested-ternary */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Cropper } from '@bingads-webui-react/cropper';\r\nimport { VideoControls } from '@bingads-webui-react/video-controls';\r\nimport { ErrorBlock } from '@bingads-webui-campaign-react/image-experience';\r\n\r\nimport { ImageExperienceVideo } from '../../model/image-experience-video';\r\nimport { CONTAINER_HEIGHT } from '../constants';\r\nimport C from '../../constants';\r\n\r\nexport const useCropperEditor = (props) => {\r\n const {\r\n i18n,\r\n video,\r\n errors,\r\n } = props;\r\n\r\n const [cropSetting, setCropSetting] = React.useState({});\r\n\r\n const component = (\r\n {i18n.getString('ImageExperience_EditCaptionTitle')}
\r\n \r\n {/* PLACEHOLDER */i18n.getString('ImageExperience_EditCaptionDescription')}\r\n
\r\n \r\n { block ?\r\n \r\n {\r\n (captions.length > 0 ? captions.map(cap => (\r\n \r\n }\r\n
\r\n \r\n onCaptionDeleteClick(cap.Id)}\r\n />\r\n
)) :\r\n {i18n.getString('ImageExperience_NoCaptionFile')}
)\r\n }\r\n {i18n.getString('ImageExperience_DeleteCaptionDescription')}
\r\n \r\n {i18n.getString('ImageExperience_CropperDescription')}\r\n
\r\n \r\n \r\n \r\n onCropSettingChanged(cropper.getValue()),\r\n }}\r\n >\r\n
\r\n \r\n \r\n \r\n {i18n.getString('ImageExperience_ClipperDescription')}\r\n
\r\n \r\n \r\n
\r\n \r\n onDismiss()} text={i18n.getString('Audience_Campaign_Cancel_Label')} />\r\n {\r\n selectedEditor === VideoEditor.Clipper\r\n ? setIsApplyTrimToAllAspectRatio(!isApplyTrimToAllAspectRatio)}\r\n checked={isApplyTrimToAllAspectRatio}\r\n />\r\n : null\r\n }\r\n
);\r\n\r\n const onCloseApplyClipNotice = () => setShouldShowApplyClipNotice(false);\r\n\r\n return (\r\n \r\n setSelectedEditor(item.props.itemKey)}\r\n selectedKey={selectedEditor}\r\n headersOnly\r\n >\r\n { IsVideoAdEditorCropClipEnabled &&\r\n
\r\n \r\n {/* PLACEHOLDER */i18n.getString('ImageExperience_Video_Editor_Description')}\r\n
\r\n \r\n {Clipper}\r\n {IsVideoAdEditorCaptionEnabled && Captions}\r\n
\r\n \r\n {Cropper}\r\n
\r\n \r\n {Thumbnail}\r\n
\r\n {i18n.getString('ImageExperience_ApplyClipNoticeDescription')}
\r\n \r\n {!this.props.multiVideoMode &&\r\n \r\n {this.props.i18n.getString('ImageExperience_LoadVideo')}\r\n )\r\n }\r\n { // offload showing error to parent component\r\n this.props.enableShowingErrors && errors\r\n }\r\n
\r\n );\r\n }\r\n\r\n repairVideo() {\r\n const {\r\n classes, i18n, videoList, permissions,\r\n } = this.props;\r\n const { isVideoUploading, repairProgress } = this.state;\r\n const videoThumbnail = _.find(videoList, _video => _video.status === 'Failed');\r\n\r\n const shouldRepairGoogleImportVideoAd = permissions && permissions.IsGoogleImportVideoAdsEnabled\r\n && _.isArray(videoList) && videoList.length === 1\r\n && videoList[0].sourceType === 'GoogleImported'\r\n && videoList[0].status === 'Failed';\r\n\r\n if (shouldRepairGoogleImportVideoAd) {\r\n return (\r\n \r\n \r\n
}\r\n {\r\n this.state.isVideoUploading && (\r\n \r\n {\r\n !this.props.disableUploadTextField && (
)\r\n }\r\n {\r\n !this.state.isVideoUploading && CustomAddVideoControl && \r\n
\r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Replace Your Video'))}
\r\n - \r\n
- \r\n {i18n.getString(_TL_('Video Name:'))}{` ${videoList[0].description}`}\r\n \r\n
- \r\n {i18n.getString(_TL_('Invalid Video Url:'))}\r\n {videoList[0].sourceUrl}\r\n \r\n \r\n
\r\n \r\n
\r\n }\r\n {isVideoUploading &&\r\n \r\n \r\n {i18n.getString(_TL_('We can’t use a YouTube video for a video campaign. You need to upload a video file yourself.'))}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n render() {\r\n const {\r\n i18n,\r\n cid,\r\n aid,\r\n isLazyLoadEnabled,\r\n perfMarker,\r\n permissions,\r\n genericImage,\r\n customThumbnailRecord,\r\n videoList,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Replace Your Video'))}
\r\n - \r\n
- \r\n {i18n.getString(_TL_('Video Name:'))}{` ${videoThumbnail.text}`}\r\n \r\n
- \r\n {i18n.getString(_TL_('Invalid Video Url:'))}\r\n {videoThumbnail.srcUrl}\r\n \r\n \r\n
\r\n {this.shouldShowVideoReplacement() ? this.repairVideo() : this.videoListComponent()}\r\n this.setState({ isEditVideoDisplayed: false })}\r\n thumbnailRecord={customThumbnailRecord}\r\n i18n={i18n}\r\n perfMarker={perfMarker.createChild('editVideo')}\r\n video={this.state.editingVideo}\r\n staticImagePath={this.getImagePathFromGenericImagePath(genericImage)}\r\n videoRepository={this.videoRepository}\r\n resourceRepository={this.videoResRepository}\r\n />\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nVideoExperienceComponent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n genericImage: PropTypes.string,\r\n videoList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceVideo)),\r\n customThumbnailRecord: CustomThumbnailRecordType,\r\n onVideoListUpdated: PropTypes.func,\r\n onVideoPreviewRequested: PropTypes.func,\r\n onSaveThumbnailAsDraft: PropTypes.func,\r\n perfMarker: PropTypes.shape({\r\n willFetchFile: PropTypes.func.isRequired,\r\n willInit: PropTypes.func.isRequired,\r\n willFetchData: PropTypes.func.isRequired,\r\n willRender: PropTypes.func.isRequired,\r\n done: PropTypes.func.isRequired,\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({}),\r\n oDataConfig: PropTypes.shape({\r\n odataRootUrl: PropTypes.string,\r\n odataPath: PropTypes.string,\r\n odataToken: PropTypes.string,\r\n applicationName: PropTypes.string,\r\n oDataTokenType: PropTypes.string,\r\n }),\r\n isLazyLoadEnabled: PropTypes.bool,\r\n isStockPhotoEnabled: PropTypes.bool,\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func.isRequired,\r\n }),\r\n onVideoUploadStatusUpdate: PropTypes.func,\r\n permissions: PropTypes.shape({\r\n IsStockPhotoFilterEnabled: PropTypes.bool,\r\n IsVideoAdEditorEnabled: PropTypes.bool,\r\n IsVideoAdEditorCropClipEnabled: PropTypes.bool,\r\n IsVideoAdEditorThumbnailEnabled: PropTypes.bool,\r\n IsVideoAdEditorCaptionEnabled: PropTypes.bool,\r\n IsOriginalVideoPreviewPercentageEnabled: PropTypes.bool,\r\n }),\r\n allowedVideoSizes: PropTypes.arrayOf(PropTypes.string),\r\n onRenderItemDropdown: PropTypes.func,\r\n multiVideoMode: PropTypes.bool,\r\n disableRemoveAll: PropTypes.bool,\r\n hideRatioLabel: PropTypes.bool,\r\n videoPickerContainerHeight: PropTypes.number,\r\n videoExperienceCircleUploadType: PropTypes.bool,\r\n disableUploadTextField: PropTypes.bool,\r\n onErrorsUpdated: PropTypes.func,\r\n enableShowingErrors: PropTypes.bool,\r\n videoLabelHelpTopic: PropTypes.bool,\r\n CustomAddVideoControl: PropTypes.elementType,\r\n};\r\n\r\nVideoExperienceComponent.defaultProps = {\r\n onVideoListUpdated: _.noop,\r\n onVideoPreviewRequested: _.noop,\r\n onSaveThumbnailAsDraft: _.noop,\r\n oDataConfig: null,\r\n classes: {},\r\n isLazyLoadEnabled: true,\r\n isStockPhotoEnabled: true,\r\n activityLogger: {\r\n signal: _.noop,\r\n },\r\n genericImage: null,\r\n videoList: [],\r\n customThumbnailRecord: {},\r\n onVideoUploadStatusUpdate: _.noop,\r\n permissions: {},\r\n allowedVideoSizes: null,\r\n onRenderItemDropdown: null,\r\n disableRemoveAll: false,\r\n hideRatioLabel: false,\r\n multiVideoMode: false,\r\n videoPickerContainerHeight: null,\r\n videoExperienceCircleUploadType: false,\r\n disableUploadTextField: false,\r\n onErrorsUpdated: _.noop,\r\n enableShowingErrors: true,\r\n videoLabelHelpTopic: null,\r\n CustomAddVideoControl: null,\r\n};\r\n\r\nconst VideoExperience = withDefaultStyles(withPerfMarker(VideoExperienceComponent), getReplaceVideoStyle);\r\n\r\nexport { VideoExperience };\r\n","import _ from 'underscore';\r\n\r\ninterface IOptions {\r\n repairMode: boolean;\r\n videoList: {\r\n status: string;\r\n idString: string;\r\n text: string;\r\n }[];\r\n\r\n videoRepository: any;\r\n\r\n events: {\r\n onProgress: Function;\r\n onTokenUpdate: Function\r\n onResponse: Function\r\n onError: Function\r\n onFinally: Function\r\n }\r\n}\r\n\r\nexport async function handleFileRead(file: File, options: IOptions) {\r\n const {\r\n repairMode,\r\n videoList,\r\n videoRepository,\r\n events: {\r\n onProgress,\r\n onTokenUpdate,\r\n onResponse,\r\n onError,\r\n onFinally,\r\n },\r\n } = options;\r\n\r\n const invalidVideo = _.find(videoList, _video => _video.status === 'Failed');\r\n\r\n const postVideoByFilePromise = repairMode && invalidVideo ? videoRepository.replaceVideoByBlob({\r\n file,\r\n id: invalidVideo.idString,\r\n description: invalidVideo.text,\r\n onProgress,\r\n }) : videoRepository.postVideoByFile({\r\n description: file.name,\r\n file,\r\n onProgress,\r\n });\r\n\r\n try {\r\n const token = await postVideoByFilePromise;\r\n\r\n const response = await onTokenUpdate(token);\r\n\r\n onResponse(response);\r\n } catch (error) {\r\n onError(error);\r\n } finally {\r\n onFinally();\r\n }\r\n}\r\n","export const getReplaceVideoStyle = () => ({\r\n root: {\r\n '& .placeholder-contents': {\r\n width: '750px',\r\n border: '1px solid #C8C8C8',\r\n margin: '8px 0 0 0',\r\n padding: '16px 16px 12px 16px',\r\n\r\n\r\n '& .placeholder-alert-header': {\r\n\r\n display: 'flex',\r\n '& .placeholder-alert-title': {\r\n fontWeight: 600,\r\n fontSize: '16px',\r\n paddingRight: '10px',\r\n },\r\n },\r\n\r\n '& .placeholder-body': {\r\n display: 'flex',\r\n marginTop: 4,\r\n\r\n '& .button': {\r\n height: 24,\r\n minWidth: 56,\r\n width: 56,\r\n },\r\n\r\n '& .place-holder-img-container': {\r\n width: '200px',\r\n '& .placeholder-video-replace-img': {\r\n height: 'auto',\r\n width: '100%',\r\n marginRight: '25px',\r\n },\r\n },\r\n\r\n\r\n '& .placeholder-action': {\r\n '& .placeholder-video-info': {\r\n margin: '10px 0',\r\n '& .placeholder-list-name': {\r\n fontWeight: 600,\r\n paddingRight: '10px',\r\n },\r\n\r\n '& .upload-progress': {\r\n display: 'flex',\r\n },\r\n\r\n '& li': {\r\n display: 'flex',\r\n '& .placeholder-copy-link': {\r\n border: '0',\r\n textDecoration: 'underline',\r\n backgroundColor: 'transparent',\r\n display: 'flex',\r\n\r\n '& .url-copied': {\r\n display: 'none',\r\n color: '#2ba573',\r\n textDecoration: 'none',\r\n },\r\n\r\n '& div': {\r\n padding: '0 5px',\r\n },\r\n\r\n '& .placeholder-list-name': {\r\n padding: '0 5px',\r\n },\r\n\r\n },\r\n\r\n '& .placeholder-copy-link:hover': {\r\n textDecoration: 'none',\r\n },\r\n\r\n '& .placeholder-copy-link:focus': {\r\n textDecoration: 'none',\r\n\r\n '& .url-copied': {\r\n display: 'block',\r\n\r\n },\r\n },\r\n },\r\n\r\n },\r\n\r\n '& .google-import-video-ad-message': {\r\n paddingTop: 15,\r\n },\r\n },\r\n\r\n },\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { MultiLineEllipsisText } from '@bingads-webui-react/multiline-ellipsis';\r\nimport { VideoControls } from '@bingads-webui-react/video-controls';\r\nimport { BusinessNameWithAds } from '@bingads-webui-campaign-react/ad-placement-preview';\r\nimport { ImageExperienceImage } from '@bingads-webui-campaign-react/image-experience';\r\n\r\nimport { ResizedVideoView } from '../resized-video-view';\r\nimport { ImageExperienceVideo } from '../model/image-experience-video';\r\nimport C from '../constants';\r\n\r\nexport class PreviewGeneral extends React.PureComponent {\r\n constructor(props, context) {\r\n super(props, context);\r\n\r\n this.multiLineTextRefs = [\r\n React.createRef(),\r\n React.createRef(),\r\n React.createRef(),\r\n ];\r\n this.state = {\r\n play: false,\r\n mouseIn: false,\r\n };\r\n }\r\n\r\n componentDidUpdate() {\r\n this.multiLineTextRefs.forEach((ref) => {\r\n if (ref.current) {\r\n ref.current.processText();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n const containerClass = `new-responsive-ad-preview-container ${this.props.className}`;\r\n const hideText = this.props.hideTextWhenPlay && this.state.play && !this.state.mouseIn;\r\n const thumbnailUrl = _.get(this.props.customThumbnail, 'ThumbnailUrl') || this.props.video.thumbnailUrl;\r\n return (\r\n \r\n this.setState({ mouseIn: true })}\r\n onMouseLeave={() => this.setState({ mouseIn: false })}\r\n >\r\n \r\n {\r\n this.props.activityLogger.signal('play video ad preview', 'video ad preview');\r\n this.setState({ play: s });\r\n }}\r\n hideControls\r\n />\r\n \r\n
\r\n \r\n \r\n {\r\n !hideText && this.props.showShortHeadline &&\r\n
\r\n \r\n {this.props.i18n.getString(`ImageExperience_Video_Ad_Preview_Type_${this.props.type}`)}\r\n
\r\n {\r\n this.props.showAdditionalDisclaimer &&\r\n \r\n {this.props.i18n.getString('ImageExperience_Additional_Disclaimer_Message')}\r\n
\r\n }\r\n \r\n );\r\n }\r\n}\r\n\r\nPreviewGeneral.propTypes = {\r\n video: PropTypes.instanceOf(ImageExperienceVideo).isRequired,\r\n customThumbnail: PropTypes.instanceOf(ImageExperienceImage),\r\n previewTexts: PropTypes.shape({\r\n shortHeadline: PropTypes.string,\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n className: PropTypes.string.isRequired,\r\n type: PropTypes.string.isRequired,\r\n hideTextWhenPlay: PropTypes.bool,\r\n showShortHeadline: PropTypes.bool,\r\n showLongHeadline: PropTypes.bool,\r\n showDescription: PropTypes.bool,\r\n showAdditionalDisclaimer: PropTypes.bool,\r\n showProgressText: PropTypes.bool,\r\n previewContainerHeight: PropTypes.number.isRequired,\r\n previewContainerWidth: PropTypes.number.isRequired,\r\n additionalSetting: PropTypes.shape({\r\n previewTypeStringKey: PropTypes.string,\r\n imagePreviewHeight: PropTypes.number,\r\n }),\r\n showBusinessName: PropTypes.bool,\r\n showUrl: PropTypes.bool,\r\n isCurrent: PropTypes.bool,\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func.isRequired,\r\n error: PropTypes.func.isRequired,\r\n }),\r\n};\r\n\r\nPreviewGeneral.defaultProps = {\r\n hideTextWhenPlay: false,\r\n showShortHeadline: false,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showAdditionalDisclaimer: false,\r\n showProgressText: true,\r\n additionalSetting: null,\r\n showBusinessName: true,\r\n showUrl: false,\r\n isCurrent: false,\r\n activityLogger: {\r\n signal: _.noop,\r\n error: _.noop,\r\n },\r\n customThumbnail: null,\r\n};\r\n","\r\nimport React from 'react';\r\nimport _ from 'underscore';\r\nimport { PreviewGeneral } from './preview-general';\r\n\r\nconst getPreview = (\r\n video, previewTexts, i18n, isCurrent,\r\n activityLogger, previewSetting, customThumbnail\r\n) => {\r\n let propsToPass = {\r\n video,\r\n previewTexts,\r\n i18n,\r\n isCurrent,\r\n activityLogger,\r\n customThumbnail,\r\n };\r\n\r\n propsToPass = _.defaults(\r\n propsToPass,\r\n previewSetting\r\n );\r\n\r\n return (\r\n \r\n \r\n {items}\r\n \r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nVideoPreviewCarousel.propTypes = {\r\n videoList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceVideo)).isRequired,\r\n customThumbnailRecord: CustomThumbnailRecordType,\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func.isRequired,\r\n error: PropTypes.func.isRequired,\r\n }),\r\n};\r\n\r\nVideoPreviewCarousel.defaultProps = {\r\n activityLogger: {\r\n signal: _.noop,\r\n error: _.noop,\r\n },\r\n customThumbnailRecord: {},\r\n};\r\n","// moved the content to another package to be reused by other packages\r\n// keep this file to support existing codes importing this file.\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience-model';\r\n\r\nexport default constants;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack, Label, ChoiceGroup } from '@bingads-webui-react/fabric-control';\r\nimport C from '../constants';\r\n\r\nconst AspectRatioChoiceGroup = (props) => {\r\n const {\r\n i18n,\r\n aspectRatioOption,\r\n onChange,\r\n } = props;\r\n\r\n const aspectRatioOptions = C.getAspectRatioOptions(i18n);\r\n\r\n return (\r\n \r\n {this.getAdPreviewTitle()}\r\n
\r\n {\r\n this.allVideosAreValid() &&\r\n \r\n
\r\n \r\n {i18n.getString('ImagePreview_Disclaimer_Message')}\r\n
\r\n \r\n {children}\r\n
\r\n );\r\n};\r\n\r\nStockImageItemWrapper.propTypes = {\r\n children: PropTypes.element.isRequired,\r\n image: ImageItemModelShape.isRequired,\r\n itemHeight: PropTypes.number.isRequired,\r\n isSelected: PropTypes.bool,\r\n};\r\n\r\nStockImageItemWrapper.defaultProps = {\r\n isSelected: false,\r\n};\r\n\r\nexport default StockImageItemWrapper;\r\n","import\r\n{\r\n getAutoCroppedImages,\r\n getCenterCroppedSettings,\r\n processCroppedImages,\r\n getAutoCroppedImagesForRatios,\r\n} from '@bingads-webui-campaign/image-experience-utils';\r\n\r\nexport default getAutoCroppedImages;\r\nexport {\r\n getCenterCroppedSettings,\r\n processCroppedImages,\r\n getAutoCroppedImagesForRatios,\r\n};\r\n","import _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { DataSourceState } from '@bingads-webui-react/image-picker'; // eslint-disable-line\r\nimport { StockImageDataService } from '@bingads-webui-campaign/stock-image-data-service';\r\nimport { validateImageWithDimension } from '../../util/image-size-validation';\r\nimport C from '../../constants';\r\n\r\nclass StockPhotoServiceError extends Error {\r\n constructor(e) {\r\n super('StockPhotoServiceError');\r\n\r\n if (e.errors && e.errors.length > 0) {\r\n this.innerError = e.errors[0].Code;\r\n }\r\n }\r\n\r\n getInnerError() {\r\n return this.innerError;\r\n }\r\n}\r\n\r\nclass StockPhotoDataSource {\r\n constructor(options) {\r\n this.currentData = [];\r\n this.currentQuery = '';\r\n this.hasMore = false;\r\n\r\n this.odataService = new StockImageDataService({\r\n cid: options.cid,\r\n aid: options.aid,\r\n oDataConfig: options.oDataConfig,\r\n customParams: options.customParams,\r\n controller: options.controller,\r\n top: 20,\r\n skip: 0,\r\n });\r\n\r\n this.filter = options.filter;\r\n this.filterQuery = {};\r\n\r\n this.pageSize = 20;\r\n this.isMultimediaAd = options.isMultimediaAd || false;\r\n }\r\n\r\n subscribe(callback) {\r\n this.callback = callback;\r\n }\r\n\r\n unsubscribe() {\r\n this.callback = null;\r\n }\r\n\r\n excuteCallBackIfExsit(status) {\r\n if (this.callback) {\r\n this.callback(status);\r\n }\r\n }\r\n\r\n loadMore() {\r\n this.currentStart += this.pageSize;\r\n\r\n return this.searchInternalAsync();\r\n }\r\n\r\n reset() {\r\n this.currentData = [];\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n }\r\n\r\n updateFilterQuery(filterQuery) {\r\n this.filterQuery = filterQuery;\r\n\r\n if (this.currentQuery && !_.isEmpty(this.currentQuery.trim())) {\r\n this.reset();\r\n\r\n this.searchInternalAsync();\r\n }\r\n }\r\n\r\n searchAsync(query) {\r\n this.reset();\r\n\r\n if (!query || _.isEmpty(query.trim())) {\r\n return Promise.resolve();\r\n }\r\n\r\n this.currentQuery = query;\r\n this.currentStart = 0;\r\n\r\n return this.searchInternalAsync();\r\n }\r\n\r\n searchInternalAsync() {\r\n this.excuteCallBackIfExsit(DataSourceState.Loading);\r\n const culture = _.get(window, ['globalLegacyI18n', 'context', 'culture']);\r\n\r\n return this.odataService.getStockImages({\r\n customQueries: _.extend({\r\n appName: 'CampaignUI',\r\n $search: this.currentQuery,\r\n $skip: this.currentStart,\r\n $top: this.pageSize,\r\n language: culture,\r\n includevertical: this.isMultimediaAd,\r\n }, this.filterQuery),\r\n }).then((data) => {\r\n this.hasMore = data['@odata.count'] > data.value.length + this.currentStart;\r\n\r\n const filteredData = _.filter(data.value, this.filter);\r\n\r\n const moreData = _.map(filteredData, item => ({\r\n id: parseInt(item.Id, 10),\r\n src: item.Thumbnail.Url,\r\n width: item.Thumbnail.Dimensions.Width,\r\n height: item.Thumbnail.Dimensions.Height,\r\n altText: item.Description || '',\r\n textFields: [],\r\n }));\r\n\r\n this.currentData = this.currentData.concat(moreData);\r\n }).catch((e) => { throw e; })\r\n .finally(() => { this.excuteCallBackIfExsit(DataSourceState.Done); });\r\n }\r\n\r\n SaveAsync(options) {\r\n return this.odataService.saveStockImage(options)\r\n .catch((e) => {\r\n throw new StockPhotoServiceError(e);\r\n });\r\n }\r\n\r\n getData() {\r\n return { hasMore: this.hasMore, data: this.currentData };\r\n }\r\n}\r\n\r\nconst initializeStockPhotoDataSource = (\r\n cid,\r\n aid,\r\n oDataConfig,\r\n imageType,\r\n isMultimediaAd = false,\r\n imageOption = C.defaultImageOption\r\n) => {\r\n const stockPhotoDataSource = new StockPhotoDataSource({\r\n cid,\r\n aid,\r\n oDataConfig,\r\n controller: 'StockImages',\r\n top: 20,\r\n skip: 0,\r\n isMultimediaAd,\r\n filter: ((item) => {\r\n const { Width, Height } = item.Preview.Dimensions;\r\n\r\n if (validateImageWithDimension(\r\n Width, Height,\r\n imageType, isMultimediaAd, imageOption\r\n ) === null) {\r\n return true;\r\n }\r\n\r\n return false;\r\n }),\r\n });\r\n\r\n return stockPhotoDataSource;\r\n};\r\n\r\nexport { StockPhotoServiceError, StockPhotoDataSource, initializeStockPhotoDataSource };\r\n","import _ from 'underscore';\r\nimport { ImageOData } from '@bingads-webui-campaign/image-odata';\r\nimport { queryify } from '@bingads-webui/url-util';\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { deserializeImageAssetMetadata } from '@bingads-webui-campaign/media-metadata-model';\r\nimport { getExpandedImages, updatePlacementWithBaseCropSettings, updatePlacementWithPlacementSettings } from '@bingads-webui-campaign/image-experience-utils';\r\n\r\nimport C from '../constants';\r\nimport {\r\n validateImageSizeAsync,\r\n validateImageWithDimension,\r\n} from './image-size-validation';\r\nimport { newImageFromMTObject } from '../model/image-experience-image';\r\nimport { getSmartCroppedImagesAsync } from './get-smart-cropped-image';\r\n\r\nexport class ImageRepository {\r\n constructor(cid, aid, oDataConfig, imageExperienceConfig) {\r\n // Internal implementations are migrated to imageOData.\r\n // Still keep this layer so no need to change places consuming this code\r\n this.imageOData = new ImageOData(cid, aid, oDataConfig);\r\n\r\n this.imageExperienceConfig = imageExperienceConfig;\r\n this.validateImageWithDimension = validateImageWithDimension;\r\n this.getAdCreatorInstrumentation = getAdCreatorInstrumentation;\r\n this.validateImageSizeAsync = validateImageSizeAsync;\r\n }\r\n\r\n /**\r\n * Gets previously uploaded images (20).\r\n * @param {number} sortById - id for the sort criteria\r\n * @param {string} searchTerm - search term for query\r\n * @return {Promise} Response from the oData call.\r\n */\r\n getExistingImages({\r\n sortById,\r\n searchTerm,\r\n pageNumber,\r\n pageSize,\r\n filterTerm = '',\r\n }) {\r\n const sortDefinition = _.find(\r\n C.sortBySelections,\r\n sortBySelection => sortBySelection.id === sortById\r\n );\r\n const sortQuery = sortDefinition && sortDefinition.query;\r\n\r\n return this.imageOData.getExistingImages({\r\n sortQuery,\r\n searchTerm,\r\n pageNumber,\r\n pageSize,\r\n filterTerm,\r\n }).then((response) => {\r\n _.each(response.value, (item) => {\r\n // &c=0 means no crop. It wil help convert tiff to jpg so that img tag can be displayed.\r\n // This is to mitigate unexpected MMA demand associated with tiff images caused by a MT bug\r\n // Attention: this is not an official support for tiff format.\r\n // If we want to officially support a new image type, need more changes/tests.\r\n _.extend(item, {\r\n Url: queryify(item.Url, { c: 0 }),\r\n });\r\n });\r\n\r\n return response;\r\n });\r\n }\r\n\r\n /**\r\n * Gets image specified by the id.\r\n * @param {number} imageId Id of the image to be requested.\r\n * @param {boolean} isImageFittingEnabled - is image fitting enabled or not\r\n * @param {string} adType - for different adType, MT returns image fittings with different assets ratios\r\n * @return {Promise} Response from the oData call.\r\n */\r\n getImageByIdAsync(imageId, isImageFittingEnabled, adType) {\r\n return this.imageOData.getImageByIdAsync(imageId, isImageFittingEnabled, adType);\r\n }\r\n\r\n getImageByIdAndProcessAsync({\r\n image,\r\n imageType,\r\n imageSource,\r\n onError,\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n optionalCallback,\r\n isImageFittingEnabled,\r\n adType,\r\n }) {\r\n const { id, suggestionId } = image || {};\r\n if (id) {\r\n return this.getImageByIdAsync(id, isImageFittingEnabled, adType)\r\n .then(imgObjMT => this.processNewlyAddedImage({\r\n imgObjMT,\r\n imageSource,\r\n imageType,\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n optionalCallback,\r\n isImageFittingEnabled,\r\n }))\r\n .then((processedImage) => {\r\n if (suggestionId) {\r\n return { ...processedImage, suggestionId };\r\n }\r\n return processedImage;\r\n })\r\n .catch(e => onError(e));\r\n }\r\n return Promise.resolve();\r\n }\r\n\r\n getImagesByIdsAndProcessAsync({\r\n imageIds,\r\n suggestionIds = [],\r\n imageType,\r\n imageSource,\r\n onError,\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n optionalCallback,\r\n isImageFittingEnabled,\r\n adType,\r\n }) {\r\n const addImagePromises = [];\r\n\r\n _.each(imageIds, (imageId, index) => {\r\n addImagePromises.push(this.getImageByIdAndProcessAsync({\r\n image: { id: imageId, suggestionId: suggestionIds[index] },\r\n imageType,\r\n imageSource,\r\n onError,\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n optionalCallback,\r\n isImageFittingEnabled,\r\n adType,\r\n }));\r\n });\r\n\r\n return Promise.all(addImagePromises);\r\n }\r\n\r\n processNewlyAddedImage({\r\n imgObjMT,\r\n imageSource,\r\n imageType,\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n optionalCallback,\r\n isImageFittingEnabled,\r\n }) {\r\n const {\r\n isAudienceAd,\r\n isMultimediaAd,\r\n instrumentation,\r\n mediaRepository,\r\n isMultimediaAdinMSANEnabled,\r\n isImageAdExtensionMode,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n adCreatorScenario,\r\n isMSANBoostEnabled,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n isAudienceAdSmartCropEnabled,\r\n isPmaxSmartCropEnabled,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n isLinkedInAd,\r\n isPMaxAspectRatiosV2Enabled,\r\n } = this.imageExperienceConfig;\r\n\r\n const postValidationError =\r\n this.validateImageWithDimension(\r\n imgObjMT.Width,\r\n imgObjMT.Height,\r\n imageType,\r\n isMultimediaAd || isCombinedMsanAndMmaAspectRatios,\r\n imageOption,\r\n isMMAV2Enabled,\r\n false, /* isCombinedMsanAndMmaAspectRatios */\r\n false, /* isDisplayAds */\r\n false, /* isPortraitImage */\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n isLinkedInAd,\r\n isPMaxAspectRatiosV2Enabled\r\n );\r\n\r\n /* istanbul ignore else */\r\n if (postValidationError) {\r\n postValidationError.isDueToResizing = true;\r\n\r\n throw postValidationError;\r\n }\r\n\r\n optionalCallback && optionalCallback();\r\n\r\n const { smartCropActivity } =\r\n this.getAdCreatorInstrumentation(instrumentation, adCreatorScenario);\r\n\r\n let resolveOriginalImagePromise = Promise.resolve(imgObjMT);\r\n\r\n const hasBaseImage = imgObjMT.BaseIdString &&\r\n imgObjMT.BaseIdString !== imgObjMT.IdString;\r\n const hasBeenBulkCropped = imgObjMT.OriginalUrl &&\r\n imgObjMT.OriginalUrl !== imgObjMT.Url;\r\n const hasPlacementSettings = imgObjMT.PlacementSettings &&\r\n imgObjMT.PlacementSettings.length > 0;\r\n\r\n const { effectSettings } = hasBaseImage ? (deserializeImageAssetMetadata(imgObjMT.Metadata) || {}) : {};\r\n\r\n if (hasBaseImage && effectSettings) {\r\n const originalImage = imgObjMT.BaseIdString;\r\n\r\n resolveOriginalImagePromise =\r\n resolveOriginalImagePromise.then(preprocessImgObjMT =>\r\n this.getImageByIdAsync(originalImage, isImageFittingEnabled)\r\n .then((baseImgMT) => {\r\n // for smart effects, use full original image regardless of crop settings\r\n const originalUrl =\r\n baseImgMT.OriginalUrl || baseImgMT.Url;\r\n\r\n return _.extend({}, preprocessImgObjMT, {\r\n Id: Number(imgObjMT.BaseIdString),\r\n IdString: imgObjMT.BaseIdString,\r\n Url: originalUrl,\r\n });\r\n }));\r\n }\r\n\r\n return resolveOriginalImagePromise\r\n .then((finalImgObjMT) => {\r\n const imgObj = newImageFromMTObject(finalImgObjMT, imageSource);\r\n // if image fitting pilot is not enabled,\r\n // or there are manual cropping on image level\r\n // or there are smart effects for the image\r\n // or ROIInfo is null\r\n // don't use image fitting\r\n if (!isImageFittingEnabled || hasBeenBulkCropped || effectSettings || imageOption !== C.defaultImageOption || !finalImgObjMT.ROIInfo) {\r\n return { imgObj, skipSmartCrop: false };\r\n }\r\n\r\n const imageObjExpanded = getExpandedImages({\r\n originalImageToExpand: imgObj,\r\n isMultimediaAd,\r\n isMultimediaAdinMSANEnabled,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n isPMaxAspectRatiosV2Enabled,\r\n logger: smartCropActivity,\r\n });\r\n\r\n if (imageObjExpanded) {\r\n return { imgObj, imageObjExpanded, skipSmartCrop: true };\r\n }\r\n return { imgObj, skipSmartCrop: false };\r\n })\r\n .then(({ imgObj, imageObjExpanded, skipSmartCrop }) => {\r\n if (skipSmartCrop) {\r\n return { imgObj, imgObjCropped: imageObjExpanded };\r\n }\r\n return getSmartCroppedImagesAsync({\r\n mediaRepository,\r\n isAudienceAd,\r\n originalImageToCrop: imgObj,\r\n smartCropActivity,\r\n isMultimediaAd,\r\n isMultimediaAdinMSANEnabled,\r\n imageOption,\r\n aspectRatioOption,\r\n isImageAdExtensionMode,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n isMSANBoostEnabled,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n isAudienceAdSmartCropEnabled,\r\n isPmaxSmartCropEnabled,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n isLinkedInAd,\r\n setCroppingType: isImageAdExtensionMode || isImageFittingEnabled,\r\n isPMaxAspectRatiosV2Enabled,\r\n }).then(imgObjCropped => ({ imgObj, imgObjCropped }));\r\n }).then(({ imgObj, imgObjCropped }) => {\r\n if (hasBaseImage && effectSettings) {\r\n const effectSettingsModel = _.defaults({ effectSrc: imgObjMT.Url }, effectSettings);\r\n\r\n _.each(imgObjCropped, (placement) => {\r\n placement.BaseImage.setEffectSettings(effectSettingsModel);\r\n placement.setEffectSettings(effectSettingsModel);\r\n });\r\n }\r\n\r\n if (hasBeenBulkCropped) {\r\n _.each(imgObjCropped, (placement) => {\r\n updatePlacementWithBaseCropSettings({\r\n placement,\r\n mtImgObject: imgObjMT,\r\n setCroppingType: isImageAdExtensionMode || isImageFittingEnabled,\r\n });\r\n });\r\n }\r\n\r\n if (hasPlacementSettings) {\r\n _.each(imgObjCropped, (placement) => {\r\n updatePlacementWithPlacementSettings({\r\n isMultimediaAd,\r\n isMultimediaAdinMSANEnabled,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isPMaxAspectRatiosV2Enabled,\r\n placement,\r\n mtImgObject: imgObjMT,\r\n updatePlacementSettings: true,\r\n setCroppingType: isImageAdExtensionMode || isImageFittingEnabled,\r\n });\r\n });\r\n }\r\n\r\n if (_.isArray(imgObjCropped) && imgObjCropped.length === 1 && (!isStoreAppProng && !isStoreAppSpotLight && !isStoreAppTransparentLogo)) {\r\n if (imgObjCropped[0].isPortrait) {\r\n // we have only one placement for portrait images\r\n onSelectedImagesSet(imgObjCropped);\r\n } else {\r\n onSelectedImagesSet(imgObjCropped[0]);\r\n }\r\n } else {\r\n onSelectedImagesSet(imgObjCropped);\r\n }\r\n\r\n return Promise.resolve(imgObj);\r\n });\r\n }\r\n\r\n uploadImageAsync(imageData, activityLogger = null, inProgress = null, imageOption = C.defaultImageOption) { // eslint-disable-line max-len\r\n return this.imageOData.uploadImageAsync(imageData, activityLogger, inProgress, imageOption === C.imageOptionKeys.Logo); // eslint-disable-line max-len\r\n }\r\n\r\n uploadImageWithValidationAsync({\r\n imageData,\r\n updateCurrentProgress,\r\n name,\r\n imageOption,\r\n imageType,\r\n }) {\r\n const { isMultimediaAd } = this.imageExperienceConfig;\r\n\r\n return this.validateImageSizeAsync(imageData, imageType, isMultimediaAd, imageOption)\r\n // eslint-disable-next-line arrow-body-style\r\n .then(() => {\r\n return this.uploadImageAsync(\r\n imageData,\r\n null,\r\n updateCurrentProgress,\r\n C.defaultImageOption,\r\n name\r\n )\r\n .then((response) => {\r\n if (!response || !response.imageId) {\r\n throw new Error(response && response[0] && response[0].Code);\r\n }\r\n return response;\r\n });\r\n });\r\n }\r\n\r\n updateImageAsync(imageData) {\r\n return this.imageOData.updateImageAsync(imageData);\r\n }\r\n\r\n deleteImageAsync(imageData) {\r\n return this.imageOData.deleteImageAsync(imageData);\r\n }\r\n\r\n bulkSaveImagesByUrl(imageUrls) {\r\n return this.imageOData.bulkSaveImagesByUrl(imageUrls);\r\n }\r\n\r\n addAssetsByUrl(images) {\r\n const addAssetPromises = _.map(images, image => this.imageOData.addAsset(image).catch(err => err));\r\n\r\n return Promise.allSettled(addAssetPromises).then((results) => {\r\n const allErrors = _.filter(results, result => result.status === 'rejected').map(result => result.reason);\r\n // only throw error if all images failed\r\n if (allErrors.length === results.length) {\r\n const firstErrorCode = allErrors[0] && allErrors[0].errors && allErrors[0].errors[0] && allErrors[0].errors[0].Code;\r\n throw new Error(firstErrorCode);\r\n } else {\r\n return _.filter(results, result => result.status === 'fulfilled').map(result => result.value);\r\n }\r\n });\r\n }\r\n\r\n addImageByUrlThenProcessAsync({\r\n imageUrl,\r\n imageType,\r\n imageSource = C.imageSources.WebsiteCarousel,\r\n onError,\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n suggestionId,\r\n isImageFittingEnabled,\r\n adType,\r\n }) {\r\n const {\r\n isMultimediaAd,\r\n } = this.imageExperienceConfig;\r\n\r\n const sourceType = C.getSourceTypeFromImageSource(imageSource);\r\n return this.validateImageSizeAsync(imageUrl, null, isMultimediaAd, imageOption).bind(this)\r\n .then(() => {\r\n if (isImageFittingEnabled) {\r\n return this.addAssetsByUrl([{ url: imageUrl, sourceType }])\r\n .then(ids => ({ id: ids[0], suggestionId }));\r\n }\r\n return this.bulkSaveImagesByUrl([{ url: imageUrl, sourceType }])\r\n .then((ids) => {\r\n if (_.isObject(_.first(ids))) {\r\n throw new Error(ids[0].code);\r\n }\r\n\r\n return { id: ids[0], suggestionId };\r\n })\r\n })\r\n .then(image => this.getImageByIdAndProcessAsync({\r\n image,\r\n imageType,\r\n imageSource,\r\n onError,\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n isImageFittingEnabled,\r\n adType,\r\n }))\r\n .then(processedImage => ({ processedImage }))\r\n .catch(e => onError(e));\r\n }\r\n\r\n addImagesByUrlThenProcessAsync({\r\n images,\r\n imageType,\r\n imageSource = C.imageSources.WebsiteCarousel,\r\n imageOption,\r\n onError,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n isImageFittingEnabled,\r\n }) {\r\n const {\r\n isMultimediaAd,\r\n } = this.imageExperienceConfig;\r\n\r\n const sourceType = C.getSourceTypeFromImageSource(imageSource);\r\n const validateImageSizePromises = [];\r\n\r\n let errors = [];\r\n\r\n _.each(images, ({ fullUrl }) => {\r\n validateImageSizePromises.push(this.validateImageSizeAsync(fullUrl, null, isMultimediaAd, imageOption).bind(this).catch((e) => {\r\n errors = errors.concat(e.message);\r\n return e.message;\r\n }));\r\n });\r\n\r\n return Promise.all(validateImageSizePromises)\r\n .then((values) => {\r\n let index = 0;\r\n return _.reduce(images, (memo, { fullUrl, suggestionId }) => {\r\n if (!values[index]) { // if no error, promise resolved with undefined\r\n memo.push({ url: fullUrl, sourceType, suggestionId });\r\n }\r\n index += 1;\r\n return memo;\r\n }, []);\r\n })\r\n .then((validateImages) => {\r\n const suggestionIds = _.pluck(validateImages, 'suggestionId');\r\n if (isImageFittingEnabled) {\r\n return this.addAssetsByUrl(validateImages)\r\n .then((ids) => {\r\n const imageIdsAndSuggestionIds = ids.map((id, index) => ({\r\n imageId: id,\r\n suggestionId: suggestionIds[index],\r\n }));\r\n return imageIdsAndSuggestionIds;\r\n });\r\n }\r\n return this.bulkSaveImagesByUrl(validateImages)\r\n .then((ids) => {\r\n const imageIdsAndSuggestionIds = ids.map((id, index) => ({\r\n imageId: id,\r\n suggestionId: suggestionIds[index],\r\n }));\r\n const saveErrors = _.chain(ids)\r\n .filter(id => typeof id === 'object')\r\n .map(id => id.code)\r\n .value();\r\n\r\n errors = errors.concat(saveErrors);\r\n\r\n const filteredImageIds = _.chain(ids)\r\n .filter(id => typeof id === 'string')\r\n .value();\r\n\r\n return imageIdsAndSuggestionIds.filter(id => filteredImageIds.includes(id.imageId));\r\n })\r\n })\r\n .then(imageIdsAndSuggestionIds => (\r\n this.getImagesByIdsAndProcessAsync({\r\n imageIds: _.pluck(imageIdsAndSuggestionIds, 'imageId'),\r\n suggestionIds: _.pluck(imageIdsAndSuggestionIds, 'suggestionId'),\r\n imageType,\r\n imageSource,\r\n onError: (e) => { errors = errors.concat(e.message); },\r\n imageOption,\r\n aspectRatioOption,\r\n onSelectedImagesSet,\r\n isImageFittingEnabled,\r\n })\r\n ))\r\n .then(processedImages =>\r\n ({ ...onError(errors), processedImages })) // Check with Yen + Lingling)\r\n .catch((e) => {\r\n errors = errors.concat(e.message);\r\n return onError(errors);\r\n });\r\n }\r\n}\r\n","import React from 'react';\r\n\r\nconst LoadingPlaceholder = () => (\r\n \r\n 
\r\n
\r\n );\r\n };\r\n\r\n render() {\r\n const {\r\n staticImagePath,\r\n stockPhotoDataSource,\r\n i18n,\r\n onKeyboardEscapeFromImage,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nStockImagePickerContainer.propTypes = {\r\n stockPhotoDataSource: PropTypes.instanceOf(StockPhotoDataSource).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n staticImagePath: PropTypes.string,\r\n onSelectedImagesSet: PropTypes.func.isRequired,\r\n showErrors: PropTypes.func,\r\n imageRepository: PropTypes.instanceOf(ImageRepository).isRequired,\r\n showUiBlocker: PropTypes.func,\r\n isForVNext: PropTypes.bool,\r\n isMultimediaAd: PropTypes.bool,\r\n isMultimediaAdinMSANEnabled: PropTypes.bool,\r\n perfMarker: PropTypes.shape({\r\n willFetchFile: PropTypes.func.isRequired,\r\n willInit: PropTypes.func.isRequired,\r\n willFetchData: PropTypes.func.isRequired,\r\n willRender: PropTypes.func.isRequired,\r\n done: PropTypes.func.isRequired,\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n isChooseThumbnail: PropTypes.bool,\r\n mediaRepository: PropTypes.instanceOf(MediaRepository),\r\n smartCropActivity: PropTypes.shape({\r\n trace: PropTypes.func,\r\n }),\r\n imageOption: PropTypes.string,\r\n aspectRatioOption: PropTypes.string,\r\n onKeyboardEscapeFromImage: PropTypes.func,\r\n onSelectStockImage: PropTypes.func,\r\n};\r\n\r\nStockImagePickerContainer.defaultProps = {\r\n showErrors: {},\r\n showUiBlocker: {},\r\n staticImagePath: '',\r\n isForVNext: false,\r\n isMultimediaAd: false,\r\n isAdCreatorEnabled: false,\r\n isMultimediaAdinMSANEnabled: false,\r\n isChooseThumbnail: false,\r\n mediaRepository: null,\r\n smartCropActivity: {\r\n trace: _.noop,\r\n },\r\n imageOption: C.defaultImageOption,\r\n aspectRatioOption: C.defaultAspectRatioOption,\r\n onKeyboardEscapeFromImage: _.noop,\r\n onSelectStockImage: null,\r\n};\r\n\r\nexport default StockImagePickerContainer;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button } from '@bingads-webui-react/primitive';\r\nimport { ValidatedInput, ValidationGroup } from '@bingads-webui-react/validation-controls';\r\n\r\nexport class NameEditor extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isValid: true,\r\n };\r\n }\r\n\r\n onValidate = (result) => {\r\n this.setState({\r\n isValid: result.isValid,\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nNameEditor.propTypes = {\r\n value: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onChanged: PropTypes.func.isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n};\r\n\r\n\r\nNameEditor.defaultProps = {\r\n value: '',\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useState } from 'react';\r\nimport classnames from 'classnames';\r\n\r\nimport { Stack, Label } from '@bingads-webui-react/fabric-control';\r\nimport { FocusLock } from '@bingads-webui-react/focus-lock';\r\nimport { NameEditor } from '../../components/name-editor';\r\nimport { ImageItemModelShape } from '@bingads-webui-react/image-picker'; //eslint-disable-line\r\n\r\nconst getUserImageItemWrapper = ({\r\n i18n, isForVNext, onUserImageDelete, onUserImageEdit, isAdCreatorEnabled, isForThumbnail,\r\n}) => {\r\n const UserImageItemWrapper = (props) => {\r\n const {\r\n children,\r\n itemHeight,\r\n image,\r\n isSelected,\r\n } = props;\r\n\r\n const [editMode, setEditMode] = useState(false);\r\n const [imageText] = useState(image.textFields[0]);\r\n const [imageEditText, setImageEditText] = useState('');\r\n\r\n const thumbnailHeight = itemHeight;\r\n const thumbnailWidth = Math.round((image.width * thumbnailHeight) / image.height);\r\n const limitedThumbnailWidth =\r\n thumbnailWidth / thumbnailHeight > 1.6 ? thumbnailHeight * 1.6 : thumbnailWidth;\r\n\r\n const wrapperStyle = {\r\n /* istanbul ignore next */\r\n maxHeight: thumbnailHeight + (isForThumbnail? 30: 45),\r\n /* istanbul ignore next */\r\n height: thumbnailHeight + (isForThumbnail? 30: 45),\r\n width: limitedThumbnailWidth + 4, // + 4 so that the outline shows up upon getting focus\r\n position: 'relative',\r\n overflow: 'visible',\r\n margin: '5px',\r\n };\r\n\r\n const onDelete = (clickEvent) => {\r\n const imageIdString = clickEvent.currentTarget.attributes['data-imageid'].value;\r\n\r\n return onUserImageDelete(imageIdString);\r\n };\r\n\r\n const onImageEdited = (imageIdString, newImageText) => {\r\n onUserImageEdit(imageIdString, newImageText);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n }\r\n {\r\n editMode &&\r\n (\r\n setEditMode(false)}\r\n >\r\n setImageEditText(e.target.value)}\r\n onSave={() => {\r\n onImageEdited(image.idString, imageEditText);\r\n setEditMode(false);\r\n }}\r\n onCancel={() => setEditMode(false)}\r\n />\r\n \r\n )\r\n }\r\n
\r\n );\r\n };\r\n\r\n UserImageItemWrapper.propTypes = {\r\n children: PropTypes.element.isRequired,\r\n image: ImageItemModelShape.isRequired,\r\n itemHeight: PropTypes.number.isRequired,\r\n isSelected: PropTypes.bool,\r\n };\r\n\r\n UserImageItemWrapper.defaultProps = {\r\n isSelected: false,\r\n };\r\n\r\n return UserImageItemWrapper;\r\n};\r\n\r\nexport default getUserImageItemWrapper;\r\n","import _ from 'underscore';\r\nimport { DataSourceState } from '@bingads-webui-react/image-picker'; // eslint-disable-line\r\nimport C from '../../constants';\r\n\r\nclass UserPhotoDataSource {\r\n constructor(options) {\r\n this.currentData = [];\r\n this.hasMore = false;\r\n\r\n this.sortById = options.sortById;\r\n this.imageRepository = options.imageRepository;\r\n\r\n this.pageSize = 20;\r\n }\r\n\r\n subscribe(callback) {\r\n this.callback = callback;\r\n }\r\n\r\n unsubscribe() {\r\n this.callback = null;\r\n }\r\n\r\n excuteCallBackIfExsit(status) {\r\n /* istanbul ignore else */\r\n if (this.callback) {\r\n this.callback(status);\r\n }\r\n }\r\n\r\n loadMore() {\r\n this.currentPage += 1;\r\n\r\n return this.fetchImageAsync();\r\n }\r\n\r\n reload() {\r\n this.currentData = [];\r\n this.currentPage = 0;\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n\r\n return this.fetchImageAsync();\r\n }\r\n\r\n searchAsync(searchTerm, sortById, filterTerm = '') {\r\n this.currentData = [];\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n\r\n if (searchTerm === null) {\r\n this.currentSearchTerm = '';\r\n } else {\r\n this.currentSearchTerm = searchTerm;\r\n }\r\n\r\n this.currentFilterTerm = filterTerm;\r\n this.sortById = sortById || /* istanbul ignore next */this.sortById;\r\n this.currentPage = 0;\r\n\r\n return this.fetchImageAsync();\r\n }\r\n\r\n fetchImageAsync() {\r\n this.excuteCallBackIfExsit(DataSourceState.Loading);\r\n\r\n this.imageRepository.getExistingImages({\r\n sortById: this.sortById,\r\n searchTerm: this.currentSearchTerm,\r\n pageNumber: this.currentPage,\r\n pageSize: C.pageSize,\r\n filterTerm: this.currentFilterTerm,\r\n }).then((response) => {\r\n this.hasMore = response['@odata.count'] > response.value.length + this.currentData.length;\r\n const moreData = _.map(response.value, (item) => {\r\n const src =\r\n (item.Url.indexOf('http') >= 0) ?\r\n /* istanbul ignore next */`${item.Url}${((item.Url.indexOf('?') < 0) ? '?' : '')}&h=180` : item.Url;\r\n\r\n return {\r\n id: parseInt(item.Id, 10),\r\n idString: item.IdString,\r\n src,\r\n source: item.SourceType,\r\n width: item.Width,\r\n height: item.Height,\r\n altText: item.Description || '',\r\n textFields: [item.Text],\r\n baseIdString: item.BaseIdString,\r\n metadata: item.Metadata,\r\n };\r\n });\r\n\r\n this.currentData = this.currentData.concat(moreData);\r\n }).finally(() => {\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n });\r\n }\r\n\r\n getData() {\r\n return { hasMore: this.hasMore, data: this.currentData };\r\n }\r\n}\r\n\r\nconst initializeUserPhotoDataSource = ({\r\n imageType,\r\n imageRepository,\r\n}) => {\r\n const userPhotoDataSource = new UserPhotoDataSource({\r\n imageRepository,\r\n imageType,\r\n sortById: 1,\r\n /* istanbul ignore next */\r\n filter: (() => true),\r\n });\r\n\r\n return userPhotoDataSource;\r\n};\r\n\r\nexport { UserPhotoDataSource, initializeUserPhotoDataSource };\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport PropTypes from 'prop-types';\r\nimport { ImagePickerContainer } from '@bingads-webui-react/image-picker';\r\nimport { deserializeImageAssetMetadata } from '@bingads-webui-campaign/media-metadata-model';\r\nimport getUserImageItemWrapper from './user-image-wrapper';\r\nimport { UserPhotoDataSource } from '../data-source/user-photo-data-source';\r\nimport { ImageRepository } from '../../util/image-repository';\r\nimport LoadingPlaceholder from '../../components/loading-place-holder';\r\nimport { ImageExperienceImage } from '../../model/image-experience-image';\r\nimport { useImageDelete } from './image-delete-confirm';\r\n\r\nconst itemHeight = 180;\r\n\r\nconst UserImagePickerContainer = (props) => {\r\n const {\r\n i18n,\r\n userPhotoDataSource,\r\n staticImagePath,\r\n onImageSelected,\r\n imageRepository,\r\n showUiBlocker,\r\n showErrors,\r\n isLazyLoadEnabled,\r\n isForVNext,\r\n imageList,\r\n isAdCreatorEnabled,\r\n isAudienceAd,\r\n onKeyboardEscapeFromImage,\r\n isForThumbnail,\r\n } = props;\r\n\r\n const {\r\n ImageDeleteConfirm, onUserImageDelete,\r\n } = useImageDelete({\r\n i18n,\r\n showUiBlocker,\r\n imageRepository,\r\n userPhotoDataSource,\r\n imageList,\r\n isAudienceAd,\r\n });\r\n\r\n const onLoadMore = () => {\r\n userPhotoDataSource.loadMore();\r\n };\r\n\r\n const onUserImageEdit = (imageId, imageText) => {\r\n showUiBlocker(true);\r\n showErrors([]);\r\n\r\n return imageRepository.updateImageAsync({\r\n Id: imageId,\r\n Text: imageText,\r\n }).then(() => userPhotoDataSource.reload()).finally(() => {\r\n showUiBlocker(false);\r\n });\r\n };\r\n\r\n const onUserImageSelected = (selectedImages) => {\r\n // onImageSelected will also have ui blocker logic, so here we just turn on blocker earlier\r\n showUiBlocker(true);\r\n\r\n const image = selectedImages[0];\r\n let originalImageUrl;\r\n const extractedImageModel = _.extend({\r\n Id: image.id,\r\n IdString: image.idString,\r\n Height: image.height,\r\n Width: image.width,\r\n Source: image.source,\r\n Text: image.textFields[0],\r\n Url: image.src.replace('&h=180', ''),\r\n }, isAdCreatorEnabled && {\r\n BaseIdString: image.baseIdString,\r\n Metadata: image.metadata,\r\n });\r\n\r\n if (isAdCreatorEnabled\r\n && image.baseIdString && image.baseIdString !== image.id\r\n && deserializeImageAssetMetadata(image.metadata)) {\r\n const { data } = userPhotoDataSource.getData();\r\n const originalImage = _.find(data, item => item.id === image.baseIdString);\r\n\r\n if (originalImage) {\r\n originalImageUrl = originalImage.src.replace('&h=180', '');\r\n return Promise.resolve(onImageSelected({\r\n ...extractedImageModel,\r\n OriginalUrl: originalImageUrl,\r\n }));\r\n }\r\n\r\n // if base image doesn't fetch yet, need to explicitly fetch asset info\r\n return imageRepository.getImageByIdAsync(image.baseIdString)\r\n .then(({ Url: OriginalUrl }) => onImageSelected({\r\n ...extractedImageModel,\r\n OriginalUrl,\r\n }))\r\n .catch(() => {\r\n // callback onImageSelected already has blocker logic, so here only hide when error\r\n showUiBlocker(false);\r\n });\r\n }\r\n\r\n return Promise.resolve(onImageSelected(extractedImageModel));\r\n };\r\n\r\n const UserImageItemWrapper = getUserImageItemWrapper({\r\n i18n,\r\n isForVNext,\r\n onUserImageDelete,\r\n onUserImageEdit,\r\n isAdCreatorEnabled,\r\n isForThumbnail,\r\n });\r\n\r\n return (\r\n \r\n
\r\n {\r\n !editMode &&\r\n (\r\n \r\n { setImageEditText(imageText); setEditMode(true); }}\r\n aria-label={i18n.getString('ImageExperience_Edit_Image_Name')}\r\n />\r\n )\r\n }\r\n
\r\n \r\n {children}\r\n
\r\n {\r\n !isForVNext &&\r\n (\r\n \r\n {`${image.width} x ${image.height}`}\r\n
\r\n )\r\n }\r\n {\r\n !isForVNext &&\r\n (\r\n \r\n \r\n {imageText}\r\n \r\n {\r\n isForVNext &&\r\n (\r\n { setImageEditText(imageText); setEditMode(true); }}\r\n aria-label={i18n.getString('ImageExperience_Edit_Image_Name')}\r\n />\r\n )\r\n }\r\n
\r\n {\r\n /* istanbul ignore next */\r\n !isForThumbnail &&\r\n \r\n \r\n
\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nUserImagePickerContainer.propTypes = {\r\n userPhotoDataSource: PropTypes.instanceOf(UserPhotoDataSource).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n staticImagePath: PropTypes.string,\r\n showErrors: PropTypes.func,\r\n imageRepository: PropTypes.instanceOf(ImageRepository).isRequired,\r\n onImageSelected: PropTypes.func.isRequired,\r\n showUiBlocker: PropTypes.func,\r\n isForVNext: PropTypes.bool,\r\n isLazyLoadEnabled: PropTypes.bool.isRequired,\r\n imageList: PropTypes.arrayOf(PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceImage)),\r\n PropTypes.instanceOf(ImageExperienceImage),\r\n PropTypes.arrayOf(PropTypes.shape({ IdString: PropTypes.string })),\r\n ])),\r\n isAdCreatorEnabled: PropTypes.bool,\r\n isAudienceAd: PropTypes.bool,\r\n isForThumbnail: PropTypes.bool,\r\n onKeyboardEscapeFromImage: PropTypes.func,\r\n};\r\n\r\nUserImagePickerContainer.defaultProps = {\r\n showErrors: _.noop,\r\n showUiBlocker: _.noop,\r\n staticImagePath: '',\r\n isForVNext: false,\r\n imageList: [],\r\n isAdCreatorEnabled: false,\r\n isAudienceAd: false,\r\n isForThumbnail: false,\r\n onKeyboardEscapeFromImage: _.noop,\r\n};\r\n\r\nexport default UserImagePickerContainer;\r\n","/* istanbul ignore file */\r\n\r\nimport React, { useState, useCallback } from 'react';\r\nimport { ConfirmDialog } from '@bingads-webui-campaign-react/confirm-dialog';\r\n\r\nconst useImageDelete = (props) => {\r\n const {\r\n i18n,\r\n imageRepository,\r\n userPhotoDataSource,\r\n imageList,\r\n isAudienceAd,\r\n } = props;\r\n\r\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\r\n const [isUiBlocked, setIsUiBlocked] = useState(false);\r\n const [deleteImageIdString, setDeleteImageIdString] = useState();\r\n const [imageDeleteErrorMessage, setImageDeleteErrorMessage] = useState('');\r\n\r\n const onDeleteImageConfirmed = useCallback(() => {\r\n setIsUiBlocked(true);\r\n\r\n return imageRepository.deleteImageAsync({\r\n IdString: deleteImageIdString,\r\n }).then(() => {\r\n userPhotoDataSource.reload();\r\n setShowDeleteConfirm(false);\r\n }).catch((response) => {\r\n setImageDeleteErrorMessage(response.errors.map(error => i18n.getString(`Error_ImageValidation_${error.Code}`))[0]);\r\n }).finally(() => {\r\n setIsUiBlocked(false);\r\n });\r\n }, [deleteImageIdString, i18n, imageRepository, userPhotoDataSource]);\r\n\r\n const onUserImageDelete = useCallback((imageIdString) => {\r\n setImageDeleteErrorMessage('');\r\n setShowDeleteConfirm(true);\r\n setDeleteImageIdString(imageIdString);\r\n\r\n const imageIdsUsed = [];\r\n\r\n if (Array.isArray(imageList)) {\r\n imageList.forEach((imageListItem) => {\r\n if (Array.isArray(imageListItem)) {\r\n imageListItem.forEach((imageListItemItem) => {\r\n imageIdsUsed.push(imageListItemItem.idString);\r\n });\r\n } else {\r\n imageIdsUsed.push(imageListItem.idString);\r\n }\r\n });\r\n }\r\n\r\n if (imageIdsUsed.indexOf(imageIdString) >= 0) {\r\n if (isAudienceAd) {\r\n setImageDeleteErrorMessage(i18n.getString('ImageExperience_Media_Delete_Error_UseInDraft'));\r\n } else {\r\n setImageDeleteErrorMessage(i18n.getString('ImageExperience_Multimedia_Delete_Error_UseInDraft'));\r\n }\r\n }\r\n }, [imageList, i18n, isAudienceAd]);\r\n\r\n const ImageDeleteConfirm = () => (\r\n \r\n 
\r\n {\r\n if (ev.keyCode === KEY_CODES.Enter) {\r\n onUpdateFinalUrl(ev);\r\n }\r\n }}\r\n placeholder={i18n.getString('ImageExperience_Edit_Url')}\r\n styles={{\r\n root: {\r\n display: 'inline-block',\r\n width: 300,\r\n marginLeft: 6,\r\n marginTop: 16,\r\n },\r\n field: {\r\n paddingRight: 8,\r\n paddingLeft: 32,\r\n },\r\n }}\r\n iconProps={{\r\n iconName: 'Search',\r\n styles: {\r\n root: {\r\n left: 8,\r\n right: 0,\r\n },\r\n },\r\n }}\r\n />\r\n {invalidURL &&\r\n
\r\n );\r\n}\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst maxRatio = 1.6; // width/height\r\n\r\nconst getStylesFuncGenerator = ({ itemHeight }) => () => ({\r\n container: {\r\n minWidth: 180,\r\n maxHeight: itemHeight,\r\n height: itemHeight,\r\n margin: '5px',\r\n\r\n // if width is exceeding limit, will show center part and hide left/right\r\n maxWidth: itemHeight * maxRatio,\r\n overflow: 'hidden',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n\r\n '& img': {\r\n maxHeight: itemHeight,\r\n },\r\n },\r\n});\r\n\r\nconst ImageSuggestionItemWrapper = ({ children, itemHeight }) => {\r\n const classes = useDefaultStyles(getStylesFuncGenerator({ itemHeight }));\r\n\r\n return (\r\n {i18n.getString('ImageExperience_EmptyURL')}
\r\n \r\n {alertString}\r\n
\r\n }\r\n \r\n {children}\r\n
\r\n );\r\n};\r\n\r\nImageSuggestionItemWrapper.propTypes = {\r\n children: PropTypes.element.isRequired,\r\n itemHeight: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default ImageSuggestionItemWrapper;\r\n","import _ from 'underscore';\r\n\r\nexport const isEmptyUrl = suggestion => suggestion && suggestion.emptyURL === true;\r\n\r\nexport const isInvalidUrl = suggestion => suggestion && suggestion.invalidURL === true;\r\n\r\nexport const isInProgress = suggestion => suggestion && suggestion.inProgress === true;\r\n\r\nexport const getAlertString = (suggestion, i18n) => {\r\n let alertString = '';\r\n if (suggestion) {\r\n if (isEmptyUrl(suggestion)) alertString = i18n.getString('ImageExperience_EmptyURL');\r\n else if (suggestion.invalidURL === true) alertString = i18n.getString('ImageExperience_InvalidURL');\r\n else if (suggestion.inProgress === true) alertString = i18n.getString('ImageExperience_InProgress');\r\n else if (suggestion.isTimeout === true) alertString = i18n.getString('ImageExperience_Timeout');\r\n else if (!suggestion.images || _.isEmpty(suggestion.images)) alertString = i18n.getString('ImageExperience_NoSuggestion');\r\n } else {\r\n alertString = i18n.getString('ImageExperience_NoSuggestion');\r\n }\r\n return alertString;\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _, { noop } from 'underscore';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { ImagePickerContainer } from '@bingads-webui-react/image-picker';\r\nimport { TextField } from '@bingads-webui-react/fabric-control';\r\nimport LoadingPlaceholder from '../../components/loading-place-holder';\r\nimport FinalUrlInput from '../../components/final-url-input';\r\nimport ImageSuggestionItemWrapper from './image-suggestion-item-wrapper';\r\nimport { getAlertString, isEmptyUrl, isInvalidUrl, isInProgress } from './alert-message';\r\n\r\nconst itemHeight = 180;\r\nconst maximumItemCount = 2000;\r\nconst imagePlaceHolder = () => \r\n \r\n {showSuggestionError &&\r\n \r\n
\r\n );\r\n};\r\n\r\nImageSuggestionPickerContainer.propTypes = {\r\n suggestion: PropTypes.shape({\r\n images: PropTypes.arrayOf(PropTypes.shape({\r\n fullUrl: PropTypes.string.isRequired,\r\n thumbnailUrl: PropTypes.string.isRequired,\r\n })),\r\n inProgress: PropTypes.bool,\r\n }),\r\n dataSource: PropTypes.shape({\r\n reload: PropTypes.func.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n imageRepository: PropTypes.shape({\r\n bulkSaveImagesByUrl: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onImageSelectedByUrl: PropTypes.func.isRequired,\r\n onUpdateSubdomainUrl: PropTypes.func.isRequired,\r\n logger: PropTypes.shape({\r\n trace: PropTypes.func,\r\n }).isRequired,\r\n enableSubdomain: PropTypes.bool,\r\n blockImagePickerOnly: PropTypes.bool,\r\n finalUrlDomain: PropTypes.string,\r\n onUpdateFinalUrlPrefix: PropTypes.func,\r\n onUpdateFinalUrl: PropTypes.func,\r\n finalUrl: PropTypes.string,\r\n finalUrlProtocol: PropTypes.string,\r\n initialSubdomain: PropTypes.string,\r\n onKeyboardEscapeFromImage: PropTypes.func,\r\n isLogo: PropTypes.bool,\r\n};\r\n\r\nImageSuggestionPickerContainer.defaultProps = {\r\n suggestion: {},\r\n enableSubdomain: false,\r\n blockImagePickerOnly: false,\r\n finalUrlDomain: null,\r\n finalUrl: '',\r\n finalUrlProtocol: '',\r\n onUpdateFinalUrlPrefix: noop,\r\n onUpdateFinalUrl: noop,\r\n initialSubdomain: null,\r\n onKeyboardEscapeFromImage: noop,\r\n isLogo: false,\r\n};\r\n\r\nexport default ImageSuggestionPickerContainer;\r\n","/* eslint-disable no-return-await */\r\nimport _ from 'underscore';\r\nimport { DataSourceState } from '@bingads-webui-react/image-picker';\r\nimport SocialMediaRepository from '../../util/social-media-repository';\r\n\r\nexport interface IImageItem {\r\n id: number;\r\n src: string;\r\n altText: string;\r\n textFields: string[];\r\n width?: number;\r\n height?: number;\r\n}\r\n\r\nexport enum FetchImageResult {\r\n Done = 'Done',\r\n NoAccountFound = 'NoAccountFound',\r\n NoImagesFound = 'NoImagesFound',\r\n}\r\n\r\ninterface IDataSource {\r\n subscribe: (cb: (...args: any[]) => void) => void;\r\n unsubscribe: (...args: any[]) => void;\r\n getData: () => {data: IImageItem[], hasMore: boolean}\r\n}\r\n\r\ninterface IOptions {\r\n repository: SocialMediaRepository;\r\n}\r\n\r\nexport default class SocialMediaDataSource implements IDataSource {\r\n callback: any;\r\n data: IImageItem[];\r\n repository: SocialMediaRepository;\r\n socialMediaAccounts: {Key: string, Value: string}[];\r\n\r\n constructor(options: IOptions) {\r\n this.repository = options.repository;\r\n this.data = [];\r\n this.socialMediaAccounts = [];\r\n }\r\n\r\n subscribe(callback: (...args: any[]) => void) {\r\n this.callback = callback;\r\n }\r\n\r\n unsubscribe() {\r\n this.callback = null;\r\n }\r\n\r\n reset() {\r\n this.data = [];\r\n\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n }\r\n\r\n // Loading, Done, Error\r\n excuteCallBackIfExsit(status: string) {\r\n if (this.callback) {\r\n this.callback(status);\r\n }\r\n }\r\n\r\n async fetchImageByAccount(socialMediaAccounts: {Key: string, Value: string}[]) {\r\n this.excuteCallBackIfExsit(DataSourceState.Loading);\r\n const { SocialMediaImages } = await this.repository.getSocialMediaImages(socialMediaAccounts);\r\n\r\n if (SocialMediaImages.length === 0) {\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n return FetchImageResult.NoImagesFound;\r\n }\r\n\r\n this.data = SocialMediaImages[0].Value.map(d => ({\r\n id: parseInt(_.uniqueId(), 10),\r\n src: d.Url,\r\n width: d.Width,\r\n height: d.Height,\r\n textFields: [],\r\n altText: '',\r\n }));\r\n this.excuteCallBackIfExsit(DataSourceState.Done);\r\n return FetchImageResult.Done;\r\n }\r\n\r\n async fetchImages(url: string): Promise\r\n \r\n
\r\n }\r\n {suggestion && suggestion.images && !_.isEmpty(suggestion.images) &&\r\n \r\n {alertString}\r\n
\r\n \r\n {i18n.getString('ImageExperience_ImageSuggestion_ImagesFound')}\r\n
\r\n }\r\n {!_.isEmpty(suggestion) && !showSuggestionError && enableSubdomain &&\r\n \r\n setNewSubdomain(input)}\r\n onBlur={e => subdomainChangeHandler(\r\n e, newSubdomain, setNewSubdomain,\r\n initialSubdomain, onUpdateSubdomainUrl\r\n )}\r\n disabled={blockImagePickerOnly}\r\n styles={{\r\n root: {\r\n display: 'inline-block',\r\n width: 260,\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 if (!dataSource) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {fetchStatus === FetchStatus.Done && }\r\n />}\r\n
\r\n );\r\n}\r\n\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport class Modal extends React.PureComponent {\r\n render() {\r\n if (this.props.isModalOpen) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n return null;\r\n }\r\n}\r\n\r\nModal.propTypes = {\r\n isModalOpen: PropTypes.bool,\r\n children: PropTypes.node.isRequired,\r\n className: PropTypes.string,\r\n};\r\n\r\nModal.defaultProps = {\r\n isModalOpen: false,\r\n className: '',\r\n};\r\n","import _ from 'underscore';\r\nimport { DataSourceState } from '@bingads-webui-react/image-picker'; // eslint-disable-line\r\nimport {\r\n hasMoreImagesToFetch,\r\n} from '@bingads-webui-campaign/media-repository';\r\n\r\nclass ImageSuggestionsDataSource {\r\n constructor({\r\n loadMoreByPageNumber,\r\n }) {\r\n this.loadMoreByPageNumber = loadMoreByPageNumber;\r\n\r\n this.currentData = [];\r\n this.currentPageNumber = 1;\r\n this.hasMore = false;\r\n }\r\n\r\n subscribe(callback) {\r\n this.callback = callback;\r\n }\r\n\r\n unsubscribe() {\r\n this.callback = null;\r\n }\r\n\r\n executeCallBackIfExist(status) {\r\n if (this.callback) {\r\n this.callback(status);\r\n }\r\n }\r\n\r\n loadMore() {\r\n this.executeCallBackIfExist(DataSourceState.Loading);\r\n this.currentPageNumber += 1;\r\n\r\n return this.loadMoreByPageNumber(this.currentPageNumber)\r\n .then((data) => {\r\n this.hasMore = hasMoreImagesToFetch(data);\r\n\r\n const moreData = data.Images.map(({ ImageUrl, ThumbnailUrl }) => ({\r\n src: ThumbnailUrl,\r\n fullSrc: ImageUrl,\r\n id: parseInt(_.uniqueId(), 10),\r\n }));\r\n\r\n this.currentData = this.currentData.concat(moreData);\r\n })\r\n .catch((e) => { throw e; })\r\n .finally(() => {\r\n this.executeCallBackIfExist(DataSourceState.Done);\r\n });\r\n }\r\n\r\n reload(data, hasMore) {\r\n this.currentPageNumber = 1;\r\n this.currentData = data;\r\n this.hasMore = hasMore;\r\n this.executeCallBackIfExist(DataSourceState.Done);\r\n }\r\n\r\n getData() {\r\n return { hasMore: this.hasMore, data: this.currentData };\r\n }\r\n}\r\n\r\nconst initializeImageSuggestionsDataSource = ({\r\n loadMoreByPageNumber,\r\n}) => (new ImageSuggestionsDataSource({ loadMoreByPageNumber }));\r\n\r\nexport { initializeImageSuggestionsDataSource };\r\n","import React, { useState, useEffect, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { SearchBox as SharedSearchBox } from '@bingads-webui-react/search-box';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\n\r\nconst SearchBox = (props) => {\r\n const [searchQuery, setSearchQuery] = useState('');\r\n const {\r\n onSearch,\r\n searchBoxPlacedHolderText,\r\n searchBoxAriaLabel,\r\n query,\r\n } = props;\r\n\r\n useEffect(() => {\r\n setSearchQuery(query);\r\n }, [query]);\r\n\r\n const handleClear = () => {\r\n setSearchQuery('');\r\n onSearch('');\r\n };\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n \r\n { setSearchQuery(newQuery); }}\r\n onSearch={() => onSearch(searchQuery)}\r\n value={searchQuery}\r\n placeholder={searchBoxPlacedHolderText}\r\n ariaLabel={searchBoxAriaLabel}\r\n />\r\n
\r\n );\r\n};\r\n\r\nSearchBox.propTypes = {\r\n query: PropTypes.string,\r\n onSearch: PropTypes.func.isRequired,\r\n searchBoxPlacedHolderText: PropTypes.string.isRequired,\r\n searchBoxAriaLabel: PropTypes.string.isRequired,\r\n};\r\n\r\nSearchBox.defaultProps = {\r\n query: '',\r\n};\r\n\r\nexport default SearchBox;\r\n","/* eslint-disable @typescript-eslint/no-shadow */\r\nimport { odata } from '@bingads-webui/http-util';\r\n// import { Promise } from 'bluebird';\r\n\r\nimport _ from 'underscore';\r\n\r\ninterface IOptions {\r\n cid: number;\r\n aid: number;\r\n oDataConfig: any;\r\n}\r\n\r\ninterface ISocialMediaImage {\r\n Url: string;\r\n PostTime: string;\r\n Width?: number;\r\n Height?: number;\r\n Text: string;\r\n}\r\n\r\nenum FetchStatus {\r\n Fetching = 'Fetching',\r\n Done = 'Done',\r\n}\r\n\r\ninterface IStatus {\r\n Status: FetchStatus;\r\n}\r\n\r\ninterface ISoicalMediaAccountsResponse extends IStatus {\r\n SocialMediaAccounts: {Key: string, Value: string}[]\r\n}\r\n\r\ninterface ISoicalMediaImagessResponse extends IStatus {\r\n SocialMediaImages: {Key: string, Value: ISocialMediaImage[]}[]\r\n}\r\n\r\nfunction poll\r\n {!isForVNext &&\r\n 0 ? 'disable-mouse' : ''}`}\r\n defaultSelectedIndex={pillControlIndex}\r\n onItemChange={({ name, value, index }) => this.onPillChange({ name, value, index })}\r\n items={this.pillControlItems}\r\n />\r\n }\r\n \r\n {\r\n this.shouldEnableWebsiteSuggestion() &&\r\n this.onImageSelected(image, C.imageSources.Existing)}\r\n isForVNext={isForVNext}\r\n isLazyLoadEnabled={isLazyLoadEnabled}\r\n i18n={i18n}\r\n imageList={imageList}\r\n isAdCreatorEnabled={this.props.isAdCreatorEnabled}\r\n isAudienceAd={this.props.isAudienceAd}\r\n onKeyboardEscapeFromImage={this.onKeyboardEscapeFromImage}\r\n />\r\n \r\n }\r\n {\r\n shouldShowStockImagePicker &&\r\n \r\n \r\n }\r\n {\r\n shouldShowStockImagePicker &&\r\n {\r\n const subdomainUrl = isEmpty(newSubdomain.trim()) ? this.props.finalUrl : extendPath(finalUrlDomain, newSubdomain);\r\n\r\n this.props.suggestionPoller.getLandingPageSuggestions({\r\n landingPageUrl: subdomainUrl,\r\n enableOfflinePollingDelay: false,\r\n additionalCallback: () => {\r\n this.setState({\r\n blockSuggestionImagePickerOnly: false,\r\n });\r\n },\r\n forceInternalScrapingService: !!newSubdomain,\r\n minimumResolution: {\r\n width: this.minimumSize[0],\r\n height: this.minimumSize[1],\r\n },\r\n });\r\n this.setState({\r\n blockSuggestionImagePickerOnly: true,\r\n forceInternalScrapingService: !!newSubdomain,\r\n subdomain: newSubdomain,\r\n fullUrlWithSubdomain: subdomainUrl,\r\n });\r\n }}\r\n finalUrl={this.props.finalUrl}\r\n finalUrlProtocol={this.props.finalUrlProtocol}\r\n enableSubdomain\r\n blockImagePickerOnly={this.state.blockSuggestionImagePickerOnly}\r\n onUpdateFinalUrlPrefix={this.props.onUpdateFinalUrlPrefix}\r\n onUpdateFinalUrl={this.props.onUpdateFinalUrl}\r\n finalUrlDomain={finalUrlDomain}\r\n initialSubdomain={this.state.subdomain}\r\n onKeyboardEscapeFromImage={this.onKeyboardEscapeFromImage}\r\n isLogo={isLogoEnabled && imageOption === C.imageOptionKeys.Logo}\r\n />\r\n }\r\n {\r\n shouldShowSocialMediaImagePicker && permissions.IsSocialMediaImagesEnabled &&\r\n this.showErrors([])}\r\n >\r\n {errMsg}\r\n \r\n ))\r\n }\r\n {\r\n !this.props.isMultimediaAd &&\r\n this.state.errors.map((errMsg, index) => (\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n {addImageLabelText()}\r\n
}\r\n \r\n \r\n {this.shouldEnableWebsiteSuggestion() ?\r\n i18n.getString(`ImageExperience_Add${imageOption}Description`) :\r\n i18n.getString(_TL_('Choose from your existing uploaded images, stock images, or upload a new file.'))}\r\n \r\n {this.props.isAudienceAd &&
\r\n {!isForVNext && \r\n {\r\n shouldShowSearchBox &&\r\n
\r\n {\r\n shouldShowStockImagePicker && permissions.IsStockPhotoFilterEnabled &&\r\n \r\n
\r\n }\r\n {\r\n shouldShowSearchBox &&\r\n \r\n
\r\n }\r\n {\r\n shouldShowSortBy &&\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n {i18n.getString('ImageExperience_SortBy')}\r\n \r\n \r\n this.stockPhotoDataSource.updateFilterQuery(filterQuery)\r\n }\r\n />\r\n
\r\n }\r\n {\r\n shouldShowExistingImagePicker &&\r\n \r\n \r\n
\r\n }\r\n \r\n \r\n {i18n.getString('AdCreator_WebsiteImage_OptIn_DisclaimerPartOne')}\r\n \r\n \r\n {i18n.getString('AdCreator_WebsiteImage_OptIn_DisclaimerPartTwo')}\r\n \r\n \r\n {i18n.getString('AdCreator_WebsiteImage_OptIn_DisclaimerPartThree')}\r\n \r\n \r\n {i18n.getString('ImageExperience_Review_Image_Policy')}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {i18n.getString('ImageExperience_ShutterStock_Disclaimer_Watermark')}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {i18n.getString('ImageExperience_ShutterStock_Disclaimer_Image_Policy')}\r\n \r\n \r\n \r\n {i18n.getString('ImageExperience_Review_Image_Policy')}\r\n \r\n
\r\n \r\n \r\n {i18n.getString('Audience_Campaign_Cancel_Label')}\r\n \r\n {\r\n isLogoEnabled && imageOption === C.imageOptionKeys.Logo &&\r\n this.props.setAspectRatioOption(option.key)}\r\n />\r\n }\r\n {\r\n this.props.isThumbsUpDownEnabled && feedbackActivity.trace('ThumbsDownSelected;Source=AddImage;')}\r\n onThumbsUpSignal={() => feedbackActivity.trace('ThumbsUpSelected;Source=AddImage;')}\r\n containerName=\"thumbsUpDownAddImage\"\r\n />\r\n }\r\n
\r\n );\r\n\r\n const addImageContentVNext = () => (\r\n \r\n {addImageContent()}\r\n
);\r\n\r\n const getImageSelectorPanelForVNext = () => (\r\n this.props.isImageSelectorDisplayed ?\r\n \r\n
\r\n \r\n \r\n this.onPillChange({ name, value, index })}\r\n items={this.pillControlItems}\r\n />\r\n \r\n {\r\n this.props.isAdCreatorEnabled &&\r\n \r\n }\r\n {\r\n shouldShowStockImagePicker &&\r\n \r\n \r\n }\r\n {\r\n shouldShowStockImagePicker &&\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n \r\n {`${i18n.getString('ImageExperience_AddImageDescription')} `}\r\n \r\n
\r\n \r\n {\r\n shouldShowSearchBox &&\r\n
\r\n {\r\n shouldShowStockImagePicker && permissions.IsStockPhotoFilterEnabled &&\r\n \r\n
\r\n }\r\n {\r\n shouldShowSearchBox &&\r\n \r\n
\r\n }\r\n {\r\n shouldShowSortBy &&\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n {i18n.getString('ImageExperience_SortBy')}\r\n \r\n \r\n this.stockPhotoDataSource.updateFilterQuery(filterQuery)\r\n }\r\n popoverContainer={this.dialogRef.current}\r\n />\r\n
\r\n }\r\n {\r\n shouldShowExistingImagePicker &&\r\n \r\n \r\n
\r\n }\r\n \r\n \r\n {i18n.getString('AdCreator_WebsiteImage_OptIn_DisclaimerPartOne')}\r\n \r\n \r\n {i18n.getString('AdCreator_WebsiteImage_OptIn_DisclaimerPartTwo')}\r\n \r\n \r\n {i18n.getString('AdCreator_WebsiteImage_OptIn_DisclaimerPartThree')}\r\n \r\n \r\n {i18n.getString('ImageExperience_Review_Image_Policy')}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {i18n.getString('ImageExperience_ShutterStock_Disclaimer_Watermark')}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {i18n.getString('ImageExperience_ShutterStock_Disclaimer_Image_Policy')}\r\n \r\n \r\n \r\n {i18n.getString('ImageExperience_Review_Image_Policy')}\r\n \r\n
\r\n \r\n {this.props.i18n.getString(this.props.isMultimediaAd ? 'ImageExperience_Additional_Disclaimer_Message_MultimediaAd' : 'ImageExperience_Additional_Disclaimer_Message')}\r\n
\r\n }\r\n \r\n );\r\n }\r\n}\r\n\r\nPreviewGeneral.propTypes = {\r\n image: PropTypes.instanceOf(ImageExperienceImage).isRequired,\r\n previewTexts: PropTypes.shape({\r\n shortHeadline: PropTypes.string,\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n url: PropTypes.string,\r\n callToAction: PropTypes.string,\r\n }).isRequired,\r\n customAspectRatioSettings: PropTypes.shape({\r\n imagePreviewHeight: PropTypes.number,\r\n }),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showShortHeadline: PropTypes.bool,\r\n showLongHeadline: PropTypes.bool,\r\n showDescription: PropTypes.bool,\r\n showGradient: PropTypes.bool,\r\n showAdditionalDisclaimer: PropTypes.bool,\r\n previewContentClassName: PropTypes.string.isRequired,\r\n additionalSetting: PropTypes.shape({\r\n previewTypeStringKey: PropTypes.string,\r\n imagePreviewHeight: PropTypes.number,\r\n }),\r\n showBusinessName: PropTypes.bool,\r\n showUrl: PropTypes.bool,\r\n showAction: PropTypes.bool,\r\n opacityChangeEnabled: PropTypes.bool,\r\n showAdsLabel: PropTypes.bool,\r\n isMultimediaAd: PropTypes.bool,\r\n isMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n isCombinedMsanAndMmaAspectRatios: PropTypes.bool,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n isMMAV2Enabled: PropTypes.bool,\r\n isBoost200x100ImageEnabled: PropTypes.bool,\r\n isBoostNewAspectRatioSupportEnabled: PropTypes.bool,\r\n isStoreAppProng: PropTypes.bool,\r\n isStoreAppSpotLight: PropTypes.bool,\r\n isStoreAppTransparentLogo: PropTypes.bool,\r\n isPMaxAspectRatiosV2Enabled: PropTypes.bool,\r\n};\r\n\r\nPreviewGeneral.defaultProps = {\r\n showShortHeadline: false,\r\n opacityChangeEnabled: false,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showGradient: false,\r\n customAspectRatioSettings: null,\r\n showAdditionalDisclaimer: false,\r\n additionalSetting: null,\r\n showBusinessName: true,\r\n showUrl: false,\r\n showAction: false,\r\n showAdsLabel: false,\r\n isMultimediaAd: false,\r\n isMultiMediaAdsPhase2Enabled: false,\r\n isCombinedMsanAndMmaAspectRatios: false,\r\n isAdCreatorEnabled: false,\r\n isMMAV2Enabled: false,\r\n isBoost200x100ImageEnabled: false,\r\n isBoostNewAspectRatioSupportEnabled: false,\r\n isStoreAppProng: false,\r\n isStoreAppSpotLight: false,\r\n isStoreAppTransparentLogo: false,\r\n isPMaxAspectRatiosV2Enabled: false,\r\n};\r\n","\r\nimport React from 'react';\r\nimport _ from 'underscore';\r\nimport { PreviewGeneral } from './preview-general';\r\nimport C from '../constants';\r\n\r\nconst getPreview = (\r\n image,\r\n previewTexts,\r\n i18n,\r\n isCurrent,\r\n isMultimediaAd = false,\r\n isMultiMediaAdsPhase2Enabled = false,\r\n isAdCreatorEnabled = false\r\n) => { // eslint-disable-line max-len\r\n let propsToPass = {\r\n image,\r\n previewTexts,\r\n i18n,\r\n isCurrent,\r\n opacityChangeEnabled: isMultimediaAd,\r\n isMultimediaAd,\r\n isMultiMediaAdsPhase2Enabled,\r\n isAdCreatorEnabled,\r\n };\r\n\r\n const aspectRatios = isMultimediaAd ?\r\n C.getMmaAspectRatios() : C.aspectRatios;\r\n\r\n propsToPass = _.defaults(\r\n propsToPass,\r\n aspectRatios[image.Type].previewSettings\r\n );\r\n\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n\r\nMultiImageGeneral.propTypes = {\r\n images: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceImage)).isRequired,\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n previewType: PropTypes.string.isRequired,\r\n};\r\n\r\n","import { getGenericImageObjectAsync } from '@bingads-webui-campaign/image-experience-utils';\r\n\r\nexport default getGenericImageObjectAsync;\r\n","/* eslint-disable max-len */\r\n\r\nimport React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { Carousel } from '@bingads-webui-react/primitive-unthemed';\r\nimport { getPreview } from '../image-preview/preview-factory';\r\nimport { MultiImageGeneral } from '../image-preview/multi-image-general';\r\nimport getCroppedImage from '../util/get-cropped-image';\r\nimport getGenericImageObjectAsync from '../util/get-generic-image-object';\r\nimport { ImageExperienceImage } from '../model/image-experience-image';\r\nimport C from '../constants';\r\n\r\nconst CarouselPreview133x100 = (props) => {\r\n const [index, setIndex] = useState(0);\r\n const [multiImageList, setMultiImageList] = useState([]);\r\n\r\n const handleSelect = (selectedIndex) => {\r\n setIndex(selectedIndex);\r\n };\r\n\r\n const imagesToSetup = [\r\n props.genericImage,\r\n ...props.placeHolderImages,\r\n ];\r\n\r\n const setupPromises = _.map(imagesToSetup, imageToSetup => getGenericImageObjectAsync(imageToSetup).then((imageObj) => {\r\n const croppedImages = getCroppedImage({ originalImageToCrop: imageObj });\r\n\r\n return croppedImages;\r\n }));\r\n\r\n Promise.all(setupPromises).then(([defaultImages, placeHolderImages1, placeHolderImages2]) => {\r\n const newMultiImageList = [];\r\n newMultiImageList.push(props.image);\r\n const placeHolderImages = [placeHolderImages1 || defaultImages, placeHolderImages2 || defaultImages];\r\n\r\n placeHolderImages.forEach((imageObjs, idx) => {\r\n const image133x100 = _.find(imageObjs, img => img.type === C.aspectRatios.Image133x100.type);\r\n const cloned = image133x100.clone();\r\n\r\n cloned.id = cloned.id ? cloned.id + idx : idx;\r\n newMultiImageList.push(cloned);\r\n });\r\n\r\n if (multiImageList.length < 3) {\r\n setMultiImageList(newMultiImageList);\r\n } else if (\r\n multiImageList[0].cropSettings.SourceHeight !== newMultiImageList[0].cropSettings.SourceHeight ||\r\n multiImageList[0].cropSettings.SourceWidth !== newMultiImageList[0].cropSettings.SourceWidth ||\r\n multiImageList[0].cropSettings.SourceX !== newMultiImageList[0].cropSettings.SourceX ||\r\n multiImageList[0].cropSettings.SourceY !== newMultiImageList[0].cropSettings.SourceY\r\n ) {\r\n setMultiImageList(newMultiImageList);\r\n }\r\n });\r\n\r\n return (\r\n \r\n {this.props.i18n.getString(this.previewTypeStringKey)}\r\n
\r\n \r\n
\r\n );\r\n };\r\n return onRenderPlacement;\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n useImageExperienceAdPreviewModel,\r\n AdPreviewSinglePlacementLayout,\r\n getPlacementListMetaDataByImageType,\r\n} from '@bingads-webui-campaign-react/unified-ad-preview-library-cmui';\r\n\r\nimport { ImageExperienceImage } from '../model/image-experience-image';\r\nimport { getOnRenderPlacement } from './unified-placement-render';\r\n\r\nexport const UnifiedPreviewGeneral = (props) => {\r\n const {\r\n image: editingImage, // ImageExperienceImage\r\n adPreviewConfig,\r\n previewContainerClassName,\r\n } = props;\r\n\r\n // filter the placement config, only keep the placemen type corresponding to the editing image type\r\n const finalPlacementConfig = useMemo(() => {\r\n const editingPlacementTypes = _.chain(getPlacementListMetaDataByImageType([editingImage.type]))\r\n .map('placementType')\r\n .uniq()\r\n .value();\r\n const filteredConfig = _.chain(adPreviewConfig.placementConfig)\r\n .map(({ placementSetName, placementTypes }) => ({\r\n placementSetName,\r\n placementTypes: _.intersection(placementTypes, editingPlacementTypes),\r\n }))\r\n .filter(({ placementTypes }) => !_.isEmpty(placementTypes))\r\n // keep only one placement type for each placement set\r\n .map(({ placementSetName, placementTypes }) => ({ placementSetName, placementTypes: [_.first(placementTypes)] }))\r\n .value();\r\n return filteredConfig;\r\n }, [editingImage.type, adPreviewConfig]);\r\n\r\n const {\r\n multiImagePlacementSets: placementSets,\r\n onUpdateImageExperienceImageList,\r\n } = useImageExperienceAdPreviewModel(finalPlacementConfig);\r\n\r\n useEffect(() => {\r\n onUpdateImageExperienceImageList([[editingImage]]);\r\n }, [editingImage, onUpdateImageExperienceImageList]);\r\n\r\n const onRenderPlacement = useMemo(() => {\r\n const placementPreviewProps = _.extend({}, _.pick(\r\n props,\r\n 'previewTexts',\r\n 'logo',\r\n 'hotspots',\r\n 'i18n',\r\n 'isMultimediaAd',\r\n 'isMultiMediaAdsPhase2Enabled',\r\n 'isAdCreatorEnabled',\r\n //\r\n // todo: check the props, are they required?\r\n 'dismissText',\r\n 'permissions'\r\n ));\r\n\r\n return getOnRenderPlacement(placementPreviewProps, previewContainerClassName);\r\n }, [previewContainerClassName, props]);\r\n\r\n const placementList = useMemo(() => {\r\n // should only have one placement set\r\n const list = _.chain(placementSets).map(placementSet => placementSet.placementList).flatten().value();\r\n return list;\r\n }, [placementSets]);\r\n\r\n const placementData = useMemo(() => _.find(placementList, ({ placementMeta }) => placementMeta !== undefined), [placementList]);\r\n\r\n return (\r\n \r\n {previewStringKey ? i18n.getString(previewStringKey) : ''}\r\n
\r\n {\r\n showAdditionalDisclaimer && !isMultiMediaAdsPhase2Enabled &&\r\n \r\n {i18n.getString(isMultimediaAd ? 'ImageExperience_Additional_Disclaimer_Message_MultimediaAd' : 'ImageExperience_Additional_Disclaimer_Message')}\r\n
\r\n }\r\n \r\n \r\n {this.props.i18n.getString('Audience_Campaign_Save_Label')}\r\n \r\n \r\n {this.props.i18n.getString('Audience_Campaign_Cancel_Label')}\r\n \r\n
\r\n );\r\n\r\n const imageCroppedInEdit = () => {\r\n let desiredBoxHeight = defaultCropBoxHeight;\r\n\r\n if (((desiredBoxHeight * this.state.image.Width) / this.state.image.Height) > maxCropBoxWidth) {\r\n desiredBoxHeight = Math.round((maxCropBoxWidth * this.state.image.Height) / this.state.image.Width);\r\n }\r\n\r\n return (\r\n { e.preventDefault(); return false; }}>\r\n
\r\n );\r\n };\r\n\r\n const editDialogTitle = () => (\r\n this.props.i18n.getString(\r\n this.props.imageOption === C.imageOptionKeys.Logo ?\r\n 'ImageExperience_Edit_Logo_Template' : 'ImageExperience_Edit_Image_Template',\r\n {\r\n ratio: this.props.i18n.getString(this.state.aspectRatios[this.state.image.Type].stringKey),\r\n }\r\n )\r\n );\r\n\r\n const imageEditDescription = () => (\r\n \r\n {this.props.i18n.getString(this.state.aspectRatios[this.state.image.Type].stringKey)}\r\n
\r\n \r\n {this.props.imageOption === C.imageOptionKeys.Logo ?\r\n this.props.i18n.getString('ImageExperience_Logo_ReCrop_Description') :\r\n this.props.i18n.getString('ImageExperience_Image_ReCrop_Description')}\r\n
\r\n );\r\n\r\n const modalDialogTitle = () => (\r\n \r\n {editDialogTitle()}\r\n
);\r\n\r\n const modalDialogCancelButton = () => (\r\n \r\n {!this.props.isForVNext && modalDialogTitle()}\r\n {!this.props.isForVNext && modalDialogCancelButton()}\r\n {this.props.isForVNext && imageEditDescription()}\r\n
);\r\n\r\n const editImageContentVNext = () => (\r\n \r\n
\r\n {this.props.isForVNext && imageEditActions()}\r\n \r\n {!this.props.isForVNext && imageEditDescription()}\r\n {imageCroppedInEdit()}\r\n {!this.props.isForVNext && imageEditActions()}\r\n
\r\n \r\n
\r\n \r\n {this.props.i18n.getString('ImageExperience_Ad_Preview_Title')}\r\n
\r\n {\r\n this.props.isImageAdExtensionMode && this.state.image.type === C.aspectRatios.Image133x100.type &&\r\n \r\n \r\n \r\n { this.props.i18n.getString('AdExtensions_Image_Preview_ClaimText') }\r\n \r\n
\r\n \r\n {editImageContent()}\r\n
);\r\n\r\n if (this.props.isImageEditDisplayed && this.state.image && this.state.image.src) {\r\n return this.props.isForVNext ?\r\n \r\n {this.props.i18n.getString(C.aspectRatios[this.props.type].stringKey)}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nPlaceHolderImage.propTypes = {\r\n type: PropTypes.string.isRequired,\r\n onAddImage: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content, no-script-url */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport {\r\n Dropdown,\r\n MenuItem,\r\n} from '@bingads-webui-react/primitive-unthemed';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\nimport { ImageExperienceImage } from '../model/image-experience-image';\r\nimport { PlaceHolderImage } from './place-holder-image';\r\nimport C from '../constants';\r\nimport { showDisabledReasonCallout, hideDisabledReasonCallout } from '../util/callout-disabled-edit';\r\n\r\nexport class ImageListView extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.disabledContainerRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n $('.not-recroppable').on('mouseenter', this.showDisabledReasonHandler);\r\n $('.not-recroppable').on('click', this.showDisabledReasonHandler);\r\n $('.not-recroppable').on('mouseleave', this.hideDisabledReasonHandler);\r\n }\r\n\r\n onEditSelect = (eventKey, event) => {\r\n const imageType = event.target.parentNode.parentNode.dataset.imagetype;\r\n\r\n switch (eventKey) {\r\n case 'replace':\r\n this.props.onReplaceImage(imageType);\r\n break;\r\n\r\n case 're-crop':\r\n default:\r\n this.props.onReCropImage(imageType);\r\n break;\r\n }\r\n };\r\n\r\n onAddImage = (imageType) => {\r\n this.props.onReplaceImage(imageType);\r\n };\r\n\r\n showDisabledReasonHandler = (event) => {\r\n if (event.target.className !== 'not-recroppable disabled') {\r\n return;\r\n }\r\n const { i18n } = this.props;\r\n showDisabledReasonCallout(i18n, event, this.disabledContainerRef.current);\r\n };\r\n\r\n hideDisabledReasonHandler = () => {\r\n hideDisabledReasonCallout(this.disabledContainerRef.current);\r\n };\r\n\r\n render() {\r\n const {\r\n isMultimediaAd,\r\n permissions,\r\n readOnly,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isLinkedInAd,\r\n isPMaxAspectRatiosV2Enabled,\r\n isAdPreviewRefreshEnabled,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n {\r\n !this.props.isForVNext && (\r\n \r\n
\r\n \r\n \r\n \r\n {this.props.i18n.getString('ImageExperience_Image_List_Label')}\r\n \r\n
\r\n \r\n {\r\n C.getImageTypesWithOrder(isMultimediaAd, isCombinedMsanAndMmaAspectRatios, isStoreAppProng, isStoreAppSpotLight, isStoreAppTransparentLogo, isLinkedInAd, isPMaxAspectRatiosV2Enabled, isAdPreviewRefreshEnabled).map((imageType) => {\r\n const imageItem =\r\n _.find(this.props.imageList, imageListImg => imageListImg.Type === imageType);\r\n\r\n if (imageItem) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n \r\n \r\n { !this.props.isForVNext && this.props.i18n.getString('Audience_Campaign_Crud_Ad_EditAd')}\r\n \r\n \r\n \r\n {this.props.i18n.getString('ImageEditor_CropImage')}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {this.props.i18n.getString(C.aspectRatios[imageItem.Type].stringKey)}\r\n
\r\n \r\n {i18n.getString('Disabled_System_Generated_Image')}\r\n
\r\n ,\r\n element\r\n );\r\n }\r\n};\r\n\r\nexport const hideDisabledReasonCallout = (element) => {\r\n if (element) {\r\n ReactDOM.unmountComponentAtNode(element);\r\n }\r\n};\r\n","import C from '../constants';\r\n\r\n// Only for placement level, editingImage will have Type field\r\nexport const getEditingMediaProps = ({\r\n editingImage: model,\r\n isMultimediaAd,\r\n imageOption = C.defaultImageOption,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled = false,\r\n isLinkedInAd = false,\r\n isUnifiedAppCampaignWindowsStore = false,\r\n selectedImageType,\r\n isPMaxAspectRatiosV2Enabled = false,\r\n}) => {\r\n const editingMedia = model || {};\r\n const imageType = editingMedia.Type;\r\n const orginalAsset = imageType ? editingMedia.BaseImage : editingMedia;\r\n\r\n const { EffectSettings, CropSettings, BaseImage } = editingMedia;\r\n const minCropSize = C.getMinimumSizeForImage(\r\n selectedImageType || imageType,\r\n isMultimediaAd,\r\n imageOption,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n false, /* isDisplayAds */\r\n false, /* isPortraitImage */\r\n false, /* isBoost200x100ImageEnabled */\r\n false, /* isBoostNewAspectRatioSupportEnabled */\r\n false, /* isStoreAppProng */\r\n false, /* isStoreAppSpotLight */\r\n false, /* isStoreAppTransparentLogo */\r\n isLinkedInAd,\r\n isUnifiedAppCampaignWindowsStore,\r\n isPMaxAspectRatiosV2Enabled\r\n );\r\n\r\n return {\r\n // settings such as crop and effect are actually applied to original image\r\n // so here except Type, others in baseImage should come from original image.\r\n baseImage: {\r\n Type: editingMedia.Type,\r\n Src: orginalAsset.Src,\r\n Width: orginalAsset.Width,\r\n Height: orginalAsset.Height,\r\n AltText: editingMedia.AltText,\r\n },\r\n effectSettings: EffectSettings,\r\n cropSettings: CropSettings,\r\n minCropSize,\r\n maxCropBox: imageType ? BaseImage.CropSettings : null,\r\n };\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport C from './constants';\r\nimport { ImageExperienceImage } from './model/image-experience-image';\r\n\r\n// { VideoMedia16X9Thumbnail: ImageExperienceImage, ... }\r\nexport const CustomThumbnailRecordType = PropTypes.shape(_.values(C.videoTypeToThumbnailType)\r\n .reduce((acc, current) => {\r\n acc[current] = PropTypes.instanceOf(ImageExperienceImage);\r\n return acc;\r\n }, {}));\r\n\r\nexport const CaptionType = PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.string,\r\n Name: PropTypes.string,\r\n Lcid: PropTypes.number.isRequired,\r\n Format: PropTypes.string.isRequired,\r\n FileExtension: PropTypes.string,\r\n File: PropTypes.instanceOf(File),\r\n}));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport class OutlookPreview extends React.PureComponent {\r\n render() {\r\n const previewSpecificClass =\r\n this.props.isMobilePreview ? 'mobile-web-outlook' : 'web-desktop-outlook';\r\n const previewContentClassName =\r\n `${previewSpecificClass} responsive-ad-preview-content`;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nOutlookPreview.propTypes = {\r\n previewTexts: PropTypes.shape({\r\n shortHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isMobilePreview: PropTypes.bool.isRequired,\r\n};\r\n\r\n","export const panelStyle = {\r\n '& .ms-Panel-main': {\r\n width: '90%',\r\n '@media screen and (min-width: 1377px)': {\r\n width: 1377,\r\n },\r\n },\r\n};\r\n\r\nexport const previewHeaderStyle = {\r\n '& .preview-header': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n\r\n '& .ad-preview-title.with-additional-tag': {\r\n marginRight: 8,\r\n display: 'inline-block',\r\n flexGrow: 0,\r\n },\r\n\r\n '& .flex-grow': {\r\n flexGrow: 1,\r\n },\r\n\r\n '& .ad-preview-actions.inline-title': {\r\n display: 'inline-block',\r\n flexGrow: 0,\r\n '& > button': {\r\n marginRight: 8,\r\n },\r\n },\r\n },\r\n};\r\n\r\nexport const previewContentStyle = {\r\n '& .new-responsive-ad-preview-container': {\r\n flexGrow: 1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n '& a.responsive-ad-preview-content': {\r\n display: 'block',\r\n position: 'relative',\r\n boxSizing: 'content-box',\r\n overflow: 'hidden',\r\n boxShadow: '0px 0.511px 1.533px rgb(0 0 0 / 10%), 0px 2.72533px 6.132px rgb(0 0 0 / 13%)',\r\n borderRadius: 5.11,\r\n background: '#fff',\r\n margin: 'auto',\r\n top: 0,\r\n },\r\n '& .additional-disclaimer': {\r\n position: 'static',\r\n },\r\n },\r\n};\r\n","import {\r\n editImageCommonStyle,\r\n playPauseCarouselStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { panelStyle, previewHeaderStyle, previewContentStyle } from './preview-carousel-base-style';\r\n\r\nconst placementContainerStyle = {\r\n display: 'flex',\r\n position: 'relative',\r\n\r\n '&.disabled': {\r\n opacity: 0.5,\r\n },\r\n};\r\n\r\nexport const getPreviewCarouselStyle = (_, theme) => ({\r\n ...playPauseCarouselStyle(theme),\r\n gridPreviewContainer: {\r\n ...editImageCommonStyle(),\r\n\r\n ...panelStyle,\r\n '& .placements-grid-preview-cell': {\r\n height: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...previewHeaderStyle,\r\n ...previewContentStyle,\r\n '& .action-label': {\r\n textAlign: 'center',\r\n fontSize: 16,\r\n lineHeight: 2,\r\n },\r\n },\r\n },\r\n\r\n placementContainerRoot: {\r\n ...placementContainerStyle,\r\n\r\n // move the placement up a little bit to align with the original style\r\n '& > div:first-child': {\r\n top: '-5%',\r\n },\r\n },\r\n\r\n placementContainerRootGridView: {\r\n ...placementContainerStyle,\r\n },\r\n});\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport $ from 'jquery';\r\nimport { Carousel } from '@bingads-webui-react/primitive-unthemed';\r\nimport { ActionButton } from '@bingads-webui-react/fabric-control';\r\nimport { AdPlacementsGridPreviewPanel } from '@bingads-webui-campaign-react/ad-placements-grid-preview';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { ConditionalTooltipHost } from '@bingads-webui-campaign-react/conditional-tooltip-host';\r\nimport {\r\n attachAIGenAssetContextualAttribute,\r\n} from '@bingads-webui-campaign/responsive-search-ad-strength';\r\nimport { PlayPauseButtons, isPlayPausePreviewImageEnabled } from '@bingads-webui-campaign-react/play-pause-buttons';\r\n\r\nimport { PreviewGeneral } from './preview-general';\r\nimport C from '../constants';\r\nimport { OutlookPreview } from './outlook-preview';\r\nimport getGenericImageObjectAsync from '../util/get-generic-image-object';\r\nimport getCroppedImage from '../util/get-cropped-image';\r\nimport { getPreviewCarouselStyle } from '../../style/js/mma-msan-preview-carousel-style';\r\nimport { ImageExperienceImage } from '../model/image-experience-image';\r\n\r\nexport class UnStyledMMAPreviewCarousel extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.isMMAV2Enabled = this.props.isMMAV2Enabled;\r\n this.state = {\r\n index: 0,\r\n direction: null,\r\n defaultImages: [],\r\n imageListForDisplay: [],\r\n isViewAllPanelOpen: false,\r\n aspectRatiosOrder: this.isMMAV2Enabled ? C.audienceMMAV2AspectRatiosWithoutOriginalImage : C.multimediaAdinMSANRatios,\r\n auto: this.props.enableAutoRotate,\r\n };\r\n\r\n this.props.activityLogger.signal('MMA: preview opened.', 'responsive ad editor');\r\n this.aspectRatios = this.isMMAV2Enabled ?\r\n _.pick(C.aspectRatiosForMMAV2, C.audienceMMAV2AspectRatiosWithoutOriginalImage) :\r\n _.pick(C.aspectRatios, C.multimediaAdinMSANRatios);\r\n\r\n if (props.isBoost200x100ImageEnabled || props.isBoostNewAspectRatioSupportEnabled) {\r\n this.aspectRatios.Image200x100 = C.aspectRatiosForBoost200x100.Image200x100;\r\n this.state.aspectRatiosOrder = C.boostMultimediaAdinMSANRatios;\r\n\r\n if (props.isBoostNewAspectRatioSupportEnabled) {\r\n _.extend(this.aspectRatios, C.aspectRatiosForBoostNewSupport);\r\n this.state.aspectRatiosOrder = C.boostMultimediaAdinMSANRatiosNewSupport;\r\n }\r\n }\r\n\r\n this.isRecommendationTypeImproveMultiMediaAdsEnabled = true;\r\n\r\n if (props.imageList.length === 0) {\r\n this.setupImagesAsync();\r\n }\r\n\r\n this.adPreviewIndexToTitle = this.setupAdPreviewIndexToTitlesMap('ImageExperience_Ad_Preview_Title_Template');\r\n this.adPreviewIndexToTitleInViewAll =\r\n this.setupAdPreviewIndexToTitlesMap('ImageExperience_Ad_Preview_Ratio_Title_Template');\r\n }\r\n\r\n static getDerivedStateFromProps(nextProps, prevState) {\r\n let imageListForDisplay = nextProps.imageList.length > 0\r\n ? nextProps.imageList : prevState.defaultImages;\r\n\r\n imageListForDisplay = _.filter(imageListForDisplay, image => image.Type !== 'OriginalImage');\r\n\r\n imageListForDisplay = _.sortBy(\r\n imageListForDisplay,\r\n image => prevState.aspectRatiosOrder.indexOf(image.Type)\r\n );\r\n\r\n return {\r\n imageListForDisplay,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setAutoRotate();\r\n }\r\n\r\n componentDidUpdate() {\r\n if (_.result(_.first(this.state.imageListForDisplay), 'isRecommendedImage')) {\r\n // Registers AI generated asset contextual attribute popup to listen for key/mouse events\r\n const element = $('.iconba.iconba-Lightbulb.new-preview-carousel');\r\n attachAIGenAssetContextualAttribute(_.extend({\r\n element,\r\n i18n: this.props.i18n,\r\n improveMMAOption: { type: 'Image' },\r\n newI18n: this.props.newI18n,\r\n }));\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.clearAutoRotateListener();\r\n }\r\n\r\n onAddAspectRatio = (e) => {\r\n const index = this.getEditingImageIndex(e);\r\n const {\r\n imageListForDisplay,\r\n } = this.state;\r\n\r\n this.props.activityLogger.signal('MMA: include button clicked', 'responsive ad editor');\r\n this.props.onAddAspectRatio(imageListForDisplay[index].type);\r\n };\r\n\r\n onCrop = (e) => {\r\n const index = this.getEditingImageIndex(e);\r\n const {\r\n imageListForDisplay,\r\n } = this.state;\r\n\r\n this.props.activityLogger.signal('MMA: re-crop clicked', 'responsive ad editor');\r\n\r\n if (this.props.isAdCreatorEnabled) {\r\n this.setState({ isViewAllPanelOpen: false }, () => {\r\n this.props.onCropImage(imageListForDisplay[index]);\r\n });\r\n } else {\r\n this.props.onCropImage(imageListForDisplay[index]);\r\n }\r\n };\r\n\r\n onRemoveAspectRatio = (e) => {\r\n const index = this.getEditingImageIndex(e);\r\n const {\r\n imageListForDisplay,\r\n } = this.state;\r\n\r\n this.props.activityLogger.signal('MMA: exclude button clicked', 'responsive ad editor');\r\n\r\n this.props.onRemoveAspectRatio(imageListForDisplay[index].type);\r\n };\r\n\r\n setAutoRotate = () => {\r\n // disable auto-rotate in test\r\n /* istanbul ignore if */\r\n if (window.e2eTestEnvironment) {\r\n return;\r\n }\r\n\r\n if (this.state.auto === false) {\r\n return;\r\n }\r\n\r\n this.clearAutoRotateListener();\r\n const { index, imageListForDisplay } = this.state;\r\n\r\n const indicators = document.querySelector('.new-preview-carousel-container .carousel-indicators');\r\n\r\n // make sure we have the correct preview to rotate\r\n const previewCount = (indicators && indicators.childElementCount) || imageListForDisplay.length;\r\n let nextIndex = index + 1;\r\n\r\n /* istanbul ignore next */\r\n if (nextIndex >= previewCount) {\r\n nextIndex = 0;\r\n }\r\n\r\n this.autoRotateListener = setTimeout(() => {\r\n /* istanbul ignore next */\r\n if (this.props.enableAutoRotate) {\r\n this.setState({\r\n index: nextIndex,\r\n direction: 'next',\r\n });\r\n }\r\n\r\n /* istanbul ignore next */\r\n this.setAutoRotate();\r\n }, 3000);\r\n };\r\n\r\n getEditingImageIndex(e) {\r\n return _.isUndefined(e.target.dataset.index)\r\n ? this.state.index : parseInt(e.target.dataset.index, 10);\r\n }\r\n\r\n setupAdPreviewIndexToTitlesMap(templateKey) {\r\n const adPreviewIndexToTitle = [];\r\n const responsivePreviewsTitles =\r\n _.map(this.state.aspectRatiosOrder, typeKey => this.props.i18n.getString(\r\n templateKey,\r\n {\r\n // eslint-disable-next-line\r\n ratio: this.props.i18n.getString(this.aspectRatios[typeKey].stringKey),\r\n }\r\n ));\r\n\r\n return adPreviewIndexToTitle.concat(responsivePreviewsTitles);\r\n }\r\n\r\n setupImagesAsync() {\r\n const imagesToSetup = [\r\n this.props.genericImage,\r\n ];\r\n const setupPromises =\r\n _.map(imagesToSetup, imageToSetup => getGenericImageObjectAsync(imageToSetup)\r\n .then((imageObj) => {\r\n const croppedImages = getCroppedImage({\r\n originalImageToCrop: imageObj,\r\n isMultimediaAdinMSANEnabled: true,\r\n isMMAV2Enabled: this.isMMAV2Enabled,\r\n isBoost200x100ImageEnabled: this.props.isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled: this.props.isBoostNewAspectRatioSupportEnabled,\r\n });\r\n\r\n return croppedImages;\r\n }));\r\n\r\n Promise.all(setupPromises).then(([defaultImages]) => {\r\n this.setState({\r\n defaultImages,\r\n });\r\n });\r\n }\r\n\r\n getAdPreviewTitle() {\r\n const { index } = this.state;\r\n\r\n return this.adPreviewIndexToTitle[index];\r\n }\r\n\r\n getAdPreviewHeaderInternal({ title, index, enableActionBtn }) {\r\n const { imageListForDisplay } = this.state;\r\n const selectedImage = imageListForDisplay[index];\r\n\r\n /* istanbul ignore if */\r\n if (!selectedImage) {\r\n return null;\r\n }\r\n\r\n const isSelectedImageIncluded = _.result(selectedImage, 'isIncluded');\r\n const minSize = selectedImage && this.aspectRatios[selectedImage.type].minSize;\r\n const hideActionBtn = !enableActionBtn\r\n || (!isSelectedImageIncluded && this.isInvalidImageSize(selectedImage, minSize));\r\n\r\n return (\r\n \r\n
\r\n \r\n {this.props.i18n.getString('Entity_Ads')}\r\n
\r\n\r\n {this.props.previewTexts.businessName}\r\n
\r\n {\r\n !this.props.isMobilePreview &&\r\n \r\n }\r\n \r\n {this.props.previewTexts.shortHeadline}\r\n
\r\n {\r\n !this.props.isMobilePreview &&\r\n \r\n *\r\n
\r\n }\r\n \r\n {this.props.previewTexts.description}\r\n
\r\n \r\n \r\n {\r\n this.props.isMobilePreview ?\r\n this.props.i18n.getString('Audience_Campaign_Ad_Preview_MobileWebOutlook') :\r\n this.props.i18n.getString('Audience_Campaign_Ad_Preview_WebDesktopOutlook')\r\n }\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n getAdPreviewHeader({ enableActionBtn }) {\r\n const title = this.getAdPreviewTitle();\r\n\r\n return this.props.isAdCreatorEnabled ?\r\n \r\n {title}\r\n
\r\n \r\n {!hideActionBtn &&\r\n \r\n {this.getActionButtons({\r\n isIncluded: isSelectedImageIncluded,\r\n index,\r\n })}\r\n
\r\n }\r\n \r\n {title}\r\n
\r\n );\r\n }\r\n\r\n getActionButtons({ isIncluded, index }) {\r\n const { isAdCreatorEnabled } = this.props;\r\n const { imageListForDisplay } = this.state;\r\n const selectedImage = imageListForDisplay[index];\r\n\r\n if (isIncluded) {\r\n const editButtonTextKey = isAdCreatorEnabled\r\n ? 'ImageExperience_Edit_Aspect_Ratio' : 'ImageEditor_CropImage';\r\n\r\n return (\r\n \r\n {!isSelectedImageIncluded ?\r\n (\r\n \r\n {validationMsgElement}\r\n {!validationMsgElement && !hideActionButtons &&\r\n this.getActionButtons({ isIncluded: isSelectedImageIncluded, index })\r\n }\r\n \r\n ) :\r\n (!hideActionButtons\r\n && this.getActionButtons({ isIncluded: isSelectedImageIncluded, index }))\r\n }\r\n
\r\n );\r\n }\r\n\r\n setAutoState = (target) => {\r\n if (this.state.auto !== target) {\r\n if (target === false) {\r\n this.setState({\r\n auto: target,\r\n }, () => this.clearAutoRotateListener());\r\n return;\r\n }\r\n this.setState({\r\n auto: target,\r\n }, () => this.setAutoRotate());\r\n }\r\n };\r\n\r\n clearAutoRotateListener = () => {\r\n if (this.autoRotateListener) {\r\n clearTimeout(this.autoRotateListener);\r\n this.autoRotateListener = null;\r\n }\r\n };\r\n\r\n stop = () => {\r\n this.setAutoState(false);\r\n };\r\n\r\n start = () => {\r\n this.setAutoState(true);\r\n };\r\n\r\n isInvalidImageSize(image, minSize) {\r\n if (!image) {\r\n return false;\r\n }\r\n\r\n let widthToCheck = image.Width;\r\n let heightToCheck = image.Height;\r\n\r\n if (image.BaseImage\r\n && image.BaseImage.CropSettings\r\n && image.BaseImage.CropSettings.SourceWidth > 0\r\n && image.BaseImage.CropSettings.SourceHeight > 0) {\r\n widthToCheck = image.BaseImage.CropSettings.SourceWidth;\r\n heightToCheck = image.BaseImage.CropSettings.SourceHeight;\r\n }\r\n\r\n return image && minSize && (widthToCheck < minSize[0] || heightToCheck < minSize[1]);\r\n }\r\n\r\n handleSelect = (selectedIndex, e) => {\r\n this.setState({\r\n index: selectedIndex,\r\n direction: e.direction,\r\n auto: false,\r\n }, () => this.clearAutoRotateListener());\r\n };\r\n\r\n isPlacementActionsEnabled() {\r\n return this.props.totalImageListCount !== 0 && !this.props.disablePlacementActions;\r\n }\r\n\r\n shouldDisableExcludeBtn(selectedImage) {\r\n const { totalImageListCount, isOnlyOneIncludedImage } = this.props;\r\n const { imageListForDisplay } = this.state;\r\n const onlyOneIncluded =\r\n _.filter(imageListForDisplay, image => image.isIncluded, []).length === 1;\r\n\r\n return totalImageListCount === 1 ||\r\n onlyOneIncluded || isOnlyOneIncludedImage(selectedImage.type);\r\n }\r\n\r\n renderPlacementPreview(imageObj) {\r\n const {\r\n previewTexts, isAdCreatorEnabled, i18n, isBoost200x100ImageEnabled, isBoostNewAspectRatioSupportEnabled,\r\n } = this.props;\r\n\r\n const previewSettings = _.get(this.aspectRatios, [imageObj.type, 'previewSettings'], {});\r\n\r\n return (\r\n \r\n {this.getAdPreviewHeader({ enableActionBtn })}\r\n {\r\n this.isRecommendationTypeImproveMultiMediaAdsEnabled\r\n && _.result(_.first(this.state.imageListForDisplay), 'isRecommendedImage') &&\r\n \r\n {this.renderPlacementPreview(imageObj)}\r\n \r\n ))\r\n }\r\n {\r\n isMSANBoostEnabled &&\r\n imageList.length > 0 &&\r\n Object.keys(C.getBoostAspectRatios(i18n)).map(preview => (\r\n \r\n {this.renderBoostPreview(preview)}\r\n \r\n ))\r\n }\r\n {!hideOutlookPreview &&\r\n \r\n \r\n }\r\n {!hideOutlookPreview &&\r\n \r\n }\r\n \r\n ()}\r\n onClick={() => {\r\n const { viewAllPlacementsActivity } = getAdCreatorInstrumentation(this.props.instrumentation, this.props.adCreatorScenario); // eslint-disable-line max-len\r\n\r\n viewAllPlacementsActivity.trace('UserOpenedViewAllPlacements');\r\n this.props.onUsedViewAllPlacements();\r\n this.setState({ isViewAllPanelOpen: true });\r\n }}\r\n >\r\n {this.props.i18n.getString('ImageExperience_View_Placements_Example')}\r\n \r\n }\r\n {/* This grid preview is another layout of carousel preview */}\r\n {enableViewAllBtn &&\r\n {\r\n this.setState({ isViewAllPanelOpen: false });\r\n }}\r\n className={this.props.classes.gridPreviewContainer}\r\n cellsNumberPerRow={2}\r\n totalCount={_.size(imageList)}\r\n onRenderCell={(cellIndex) => {\r\n const imageAsset = imageList[cellIndex];\r\n\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n\r\nUnStyledMMAPreviewCarousel.propTypes = {\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n callToAction: PropTypes.string,\r\n businessName: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n hotspots: PropTypes.arrayOf(PropTypes.shape({\r\n title: PropTypes.string,\r\n desc: PropTypes.string,\r\n actionText: PropTypes.string,\r\n uri: PropTypes.string,\r\n })),\r\n genericImage: PropTypes.string.isRequired,\r\n imageList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceImage)),\r\n logo: PropTypes.instanceOf(ImageExperienceImage),\r\n onCropImage: PropTypes.func,\r\n onAddAspectRatio: PropTypes.func,\r\n onRemoveAspectRatio: PropTypes.func,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n isMSANBoostEnabled: PropTypes.bool,\r\n enableAutoRotate: PropTypes.bool,\r\n totalImageListCount: PropTypes.number,\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }).isRequired,\r\n isOnlyOneIncludedImage: PropTypes.func,\r\n classes: PropTypes.shape({\r\n gridPreviewContainer: PropTypes.string,\r\n PlayPauseButtons: PropTypes.string,\r\n PlayPauseButtonsContainer: PropTypes.string,\r\n }),\r\n disablePlacementActions: PropTypes.bool,\r\n adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }),\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }),\r\n onUsedViewAllPlacements: PropTypes.func,\r\n permissions: PropTypes.shape({}),\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n isMMAV2Enabled: PropTypes.bool,\r\n isBoost200x100ImageEnabled: PropTypes.bool,\r\n isBoostNewAspectRatioSupportEnabled: PropTypes.bool,\r\n};\r\n\r\nUnStyledMMAPreviewCarousel.defaultProps = {\r\n onCropImage: _.noop,\r\n onAddAspectRatio: _.noop,\r\n onRemoveAspectRatio: _.noop,\r\n isOnlyOneIncludedImage: _.noop,\r\n isAdCreatorEnabled: false,\r\n logo: null,\r\n isMSANBoostEnabled: false,\r\n enableAutoRotate: false,\r\n totalImageListCount: 0,\r\n classes: {},\r\n hotspots: [],\r\n imageList: [],\r\n disablePlacementActions: false,\r\n adCreatorScenario: null,\r\n instrumentation: {\r\n addScenario: _.noop,\r\n },\r\n onUsedViewAllPlacements: _.noop,\r\n permissions: {},\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n isMMAV2Enabled: false,\r\n isBoost200x100ImageEnabled: false,\r\n isBoostNewAspectRatioSupportEnabled: false,\r\n};\r\n\r\nexport const MMAPreviewCarousel =\r\n withDefaultStyles(UnStyledMMAPreviewCarousel, getPreviewCarouselStyle);\r\n","import {\r\n editImageCommonStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nimport { getMMAPreviewStyles } from '@bingads-webui-campaign-react/shared-image-preview-styles';\r\n\r\nimport { panelStyle, previewHeaderStyle, previewContentStyle } from './preview-carousel-base-style';\r\n\r\nexport const getGridPreviewCarouselStyle = () => ({\r\n gridPreviewContainer: {\r\n ...editImageCommonStyle(),\r\n ...getMMAPreviewStyles(),\r\n\r\n ...panelStyle,\r\n '& .placements-grid-preview-cell': {\r\n height: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...previewHeaderStyle,\r\n ...previewContentStyle,\r\n '& .action-label': {\r\n textAlign: 'center',\r\n fontSize: 16,\r\n lineHeight: 2,\r\n },\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { AdPlacementsGridPreviewPanel } from '@bingads-webui-campaign-react/ad-placements-grid-preview';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getGridPreviewCarouselStyle } from '../../style/js/grid-preview-carousel-style';\r\n\r\nexport const StyledAdPlacementsGridPreviewPanel = ({\r\n isOpen,\r\n onDismiss,\r\n className,\r\n cellsNumberPerRow,\r\n totalCount,\r\n onRenderCell,\r\n cellHeight,\r\n}) => {\r\n const classes = useDefaultStyles(getGridPreviewCarouselStyle);\r\n\r\n const props = {\r\n isOpen,\r\n onDismiss,\r\n cellsNumberPerRow,\r\n totalCount,\r\n onRenderCell,\r\n cellHeight,\r\n };\r\n\r\n return (\r\n \r\n
\r\n }\r\n {enableActionBtn && this.getAdPreviewActions()}\r\n \r\n
\r\n {enableViewAllBtn &&\r\n \r\n {this.props.i18n.getString('ImagePreview_Disclaimer_Message_MultimediaAd')}\r\n
\r\n \r\n {this.getAdPreviewHeaderInternal({\r\n title: this.adPreviewIndexToTitleInViewAll[cellIndex],\r\n index: cellIndex,\r\n enableActionBtn: true,\r\n })}\r\n {this.getValidationMessage(imageAsset)}\r\n {this.renderPlacementPreview(imageAsset)}\r\n
\r\n );\r\n }}\r\n />\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nStyledAdPlacementsGridPreviewPanel.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n onDismiss: PropTypes.func.isRequired,\r\n cellsNumberPerRow: PropTypes.number.isRequired,\r\n totalCount: PropTypes.number.isRequired,\r\n onRenderCell: PropTypes.func.isRequired,\r\n className: PropTypes.string,\r\n cellHeight: PropTypes.number,\r\n};\r\n\r\nStyledAdPlacementsGridPreviewPanel.defaultProps = {\r\n className: '',\r\n cellHeight: 482,\r\n};\r\n","import {\r\n playPauseCarouselStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nconst placementContainerStyle = {\r\n display: 'flex',\r\n position: 'relative',\r\n\r\n '&.disabled': {\r\n opacity: 0.5,\r\n },\r\n};\r\n\r\nexport const getPreviewCarouselStyle = (_, theme) => ({\r\n ...playPauseCarouselStyle(theme),\r\n\r\n placementContainerRoot: {\r\n ...placementContainerStyle,\r\n\r\n // move the placement up a little bit to align with the original style\r\n '& > div:first-child': {\r\n top: '-5%',\r\n },\r\n },\r\n\r\n placementContainerRootGridView: {\r\n ...placementContainerStyle,\r\n },\r\n});\r\n","/* eslint-disable max-len */\r\nimport React, { forwardRef, memo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport $ from 'jquery';\r\n\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { Carousel } from '@bingads-webui-react/primitive-unthemed';\r\nimport { TooltipHost, ActionButton } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport {\r\n attachAIGenAssetContextualAttribute,\r\n} from '@bingads-webui-campaign/responsive-search-ad-strength';\r\nimport { PlayPauseButtons, isPlayPausePreviewImageEnabled } from '@bingads-webui-campaign-react/play-pause-buttons';\r\n\r\nimport getCroppedImage from '../util/get-cropped-image';\r\nimport getGenericImageObjectAsync from '../util/get-generic-image-object';\r\nimport { getPreview, getPreviewByType } from './preview-factory';\r\nimport { OutlookPreview } from './outlook-preview';\r\nimport C from '../constants';\r\nimport { MultiImageGeneral } from './multi-image-general';\r\nimport { ImageExperienceImage } from '../model/image-experience-image';\r\nimport { StyledAdPlacementsGridPreviewPanel } from './styled-ad-placements-grid-preview-panel';\r\nimport { getPreviewCarouselStyle } from '../../style/js/preview-carousel-style';\r\n\r\nconst multiImageAspectRatio = C.aspectRatios.Image133x100.type;\r\nconst bingSingleImageAspR = C.aspectRatios.Image178x100.type;\r\n\r\nexport class UnStyledPreviewCarousel extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n index: 0,\r\n direction: null,\r\n defaultImages: [],\r\n placeHolderImages: [],\r\n imageListForDisplay: [],\r\n aspectRatios: props.isMultimediaAd ? C.getMmaAspectRatios() : C.aspectRatios,\r\n isViewAllPanelOpen: false,\r\n auto: this.props.enableAutoRotate,\r\n };\r\n\r\n this.isMultimediaAd = props.isMultimediaAd;\r\n this.isMultiMediaAdsPhase2Enabled = props.permissions.IsMultiMediaAdsPhase2Enabled;\r\n this.isRecommendationTypeImproveMultiMediaAdsEnabled = true;\r\n this.aspectRatiosOrder = C.getImageTypesWithOrder(this.isMultimediaAd);\r\n this.setupImagesAsync();\r\n this.setupAdPreviewIndexToTitlesMap();\r\n this.adPreviewIndexToTitleInViewAll =\r\n this.setupAdPreviewIndexToTitlesMapInViewAll('ImageExperience_Ad_Preview_Ratio_Title_Template');\r\n\r\n // image extension features are being released after AdCreatorV2 has been GAed\r\n this.enableCreatorFeatures =\r\n (this.props.isAdCreatorEnabled && !this.props.isImageAdExtensionMode) || (this.props.isImageAdExtensionMode && this.props.isImageExtensionsEnhancementsEnabled);\r\n }\r\n\r\n static getDerivedStateFromProps(nextProps, prevState) {\r\n const imageListForDisplay = _.map(prevState.defaultImages, (defaultImage) => {\r\n const imgSet = _.find(nextProps.imageList, imageObj => imageObj.Type === defaultImage.Type);\r\n\r\n if (imgSet) {\r\n return imgSet;\r\n }\r\n\r\n return defaultImage;\r\n });\r\n\r\n const selectedImage = imageListForDisplay[prevState.index];\r\n\r\n if (_.result(selectedImage, 'isLogo')) {\r\n _.each(imageListForDisplay, (imageObj) => {\r\n imageObj.isLogo = true; // eslint-disable-line no-param-reassign\r\n });\r\n }\r\n\r\n const aspectRatios = nextProps.isMultimediaAd ?\r\n C.getMmaAspectRatios(_.result(selectedImage, 'isLogo') ?\r\n C.imageOptionKeys.Logo : C.imageOptionKeys.Image) : C.aspectRatios;\r\n\r\n const multiImageList = [];\r\n\r\n // fallback to default images if placeholder not provided\r\n const placeHolderImages = prevState.placeHolderImages.length > 0 ?\r\n [...prevState.placeHolderImages] :\r\n [imageListForDisplay, imageListForDisplay];\r\n\r\n if (nextProps.isImageAdExtensionMode) {\r\n const allImages = [imageListForDisplay, ...placeHolderImages];\r\n\r\n allImages.forEach((imageObjs, idx) => {\r\n const image133x100 = _.find(imageObjs, img => img.type === multiImageAspectRatio);\r\n\r\n if (image133x100) {\r\n const cloned = image133x100.clone();\r\n\r\n cloned.setNewId(cloned.id ? cloned.id + idx : idx);\r\n\r\n multiImageList.push(cloned);\r\n }\r\n });\r\n }\r\n\r\n return {\r\n imageListForDisplay,\r\n multiImageList,\r\n aspectRatios,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setAutoRotate();\r\n }\r\n\r\n componentDidUpdate() {\r\n if (_.result(_.first(this.state.imageListForDisplay), 'isRecommendedImage')) {\r\n // Registers AI generated asset contextual attribute popup to listen for key/mouse events\r\n const element = $('.iconba.iconba-Lightbulb.new-preview-carousel');\r\n attachAIGenAssetContextualAttribute(_.extend({\r\n element,\r\n i18n: this.props.i18n,\r\n improveMMAOption: { type: 'Image' },\r\n newI18n: this.props.newI18n,\r\n }));\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.clearAutoRotateListener();\r\n }\r\n\r\n onAddAspectRatio = (e) => {\r\n const index = this.getEditingImageIndex(e);\r\n const {\r\n imageListForDisplay,\r\n } = this.state;\r\n\r\n this.props.onAddAspectRatio(imageListForDisplay[index].type);\r\n };\r\n\r\n onCrop = (e) => {\r\n const index = this.getEditingImageIndex(e);\r\n const {\r\n imageListForDisplay,\r\n } = this.state;\r\n\r\n if (this.enableCreatorFeatures) {\r\n this.setState({ isViewAllPanelOpen: false }, () => {\r\n this.props.onCropImage(imageListForDisplay[index]);\r\n });\r\n } else {\r\n this.props.onCropImage(imageListForDisplay[index]);\r\n }\r\n\r\n if (this.props.isAdCreatorEnabled) {\r\n const { editPlacementActivity } =\r\n getAdCreatorInstrumentation(this.props.instrumentation, this.props.adCreatorScenario);\r\n\r\n editPlacementActivity.trace('User opened edit placement panel');\r\n }\r\n };\r\n\r\n onReplace = (e) => {\r\n const index = this.getEditingImageIndex(e);\r\n const {\r\n imageListForDisplay,\r\n } = this.state;\r\n\r\n this.setState({ isViewAllPanelOpen: false }, () => {\r\n this.props.onReplaceImage(imageListForDisplay[index]);\r\n });\r\n };\r\n\r\n onRemoveAspectRatio = (e) => {\r\n const index = this.getEditingImageIndex(e);\r\n const {\r\n imageListForDisplay,\r\n } = this.state;\r\n\r\n this.props.onRemoveAspectRatio(imageListForDisplay[index].type);\r\n };\r\n\r\n setAutoRotate = () => {\r\n // disable auto-rotate in test\r\n /* istanbul ignore if */\r\n if (window.e2eTestEnvironment) {\r\n return;\r\n }\r\n\r\n if (this.state.auto === false) {\r\n return;\r\n }\r\n\r\n this.clearAutoRotateListener();\r\n const { index, imageListForDisplay } = this.state;\r\n\r\n const indicators = document.querySelector('.new-preview-carousel-container .carousel-indicators');\r\n\r\n // make sure we have the correct preview to rotate\r\n const previewCount = (indicators && indicators.childElementCount) || imageListForDisplay.length;\r\n let nextIndex = index + 1;\r\n\r\n /* istanbul ignore next */\r\n if (nextIndex >= previewCount) {\r\n nextIndex = 0;\r\n }\r\n\r\n this.autoRotateListener = setTimeout(() => {\r\n /* istanbul ignore next */\r\n if (this.props.enableAutoRotate) {\r\n this.setState({\r\n index: nextIndex,\r\n direction: 'next',\r\n });\r\n }\r\n\r\n /* istanbul ignore next */\r\n this.setAutoRotate();\r\n }, 3000);\r\n };\r\n\r\n getEditingImageIndex(e) {\r\n return _.isUndefined(e.target.dataset.index)\r\n ? this.state.index : parseInt(e.target.dataset.index, 10);\r\n }\r\n\r\n setPreviewIndexByType(type) {\r\n const currentIndex = this.adPreviewTypesOrdered.indexOf(type);\r\n\r\n if (currentIndex >= 0) {\r\n this.setState({\r\n index: currentIndex,\r\n });\r\n }\r\n }\r\n\r\n setupAdPreviewIndexToTitlesMap() {\r\n this.adPreviewIndexToTitle = [];\r\n this.adPreviewTypesOrdered = [];\r\n\r\n const multiTitle = this.props.i18n.getString(\r\n 'ImageExperience_Ad_Preview_Title_Template',\r\n {\r\n // eslint-disable-next-line\r\n ratio: this.props.i18n.getString(C.aspectRatios[multiImageAspectRatio].stringKey),\r\n }\r\n );\r\n\r\n const singleExtensionTitle = this.props.i18n.getString(\r\n 'ImageExperience_Ad_Preview_Title_Template',\r\n {\r\n // eslint-disable-next-line\r\n ratio: this.props.i18n.getString(C.aspectRatios[bingSingleImageAspR].stringKey),\r\n }\r\n );\r\n\r\n const responsivePreviewsTitles = _.map(this.aspectRatiosOrder, typeKey => this.props.i18n.getString(\r\n 'ImageExperience_Ad_Preview_Title_Template',\r\n {\r\n // eslint-disable-next-line\r\n ratio: this.props.i18n.getString(this.state.aspectRatios[typeKey].stringKey),\r\n }\r\n ));\r\n\r\n const genericTitle = this.props.i18n.getString('ImageExperience_Ad_Preview_Title');\r\n\r\n if (this.props.isImageAdExtensionMode && !this.isMultimediaAd) {\r\n this.adPreviewIndexToTitle.push(singleExtensionTitle);\r\n this.adPreviewIndexToTitle.push(multiTitle);\r\n this.adPreviewIndexToTitle.push(multiTitle);\r\n\r\n this.adPreviewTypesOrdered.push(C.aspectRatios.Image178x100.type);\r\n this.adPreviewTypesOrdered.push(C.aspectRatios.Image133x100.type);\r\n this.adPreviewTypesOrdered.push(C.aspectRatios.Image133x100.type);\r\n }\r\n\r\n this.adPreviewIndexToTitle = this.adPreviewIndexToTitle.concat(responsivePreviewsTitles);\r\n this.adPreviewTypesOrdered = this.adPreviewTypesOrdered.concat(this.aspectRatiosOrder);\r\n\r\n if (!this.props.isImageAdExtensionMode && !this.isMultimediaAd) {\r\n this.adPreviewIndexToTitle.push(genericTitle);\r\n this.adPreviewIndexToTitle.push(genericTitle);\r\n }\r\n }\r\n\r\n setupAdPreviewIndexToTitlesMapInViewAll(templateKey) {\r\n const adPreviewIndexToTitle = [];\r\n const responsivePreviewsTitles =\r\n _.map(this.aspectRatiosOrder, typeKey => this.props.i18n.getString(\r\n templateKey,\r\n {\r\n // eslint-disable-next-line\r\n ratio: this.props.i18n.getString(this.state.aspectRatios[typeKey].stringKey),\r\n }\r\n ));\r\n\r\n return adPreviewIndexToTitle.concat(responsivePreviewsTitles);\r\n }\r\n\r\n setupImagesAsync() {\r\n const imagesToSetup = [\r\n this.props.genericImage,\r\n ...this.props.placeHolderImages,\r\n ];\r\n\r\n const setupPromises = _.map(imagesToSetup, imageToSetup => getGenericImageObjectAsync(imageToSetup).then((imageObj) => {\r\n let croppedImages = getCroppedImage({\r\n originalImageToCrop: imageObj,\r\n isMultimediaAd: this.isMultimediaAd,\r\n });\r\n croppedImages = _.sortBy(croppedImages, image => this.aspectRatiosOrder.indexOf(image.type));\r\n _.each(croppedImages, (image) => {\r\n image.isIncluded = false; // eslint-disable-line no-param-reassign\r\n });\r\n return croppedImages;\r\n }));\r\n\r\n Promise.all(setupPromises).then(([defaultImages, placeHolderImages1, placeHolderImages2, placeHolderImages3]) => {\r\n this.setState({\r\n defaultImages,\r\n placeHolderImages: [placeHolderImages1 || defaultImages, placeHolderImages2 || defaultImages, placeHolderImages3 || defaultImages],\r\n });\r\n });\r\n }\r\n\r\n getAdPreviewTitle() {\r\n const { index } = this.state;\r\n\r\n return this.adPreviewIndexToTitle[index];\r\n }\r\n\r\n getAdPreviewButtonsForAdCreator(cellIndex = -1) {\r\n if (this.isMultimediaAd && !_.isEmpty(this.props.imageList)) {\r\n const { imageListForDisplay, index } = this.state;\r\n const selectedIndex = cellIndex > -1 ? cellIndex : index;\r\n const selectedImage = imageListForDisplay[selectedIndex];\r\n const isRequired = selectedImage && _.result(this.state.aspectRatios[selectedImage.type], 'minimumRequirements') > 0 && this.props.totalImageListCount === 1;\r\n const minSize = selectedImage && _.result(this.state.aspectRatios[selectedImage.type], 'minSize');\r\n const isSupported = selectedImage && this.state.aspectRatios[selectedImage.type];\r\n\r\n if (!isSupported) {\r\n return null;\r\n }\r\n\r\n if (this.isInvalidImageSize(selectedImage, minSize)) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {_.result(selectedImage, 'isIncluded') !== true ?\r\n (\r\n \r\n { this.props.i18n.getString('ImageEditor_Include_AspectRatio') }\r\n \r\n ) :\r\n (\r\n \r\n {!_.result(selectedImage, 'disableEdit') &&\r\n \r\n {this.props.i18n.getString('ImageExperience_Edit_Aspect_Ratio')}\r\n \r\n }\r\n {isRequired &&\r\n \r\n \r\n { this.props.i18n.getString('ImageEditor_Exclude_AspectRatio') }\r\n \r\n \r\n }\r\n {!isRequired &&\r\n \r\n { this.props.i18n.getString('ImageEditor_Exclude_AspectRatio') }\r\n \r\n }\r\n \r\n )\r\n }\r\n
\r\n );\r\n } else if (this.props.isImageExtensionsEnhancementsEnabled && !_.isEmpty(this.props.imageList)) {\r\n return (\r\n \r\n \r\n { this.props.i18n.getString('ImageEditor_CropImage') }\r\n \r\n \r\n { this.props.i18n.getString('ImageExperience_Replace')}\r\n \r\n
\r\n\r\n\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n getAdPreviewActions() {\r\n if (this.isMultimediaAd && !_.isEmpty(this.props.imageList)) {\r\n const { imageListForDisplay, index } = this.state;\r\n const selectedImage = imageListForDisplay[index];\r\n const validationMsgElement = this.getValidationMessage(selectedImage);\r\n\r\n return (\r\n \r\n {_.result(selectedImage, 'isIncluded') !== true ?\r\n (\r\n \r\n { validationMsgElement }\r\n { !validationMsgElement && !this.props.isAdCreatorEnabled &&\r\n \r\n \r\n { this.props.i18n.getString('ImageEditor_Include_AspectRatio_Label') }\r\n \r\n \r\n { this.props.i18n.getString('ImageEditor_Include_AspectRatio') }\r\n \r\n \r\n }\r\n \r\n ) :\r\n (\r\n !this.props.isAdCreatorEnabled &&\r\n \r\n \r\n { _.result(selectedImage, 'isLogo') ?\r\n this.props.i18n.getString('ImageEditor_CropLogo_Label') :\r\n this.props.i18n.getString('ImageEditor_CropImage_Label') }\r\n \r\n {!_.result(selectedImage, 'disableEdit') &&\r\n \r\n { this.props.i18n.getString('ImageEditor_CropImage') }\r\n \r\n }\r\n \r\n { this.props.i18n.getString('ImageEditor_Exclude_AspectRatio') }\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n getAdPreviewHeader() {\r\n const enableActionBtn = this.isPlacementActionsEnabled();\r\n\r\n return this.props.isAdCreatorEnabled && this.isMultimediaAd ?\r\n (\r\n \r\n
\r\n ) : (\r\n \r\n {this.getAdPreviewTitle()}\r\n
\r\n \r\n {\r\n enableActionBtn && this.getAdPreviewButtonsForAdCreator()\r\n }\r\n \r\n {this.getAdPreviewTitle()}\r\n
\r\n );\r\n }\r\n\r\n getAdPreviewHeaderInternal({ title, index, enableActionBtn }) {\r\n const { imageListForDisplay } = this.state;\r\n const selectedImage = imageListForDisplay[index];\r\n const isSelectedImageIncluded = _.result(selectedImage, 'isIncluded');\r\n const minSize = selectedImage && this.state.aspectRatios[selectedImage.type].minSize;\r\n const hideActionBtn = !enableActionBtn\r\n || (!isSelectedImageIncluded && this.isInvalidImageSize(selectedImage, minSize));\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n getValidationMessage(image) {\r\n if (_.result(image, 'isIncluded') !== true) {\r\n const isSupported = image && this.state.aspectRatios[image.type];\r\n const minSize = image && _.result(this.state.aspectRatios[image.type], 'minSize');\r\n\r\n if (!isSupported) {\r\n return (\r\n \r\n { this.props.i18n.getString('ImageEditor_Not_Supported') }\r\n \r\n );\r\n }\r\n\r\n return this.isInvalidImageSize(image, minSize) &&\r\n \r\n {\r\n this.props.i18n.getString('ImageEditor_SizeValidationFailTemplate', {\r\n width: minSize[0],\r\n height: minSize[1],\r\n })\r\n }\r\n ;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n setAutoState = (target) => {\r\n if (this.state.auto !== target) {\r\n if (target === false) {\r\n this.setState({\r\n auto: target,\r\n }, () => this.clearAutoRotateListener());\r\n return;\r\n }\r\n this.setState({\r\n auto: target,\r\n }, () => this.setAutoRotate());\r\n }\r\n };\r\n\r\n clearAutoRotateListener = () => {\r\n if (this.autoRotateListener) {\r\n clearTimeout(this.autoRotateListener);\r\n this.autoRotateListener = null;\r\n }\r\n };\r\n\r\n isInvalidImageSize(image, minSize) {\r\n if (!image) {\r\n return false;\r\n }\r\n\r\n let widthToCheck = image.Width;\r\n let heightToCheck = image.Height;\r\n\r\n if (this.props.isAdCreatorEnabled\r\n && image.BaseImage\r\n && image.BaseImage.CropSettings\r\n && image.BaseImage.CropSettings.SourceWidth > 0\r\n && image.BaseImage.CropSettings.SourceHeight > 0) {\r\n widthToCheck = image.BaseImage.CropSettings.SourceWidth;\r\n heightToCheck = image.BaseImage.CropSettings.SourceHeight;\r\n }\r\n\r\n return image && minSize && (widthToCheck < minSize[0] || heightToCheck < minSize[1]);\r\n }\r\n\r\n stop = () => {\r\n this.setAutoState(false);\r\n };\r\n\r\n start = () => {\r\n this.setAutoState(true);\r\n };\r\n\r\n handleSelect = (selectedIndex, e) => {\r\n this.setState({\r\n index: selectedIndex,\r\n direction: e.direction,\r\n auto: false,\r\n }, () => this.clearAutoRotateListener());\r\n };\r\n\r\n isPlacementActionsEnabled() {\r\n return this.props.totalImageListCount !== 0 && !this.props.disablePlacementActions;\r\n }\r\n\r\n render() {\r\n const { index, direction } = this.state;\r\n\r\n const { eligibleLayout } = this.props;\r\n const multiImages = this.state.multiImageList;\r\n const mobileMultiImages = multiImages && multiImages.length && multiImages.slice(0);\r\n const bingDesktopImages = multiImages && multiImages.length && multiImages.slice(0);\r\n let bingSingleImage = this.state.imageListForDisplay && this.state.imageListForDisplay.length &&\r\n _.find(this.state.imageListForDisplay, img => img.type === bingSingleImageAspR);\r\n bingSingleImage = bingSingleImage && bingSingleImage.clone();\r\n const enableActionBtn = this.isPlacementActionsEnabled();\r\n const enableViewAllBtn = enableActionBtn && (this.enableCreatorFeatures);\r\n\r\n return (\r\n \r\n {title}\r\n
\r\n \r\n {!hideActionBtn &&\r\n \r\n {this.getAdPreviewButtonsForAdCreator(index)}\r\n
\r\n }\r\n \r\n {this.getAdPreviewHeader()}\r\n {\r\n this.isRecommendationTypeImproveMultiMediaAdsEnabled\r\n && _.result(_.first(this.state.imageListForDisplay), 'isRecommendedImage') &&\r\n \r\n {getPreviewByType(\r\n bingSingleImage,\r\n this.props.previewTexts,\r\n this.props.i18n,\r\n true,\r\n 'BingSingleImage'\r\n )}\r\n \r\n }\r\n {\r\n eligibleLayout !== 'Single' && multiImages && multiImages.length > 0 &&\r\n \r\n \r\n }\r\n {\r\n eligibleLayout !== 'Single' && multiImages && multiImages.length > 0 &&\r\n \r\n \r\n }\r\n {\r\n eligibleLayout !== 'Multi' && this.state.imageListForDisplay.map((imageObj, arrIndex) => (\r\n \r\n {getPreview(\r\n imageObj,\r\n this.props.previewTexts,\r\n this.props.i18n,\r\n index === arrIndex,\r\n this.isMultimediaAd,\r\n this.isMultiMediaAdsPhase2Enabled,\r\n this.props.isAdCreatorEnabled\r\n )}\r\n \r\n ))\r\n }\r\n {\r\n !this.isMultimediaAd && !this.props.isImageAdExtensionMode &&\r\n \r\n \r\n }\r\n {\r\n !this.isMultimediaAd && !this.props.isImageAdExtensionMode &&\r\n \r\n \r\n }\r\n \r\n ()}\r\n onClick={() => {\r\n const { viewAllPlacementsActivity } = getAdCreatorInstrumentation(this.props.instrumentation, this.props.adCreatorScenario); // eslint-disable-line max-len\r\n\r\n viewAllPlacementsActivity.trace('UserOpenedViewAllPlacements');\r\n this.props.onUsedViewAllPlacements();\r\n this.setState({ isViewAllPanelOpen: true });\r\n }}\r\n >\r\n { this.props.i18n.getString('ImageExperience_View_Placements_Example') }\r\n \r\n }\r\n {/* This grid preview is another layout of carousel preview */}\r\n { enableViewAllBtn &&\r\n {\r\n this.setState({ isViewAllPanelOpen: false });\r\n }}\r\n className={this.props.classes.gridPreviewContainer}\r\n cellsNumberPerRow={2}\r\n totalCount={_.size(this.state.imageListForDisplay)}\r\n cellHeight={510}\r\n onRenderCell={(cellIndex) => {\r\n const imageAsset = this.state.imageListForDisplay[cellIndex];\r\n\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n\r\nUnStyledPreviewCarousel.propTypes = {\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n IsMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n }),\r\n genericImage: PropTypes.string.isRequired,\r\n imageList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceImage)).isRequired,\r\n placeHolderImages: PropTypes.arrayOf(PropTypes.string),\r\n isImageAdExtensionMode: PropTypes.bool,\r\n eligibleLayout: PropTypes.string,\r\n isMultimediaAd: PropTypes.bool,\r\n onCropImage: PropTypes.func,\r\n onAddAspectRatio: PropTypes.func,\r\n onRemoveAspectRatio: PropTypes.func,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n enableAutoRotate: PropTypes.bool,\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }),\r\n totalImageListCount: PropTypes.number,\r\n adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }),\r\n classes: PropTypes.shape({\r\n gridPreviewContainer: PropTypes.string,\r\n PlayPauseButtons: PropTypes.string,\r\n PlayPauseButtonsContainer: PropTypes.string,\r\n }),\r\n disablePlacementActions: PropTypes.bool,\r\n onUsedViewAllPlacements: PropTypes.func,\r\n isImageExtensionsEnhancementsEnabled: PropTypes.bool,\r\n onReplaceImage: PropTypes.func,\r\n customClasses: PropTypes.shape({\r\n viewAllPlacementsButton: PropTypes.string,\r\n reCropButton: PropTypes.string,\r\n }),\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n};\r\n\r\nUnStyledPreviewCarousel.defaultProps = {\r\n isImageAdExtensionMode: false,\r\n isMultimediaAd: false,\r\n eligibleLayout: '',\r\n placeHolderImages: [],\r\n onCropImage: _.noop,\r\n onReplaceImage: _.noop,\r\n onAddAspectRatio: _.noop,\r\n onRemoveAspectRatio: _.noop,\r\n permissions: {},\r\n enableAutoRotate: false,\r\n isAdCreatorEnabled: false,\r\n instrumentation: {\r\n addScenario: _.noop,\r\n },\r\n totalImageListCount: 0,\r\n adCreatorScenario: null,\r\n classes: {},\r\n disablePlacementActions: false,\r\n onUsedViewAllPlacements: _.noop,\r\n isImageExtensionsEnhancementsEnabled: false,\r\n customClasses: {},\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n};\r\n\r\nexport const PreviewCarousel = memo(forwardRef((props, ref) => {\r\n const classes = useDefaultStyles(getPreviewCarouselStyle);\r\n return (\r\n
\r\n }\r\n {this.getAdPreviewActions()}\r\n \r\n
\r\n { enableViewAllBtn &&\r\n \r\n {this.isMultimediaAd ? this.props.i18n.getString('ImagePreview_Disclaimer_Message_MultimediaAd') : this.props.i18n.getString('ImagePreview_Disclaimer_Message')}\r\n
\r\n \r\n {this.getAdPreviewHeaderInternal({\r\n title: this.adPreviewIndexToTitleInViewAll[cellIndex],\r\n index: cellIndex,\r\n enableActionBtn: true,\r\n })}\r\n {this.getValidationMessage(imageAsset)}\r\n {getPreview(\r\n imageAsset,\r\n this.props.previewTexts,\r\n this.props.i18n,\r\n index === cellIndex,\r\n this.isMultimediaAd,\r\n this.isMultiMediaAdsPhase2Enabled,\r\n this.props.isAdCreatorEnabled\r\n )}\r\n
\r\n );\r\n }}\r\n />\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nPreviewPlacementContainer.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n adType: PropTypes.string,\r\n placementType: PropTypes.string,\r\n shouldShowAdditionalDisclaimer: PropTypes.bool,\r\n};\r\n\r\nPreviewPlacementContainer.defaultProps = {\r\n adType: '',\r\n placementType: '',\r\n shouldShowAdditionalDisclaimer: false,\r\n};\r\n","import React, { useEffect, useCallback, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n useImageExperienceAdPreviewModel,\r\n AdPreviewSinglePlacementLayout,\r\n PlacementType2AssociationTypeMap,\r\n} from '@bingads-webui-campaign-react/unified-ad-preview-library-cmui';\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience-model';\r\n\r\nimport { PreviewPlacementContainer } from './preview-placement-container';\r\nimport { normalizePreviewTexts } from './util';\r\n\r\nexport const UnifiedAdPreviewSinglePlacementWrapper = ({\r\n i18n,\r\n placement,\r\n previewTexts,\r\n previewLogo,\r\n adPreviewConfig,\r\n placementType,\r\n isMultimediaAd,\r\n isMultiMediaAdsPhase2Enabled,\r\n}) => {\r\n const { adType, placementConfig = [], extraPlacementInfo = {} } = adPreviewConfig;\r\n const placementTypesList = useMemo(() => _.chain(placementConfig).map(({ placementTypes }) => placementTypes).flatten().value(), [placementConfig]);\r\n\r\n const placementAlias = useMemo(() => {\r\n if (placementType) {\r\n return placementType;\r\n }\r\n\r\n // this is a temporary solution to get the placement type for MMA and MSAN.\r\n // We can pass placementType from parent component when old preview caousel is updated by UAPL preview carousel.\r\n let alias = '';\r\n _.map(placementTypesList, (placementTypeInner) => {\r\n const associationType = PlacementType2AssociationTypeMap[placementTypeInner];\r\n if (placement && placement.associationType === associationType) {\r\n alias = placementTypeInner;\r\n } else if (placement && placement.type && constants.subTypeToType[associationType] === placement.type) {\r\n alias = placementTypeInner;\r\n placement.setAssociationType(associationType);\r\n }\r\n });\r\n return alias;\r\n }, [placement, placementType, placementTypesList]);\r\n\r\n const placementConfigInner = useMemo(() => [\r\n {\r\n placementSetName: adType,\r\n placementTypes: [placementAlias],\r\n },\r\n ], [adType, placementAlias]);\r\n\r\n const {\r\n firstImage,\r\n multiImagePlacementSets: placementSets,\r\n onUpdateImageExperienceImageList,\r\n } = useImageExperienceAdPreviewModel(placementConfigInner);\r\n\r\n useEffect(() => {\r\n onUpdateImageExperienceImageList([[placement]]);\r\n }, [placement, onUpdateImageExperienceImageList]);\r\n\r\n const onRenderPlacement = useCallback((pl, AdPlacementComponent) => {\r\n const { placementMeta } = pl;\r\n const { imageMeta } = firstImage;\r\n\r\n if (!placementMeta || !imageMeta) {\r\n return null;\r\n }\r\n\r\n const { placementType: placementTypeInner } = placementMeta;\r\n const unifiedPreviewTexts = normalizePreviewTexts(previewTexts, placementTypeInner);\r\n\r\n return (\r\n \r\n {children}\r\n
\r\n \r\n {extraPlacementInfo.previewStringKey && i18n.getString(extraPlacementInfo.previewStringKey)}\r\n
\r\n {\r\n extraPlacementInfo.showAdditionalDisclaimer && shouldShowAdditionalDisclaimer &&\r\n \r\n {i18n.getString(extraPlacementInfo.disclaimerStringKey)}\r\n
\r\n }\r\n \r\n {\r\n title &&\r\n
\r\n );\r\n};\r\n\r\nUnifiedAdPreviewCarouselLayoutWrapper.propTypes = {\r\n imageList: PropTypes.arrayOf(PropTypes.shape({\r\n src: PropTypes.string,\r\n })).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n adPreviewConfig: PropTypes.shape({\r\n adType: PropTypes.string,\r\n placementConfig: PropTypes.arrayOf(PropTypes.shape({})),\r\n }),\r\n previewTexts: PropTypes.shape({\r\n finalUrl: PropTypes.string,\r\n url: PropTypes.string,\r\n }),\r\n previewLogo: PropTypes.shape({}),\r\n showAdditionalDisclaimer: PropTypes.bool,\r\n enableAutoRotate: PropTypes.bool,\r\n isMultimediaAd: PropTypes.bool,\r\n isMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n};\r\n\r\nUnifiedAdPreviewCarouselLayoutWrapper.defaultProps = {\r\n adPreviewConfig: {},\r\n previewTexts: {},\r\n previewLogo: undefined,\r\n showAdditionalDisclaimer: false,\r\n enableAutoRotate: false,\r\n isMultimediaAd: false,\r\n isMultiMediaAdsPhase2Enabled: false,\r\n};\r\n","/* eslint-disable jsx-a11y/label-has-for */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { Panel } from '@bingads-webui-react/primitive';\r\nimport { MediaEditorPanel } from '@bingads-webui-campaign-react/media-editor-panel';\r\nimport { PivotItemKey } from '@bingads-webui-campaign-react/media-editor';\r\nimport { MediaRepository } from '@bingads-webui-campaign/media-repository';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { withInstrumentation } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { odata } from '@bingads-webui/http-util';\r\nimport legacyOdata from '@bingads-webui-component-legacy/http/channel/odata';\r\nimport {\r\n PreviewCarouselRightRailWrapper,\r\n PreviewSingleRightRailWrapper,\r\n} from '@bingads-webui-campaign-react/preview-right-rail-wrapper';\r\nimport { getFolderODataService, transformAltTextRequest } from '@bingads-webui-campaign-react/asset-library-services';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { isTestEnvironment } from '@bingads-webui-campaign/global-app-init';\r\nimport { AddImageCrudAdComponent, VIEWS } from '@bingads-webui-campaign-react/add-media-panel-crud-ad';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { StockImageDataService } from '@bingads-webui-campaign/stock-image-data-service';\r\nimport { InvestImageDataService } from '@bingads-webui-campaign/invest-image-data-service';\r\nimport { ResponsiveImageListView } from '@bingads-webui-campaign-react/responsive-image-list-view';\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { I18nModel } from '@bingads-webui-universal/i18n-model';\r\nimport { ImageExperienceVideo, VideoExperience } from '@bingads-webui-campaign-react/image-experience-video-part';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { isCopilotRegionRestricted } from '@bingads-webui-react/copilot-utils';\r\n\r\nimport { AddImageContainer } from './add-image';\r\nimport { EditImage } from './edit-image';\r\nimport { ImageListView } from './image-list-view';\r\nimport { ImageExperienceImage } from './model/image-experience-image';\r\nimport { CustomThumbnailRecordType } from './types';\r\nimport C from './constants';\r\nimport { getEditingMediaProps } from './util/editing-media-props';\r\nimport getAutoCroppedImages from './util/get-cropped-image';\r\nimport { ImageRepository } from './util/image-repository';\r\nimport {\r\n validateImageSizeAsync,\r\n validateImageWithDimension,\r\n} from './util/image-size-validation';\r\nimport { getImageValidationErrorMessage, getMultiAddedImageErrorMessage } from './util/image-validation-handling';\r\nimport { MMAPreviewCarousel } from './image-preview/mma-msan-preview-carousel';\r\nimport { PreviewGeneral } from './image-preview/preview-general';\r\nimport { PreviewCarousel } from './image-preview/preview-carousel';\r\nimport StockImageVendor from './add-image/stock-image/stockImageVendor';\r\nimport SocialMediaRepository from './util/social-media-repository';\r\nimport SocialMediaDataSource from './add-image/data-source/social-media-data-source';\r\nimport { UnifiedAdPreviewSinglePlacementWrapper } from './ad-preview-library-wrapper/unified-ad-preview-single-placement-wrapper';\r\nimport { UnifiedAdPreviewCarouselLayoutWrapper } from './ad-preview-library-wrapper/unified-ad-preview-carousel-layout-wrapper';\r\n\r\nconst getComponent = getComponentAsync => () => getComponentAsync()\r\n .then(component => ({ default: component }));\r\n\r\nconst getChangeImageBackgroundDialogAsync = () => import(/* webpackMode: 'eager' */'@bingads-webui-campaign-react/copilot-change-image-background-dialog')\r\n .then(({ CopilotChangeImageBackgroundDialog }) => CopilotChangeImageBackgroundDialog);\r\n\r\nexport class ImageExperienceComponent extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n const {\r\n i18n,\r\n isAudienceAd,\r\n isMultimediaAd,\r\n isMultimediaAdinMSANEnabled,\r\n cid,\r\n aid,\r\n oDataConfig,\r\n isAdCreatorEnabled,\r\n setAddNewImageCallback,\r\n setAddNewImagesCallback,\r\n setOpenAddImageCallback,\r\n customMaxImageCount,\r\n enableImageDeleting,\r\n enableStockMultipleSelection,\r\n enableInvestMultipleSelection,\r\n enableWebsiteMultipleSelection,\r\n instrumentation,\r\n mediaRepository,\r\n isImageAdExtensionMode,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n adCreatorScenario,\r\n isMSANBoostEnabled,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n permissions,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n isLinkedInAd,\r\n isImageFittingEnabled,\r\n isPMaxAspectRatiosV2Enabled,\r\n } = props;\r\n\r\n this.defaultPreviewFields = {\r\n shortHeadline: i18n.getString('Audience_Campaign_Ad_Preview_Default_ShortHeadline'),\r\n longHeadline: i18n.getString('Audience_Campaign_Ad_Preview_Default_LongHeadline'),\r\n description: i18n.getString('Audience_Campaign_Ad_Preview_Default_Description'),\r\n businessName: i18n.getString('Audience_Campaign_Ad_Preview_Default_BusinessName'),\r\n url: 'https://www.bing.com',\r\n callToAction: i18n.getString('Audience_Campaign_Ad_Preview_Default_CallToAction'),\r\n };\r\n\r\n this.state = {\r\n isImageSelectorDisplayed: false,\r\n isImageEditDisplayed: false,\r\n isBackgroundSceneDialogOpen: false,\r\n editingImage: null,\r\n isMMAEnabled: isMultimediaAdinMSANEnabled || isMultimediaAd,\r\n defaultAddImageIndex: 0,\r\n imageOption: C.defaultImageOption,\r\n aspectRatioOption: C.defaultAspectRatioOption,\r\n addMediaPanelView: VIEWS.LandingPage,\r\n addImageErrorMessage: null,\r\n isBackgroundChangeEnabled: false,\r\n isImageUpscaleEnabled: false,\r\n };\r\n\r\n this.imageRepository = new ImageRepository(cid, aid, oDataConfig, {\r\n isAudienceAd,\r\n isMultimediaAd,\r\n instrumentation,\r\n mediaRepository,\r\n isMultimediaAdinMSANEnabled,\r\n isImageAdExtensionMode,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n adCreatorScenario,\r\n isMSANBoostEnabled,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n isAudienceAdSmartCropEnabled: permissions.dynamic.AudienceAdSmartCrop,\r\n isPmaxSmartCropEnabled: permissions.dynamic.PMaxSmartCrop,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n isLinkedInAd,\r\n isImageFittingEnabled,\r\n isPMaxAspectRatiosV2Enabled,\r\n });\r\n\r\n if (isAdCreatorEnabled) {\r\n if (isMultimediaAd) {\r\n setClarityTag({\r\n IsAdCreatorV1Enabled: true,\r\n });\r\n }\r\n if (isMultimediaAdinMSANEnabled || isMultimediaAd) {\r\n setClarityTag({\r\n IsAdCreatorV2Enabled: true,\r\n });\r\n }\r\n }\r\n\r\n if (_.isFunction(setAddNewImageCallback)) {\r\n setAddNewImageCallback((imageUrl, imageOption, suggestionId) => this.addImageByUrl(imageUrl, C.imageSources.WebsiteCarousel, imageOption, suggestionId));\r\n }\r\n\r\n if (_.isFunction(setAddNewImagesCallback)) {\r\n setAddNewImagesCallback((images, imageOption, replaceExistingAssets) => {\r\n if (replaceExistingAssets && this.props.imageList.length > 0) {\r\n this.onRemoveAllImages(imageOption, false /* shouldDirty */);\r\n }\r\n\r\n return this.addImagesByUrl(images, C.imageSources.WebsiteCarousel, imageOption);\r\n });\r\n }\r\n\r\n if (_.isFunction(setOpenAddImageCallback)) {\r\n setOpenAddImageCallback(() => {\r\n this.onAddImage(null, 2);\r\n });\r\n }\r\n\r\n this.validateImageSizeAsync = validateImageSizeAsync;\r\n this.validateImageWithDimension = validateImageWithDimension;\r\n this.getAdCreatorInstrumentation = getAdCreatorInstrumentation;\r\n\r\n this.stockImageDataService = new StockImageDataService({\r\n cid,\r\n aid,\r\n oDataConfig,\r\n controller: 'StockImages',\r\n });\r\n\r\n this.investImageDataService = new InvestImageDataService({ cid, aid });\r\n\r\n this.ChangeImageBackgroundDialogLazy = React.lazy(getComponent(getChangeImageBackgroundDialogAsync));\r\n\r\n const socialMediaRepository = new SocialMediaRepository({ cid, aid, oDataConfig });\r\n\r\n if (isMSANBoostEnabled && permissions.IsBoostImageAltTextEnabled) {\r\n this.folderODataService = getFolderODataService({\r\n cid,\r\n aid,\r\n oDataConfig: {\r\n ...oDataConfig,\r\n oDataPath: oDataConfig.odataPath,\r\n oDataToken: oDataConfig.odataToken,\r\n },\r\n odata,\r\n legacyOdata,\r\n i18n,\r\n dateFormat: props.dateFormat,\r\n });\r\n }\r\n\r\n this.socialMediaDataSource = new SocialMediaDataSource({ repository: socialMediaRepository });\r\n\r\n this.assetLibraryConfig = {\r\n aid,\r\n cid,\r\n oDataConfig,\r\n dateFormat: props.dateFormat,\r\n timeZone: props.timeZone,\r\n preferencesService: props.preferencesService,\r\n activityLogger: props.activityLogger,\r\n // eslint-disable-next-line arrow-body-style\r\n onImageSelected: (image, imageSource = C.imageSources.Existing) => {\r\n // clearn up the error message\r\n this.setState({ addImageErrorMessage: null });\r\n return this.imageRepository.getImageByIdAndProcessAsync({\r\n image,\r\n imageType: this.getCurrentImageType(),\r\n imageSource,\r\n onError: (e) => {\r\n this.setState({\r\n addImageErrorMessage: getImageValidationErrorMessage(e, i18n),\r\n });\r\n },\r\n imageOption: this.state.imageOption,\r\n aspectRatioOption: this.state.aspectRatioOption,\r\n onSelectedImagesSet: img => this.onSelectedImagesSet(img),\r\n isImageFittingEnabled: this.props.isImageFittingEnabled,\r\n adType: this.props.isImageAdExtensionMode ? 'ImageAdExtension' : undefined,\r\n });\r\n },\r\n // eslint-disable-next-line arrow-body-style\r\n onImagesSelected: (imageIds, imageSource = C.imageSources.Existing) => {\r\n // clearn up the error message\r\n this.setState({ addImageErrorMessage: null });\r\n return this.imageRepository.getImagesByIdsAndProcessAsync({\r\n imageIds,\r\n imageType: this.getCurrentImageType(),\r\n imageSource,\r\n onError: (e) => {\r\n this.setState({\r\n addImageErrorMessage: getImageValidationErrorMessage(e, i18n),\r\n });\r\n },\r\n imageOption: this.state.imageOption,\r\n aspectRatioOption: this.state.aspectRatioOption,\r\n onSelectedImagesSet: img => this.onSelectedImagesSet(img),\r\n isImageFittingEnabled: this.props.isImageFittingEnabled,\r\n adType: this.props.isImageAdExtensionMode ? 'ImageAdExtension' : undefined,\r\n });\r\n },\r\n onImageAddError: (e) => {\r\n const errorMessage = getImageValidationErrorMessage(e, i18n);\r\n const genericError = (\r\n \r\n {this.props.i18n.getString(_TL_('One or more assets failed to upload. Please try again'))}\r\n \r\n
\r\n }\r\n \r\n {title}\r\n
\r\n \r\n \r\n
\r\n \r\n {i18n.getString('ImagePreview_Disclaimer_Message_MultimediaAd')}\r\n
\r\n \r\n {!isRenderAddInImageList && this.renderAddImage(imageOption)}\r\n {(!isEmpty || isRenderAddInImageList) && this.onRemoveAllImages(imageOption)}\r\n onSelectImage={this.onSelectImage}\r\n isRenderAddInImageList={isRenderAddInImageList && !this.shouldDisableAddButton(imageOption)}\r\n onAddImage={() => this.onAddImage(null, this.defaultAddImageIndex, imageOption)}\r\n currentSelectedImageId={isLogo ?\r\n this.props.currentSelectedLogoId : this.props.currentSelectedImageId}\r\n adCreatorScenario={this.props.adCreatorScenario}\r\n portalContainer={portalContainer}\r\n blocking={!isLogo && this.state.copilotApplying}\r\n showCopilotOption={!isLogo && this.state.isBackgroundChangeEnabled}\r\n enableEdit={this.props.enableImageListEdit}\r\n logger={this.props.activityLogger}\r\n error={!isLogo && this.state.isBackgroundChangeEnabled && !this.state.isImageSelectorDisplayed ? this.state.addImageErrorMessage : null}\r\n />}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n this.onAddImage(event, this.defaultAddImageIndex, imageOption)}\r\n >\r\n {imageOption === C.defaultImageOption ?\r\n this.props.i18n.getString('ImageExperience_LoadImage') :\r\n this.props.i18n.getString('ImageExperience_LoadLogo')}\r\n \r\n
\r\n );\r\n }\r\n\r\n renderPreviewCarouselForRightRail({\r\n previewImage,\r\n cropSettings,\r\n previewTexts,\r\n hasCropSettingsChanged,\r\n hasEffectSettingsChanged,\r\n selectedImageType,\r\n }) {\r\n const {\r\n i18n, isMultimediaAd,\r\n isMultimediaAdinMSANEnabled,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n isMSANBoostEnabled,\r\n currentSelectedLogoId,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n isLinkedInAd,\r\n isPMaxAspectRatiosV2Enabled,\r\n } = this.props;\r\n\r\n // get current preview logo, to render it on placement components\r\n const allLogos = this.getImageList(C.imageOptionKeys.Logo);\r\n const curLogos = currentSelectedLogoId\r\n ? _.find(allLogos, logo => this.getFirstElement(logo).Id === currentSelectedLogoId)\r\n : _.first(allLogos);\r\n const curPreviewLogo = _.find(curLogos, placement => placement.isIncluded === true) || _.first(curLogos);\r\n\r\n if (previewImage.Type && !isLinkedInAd) {\r\n previewImage.setCropSettings(cropSettings);\r\n previewImage.setIncluded(true);\r\n\r\n const aspectRatios = C.getAspectRatios({\r\n isMultimediaAd,\r\n isMultimediaAdinMSANEnabled,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n isPMaxAspectRatiosV2Enabled,\r\n });\r\n const aspectRatioConfig = _.get(aspectRatios, previewImage.type, {});\r\n\r\n return (\r\n \r\n \r\n {imageOption === C.defaultImageOption ?\r\n
\r\n {this.props.isLogoEnabled &&\r\n \r\n {imageOption === C.defaultImageOption ?\r\n this.props.i18n.getString(`ImageExperience_LoadImage_Description${this.props.isMultimediaAd ? '_MMA' : ''}`) :\r\n this.props.i18n.getString('ImageExperience_LoadLogo_Description')}\r\n
\r\n }\r\n \r\n {\r\n !isBusinessLogo && this.imageListComponent(C.imageOptionKeys.Image, imagesPortalContainer)\r\n }\r\n {isLogoEnabled &&\r\n {\r\n this.setState({\r\n isImageSelectorDisplayed: newOpen,\r\n addImageErrorMessage: null,\r\n });\r\n }}\r\n perfMarker={perfMarker.createChild('imagePicker')}\r\n uploadImage={args => this.uploadImage(args)}\r\n processUploadedImage={args => this.processUploadedImage(args)}\r\n onProcessUploadComplete={args => this.onProcessUploadComplete(args)}\r\n minSize={minSize}\r\n maxUploadNum={maxUploadNum}\r\n imageExperienceProps={{\r\n suggestion: this.props.suggestion,\r\n finalUrl: this.props.finalUrl,\r\n onUpdateFinalUrl: this.props.onUpdateFinalUrl,\r\n finalUrlProtocol: this.props.finalUrlProtocol,\r\n onUpdateFinalUrlPrefix: this.props.onUpdateFinalUrlPrefix,\r\n suggestionPoller: this.props.suggestionPoller,\r\n isMultimediaAd,\r\n imageOption: this.state.imageOption,\r\n isMMAV2Enabled,\r\n isStoreAppProng,\r\n isStoreAppSpotLight,\r\n isStoreAppTransparentLogo,\r\n isUnifiedAppCampaignWindowsStore,\r\n }}\r\n addImageByUrl={(url, imageSource) => this.addImageByUrl(url, imageSource)}\r\n managedViewSelectionState={this.state.addMediaPanelView}\r\n updateManagedViewSelectionState={newView => this.setState({\r\n addMediaPanelView: newView,\r\n })}\r\n stockImageConfig={{\r\n getStockImages: args => this.stockImageDataService.getStockImages(args),\r\n onSelectStockImage: args => this.selectStockImage(args),\r\n }}\r\n investImageConfig={{\r\n getInvestImages: args => this.investImageDataService.getInvestAssets(args),\r\n }}\r\n socialImageConfig={{\r\n socialMediaDataSource: this.socialMediaDataSource,\r\n activityLogger: this.props.activityLogger,\r\n }}\r\n customMediaSourceConfig={this.getCustomConfigForImageSources}\r\n assetLibraryConfig={this.assetLibraryConfig}\r\n i18n={(newI18n instanceof I18nModel) ? newI18n : i18n}\r\n cid={cid}\r\n aid={aid}\r\n errorMessage={this.state.addImageErrorMessage}\r\n imageType={this.state.editingImage ? this.state.editingImage.Type : null}\r\n activityLogger={this.props.activityLogger}\r\n isAssetLibraryAIGCMVPEnabled={isStoreAppProng || isStoreAppSpotLight || isStoreAppTransparentLogo || isUnifiedAppCampaignWindowsStore ? false : undefined}\r\n isStockImageEnabled={this.props.isStockImageEnabled}\r\n permissions={permissions}\r\n eventHandler={assetLibraryEventHandler}\r\n supportImageUpscale={this.state.isImageUpscaleEnabled && !_.isEmpty(minUploadSize)}\r\n minUploadSize={minUploadSize}\r\n serverContext={this.props.serverContext}\r\n />\r\n this.setState({ imageOption: option })}\r\n aspectRatioOption={this.state.aspectRatioOption}\r\n setAspectRatioOption={option => this.setState({ aspectRatioOption: option })}\r\n suggestion={this.props.suggestion}\r\n suggestionPoller={this.props.suggestionPoller}\r\n isAdCreatorEnabled={isAdCreatorEnabled}\r\n isFinalUrlImageRetrievalEnabled={this.props.isFinalUrlImageRetrievalEnabled}\r\n isLogoEnabled={this.props.isLogoEnabled}\r\n mediaRepository={this.props.mediaRepository}\r\n onUpdateFinalUrlPrefix={this.props.onUpdateFinalUrlPrefix}\r\n onUpdateFinalUrl={this.props.onUpdateFinalUrl}\r\n finalUrl={this.props.finalUrl}\r\n finalUrlProtocol={this.props.finalUrlProtocol}\r\n defaultSelectedPill={this.state.defaultAddImageIndex}\r\n adCreatorScenario={this.props.adCreatorScenario}\r\n isThumbsUpDownEnabled={isThumbsUpDownEnabled}\r\n isTestEnv={isTestEnv}\r\n activityLogger={this.props.activityLogger}\r\n recommendationStockImages={!_.isUndefined(this.props.recommendation) &&\r\n !_.isEmpty(this.props.recommendation.StockImages) ?\r\n this.props.recommendation.StockImages[0] : {}}\r\n onUploadStart={this.props.onUploadStart}\r\n onUploadComplete={this.props.onUploadComplete}\r\n isImageExtensionsEnhancementsEnabled={this.props.isImageExtensionsEnhancementsEnabled}\r\n isMMAV2Enabled={this.props.isMMAV2Enabled}\r\n isStoreAppProng={this.props.isStoreAppProng}\r\n isStoreAppSpotLight={this.props.isStoreAppSpotLight}\r\n isStoreAppTransparentLogo={this.props.isStoreAppTransparentLogo}\r\n isUnifiedAppCampaignWindowsStore={this.props.isUnifiedAppCampaignWindowsStore}\r\n isLinkedInAd={this.props.isLinkedInAd}\r\n />\r\n {\r\n this.props.isAdCreatorEnabled ?\r\n {\r\n const baseImage = this.state.editingImage;\r\n\r\n if (selectedImageType !== this.state.selectedImageType) {\r\n this.setState({ selectedImageType });\r\n }\r\n\r\n const previewImage = new ImageExperienceImage({\r\n src: previewImageUrl,\r\n width: baseImage.Width,\r\n height: baseImage.Height,\r\n type: baseImage.Type,\r\n associationType: baseImage.associationType,\r\n });\r\n\r\n return this.renderPreviewCarouselForRightRail({\r\n previewImage,\r\n cropSettings,\r\n previewTexts,\r\n hasCropSettingsChanged,\r\n hasEffectSettingsChanged,\r\n selectedImageType,\r\n });\r\n }}\r\n adCreatorScenario={this.props.adCreatorScenario}\r\n isThumbsUpDownEnabled={isThumbsUpDownEnabled}\r\n isTestEnv={isTestEnv}\r\n isLinkedInAd={this.props.isLinkedInAd}\r\n onManualCropImage={this.props.onManualCropImage}\r\n onManualCropLogo={this.props.onManualCropLogo}\r\n onRenderAllowedAspectRatioControl={this.props.onRenderAllowedAspectRatioControl}\r\n disabledPivotItemKeys={(this.props.isImproveMMA || this.props.isLinkedInAd) ? [PivotItemKey.Effect] : []}\r\n customizedDefaultSelectedPivotItemKey={(this.props.isImproveMMA || this.props.isLinkedInAd) ? PivotItemKey.Crop : null}\r\n isImageFittingEnabled={this.props.isImageFittingEnabled}\r\n /> :\r\n
\r\n );\r\n\r\n if (!_.isEmpty(imagesPortalContainer)) {\r\n return (\r\n \r\n {\r\n this.props.imageErrorMessages.map(errMsg => (\r\n
\r\n }\r\n {isLogoEnabled &&\r\n this.imageListComponent(C.imageOptionKeys.Logo, logosPortalContainer)\r\n }\r\n {\r\n isBoostPortraitEnabled &&\r\n this.imageListComponent(C.imageOptionKeys.Portrait, portraitPortalContainer)\r\n }\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n
\r\n
{this.props.i18n.getString('Video_Preview_Unavailable')}
\r\n }\r\n \r\n {savedAd.Headline || _.get(Headlines, ['0', 'Text'])}\r\n
\r\n\r\n {savedAd.LongHeadline || _.get(LongHeadlines, ['0', 'Text'])}\r\n
\r\n\r\n {savedAd.Text || _.get(Descriptions, ['0', 'Text'])}\r\n
\r\n\r\n {savedAd.BusinessName}\r\n
\r\n {\r\n this.props.isEditable &&\r\n\r\n \r\n {this.props.i18n.getString('Audience_Campaign_Crud_Ad_EditAd')}\r\n \r\n \r\n {this.props.i18n.getString('Audience_Campaign_Crud_Ad_RemoveAd')}\r\n \r\n
\r\n }\r\n \r\n );\r\n })\r\n }\r\n {\r\n this.props.isEditable &&\r\n \r\n \r\n {this.props.i18n.getString('Audience_Campaign_Crud_Ad_Create_Another')}\r\n \r\n
\r\n }\r\n \r\n {text}\r\n { onRemove &&
);\r\n};\r\n\r\nTagComponent.propTypes = {\r\n text: PropTypes.string.isRequired,\r\n onRemove: PropTypes.func,\r\n classes: PropTypes.shape(mapObject(\r\n getTagStyle(),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nTagComponent.defaultProps = {\r\n onRemove: null,\r\n};\r\n\r\nexport const Tag = withDefaultStyles(TagComponent, getTagStyle);\r\n\r\n","/* eslint-disable react/no-array-index-key */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const ErrorBlock = ({ errors }) => (\r\n errors && errors.map(error => (\r\n \r\n
\r\n );\r\n};\r\n\r\nProgressBar.propTypes = {\r\n i18n: PropTypes.string.isRequired,\r\n uploadpercentage: PropTypes.func.isRequired,\r\n onCancelUpload: PropTypes.string.isRequired,\r\n isRadial: PropTypes.bool,\r\n};\r\n\r\nProgressBar.defaultProps = {\r\n isRadial: false,\r\n};\r\n\r\nexport default ProgressBar;\r\n","import _ from 'underscore';\r\n\r\nconst getFirstElement = (item) => {\r\n if (_.isArray(item)) {\r\n return _.first(item);\r\n }\r\n return item;\r\n};\r\n\r\nexport const getImageListWithoutLogo = imageList => _.filter(imageList, imageArr =>\r\n getFirstElement(imageArr).isLogo !== true);\r\n\r\nexport const getDefaultCurrentSelectedImageId = (imageList) => {\r\n const imageListWithoutLogo = getImageListWithoutLogo(imageList);\r\n const firstImage = _.first(imageListWithoutLogo);\r\n\r\n return _.result(_.first(firstImage), 'BaseId');\r\n};\r\n\r\nconst getLogoList = imageList => _.filter(imageList, imageArr =>\r\n getFirstElement(imageArr).isLogo === true);\r\n\r\nexport const getDefaultCurrentSelectedLogoId = (imageList) => {\r\n const logoList = getLogoList(imageList);\r\n const firstImage = _.first(logoList);\r\n\r\n return _.result(_.first(firstImage), 'Id');\r\n};\r\n\r\n\r\nexport const getDefaultSelectedImageId = (imageList, isLogo) => (isLogo ? getDefaultCurrentSelectedLogoId(imageList) : getDefaultCurrentSelectedImageId(imageList));\r\n","/* eslint-disable max-len */\r\nimport React, { forwardRef, memo, useState, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport $ from 'jquery';\r\n\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { TooltipHost, ActionButton } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport {\r\n attachAIGenAssetContextualAttribute,\r\n} from '@bingads-webui-campaign/responsive-search-ad-strength';\r\nimport { isPlayPausePreviewImageEnabled } from '@bingads-webui-campaign-react/play-pause-buttons';\r\n\r\nimport {\r\n useImageExperienceAdPreviewModel,\r\n AdPreviewCarouselLayoutEx,\r\n AdPreviewSinglePlacementLayout,\r\n} from '@bingads-webui-campaign-react/unified-ad-preview-library-cmui';\r\n\r\nimport getCroppedImage from '../util/get-cropped-image';\r\nimport getGenericImageObjectAsync from '../util/get-generic-image-object';\r\nimport C from '../constants';\r\nimport { ImageExperienceImage } from '../model/image-experience-image';\r\nimport { StyledAdPlacementsGridPreviewPanel } from './styled-ad-placements-grid-preview-panel';\r\nimport { getPreviewCarouselStyle } from '../../style/js/preview-carousel-style';\r\n\r\nimport {\r\n getPlacementTitle as getPlacementTitleImpl,\r\n getPlacementTitleInViewAll,\r\n} from '../ad-preview-library-wrapper/util';\r\nimport { getOnRenderPlacement } from './unified-placement-render';\r\n\r\nexport const isInvalidImageSize = (image, minSize, isAdCreatorEnabled) => {\r\n if (!image) {\r\n return false;\r\n }\r\n\r\n let widthToCheck = image.Width;\r\n let heightToCheck = image.Height;\r\n\r\n if (isAdCreatorEnabled\r\n && image.BaseImage\r\n && image.BaseImage.CropSettings\r\n && image.BaseImage.CropSettings.SourceWidth > 0\r\n && image.BaseImage.CropSettings.SourceHeight > 0) {\r\n widthToCheck = image.BaseImage.CropSettings.SourceWidth;\r\n heightToCheck = image.BaseImage.CropSettings.SourceHeight;\r\n }\r\n\r\n return image && minSize && (widthToCheck < minSize[0] || heightToCheck < minSize[1]);\r\n};\r\n\r\nexport const UnStyledPreviewCarousel = forwardRef(({\r\n adPreviewConfig,\r\n\r\n imageList,\r\n genericImage: genericImageProp,\r\n placeHolderImages: placeHolderImagesProp,\r\n totalImageListCount,\r\n previewTexts,\r\n\r\n enableAutoRotate,\r\n disablePlacementActions,\r\n isAdCreatorEnabled,\r\n isMultimediaAd,\r\n isImageAdExtensionMode,\r\n isImageExtensionsEnhancementsEnabled,\r\n isImageFittingEnabled,\r\n // eligibleLayout,\r\n\r\n onAddAspectRatio: onAddAspectRatioProp,\r\n onCropImage: onCropImageProp,\r\n onReplaceImage: onReplaceImageProp,\r\n onRemoveAspectRatio: onRemoveAspectRatioProp,\r\n onUsedViewAllPlacements,\r\n\r\n customClasses,\r\n permissions,\r\n instrumentation,\r\n adCreatorScenario,\r\n i18n,\r\n newI18n,\r\n classes,\r\n}, ref) => {\r\n // states\r\n const [activeIndex, setActiveIndex] = useState(0);\r\n const [defaultImages, setDefaultImages] = useState([]);\r\n const [placeHolderImages, setPlaceHolderImages] = useState([]);\r\n const [isViewAllPanelOpen, setIsViewAllPanelOpen] = useState(false);\r\n\r\n const isMultiMediaAdsPhase2Enabled = permissions && permissions.IsMultiMediaAdsPhase2Enabled;\r\n const isRecommendationTypeImproveMultiMediaAdsEnabled = true;\r\n\r\n // image extension features are being released after AdCreatorV2 has been GAed\r\n const enableCreatorFeatures =\r\n (isAdCreatorEnabled && !isImageAdExtensionMode) || (isImageAdExtensionMode && isImageExtensionsEnhancementsEnabled);\r\n\r\n const isSelectedImageLogo = useMemo(() => {\r\n const { isLogo: isDefaultImageLogo, Type } = (defaultImages && defaultImages[activeIndex]) || {};\r\n const image = _.find(imageList, imageObj => imageObj.Type === Type);\r\n if (image) {\r\n return image.isLogo;\r\n }\r\n return isDefaultImageLogo;\r\n }, [defaultImages, activeIndex, imageList]);\r\n\r\n const imageListForDisplay = useMemo(() => {\r\n // if defaultImages is not empty, sort image list by defaultImages order\r\n const theImageListForDisplay = !_.isEmpty(defaultImages) ? _.map(defaultImages, (defaultImage) => {\r\n const imgSet = _.find(imageList, imageObj => imageObj.Type === defaultImage.Type);\r\n\r\n if (imgSet) {\r\n return imgSet;\r\n }\r\n\r\n return defaultImage;\r\n }) : imageList;\r\n\r\n if (isSelectedImageLogo) {\r\n _.each(theImageListForDisplay, (imageObj) => {\r\n imageObj.isLogo = true; // eslint-disable-line no-param-reassign\r\n });\r\n }\r\n\r\n return theImageListForDisplay;\r\n }, [defaultImages, isSelectedImageLogo, imageList]);\r\n\r\n const aspectRatios = useMemo(() => {\r\n const curAspectRatios = isMultimediaAd ?\r\n C.getMmaAspectRatios(isSelectedImageLogo ?\r\n C.imageOptionKeys.Logo : C.imageOptionKeys.Image) : C.aspectRatios;\r\n return curAspectRatios;\r\n }, [isMultimediaAd, isSelectedImageLogo]);\r\n\r\n useEffect(() => {\r\n if (_.result(_.first(imageListForDisplay), 'isRecommendedImage')) {\r\n // Registers AI generated asset contextual attribute popup to listen for key/mouse events\r\n const element = $('.iconba.iconba-Lightbulb.new-preview-carousel');\r\n attachAIGenAssetContextualAttribute(_.extend({\r\n element,\r\n i18n,\r\n improveMMAOption: { type: 'Image' },\r\n newI18n,\r\n }));\r\n }\r\n }, [i18n, imageListForDisplay, newI18n]);\r\n\r\n const setupImagesAsync = useCallback((aspectRatiosOrder) => {\r\n const imagesToSetup = [\r\n genericImageProp,\r\n ...placeHolderImagesProp,\r\n ];\r\n\r\n const setupPromises = _.map(imagesToSetup, imageToSetup => getGenericImageObjectAsync(imageToSetup).then((imageObj) => {\r\n let croppedImages = getCroppedImage({\r\n originalImageToCrop: imageObj,\r\n isMultimediaAd,\r\n });\r\n croppedImages = _.sortBy(croppedImages, image => aspectRatiosOrder.indexOf(image.type));\r\n _.each(croppedImages, (image) => {\r\n image.isIncluded = false; // eslint-disable-line no-param-reassign\r\n });\r\n return croppedImages;\r\n }));\r\n\r\n Promise.all(setupPromises).then(([defaultImages1, ...placeHolderImagesList]) => {\r\n setDefaultImages(defaultImages1);\r\n setPlaceHolderImages(_.isEmpty(placeHolderImagesList) ? [defaultImages1] : placeHolderImagesList);\r\n });\r\n }, [genericImageProp, isMultimediaAd, placeHolderImagesProp]);\r\n\r\n useEffect(() => {\r\n const aspectRatiosOrder = C.getImageTypesWithOrder(isMultimediaAd);\r\n setupImagesAsync(aspectRatiosOrder);\r\n }, [isMultimediaAd, setupImagesAsync]);\r\n\r\n const {\r\n imageExperiencePlacementSets: placementSets,\r\n onUpdateImageExperienceImageList,\r\n } = useImageExperienceAdPreviewModel(adPreviewConfig.placementConfig, null, isImageFittingEnabled);\r\n\r\n const placementList = useMemo(() => {\r\n // should only have one placement set\r\n const list = _.chain(placementSets).map(placementSet => placementSet.placementList).flatten().value();\r\n return list || [];\r\n }, [placementSets]);\r\n\r\n useEffect(() => {\r\n // placeholder images are used in multi-images placements\r\n const newImageList = [imageListForDisplay, ...placeHolderImages];\r\n onUpdateImageExperienceImageList(newImageList, null);\r\n }, [imageListForDisplay, onUpdateImageExperienceImageList, placeHolderImages]);\r\n\r\n const [onRenderPlacement, onRenderPlacementGridView] = useMemo(() => {\r\n const params = {\r\n isMultimediaAd,\r\n isMultiMediaAdsPhase2Enabled,\r\n opacityChangeEnabled: isMultimediaAd,\r\n previewTexts,\r\n i18n,\r\n permissions,\r\n };\r\n return [\r\n getOnRenderPlacement(params, classes.placementContainerRoot),\r\n getOnRenderPlacement(params, classes.placementContainerRootGridView),\r\n ];\r\n }, [classes, i18n, isMultiMediaAdsPhase2Enabled, isMultimediaAd, previewTexts, permissions]);\r\n\r\n const getPlacementTitle = useCallback((placementIndex, isInViewAllPanel = false) => {\r\n if (isInViewAllPanel) {\r\n return getPlacementTitleInViewAll(adPreviewConfig, placementIndex, i18n);\r\n }\r\n return getPlacementTitleImpl(adPreviewConfig, placementIndex, i18n);\r\n }, [adPreviewConfig, i18n]);\r\n\r\n const setPreviewIndexByType = useCallback((type) => {\r\n const currentIndex = _.findIndex(placementList, ({ placementMeta }) =>\r\n type && placementMeta && placementMeta.imageType && placementMeta.imageType.toLowerCase()=== type.toLowerCase());\r\n if (currentIndex >= 0) {\r\n setActiveIndex(currentIndex);\r\n }\r\n }, [placementList]);\r\n\r\n useImperativeHandle(ref, () => ({\r\n setPreviewIndexByType,\r\n }));\r\n\r\n const getEditingImageIndex = useCallback(\r\n e => (_.isUndefined(e.target.dataset.index) ? activeIndex : parseInt(e.target.dataset.index, 10)),\r\n [activeIndex]\r\n );\r\n\r\n const onAddAspectRatio = useCallback((e) => {\r\n const idx = getEditingImageIndex(e);\r\n onAddAspectRatioProp(imageListForDisplay[idx].type);\r\n }, [getEditingImageIndex, imageListForDisplay, onAddAspectRatioProp]);\r\n\r\n const onCrop = useCallback((e) => {\r\n const index = getEditingImageIndex(e);\r\n const { placementMeta } = placementList[index] || {};\r\n const { placementType } = placementMeta || {};\r\n\r\n if (enableCreatorFeatures) {\r\n setIsViewAllPanelOpen(false);\r\n onCropImageProp(imageListForDisplay[index], placementType);\r\n } else {\r\n onCropImageProp(imageListForDisplay[index], placementType);\r\n }\r\n\r\n if (isAdCreatorEnabled) {\r\n const { editPlacementActivity } =\r\n getAdCreatorInstrumentation(instrumentation, adCreatorScenario);\r\n\r\n editPlacementActivity.trace('User opened edit placement panel');\r\n }\r\n }, [adCreatorScenario, enableCreatorFeatures, getEditingImageIndex, imageListForDisplay, instrumentation, isAdCreatorEnabled, onCropImageProp, placementList]);\r\n\r\n const onReplace = useCallback((e) => {\r\n const index = getEditingImageIndex(e);\r\n setIsViewAllPanelOpen(false);\r\n onReplaceImageProp(imageListForDisplay[index]);\r\n }, [getEditingImageIndex, imageListForDisplay, onReplaceImageProp]);\r\n\r\n const onRemoveAspectRatio = useCallback((e) => {\r\n const index = getEditingImageIndex(e);\r\n onRemoveAspectRatioProp(imageListForDisplay[index].type);\r\n }, [getEditingImageIndex, imageListForDisplay, onRemoveAspectRatioProp]);\r\n\r\n const getAdPreviewTitle = useCallback(() => getPlacementTitle(activeIndex), [activeIndex, getPlacementTitle]);\r\n\r\n const isPlacementActionsEnabled = useMemo(\r\n () => totalImageListCount !== 0 && !disablePlacementActions,\r\n [disablePlacementActions, totalImageListCount]\r\n );\r\n\r\n const getValidationMessage = useCallback((image) => {\r\n if (_.result(image, 'isIncluded') !== true) {\r\n const isSupported = image && aspectRatios[image.type];\r\n const minSize = image && _.result(aspectRatios[image.type], 'minSize');\r\n\r\n if (!isSupported) {\r\n return (\r\n \r\n { i18n.getString('ImageEditor_Not_Supported') }\r\n \r\n );\r\n }\r\n\r\n return isInvalidImageSize(image, minSize, isAdCreatorEnabled) &&\r\n \r\n {\r\n i18n.getString('ImageEditor_SizeValidationFailTemplate', {\r\n width: minSize[0],\r\n height: minSize[1],\r\n })\r\n }\r\n ;\r\n }\r\n\r\n return null;\r\n }, [aspectRatios, i18n, isAdCreatorEnabled]);\r\n\r\n const getAdPreviewButtonsForAdCreator = useCallback((cellIndex = -1) => {\r\n if (isMultimediaAd && !_.isEmpty(imageList)) {\r\n const selectedIndex = cellIndex > -1 ? cellIndex : activeIndex;\r\n const selectedImage = imageListForDisplay[selectedIndex];\r\n const isRequired = selectedImage && _.result(aspectRatios[selectedImage.type], 'minimumRequirements') > 0 && totalImageListCount === 1;\r\n const minSize = selectedImage && _.result(aspectRatios[selectedImage.type], 'minSize');\r\n const isSupported = selectedImage && aspectRatios[selectedImage.type];\r\n\r\n if (!isSupported) {\r\n return null;\r\n }\r\n\r\n if (isInvalidImageSize(selectedImage, minSize, isAdCreatorEnabled)) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {!isRadial && `${uploadpercentage}%`}\r\n
\r\n {isRadial? \r\n {_.result(selectedImage, 'isIncluded') !== true ?\r\n (\r\n \r\n { i18n.getString('ImageEditor_Include_AspectRatio') }\r\n \r\n ) :\r\n (\r\n \r\n {!_.result(selectedImage, 'disableEdit') &&\r\n \r\n {i18n.getString('ImageExperience_Edit_Aspect_Ratio')}\r\n \r\n }\r\n {isRequired &&\r\n \r\n \r\n { i18n.getString('ImageEditor_Exclude_AspectRatio') }\r\n \r\n \r\n }\r\n {!isRequired &&\r\n \r\n { i18n.getString('ImageEditor_Exclude_AspectRatio') }\r\n \r\n }\r\n \r\n )\r\n }\r\n
\r\n );\r\n } else if (isImageExtensionsEnhancementsEnabled && !_.isEmpty(imageList)) {\r\n return (\r\n \r\n \r\n { i18n.getString('ImageEditor_CropImage') }\r\n \r\n \r\n { i18n.getString('ImageExperience_Replace')}\r\n \r\n
\r\n );\r\n }\r\n return null;\r\n }, [activeIndex, aspectRatios, customClasses.reCropButton, i18n, imageList, imageListForDisplay, isAdCreatorEnabled, isImageExtensionsEnhancementsEnabled, isMultimediaAd, onAddAspectRatio, onCrop, onRemoveAspectRatio, onReplace, totalImageListCount]);\r\n\r\n const getAdPreviewActions = useCallback(() => {\r\n if (isMultimediaAd && !_.isEmpty(imageList)) {\r\n const selectedImage = imageListForDisplay[activeIndex];\r\n const validationMsgElement = getValidationMessage(selectedImage);\r\n\r\n return (\r\n \r\n {_.result(selectedImage, 'isIncluded') !== true ?\r\n (\r\n \r\n { validationMsgElement }\r\n { !validationMsgElement && !isAdCreatorEnabled &&\r\n \r\n \r\n { i18n.getString('ImageEditor_Include_AspectRatio_Label') }\r\n \r\n \r\n { i18n.getString('ImageEditor_Include_AspectRatio') }\r\n \r\n \r\n }\r\n \r\n ) :\r\n (\r\n !isAdCreatorEnabled &&\r\n \r\n \r\n { _.result(selectedImage, 'isLogo') ?\r\n i18n.getString('ImageEditor_CropLogo_Label') :\r\n i18n.getString('ImageEditor_CropImage_Label') }\r\n \r\n {!_.result(selectedImage, 'disableEdit') &&\r\n \r\n { i18n.getString('ImageEditor_CropImage') }\r\n \r\n }\r\n \r\n { i18n.getString('ImageEditor_Exclude_AspectRatio') }\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n }\r\n return null;\r\n }, [activeIndex, getValidationMessage, i18n, imageList, imageListForDisplay, isAdCreatorEnabled, isMultimediaAd, onAddAspectRatio, onCrop, onRemoveAspectRatio]);\r\n\r\n const getAdPreviewHeader = useCallback(() => {\r\n const enableActionBtn = isPlacementActionsEnabled;\r\n\r\n return isAdCreatorEnabled && isMultimediaAd ?\r\n (\r\n \r\n
\r\n ) : (\r\n \r\n {getAdPreviewTitle()}\r\n
\r\n \r\n {\r\n enableActionBtn && getAdPreviewButtonsForAdCreator()\r\n }\r\n \r\n {getAdPreviewTitle()}\r\n
\r\n );\r\n }, [getAdPreviewButtonsForAdCreator, getAdPreviewTitle, isAdCreatorEnabled, isMultimediaAd, isPlacementActionsEnabled]);\r\n\r\n const getAdPreviewHeaderInternal = useCallback(({ title, index, enableActionBtn }) => {\r\n const selectedImage = imageListForDisplay[index];\r\n const isSelectedImageIncluded = _.result(selectedImage, 'isIncluded');\r\n const minSize = selectedImage && aspectRatios[selectedImage.type].minSize;\r\n const hideActionBtn = !enableActionBtn\r\n || (!isSelectedImageIncluded && isInvalidImageSize(selectedImage, minSize, isAdCreatorEnabled));\r\n\r\n return (\r\n \r\n
\r\n );\r\n }, [aspectRatios, getAdPreviewButtonsForAdCreator, imageListForDisplay, isAdCreatorEnabled]);\r\n\r\n const enableViewAllBtn = isPlacementActionsEnabled && enableCreatorFeatures;\r\n\r\n return (\r\n \r\n {title}\r\n
\r\n \r\n {!hideActionBtn &&\r\n \r\n {getAdPreviewButtonsForAdCreator(index)}\r\n
\r\n }\r\n \r\n {getAdPreviewHeader()}\r\n {\r\n isRecommendationTypeImproveMultiMediaAdsEnabled\r\n && _.result(_.first(imageListForDisplay), 'isRecommendedImage') &&\r\n ()}\r\n onClick={() => {\r\n const { viewAllPlacementsActivity } = getAdCreatorInstrumentation(instrumentation, adCreatorScenario); // eslint-disable-line max-len\r\n\r\n viewAllPlacementsActivity.trace('UserOpenedViewAllPlacements');\r\n onUsedViewAllPlacements();\r\n setIsViewAllPanelOpen(true);\r\n }}\r\n >\r\n { i18n.getString('ImageExperience_View_Placements_Example') }\r\n \r\n }\r\n {/* This grid preview is another layout of carousel preview */}\r\n { enableViewAllBtn &&\r\n {\r\n setIsViewAllPanelOpen(false);\r\n }}\r\n className={classes.gridPreviewContainer}\r\n cellsNumberPerRow={2}\r\n totalCount={_.size(imageListForDisplay)}\r\n cellHeight={510}\r\n onRenderCell={(cellIndex) => {\r\n const imageAsset = imageListForDisplay[cellIndex];\r\n\r\n return (\r\n
\r\n );\r\n});\r\n\r\nUnStyledPreviewCarousel.propTypes = {\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n IsMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n }),\r\n genericImage: PropTypes.string.isRequired,\r\n imageList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceImage)).isRequired,\r\n placeHolderImages: PropTypes.arrayOf(PropTypes.string),\r\n isImageAdExtensionMode: PropTypes.bool,\r\n // eligibleLayout: PropTypes.string,\r\n isMultimediaAd: PropTypes.bool,\r\n onCropImage: PropTypes.func,\r\n onAddAspectRatio: PropTypes.func,\r\n onRemoveAspectRatio: PropTypes.func,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n enableAutoRotate: PropTypes.bool,\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }),\r\n totalImageListCount: PropTypes.number,\r\n adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }),\r\n classes: PropTypes.shape({\r\n gridPreviewContainer: PropTypes.string,\r\n PlayPauseButtons: PropTypes.string,\r\n PlayPauseButtonsContainer: PropTypes.string,\r\n }),\r\n disablePlacementActions: PropTypes.bool,\r\n onUsedViewAllPlacements: PropTypes.func,\r\n isImageExtensionsEnhancementsEnabled: PropTypes.bool,\r\n onReplaceImage: PropTypes.func,\r\n customClasses: PropTypes.shape({\r\n viewAllPlacementsButton: PropTypes.string,\r\n reCropButton: PropTypes.string,\r\n }),\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n isImageFittingEnabled: PropTypes.bool,\r\n};\r\n\r\nUnStyledPreviewCarousel.defaultProps = {\r\n isImageAdExtensionMode: false,\r\n isMultimediaAd: false,\r\n // eligibleLayout: '',\r\n placeHolderImages: [],\r\n onCropImage: _.noop,\r\n onReplaceImage: _.noop,\r\n onAddAspectRatio: _.noop,\r\n onRemoveAspectRatio: _.noop,\r\n permissions: {},\r\n enableAutoRotate: false,\r\n isAdCreatorEnabled: false,\r\n instrumentation: {\r\n addScenario: _.noop,\r\n },\r\n totalImageListCount: 0,\r\n adCreatorScenario: null,\r\n classes: {},\r\n disablePlacementActions: false,\r\n onUsedViewAllPlacements: _.noop,\r\n isImageExtensionsEnhancementsEnabled: false,\r\n customClasses: {},\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n isImageFittingEnabled: false,\r\n};\r\n\r\nexport const UnifiedPreviewCarousel = memo(forwardRef((props, ref) => {\r\n const classes = useDefaultStyles(getPreviewCarouselStyle);\r\n return (\r\n
\r\n }\r\n {getAdPreviewActions()}\r\n \r\n
\r\n { enableViewAllBtn &&\r\n \r\n {isMultimediaAd ? i18n.getString('ImagePreview_Disclaimer_Message_MultimediaAd') : i18n.getString('ImagePreview_Disclaimer_Message')}\r\n
\r\n \r\n {getAdPreviewHeaderInternal({\r\n title: getPlacementTitle(cellIndex, true),\r\n index: cellIndex,\r\n enableActionBtn: true,\r\n })}\r\n {getValidationMessage(imageAsset)}\r\n {placementList && placementList[cellIndex] ? (\r\n
\r\n );\r\n }}\r\n />\r\n }\r\n \r\n
\r\n );\r\n }, [aspectRatios, getActionButtons, imageListForDisplay]);\r\n\r\n const getAdPreviewHeader = useCallback(({ enableActionBtn }) => {\r\n const title = getAdPreviewTitle();\r\n\r\n return isAdCreatorEnabled ?\r\n \r\n {title}\r\n
\r\n \r\n {!hideActionBtn &&\r\n \r\n {getActionButtons({\r\n isIncluded: isSelectedImageIncluded,\r\n index,\r\n })}\r\n
\r\n }\r\n \r\n {title}\r\n
\r\n );\r\n }, [activeIndex, getAdPreviewHeaderInternal, getAdPreviewTitle, isAdCreatorEnabled]);\r\n\r\n const getValidationMessage = useCallback((image) => {\r\n const isSelectedImageIncluded = _.result(image, 'isIncluded');\r\n const minSize = image && aspectRatios[image.type].minSize;\r\n\r\n if (!isSelectedImageIncluded) {\r\n return isInvalidImageSize(image, minSize) &&\r\n \r\n {\r\n i18n.getString('ImageEditor_SizeValidationFailTemplate', {\r\n width: minSize[0],\r\n height: minSize[1],\r\n })\r\n }\r\n ;\r\n }\r\n\r\n return null;\r\n }, [aspectRatios, i18n]);\r\n\r\n const getAdPreviewActions = useCallback(() => {\r\n const selectedImage = imageListForDisplay[activeIndex];\r\n\r\n /* istanbul ignore if */\r\n if (!selectedImage) {\r\n return null;\r\n }\r\n\r\n const isSelectedImageIncluded = _.result(selectedImage, 'isIncluded');\r\n const hideActionButtons = isAdCreatorEnabled;\r\n const validationMsgElement = getValidationMessage(selectedImage);\r\n\r\n return (\r\n \r\n {!isSelectedImageIncluded ?\r\n (\r\n \r\n {validationMsgElement}\r\n {!validationMsgElement && !hideActionButtons &&\r\n getActionButtons({ isIncluded: isSelectedImageIncluded, index: activeIndex })\r\n }\r\n \r\n ) :\r\n (!hideActionButtons\r\n && getActionButtons({ isIncluded: isSelectedImageIncluded, index: activeIndex }))\r\n }\r\n
\r\n );\r\n }, [activeIndex, getActionButtons, getValidationMessage, imageListForDisplay, isAdCreatorEnabled]);\r\n\r\n const enableActionBtn = isPlacementActionsEnabled;\r\n const enableViewAllBtn = isMSANBoostEnabled ? false : enableActionBtn && isAdCreatorEnabled;\r\n\r\n return (\r\n \r\n {getAdPreviewHeader({ enableActionBtn })}\r\n {\r\n isRecommendationTypeImproveMultiMediaAdsEnabled\r\n && _.result(_.first(imageListForDisplay), 'isRecommendedImage') &&\r\n ()}\r\n onClick={() => {\r\n const { viewAllPlacementsActivity } = getAdCreatorInstrumentation(instrumentation, adCreatorScenario); // eslint-disable-line max-len\r\n\r\n viewAllPlacementsActivity.trace('UserOpenedViewAllPlacements');\r\n onUsedViewAllPlacements();\r\n setIsViewAllPanelOpen(true);\r\n }}\r\n >\r\n {i18n.getString('ImageExperience_View_Placements_Example')}\r\n \r\n }\r\n {/* This grid preview is another layout of carousel preview */}\r\n {enableViewAllBtn &&\r\n {\r\n setIsViewAllPanelOpen(false);\r\n }}\r\n className={classes.gridPreviewContainer}\r\n cellsNumberPerRow={2}\r\n // totalCount={_.size(imageListForDisplay)}\r\n totalCount={_.size(placementList)}\r\n onRenderCell={(cellIndex) => {\r\n const imageAsset = imageListForDisplay[cellIndex];\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nUnStyledMMAMSANPreviewCarousel.propTypes = {\r\n adPreviewConfig: PropTypes.shape({\r\n placementConfig: PropTypes.arrayOf(PropTypes.shape({})),\r\n }).isRequired,\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n callToAction: PropTypes.string,\r\n businessName: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n hotspots: PropTypes.arrayOf(PropTypes.shape({\r\n title: PropTypes.string,\r\n desc: PropTypes.string,\r\n actionText: PropTypes.string,\r\n uri: PropTypes.string,\r\n })),\r\n genericImage: PropTypes.string.isRequired,\r\n imageList: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceImage)),\r\n logo: PropTypes.instanceOf(ImageExperienceImage),\r\n onCropImage: PropTypes.func,\r\n onAddAspectRatio: PropTypes.func,\r\n onRemoveAspectRatio: PropTypes.func,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n isMSANBoostEnabled: PropTypes.bool,\r\n enableAutoRotate: PropTypes.bool,\r\n totalImageListCount: PropTypes.number,\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }).isRequired,\r\n isOnlyOneIncludedImage: PropTypes.func,\r\n classes: PropTypes.shape({\r\n gridPreviewContainer: PropTypes.string,\r\n PlayPauseButtons: PropTypes.string,\r\n PlayPauseButtonsContainer: PropTypes.string,\r\n }),\r\n disablePlacementActions: PropTypes.bool,\r\n adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }),\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }),\r\n onUsedViewAllPlacements: PropTypes.func,\r\n permissions: PropTypes.shape({}),\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n isMMAV2Enabled: PropTypes.bool,\r\n isBoost200x100ImageEnabled: PropTypes.bool,\r\n isBoostNewAspectRatioSupportEnabled: PropTypes.bool,\r\n\r\n isImageFittingEnabled: PropTypes.bool,\r\n};\r\n\r\nUnStyledMMAMSANPreviewCarousel.defaultProps = {\r\n onCropImage: _.noop,\r\n onAddAspectRatio: _.noop,\r\n onRemoveAspectRatio: _.noop,\r\n isOnlyOneIncludedImage: _.noop,\r\n isAdCreatorEnabled: false,\r\n logo: null,\r\n isMSANBoostEnabled: false,\r\n enableAutoRotate: false,\r\n totalImageListCount: 0,\r\n classes: {},\r\n hotspots: [],\r\n imageList: [],\r\n disablePlacementActions: false,\r\n adCreatorScenario: null,\r\n instrumentation: {\r\n addScenario: _.noop,\r\n },\r\n onUsedViewAllPlacements: _.noop,\r\n permissions: {},\r\n newI18n: {\r\n getString: _.noop,\r\n },\r\n isMMAV2Enabled: false,\r\n isBoost200x100ImageEnabled: false,\r\n isBoostNewAspectRatioSupportEnabled: false,\r\n\r\n isImageFittingEnabled: false,\r\n};\r\n\r\nexport const UnifiedMMAMSANPreviewCarousel =\r\n withDefaultStyles(UnStyledMMAMSANPreviewCarousel, getPreviewCarouselStyle);\r\n","// set opacity to the overlay, so that content under blocker is still visible.\r\nexport const customizedUIBlockerStyle = {\r\n '& .react-block-ui > div:last-child': {\r\n backgroundColor: 'rgba(255, 255, 255, 0.4) !important',\r\n\r\n '& div[class*=blockerIndicator]': {\r\n display: 'inline-flex',\r\n alignItems: 'end',\r\n },\r\n },\r\n};\r\n","import { multiImageInnerCarouselStyles } from '@bingads-webui-campaign-react/shared-image-preview-styles';\r\nimport { floatButtonStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { customizedUIBlockerStyle } from './customize-ui-blocker-style';\r\n\r\nexport const getImageExtensionsPaneStyle = (_, { palette, iconFontFamily = 'MsAds MDL2 Assets' }) => {\r\n const border = '1px solid #B3B0AD';\r\n\r\n return {\r\n panelFooter: {\r\n background: 'white',\r\n bottom: 0,\r\n position: 'fixed',\r\n border: 'none',\r\n '& button ~ button': {\r\n marginLeft: 8,\r\n },\r\n },\r\n cropPanel: {\r\n '& .image-crop-editor-container': {\r\n height: 'calc(100% - 60px)',\r\n overflowY: 'auto',\r\n },\r\n '& .extension-images-control': {\r\n '& .image-experience-content': {\r\n marginBottom: '10px',\r\n },\r\n '& .error': {\r\n color: '#a4262c',\r\n },\r\n '& .image-section-label': {\r\n display: 'inline-block',\r\n '& label': {\r\n float: 'left',\r\n },\r\n '& .helpbutton': {\r\n float: 'left',\r\n },\r\n },\r\n '& .add-image-button': {\r\n display: 'block',\r\n background: `${palette.white} !important`,\r\n border: `1px solid ${palette.neutralSecondaryAlt}`,\r\n borderRadius: 2,\r\n boxSizing: 'border-box',\r\n fontWeight: 600,\r\n margin: '0 !important',\r\n\r\n '&:before': {\r\n color: palette.themePrimary,\r\n content: '\"\\\\E710\"',\r\n fontFamily: iconFontFamily,\r\n fontWeight: 'normal',\r\n marginRight: 8,\r\n },\r\n },\r\n '& .new-preview-carousel-container': {\r\n // inner carousel in a carousel\r\n border: '1px solid #C8C8C8',\r\n margin: 0,\r\n width: '100%',\r\n minWidth: 669,\r\n ...multiImageInnerCarouselStyles(palette, iconFontFamily),\r\n\r\n '& .new-responsive-ad-preview-container': {\r\n height: 500,\r\n overflow: 'hidden',\r\n\r\n '& .responsive-ad-preview-content': {\r\n border: '1px solid #C8C8C8',\r\n },\r\n },\r\n\r\n '& .preview-type-string': {\r\n bottom: 25,\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n paddingTop: 12,\r\n position: 'fixed',\r\n textAlign: 'center',\r\n width: '100%',\r\n },\r\n '& .additional-disclaimer': {\r\n fontSize: 12,\r\n lineHeight: '20px',\r\n textAlign: 'left',\r\n bottom: 0,\r\n padding: '0 24px',\r\n position: 'fixed',\r\n },\r\n '& .disclaimer-info': {\r\n fontSize: 12,\r\n lineHeight: '20px',\r\n textAlign: 'left',\r\n padding: '0 24px 20px 24px',\r\n },\r\n },\r\n '& .image-experience-content .image-list-view-content': {\r\n position: 'relative',\r\n '& .image-list': {\r\n '& .image-list-label': {\r\n fontSize: 14,\r\n fontWeight: 600,\r\n lineHeight: '19px',\r\n },\r\n\r\n '& .image-list-content': {\r\n display: 'flex',\r\n border: '1px solid #C8C8C8',\r\n margin: '8px 0 0 0',\r\n padding: '16px 16px 12px 16px',\r\n width: 'fit-content',\r\n\r\n '& .image-list-item': {\r\n float: 'none',\r\n padding: 0,\r\n\r\n '& ~ .image-list-item': {\r\n marginLeft: 8,\r\n },\r\n\r\n '& .dropdown.btn-group': {\r\n display: 'block',\r\n\r\n '&.image-edit-dropdown .dropdown-toggle': {\r\n extend: floatButtonStyle({ palette }).floatButton,\r\n fontFamily: iconFontFamily,\r\n fontSize: 16,\r\n lineHeight: 1,\r\n float: 'right',\r\n margin: 0,\r\n\r\n '&:before': {\r\n content: '\"\\\\E70F\"',\r\n },\r\n },\r\n\r\n '& .caret': {\r\n display: 'none',\r\n },\r\n },\r\n\r\n '& .image-item-ratio-label': {\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n },\r\n },\r\n\r\n '& .remove-all-button': {\r\n background: 'none',\r\n border: 'none',\r\n color: palette.neutralSecondary,\r\n fontFamily: iconFontFamily,\r\n fontSize: 12,\r\n lineHeight: 1,\r\n margin: '-14px -14px 0 0',\r\n padding: 8,\r\n width: 28,\r\n height: 28,\r\n\r\n '&:before': {\r\n content: '\"\\\\E711\"',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '& .image-experience-content .image-list-view-content .image-list': {\r\n margin: '10px 0',\r\n '& .image-list-label': {\r\n fontSize: 12,\r\n fontWeight: '700',\r\n },\r\n '& .image-list-item': {\r\n border: 'none',\r\n position: 'relative',\r\n float: 'left',\r\n padding: 5,\r\n fontSize: 12,\r\n '& .image-item-ratio-label': {\r\n marginTop: 5,\r\n height: '20px !important',\r\n textAlign: 'center',\r\n },\r\n '& .empty-image-list-item': {\r\n '& button': {\r\n border: 'dashed',\r\n background: 'white',\r\n borderColor: '#CCCCCC',\r\n borderWidth: 'thin',\r\n color: '#00a2ff',\r\n textAlign: 'center',\r\n },\r\n '& button:focus': {\r\n outline: 'none !important',\r\n },\r\n },\r\n '& .image-list-item-image': {\r\n position: 'relative',\r\n '& .dropdown.btn-group': {\r\n display: 'none',\r\n position: 'absolute',\r\n width: '100%',\r\n bottom: '0',\r\n '& .image-edit-dropdown .dropdown-toggle': {\r\n color: 'white',\r\n background: 'rgba(0,0,0,0.3)',\r\n width: '100%',\r\n border: '0',\r\n padding: 2,\r\n },\r\n '& .dropdown-menu': {\r\n margin: '0',\r\n borderRadius: '0',\r\n border: '2px solid rgba(0,0,0,0.15)',\r\n },\r\n '& .dropdown-menu li': {\r\n float: 'unset',\r\n },\r\n '& .dropdown-menu li a': {\r\n paddingLeft: 10,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n container: {\r\n margin: '16px 0',\r\n paddingBottom: 10,\r\n borderTop: border,\r\n borderBottom: border,\r\n\r\n ...customizedUIBlockerStyle,\r\n\r\n '& .teaching-bubble-content': {\r\n minWidth: 364,\r\n },\r\n\r\n '& .image-suggestion-carousel-root .panel': {\r\n marginTop: 0,\r\n },\r\n },\r\n addIcon: {\r\n marginRight: 8,\r\n top: 0,\r\n color: palette.themeSecondary,\r\n fontSize: 16,\r\n },\r\n listContainer: {\r\n margin: '16px 0 0 0',\r\n },\r\n alertBanner: {\r\n marginTop: 5,\r\n },\r\n labelContainer: {\r\n fontWeight: 400,\r\n fontSize: 18,\r\n lineHeight: '31px',\r\n },\r\n };\r\n};\r\n\r\nexport const overrideImageRecommendationClasses = {\r\n panelHeading: {\r\n display: 'flex',\r\n },\r\n panelTitle: {\r\n flexGrow: 0,\r\n },\r\n seeAll: {\r\n overflow: 'visible',\r\n maxWidth: '50px',\r\n },\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\n\r\nexport const DescriptionView = ({\r\n i18n,\r\n selectedImgExtensionsForAssociation,\r\n limit,\r\n className,\r\n}) => {\r\n let localizedText;\r\n\r\n if (_.size(selectedImgExtensionsForAssociation) === 0) {\r\n localizedText = i18n.getString(_TL_('You don\\'t have any image extensions associated with this ad group. Increase ad performance by adding images to your ads.'));\r\n } else {\r\n localizedText = i18n.getString(\r\n _TL_('You can preview what your ad will look like with image extensions already associated with this ad group. Max {{limit}} image extensions per ad group.'),\r\n { limit }\r\n );\r\n }\r\n\r\n return (\r\n
\r\n }\r\n {enableActionBtn && getAdPreviewActions()}\r\n \r\n
\r\n {enableViewAllBtn &&\r\n \r\n {i18n.getString('ImagePreview_Disclaimer_Message_MultimediaAd')}\r\n
\r\n \r\n {getAdPreviewHeaderInternal({\r\n title: getPlacementTitle(cellIndex, true),\r\n index: cellIndex,\r\n enableActionBtn: true,\r\n })}\r\n {getValidationMessage(imageAsset)}\r\n {placementList && placementList[cellIndex] ? (\r\n
\r\n );\r\n }}\r\n />\r\n }\r\n {localizedText}
);\r\n};\r\n\r\nDescriptionView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n selectedImgExtensionsForAssociation: PropTypes.arrayOf(PropTypes.any),\r\n className: PropTypes.string,\r\n limit: PropTypes.number,\r\n};\r\n\r\nDescriptionView.defaultProps = {\r\n selectedImgExtensionsForAssociation: [],\r\n className: '',\r\n limit: 0,\r\n};\r\n","import _ from 'underscore';\r\n\r\nconst getUriWithParam = (baseUrl, params) => {\r\n const Url = new URL(baseUrl);\r\n const urlParams = new URLSearchParams(Url.search);\r\n\r\n Object.keys(params).forEach((key) => {\r\n urlParams.set(key, params[key]);\r\n });\r\n\r\n Url.search = urlParams.toString();\r\n\r\n return Url.toString();\r\n};\r\n\r\nconst getThumbnailServiceUrl = (bingUrl, w, h) =>\r\n getUriWithParam(bingUrl, { w, h, c: 16 }); // &c=16 means smart crop\r\n\r\nexport const IMAGE_WIDTH_PX = 126;\r\nexport const IMAGE_HEIGHT_PX = 71;\r\n\r\nexport const getImageExtensionItemThumbnailUrl =\r\n (item) => {\r\n // using the 1.78:1 ratio to create the thumbnail\r\n const itemImage = _.find(item.Images, image => image.Asset.SubType === 'ImageMedia178X100');\r\n\r\n if (itemImage) {\r\n return getThumbnailServiceUrl(itemImage.Asset.ImageUrl, IMAGE_WIDTH_PX, IMAGE_HEIGHT_PX);\r\n }\r\n\r\n return null;\r\n };\r\n","import { IMAGE_WIDTH_PX, IMAGE_HEIGHT_PX } from '../components/utils/parser';\r\n\r\nexport const ITEM_MARGIN = 10;\r\n\r\nexport const getImageExtensionListStyles = () => ({\r\n listContainer: ({ cellWidth, cellHeight }) => ({\r\n '& .ms-List-cell': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: cellWidth,\r\n height: cellHeight,\r\n },\r\n '& .ms-List-page': {\r\n display: 'inline-flex',\r\n flexWrap: 'wrap',\r\n gap: '10px',\r\n paddingBottom: '10px',\r\n },\r\n }),\r\n});\r\n\r\nexport const getImageExtensionItemStyles = (components, { palette }) => {\r\n const itemZIndex = 1;\r\n const styles = {\r\n itemContainer: {\r\n position: 'relative',\r\n '&.hovered:not(.disabled), &.selected': {\r\n '& $selectRadio': {\r\n display: 'block',\r\n },\r\n },\r\n\r\n '&.hovered .image-extension-item': {\r\n cursor: 'pointer',\r\n },\r\n\r\n '&.disabled .image-extension-item': {\r\n pointerEvents: 'none',\r\n opacity: 0.4,\r\n },\r\n\r\n // there is a gap because of fractional width in chrome between parent and image.\r\n // so use pseudo class to draw the border\r\n '&.hovered .image-extension-item:after, &.selected .image-extension-item:after': {\r\n content: '\"\"',\r\n borderStyle: 'solid',\r\n borderWidth: 2,\r\n position: 'absolute',\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n top: 0,\r\n borderColor: palette.themePrimary,\r\n borderRadius: '5%',\r\n },\r\n\r\n },\r\n imageExtensionItem: {\r\n position: 'relative',\r\n zIndex: itemZIndex,\r\n width: IMAGE_WIDTH_PX,\r\n height: IMAGE_HEIGHT_PX,\r\n },\r\n\r\n btnItem: {\r\n color: palette.themePrimary,\r\n backgroundColor: palette.white,\r\n border: 'none',\r\n },\r\n textItem: {\r\n textDecoration: 'underline',\r\n },\r\n\r\n selectRadio: {\r\n position: 'absolute',\r\n top: 4,\r\n left: 100,\r\n zIndex: 1,\r\n display: 'none',\r\n\r\n '& :checked': {\r\n display: 'block',\r\n },\r\n },\r\n imageContainer: {\r\n borderRadius: '5%',\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n },\r\n deleteButton: {\r\n fontSize: 16,\r\n padding: 8,\r\n position: 'absolute',\r\n left: 86,\r\n top: 36,\r\n\r\n '&.circular-hover': {\r\n backgroundColor: `${palette.white}d4`,\r\n borderRadius: '50%',\r\n display: 'inline-flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n zIndex: itemZIndex + 1, // need to greater so that it can be clicked\r\n },\r\n\r\n '&.circular-hover:hover': {\r\n backgroundColor: `${palette.themeDarkAlt}ff`,\r\n cursor: 'pointer',\r\n\r\n '&:before': {\r\n color: palette.white,\r\n },\r\n },\r\n },\r\n editButton: {\r\n fontSize: 16,\r\n padding: 8,\r\n position: 'absolute',\r\n left: 8,\r\n top: 36,\r\n\r\n '&.circular-hover': {\r\n backgroundColor: `${palette.white}d4`,\r\n borderRadius: '50%',\r\n display: 'inline-flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n zIndex: itemZIndex + 1,\r\n },\r\n\r\n '&.circular-hover:hover': {\r\n backgroundColor: `${palette.themeDarkAlt}ff`,\r\n cursor: 'pointer',\r\n\r\n '&:before': {\r\n color: palette.white,\r\n },\r\n },\r\n },\r\n noImageFallbackContainer: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyItems: 'center',\r\n alignItems: 'center',\r\n backgroundColor: palette.neutralLighter,\r\n\r\n '& svg': {\r\n width: 32,\r\n height: 32,\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n },\r\n },\r\n };\r\n\r\n return styles;\r\n};\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { submitEvent } from '@bingads-webui-universal/accessibility-helper';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Image } from '@bingads-webui-react/fabric-control';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { ConditionalTooltipHost } from '@bingads-webui-campaign-react/conditional-tooltip-host';\r\n\r\nimport { getImageExtensionItemStyles } from '../styles/image-extensions-list-style';\r\nimport { getImageExtensionItemThumbnailUrl } from './utils/parser';\r\n\r\nexport function ImageExtensionItemPreview({\r\n i18n,\r\n onDelete,\r\n onSelect,\r\n onEditImage,\r\n enableEdit,\r\n index,\r\n item,\r\n}) {\r\n const classes = useDefaultStyles(getImageExtensionItemStyles);\r\n const [hovered, setHovered] = useState(false);\r\n const toggleHoverState = () => { setHovered(!hovered); };\r\n const imageUrl = getImageExtensionItemThumbnailUrl(item);\r\n\r\n const disabledToggleToolTip = {i18n.getString(_TL_('To use your image recommendations, you must enable '))}{i18n.getString(_TL_('Automatically pull images from my Final URL.'))}
;\r\n\r\n return (\r\n \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","export const IMAGE_DIM = {\r\n width: 96,\r\n height: 68,\r\n marginRight: 8,\r\n};\r\n\r\nconst PaddleBottomValue = 18;\r\nexport const getPaddleRightBottomValue = isSeeAllShown =>\r\n (isSeeAllShown ? `${PaddleBottomValue + 8}px` : `${PaddleBottomValue}px`);\r\n\r\nexport const getFullyShownImagesCount = (width, imageDimension = IMAGE_DIM) => {\r\n if (!width) {\r\n return 0;\r\n }\r\n\r\n const itemWidth = imageDimension.width + imageDimension.marginRight;\r\n\r\n return Math.floor(width / itemWidth);\r\n};\r\n\r\nexport const getCarouselStyles = (components, { palette = {} } = {}, iconFontFamily = 'MsAds MDL2 Assets') => ({\r\n carouselParent: {\r\n position: 'relative',\r\n display: 'inline-flex',\r\n width: '100%',\r\n alignItems: 'end',\r\n },\r\n disabledCarouselParent: {\r\n pointerEvents: 'none',\r\n opacity: 0.4,\r\n },\r\n image: ({ imageDimension, classOverrides }) => ({\r\n ...imageDimension,\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n objectFit: 'cover',\r\n ...classOverrides.image,\r\n }),\r\n imageContainer: ({\r\n imageContainerLeftMargin, isCollapsible, imageDimension, classOverrides,\r\n }) => ({\r\n height: imageDimension.height,\r\n overflowX: 'hidden',\r\n overflowY: 'hidden',\r\n display: 'inline-block',\r\n marginLeft: isCollapsible ? imageContainerLeftMargin : 0,\r\n flexGrow: 1,\r\n ...classOverrides.imageContainer,\r\n }),\r\n imageParentContainer: ({\r\n imageParentLeftOffset, numberOfImages, imageDimension, classOverrides,\r\n }) => ({\r\n width: (imageDimension.width + imageDimension.marginRight) * numberOfImages,\r\n position: 'relative',\r\n left: ((-1 * imageDimension.width) - imageDimension.marginRight) * imageParentLeftOffset,\r\n ...classOverrides.imageParentContainer,\r\n }),\r\n imageClickableContainer: ({ classOverrides }) => ({\r\n display: 'inline',\r\n '& :hover': {\r\n cursor: 'pointer',\r\n },\r\n ...classOverrides.imageClickableContainer,\r\n }),\r\n loadingMessageContainer: {\r\n marginTop: 16,\r\n marginLeft: 16,\r\n },\r\n loadingText: {\r\n display: 'inline-block',\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n verticalAlign: 'top',\r\n },\r\n panel: {},\r\n panelHeading: ({ classOverrides }) => ({\r\n display: 'flex',\r\n ...classOverrides.panelHeading,\r\n }),\r\n panelTitle: ({ classOverrides }) => ({\r\n flexGrow: 0,\r\n ...classOverrides.panelTitle,\r\n }),\r\n panelIcon: {\r\n marginRight: 3,\r\n paddingBottom: 12,\r\n '&:before': {\r\n fontFamily: iconFontFamily,\r\n content: '\"\\\\E3AF\"',\r\n },\r\n },\r\n panelHelpButton: {\r\n display: 'flex',\r\n },\r\n imageHintRight: ({ imageDimension }) => ({\r\n display: 'inline-block',\r\n position: 'absolute',\r\n background: 'linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.927755) 18.23%, rgba(255, 255, 255, 0.776042) 48.44%, rgba(250, 249, 255, 0.5) 78.24%, rgba(255, 255, 255, 0) 100%)',\r\n width: 20,\r\n height: imageDimension.height,\r\n right: 32,\r\n }),\r\n imageHintLeft: ({ imageDimension }) => ({\r\n display: 'inline-block',\r\n position: 'absolute',\r\n background: 'linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.927755) 18.23%, rgba(255, 255, 255, 0.776042) 48.44%, rgba(250, 249, 255, 0.5) 78.24%, rgba(255, 255, 255, 0) 100%)',\r\n width: 30,\r\n height: imageDimension.height,\r\n left: 34,\r\n transform: 'rotate(-180deg)',\r\n }),\r\n paddleBtn: {\r\n bottom: PaddleBottomValue,\r\n },\r\n moreIcon: {\r\n fontSize: '18px',\r\n height: '60px',\r\n width: '33px',\r\n color: palette.themeDarkAlt,\r\n },\r\n seeAll: ({ classOverrides }) => ({\r\n display: 'inline-block',\r\n position: 'absolute',\r\n right: 0,\r\n bottom: 0,\r\n whiteSpace: 'nowrap',\r\n maxWidth: 40,\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n ...classOverrides.seeAll,\r\n }),\r\n seeAllInHeader: {\r\n marginLeft: 'auto',\r\n '& a': {\r\n position: 'static',\r\n color: palette.themePrimary,\r\n fontSize: 12,\r\n '&:hover, $:acitve, $:focus': {\r\n color: palette.themeDarkAlt,\r\n },\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n },\r\n spinner: {\r\n ...components.getBlockerStyle(16, palette),\r\n display: 'inline-block',\r\n lineHeight: '16px',\r\n },\r\n parentContainer: ({ classOverrides }) => ({\r\n '& $panel': { // need more selector specificity to override styles applied to top of grid panels\r\n marginLeft: 0,\r\n marginTop: 12,\r\n },\r\n '& .image-suggestion-carousel-loading': {\r\n '& .parent-item': {\r\n display: 'flex',\r\n gap: '8px',\r\n },\r\n '& .item': {\r\n height: '66px',\r\n width: '72px',\r\n },\r\n },\r\n '& $panelHeading': {\r\n border: 'none',\r\n '& $panelTitle.collapsible-title': {\r\n fontSize: '14px',\r\n lineHeight: '24px',\r\n '& > a': {\r\n color: palette.accent,\r\n '& .helpbutton': {\r\n fontSize: '14px',\r\n lineHeight: '24px',\r\n display: 'inline',\r\n verticalAlign: 'bottom',\r\n },\r\n },\r\n marginTop: 0,\r\n },\r\n },\r\n '& + .alert-info': {\r\n marginTop: 8,\r\n '& a': {\r\n color: palette.themeDarkAlt,\r\n },\r\n },\r\n ...classOverrides.parentContainer,\r\n }),\r\n useBrandKitHeader: {\r\n marginTop: '5px',\r\n },\r\n});\r\n","const buildHtmlLink = ({\r\n href,\r\n text,\r\n}) => `${text}`;\r\n\r\nexport const buildPolicyMessage = i18n => i18n.getString(\r\n _TL_('Images from your Final URL will be used for ads, and you agree that all images are content provided by you under the {{agreement}}.'),\r\n {\r\n agreement: buildHtmlLink({\r\n href: 'https://about.ads.microsoft.com/en-us/resources/policies/microsoft-advertising-agreement',\r\n text: i18n.getString(_TL_('Microsoft Advertising Agreement')),\r\n }),\r\n }\r\n);\r\n","import React, { useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst MAX_FAILURE_COUNT = 3;\r\nexport const ImageWithRetry = ({ alt, src, className }) => {\r\n const failureCount = useRef(0);\r\n\r\n return (\r\n {seeAllLink}
}\r\n {enableBrandKit && panelOpen && {toggleBrandKit}
}\r\n \r\n \r\n \r\n
\r\n ), []);\r\n\r\n if (isEmpty) {\r\n return null;\r\n }\r\n if (isLoading && showShimmer) {\r\n return (\r\n \r\n \r\n { showHeading && panelHeading }\r\n { showLoadingShimmer }\r\n \r\n
\r\n );\r\n }\r\n if (isLoading) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n if (images.length === 0) {\r\n return null;\r\n }\r\n\r\n const disabledToggleToolTip = \r\n {i18n.getString(_TL_('Scanning your website for images...'))}\r\n
\r\n {i18n.getString(_TL_('To use your image recommendations, you must enable '))}{i18n.getString(_TL_('Automatically pull images from my Final URL.'))}
;\r\n\r\n const showRightIconButton = images.length > displayedImageCount && (!showEllipsisWhenNoMoreImages || !noMoreResult);\r\n const showEllipsisIcon = images.length > displayedImageCount && showEllipsisWhenNoMoreImages && noMoreResult;\r\n const showSeeAllLink = images.length > displayedImageCount && noMoreResult;\r\n\r\n\r\n return (\r\n \r\n \r\n { showHeading && panelHeading }\r\n \r\n { allowToggleSelectable && toggle }\r\n { !hideData &&\r\n \r\n
\r\n \r\n }\r\n \r\n \r\n \r\n {\r\n !hasDismissedMessage && !!messageInfo.message &&\r\n \r\n { offset > 0 && leftIconButton }\r\n 0 ? { width: imageContainerWidth } : {}}\r\n >\r\n { displayedImageCount > 0 && imageParentContainer }\r\n
\r\n {\r\n offset > 0 &&\r\n \r\n }\r\n \r\n { showRightIconButton && rightIconButton }\r\n { showEllipsisIcon && ellipsisIcon }\r\n { showSeeAllLink && !showViewAllInHeader && seeAllLink }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nInlineChartReactWrapper.propTypes = {\r\n chartPref: PropTypes.shape({}).isRequired,\r\n filter: PropTypes.shape({}).isRequired,\r\n filterService: PropTypes.shape({}).isRequired,\r\n toolbarEditor: PropTypes.shape({}).isRequired,\r\n refreshGrid: PropTypes.func.isRequired,\r\n onNavItemClick: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n menuId: PropTypes.string.isRequired,\r\n options: PropTypes.shape({}),\r\n serverContext: PropTypes.shape({\r\n CurrentUser: PropTypes.object.isRequired,\r\n }).isRequired,\r\n showInContextCard: PropTypes.bool,\r\n permissions: PropTypes.shape({}),\r\n scope: PropTypes.shape({}),\r\n recommendationTypes: PropTypes.arrayOf(PropTypes.string),\r\n newI18n: PropTypes.shape({}).isRequired,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n entityType: PropTypes.string.isRequired,\r\n getCustomizedFilter: PropTypes.func,\r\n perfMarker: perfMarkerPropTypes,\r\n defaultPrimaryMetric: PropTypes.number,\r\n hideChartPanel: PropTypes.bool,\r\n};\r\n\r\nInlineChartReactWrapper.defaultProps = {\r\n showInContextCard: false,\r\n options: {},\r\n permissions: {},\r\n scope: {},\r\n recommendationTypes: [],\r\n getCustomizedFilter: _.identity,\r\n perfMarker: null,\r\n defaultPrimaryMetric: null,\r\n hideChartPanel: false,\r\n};\r\n","import Promise from 'bluebird';\r\nimport { compact } from 'underscore';\r\nimport React from 'react';\r\n\r\n/* eslint-disable import/extensions */\r\n/* eslint-disable import/no-unresolved */\r\n\r\nimport { store, adapter } from '@bingads-webui-component-legacy/bingads-grid/service/grid-preferences';\r\nimport appState from '@bingads-webui-component-legacy/state/index';\r\nimport edm from '@bingads-webui-component-legacy/edm-campaign/index';\r\nimport appConfig from '@bingads-webui-component-legacy/config/index';\r\nimport instrumentation from '@bingads-webui-campaign-legacy/instrumentation/index';\r\nimport azure from '@bingads-webui-static-legacy/app/component/azureUrlRewrite';\r\nimport jsdata from '@bingads-webui-component-legacy/js-data-campaign/index';\r\nimport preferenceService from '@bingads-webui-component-legacy/preference/service/index';\r\nimport { mockEdm } from '@bingads-webui-component-legacy/test/mock/edm';\r\nimport mockJsData from '@bingads-webui-component-legacy/test/mock/jsdata';\r\nimport pageContext from '@bingads-webui-static-legacy/page-context';\r\nimport Constants from '@bingads-webui-static-legacy/constants';\r\n\r\nimport { ThemeFluent } from '@bingads-webui-theme-2018/theme-fluent';\r\nimport { withGlobalFilter } from '@bingads-webui-campaign-react/global-filter-context';\r\nimport { ChartDataAdapter } from '@bingads-webui-campaign-react/inline-chart';\r\nimport { InlineChartPreferences } from '@bingads-webui-campaign/inline-chart-preferences';\r\nimport { withMenuLayout } from '@bingads-webui-react/app-layout-container';\r\nimport { InlineChartReactWrapper } from './react-wrapper';\r\n\r\nexport function loadInlineChartGeneral({\r\n serverContext,\r\n filterService,\r\n toolbarEditor,\r\n refreshGrid,\r\n onNavItemClick,\r\n chartContainer,\r\n entityType,\r\n campaignId,\r\n gridCriterionType,\r\n preexecuteFlag = false,\r\n showInContextCard,\r\n permissions,\r\n scope,\r\n newI18n,\r\n recommendationTypes,\r\n isFluctuationsEnabled,\r\n gridName,\r\n getCustomizedFilter,\r\n perfMarker,\r\n gridDataSource,\r\n defaultPrimaryMetric,\r\n hideChartPanel,\r\n}) {\r\n const i18nInlineChart =\r\n window.globalLegacyI18n.get('@bingads-webui/i18n-amd-loader!@bingads-webui-campaign-react/inline-chart');\r\n const {\r\n IsFluctuationExperimentEnabled,\r\n } = appConfig.get('Permissions');\r\n const { palette } = ThemeFluent;\r\n\r\n const preferencePromise = preferenceService.initialize().then(() => Promise.promisifyAll(preferenceService));\r\n\r\n const inlineChartDeps = {\r\n isFluctuationsEnabled,\r\n IsFluctuationExperimentEnabled,\r\n imagePath: Constants.imagePath,\r\n filter: {},\r\n entityType,\r\n addDateChangeListener: () => { },\r\n gridCriterionType,\r\n token: appConfig.get('odata.token'),\r\n state: appState,\r\n isForVNext: true,\r\n seriesColors: {\r\n primary: {\r\n original: palette.themePrimary,\r\n comparative: palette.themePrimary,\r\n },\r\n secondary: {\r\n original: '#022F22',\r\n comparative: '#022F22',\r\n },\r\n },\r\n i18n: i18nInlineChart,\r\n instrumentation,\r\n azure,\r\n store,\r\n pathConfig: appConfig,\r\n adapter,\r\n jsdata: preexecuteFlag ? mockJsData : jsdata,\r\n edm: preexecuteFlag ? mockEdm : edm,\r\n pageContext,\r\n preferenceService: preferencePromise,\r\n chartContainer,\r\n resizeChartListener: () => { },\r\n };\r\n\r\n const preference = new InlineChartPreferences(\r\n store,\r\n appConfig,\r\n adapter,\r\n preferencePromise\r\n );\r\n const chartDataAdapter = new ChartDataAdapter({ i18n: i18nInlineChart, permissions: appConfig.get('Permissions') });\r\n\r\n return Promise.all(compact([\r\n chartDataAdapter.getPreferencesAndDefaults(\r\n preference,\r\n pageContext\r\n ),\r\n appState.getPromise('$daterange'),\r\n filterService && filterService.p$Initialized,\r\n preferencePromise,\r\n ])).spread((chartPref) => {\r\n inlineChartDeps.filter = filterService && filterService.getCombinedFilter();\r\n\r\n let onDateChangeHandler = null;\r\n inlineChartDeps.addDateChangeListener = (handler) => {\r\n if (!onDateChangeHandler) {\r\n onDateChangeHandler = handler;\r\n inlineChartDeps.onDateChangeHandler = onDateChangeHandler;\r\n }\r\n };\r\n\r\n if (campaignId && !inlineChartDeps.pageContext.CurrentCampaign) {\r\n inlineChartDeps.pageContext.CurrentCampaign = {\r\n Id: campaignId,\r\n };\r\n }\r\n\r\n inlineChartDeps.pageContext.CurrentGridName = gridName;\r\n\r\n const InlineChartReact = withMenuLayout(withGlobalFilter(InlineChartReactWrapper));\r\n\r\n return Promise.resolve(\r\n
\r\n );\r\n}\r\n\r\nLanguageTarget.propTypes = {\r\n selectedLanguages: PropTypes.arrayOf(PropTypes.string),\r\n setSelectedLanguages: PropTypes.func.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n permissions: PropTypes.shape({\r\n IsDomesticSimplifiedChineseEnabled: PropTypes.bool,\r\n }).isRequired,\r\n showLabel: PropTypes.bool,\r\n};\r\n\r\nLanguageTarget.defaultProps = {\r\n selectedLanguages: [],\r\n showLabel: true,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useMemo, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Dropdown, Option } from '@fluentui/react-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nconst languageAll = 'All';\r\n\r\nexport function LanguageSelector(props) {\r\n const {\r\n languages,\r\n selectedLanguages,\r\n onSelectedLanguagesChanged,\r\n ariaLabel,\r\n multiSelect,\r\n } = props;\r\n\r\n const isSelectAll = useMemo(() => selectedLanguages.length === 1\r\n && selectedLanguages[0] === languageAll, [selectedLanguages]);\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n const options = _.map(languages, language => (\r\n {\r\n key: language.key,\r\n text: language.text,\r\n disabled: isSelectAll && language.key !== languageAll,\r\n }\r\n ));\r\n\r\n const value = useMemo(() => selectedLanguages.map(language => languages.find(option => option.key === language).text), [selectedLanguages, languages]);\r\n\r\n const dropdownStyles = { dropdown: { width: 320 } };\r\n\r\n return (\r\n \r\n {showLabel && {label} }\r\n
\r\n \r\n \r\n {selectedLanguages.map((item, index) => (\r\n
\r\n \r\n \r\n {options.map(option => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n\r\nLanguageSelector.propTypes = {\r\n languages: PropTypes.arrayOf(PropTypes.string),\r\n selectedLanguages: PropTypes.arrayOf(PropTypes.string),\r\n onSelectedLanguagesChanged: PropTypes.func.isRequired,\r\n ariaLabel: PropTypes.string,\r\n multiSelect: PropTypes.bool,\r\n};\r\n\r\nLanguageSelector.defaultProps = {\r\n languages: [],\r\n selectedLanguages: [],\r\n ariaLabel: undefined,\r\n multiSelect: true,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Text } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { AdGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { LanguageSelector } from '@bingads-webui-campaign-react/language-selector';\r\nimport { globalizationModelSetup } from '@bingads-webui-campaign/ads-globalization';\r\nimport { campaignLanguageStrings } from './constants';\r\nimport { getIntentLanguageStyles } from '../styles/get-intent-language-style';\r\n\r\nexport function SingleLanguageTarget(props) {\r\n const {\r\n selectedLanguage,\r\n setSelectedLanguage,\r\n permissions,\r\n locale,\r\n showLabel,\r\n additionalOptions,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getIntentLanguageStyles);\r\n const { LANGUAGES: supportedLanguages } = globalizationModelSetup({ permissions, culture: locale });\r\n\r\n const languages = useMemo(() =>\r\n _.chain(AdGroup.properties.Language.enum)\r\n .filter(language => _.contains(supportedLanguages, language))\r\n .sortBy()\r\n .unshift(...additionalOptions)\r\n .map(language => ({\r\n key: language,\r\n text: i18n.getString(campaignLanguageStrings[language]),\r\n }))\r\n .value(), [additionalOptions, i18n, supportedLanguages]);\r\n\r\n const allSupportedOptions = useMemo(() => ([...additionalOptions, ...supportedLanguages]), [additionalOptions, supportedLanguages]);\r\n const selectedLanguages = useMemo(() => _.filter([selectedLanguage], language => _.contains(allSupportedOptions, language)), [selectedLanguage, allSupportedOptions]);\r\n\r\n const onSelectedLanguagesChanged = useCallback((event, data) => {\r\n setSelectedLanguage(data.optionValue);\r\n }, [setSelectedLanguage]);\r\n\r\n const label = i18n.getString(_TL_('Select the language of the websites where you want your ads to appear.'));\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nSingleLanguageTarget.propTypes = {\r\n selectedLanguage: PropTypes.string,\r\n setSelectedLanguage: PropTypes.func.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n showLabel: PropTypes.bool,\r\n additionalOptions: PropTypes.arrayOf(PropTypes.string),\r\n};\r\n\r\nSingleLanguageTarget.defaultProps = {\r\n selectedLanguage: null,\r\n showLabel: true,\r\n additionalOptions: ['All'],\r\n};\r\n"],"names":["columnStyle","_ref","_ref$palette","palette","borderBottom","width","display","cursor","minWidth","maxWidth","borderRight","justifyContent","lineHeight","opacity","marginLeft","fontSize","color","themeDark","flexWrap","flexBasis","_objectSpread","underlineLinkStyle","elementLocator","adColumnPreviewStyle","deliveryColumnStyle","labelsCellItemStyle","marginRight","neutralTertiary","campaignGridBudgetCenterEntryStyle","paddingLeft","headerStyle","_ref$iconFontFamily","iconFontFamily","backgroundColor","white","position","userSelect","right","zIndex","height","background","fontWeight","borderTop","transform","flexGrow","popChildCount","visibility","fontFamily","content","footerStyle","merge","paginationStyle","padding","verticalAlign","rowStyle","concat","cellStyle","wordWrap","wordBreak","alignItems","groupStyle","overflow","scrollbarStyle","overlapStyle","borderLeft","boxShadow","gridFlexStyle","_ComponentSettings$Gr","ComponentSettings","GridSharedStyles","getSharedBodyStyles","getSharedColGroupStyles","getSharedColumnsStyles","getSharedFooterStyles","getSharedGlobalStyles","getSharedHeaderStyles","getSharedTableStyles","variables","components","dateCellStyles","fontStyle","float","themePrimary","clear","locationCellStatusStyle","getColumnsStyles","themeDarker","getBodyStyles","paddingRight","budgetLandscapeTable","marginBottom","marginTop","top","left","borderWidth","borderColor","budGetEditTitle","overflowWrap","margin","uurlTestToolStyle","maxHeight","border","paddingTop","listStyle","neutralLight","minHeight","neutralPrimary","textDecoration","speak","fontVariant","textTransform","textAlign","deliveryStatusStyle","outline","textOverflow","whiteSpace","Constants","ZIndexContentComponents","GridHeader","gridPaddingLeft","headerRowBackgroundColor","headerRowBorderTop","headerRowBorderBottom","totalRowBackgroundColor","totalRowBorderTop","tableBorder","gridPaddingComponsation","GridViewWrapper","gridViewFromProps","gridView","gridEventHandlersFromProps","gridEventHandlers","removeGridOnUmount","getReferenceToGridView","classes","children","gridClassName","_useState","useState","_slicedToArray","_useState3","useEffect","remove","each","once","handler","event","on","_jsxs","className","grid","_jsx","BackboneInstanceWrapper","managed","instance","render","defaultProps","StyledGridViewWrapper","withDefaultStyles","memo","getTableStyles","getGlobalStyles","gridPopUpEditorStyle","deleteColumnModalStyle","legacyKeys","validationLocalization","ColumnChooser_Header","_TL_","ColumnChooser_SubHeader","ColumnChooser_AvailableColumnsHeader","ColumnChooser_SelectedColumnsHeader","ColumnChooser_SelectedColumnsHeader_TopHalf","ColumnChooser_SelectedColumnsHeader_BottomHalf","ColumnChooser_SaveColumnDescription","ColumnChooser_Apply","ColumnChooser_Cancel","ColumnChooser_Add","ColumnChooser_Added","ColumnChooser_Remove","ColumnChooser_AddAllInList","ColumnChooser_RemoveAllInList","ColumnChooser_RemoveAllSelected","ColumnChooser_NoSearchResult","ColumnChooser_Disabled","ColumnChooser_Search_Column","ColumnChooser_AddColumn","ColumnChooser_RemoveColumn","ColumnChooser_LiftColumn","ColumnChooser_MoveColumn","ColumnChooser_DropColumn","Filter_Operator_IN","Filter_Operator_EQ","Filter_Operator_NEQ","Filter_Operator_Contains","Filter_Operator_Not_Contains","Filter_Operator_StartsWith","Filter_Operator_EndsWith","Filter_Operator_LT","Filter_Operator_GT","Filter_Operator_LTE","Filter_Operator_GTE","Filter_Validation_EnumSelectionRequired","Filter_Validation_Common_Required","Filter_Validation_Common_Number","Filter_Validation_Common_Number_Range","Filter_Validation_Common_Integer","Filter_Validation_Common_Date","Filter_Validation_Common_Id_Count","Filter_Cannot_Have_Duplicate","Filter_Remove","Filter_PredicateList_New","Performance","Filter_Key_AriaLabel","Filter_Operator_AriaLabel","Filter_Value_AriaLabel","SelectEntityOrEntities","SelectedEntityOrEntities","Selector_LoadingText","Selector_Check_All","Filter_Selector_MoreThanLimit","NoEntityOrEntities","CronFormatter_Frequency_MonthlyTemplate","CronFormatter_Frequency_WeeklyTemplate","CronFormatter_Frequency_DailyTemplate","CronFormatter_FrequencyGrain_Runs_Daily","CronFormatter_FrequencyGrain_Runs_Monthly","CronFormatter_FrequencyGrain_Runs_Weekly","CronFormatter_FrequencyGrain_DropdownMenu_None","CronFormatter_FrequencyGrain_DropdownMenu_Daily","CronFormatter_FrequencyGrain_DropdownMenu_Monthly","CronFormatter_FrequencyGrain_DropdownMenu_Weekly","DateFilter_Option_Custom","DateFilter_Option_CustomTime","DateFilter_Option_Today","DateFilter_Option_Yesterday","DateFilter_Option_ThisWeekSunday","DateFilter_Option_ThisWeekMonday","DateFilter_Option_Last7days","DateFilter_Option_LastWeekSunday","DateFilter_Option_LastWeekMonday","DateFilter_Option_Last14Days","DateFilter_Option_ThisMonth","DateFilter_Option_LastMonth","DateFilter_Option_Last30Days","DateFilter_Option_Last3Months","DateFilter_Option_Last6Months","DateFilter_Option_TwelveMonthsToDate","DateFilter_Option_ThisYear","DateFilter_Option_LastYear","DateFilter_Option_AllTime","DateFilter_Option_PreviousPeriod","DateFilter_Option_SamePeriodLastYear","DateFilter_Option_CustomPeriod","InlineDownloadReports_Column_EmailFrequency","InlineDownloadReports_EmailAndScheduling_Frequency_None","InlineDownloadReports_EmailAndScheduling_Frequency_Daily_Template","InlineDownloadReports_EmailAndScheduling_Frequency_Weekly_Template","InlineDownloadReports_EmailAndScheduling_Frequency_Monthly_Template","InlineDownloadReports_Action_UnsubscribeMe_Failed_NotSubscribed","InlineDownloadReports_Action_UnsubscribeMe_Failed","InlineDownloadReports_Action_UnsubscribeMe_Succeeded","Grid_Edit_Cell","Grid_EditButtonText","Save","Cancel","Loading","Schema_ReportEmailRule_Property_Cron","Schema_ReportEmailRule_Property_StartTime","Schema_ReportEmailRule_Property_EndTime","InlineDownloadReports_EmailAndScheduling_SendReportTo","InlineDownloadReports_SearchUsers","InlineDownloadReports_EmailAndScheduling_Email_Me","InlineDownloadReports_EmailAndScheduling_Email_Template_Me","InlineDownloadReports_EmailAndScheduling_User","InlineDownloadReports_EmailAndScheduling_FailedToLoadUsers","InlineDownloadReports_EmailAndScheduling_AllUsers","SimpleForm_Button_Save","SimpleForm_Button_Cancel","KoSchema_String_RemainingCharactersText","KoSchema_String_ExceededCharactersText","Custom","Schema_Enum_DateRangePreset_AllTime","Schema_Enum_DateRangePreset_LastBusinessWeek","Schema_Enum_DateRangePreset_LastFourteenDays","Schema_Enum_DateRangePreset_LastMonth","Schema_Enum_DateRangePreset_LastSevenDays","Schema_Enum_DateRangePreset_LastSixMonth","Schema_Enum_DateRangePreset_LastThirtyDays","Schema_Enum_DateRangePreset_LastThreeMonth","Schema_Enum_DateRangePreset_LastWeekStartingMon","Schema_Enum_DateRangePreset_LastWeekStartingSun","Schema_Enum_DateRangePreset_LastYear","Schema_Enum_DateRangePreset_ThisMonth","Schema_Enum_DateRangePreset_ThisWeekFromMon","Schema_Enum_DateRangePreset_ThisWeekFromSun","Schema_Enum_DateRangePreset_ThisYear","Schema_Enum_DateRangePreset_Today","Schema_Enum_DateRangePreset_Yesterday","getImageCropEditorStyles","description","getCropTagsStyle","validCropTag","invalidCropTag","cropTagGroup","cropTag","borderRadius","tagString","tagIcon","validCropIcon","invalidCropIcon","CropTag","ratioConfig","currentCropSettings","_useState2","cropSettings","setCropSettings","_useState4","isValid","setIsValid","useDefaultStyles","SourceWidth","SourceHeight","minSize","isValidForCrop","TooltipHost","aspectRatio","calloutProps","gapSpace","classnames","CropTags","_ref2","aspectRatioConfig","isMMAV2Enabled","i18n","useContext","I18nContext","availableAspectRatios","map","filter","image","type","configInfo","getString","getRatioStringsForAudienceMMAV2","key","getRatioStrings","tags","ImageCropEditor","baseImage","onCropSettingsChanged","minCropSize","maxCropBox","adCreatorScenario","isLogo","allowedAspectRatioFromProps","allowedAspectRatio","onManualCropImage","onManualCropLogo","instrumentation","InstrumentationContext","manualCropActivity","getAdCreatorInstrumentation","getAllowedAspectRatio","currentSettings","Width","Height","ImageCropWithBoundingBox","newCropSettings","manualCropLogMessage","trace","setClarityTag","AdCreatorManualCropApplied","_","getImageCropStyles","cropperContainer","cropperInlineStyles","setCropperInlineStyles","boxHeight","useEntireImage","contentWidth","contentHeight","getResizeImageHeight","getCropperBoxHeight","style","container","subContainer","ImageCropper","ariaLabel","maxSize","imageSource","Src","onCropperInitialized","jcrop","_jcrop$filter$constra","constrain","minx","maxx","miny","maxy","UnStyledImageCropper","_React$Component","props","_this","_classCallCheck","_callSuper","previousImageObjSource","state","isImageLoaded","_inherits","_createClass","value","this","loadImageFromSource","nextProps","nextState","_this$props$maxCropBo","SourceX","SourceY","w","e","imageObj","naturalWidth","n","s","naturalHeight","_this2","setState","Image","src","onload","onImageLoaded","cropperOptions","allowSelect","canDrag","boxWidth","edge","getCropperEdgeOption","imageCropperOptions","imgData","preview","show","isPreviewNeeded","BackboneViewWrapper","View","BackboneImageCropper","options","eventsToActions","action","React","commonHandlePseudoBefore","jcropReactStyle","bottom","LoadingView","text","getLoadingViewStyles","UiBlocker","blocking","loadingText","getImagePreviewStyles","arguments","length","undefined","defaultUIBlockerStyle","reactUIBlockerStyle","neutralLighterAlt","imageContainer","ImagePreview","loading","baseImageSrc","baseImageWidth","resizeImageHeight","CroppedImageView","originalWidth","getEffectPickerStyles","label","labelWrapper","WebkitLineClamp","WebkitBoxOrient","innerField","boxSizing","commonConfig","imageSize","EffectOptions","_defineProperty","EffectChoiceKey","None","imageSrc","localizeKey","DesignerEffects","BackgroundBlur","BackgroundSolidColor","disclaimerText","thresholdErrorText","showDisclaimerOnChecked","effectChoiceGroupOptions","reduce","EffectChoiceOrder","order","effectType","getColorPickerStyles","showColorPicker","styles","neutralLighter","root","panel","borderStyle","neutralSecondary","overlay","pointerEvents","WrappedColorPicker","updateColor","hideColorPicker","FocusLock","onExit","focusFirstItemOnMount","ColorPickerWithClickOutside","onChange","changedColor","alphaType","showPreview","outsideClickIgnoreClass","strings","hex","red","green","blue","alpha","mtColorFormat","convertColorToRGBFormat","r","g","b","BackgroundColorPicker","_ref3","effectOptions","onColorPickerChange","colorPickerClasses","selectedColor","values","exec","str","val","hexValueOfChannel","parseInt","toString","getColorFromString","convertRGBToColor","_React$useState","_React$useState2","setColor","_React$useState3","toUpperCase","_React$useState4","selectedSwatch","setSelectedSwatch","_React$useState5","_React$useState6","setShowColorPicker","_React$useState7","_React$useState8","hideOptionsDuringLoad","setHideOptionsDuringLoad","_React$useState9","_React$useState10","colorPickerThrottler","setColorPickerThrottler","_React$useState11","_React$useState12","defaultColor","setDefaultColor","swatchId","swatchColorCells","id","getSwatchColorCells","updateColorInternal","colorObj","colorObjStr","cell","clearTimeout","setTimeout","updateSwatchColor","SwatchColorPicker","cellHeight","cellWidth","cellShape","colorCells","onColorChanged","selectedId","columnCount","disabled","tableCell","getColorGridCellStyles","_ref4","selected","colorCell","showLoading","pickerPosition","getDesignerEffectPickerStyles","imageWidth","imageHeight","designerEffectChoiceGroup","flexFlow","DesignerEffectsSecondaryPicker","designerEffectSrcs","baseImageHeight","onDesignerChange","maxDimension","getDesignerEffectChoiceMaxDimension","designerClasses","selectedDesignerEffectKey","designerEffect","designerOptions","onRenderLabel","Effect","Thumbnail","designerEffectChoiceGroupOptions","onRenderField","selectedImageSrc","ChoiceGroup","selectedKey","BackgroundBlurPicker","onBlurChange","defaultValue","backgroundBlur","updateBlur","newBlur","Slider","max","min","onChanged","showValue","MessageBar","SecondaryEffectPicker","EffectPicker","unavailableEffectsConfig","isNotSupported","severeError","severeWarning","isColorThresholdError","fieldProps","tooltipTextKey","original","checked","hasTooltip","title","getImageEffectEditorStyles","altText","LoadingTextConfig","ImageEffectEditor","selectedEffectKey","onEffectChange","onAltTextChange","allEffectSrcs","permissions","AltText","getAspectRatio","showAltTextInput","get","resizeImageHeightToPreview","loadingTextKey","TextField","maxLength","noop","AspectRatiosForDisplayAds","Image300x250","imagePreviewHeight","simplifiedType","Image728x90","Image160x600","Image300x600","Image120x600","Image468x60","Image336x280","Image250x250","Image180x150","Image970x250","Image234x60","Image970x90","Image320x50","Image300x50","Image320x480","Image480x320","Image320x100","Image216x36","Image168x28","Image120x20","constants","brandkitMinSize","aspectRatios","Image191x100","associationType","stringKey","previewTypeStringKey","previewTypeString","previewWidth","previewHeight","isRequired","minimumRequirements","previewSettings","previewContentClassName","showShortHeadline","showDescription","showAdditionalDisclaimer","Image178x100","showGradient","Image172x100","showLongHeadline","Image169x100","Image155x100","Image150x100","Image133x100","Image1x1","Image93x100","aspectRatiosForMMAV2","OriginalImage","shouldIgnoreCropSetting","Image201x100","Image200x100","showAdsIcon","Image153x100","Image124x100","Image120x100","aspectRatiosForDisplayAds","aspectRatiosForBoostPortrait","Image1x2","isPortrait","aspectRatiosForBoost200x100","showAction","showBusinessName","aspectRatiosForBoostNewSupport","Image122x100","Image159x100","Image180x100","Image233x100","Image57x100","videoAspectRatios","VideoMedia16X9","ratio","cropSetting","thumbnailCropSetting","VideoMedia5X4","VideoMedia1X1","VideoMedia4X5","VideoMedia9X16","aspectRatiosForAppCampaign","ImagePRONG","ImageSPOTLIGHT","TransparentLogo","aspectRatiosForLinkedInAds","Image4x5","videoPreviewsSettings","videoType","previewContainerHeight","previewContainerWidth","hideTextWhenPlay","showProgressText","videoPreviewDefaultWidth","videoPreviewDefaultHeight","resizeImageHeightInList","sortBySelections","recentUpload","enum","query","imageText","videoSortBySelections","edmDefinition","UploadedTime","Text","imageTypesWithOrder","videoTypesWithOrder","videoTypeToThumbnailType","subTypeToType","ImageMedia4X1","LandscapeImageMedia","ImageMedia178X100","ImageMedia172X100","ImageMedia169X100","ImageMedia155X100","ImageMedia15X10","ImageMedia133X100","SquareImageMedia","ImageMedia93X100","ImageMedia1X2","LandscapeLogoMedia","SquareLogoMedia","ImageMedia201X100","ImageMedia200X100","ImageMedia153X100","ImageMedia124X100","ImageMedia120X100","ImageMedia122X100","ImageMedia159X100","ImageMedia180X100","ImageMedia233X100","ImageMedia320X100","ImageMedia57X100","PortraitImageMedia","pageSize","imageAdExtSettings","MobileMultiImage","BingDesktopImage","BingSingleImage","showUrl","isMultimediaAd","imageOption","defaultImageOption","isCombinedMsanAndMmaAspectRatios","isDisplayAds","isPortraitImage","isBoost200x100ImageEnabled","isBoostNewAspectRatioSupportEnabled","isStoreAppProng","isStoreAppSpotLight","isStoreAppTransparentLogo","isLinkedInAd","isUnifiedAppCampaignWindowsStore","isPMaxAspectRatiosV2Enabled","imageOptionKeys","Logo","DefaultImageMinimumSize","getAspectRatios","GenericImage","Number","MAX_SAFE_INTEGER","getMmaAspectRatios","requiredRatios","minSizeForMMA","getMinSizeForRequiredRatios","minSizeForOther","Math","sortBy","abs","first","logoAspectRatios","Image4x1","showAdsLabel","isMultimediaAdinMSANEnabled","_ref$imageOption","_ref$isCombinedMsanAn","_ref$isBoost200x100Im","_ref$isBoostNewAspect","_ref$isMMAV2Enabled","_ref$isDisplayAds","_ref$isPortraitImage","_ref$isStoreAppProng","_ref$isStoreAppSpotLi","_ref$isStoreAppTransp","_ref$isUnifiedAppCamp","_ref$isLinkedInAd","_ref$isPMaxAspectRati","Portrait","pmaxV2Ratios","pmaxMsanRatios","pmaxMmaRatios","multimediaAdinMSANRatios","audienceMMAV2AspectRatios","SupportedCaptionLocales","Lcid","FullName","Tag","LcidToFullName","locale","find","loc","TagToLcid","tag","toLowerCase","DEFAULT_MAX_IMAGE","DEFAULT_MAX_LOGO","DEFAULT_MAX_PORTRAIT","audienceMMAV2WithDiffAspectRatio","boostMultimediaAdinMSANRatios","boostMultimediaAdinMSANRatiosNewSupport","audienceMMAV2AspectRatiosWithoutOriginalImage","imageSources","Website","WebsiteCarousel","Upload","Existing","Stock","AdRecommendation","Social","AIGenerated","Invest","BackgroundChangeGenerated","sourceTypes","TwitterImported","WebsiteImported","UserUploaded","AIGeneratedByRecraft","getSourceTypeFromImageSource","preferenceFlags","MMATeachingBubble","MMAWebsiteImageOptIn","MMAInMSANTeachingBubble","MMAInMSANWebsiteImageOptIn","getImageOptions","_ref2$i18n","_ref2$disableImage","disableImage","_ref2$disableLogo","disableLogo","_ref2$disablePortrait","disablePortrait","getAspectRatioOptions","logoSubtypes","labelId","defaultAspectRatioOption","getBoostAspectRatios","windowsSpotlight","multipleLineLongHeadline","multipleDescription","hideLabel","showHotspots","discoverCard","startMeno","logoHeight","showLogo","showImage","showDismiss","actionCenter","banner","coachmark","ImageExpansionType","UAPImageExpansionType","CroppingType","UAPCroppingType","ImageExpansionDataSource","ImageFittingAPI","ImageExperienceImage","createBaseImageInfo","idString","effectSettings","baseId","metadata","isIncluded","isRecommendedImage","disableEdit","originCropSetting","isAutoCropping","source","originalSourceType","originalUrl","cropSettingOnOriginal","placementSettings","originalHeight","imageExpansionType","expandedImageCropSettings","expandedImageUrl","expandedImageWidth","expandedImageHeight","originalImageCropSettings","paddingColor","BaseId","Id","serializeImageAssetMetadata","EffectSettings","Metadata","isEffectEdited","isMaunalCropped","effectKey","effectSrc","ThumbnailUrl","srcWithQuery","indexOf","cropQuery","cloneDeep","CropSettings","another","OriginalUrl","String","getExpandedImageUrlUAPL","base","expandedImage","isImageExpanded","roiInfoStr","isPlacementLevel","_setROIInfo2","setROIInfo","C","ecsForCurAspectRatio","AspectRatio","CropSetting","originalEcsForCurAspectRatio","croppingType","Outpainting","CenterCrop","SmartCrop","ManualCrop","subType","overrideInfo","shouldSaveCroppingType","Type","result","IdString","cropX","cropY","cropWidth","cropHeight","newImageFromMTObject","imageObjectMT","OriginalImageCroppingSettings","originalImageCroppingSettings","Url","url","CropSettingOnOriginal","PlacementSettings","OriginalHeight","OriginalWidth","SourceType","sourceType","ExpandedImageCroppingSettings","ExpandedImageUrl","ExpandedImageWidth","ExpandedImageHeight","PaddingColor","OriginalImageCropSettings","ROIInfo","addCropSettingsToCreativeImage","imgObjMT","imageObject","targetWidth","targetHeight","ImageExperienceVideo","videoObj","thumbnailUrl","status","failureCode","duration","srcUrl","quality","sourceVideoBitRate","sourceUrl","SourceUrl","Description","template","recommendationId","savedMaterial","getVideoSrc","DownloadUrl","downloadUrlMapping","JSON","parse","resolutions","Object","keys","h","apply","_toConsumableArray","getCommonVideoFields","videoObject","includes","SubType","Status","FailureCode","DurationInMilliSeconds","DurationInMS","Quality","SourceVideoBitRate","newVideoFromMTObject","videoMT","newVideoFromGridObject","videoGrid","getMultiVideoListViewStyles","videoContainerStyle","hoverButtonsStyle","videoThumbnail","videoImageStyle","objectFit","removeIconStyle","radioGroupContainer","uploadingContainer","flexDirection","gap","radioOption","radioOptionHidden","MultiVideoListView","onCancelUpload","isVideoUploading","totalBytes","uploadedBytes","onVideoSelect","videoList","CustomAddVideoControl","onAddVideo","onRenderItemDropdown","selectedVideoIdx","setSelectedVideoIdx","renderVideoComponent","video","idx","component","classNames","alt","EncodingPlaceholderWithStyle","placeholderContent","textColor","UnverifiedPlaceholderWithStyle","FailedPlaceholderWithStyle","RadioGroup","layout","ev","data","idxString","onThumbnailClick","Radio","onClick","multiVideoMode","UploadProgress","DefaultButton","FormatVideoError","response","responseJSON","error","Code","code","loadingPlaceholderGetter","img","uploading","progressBar","onUserVideoDelete","onUserVideoEdit","itemHeight","editMode","setEditMode","videoText","_useState5","_useState6","editText","setEditText","thumbnailHeight","thumbnailWidth","round","wrapperStyle","statusClass","clickEvent","imageIdString","currentTarget","isControlledFocusLock","isFocusLock","NameEditor","target","onSave","onCancel","loadingPlaceholder","LoadingPlaceholder","UserVideoPickerContainer","userVideoDataSource","onVideoSelected","videoRepository","showUiBlocker","showErrors","isLazyLoadEnabled","videoPickerContainerHeight","useCallback","confirm","Promise","deleteVideo","then","reload","catch","finally","patchVideo","deltaVideo","isGoogleImportVideoAdsEnabled","IsGoogleImportVideoAdsEnabled","userVideoItemWrapper","useMemo","getUserVideoItemWrapper","onLoadMore","loadMore","ImagePickerContainer","dataSource","isMultiSelection","onSelectionChanged","selectedItems","item","videoSrc","isAutoLoadMore","window","innerHeight","imageListItemWrapper","imagePlaceHolder","useBingAdsLoader","emptyButtonStyle","borderImage","onInvestVideoSelected","limitedThumbnailWidth","autoPlay","loop","getVideoObjectForImagePickerFromMTObject","durationInMs","uploadedTime","textFields","getVideoObjectFromInvestAssets","XandrAssetId","InvestVideoPickerContainer","investVideoDataSource","saveVideoAsync","getVideo","videoFromMT","investVideoItemWrapper","getInvestVideoItemWrapper","UserVideoDataSource","currentData","sortById","currentSearchTerm","callback","currentPage","fetchVideoAsync","excuteCallBackIfExsit","DataSourceState","Done","searchTerm","index","findIndex","console","warn","getVideos","pageNumber","hasMore","moreData","initializeUserVideoDataSource","InvestVideoDataSource","investImageDataService","customQueries","appName","assetTypeId","$skip","$top","creativeId","getInvestAssets","addInvestVideoAsset","UrlEditor","_React$PureComponent","onValidate","ValidatedInput","onUrlChanged","validationProps","schema","properties","minLength","field","placeholder","onSubmit","VideoRepository","cid","aid","oDataConfig","activityLogger","videoOData","VideoOData","fileExtension","getUploadUrl","getUploadUrlForRepair","file","onProgress","postVideoByFile","videoUrl","postVideoByUrl","_ref5","_ref6","replaceVideoByUrl","_ref7","replaceVideoBySelectingVideo","_ref8","replaceVideoByBlob","_ref9","_ref10","_ref11","_ref12","createVideoBasedOnOriginalVideo","testThumbnail","logger","videoEl","document","createElement","setAttribute","addEventListener","signal","startTime","Date","now","videoWidth","videoHeight","AddVideo","onUserVideoSearch","searchValue","searchAsync","sortBySelection","onInvestVideoSearch","onSortBySelect","onPillChange","pillControlIndex","errors","isXandrIntegrationEnabled","onUrlSubmit","_this$props","repairMode","invalidVideo","_video","logToSubstrateAdvanced","onVideoPostByUrl","shouldBlock","blockUi","_this$props2","dynamic","XandrIntegrationEnabled","InvestImageDataService","initializeInvestVideoDataSource","sortBySelectionItems","pillControlItems","name","href","defaultState","videoUploadUrl","uploadOptionKey","shouldShowContentOnly","prevProps","isOpen","_this$props3","isReplace","_this$state","shouldShowExisting","shouldShowVideoUpload","shouldShowUploadProgress","shouldShowInvest","uploadOptionMapping","videoFile","readOnly","VideoFilePicker","onFileRead","isVideo","size","videoUploadedBytes","addVideoContent","LearnMoreLink","linkText","topic","PillControl","defaultSelectedIndex","onItemChange","items","SearchBox","onSearch","searchBoxPlacedHolderText","searchBoxAriaLabel","DropdownSelector","totalCount","selectedItem","onSelect","mode","dropdownMenuAriaLabel","enableArrowKeysSupport","shouldFocusFirstFocusableItemOnMount","defaultSelectedKey","option","errMsg","onSelectionCanceled","Panel","onClose","getContainer","panelClassName","addImageStyle","panelReadyAriaLabel","staticImagePath","AddVideoContainer","withPerfMarker","getAddImageStyle","PreviewThumbnail","thumbnail","containerHeight","thumbnailMode","containerWidth","backgroundImage","backgroundPosition","backgroundSize","backgroundRepeat","VideoListViewInternal","PropTypes","acc","current","Name","Format","FileExtension","File","_len","args","Array","_key","onEditSelect","eventKey","parentNode","dataset","onReplace","onEdit","uploadVideo","IsVideoAdEditorEnabled","customThumbnailRecord","allowedVideoSizes","disableRemoveAll","hideRatioLabel","videoTypes","Label","Stack","horizontal","HelpPopupInline","isUpload","thumbnailSrc","dropdownComponent","Dropdown","Toggle","Menu","MenuItem","onRemoveAll","VideoListView","VideoResourceRepository","baseURL","odataPath","oDataToken","odataToken","oDataTokenType","applicationName","uploader","AzureUploader","resourceType","videoId","odata","blobName","odataType","resourceParamters","post","urlParameters","getResourceUploadUrl","blob","BlobName","uploadPayloadToBlob","payload","FilePayload","createResourceFromBlob","resourceId","delete","VideoSyncer","syncIntervalMS","running","shouldStop","_ref$onUpdate","onUpdate","_ref$onError","onError","perfMarker","processingPerfMarker","createChild","willInit","syncTask","_ref2$onUpdate","_ref2$onError","_ref2$previousStatus","previousStatus","_ref2$processingPerfM","_ref2$activityLogger","done","EditThumbnail","onThumbnailModeChanged","_ev","ThumbnailEditor","thumbnailRecord","setThumbnailRecord","setThumbnailMode","isStockPhotoEnabled","isImageSelectorDisplayed","setIsImageSelectorDisplayed","getThumbnailCropper","AddImageContainer","onSelectedImagesSet","setType","onImageSelectionCanceled","imageType","isChooseThumbnail","isForVNext","CaptionPicker","readFile","filePicker","fileObject","removeFile","filePickerOptions","allowedFileExtensions","isNative","displayFilePath","BackboneFilePicker","$","hide","captionFile","CaptionEditor","resourceRepository","captions","updateCaptions","setErrors","block","setBlock","deleting","setDeleting","resIdToBeDelete","setResIdToBeDelete","captionFileUploading","setCaptionFileUploading","onCloseDeleteConfirm","Spinner","SpinnerSize","large","cap","onRemove","caption","splits","split","ext","pop","languageTag","charAt","slice","createCaptionFromFile","createResource","stringify","Dialog","hidden","onDismiss","dialogContentProps","DialogType","normal","modalProps","isBlocking","DialogFooter","PrimaryButton","deleteResource","messageBarType","MessageBarType","isMultiline","CONTAINER_HEIGHT","VideoEditor","CropperEditor","_onCropSettingChanged","onCropSettingChanged","resizeRatio","x","y","newHeight","floor","newWidth","ceil","newX","newY","newName","videoSize","containerSize","videoRatio","GetResizedVideoSize","VideoControls","Cropper","targetSetting","onCropEnd","onCropMove","onInitialize","cropper","getValue","poster","controls","ErrorBlock","ResizedVideoView","imageOriginHeight","imageOriginWidth","hideControls","isCurrent","onPlayStatusUpdate","ref","totalBufferStartPoint","played","onPlay","firstBufferStartPoint","timeRange","buffered","start","end","playerWidth","playerHeight","timeCost","onPause","removeEventListener","pause","focus","controlsList","disablePictureInPicture","ClipperEditor","_onClipSettingChanged","onClipSettingChanged","onSelectionOutofSync","maxWidthBasedOnRatio","VideoClipper","Duration","PivotLinkFormat","getPivotContentStyle","EditVideoComponent","onSaveThumbnail","onCropped","onClipped","IsVideoAdEditorCropClipEnabled","IsVideoAdEditorThumbnailEnabled","IsVideoAdEditorCaptionEnabled","selectedEditor","setSelectedEditor","shouldShowApplyClipNotice","setShouldShowApplyClipNotice","isApplyTrimToAllAspectRatio","setIsApplyTrimToAllAspectRatio","setBlockUi","clipperErrors","scenario","cropperErrors","_useThumbnailEditor","initialThumbnailRecord","initialMode","getData","filteredThumbnailRecord","useThumbnailEditor","getThumbnails","_useCaptionEditor","setCaptions","getResources","resources","res","existedCaptions","useCaptionEditor","Captions","_useCropperEditor","setCropSetting","useCropperEditor","getCropData","_useClipperEditor","clipSetting","setClipSetting","isSelectionOutofSync","setIsSelectionOutofSync","useClipperEditor","Clipper","getClipData","defaultError","message","shouldDisableApply","onErrors","errorList","FormatVideoErrorForVideoEditor","applyEditSetting","setting","CropWidth","CropHeight","CropX","CropY","StartClipTime","EndClipTime","originalIdString","onApplyEditClick","settings","onCloseApplyClipNotice","PanelType","custom","hasCloseButton","customWidth","headerText","onRenderFooterContent","Checkbox","effects","isFooterAtBottom","layerProps","eventBubblingEnabled","Pivot","linkFormat","onLinkClick","itemKey","headersOnly","PivotItem","headerButtonProps","EditVideo","paddingBottom","extend","btnStyle","VideoExperienceComponent","isVideoSelectorDisplayed","onVideoListUpdated","logToSubstrate","editingVideo","replaceVideo","newVideo","videos","some","existingVideo","forEach","push","onSaveThumbnailAsDraft","onVideoPreviewRequested","isEditVideoDisplayed","syncVideo","typesTobeSynced","syncVideoForMultipleTypes","onVideoSelectionCanceled","onReplaceVideo","videoToEdit","clone","onRepairVideo","GoogleVideoImportVideoRepair","onEditVideo","onRemoveAllVideos","uploadVideoForReplace","uploadVideoAsyncToken","cancel","precentage","onRepairProgress","videoFileUploading","onUpdateUrl","videoObjFromUI","onPatchVideoObjFromMT","videoObjFromMT","IsOriginalVideoPreviewPercentageEnabled","VideoBackupFileUrl","objURL","URL","createObjectURL","videoTypeReplacing","uploadPerfMarker","getBlobPerfMarker","videoPreviewShowMarker","onVideoUploadStatusUpdate","self","async","events","onTokenUpdate","onResponse","onFinally","postVideoByFilePromise","token","handleFileRead","resolve","reject","onSuccess","fileSize","errorMessage","join","percentage","repairProgress","getImagePathFromGenericImagePath","genericImagePath","substr","handleVideoSelect","mes","module","syncVideoForType","syncVideoForAllTypes","videoSyncer","startSync","v","pilot","addedVideos","replaceSomeVideos","every","newVideos","onErrorsUpdated","defaultPreviewFields","shortHeadline","longHeadline","businessName","videoResRepository","bind","stopAll","hasFailedvideo","vid","updatedVideoList","_this3","newVideoList","_newVideoList","matchVideo","updatedVideo","onVideoSelectedReplace","enableShowingErrors","videoLabelHelpTopic","disableUploadTextField","videoExperienceCircleUploadType","_this$state2","navigator","clipboard","writeText","ProgressBar","uploadpercentage","_this4","_this$props4","genericImage","shouldShowVideoReplacement","repairVideo","videoListComponent","VideoExperience","PreviewGeneral","context","multiLineTextRefs","play","mouseIn","processText","containerClass","hideText","customThumbnail","onMouseEnter","onMouseLeave","immersive","muteByDefault","rel","previewTexts","MultiLineEllipsisText","BusinessNameWithAds","additionalSetting","getPreview","previewSetting","propsToPass","VideoPreviewCarousel","handleSelect","selectedIndex","direction","setupAdPreviewIndexToTitlesMap","currentIndex","adPreviewIndexToTitle","responsivePreviewsTitles","genericTitle","allVideosValid","valid","Carousel","Item","getAdPreviewTitle","allVideosAreValid","activeIndex","nextLabel","prevLabel","aspectRatioOption","aspectRatioOptions","StockImageItemWrapper","isSelected","getAutoCroppedImages","StockPhotoServiceError","_Error","innerError","_wrapNativeSuper","Error","StockPhotoDataSource","currentQuery","odataService","StockImageDataService","customParams","controller","skip","filterQuery","currentStart","searchInternalAsync","trim","reset","culture","getStockImages","$search","language","includevertical","filteredData","Dimensions","saveStockImage","ImageRepository","imageExperienceConfig","imageOData","ImageOData","validateImageWithDimension","validateImageSizeAsync","_ref$filterTerm","filterTerm","sortDefinition","sortQuery","getExistingImages","queryify","c","imageId","isImageFittingEnabled","adType","getImageByIdAsync","optionalCallback","suggestionId","processNewlyAddedImage","processedImage","imageIds","_ref4$suggestionIds","suggestionIds","addImagePromises","getImageByIdAndProcessAsync","all","_this$imageExperience","isAudienceAd","mediaRepository","isImageAdExtensionMode","isMSANBoostEnabled","isAudienceAdSmartCropEnabled","isPmaxSmartCropEnabled","postValidationError","isDueToResizing","smartCropActivity","resolveOriginalImagePromise","hasBaseImage","BaseIdString","hasBeenBulkCropped","hasPlacementSettings","deserializeImageAssetMetadata","originalImage","preprocessImgObjMT","baseImgMT","finalImgObjMT","imgObj","skipSmartCrop","imageObjExpanded","getExpandedImages","originalImageToExpand","imgObjCropped","getSmartCroppedImagesAsync","originalImageToCrop","setCroppingType","effectSettingsModel","placement","BaseImage","setEffectSettings","updatePlacementWithBaseCropSettings","mtImgObject","updatePlacementWithPlacementSettings","updatePlacementSettings","imageData","inProgress","uploadImageAsync","updateCurrentProgress","updateImageAsync","deleteImageAsync","imageUrls","bulkSaveImagesByUrl","images","_this5","addAssetPromises","addAsset","err","allSettled","results","allErrors","reason","firstErrorCode","_this6","imageUrl","_ref10$imageSource","addAssetsByUrl","ids","_this7","_ref11$imageSource","validateImageSizePromises","fullUrl","_ref13","validateImages","imageIdsAndSuggestionIds","saveErrors","filteredImageIds","getImagesByIdsAndProcessAsync","processedImages","animation","borderTopColor","borderLeftColor","borderRightColor","borderBottomColor","StockImagePickerContainer","stockPhotoDataSource","onStockImageSelected","imageRepository","isAdCreatorEnabled","onSelectStockImage","SaveAsync","stockImageId","stockImageVendorId","StockImageVendor","croppedImages","getCroppedImage","ImageSizeValidationError","getInnerError","bingLoadingImage","imgPath","onKeyboardEscapeFromImage","maximizeFrame","onEscapeFromImage","ValidationGroup","stopPropagation","Button","onUserImageDelete","onUserImageEdit","isForThumbnail","UserImageItemWrapper","imageEditText","setImageEditText","attributes","UserPhotoDataSource","fetchImageAsync","currentFilterTerm","baseIdString","UserImagePickerContainer","userPhotoDataSource","onImageSelected","imageList","_useImageDelete","showDeleteConfirm","setShowDeleteConfirm","isUiBlocked","setIsUiBlocked","deleteImageIdString","setDeleteImageIdString","_useState7","_useState8","imageDeleteErrorMessage","setImageDeleteErrorMessage","onDeleteImageConfirmed","ImageDeleteConfirm","ConfirmDialog","isDisplayed","errorText","confirmString","cancelString","onClickConfirm","onClickCancel","imageIdsUsed","isArray","imageListItem","imageListItemItem","useImageDelete","getUserImageItemWrapper","selectedImages","originalImageUrl","extractedImageModel","Source","replace","urlPrefixOptions","FinalUrlInput","finalUrl","finalUrlProtocol","alertString","invalidURL","onUpdateFinalUrlPrefix","onUpdateFinalUrl","getDomain","onBlur","onKeyDown","keyCode","Enter","iconProps","iconName","getStylesFuncGenerator","isEmptyUrl","suggestion","emptyURL","isInProgress","subdomainUrlRegex","subdomainChangeHandler","newSubdomain","setNewSubdomain","initialSubdomain","onUpdateSubdomainUrl","newValue","regexResult","getSubdomain","ImageSuggestionPickerContainer","onImageSelectedByUrl","finalUrlDomain","enableSubdomain","blockImagePickerOnly","isTimeout","getAlertString","imagesList","fullSrc","showSuggestionError","isInvalidUrl","input","eventMessage","ImageSuggestionItemWrapper","maximumItemCount","FetchImageResult","FetchStatus","SocialMediaDataSource","constructor","repository","socialMediaAccounts","subscribe","unsubscribe","fetchImageByAccount","SocialMediaImages","getSocialMediaImages","NoImagesFound","Value","d","fetchImages","SocialMediaAccounts","getSocialMediaAccounts","NoAccountFound","twitterReg","RegExp","SocialMediaPickerContainer","setDataSource","fetchStatus","setFetchStatus","Fetching","alertMessage","setAlertMessage","account","setAccount","setAlertMessageByResult","hasBeenCalled","useRef","useConstructor","isValidUrl","match","Key","fieldGroup","Modal","isModalOpen","ImageSuggestionsDataSource","loadMoreByPageNumber","currentPageNumber","executeCallBackIfExist","hasMoreImagesToFetch","Images","ImageUrl","searchQuery","setSearchQuery","SharedSearchBox","onQueryChange","newQuery","poll","timeout","pollInternal","SocialMediaRepository","accounts","SocialAccounts","pillControlTypes","AddImage","onImageSearch","getDataSource","preDefinedFilter","onThumbnailSelected","selectedImage","imageSelectPerfMarker","imageTypeToCheck","createImageObjectPromise","imageValidationError","useBaseImageInfo","imageToCrop","smartCroppedImages","defaults","generateAspectRatiosPromise","imagesSet","getImageValidationErrorMessage","onNewImage","_ref2$recoverFromImag","recoverFromImageLoadError","saveImagePromise","imageSourcesArr","handlePromiseArr","enableNewFilePicker","uploadImageInfo","previewImageArr","generatePreviewArray","files","fileSources","curMaxUploadNum","getMaxUploadNum","uploadNum","_loop","i","handlePromise","preValidationFailed","ImageLoadError","updateProgress","setProgress","setUploadProgress","imgObjArr","stringTemplateKey","errorMsg","isUndefined","websiteSuggestionActivity","any","compact","multipleImageSources","fileUploadActivity","selectedFilesCount","onUploadStart","onUploadComplete","pillControlValue","onFileSelected","fileObjectArr","querySelector","preventDefault","imageListLength","maxUploadNum","progress","updateFilePreviewArrayUploadProgress","pillControlIndexToDataSource","isStockImages","isImageExtension","setProcessExternalImageCallback","socialMediaRepository","initializePillItems","initializeUserPhotoDataSource","_item$Preview$Dimensi","Preview","initializeStockPhotoDataSource","userPhotoInitialized","blockSuggestionImagePickerOnly","hasRendered","subdomain","fullUrlWithSubdomain","forceInternalScrapingService","dialogRef","datasource","prevState","isFinalUrlImageRetrievalEnabled","suggestionPoller","getLandingPageSuggestions","landingPageUrl","enableOfflinePollingDelay","minimumResolution","minimumSize","defaultSelectedPill","_this$props5","hideStockPillControl","showWebsiteSuggestion","shouldEnableWebsiteSuggestion","labelString","IsSocialMediaImagesEnabled","getMinimumSizeForImage","imageSuggestionDataSource","initializeImageSuggestionsDataSource","getMoreLandingPageSuggestions","_this$props6","isLogoEnabled","shouldShowPillControl","shouldShowExistingImagePicker","shouldShowStockImagePicker","shouldShowSearchBox","shouldShowSortBy","shouldShowFilePicker","shouldShowSuggestionPicker","shouldShowSocialMediaImagePicker","feedbackActivity","getUrlProtocolAndDomain","addImageLabelText","addImageContent","isEmpty","recommendationStockImages","Query","IsStockPhotoFilterEnabled","StockImageFilter","i18nLegacy","onFilterQueryChange","updateFilterQuery","setUiBlockerStatus","subdomainUrl","extendPath","additionalCallback","ImageFilePicker","enableMultiple","enableDrag","hideDescription","UploadPreview","assetList","AspectRatioChoiceGroup","landscapeEnabled","isBusinessLogo","setAspectRatioOption","isThumbsUpDownEnabled","ThumbsUpDown","featureArea","scenarioName","isTestEnv","onThumbsDownSignal","onThumbsUpSignal","containerName","addImageContentVNext","onLayerDidMount","popoverContainer","addScenario","imageOptions","setImageOption","isImageExtensionsEnhancementsEnabled","withInstrumentation","aspectRatioSettings","customAspectRatioSettings","placementPreviewProps","AdPlacementPreview","isMultiMediaAdsPhase2Enabled","opacityChangeEnabled","getPreviewByType","typeConfig","MultiImageGeneral","previewType","AdPlacementMultiImagePreview","getGenericImageObjectAsync","CarouselPreview133x100","setIndex","multiImageList","setMultiImageList","imagesToSetup","placeHolderImages","setupPromises","imageToSetup","defaultImages","placeHolderImages1","placeHolderImages2","newMultiImageList","imageObjs","cloned","CarouselPreview178x100","extraPlacementInfo","_extraPlacementInfo","EPT","MSAN","WideImage","aspectRatioUIString","previewStringKey","disclaimerStringKey","MSEdgeSingleCarousel","MSNInArticle","SquareImage","MSNSmallHeadline","MSANV2","MSEdgeCarousel","MSANBanner","MSANRiver","MSNCarousel","MSNPartnerStripe","MSNRestoday","MSANRectangle","MSEdgeMobile","MMA","VerticalImage","LandscapeImage","BingSearch","Outlook","Mobile","isTextPlacement","Web","ImageExt","BingDesktopSingleImage","BingDesktopMultiImage","BingMobileMultiImage","MSEdgeMediumHeadline","MSNSingleCarousel","MSNMediumHeadline","MSNDoubleCarousel","MMAV2MSNRiver","MMAV2MSNSingleCarousel","PMax","AudienceWideImage","AudienceSquareImage","MMAWideImage","MMAVerticalImage","MMALandscapeImage","MMAV2MSEdgeCarousel","MMAV2MSNRestoday","MMAV2MSNPartnerStripe","Responsive","Boost","HeroImageCarousel200x100","isBoostPlacement","HeroImageCarousel122x100","HeroImageCarousel159x100","HeroImageCarousel180x100","HeroImageCarousel233x100","HeroImageCarousel320x100","HeroImageCarousel57x100","WindowsSpotlight","DiscoverCard","StartMenu","ActionCenter","Banner","Prong1Prong2Feed","Coachmark","LinkedIn","Landscape","SingleImageDesktop","SingleImageMobile","SingleImageMediumRectangle","SingleImageMobileInterstitial","SingleImageNative","Square","previewTitle","Vertical","getCurrentPlacementInfo","placementType","getPlacementType","adPreviewConfig","placementConfig","placementTypes","flatten","getPlacementTitle","placementInfo","getPlacementTitleInViewAll","normalizePreviewTexts","callToAction","AdTypeEnum","NewBoost","pMax","getOnRenderPlacement","containerClassName","logo","hotspots","AdPlacementComponent","placementMeta","isPlacementIncluded","isPlacementEnabled","unifiedPreviewTexts","isEnabled","placementData","extraPermissions","displayFinalUrlOrigin","UnifiedPreviewGeneral","editingImage","previewContainerClassName","finalPlacementConfig","editingPlacementTypes","getPlacementListMetaDataByImageType","uniq","placementSetName","_useImageExperienceAd","useImageExperienceAdPreviewModel","placementSets","multiImagePlacementSets","onUpdateImageExperienceImageList","onRenderPlacement","placementList","placementSet","AdPreviewSinglePlacementLayout","hasContainer","UnifiedCarouselPreview133x100","placeHolderImagesProp","imagesForDisplay","setImagesForDisplay","_toArray","placeHolderImagesList","previewPlacementContainerRoot","AdPreviewCarouselLayout","enableAutoRotate","disableDefaultStyles","customCarouselLayoutStyles","adPreviewCarousel133x100Container","UnifiedCarouselPreview178x100","EditImageComponent","newImage","onSaveEditedImage","prevProp","imageEditActions","imageCroppedInEdit","desiredBoxHeight","onContextMenu","editDialogTitle","imageEditDescription","showUnifiedAdPreview","enableUnifiedAdPreview","CarouselPreview178x100Component","CarouselPreview133x100Component","editImageContent","isImageEditDisplayed","editImageStyle","EditImage","getEditImageStyle","PlaceHolderImage","onAddImage","imagetype","emptyStyle","ImageListView","onReplaceImage","onReCropImage","showDisabledReasonHandler","element","ReactDOM","Callout","role","showDisabledReasonCallout","disabledContainerRef","hideDisabledReasonHandler","isAdPreviewRefreshEnabled","HelpPopup","getImageTypesWithOrder","imageItem","imageListImg","IsReadOnlyUser","onRemoveAllImages","getEditingMediaProps","model","selectedImageType","editingMedia","orginalAsset","OutlookPreview","previewSpecificClass","isMobilePreview","panelStyle","previewHeaderStyle","previewContentStyle","placementContainerStyle","getPreviewCarouselStyle","theme","playPauseCarouselStyle","gridPreviewContainer","editImageCommonStyle","placementContainerRoot","placementContainerRootGridView","UnStyledMMAPreviewCarousel","onAddAspectRatio","getEditingImageIndex","imageListForDisplay","onCrop","isViewAllPanelOpen","onCropImage","onRemoveAspectRatio","setAutoRotate","e2eTestEnvironment","auto","clearAutoRotateListener","indicators","previewCount","childElementCount","nextIndex","autoRotateListener","setAutoState","stop","aspectRatiosOrder","isRecommendationTypeImproveMultiMediaAdsEnabled","setupImagesAsync","adPreviewIndexToTitleInViewAll","attachAIGenAssetContextualAttribute","improveMMAOption","newI18n","templateKey","typeKey","enableActionBtn","isSelectedImageIncluded","hideActionBtn","isInvalidImageSize","getActionButtons","getAdPreviewHeaderInternal","editButtonTextKey","ConditionalTooltipHost","condition","shouldDisableExcludeBtn","hideActionButtons","validationMsgElement","getValidationMessage","widthToCheck","heightToCheck","totalImageListCount","disablePlacementActions","isOnlyOneIncludedImage","onlyOneIncluded","boostSettings","dismissText","_this$state3","isPlacementActionsEnabled","hideOutlookPreview","enableViewAllBtn","setIncluded","isPlayPausePreviewImageEnabled","PlayPauseButtonsContainer","getAdPreviewHeader","getAdPreviewActions","InjectedControls","PlayPauseButtons","isPlaying","customizedClassName","renderPlacementPreview","renderBoostPreview","ActionButton","onRenderIcon","viewAllPlacementsActivity","onUsedViewAllPlacements","AdPlacementsGridPreviewPanel","cellsNumberPerRow","onRenderCell","cellIndex","imageAsset","MMAPreviewCarousel","getGridPreviewCarouselStyle","getMMAPreviewStyles","StyledAdPlacementsGridPreviewPanel","multiImageAspectRatio","bingSingleImageAspR","UnStyledPreviewCarousel","enableCreatorFeatures","editPlacementActivity","IsMultiMediaAdsPhase2Enabled","setupAdPreviewIndexToTitlesMapInViewAll","adPreviewTypesOrdered","multiTitle","singleExtensionTitle","placeHolderImages3","customClasses","reCropButton","getAdPreviewButtonsForAdCreator","isSupported","_this$state4","eligibleLayout","multiImages","mobileMultiImages","bingDesktopImages","bingSingleImage","arrIndex","viewAllPlacementsButton","defaultImage","imgSet","image133x100","setNewId","PreviewCarousel","forwardRef","customStyleByAdType","placementContainer","placementWrapper","unifiedCarouselLayoutWrapper","customCarouselClassname","wrapperClassNameMap","PreviewPlacementContainer","shouldShowAdditionalDisclaimer","previewPlacementContainer","additionalDisclaimer","getPlacementContainerStyle","UnifiedAdPreviewSinglePlacementWrapper","previewLogo","_adPreviewConfig$plac","_adPreviewConfig$extr","placementTypesList","placementAlias","alias","placementTypeInner","PlacementType2AssociationTypeMap","setAssociationType","placementConfigInner","firstImage","pl","imageMeta","customClassName","defaultPlaceHolderImage","UnifiedAdPreviewCarouselLayoutWrapper","onActiveIndexChange","newIndex","useCustomCarousel","getChangeImageBackgroundDialogAsync","CopilotChangeImageBackgroundDialog","ImageExperienceComponent","findImageListIndexWithImageId","placements","findImageIndexWithType","addMediaPanelView","defaultIndex","OpenAddImagePanel","addLogoActivity","isMMAEnabled","onImageListUpdated","VIEWS","WebsiteImage","LandingPage","defaultAddImageIndex","currentSelectedImageId","newImageList","imagesToAdd","firstPlacement","selectedImagePlacements","_this$findImageSetInd","findImageSetIndexById","targetImageSet","indexToReplace","targetId","existedLogoIndex","currentAssociationType","selectedLogoList","getImageCountInLogoIds","imageToReplace","replaceImage","addImageErrorMessage","onImageReplaceCancelled","imageToEdit","getImageOptionOfImage","onSelectImage","onRemoveImage","imageOptionUsedForLog","imageToRemove","findImageSetById","onImageRemoved","shouldDirty","imageListToRemove","getImageList","imageArr","getFirstElement","onSaveEditImage","saveImgObj","customOnSaveEditImage","updatedAltText","imageIndex","newImagePlacements","existingPlacementIndex","newConfig","onImagePreviewRequested","previousEditingImageCropSettings","fieldsToKeep","IsIncluded","getBasicData","setAltText","IsBoostImageAltTextEnabled","asset","transformAltTextRequest","assetId","folderAssetType","folderODataService","updateAsset","replaceMultimediaImage","onCancelEditImage","onImageEditCancelled","onImageCropCancelled","onEditImage","baseImageId","OpenEditImagePanel","editImageActivity","imageSetToEdit","isImageValidForChangeBackground","onChangeBackgroundScene","isBackgroundSceneDialogOpen","copilotEditingImage","notificationApi","showWarning","onApplyBackgroundScene","newImageUrl","_ref3$shouldUpload","shouldUpload","copilotApplying","preResult","addImageByUrl","onCancelApplyBackgroundScene","addImageByUrlThenProcessAsync","getCurrentImageType","addImagesByUrl","addImagesByUrlThenProcessAsync","getMultiAddedImageErrorMessage","_ref5$isLogo","_ref5$isPortrait","targetIsLogo","targetIsPortrait","getCustomConfigForImageSources","addMediaConfig","availableImageSources","SocialMedia","getComponentAsync","setAddNewImageCallback","setAddNewImagesCallback","setOpenAddImageCallback","customMaxImageCount","enableImageDeleting","enableStockMultipleSelection","enableInvestMultipleSelection","enableWebsiteMultipleSelection","isBackgroundChangeEnabled","isImageUpscaleEnabled","AudienceAdSmartCrop","PMaxSmartCrop","IsAdCreatorV1Enabled","IsAdCreatorV2Enabled","replaceExistingAssets","stockImageDataService","ChangeImageBackgroundDialogLazy","default","getFolderODataService","oDataPath","legacyOdata","dateFormat","socialMediaDataSource","assetLibraryConfig","timeZone","preferencesService","onImagesSelected","onImageAddError","genericError","recommendation","maxImageCount","isAllUploadFlowImageUpscaleEnabled","showCopilotOptionForImage","supportImageUpscale","isCopilotRegionRestricted","feature","serverContext","isRestricted","existingIndex","imageInList","typeIndex","portalContainer","isRenderAddInImageList","customOnEditImage","imageListClassName","renderAddImage","ResponsiveImageListView","shouldDisableAddButton","currentSelectedLogoId","showCopilotOption","enableEdit","enableImageListEdit","disable","logoList","logoRatiosCount","tooltipId","isAudienceMMAWithLogoAndCTA","previewImage","hasCropSettingsChanged","hasEffectSettingsChanged","allLogos","curLogos","curPreviewLogo","PreviewSingleRightRailWrapper","editingPlacementType","imageListForPreview","currentImageList","currentImage","PreviewCarouselRightRailWrapper","uploadImageWithValidationAsync","upscaledImages","count","imageName","showInfo","fileName","fileCount","_this8","selectedImageId","logoImageList","logoIds","_this9","extensionHeadline","customPreviewTexts","isBoostPortraitEnabled","imagesPortalContainer","logosPortalContainer","portraitPortalContainer","isBulkEditMMA","disableThumbsUpDown","assetLibraryEventHandler","IsAADUser","isTestEnvironment","domain","minUploadSize","imageExperienceElement","imageListComponent","imageErrorMessages","AddImageCrudAdComponent","isAADUser","isLiteLandingPageEnabled","setIsOpen","newOpen","uploadImage","processUploadedImage","onProcessUploadComplete","imageExperienceProps","managedViewSelectionState","updateManagedViewSelectionState","newView","stockImageConfig","selectStockImage","investImageConfig","getInvestImages","socialImageConfig","customMediaSourceConfig","I18nModel","isAssetLibraryAIGCMVPEnabled","isStockImageEnabled","eventHandler","StockImages","MediaEditorPanel","onApply","isStock","hasRightRail","onRenderRightRailContent","previewImageUrl","renderPreviewCarouselForRightRail","onRenderAllowedAspectRatioControl","disabledPivotItemKeys","isImproveMMA","PivotItemKey","customizedDefaultSelectedPivotItemKey","Crop","fallback","defaultExpanded","Heading","Title","toggle","Collapse","cropImage","postAssetEventLog","ImageExperience","withServerContext","SavedAdList","onEditAd","adId","adid","onRemoveAd","onCreateAnotherAd","Row","savedAdsList","savedAd","Headlines","LongHeadlines","Descriptions","ThumbnailForAdList","Headline","LongHeadline","BusinessName","isEditable","TagComponent","IconButton","isRadial","useTheme","RadialProgress","progressPercentage","stroke","strokeWidth","Progress","getImageListWithoutLogo","getDefaultCurrentSelectedImageId","imageListWithoutLogo","getDefaultCurrentSelectedLogoId","getLogoList","getDefaultSelectedImageId","genericImageProp","onAddAspectRatioProp","onCropImageProp","onReplaceImageProp","onRemoveAspectRatioProp","setActiveIndex","setDefaultImages","setPlaceHolderImages","setIsViewAllPanelOpen","isSelectedImageLogo","isDefaultImageLogo","theImageListForDisplay","defaultImages1","imageExperiencePlacementSets","_useMemo","params","_useMemo2","onRenderPlacementGridView","placementIndex","getPlacementTitleImpl","setPreviewIndexByType","useImperativeHandle","AdPreviewCarouselLayoutEx","startAutoRotating","customPlayPauseButtonsStyles","resetOn","UnifiedPreviewCarousel","UnStyledMMAMSANPreviewCarousel","theAspectRatiosOrder","curAspectRatios","UnifiedMMAMSANPreviewCarousel","customizedUIBlockerStyle","getImageExtensionsPaneStyle","panelFooter","cropPanel","overflowY","neutralSecondaryAlt","multiImageInnerCarouselStyles","floatButtonStyle","floatButton","addIcon","themeSecondary","listContainer","alertBanner","labelContainer","overrideImageRecommendationClasses","panelHeading","panelTitle","seeAll","DescriptionView","localizedText","selectedImgExtensionsForAssociation","limit","getThumbnailServiceUrl","bingUrl","baseUrl","urlParams","URLSearchParams","search","set","getUriWithParam","IMAGE_WIDTH_PX","getImageExtensionItemThumbnailUrl","itemImage","Asset","getImageExtensionListStyles","getImageExtensionItemStyles","itemContainer","imageExtensionItem","btnItem","textItem","selectRadio","deleteButton","itemZIndex","themeDarkAlt","editButton","noImageFallbackContainer","justifyItems","ImageExtensionItemPreview","onDelete","hovered","setHovered","toggleHoverState","disabledToggleToolTip","tabIndex","submitEvent","xmlns","viewBox","Glyphicon","glyph","iconStyle","ImageExtensionItemSeeMoreLess","onSelectShowAll","seeMoreItemsCount","seeLess","imageExtensionContainer","FontIcon","ImageExtensionsList","imageContainerWidth","setImageContainerWidth","imageContainerNode","showAll","setShowAll","itemsSize","initialItemCount","hasSeeMoreLess","handleResize","offsetWidth","measuredRef","node","CELL_TYPE","FocusZone","List","cellType","getCellType","renderCount","getItemCountForPage","getDialogImageExtensionStyle","FieldType","FieldLimit","fieldsConfig","labelKeyForLocalization","helpTopic","required","validators","validate","msg","runValidators","_validators$i","validateField","fieldType","fieldValue","fieldConfig","CreateImageExtensionDialog","createImageExtension","onCreateSuccess","isImageAltTextPrefillEnabled","setLoading","fieldValues","setFieldValues","fieldErrors","setFieldErrors","disableCreate","setDisableCreate","logActivity","createActivity","logTrace","onCreateButtonClicked","validateAllFields","onFieldChangeFactory","onCancelClick","prefillAltText","topOffsetFixed","isClickableOutsideFocusTrap","tokens","childrenGap","originalRenderer","Fragment","DeleteImageExtensionDialog","deleteImageExtension","selectedImageDelete","onDeleteSuccess","getImagesFromImageList","isImageExtensionCommitedToServer","getImageSuggestionPanelStyles","panelHeader","alignSelf","backButton","buttonContainer","ImageRecommendationsPanel","themes","loadNextPage","activeImages","setActiveImages","activeTheme","setActiveTheme","themeNames","onSwitchTheme","rawImages","chain","onRenderHeader","onSelectImageInternal","_activeImages$index","panelStylesProp","FluentProvider","webLightTheme","CopilotTab","active","onActiveChange","CopilotTabItem","tabKey","FluentImagePicker","loadMoreImages","hasMoreImages","imageCellWidth","imageCellHeight","ImageExtensionsPaneView","onImgExtensionSelected","advertiserCustomerId","accountId","updateImageExtension","legacyI18n","dataModelUtil","imagePath","maxImageExtensionsPerAdGroup","preferenceService","suggestionState","dispatchSuggestionState","urlPrefix","onUpdateUrlPrefix","onUpdateUrlValue","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","_getAdCreatorInstrume","websiteSuggestionCarouselActivity","closeEditImageView","closeCreateImageExtView","closeDeleteImageExtView","_useAssetLibraryImage","useAssetLibraryImagePicker","onNewImageSelected","imagePlacements","imagePickerError","setImagePickerError","clearImagePickerError","_suggestionState$sugg","_suggestionState$caro","carousel","RSAImageExtensionCrop","RSAImageRecommendationReplace","_useContext","RecommendationContext","recommendationContext","_useState19","_useState20","imagesToSuggest","setImagesToSuggest","_useState21","_useState22","carouselErrorMessage","setCarouselErrorMessage","_useState23","_useState24","isSuggestionsPanelOpen","setIsSuggestionsPanelOpen","imageAssets","copilotTracking","carouselState","isError","panelState","panelImages","suggestionFromCopilot","carouselFromCopilot","suggestionImages","suggestionInProgress","truncatedImages","messageInfo","isLoading","trackSelectedImageAssets","ImageAssets","SuggestionStatus","SelectSuggestionError","SelectSuggestionComplete","ExtensionImagesControl","onImageListChanged","eligibleLayouts","Alert","level","icon","dismissible","align","getImageListFromMTImagesAsync","EligibleLayout","ImageSuggestionCarousel","onSelectSeeAll","isCollapsible","selectable","hideData","enablePolicyMessage","showViewAllInHeader","stylingOverrides","classOverrides","seeAllLinkText","allowToggleSelectable","getMoreImageSuggestions","decorateUIState","computeNewItemsMtModels","ImageExtensionsPaneContainerBase","imageExtRepository","adContext","hasErrorInUrl","headlines","descriptions","onImageExtensionChanged","onPreviewImageChanged","cachedImageExtensionChanges","rest","_objectWithoutProperties","_excluded","_useWebsiteSuggestion","useWebsiteSuggestion","added","removed","updated","changes","setChanges","association","findAll","where","adGroupId","campaignId","$orderby","prev","imageExtensionForPreview","previewUrl","extensionData","DisplayText","Scheduling","createImageExtensionMtModel","itemState","isItemAssociated","newCurrent","newUpdateItem","ImageExtensionsPaneContainer","withPreference","IMAGE_DIM","getFullyShownImagesCount","imageDimension","itemWidth","getCarouselStyles","carouselParent","disabledCarouselParent","imageContainerLeftMargin","overflowX","imageParentContainer","imageParentLeftOffset","numberOfImages","imageClickableContainer","loadingMessageContainer","panelIcon","panelHelpButton","imageHintRight","imageHintLeft","paddleBtn","moreIcon","seeAllInHeader","spinner","getBlockerStyle","parentContainer","accent","useBrandKitHeader","buildHtmlLink","buildPolicyMessage","agreement","ImageWithRetry","failureCount","showShimmer","onToggleSelectable","showEllipsisWhenNoMoreImages","onOffsetChange","alwaysShowViewAll","showHeading","onRenderImage","enableBrandKit","useBrandKit","setUseBrandKit","getCarouselStylesFinal","getFullyShownImagesCountFinal","initialImageContainerLeftMarginFinal","initialImageContainerLeftMargin","offset","setOffset","hasDismissedMessage","setHasDismissedMessage","panelOpen","setPanelOpen","handleBrandKitToggle","displayedImageCount","noMoreResult","keyDownHandler","imageContainers","querySelectorAll","rightButton","ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Tab","shiftKey","seeAllLink","toggleBrandKit","appearance","StyleGuideFilled","StyleGuideRegular","HelpButton","inlineLabel","leftIconButton","Space","rightIconButton","paddleBtnRight","isSeeAllShown","PaddleBottomValue","arialHidden","ellipsisIcon","onToggle","open","showLoadingShimmer","Skeleton","SkeletonItem","expanded","showRightIconButton","showEllipsisIcon","showSeeAllLink","maximizeWidth","Layout","getCardPreferenceName","entityType","InlineChartReactWrapper","onWindowResize","resizeChart","resizeWidth","setInContextRecommendationContent","hasRecommendation","hasInContextRecommendation","getNewDateRange","waterfallDateFilterProcessor","WaterfallFilterType","DateFilter","setNewDateRangeState","newDateRange","dateRange","getCardComponent","scope","recommendationTypes","filterService","refreshGrid","campaignType","getFilteredCampaignTypeFromRawFilter","CampaignType","inlineContextComponent","inContextCampaignType","inContextScope","inContextCardPerfMarker","isActiveChild","PageReady","afterPageReady","getInContextCardDependencies","resp","InContextCard","recommendationProps","hideCard","hideInContextCard","applyAllCallback","campaignCacheManager","invalidate","haveEnoughSpace","pageTitle","pageTitleInclusiveWidth","outerWidth","showInContextCard","chartWidth","inlineChartContainer","containerMBP","inlineChartPanel","chartPanelWidth","filterUpdated","newFilter","updateToolbar","currentlyShow","menuId","onNavItemClick","toolbarEditor","update","iconLeftGlyphName","showChart","trigger","resizeChartListener","Data","chartPref","date","setFullYear","getFullYear","defaultDateRange","compared","grain","cardHiddenTime","findByName","CardComponent","InlineChartWrapper","getCustomizedFilter","isShowChart","defaultPrimaryMetric","hideChartPanel","loadInlineChartWithWebpack","chartContainer","gridCriterionType","_ref2$preexecuteFlag","preexecuteFlag","isFluctuationsEnabled","gridName","gridDataSource","_ref$preexecuteFlag","i18nInlineChart","globalLegacyI18n","IsFluctuationExperimentEnabled","appConfig","ThemeFluent","preferencePromise","inlineChartDeps","addDateChangeListener","appState","seriesColors","primary","comparative","secondary","azure","store","pathConfig","adapter","jsdata","mockJsData","edm","mockEdm","pageContext","preference","InlineChartPreferences","chartDataAdapter","ChartDataAdapter","getPreferencesAndDefaults","getPromise","p$Initialized","spread","getCombinedFilter","onDateChangeHandler","CurrentCampaign","CurrentGridName","InlineChartReact","withMenuLayout","withGlobalFilter","loadInlineChartGeneral","toolbar","gridToolbarGroup","toolbarWithItem","refresh","getODataErrors","errI18n","activity","currentScenario","loadInContextRecommendationsCard","create","currentActivity","withRecommendationsScope","withRecommendationServices","deps","asyncScheduler","cacheManager","combineText","channel","CHANNEL_TYPES","INCONTEXTCARD","el","withBlocker","adDisplayUrlService","CurrentAccount","AdvertiserCustomerID","userId","CurrentUser","customerId","Token","inlineChartContainerStyle","inline","baseInlineChartContainerStyle","fluc","backdropFilter","getFluctuationContentStyle","fluctuationStyle","PAGE_TYPES","CONTROL_TYPES","SEARCH_IDEA_PRODUCTS","SEARCH_VOLUME_PRODUCTS","SEARCH_VOLUME_UPLOAD_PRODUCTS","TRAFFIC_ESTIMATE_KEYWORDS","TRAFFIC_ESTIMATE_UPLOAD_KEYWORDS","TRAFFIC_ESTIMATE_ADGROUP_KEYWORDS","TRAFFIC_ESTIMATE_BID","TRAFFIC_ESTIMATE_BUDGET","LANDING_PAGE","CATEGORY","DATE_RANGE","NETWORK","LANGUAGE","LOCATION","LOCATION_LD","LOCATION_LEVEL","SEARCH_VOLUME_CHART_TYPE","KEYWORD_FILTERS_GROUP","AVERAGE_MONTHLY_SEARCH","SUGGESTED_BID","AD_IMPRESSION_SHARE","COMPETITION","ACCOUNT_KEYWORD_DEDUPE","INCLUDED_KEYWORD","NEGATIVE_KEYWORD","IDEA_DATE_RANGE_DATA_TYPE","URL_OPTION_TYPES","DOMAIN","PAGE","LANGUAGE_TYPES","NETWORK_TYPES","ALL","OWNED_AND_OPERATED","SYNDICATION","OPERATOR_TYPES","START","END","KEYWORD_FILTER_WITH_RANGE_TYPES","COMPETITION_LEVEL_TYPES","GRID_TYPES","GRID_LEVELS","ADGROUP","KEYWORD","INNER_KEYWORD","ADGROUP_ESTIMATE","KEYWORD_ESTIMATE","INNER_KEYWORD_ESTIMATE","DEVICE_ESTIMATE","LOCATION_ESTIMATE","ADGROUP_ESTIMATE_COLUMNS","AVERAGE_CPC","AVERAGE_POSITION","CLICK","COST","CTR","IMPRESSION","KEYWORD_ESTIMATE_COLUMNS","IDEA_ATTRIBUTE_TYPES","LANDSCAPE_TYPES","SECTION_TYPES","GROUP_POSITION","PERIOD_TYPE","TRAFFIC_EST_CHART_TYPE","LOCATION_TYPE","COUNTRY","STATE","SUBGEOGRAPHY","METROAREA","CITY","POSTALCODE","COUNTY","DMA","TARGETED","SEARCH_VOLUME_LOCATION_LEVEL","KEYWORD_PLANNER_PREFERENCE_PREFIX","LOCATION_COUNTRYCODE_WHITE_LIST","REQUEST_SUPPORTED_LANGUAGES","countryId","prefix","lcid","DeviceTypes","MATCH_TYPE","EST_BUTTON_TYPE","EST_DATA_TYPE","EST_DEVICE_DROPDOWN_TYPE","LOG_TYPES","LOG_ACTION_TYPES","LOG_TAB_OPTIONS","LOG_SORT_BY_OPTIONS","LOG_TRACKING_ACTIONS","AdGroupName","MaxCPC","KEYWORD_IDEA_INNER","LANDING_PAGE_OPTIONS","KEYWORD_PLANNER_TOOL","CAMPAIGN_CREATION","ADGROUP_CREATION","KEYWORD_CREATION","REPAIR_KEYWORD_CREATION","CHANNEL_TYPES_MAPPING","LOCATION_TARGET_LIMIT","defaultIdeaAttributes","defaultIdeaAggregations","AggregationKey","AggregationValues","IdeaAttribute","AggregationType","defaultDevicesTypeIds","defaultIdeaOverview","Segment","Devices","isJsonEqual","v1","v2","formatUrl","scopeValues","getOptions","_ref2$data","_ref2$channel","contentType","headers","authorization","stringifySync","getRequestSupportedLocaleId","localeString","parsedLanguage","supportedLanguage","test","formatTargetings","isLanguageDecoupling","isLanguageSkipped","targetings","deviceType","DeviceType","AdjustmentPercantage","isIdeas","SuggestionType","Language","locations","LocationId","networkType","NetworkType","formatFilters","isCategoryFilter","filters","range","AverageSearchVolumeRange","operator","SuggestedBidRange","Amount","AdImpressionShareRange","CompetitionLevels","parsedKeywords","Included","Excluded","AdvertiserId","AdvertiserLevel","categoryId","Category","formatPeriod","periodSetting","PeriodType","DateRange","Start","toISOString","End","formatTrafficEstimateNegatieKeywords","keyword","MatchType","formatIdeaOverviews","mergeLocation","ideaOverviews","LocationLevel","formatAdGroupTrafficEstimateParameters","adgroups","AdGroupTrafficEstimateParameters","adGroupTrafficEstimateParameter","KeywordTrafficEstimateParameters","hasBid","hasInlineCustomBid","isTrafficEstScale","trafficEstLandscapeScale","scaleLandScape","requestLandscape","formatLocationLevels","formatAdGroupEstimatedTraffics","adgroupKeywords","KeywordEstimatedTraffics","HasOwnMaxCPC","formatAdGroupEstimatedTrafficsForMaxCPC","adGroupEstimatedTraffics","emptyTrafficTemplate","Clicks","Impressions","TotalCost","entity","AdGroupEstimatedTraffic","traffic","KeywordEstimatedTraffic","formatDeviceTraffics","deviceList","deviceName","Device","DeviceName","formatDeviceTrafficsWithBid","deviceTraffics","Traffic","formatLocationTraffics","locationList","Location","LocationTraffics","location","LocationName","formatLocationTrafficsWithBid","locationTraffics","formatKeywordEstimatedTraffics","adGroupItem","keywordItem","modelAdgroup","modelKeyword","normalizeTrafficEstimate","rawData","isBackfilled","backfilledValues","Identifier","AdGroupEstimatedTrafficRanges","AdGroupEstimatedTraffics","DeviceTraffics","LandscapesEstimate","languageOptions","controlId","_languageOptions","landingPage","impreAndClicksOptions","chartType","subTitle","emptyMsg","series","mobile","total","defaultGridLevel","minimumFractionDigits","maximumFractionDigits","monetaryOptions","formatOptions","formatShortOptions","searchIdeaExampleData","Aggregations","Keywords","Index","Keyword","getAvailableDateRangeAPI","getIdeaCategoryDataAPI","getSearchIdeaAPI","getTrafficEstimateAPI","getLocationsAPI","useKeywordPlannerService","ServerContext","ScopeContext","PermissionsContext","LocaleID","CurrentLocale","_serverContext$Servic","ServicesEndpoints","AdInsightAPI","odataCampaignPath","CampaignAPI","lastSearchIdeaRequestBody","lastTrafficEstimateRequestBody","handleAjaxError","protocol","host","generateGetSearchIdeaRequestRequest","_ref$mergeLocation","_ref$useCategoryFilte","useCategoryFilter","_ref$isLanguageDecoup","products","productsModel","formatProducts","SearchIdeaParameter","IsIdeas","Products","CategoryId","Targetings","Filters","PeriodSetting","IdeaOverviews","IdeaAttributes","IdeaAggregations","Locale","getAvailableDateRange","datatype","generateGetAvailableDateRangeRequest","getIdeaCategoryData","generateGetIdeaCategoryDataRequest","getSearchIdea","_ref2$useCategoryFilt","_ref2$isLanguageDecou","isDirty","jqXHR","getResponseHeader","_textStatus","traceInfo","requestId","trackId","locationId","getSearchLocations","$count","$expand","queryString","generateGetSearchLocationsRequest","getTrafficEstimate","_formatAdGroupTraffic","IsDomesticSimplifiedChineseEnabled","CampaignTrafficEstimate","Budget","NegativeKeywords","DevicesTypeIds","LocationLevels","LandscapeEstimateParameters","LandscapeType","generateGetTrafficEstimateRequest","KPLocations","_KRTLocations","landingPageAll","LANGUAGE_STRINGS","English","German","French","Spanish","Italian","Portuguese","Dutch","Swedish","TraditionalChinese","Danish","Finnish","Norwegian","Bulgarian","Croatian","Czech","Estonian","Greek","Hungarian","Latvian","Lithuanian","Maltese","Polish","Romanian","Slovak","Slovenian","Albanian","Bosnian","Icelandic","Macedonian","Serbian","Turkish","Japanese","Russian","Hebrew","Arabic","SimplifiedChinese","Hindi","Malay","Thai","Indonesian","Tagalog","Vietnamese","pickLanguages","languages","outMemo","pairs","LanguageSelect","enabledLanguageList","selectedLanguage","setSelectedLanguage","Select","campaignLanguageStrings","All","Korean","getIntentLanguageStyles","intentTarget","intentTargetOptions","LanguageTarget","selectedLanguages","setSelectedLanguages","showLabel","supportedLanguages","globalizationModelSetup","LANGUAGES","languageList","AdGroup","onDeleteLanguage","newSelectedLanguages","splice","onSelectedLanguagesChanged","preSelectedItemsStyle","wrap","disableShrink","SelectedItem","itemText","itemIndex","MultiLanguageSelector","languageAll","LanguageSelector","multiSelect","isSelectAll","multiselect","selectedOptions","onOptionSelect","dropdown","Option","SingleLanguageTarget","additionalOptions","_$chain$filter$sortBy","unshift","allSupportedOptions","optionValue"],"sourceRoot":""}\r\n {showLabel && {label} }\r\n
\r\n