{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 {editorTitle[1]}
;\r\n }\r\n\r\n const onApplyBtnClicked = useCallback(() => {\r\n onApply({\r\n effectSettings: updatedEffectSettings,\r\n cropSettings: updatedCropSettings,\r\n isLogo,\r\n isPortrait,\r\n updatedAltText,\r\n selectedImageType,\r\n });\r\n }, [onApply, updatedEffectSettings, updatedCropSettings, isLogo, isPortrait, updatedAltText, selectedImageType]);\r\n\r\n\r\n const onRenderFooterContent = useCallback(\r\n () => {\r\n const { type, text } = messageState;\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Apply'))} \r\n {i18n.getString(_TL_('Cancel'))} \r\n
\r\n {\r\n isThumbsUpDownEnabled && \r\n
\r\n \r\n );\r\n};\r\n\r\nMediaEditorPanelInternal.propTypes = {\r\n isOpen: PropTypes.bool,\r\n onApply: PropTypes.func.isRequired,\r\n onDismiss: PropTypes.func.isRequired,\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 SourceX: PropTypes.number,\r\n SourceY: PropTypes.number,\r\n SourceWidth: PropTypes.number,\r\n SourceHeight: PropTypes.number,\r\n }),\r\n minCropSize: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n maxCropBox: 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 effectSettings: PropTypes.shape({\r\n effectKey: PropTypes.string,\r\n effectSrc: PropTypes.string,\r\n allSrcs: PropTypes.arrayOf(PropTypes.object),\r\n }),\r\n disableCrop: PropTypes.bool,\r\n onRenderRightRailContent: PropTypes.func,\r\n isMMAV2Enabled: PropTypes.bool,\r\n hasRightRail: PropTypes.bool,\r\n mediaRepository: PropTypes.instanceOf(MediaRepository).isRequired,\r\n adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }).isRequired,\r\n isLogo: PropTypes.bool,\r\n isThumbsUpDownEnabled: PropTypes.bool,\r\n aspectRatioConfig: PropTypes.object, // eslint-disable-line react/forbid-prop-types\r\n // can't use shape as config is an object of properties with names corresponding\r\n // to each aspect ratio, so it's highly variable\r\n isTestEnv: PropTypes.bool,\r\n onManualCropImage: PropTypes.func,\r\n onManualCropLogo: PropTypes.func,\r\n onRenderAllowedAspectRatioControl: PropTypes.func,\r\n disabledPivotItemKeys: PropTypes.arrayOf(PropTypes.string),\r\n customizedDefaultSelectedPivotItemKey: PropTypes.string,\r\n isPortrait: PropTypes.bool,\r\n isImageFittingEnabled: PropTypes.bool,\r\n permissions: PropTypes.shape(),\r\n isStock: PropTypes.bool,\r\n};\r\n\r\nMediaEditorPanelInternal.defaultProps = {\r\n isOpen: false,\r\n baseImage: null,\r\n cropSettings: null,\r\n effectSettings: null,\r\n maxCropBox: null,\r\n disableCrop: false,\r\n isMMAV2Enabled: false,\r\n aspectRatioConfig: null,\r\n onRenderRightRailContent: () => null,\r\n hasRightRail: false,\r\n isLogo: false,\r\n isPortrait: false,\r\n isThumbsUpDownEnabled: false,\r\n isTestEnv: false,\r\n onManualCropImage: _.noop,\r\n onManualCropLogo: _.noop,\r\n onRenderAllowedAspectRatioControl: null,\r\n disabledPivotItemKeys: [],\r\n customizedDefaultSelectedPivotItemKey: null,\r\n permissions: {},\r\n isImageFittingEnabled: false,\r\n isStock: false,\r\n};\r\n\r\n/* Because we save props to state, we need to handle updating state when prop changes.\r\n * To simplify logic, force re-mount for every open.\r\n * If any state needs to be persistant, handle it in higher container component.\r\n * E.g. crop/effect will be saved after clicking save button.\r\n */\r\nexport const MediaEditorPanel = (props) => {\r\n const { baseImage, isOpen } = props;\r\n\r\n const {\r\n isNewImage,\r\n isNewPlacement,\r\n } = useNewValidImage(baseImage);\r\n\r\n let key;\r\n if (isNewImage || isNewPlacement) {\r\n key = _.uniqueId('media-editor-key');\r\n }\r\n\r\n return (isOpen ?\r\n \r\n
\r\n {\r\n (hasRightRail && !isPortrait) &&\r\n \r\n {onRenderRightRailContent({\r\n previewImageUrl,\r\n cropSettings: updatedCropSettings,\r\n hasCropSettingsChanged,\r\n hasEffectSettingsChanged,\r\n selectedImageType,\r\n })}\r\n
\r\n }\r\n \r\n \r\n \r\n {ratioConfig.tagString}\r\n \r\n
\r\n \r\n {tags}\r\n
\r\n );\r\n};\r\n\r\nCropTags.propTypes = {\r\n aspectRatioConfig: PropTypes.object, // eslint-disable-line react/forbid-prop-types\r\n // can't use shape as config is an object of properties with names corresponding\r\n // to each aspect ratio, so it's highly variable\r\n currentCropSettings: PropTypes.shape({\r\n SourceHeight: PropTypes.number,\r\n SourceWidth: PropTypes.number,\r\n }),\r\n isMMAV2Enabled: PropTypes.bool,\r\n};\r\n\r\nCropTags.defaultProps = {\r\n aspectRatioConfig: null,\r\n currentCropSettings: null,\r\n isMMAV2Enabled: false,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ImageCropWithBoundingBox } from '@bingads-webui-campaign-react/image-crop-with-bounding-box';\r\nimport {\r\n getAllowedAspectRatio,\r\n} from '@bingads-webui-campaign/media-common-utils';\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\n\r\nimport { getImageCropEditorStyles } from './styles/image-crop-editor-style';\r\nimport { CropTags } from './crop-tags';\r\n\r\nconst MAX_BOX_HEIGHT = 415;\r\n\r\nexport const ImageCropEditor = ({\r\n baseImage,\r\n cropSettings,\r\n onCropSettingsChanged,\r\n minCropSize,\r\n maxCropBox,\r\n aspectRatioConfig,\r\n maxWidth,\r\n adCreatorScenario,\r\n isLogo,\r\n isMMAV2Enabled,\r\n allowedAspectRatio: allowedAspectRatioFromProps,\r\n onManualCropImage,\r\n onManualCropLogo,\r\n}) => {\r\n const classes = useDefaultStyles(getImageCropEditorStyles);\r\n const i18n = useContext(I18nContext);\r\n const instrumentation = useContext(InstrumentationContext);\r\n const { manualCropActivity } = getAdCreatorInstrumentation(instrumentation, adCreatorScenario);\r\n\r\n // if return value is 0, it means cropper can crop to any ratio\r\n const allowedAspectRatio = allowedAspectRatioFromProps || getAllowedAspectRatio(baseImage);\r\n\r\n const currentSettings = cropSettings ||\r\n (baseImage && { SourceWidth: baseImage.Width, SourceHeight: baseImage.Height }) || {};\r\n\r\n return (\r\n baseImage ?\r\n (\r\n \r\n {\r\n let manualCropLogMessage = 'UserAppliedManualCrop';\r\n\r\n if (isLogo) {\r\n onManualCropLogo();\r\n manualCropLogMessage = 'UserAppliedManualCropToLogo';\r\n } else {\r\n onManualCropImage();\r\n }\r\n manualCropActivity.trace(manualCropLogMessage);\r\n\r\n setClarityTag({\r\n AdCreatorManualCropApplied: true,\r\n });\r\n onCropSettingsChanged(newCropSettings);\r\n }}\r\n />\r\n {\r\n (allowedAspectRatio === 0) &&\r\n
\r\n ) : null\r\n );\r\n};\r\n\r\nImageCropEditor.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 }),\r\n cropSettings: PropTypes.shape({\r\n SourceWidth: PropTypes.number,\r\n SourceHeight: PropTypes.number,\r\n SourceX: PropTypes.number,\r\n SourceY: PropTypes.number,\r\n }),\r\n onCropSettingsChanged: PropTypes.func.isRequired,\r\n minCropSize: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n maxWidth: PropTypes.number.isRequired,\r\n maxCropBox: 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 adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }).isRequired,\r\n isLogo: PropTypes.bool,\r\n isMMAV2Enabled: PropTypes.bool,\r\n allowedAspectRatio: PropTypes.number,\r\n aspectRatioConfig: PropTypes.object, // eslint-disable-line react/forbid-prop-types\r\n // can't use shape as config is an object of properties with names corresponding\r\n // to each aspect ratio, so it's highly variable\r\n onManualCropImage: PropTypes.func,\r\n onManualCropLogo: PropTypes.func,\r\n};\r\n\r\nImageCropEditor.defaultProps = {\r\n baseImage: null,\r\n cropSettings: null,\r\n maxCropBox: null,\r\n aspectRatioConfig: null,\r\n isLogo: false,\r\n isMMAV2Enabled: false,\r\n allowedAspectRatio: null,\r\n onManualCropImage: _.noop,\r\n onManualCropLogo: _.noop,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getLoadingViewStyles } from './styles/loading-view-style';\r\n\r\nexport const LoadingView = ({\r\n text,\r\n height,\r\n}) => {\r\n const classes = useDefaultStyles(getLoadingViewStyles({ height }));\r\n\r\n return (\r\n \r\n {isLogo ?\r\n i18n.getString(_TL_('Crop your logo.')) : i18n.getString(_TL_('Crop your image.'))}\r\n
\r\n \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","import _ from 'underscore';\r\nimport { EffectChoiceKey } from '@bingads-webui-campaign/media-common-utils';\r\n\r\nexport const buildEffectImageModel = ({\r\n effectKey,\r\n effectSrc,\r\n effectOptions,\r\n allSrcs,\r\n Type,\r\n Width,\r\n Height,\r\n Src,\r\n unavailableEffectsConfig,\r\n}) => {\r\n const model = {\r\n effectKey: effectKey || EffectChoiceKey.None,\r\n effectOptions,\r\n allEffectSrcs: allSrcs,\r\n unavailableEffectsConfig,\r\n };\r\n\r\n if (Width > 0 && Height > 0) {\r\n const imageSrc = model.effectKey !== EffectChoiceKey.None ? effectSrc : Src;\r\n\r\n model.chosenImage = {\r\n Type,\r\n Width,\r\n Height,\r\n Src: imageSrc,\r\n loading: false,\r\n };\r\n }\r\n\r\n return model;\r\n};\r\n\r\nconst GeneralErrorMessagePerEffect = {\r\n [EffectChoiceKey.DesignerEffects]: _TL_('Designer effects failed. We cannot apply this effect to your image.'),\r\n [EffectChoiceKey.BackgroundBlur]: _TL_('Background blur failed. We cannot apply this effect to your image.'),\r\n [EffectChoiceKey.BackgroundSolidColor]: _TL_('Background color failed. We cannot apply this effect to your image.'),\r\n};\r\n\r\nconst EffectErrorCodeMessageMapping = {\r\n EFFECT_RESTORE_FAILURE:\r\n _TL_('We could not restore one or more of your previously selected smart effects. Please choose from the updated smart effects options.'),\r\n BACKGROUND_COLOR_THRESHOLD_FAILURE:\r\n _TL_('Your selected background color failed because this effect produces low-quality results when combined with your image.'),\r\n};\r\n\r\nexport const EffectErrorCodes = _.mapObject(EffectErrorCodeMessageMapping, (val, key) => key);\r\n\r\nexport const getEffectErrorMessage = ({\r\n code,\r\n newEffectKey,\r\n i18n,\r\n}) => {\r\n if (code && EffectErrorCodeMessageMapping[code]) {\r\n return i18n.getString(EffectErrorCodeMessageMapping[code]);\r\n }\r\n\r\n return i18n.getString(GeneralErrorMessagePerEffect[newEffectKey]);\r\n};\r\n","import { useState, useContext } from 'react';\r\nimport Promise from 'bluebird';\r\nimport { isEmpty, find, first } from 'underscore';\r\n\r\nimport {\r\n EffectChoiceMtSmartEffectMapping, EffectChoiceKey,\r\n} from '@bingads-webui-campaign/media-common-utils';\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { MessageBarType } from '@bingads-webui-react/fabric-control';\r\n\r\nimport { preLoadImageAsync } from '../preload-image';\r\nimport {\r\n buildEffectImageModel,\r\n EffectErrorCodes,\r\n getEffectErrorMessage,\r\n} from './effect-settings-model';\r\n\r\nconst findSrcByDesignerEffect = (allEffectSrcs, newDesignerEffect) => find(\r\n allEffectSrcs,\r\n ({ Effect }) => Effect === newDesignerEffect\r\n).Resource;\r\n\r\n// Pickup priority: MT response > updates > previous state\r\nexport const getUpdatedEffectOptions = ({\r\n updatedMtAsset, prevEffectOptions, effectOptionsUpdates,\r\n}) => {\r\n const {\r\n DefaultBgColor /** optional field in API */, BgBlurLevel, Effect,\r\n } = updatedMtAsset || {};\r\n const prevState = prevEffectOptions || {};\r\n const updates = effectOptionsUpdates || {};\r\n\r\n return {\r\n ...prevEffectOptions,\r\n backgroundColor: DefaultBgColor || updates.backgroundColor || prevState.backgroundColor,\r\n backgroundBlur: BgBlurLevel || updates.backgroundBlur || prevState.backgroundBlur,\r\n designerEffect: Effect || updates.designerEffect || prevState.designerEffect,\r\n };\r\n};\r\n\r\n/**\r\n * Creates hooks used to interact with image effect model and state\r\n *\r\n * @param {Object} firstArg - object with properties below\r\n * @param {string} firstArg.effectKey - key of the current applied effect\r\n * @param {string} firstArg.effectSrc - image src of the current image\r\n * @param {Object} firstArg.effectOptions - options stored for the current smart effect,\r\n * e.g. color for background color swap\r\n * @param {string[]} firstArg.allSrcs - array of image sources used for current smart effect,\r\n * e.g. different color filters for designer effects\r\n * @param {string} firstArg.Type - type of the image\r\n * @param {Number} firstArg.Width - image width\r\n * @param {Number} firstArg.Height - image height\r\n * @param {string} firstArg.Src - image source for base image\r\n * @param {Object} mediaRepository - instance of media repository\r\n * @param {Object} i18n - instance of i18n model\r\n * @param {function} setMessageState - callback to handle updates to message state\r\n * @param {function} setUpdatedEffectSettings - callback to handle updates to effect state\r\n * @param {function} setDisableApplyButton - callback to handle updates to effect state\r\n * @param {Object} adCreatorScenario - Instrumentation scenario for ad creator logs\r\n\r\n * @returns {Object} returnObject - object with properties below\r\n * @returns {string} returnObject.selectedEffectKey - selected effect key\r\n * @returns {Object} returnObject.effectImage - Image model representation of\r\n * the current generated image\r\n * @returns {string} returnObject.effectSrc - image src of the current generated image\r\n * @returns {string[]} returnObject.allEffectSrcs - array of image sources used for\r\n * current smart effect, e.g. different color filters for designer effects\r\n * @returns {boolean} returnObject.loading - bool indicating whether or not the\r\n * current image is still loading/being generated\r\n * @returns {function} returnObject.onEffectKeyChange - callback to use when the\r\n * user changes the current selected effect type\r\n * @returns {function} returnObject.onDesignerEffectImageChange - callback to use\r\n * when the user changes which designer effect filter is used\r\n * @returns {function} returnObject.onBackgroundColorChange - callback to use\r\n * when the user changes which background color is used\r\n */\r\nexport const useEffectSettings = (\r\n {\r\n effectKey,\r\n effectSrc,\r\n effectOptions,\r\n allSrcs,\r\n Type,\r\n Width,\r\n Height,\r\n Src, // used when effect is none\r\n },\r\n mediaRepository,\r\n i18n,\r\n setMessageState,\r\n setUpdatedEffectSettings,\r\n setDisableApplyButton,\r\n adCreatorScenario\r\n) => {\r\n const initialModel = buildEffectImageModel({\r\n effectKey,\r\n effectSrc,\r\n effectOptions,\r\n allSrcs,\r\n Type,\r\n Width,\r\n Height,\r\n Src,\r\n });\r\n const [model, setModel] = useState(initialModel);\r\n const instrumentation = useContext(InstrumentationContext);\r\n const { smartEffectActivity } = getAdCreatorInstrumentation(instrumentation, adCreatorScenario);\r\n\r\n const changeImageSrc = ({\r\n generatePromise,\r\n newEffectKey,\r\n oldEffectKey,\r\n modelEffectOptions,\r\n }) => {\r\n const effectKeyToRestoreWhenError = oldEffectKey || model.effectKey;\r\n\r\n setMessageState({});// reset existing error message\r\n\r\n let isSevereError = true;\r\n let isSevereWarning = false;\r\n\r\n return generatePromise.then(({ assets, defaultAsset }) => {\r\n let errMsg;\r\n let throwError;\r\n\r\n if (isEmpty(assets)) {\r\n throwError = true;\r\n } else {\r\n // when api response is valid, treat errors not severe and will not disable effect choice.\r\n isSevereError = false;\r\n\r\n if (!defaultAsset) {\r\n throwError = true;\r\n errMsg = EffectErrorCodes.EFFECT_RESTORE_FAILURE;\r\n }\r\n\r\n if (newEffectKey === EffectChoiceKey.BackgroundSolidColor\r\n && find(assets, image => image.Show === false)) {\r\n throwError = true;\r\n errMsg = EffectErrorCodes.BACKGROUND_COLOR_THRESHOLD_FAILURE;\r\n isSevereWarning = true;\r\n }\r\n }\r\n\r\n if (throwError) {\r\n throw new Error(errMsg);\r\n }\r\n\r\n // model tracked internally\r\n setModel((prev) => {\r\n const newEffectOptions = getUpdatedEffectOptions({\r\n updatedMtAsset: defaultAsset,\r\n prevEffectOptions: prev.effectOptions,\r\n effectOptionsUpdates: modelEffectOptions,\r\n });\r\n return {\r\n ...prev,\r\n effectSrc: defaultAsset.Resource,\r\n effectOptions: newEffectOptions,\r\n allEffectSrcs: assets,\r\n };\r\n });\r\n // model hoisted to upper layer when ready to apply\r\n setUpdatedEffectSettings((prev) => {\r\n const newEffectOptions = getUpdatedEffectOptions({\r\n updatedMtAsset: defaultAsset,\r\n prevEffectOptions: prev && prev.effectOptions,\r\n effectOptionsUpdates: modelEffectOptions,\r\n });\r\n\r\n return {\r\n ...prev,\r\n effectSrc: defaultAsset.Resource,\r\n effectOptions: newEffectOptions,\r\n allSrcs: assets,\r\n effectKey: newEffectKey,\r\n };\r\n });\r\n\r\n return preLoadImageAsync(defaultAsset.Resource).catch((err) => {\r\n // swallow image load error\r\n // Add log to measure if this case happens frequently\r\n smartEffectActivity.trace(`Apply effect ${newEffectKey} succeeded, but failed to load image by URL`);\r\n throw err;\r\n });\r\n })\r\n .then(({ src }) => {\r\n setModel(prev => ({\r\n ...prev,\r\n loading: false,\r\n chosenImage: {\r\n ...prev.chosenImage,\r\n Src: src,\r\n },\r\n }));\r\n setDisableApplyButton(false);\r\n })\r\n .tapCatch((err = {}) => {\r\n // When there is no customized message, treat the failure as not recoverable.\r\n // In this case, disable new effect and show general eror message\r\n const text = getEffectErrorMessage({ code: err.message, newEffectKey, i18n });\r\n const type = isSevereError ? MessageBarType.severeWarning : MessageBarType.warning;\r\n\r\n smartEffectActivity.trace(`User failed to select effect: ${newEffectKey}, \\\r\n err.message: ${err.message}, will restore to ${effectKeyToRestoreWhenError}`);\r\n setMessageState({ text, type });\r\n\r\n // restore to previous effect\r\n setModel(prev => ({\r\n ...prev,\r\n effectKey: effectKeyToRestoreWhenError,\r\n loading: false,\r\n unavailableEffectsConfig: {\r\n ...prev.unavailableEffectsConfig,\r\n [newEffectKey]: {\r\n severeError: isSevereError,\r\n severeWarning: isSevereWarning,\r\n },\r\n },\r\n }));\r\n setDisableApplyButton(false);\r\n });\r\n };\r\n\r\n const onDesignerEffectImageChange = (newDesignerEffect) => {\r\n setModel((prev) => {\r\n const newDesignerSrc = findSrcByDesignerEffect(prev.allEffectSrcs, newDesignerEffect);\r\n\r\n return {\r\n ...prev,\r\n effectOptions: {\r\n ...(prev.effectOptions || {}),\r\n designerEffect: newDesignerEffect,\r\n },\r\n chosenImage: {\r\n ...prev.chosenImage,\r\n Src: newDesignerSrc,\r\n },\r\n };\r\n });\r\n setUpdatedEffectSettings((prev) => {\r\n const prevEffectOptions = (prev && prev.effectOptions) || {};\r\n const newDesignerSrc = findSrcByDesignerEffect(prev.allSrcs, newDesignerEffect);\r\n\r\n return {\r\n ...prev,\r\n effectSrc: newDesignerSrc,\r\n effectOptions: {\r\n ...prevEffectOptions,\r\n designerEffect: newDesignerEffect,\r\n },\r\n };\r\n });\r\n };\r\n\r\n const onEffectOptionsChange = ({\r\n newEffectKey,\r\n oldEffectKey,\r\n mtEffectOptions = {},\r\n modelEffectOptions = {},\r\n }) => {\r\n const generateAssetsPromise = EffectChoiceMtSmartEffectMapping[newEffectKey]\r\n ? mediaRepository.generateEffect({\r\n imageUrl: Src,\r\n smartEffects: [{\r\n smartEffectName: EffectChoiceMtSmartEffectMapping[newEffectKey],\r\n smartEffectOptions: {\r\n ...mtEffectOptions,\r\n },\r\n }],\r\n })\r\n : Promise.resolve([{ Resource: Src }]);\r\n\r\n const generatePromise = generateAssetsPromise.then((assets) => {\r\n let defaultAsset;\r\n\r\n if (modelEffectOptions.designerEffect\r\n && newEffectKey === EffectChoiceKey.DesignerEffects) {\r\n defaultAsset = find(assets, ({ Effect }) => Effect === modelEffectOptions.designerEffect);\r\n } else {\r\n defaultAsset = first(assets);\r\n }\r\n\r\n return { assets, defaultAsset };\r\n });\r\n\r\n setModel(prev => ({\r\n ...prev,\r\n loading: true,\r\n effectKey: newEffectKey,\r\n effectOptions: {\r\n ...(prev.effectOptions || {}),\r\n ...modelEffectOptions,\r\n },\r\n }));\r\n setDisableApplyButton(true);\r\n\r\n return changeImageSrc({\r\n generatePromise,\r\n newEffectKey,\r\n oldEffectKey,\r\n modelEffectOptions,\r\n });\r\n };\r\n\r\n const onBackgroundColorChange = newBackgroundColor =>\r\n onEffectOptionsChange({\r\n newEffectKey: EffectChoiceKey.BackgroundSolidColor,\r\n mtEffectOptions: { ManualBgColor: newBackgroundColor },\r\n modelEffectOptions: { backgroundColor: newBackgroundColor },\r\n });\r\n\r\n const onBlurChange = newBlurAmount =>\r\n onEffectOptionsChange({\r\n newEffectKey: EffectChoiceKey.BackgroundBlur,\r\n mtEffectOptions: { ManualBgBlurLevel: newBlurAmount },\r\n modelEffectOptions: { backgroundBlur: newBlurAmount },\r\n });\r\n\r\n const onEffectKeyChange = (newEffectKey) => {\r\n smartEffectActivity.trace(`User selected effect: ${newEffectKey}`);\r\n\r\n return onEffectOptionsChange({ newEffectKey })\r\n .then((retVal) => {\r\n smartEffectActivity.trace(`Effect applied successfully: ${newEffectKey}`);\r\n\r\n return retVal;\r\n })\r\n .catch(() => {\r\n // already handle the error in onEffectOptionsChange\r\n // so here just swallow error and do nothing\r\n });\r\n };\r\n\r\n const prefetchData = ({\r\n effectKeyToPrefetch,\r\n effectOptionsToPrefetch,\r\n }) => {\r\n onEffectOptionsChange({\r\n oldEffectKey: EffectChoiceKey.None,\r\n newEffectKey: effectKeyToPrefetch,\r\n modelEffectOptions: effectOptionsToPrefetch,\r\n });\r\n };\r\n\r\n const preloadEffects = () => {\r\n Object.values(EffectChoiceKey).forEach((effectChoice) => {\r\n if (effectChoice !== EffectChoiceKey.None) {\r\n mediaRepository.generateEffect({\r\n imageUrl: Src,\r\n smartEffects: [{\r\n smartEffectName: EffectChoiceMtSmartEffectMapping[effectChoice],\r\n smartEffectOptions: {},\r\n }],\r\n });\r\n }\r\n });\r\n\r\n setUpdatedEffectSettings(prev => ({\r\n ...prev,\r\n isPreloaded: true,\r\n }));\r\n };\r\n\r\n return {\r\n selectedEffectKey: model.effectKey,\r\n effectImage: model.chosenImage,\r\n allEffectSrcs: model.allEffectSrcs,\r\n loading: model.loading,\r\n effectOptions: model.effectOptions,\r\n onEffectKeyChange,\r\n onDesignerEffectImageChange,\r\n onBackgroundColorChange,\r\n onBlurChange,\r\n unavailableEffectsConfig: model.unavailableEffectsConfig,\r\n prefetchData,\r\n preloadEffects,\r\n };\r\n};\r\n","import Promise from 'bluebird';\r\n\r\nexport const preLoadImageAsync = (imageSource) => {\r\n let imageLoadResolve = null;\r\n let imageLoadReject = null;\r\n\r\n const imageLoadPromise = new Promise((resolve, reject) => {\r\n imageLoadResolve = resolve;\r\n imageLoadReject = reject;\r\n });\r\n\r\n const nativeImage = new Image();\r\n\r\n nativeImage.src = imageSource;\r\n\r\n nativeImage.onload = () => {\r\n imageLoadResolve(nativeImage);\r\n };\r\n\r\n nativeImage.onabort = () => {\r\n imageLoadReject(new Error('load image by url aborted'));\r\n };\r\n\r\n nativeImage.onerror = () => {\r\n imageLoadReject(new Error('load image by url errored'));\r\n };\r\n\r\n return imageLoadPromise;\r\n};\r\n","export const getPivotStyle = (_, { palette = {} } = {}) => {\r\n const commonLinkStyles = {\r\n height: '40px',\r\n padding: '0 16px',\r\n };\r\n\r\n return {\r\n link: {\r\n ...commonLinkStyles,\r\n backgroundColor: palette.neutralLighter,\r\n },\r\n linkIsSelected: {\r\n ...commonLinkStyles,\r\n backgroundColor: palette.themeLighterAlt,\r\n color: palette.neutralPrimary,\r\n fontWeight: '600',\r\n },\r\n };\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport {\r\n Pivot,\r\n PivotItem,\r\n PivotLinkFormat,\r\n} from '@bingads-webui-react/fabric-control';\r\n\r\nimport { getPivotStyle } from './styles/pivot-view-style';\r\n\r\nexport const PivotView = ({\r\n items,\r\n selectedKey,\r\n onClick,\r\n}) => {\r\n const classes = useDefaultStyles(getPivotStyle);\r\n\r\n const pivotItems = _.map(items, ({ text, itemKey }) => (\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 {onRenderAllowedAspectRatioControl ? (\r\n onRenderAllowedAspectRatioControl({ onAllowedAspectRatioChange })\r\n ) : (\r\n
\r\n );\r\n};\r\n\r\nMediaEditor.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 SourceX: PropTypes.number,\r\n SourceY: PropTypes.number,\r\n SourceWidth: PropTypes.number,\r\n SourceHeight: PropTypes.number,\r\n }),\r\n minCropSize: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n maxCropBox: 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 effectSettings: PropTypes.shape({\r\n effectKey: PropTypes.string,\r\n effectSrc: PropTypes.string,\r\n allSrcs: PropTypes.arrayOf(PropTypes.object),\r\n }),\r\n isMMAV2Enabled: PropTypes.bool,\r\n mediaRepository: PropTypes.instanceOf(MediaRepository).isRequired,\r\n setUpdatedCropSettings: PropTypes.func.isRequired,\r\n setUpdatedAltText: PropTypes.func.isRequired,\r\n setUpdatedEffectSettings: PropTypes.func.isRequired,\r\n setMessageState: PropTypes.func.isRequired,\r\n setDisableApplyButton: PropTypes.func.isRequired,\r\n setImageType: PropTypes.func.isRequired,\r\n maxWidth: PropTypes.number.isRequired,\r\n adCreatorScenario: PropTypes.shape({\r\n scenarioName: PropTypes.string,\r\n scenarioValue: PropTypes.string,\r\n }).isRequired,\r\n disableCrop: PropTypes.bool,\r\n isLogo: PropTypes.bool,\r\n isPortrait: PropTypes.bool,\r\n isPreloaded: PropTypes.bool,\r\n aspectRatioConfig: PropTypes.object, // eslint-disable-line react/forbid-prop-types\r\n // can't use shape as config is an object of properties with names corresponding\r\n // to each aspect ratio, so it's highly variable\r\n onManualCropImage: PropTypes.func,\r\n onManualCropLogo: PropTypes.func,\r\n onRenderAllowedAspectRatioControl: PropTypes.func,\r\n disabledPivotItemKeys: PropTypes.arrayOf(PropTypes.string),\r\n customizedDefaultSelectedPivotItemKey: PropTypes.string,\r\n permissions: PropTypes.shape(),\r\n isImageFittingEnabled: PropTypes.bool,\r\n isStock: PropTypes.bool,\r\n};\r\n\r\nMediaEditor.defaultProps = {\r\n baseImage: null,\r\n cropSettings: null,\r\n effectSettings: null,\r\n maxCropBox: null,\r\n isMMAV2Enabled: false,\r\n aspectRatioConfig: null,\r\n isLogo: false,\r\n disableCrop: false,\r\n isPortrait: false,\r\n isPreloaded: false,\r\n onManualCropImage: _.noop,\r\n onManualCropLogo: _.noop,\r\n onRenderAllowedAspectRatioControl: null,\r\n disabledPivotItemKeys: [],\r\n customizedDefaultSelectedPivotItemKey: null,\r\n permissions: {},\r\n isImageFittingEnabled: false,\r\n isStock: false,\r\n};\r\n","import { useState, useEffect } from 'react';\r\n\r\nexport const useCropSettings = (cropSettings) => {\r\n const [currentCropSettings, setCurrentCropSettings] = useState(cropSettings);\r\n\r\n useEffect(() => {\r\n setCurrentCropSettings(cropSettings);\r\n }, [cropSettings]);\r\n\r\n return [currentCropSettings, setCurrentCropSettings];\r\n};\r\n","import _ from 'underscore';\r\n\r\nexport class BaseValidator {\r\n constructor(propertySchema) {\r\n this.propertySchema = propertySchema;\r\n }\r\n\r\n get requiredField() {\r\n throw new Error('requiredField Not implemented');\r\n }\r\n\r\n get config() {\r\n return {\r\n ignoreInvalidProperty: false,\r\n };\r\n }\r\n\r\n internalValidate() {\r\n throw new Error('internalValidate Not implemented');\r\n }\r\n\r\n enableCheck() {\r\n return !_.isUndefined(this.propertySchema[this.requiredField]);\r\n }\r\n\r\n validate(...args) {\r\n if (this.enableCheck()) {\r\n return this.internalValidate(...args);\r\n }\r\n\r\n return true;\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport { BaseValidator } from './base-validator';\r\n\r\nconst validateObject = val => _.isObject(val);\r\nconst validateNumber = (val, propertySchema) => {\r\n const num = Number(val);\r\n\r\n if (_.isNaN(num)) {\r\n return false;\r\n }\r\n\r\n const { minimum, maximum } = propertySchema;\r\n\r\n return (_.isUndefined(minimum) || num >= minimum)\r\n && (_.isUndefined(minimum) || num <= maximum);\r\n};\r\nconst validateString = val => _.isString(val) && val.length > 0;\r\n\r\nconst TypeValidateConfig = {\r\n object: validateObject,\r\n number: validateNumber,\r\n string: validateString,\r\n};\r\n\r\nexport class TypeValidator extends BaseValidator {\r\n constructor(propertySchema) {\r\n super(propertySchema);\r\n\r\n const { type, minimum, maximum } = propertySchema;\r\n\r\n this.type = type;\r\n this.minimum = minimum;\r\n this.maximum = maximum;\r\n }\r\n\r\n get requiredField() {\r\n return 'type';\r\n }\r\n\r\n internalValidate(propertyValue) {\r\n const validateFunc = TypeValidateConfig[this.type];\r\n\r\n if (!validateFunc) {\r\n throw new Error(`There are no configured validateFunc for this type: ${this.type}`);\r\n }\r\n\r\n return validateFunc(propertyValue, this.propertySchema);\r\n }\r\n}\r\n","import _ from 'underscore';\r\n\r\nconst validateBeam = (str) => {\r\n const num = Number(str);\r\n\r\n if (_.isNaN(num)) {\r\n return false;\r\n }\r\n\r\n return num >= 0 && num <= 255;\r\n};\r\n\r\nexport function validateColor(propertyValue) {\r\n const beams = propertyValue.split(',');\r\n if (_.size(beams) !== 3) {\r\n return false;\r\n }\r\n\r\n return _.every(beams, validateBeam);\r\n}\r\n","import _ from 'underscore';\r\nimport { BaseValidator } from './base-validator';\r\nimport { validateColor } from './custom/validate-color';\r\n\r\nconst RegistedHandlers = {\r\n color: validateColor,\r\n};\r\n\r\nexport class CustomValidator extends BaseValidator {\r\n constructor(propertySchema) {\r\n super(propertySchema);\r\n\r\n const { custom } = propertySchema;\r\n\r\n if (_.isString(custom)) {\r\n this.validateFunc = RegistedHandlers[custom];\r\n }\r\n }\r\n\r\n get requiredField() {\r\n return 'custom';\r\n }\r\n\r\n internalValidate(propertyValue) {\r\n if (!this.validateFunc) {\r\n throw new Error('Invalid value for custom key');\r\n }\r\n\r\n return this.validateFunc(propertyValue);\r\n }\r\n}\r\n","import { TypeValidator } from './type-validator';\r\nimport { EnumValidator } from './enum-validator';\r\nimport { CustomValidator } from './custom-validator';\r\nimport { EffectKeyValidator } from './effect-key-validator';\r\n\r\nexport const ConfiguredValidators = [\r\n TypeValidator,\r\n EnumValidator,\r\n CustomValidator,\r\n EffectKeyValidator,\r\n];\r\n","import _ from 'underscore';\r\nimport { BaseValidator } from './base-validator';\r\n\r\nexport class EnumValidator extends BaseValidator {\r\n constructor(propertySchema) {\r\n super(propertySchema);\r\n\r\n this.enum = propertySchema.enum;\r\n }\r\n\r\n get requiredField() {\r\n return 'enum';\r\n }\r\n\r\n internalValidate(propertyValue) {\r\n return _.contains(this.enum, propertyValue);\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport { BaseValidator } from './base-validator';\r\n\r\nexport class EffectKeyValidator extends BaseValidator {\r\n constructor(propertySchema) {\r\n super(propertySchema);\r\n\r\n this.effectKey = propertySchema.effectKey;\r\n }\r\n\r\n get requiredField() {\r\n return 'effectKey';\r\n }\r\n\r\n get config() {\r\n return {\r\n ignoreInvalidProperty: true,\r\n };\r\n }\r\n\r\n internalValidate(propertyValue, effectKey) {\r\n return _.contains(this.effectKey, effectKey);\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport { EffectChoiceKey } from '@bingads-webui-campaign/media-common-utils';\r\n\r\n/*\r\nExample valid model:\r\n{\r\n effectSettings: {\r\n effectKey: 'xxx',\r\n effectOptions: {\r\n backgroundBlur: 30,\r\n backgroundColor: '91, 113, 129',\r\n designerEffect: '',\r\n },\r\n },\r\n}\r\n*/\r\n\r\nexport const EffectSettingsAlias = 'effect';\r\n// used when serializing\r\nexport const imageAssetSerializeSchema = {\r\n type: 'object',\r\n name: 'ImageAssetSerializeSchema',\r\n properties: {\r\n effectSettings: {\r\n type: 'object',\r\n alias: EffectSettingsAlias,\r\n nullable: false,\r\n properties: {\r\n effectKey: {\r\n type: 'string',\r\n alias: 'key',\r\n name: 'EffectKey',\r\n nullable: false,\r\n enum: [\r\n EffectChoiceKey.DesignerEffects,\r\n EffectChoiceKey.BackgroundBlur,\r\n EffectChoiceKey.BackgroundSolidColor,\r\n ],\r\n },\r\n effectOptions: {\r\n type: 'object',\r\n alias: 'ops',\r\n name: 'EffectOptions',\r\n nullable: false,\r\n properties: {\r\n designerEffect: {\r\n type: 'string',\r\n alias: 'dsgEft',\r\n name: 'DesignerEffectName',\r\n effectKey: [EffectChoiceKey.DesignerEffects],\r\n nullable: true,\r\n },\r\n backgroundBlur: {\r\n type: 'number',\r\n alias: 'bgBlur',\r\n name: 'BackgroundBlurAmount',\r\n minimum: 1,\r\n maximum: 100,\r\n effectKey: [EffectChoiceKey.BackgroundBlur],\r\n nullable: true,\r\n },\r\n backgroundColor: {\r\n type: 'string',\r\n alias: 'bgColor',\r\n name: 'BackgroundColorValue',\r\n custom: 'color',\r\n effectKey: [EffectChoiceKey.BackgroundSolidColor],\r\n nullable: true,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst invertSchemaAlias = schemaProperties =>\r\n _.reduce(schemaProperties, (memo, val, key) => {\r\n const newKey = val.alias;\r\n const newVal = { alias: key };\r\n if (val.properties) {\r\n newVal.properties = invertSchemaAlias(val.properties);\r\n }\r\n\r\n return {\r\n ...memo,\r\n [newKey]: newVal,\r\n };\r\n }, {});\r\n\r\nexport const imageAssetDeserializeSchema = {\r\n type: 'object',\r\n name: 'ImageAssetDeserializeSchema',\r\n properties: invertSchemaAlias(imageAssetSerializeSchema.properties),\r\n};\r\n","import _ from 'underscore';\r\nimport { ConfiguredValidators } from './property-validators/index';\r\nimport { imageAssetSerializeSchema, imageAssetDeserializeSchema } from './image-metadata-schema';\r\n\r\nconst validateProperty = ({\r\n propertyValue,\r\n propertySchema,\r\n effectKey,\r\n}) => {\r\n let result = true;\r\n let ignoreInvalidProperty = false;\r\n\r\n if (_.isUndefined(propertyValue)) {\r\n result = !!propertySchema.nullable;\r\n } else {\r\n for (let i = 0; i < ConfiguredValidators.length; i += 1) {\r\n const ValidatorClass = ConfiguredValidators[i];\r\n const instance = new ValidatorClass(propertySchema);\r\n const childResult = instance.validate(propertyValue, effectKey);\r\n\r\n // once there is failure by validator that could not ignore error, break\r\n if (!childResult && !instance.config.ignoreInvalidProperty) {\r\n result = false;\r\n ignoreInvalidProperty = false;\r\n\r\n break;\r\n }\r\n\r\n // if validatior is configured to ignore error, continue rest validations regardless of result\r\n if (!childResult && instance.config.ignoreInvalidProperty) {\r\n result = false;\r\n ignoreInvalidProperty = true;\r\n }\r\n }\r\n }\r\n\r\n return {\r\n result,\r\n ignoreInvalidProperty,\r\n };\r\n};\r\n\r\n// Return true if all values including nested are null/undefined\r\n// e.g. For value: { a: { b: null }}, it returns true\r\nconst shouldFilterOut = (value) => {\r\n if (_.isObject(value)) {\r\n const hasValidKey = _.some(value, val => !shouldFilterOut(val));\r\n\r\n return !hasValidKey;\r\n }\r\n\r\n return _.isNull(value) || _.isUndefined(value);\r\n};\r\n\r\nconst processObjectWithSchema = ({\r\n obj,\r\n schema,\r\n validatePropertyFunc,\r\n}) => {\r\n const { result, ignoreInvalidProperty } = validatePropertyFunc({\r\n propertyValue: obj,\r\n propertySchema: schema,\r\n });\r\n\r\n if (!result && !ignoreInvalidProperty) {\r\n throw new Error(`Validate property ${schema.name || schema.alias} failed`);\r\n }\r\n\r\n // if ignoreInvalidProperty is true, return an empty value so it can be filtered out.\r\n if (!result) {\r\n return null;\r\n }\r\n\r\n if (_.isObject(obj)) {\r\n return _.reduce(obj, (memo, val, key) => {\r\n const childkeySchema = schema.properties[key];\r\n const newKey = childkeySchema.alias;\r\n\r\n if (!newKey) {\r\n throw new Error(`Unsupported! please add metadata to schema for key: ${key}`);\r\n }\r\n\r\n const newValue = processObjectWithSchema({\r\n obj: val,\r\n schema: childkeySchema,\r\n validatePropertyFunc,\r\n });\r\n\r\n if (shouldFilterOut(newValue)) {\r\n if (!childkeySchema.nullable) {\r\n throw new Error(`the value for key ${key} is empty, but from schema, nullable is not allowed`);\r\n }\r\n\r\n return memo;\r\n }\r\n\r\n return {\r\n ...memo,\r\n [newKey]: newValue,\r\n };\r\n }, {});\r\n }\r\n\r\n return obj;\r\n};\r\n\r\nconst validateDeserializeProperty = ({\r\n propertyValue,\r\n propertySchema,\r\n}) => {\r\n let result = true;\r\n\r\n _.keys(propertyValue).forEach((key) => {\r\n const childkeySchema = propertySchema.properties[key];\r\n\r\n if (!childkeySchema) {\r\n result = false;\r\n }\r\n });\r\n\r\n return {\r\n result,\r\n ignoreInvalidProperty: true,\r\n };\r\n};\r\n\r\nexport const extractInfoForSerialization = ({ obj, effectKey }) =>\r\n processObjectWithSchema({\r\n obj,\r\n schema: imageAssetSerializeSchema,\r\n validatePropertyFunc: options => validateProperty({ ...options, effectKey }),\r\n });\r\n\r\nexport const extractInfoForDeserialization = ({ obj }) =>\r\n processObjectWithSchema({\r\n obj,\r\n schema: imageAssetDeserializeSchema,\r\n validatePropertyFunc: validateDeserializeProperty, // no validators\r\n });\r\n","import _ from 'underscore';\r\nimport { EffectChoiceKey } from '@bingads-webui-campaign/media-common-utils';\r\nimport { stringifySync, parseSync } from '@bingads-webui/safe-json';\r\nimport { extractInfoForSerialization, extractInfoForDeserialization } from './validate-schema';\r\nimport { EffectSettingsAlias } from './image-metadata-schema';\r\n\r\nconst convertStateToMetadata = ({\r\n effectSettings,\r\n} = {}) => {\r\n const {\r\n effectKey,\r\n /* Should not save URL related stuff since it may expire anytime. */\r\n // effectSrc,\r\n effectOptions = {},\r\n } = effectSettings || {};\r\n const processEffect = effectKey && effectKey !== EffectChoiceKey.None;\r\n\r\n if (!processEffect) {\r\n return null;\r\n }\r\n\r\n const metaObject = extractInfoForSerialization({\r\n obj: {\r\n effectSettings: {\r\n effectKey,\r\n effectOptions,\r\n },\r\n },\r\n effectKey,\r\n });\r\n\r\n return metaObject;\r\n};\r\n\r\n/*\r\n * Attention: this is serialized and saved in db,\r\n * so need to consider backward compatibility when upgrading.\r\n */\r\nexport const buildImageAssetMetadataToSave = (assetModel) => {\r\n const metaObject = {};\r\n\r\n const placementMeta = convertStateToMetadata(assetModel);\r\n\r\n if (!_.isEmpty(placementMeta)) {\r\n _.extend(metaObject, placementMeta);\r\n }\r\n\r\n return metaObject;\r\n};\r\n\r\n// metadata is coupled with image content.\r\n// if we have same images with different metadata, this is not supported by MT asset entity.\r\nexport const serializeImageAssetMetadata = (assetModel, isBulkUpsert = true) => {\r\n if (_.isEmpty(assetModel)) {\r\n return '';\r\n }\r\n\r\n const metaObject = buildImageAssetMetadataToSave(assetModel);\r\n\r\n if (_.isEmpty(metaObject)) {\r\n return '';\r\n }\r\n\r\n const serialized = stringifySync(metaObject);\r\n\r\n return isBulkUpsert\r\n ? serialized.replace(/,/g, encodeURIComponent(',')) // Comma is reserved in bulk upsert call\r\n : serialized;\r\n};\r\n\r\nexport const deserializeImageAssetMetadata = (metaString) => {\r\n if (metaString) {\r\n const decoded = metaString.replace(new RegExp(encodeURIComponent(','), 'g'), ',');\r\n const metaObj = parseSync(decoded);\r\n\r\n let metaObjCopy = metaObj;\r\n if (metaObj && metaObj[EffectSettingsAlias]) {\r\n metaObjCopy = { [EffectSettingsAlias]: metaObj[EffectSettingsAlias] };\r\n }\r\n\r\n if (!_.isEmpty(metaObj)) {\r\n const model = extractInfoForDeserialization({ obj: metaObjCopy });\r\n\r\n return model;\r\n }\r\n }\r\n\r\n return null;\r\n};\r\n","import _ from 'underscore';\r\n\r\nimport { odata } from '@bingads-webui/http-util';\r\nimport { stringifySync } from '@bingads-webui/safe-json';\r\n\r\nlet cache = {};\r\nexport class AdGenerationDataService {\r\n constructor({\r\n cid,\r\n aid,\r\n cmpId = null,\r\n oDataConfig,\r\n }) {\r\n this.cid = cid;\r\n this.aid = aid;\r\n this.cmpId = cmpId;\r\n this.path = oDataConfig.odataPath;\r\n this.oDataConfig = {\r\n oDataToken: oDataConfig.odataToken,\r\n oDataTokenType: oDataConfig.oDataTokenType,\r\n applicationName: oDataConfig.applicationName,\r\n };\r\n this.odata = odata;\r\n }\r\n\r\n createRecommendRequestData({\r\n landingPageUrl,\r\n pageNumber = 1, // counting from 1\r\n pageSize = 30,\r\n forceInternalScrapingService = false,\r\n minimumResolution = { height: 152, width: 470 },\r\n headlines,\r\n descriptions,\r\n }) {\r\n const criteria = [];\r\n\r\n if (!_.isEmpty(headlines)) {\r\n criteria.push({\r\n Name: 'headlines',\r\n Value: headlines,\r\n });\r\n }\r\n\r\n if (!_.isEmpty(descriptions)) {\r\n criteria.push({\r\n Name: 'descriptions',\r\n Value: descriptions,\r\n });\r\n }\r\n\r\n return {\r\n endpoint: 'Default.CreateImageRecommendation',\r\n data: _.defaults({\r\n url: landingPageUrl,\r\n source: forceInternalScrapingService ? 'lp' : 'default',\r\n options: {\r\n WithThumbnail: true,\r\n MinWidth: minimumResolution.width,\r\n MinHeight: minimumResolution.height,\r\n },\r\n paging: {\r\n Page: pageNumber,\r\n PageSize: pageSize,\r\n },\r\n }, !_.isEmpty(criteria) && {\r\n rankingCriteria: {\r\n Type: 'text',\r\n Criteria: criteria,\r\n },\r\n }),\r\n };\r\n }\r\n\r\n // so that we don't need to change consuming place during API upgrade\r\n formatRawReponse(response) {\r\n return {\r\n ImageWip: response.Wip,\r\n Images: response.Images,\r\n ImagePaging: response.Paging ? {\r\n PageNumber: response.Paging.Page,\r\n PageSize: response.Paging.PageSize,\r\n TotalCount: response.Paging.TotalCount,\r\n } : {},\r\n };\r\n }\r\n\r\n recommend({\r\n landingPageUrl,\r\n pageNumber = 1, // counting from 1\r\n pageSize = 30,\r\n forceInternalScrapingService = false,\r\n minimumResolution = { height: 152, width: 470 },\r\n headlines,\r\n descriptions,\r\n }) {\r\n const { endpoint, data } = this.createRecommendRequestData({\r\n landingPageUrl,\r\n pageNumber,\r\n pageSize,\r\n forceInternalScrapingService,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n });\r\n const url = this.generateUrlWithScope(endpoint);\r\n const requestBody = _.extend({ data }, this.oDataConfig);\r\n\r\n return this.odata.post(\r\n url,\r\n requestBody\r\n ).then(response => this.formatRawReponse(response));\r\n }\r\n\r\n generate({ options }) {\r\n const serializedOptions = stringifySync(options);\r\n if (cache[serializedOptions]) {\r\n return cache[serializedOptions];\r\n }\r\n\r\n const url = this.generateUrlWithScope('Default.MediaGeneration');\r\n const requestBody = _.extend({\r\n data: options,\r\n }, this.oDataConfig);\r\n\r\n const fetchData = this.odata.post;\r\n cache[serializedOptions] = fetchData(url, requestBody)\r\n .then((response = {}) => {\r\n if (response.wip || !response.Assets) {\r\n cache[serializedOptions] = null;\r\n }\r\n return response;\r\n })\r\n .catch(() => {\r\n cache[serializedOptions] = null;\r\n });\r\n return cache[serializedOptions];\r\n }\r\n\r\n generateUrlWithScope(methodName) {\r\n return this.cmpId ? `${this.path}/Customers(${this.cid})/Accounts(${this.aid})/Campaigns(${this.cmpId})/${methodName}` :\r\n `${this.path}/Customers(${this.cid})/Accounts(${this.aid})/${methodName}`;\r\n }\r\n\r\n resetCache() {\r\n cache = {};\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport { convertAspectRatioDecimalToRatio, MTSmartEffect } from '@bingads-webui-campaign/media-common-utils';\r\n\r\nexport class GenerateDataModel {\r\n constructor({\r\n filters,\r\n crop,\r\n imageUrl,\r\n jobId,\r\n assetType,\r\n fileFormat,\r\n }) {\r\n this.JobId = jobId;\r\n this.Image = {\r\n BaseImageUrl: imageUrl,\r\n Filters: filters,\r\n Crop: crop,\r\n };\r\n this.Output = {\r\n MediaType: assetType,\r\n Image: {\r\n Type: fileFormat,\r\n },\r\n };\r\n }\r\n}\r\n\r\nexport class GenerateImageDataModel extends GenerateDataModel {\r\n constructor(options) {\r\n super({\r\n ...options,\r\n assetType: 'image',\r\n fileFormat: 'jpg',\r\n });\r\n }\r\n}\r\n\r\nexport class GenerateManualCropDataModel extends GenerateImageDataModel {\r\n constructor({\r\n jobId,\r\n cropSettings,\r\n imageUrl,\r\n }) {\r\n super({\r\n jobId,\r\n imageUrl,\r\n crop: {\r\n x: cropSettings.x,\r\n y: cropSettings.y,\r\n width: cropSettings.width,\r\n height: cropSettings.height,\r\n scale_x: 1,\r\n scale_y: 1,\r\n },\r\n });\r\n }\r\n}\r\n\r\nexport class GenerateSmartCropDataModel extends GenerateImageDataModel {\r\n constructor({\r\n jobId,\r\n placementSettings,\r\n imageUrl,\r\n }) {\r\n super({\r\n filters: [{\r\n Name: MTSmartEffect.SmartCrop,\r\n Param: {\r\n ExpectedCrops: _.map(placementSettings, ({ aspectRatio, minSize }) => ({\r\n AspectRatio: convertAspectRatioDecimalToRatio(aspectRatio),\r\n MinHeight: minSize[1],\r\n })),\r\n },\r\n }],\r\n jobId,\r\n imageUrl,\r\n });\r\n }\r\n}\r\n\r\nexport class GenerateSmartEffectDataModel extends GenerateImageDataModel {\r\n constructor({\r\n jobId,\r\n smartEffects,\r\n imageUrl,\r\n }) {\r\n super({\r\n filters: _.map(smartEffects, ({ smartEffectName, smartEffectOptions }) => ({\r\n Name: smartEffectName,\r\n Param: smartEffectOptions,\r\n })),\r\n jobId,\r\n imageUrl,\r\n });\r\n }\r\n}\r\n","import Promise from 'bluebird';\r\n\r\nimport { AdGenerationDataService } from './data-service';\r\nimport {\r\n GenerateManualCropDataModel,\r\n GenerateSmartCropDataModel,\r\n GenerateSmartEffectDataModel,\r\n} from './generate-schema';\r\n\r\nconst MAX_TIMEOUT = 5 * 60 * 1000; // set timeout to be 5 minutes\r\nconst POLL_INTERVAL = 1000; // set to 1000ms for now\r\n\r\nexport const MediaRepositoryTimeoutError = 'MediaRepositoryTimeoutError';\r\n\r\nexport class MediaRepository {\r\n constructor(options) {\r\n this.dataService = new AdGenerationDataService(options);\r\n }\r\n\r\n /**\r\n * Generates image with specified smart effects\r\n *\r\n * @param {imageUrl} URL for the base image to which smart effects will\r\n * be applied\r\n * @param {smartEffects} array of smart effect config objects with each\r\n * config object having schema { smartEffectName, smartEffectOptions }\r\n * @returns {Promise} Promise which will resolve with the generated assets once\r\n * the generate job finishes\r\n */\r\n generateEffect({ imageUrl, smartEffects }) {\r\n const effectOptions = new GenerateSmartEffectDataModel({ imageUrl, smartEffects });\r\n return this.createGenerateRequestWithPolling({ effectOptions });\r\n }\r\n\r\n /**\r\n * Generates smart crop for given image and placements\r\n *\r\n * @param {imageUrl} URL for the base image for which smart crop settings\r\n * will be generated\r\n * @param {placementSettings} array of placement settings with schema\r\n * following the convention in\r\n * bingads-webui-campaign-react/image-experience/src/constants\r\n * aspectRatio must be a Number (can be a decimal)\r\n * @returns {Promise} Promise which will resolve with the smart crop settings once\r\n * the generate job finishes\r\n */\r\n generateSmartCrop({ imageUrl, placementSettings }) {\r\n const effectOptions = new GenerateSmartCropDataModel({ imageUrl, placementSettings });\r\n return this.createGenerateRequestWithPolling({ effectOptions });\r\n }\r\n\r\n /**\r\n * Generates manual crop for given image and crop settings\r\n *\r\n * @param {imageUrl} URL for the base image for which smart crop settings\r\n * will be generated\r\n * @param {cropSettings} object with properties x, y, width, height; x and y\r\n * correspond to the top left origin of the crop bounding box\r\n * @returns {Promise} Promise which will resolve with the smart crop settings once\r\n * the generate job finishes\r\n */\r\n generateManualCrop({ imageUrl, cropSettings }) {\r\n const effectOptions = new GenerateManualCropDataModel({ imageUrl, cropSettings });\r\n return this.createGenerateRequestWithPolling({ effectOptions });\r\n }\r\n\r\n createGenerateRequestWithPolling({ effectOptions }) {\r\n const timerIds = {};\r\n const resetTimers = () => {\r\n if (timerIds.intervalId) {\r\n clearInterval(timerIds.intervalId);\r\n }\r\n if (timerIds.timeoutId) {\r\n clearTimeout(timerIds.timeoutId);\r\n }\r\n };\r\n\r\n return this.dataService.generate({ options: effectOptions }).then((response = {}) => {\r\n if (!response.wip) {\r\n return response.Assets;\r\n }\r\n\r\n return new Promise((resolve, reject) => {\r\n timerIds.intervalId = setInterval(() => {\r\n this.dataService.generate({ options: { JobId: response.JobId } })\r\n .then((newResponse = {}) => {\r\n if (!newResponse.wip) {\r\n resetTimers();\r\n resolve(newResponse.Assets);\r\n }\r\n }).catch((error) => {\r\n resetTimers();\r\n reject(error);\r\n });\r\n }, POLL_INTERVAL);\r\n\r\n timerIds.timeoutId = setTimeout(() => {\r\n resetTimers();\r\n reject(new Error(MediaRepositoryTimeoutError));\r\n }, MAX_TIMEOUT);\r\n });\r\n });\r\n }\r\n}\r\n","import _ from 'underscore';\r\nimport { createAsyncToken } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nimport { AdGenerationDataService } from './data-service';\r\n\r\nconst MAX_RECOMEND_TIMEOUT = 30 * 1000; // set recommend timeout to 30 seconds\r\nconst RECOMMEND_POLL_INTERVAL = [500, 1000, 2000]; // polling intervals: 500ms, 1s, 2s, 2s, 2s ...\r\nconst OFFLINE_TIMEOUT = 15 * 1000; // set offline timeout for 15 seconds\r\n\r\nexport const RecommendationTimeoutError = 'RecommendationTimeoutError';\r\n\r\nexport class SuggestionPoller {\r\n constructor(options) {\r\n this.dataService = new AdGenerationDataService(options);\r\n this.intervalId = null;\r\n this.timeoutId = null;\r\n this.hasOfflineProcessingFinished = false;\r\n this.offlineProccesingTimeoutId = null;\r\n this.jobCompleteCallback = options.jobCompleteCallback;\r\n this.maxTimeout = options.timeout || MAX_RECOMEND_TIMEOUT;\r\n this.logger = options.logger;\r\n }\r\n\r\n cancel() {\r\n if (this.recommendPromiseBeforePolling) {\r\n this.recommendPromiseBeforePolling.cancel();\r\n this.recommendPromiseBeforePolling = null;\r\n }\r\n\r\n if (this.intervalId) {\r\n clearInterval(this.intervalId);\r\n this.intervalId = null;\r\n }\r\n if (this.timeoutId) {\r\n clearTimeout(this.timeoutId);\r\n this.timeoutId = null;\r\n }\r\n if (this.offlineProccesingTimeoutId) {\r\n clearTimeout(this.offlineProccesingTimeoutId);\r\n this.offlineProccesingTimeoutId = null;\r\n }\r\n\r\n this.hasOfflineProcessingFinished = false;\r\n }\r\n\r\n setJobCompleteCallback(callback) {\r\n this.jobCompleteCallback = callback;\r\n }\r\n\r\n handleError(error) {\r\n this.jobCompleteCallback({\r\n error,\r\n });\r\n\r\n this.logger.trace(`MediaRecommendationError: ${error};`);\r\n\r\n this.cancel();\r\n }\r\n\r\n doesResponseHaveImages(response) {\r\n return response && response.Images && response.Images.length > 0;\r\n }\r\n\r\n getMoreLandingPageSuggestions({\r\n landingPageUrl,\r\n pageNumber,\r\n forceInternalScrapingService = false,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n }) {\r\n if (!pageNumber || pageNumber <= 1) {\r\n throw new Error('For first page request, please call getLandingPageSuggestions to use polling');\r\n }\r\n\r\n return this.dataService.recommend({\r\n landingPageUrl,\r\n pageNumber,\r\n forceInternalScrapingService,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n });\r\n }\r\n\r\n getLandingPageSuggestions({\r\n landingPageUrl,\r\n enableOfflinePollingDelay = true,\r\n additionalCallback = _.noop,\r\n forceInternalScrapingService = false,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n }) {\r\n // clear any ongoing job if present\r\n this.cancel();\r\n\r\n this.logger.startSignal();\r\n\r\n this.recommendPromiseBeforePolling = createAsyncToken(this.dataService.recommend({\r\n landingPageUrl,\r\n forceInternalScrapingService,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n })).on({\r\n onSuccess: (response) => {\r\n if (!response.ImageWip && this.doesResponseHaveImages(response)) {\r\n this.jobCompleteCallback(response, forceInternalScrapingService);\r\n additionalCallback();\r\n\r\n this.logger.stopSignal('Got images', 'SuccessFetchImageSuggestions');\r\n } else {\r\n this.logger.trace('getLandingPageSuggestions: got no images from first request, start polling');\r\n\r\n if (enableOfflinePollingDelay) {\r\n this.offlineProccesingTimeoutId = setTimeout(() => {\r\n this.hasOfflineProcessingFinished = true;\r\n }, OFFLINE_TIMEOUT);\r\n } else {\r\n // do not enable offline processing delay when user is clicking the\r\n // refresh button\r\n this.hasOfflineProcessingFinished = true;\r\n }\r\n\r\n this.startPollingJob({\r\n landingPageUrl,\r\n additionalCallback,\r\n forceInternalScrapingService,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n });\r\n }\r\n },\r\n onError: (error) => {\r\n this.handleError(error);\r\n },\r\n });\r\n }\r\n\r\n startPollingJob({\r\n landingPageUrl,\r\n additionalCallback,\r\n forceInternalScrapingService = false,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n }) {\r\n let pollingCount = 0;\r\n let stopUpdateInterval = false;\r\n const cb = () => {\r\n if (!stopUpdateInterval) {\r\n pollingCount += 1;\r\n\r\n if (RECOMMEND_POLL_INTERVAL[pollingCount]) {\r\n clearInterval(this.intervalId);\r\n this.intervalId = setInterval(cb, RECOMMEND_POLL_INTERVAL[pollingCount]);\r\n } else {\r\n stopUpdateInterval = true;\r\n }\r\n }\r\n\r\n this.dataService.recommend({\r\n landingPageUrl,\r\n forceInternalScrapingService,\r\n minimumResolution,\r\n headlines,\r\n descriptions,\r\n }).then((response) => {\r\n const isResponseNotEmpty = this.doesResponseHaveImages(response);\r\n if (!response.ImageWip &&\r\n (this.hasOfflineProcessingFinished || isResponseNotEmpty)) {\r\n this.jobCompleteCallback(response, forceInternalScrapingService);\r\n additionalCallback();\r\n\r\n this.cancel();\r\n\r\n if (this.hasOfflineProcessingFinished && !isResponseNotEmpty) {\r\n this.logger.trace('MediaRecommendationError: NoImages;');\r\n this.logger.stopSignal('No image suggestions returned', 'NoDataFetchImageSuggestions');\r\n } else {\r\n this.logger.stopSignal('Got images', 'SuccessFetchImageSuggestions');\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n this.handleError(error);\r\n additionalCallback();\r\n });\r\n };\r\n\r\n this.intervalId = setInterval(() => {\r\n cb();\r\n }, RECOMMEND_POLL_INTERVAL[pollingCount]);\r\n\r\n this.timeoutId = setTimeout(() => {\r\n this.handleError(RecommendationTimeoutError);\r\n additionalCallback();\r\n this.logger.stopSignal('Timeout in polling service', 'TimeoutFetchImageSuggestions');\r\n }, this.maxTimeout);\r\n }\r\n}\r\n","import { map, first } from 'underscore';\r\nimport { RecommendationTimeoutError } from './poller';\r\n\r\nexport const hasMoreImagesToFetch = (response) => {\r\n if (response) {\r\n const { ImagePaging = {} } = response;\r\n const { TotalCount, PageNumber, PageSize } = ImagePaging;\r\n\r\n if (TotalCount > 0 && PageNumber > 0 && PageSize > 0) {\r\n // ideally later condition should be enough, but for safety, also check returned images size\r\n return TotalCount > PageNumber * PageSize;\r\n }\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const SuggestionStatus = {\r\n EmptyURL: 'EmptyURL',\r\n InvalidURL: 'InvalidURL',\r\n ServerError: 'ServerError',\r\n FetchInProgress: 'FetchInProgress',\r\n FetchSucceed: 'FetchSucceed',\r\n SelectSuggestionError: 'SelectSuggestionError',\r\n SelectSuggestionComplete: 'SelectSuggestionComplete',\r\n};\r\n\r\nconst mapSuggestionResponseToCarouselState = (status, response = {}, suggestion = {}) => {\r\n let carousel = {};\r\n\r\n switch (status) {\r\n case SuggestionStatus.EmptyURL:\r\n carousel = { isError: true, images: [], message: {} };\r\n break;\r\n case SuggestionStatus.InvalidURL:\r\n carousel = { isError: true, images: [], message: {} };\r\n break;\r\n case SuggestionStatus.ServerError: {\r\n if (response.error === RecommendationTimeoutError) {\r\n carousel = { isError: true, images: [], message: {} };\r\n } else {\r\n carousel = { isError: true, images: [], message: {} };\r\n }\r\n break;\r\n }\r\n case SuggestionStatus.FetchInProgress:\r\n carousel = { isError: false, images: [], message: {} };\r\n break;\r\n case SuggestionStatus.FetchSucceed:\r\n carousel = {\r\n isError: false,\r\n images: first(suggestion.images, 10),\r\n message: {},\r\n };\r\n break;\r\n default:\r\n throw new Error('unexpected status');\r\n }\r\n\r\n return carousel;\r\n};\r\n\r\nexport const mapSuggestionResponseToState = (status, response = {}, isSubdomainScraping) => {\r\n let suggestion = { };\r\n let carousel;\r\n\r\n switch (status) {\r\n case SuggestionStatus.EmptyURL:\r\n suggestion = { emptyURL: true };\r\n break;\r\n case SuggestionStatus.InvalidURL:\r\n suggestion = { invalidURL: true };\r\n break;\r\n case SuggestionStatus.ServerError: {\r\n if (response.error === RecommendationTimeoutError) {\r\n suggestion = { isTimeout: true };\r\n } else {\r\n suggestion = { unKnownError: true };\r\n }\r\n break;\r\n }\r\n case SuggestionStatus.FetchInProgress:\r\n suggestion = { inProgress: true };\r\n break;\r\n case SuggestionStatus.FetchSucceed:\r\n suggestion = {\r\n images: map(\r\n response && response.Images,\r\n ({ ImageUrl, ThumbnailUrl, SuggestionId }) => ({\r\n fullUrl: ImageUrl,\r\n thumbnailUrl: ThumbnailUrl || ImageUrl,\r\n suggestionId: SuggestionId,\r\n })\r\n ),\r\n hasMore: hasMoreImagesToFetch(response),\r\n };\r\n break;\r\n default:\r\n throw new Error('unexpected status');\r\n }\r\n\r\n if (!isSubdomainScraping) {\r\n carousel = mapSuggestionResponseToCarouselState(status, response, suggestion);\r\n }\r\n\r\n const returnObject = { suggestion };\r\n\r\n if (carousel) {\r\n returnObject.carousel = carousel;\r\n }\r\n\r\n return returnObject;\r\n};\r\n","import {\r\n getCommonPreviewContainerStyles,\r\n getCrudAdImagePreviewStyles,\r\n getMsanPreviewStyles,\r\n getMMAPreviewStyles,\r\n} from '@bingads-webui-campaign-react/shared-image-preview-styles';\r\n\r\nexport const getPreviewRightRailStyle = (_, { palette = {}, iconFontFamily = 'MsAds MDL2 Assets' }) => {\r\n const combinedStyles = {\r\n ...getCommonPreviewContainerStyles(),\r\n ...getCrudAdImagePreviewStyles(_, { palette, iconFontFamily }),\r\n ...getMsanPreviewStyles(),\r\n };\r\n\r\n // apply some style overrides on top of the combined carousel styles\r\n combinedStyles['& .new-preview-carousel-container'] = {\r\n ...combinedStyles['& .new-preview-carousel-container'],\r\n minWidth: 0,\r\n background: palette.white,\r\n position: 'relative',\r\n };\r\n\r\n combinedStyles['& .new-preview-carousel-container .carousel-control'] = {\r\n ...combinedStyles['& .new-preview-carousel-container .carousel-control'],\r\n background: 'transparent',\r\n };\r\n\r\n return {\r\n rightRailRoot: combinedStyles,\r\n rightRailRootMMA: {\r\n ...combinedStyles,\r\n ...getMMAPreviewStyles(),\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 { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getPreviewRightRailStyle } from './styles/preview-right-rail-wrapper';\r\n\r\nexport const PreviewCarouselRightRailWrapper = ({\r\n imageListForPreview,\r\n previewTexts,\r\n previewLogo,\r\n i18n,\r\n imageListLength,\r\n genericImage,\r\n activityLogger,\r\n PreviewCarousel,\r\n isMultimediaAd,\r\n permissions,\r\n isMMAV2Enabled,\r\n isMSANBoostEnabled,\r\n isBoost200x100ImageEnabled,\r\n adPreviewConfig,\r\n isBoostNewAspectRatioSupportEnabled,\r\n}) => {\r\n const classes = useDefaultStyles(getPreviewRightRailStyle);\r\n\r\n let previewCarouselProps = {\r\n imageList: imageListForPreview,\r\n disablePlacementActions: true,\r\n previewTexts,\r\n previewLogo,\r\n totalImageListCount: imageListLength,\r\n activityLogger,\r\n genericImage,\r\n i18n,\r\n isAdCreatorEnabled: true,\r\n isMultimediaAd,\r\n isMMAV2Enabled,\r\n isMSANBoostEnabled,\r\n isBoost200x100ImageEnabled,\r\n adPreviewConfig,\r\n isBoostNewAspectRatioSupportEnabled,\r\n };\r\n\r\n if (permissions) {\r\n previewCarouselProps = {\r\n ...previewCarouselProps,\r\n permissions,\r\n isMultiMediaAdsPhase2Enabled: permissions && permissions.IsMultiMediaAdsPhase2Enabled,\r\n };\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nPreviewCarouselRightRailWrapper.propTypes = {\r\n imageListForPreview: PropTypes.arrayOf(PropTypes.shape({\r\n src: PropTypes.string,\r\n })).isRequired,\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 previewLogo: PropTypes.shape({}),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n imageListLength: PropTypes.number.isRequired,\r\n genericImage: PropTypes.shape({\r\n src: PropTypes.string,\r\n }).isRequired,\r\n activityLogger: PropTypes.shape({\r\n trace: PropTypes.func,\r\n }).isRequired,\r\n PreviewCarousel: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types\r\n isMultimediaAd: PropTypes.bool,\r\n isMMAV2Enabled: PropTypes.bool,\r\n isMSANBoostEnabled: PropTypes.bool,\r\n isBoost200x100ImageEnabled: PropTypes.bool,\r\n isBoostNewAspectRatioSupportEnabled: PropTypes.bool,\r\n permissions: PropTypes.shape({\r\n IsMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n }),\r\n adPreviewConfig: PropTypes.shape({\r\n adType: PropTypes.string,\r\n placementConfig: PropTypes.shape({}),\r\n }),\r\n};\r\n// disabling prop type validation for PreviewCarousel as it doesn't correctly accept functional\r\n// components\r\n\r\nPreviewCarouselRightRailWrapper.defaultProps = {\r\n isMultimediaAd: false,\r\n permissions: null,\r\n isMMAV2Enabled: false,\r\n isMSANBoostEnabled: false,\r\n isBoost200x100ImageEnabled: false,\r\n adPreviewConfig: {},\r\n isBoostNewAspectRatioSupportEnabled: false,\r\n previewLogo: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getPreviewRightRailStyle } from './styles/preview-right-rail-wrapper';\r\n\r\nexport const PreviewSingleRightRailWrapper = ({\r\n imageObj,\r\n previewTexts,\r\n previewLogo,\r\n i18n,\r\n previewTitle,\r\n previewSettings,\r\n Preview,\r\n isMultimediaAd,\r\n isCombinedMsanAndMmaAspectRatios,\r\n isMMAV2Enabled,\r\n adPreviewConfig,\r\n placementType,\r\n}) => {\r\n const classes = useDefaultStyles(getPreviewRightRailStyle);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nPreviewSingleRightRailWrapper.propTypes = {\r\n imageObj: PropTypes.shape({\r\n src: PropTypes.string,\r\n }).isRequired,\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 previewLogo: PropTypes.shape({}),\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n previewTitle: PropTypes.string.isRequired,\r\n previewSettings: PropTypes.shape({\r\n previewContentClassName: PropTypes.string,\r\n showShortHeadline: PropTypes.bool,\r\n showLongHeadline: PropTypes.bool,\r\n showDescription: PropTypes.bool,\r\n showGradient: PropTypes.bool,\r\n }).isRequired,\r\n Preview: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types\r\n isMultimediaAd: PropTypes.bool,\r\n isCombinedMsanAndMmaAspectRatios: PropTypes.bool,\r\n isMMAV2Enabled: PropTypes.bool,\r\n adPreviewConfig: PropTypes.shape({}),\r\n placementType: PropTypes.string,\r\n};\r\n// disabling prop type validation for PreviewCarousel as it doesn't correctly accept functional\r\n// components\r\n\r\nPreviewSingleRightRailWrapper.defaultProps = {\r\n isMultimediaAd: false,\r\n isCombinedMsanAndMmaAspectRatios: false,\r\n isMMAV2Enabled: false,\r\n adPreviewConfig: undefined,\r\n placementType: '',\r\n previewLogo: undefined,\r\n};\r\n","import { ComponentSettings } from '@bingads-webui-theme-2018/theme-fluent';\r\n\r\nexport const getThumbsUpDownStyles = (components, { palette = {} } = {}) => ({ // eslint-disable-line no-unused-vars, max-len\r\n thumbsUpDown: {\r\n display: 'inline-block',\r\n position: 'absolute',\r\n right: 24,\r\n bottom: 16,\r\n },\r\n thumbsUpDownAddImage: {\r\n display: 'inline-block',\r\n position: 'absolute',\r\n bottom: 16,\r\n right: (window.innerWidth) - 1059,\r\n // 1059 is hardcoded width of add-image panel in image-experience\r\n },\r\n label: {\r\n marginRight: 8,\r\n display: 'inline-block',\r\n },\r\n calloutRoot: {\r\n '& .blocker-image': {\r\n ...ComponentSettings.getBlockerStyle(14, palette),\r\n display: 'inline-block',\r\n },\r\n '& .blocker-text': {\r\n display: 'inline-block',\r\n },\r\n },\r\n});\r\n","export const getFeedbackFormStyles = (components, { palette = {} } = {}) => ({ // eslint-disable-line no-unused-vars, max-len\r\n checkboxOptions: {\r\n marginBottom: 19,\r\n },\r\n feedbackAction: {\r\n float: 'right',\r\n },\r\n feedbackFormRoot: {\r\n overflow: 'hidden',\r\n },\r\n});\r\n","import React, { useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport _ from 'underscore';\r\n\r\nimport {\r\n Text,\r\n Checkbox,\r\n TextField,\r\n DefaultButton,\r\n PrimaryButton,\r\n Link,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\n\r\nimport { getFeedbackFormStyles } from './styles/feedback-form';\r\n\r\nexport const FeedbackForm = ({\r\n onSubmit,\r\n onDismiss,\r\n options,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const initialOptionsState = _.reduce(options, (memo, { key }) => ({\r\n ...memo,\r\n [key]: false,\r\n }), {});\r\n const [optionsState, setOptionsState] = useState(initialOptionsState);\r\n const [screenshotState, setScreenshotState] = useState(false);\r\n const [commentState, setCommentState] = useState('');\r\n const [enableSubmit, setEnableSubmit] = useState(false);\r\n const classes = useDefaultStyles(getFeedbackFormStyles);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {previewTitle}\r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Feedback to Microsoft'))}\r\n \r\n \r\n {i18n.getString(_TL_('Please select from the below possible issues if applicable'))}\r\n \r\n setCommentState(newValue)}\r\n multiline\r\n styles={{\r\n root: {\r\n marginBottom: 24,\r\n },\r\n }}\r\n placeholder={i18n.getString(_TL_('Add a comment'))}\r\n />\r\n setScreenshotState(checked)}\r\n styles={{\r\n root: {\r\n marginBottom: 20,\r\n },\r\n }}\r\n />\r\n\r\n \r\n (\r\n \r\n {`${text} `}\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nFeedbackForm.propTypes = {\r\n onSubmit: PropTypes.func.isRequired,\r\n onDismiss: PropTypes.func.isRequired,\r\n options: PropTypes.arrayOf(PropTypes.shape({\r\n label: PropTypes.string,\r\n key: PropTypes.string,\r\n })).isRequired,\r\n};\r\n\r\nFeedbackForm.defaultProps = {\r\n};\r\n","import React from 'react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst getIconStyles = () => ({\r\n icon: {\r\n marginBottom: 8,\r\n '& svg': {\r\n display: 'block',\r\n margin: 'auto',\r\n },\r\n },\r\n});\r\n\r\nexport const ThankYouIcon = () => {\r\n const classes = useDefaultStyles(getIconStyles);\r\n\r\n return (\r\n \r\n {\r\n _.map(options, ({ label, key }) => (\r\n {\r\n setOptionsState(prev => ({\r\n ...prev,\r\n [key]: checked,\r\n }));\r\n\r\n if (checked) {\r\n if (!enableSubmit) {\r\n setEnableSubmit(true);\r\n }\r\n } else {\r\n const otherValues = _.values(_.omit(optionsState, key));\r\n\r\n if (!_.some(otherValues, _.identity)) {\r\n setEnableSubmit(false);\r\n }\r\n }\r\n }}\r\n />\r\n ))\r\n }\r\n
\r\n \r\n onSubmit({\r\n options: optionsState,\r\n comments: commentState,\r\n takeScreenshot: screenshotState,\r\n })}\r\n disabled={!enableSubmit || !commentState}\r\n styles={{\r\n root: {\r\n marginRight: 8,\r\n },\r\n }}\r\n />\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Text,\r\n DefaultButton,\r\n} from '@bingads-webui-react/fabric-control';\r\n\r\nimport { ThankYouIcon } from './styles/thank-you-icon';\r\n\r\nexport const ThankYouContent = ({\r\n onDismiss,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Thanks!'))}\r\n \r\n \r\n {i18n.getString(_TL_('We appreciate your feedback.'))}\r\n \r\n
\r\n );\r\n};\r\n\r\nThankYouContent.propTypes = {\r\n onDismiss: PropTypes.func.isRequired,\r\n};\r\nThankYouContent.defaultProps = {\r\n\r\n};\r\n","import html2canvas from 'html2canvas';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { stringifySync } from '@bingads-webui/safe-json';\r\nimport { OCVDataService } from '@bingads-webui-react/feedback-panel';\r\n\r\nclass ThumbsUpDownOCVDataService extends OCVDataService {\r\n checkCompliance() {\r\n return true;\r\n }\r\n}\r\n\r\nconst defaultTestAppId = 50025;\r\nconst defaultAppId = 2482;\r\n\r\nconst serializeComments = ({ comments, options }) => `UserComments:${comments};;FormOptions:${stringifySync(options)}`;\r\n\r\nexport const sendFeedbackInternal = ({\r\n formOptions,\r\n featureArea,\r\n onFinishTakeScreenshot,\r\n onFinishSendRequest,\r\n isTestEnv,\r\n dataService,\r\n}) => {\r\n const clientFeedbackId = uuidv4();\r\n const serializedComments = serializeComments(formOptions);\r\n\r\n const feedback = {\r\n type: 'Frown',\r\n comment: serializedComments,\r\n complianceChecks: {\r\n authenticationType: 'MSA',\r\n ageGroup: 'Adult',\r\n },\r\n };\r\n\r\n const telemetry = {\r\n featureArea,\r\n };\r\n\r\n let screenshotGenerationPromise;\r\n\r\n if (formOptions.takeScreenshot) {\r\n screenshotGenerationPromise = html2canvas(document.body, {\r\n foreignObjectRendering: true,\r\n logging: false,\r\n })\r\n .then(canvas => canvas.toDataURL('image/jpeg'))\r\n .then((data) => {\r\n onFinishTakeScreenshot();\r\n return data;\r\n });\r\n }\r\n\r\n dataService.sendFeedback({\r\n feedback,\r\n telemetry,\r\n screenshotGenerationPromise,\r\n onSuccess: onFinishSendRequest,\r\n onError: onFinishSendRequest,\r\n appId: isTestEnv ? defaultTestAppId : defaultAppId,\r\n clientFeedbackId,\r\n isTestEnv,\r\n });\r\n};\r\n\r\n\r\nexport const sendFeedback = ({\r\n formOptions,\r\n featureArea,\r\n onFinishTakeScreenshot,\r\n onFinishSendRequest,\r\n isTestEnv,\r\n}) => {\r\n const dataService = new ThumbsUpDownOCVDataService();\r\n\r\n sendFeedbackInternal({\r\n formOptions,\r\n featureArea,\r\n onFinishTakeScreenshot,\r\n onFinishSendRequest,\r\n isTestEnv,\r\n dataService,\r\n });\r\n};\r\n","import React, { useState, useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport _ from 'underscore';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Callout, IconButton, DirectionalHint } from '@bingads-webui-react/fabric-control';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\n\r\nimport { getThumbsUpDownStyles } from './styles/thumbs-up-down';\r\nimport { FeedbackForm } from './feedback-form';\r\nimport { ThankYouContent } from './thank-you-content';\r\nimport { sendFeedback } from './ocv-data-source';\r\n\r\nexport const ThumbsUpDown = ({\r\n onThumbsUpSignal,\r\n onThumbsDownSignal,\r\n featureArea,\r\n isTestEnv,\r\n containerName,\r\n}) => {\r\n const classes = useDefaultStyles(getThumbsUpDownStyles);\r\n const i18n = useContext(I18nContext);\r\n\r\n const [thumbsUpSelected, setThumbsUpSelected] = useState(false);\r\n const [thumbsDownSelected, setThumbsDownSelected] = useState(false);\r\n const [showFeedback, setShowFeedback] = useState(true);\r\n const [showThumbsUpThankYouContent, setShowThumbsUpThankYouContent] = useState(false);\r\n const [showThumbsDownThankYouContent, setShowThumbsDownThankYouContent] = useState(false);\r\n const [showBlocker, setShowBlocker] = useState(false);\r\n const [blockerText, setBlockerText] = useState(i18n.getString(_TL_('Loading...')));\r\n const [formOptionsInternal, setFormOptionsInternal] = useState(null);\r\n const [hasOngoingRequest, setHasOngoingRequest] = useState(false);\r\n\r\n\r\n const options = [{\r\n label: i18n.getString(_TL_('Issues with images extracted from my website')),\r\n key: 'websiteImages',\r\n }, {\r\n label: i18n.getString(_TL_('Issues with smart effects & cropping')),\r\n key: 'smartEffects',\r\n }, {\r\n label: i18n.getString(_TL_('Other')),\r\n key: 'other',\r\n }];\r\n\r\n useEffect(() => {\r\n if (showBlocker && !hasOngoingRequest) {\r\n setHasOngoingRequest(true);\r\n\r\n sendFeedback({\r\n formOptions: formOptionsInternal,\r\n featureArea,\r\n onFinishTakeScreenshot: () => {\r\n setBlockerText(i18n.getString(_TL_('Loading...')));\r\n },\r\n onFinishSendRequest: () => {\r\n setShowBlocker(false);\r\n setShowFeedback(false);\r\n setHasOngoingRequest(false);\r\n setFormOptionsInternal(null);\r\n setShowThumbsDownThankYouContent(true);\r\n },\r\n isTestEnv,\r\n });\r\n }\r\n }, [\r\n setHasOngoingRequest,\r\n showBlocker,\r\n setShowBlocker,\r\n setShowFeedback,\r\n hasOngoingRequest,\r\n setFormOptionsInternal,\r\n setShowThumbsUpThankYouContent,\r\n featureArea,\r\n isTestEnv,\r\n formOptionsInternal,\r\n setBlockerText,\r\n i18n,\r\n ]);\r\n\r\n return (\r\n \r\n {\r\n const newThumbsUpState = !thumbsUpSelected;\r\n\r\n setThumbsUpSelected(newThumbsUpState);\r\n setShowThumbsUpThankYouContent(newThumbsUpState);\r\n setThumbsDownSelected(false);\r\n\r\n if (newThumbsUpState === true) {\r\n onThumbsUpSignal();\r\n }\r\n }}\r\n >\r\n {\r\n showThumbsUpThankYouContent && (\r\n \r\n setShowThumbsUpThankYouContent(false)}\r\n />\r\n \r\n )\r\n }\r\n \r\n {\r\n const newThumbsDownState = !thumbsDownSelected;\r\n\r\n setThumbsDownSelected(newThumbsDownState);\r\n setThumbsUpSelected(false);\r\n setShowFeedback(newThumbsDownState);\r\n setShowThumbsUpThankYouContent(false);\r\n if (newThumbsDownState === true) {\r\n onThumbsDownSignal();\r\n } else {\r\n setShowThumbsDownThankYouContent(false);\r\n }\r\n }}\r\n >\r\n {\r\n thumbsDownSelected && (showFeedback || showThumbsDownThankYouContent) && (\r\n \r\n \r\n {\r\n showFeedback ? (\r\n {\r\n setShowBlocker(true);\r\n setFormOptionsInternal(formOptions);\r\n\r\n if (formOptions.takeScreenshot) {\r\n setBlockerText(i18n.getString(_TL_('Taking screenshot...')));\r\n }\r\n }}\r\n options={options}\r\n onDismiss={() => {\r\n setShowFeedback(false);\r\n setShowThumbsDownThankYouContent(false);\r\n }}\r\n />\r\n ) : (\r\n setShowThumbsDownThankYouContent(false)}\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\nThumbsUpDown.propTypes = {\r\n featureArea: PropTypes.string.isRequired,\r\n isTestEnv: PropTypes.bool.isRequired,\r\n onThumbsUpSignal: PropTypes.func,\r\n onThumbsDownSignal: PropTypes.func,\r\n containerName: PropTypes.string,\r\n};\r\n\r\nThumbsUpDown.defaultProps = {\r\n onThumbsUpSignal: _.noop,\r\n onThumbsDownSignal: _.noop,\r\n containerName: 'thumbsUpDown',\r\n};\r\n"],"names":["getAdCreatorSchema","scenario","name","arguments","length","undefined","value","activity","instrumentationScenarios","MMAConversion","scenarioName","scenarioValue","RSA","MMA","MSAN","MSANImage","CopilotDisplayAd","CopilotVideoAd","default","adCreatorScenarios","mockTrace","trace","noop","startSignal","stopSignal","signal","getAdCreatorInstrumentation","instrumentation","scenarioConfig","_ref","schema","addScenario","create","fileUploadActivity","fileUpload","smartEffectActivity","smartEffect","editImageActivity","editImage","editPlacementActivity","editPlacement","saveAdActivity","saveAd","websiteSuggestionActivity","websiteSuggestion","websiteSuggestionCarouselActivity","websiteSuggestionCarousel","smartCropActivity","smartCrop","manualCropActivity","manualCrop","teachingBubbleActivity","teachingBubble","viewAllPlacementsActivity","viewAllPlacements","feedbackActivity","feedback","addLogoActivity","addLogo","adCreatorScenario","getListOfEffectSettings","flattenedImageList","keys","reduce","effectList","effectSettings","effectKey","EffectChoiceKey","None","getImageCropStyles","cropperContainer","overflow","maxWidth","maxHeight","ImageCropWithBoundingBox","baseImage","cropSettings","onCropSettingsChanged","minCropSize","maxCropBox","aspectRatio","classes","useDefaultStyles","i18n","useContext","I18nContext","_useState","useState","_useState2","_slicedToArray","cropperInlineStyles","setCropperInlineStyles","boxHeight","useEntireImage","SourceWidth","SourceHeight","contentWidth","Width","contentHeight","Height","getResizeImageHeight","getCropperBoxHeight","_jsx","className","children","classnames","style","container","_","height","subContainer","ImageCropper","ariaLabel","getString","_TL_","minSize","maxSize","imageSource","Src","onCropperInitialized","jcrop","_jcrop$filter$constra","filter","constrain","minx","maxx","miny","maxy","width","marginTop","marginLeft","defaultProps","IMAGE_DIM","marginRight","getFullyShownImagesCount","imageDimension","itemWidth","Math","floor","getCarouselStyles","components","_ref$palette","palette","carouselParent","position","display","alignItems","disabledCarouselParent","pointerEvents","opacity","image","_ref2","classOverrides","_objectSpread","boxShadow","objectFit","imageContainer","_ref3","imageContainerLeftMargin","isCollapsible","overflowX","overflowY","flexGrow","imageParentContainer","_ref4","imageParentLeftOffset","numberOfImages","left","imageClickableContainer","_ref5","cursor","loadingMessageContainer","loadingText","fontSize","lineHeight","verticalAlign","panel","panelHeading","_ref6","panelTitle","_ref7","panelIcon","paddingBottom","fontFamily","content","panelHelpButton","imageHintRight","_ref8","background","right","imageHintLeft","_ref9","transform","paddleBtn","bottom","moreIcon","color","themeDarkAlt","seeAll","_ref10","whiteSpace","textOverflow","seeAllInHeader","themePrimary","backgroundColor","spinner","getBlockerStyle","parentContainer","_ref11","gap","border","accent","useBrandKitHeader","buildHtmlLink","href","text","concat","buildPolicyMessage","agreement","ImageWithRetry","alt","src","failureCount","useRef","onError","e","current","target","ImageSuggestionCarousel","images","onSelectImage","onSelectSeeAll","isLoading","isEmpty","messageInfo","title","helpTopic","selectable","showShimmer","allowToggleSelectable","onToggleSelectable","enablePolicyMessage","hideData","customClasses","showEllipsisWhenNoMoreImages","stylingOverrides","onOffsetChange","showViewAllInHeader","alwaysShowViewAll","showHeading","icon","onRenderImage","enableBrandKit","useBrandKit","setUseBrandKit","getCarouselStylesFinal","getFullyShownImagesCountFinal","initialImageContainerLeftMarginFinal","initialImageContainerLeftMargin","seeAllLinkText","offset","setOffset","_useState3","_useState4","hasDismissedMessage","setHasDismissedMessage","_useState5","_useState6","imageContainerWidth","setImageContainerWidth","imageContainerNode","_useState7","_useState8","panelOpen","setPanelOpen","useEffect","handleResize","offsetWidth","window","addEventListener","removeEventListener","measuredRef","useCallback","node","handleBrandKitToggle","displayedImageCount","noMoreResult","keyDownHandler","fullUrl","index","suggestionId","event","imageContainers","document","querySelectorAll","rightButton","querySelector","keyCode","ArrowUp","ArrowLeft","focus","ArrowDown","ArrowRight","Enter","Tab","shiftKey","stopPropagation","preventDefault","seeAllLink","useMemo","role","onClick","onKeyDown","toggleBrandKit","Button","appearance","size","StyleGuideFilled","StyleGuideRegular","_jsxs","Panel","Heading","Title","toggle","Glyphicon","glyph","HelpButton","topic","Toggle","label","inlineLabel","checked","onChange","leftIconButton","IconButton","Space","img","iconProps","iconName","styles","root","borderRadius","rightIconButton","paddleBtnRight","disabled","isSeeAllShown","PaddleBottomValue","arialHidden","id","map","thumbnailUrl","tabIndex","ellipsisIcon","FontIcon","onToggle","open","showLoadingShimmer","Skeleton","SkeletonItem","defaultExpanded","expanded","disabledToggleToolTip","showRightIconButton","showEllipsisIcon","showSeeAllLink","React","Collapse","ConditionalTooltipHost","condition","calloutProps","gapSpace","maximizeWidth","ref","message","MessageBar","messageBarType","type","onDismiss","Alert","level","dismissible","aspectRatioConfig","Image201x100","aspectRatioAsRatio","editorTitle","isLogo","Image200x100","Image191x100","Image4x1","Image1x1","Image1x2","Image178x100","Image169x100","Image153x100","Image150x100","Image133x100","Image124x100","Image120x100","Image300x250","Image728x90","Image160x600","Image300x600","Image120x600","Image468x60","Image336x280","Image250x250","Image180x150","Image970x250","Image234x60","Image970x90","Image320x50","Image300x50","Image320x480","Image480x320","Image320x100","Image216x36","Image168x28","Image120x20","Image172x100","Image155x100","Image93x100","Image57x100","Image122x100","Image159x100","Image180x100","Image233x100","getRatio","getAllowedAspectRatio","Type","getAspectRatio","allowedAspectRatio","getOriginalImageAspectRatio","round","convertAspectRatioDecimalToRatio","aspectRatioAsDecimal","convertAspectRatioToDecimal","aspectRatioRatio","DesignerEffects","BackgroundBlur","BackgroundSolidColor","EffectChoiceOrder","_defineProperty","MTSmartEffect","Blur","BackgroundColorSwap","SmartCrop","EffectChoiceMtSmartEffectMapping","getEditorTitle","imageType","titleKey","subTitle","getMediaEditorStyle","hasSubTitle","hasRightRail","footer","fabricPanelFixStyle","zIndex","commands","paddingTop","subTitleDivider","marginBottom","actionBtnContainer","mediaEditorRails","leftRail","rightRail","minWidth","MediaEditorPanelInternal","props","isOpen","onApply","disableCrop","mediaRepository","onRenderRightRailContent","isMMAV2Enabled","isPortrait","isThumbsUpDownEnabled","isTestEnv","onManualCropImage","onManualCropLogo","onRenderAllowedAspectRatioControl","disabledPivotItemKeys","customizedDefaultSelectedPivotItemKey","isImageFittingEnabled","permissions","isStock","panelWidth","InstrumentationContext","onDismissBtnClicked","messageState","setMessageState","disableApplyButton","setDisableApplyButton","updatedEffectSettings","setUpdatedEffectSettings","updatedCropSettings","setUpdatedCropSettings","_useState9","AltText","_useState10","updatedAltText","setUpdatedAltText","_useState11","_useState12","selectedImageType","setImageType","previewImageUrl","effectSrc","hasEffectSettingsChanged","hasCropSettingsChanged","onApplyBtnClicked","onRenderFooterContent","PrimaryButton","DefaultButton","ThumbsUpDown","featureArea","onThumbsDownSignal","onThumbsUpSignal","headerText","PanelType","custom","customWidth","closeButtonAriaLabel","isFooterAtBottom","layerProps","eventBubblingEnabled","MediaEditor","isPreloaded","MediaEditorPanel","key","_useNewValidImage","lastValidBaseImage","setLastValidBaseImage","state","isNewImage","isNewPlacement","useNewValidImage","getImageCropEditorStyles","description","margin","getCropTagsStyle","_ref$iconFontFamily","iconFontFamily","validCropTag","invalidCropTag","cropTagGroup","cropTag","tagString","tagIcon","validCropIcon","invalidCropIcon","CropTag","ratioConfig","currentCropSettings","setCropSettings","isValid","setIsValid","isValidForCrop","TooltipHost","CropTags","availableAspectRatios","configInfo","getRatioStringsForAudienceMMAV2","getRatioStrings","tags","ImageCropEditor","allowedAspectRatioFromProps","currentSettings","newCropSettings","manualCropLogMessage","setClarityTag","AdCreatorManualCropApplied","LoadingView","getLoadingViewStyles","UiBlocker","blocking","getImagePreviewStyles","defaultUIBlockerStyle","reactUIBlockerStyle","neutralLighterAlt","ImagePreview","loading","baseImageSrc","baseImageWidth","resizeImageHeight","SourceX","SourceY","CroppedImageView","originalWidth","getEffectPickerStyles","fontWeight","labelWrapper","WebkitLineClamp","WebkitBoxOrient","innerField","boxSizing","commonConfig","imageSize","EffectOptions","imageSrc","localizeKey","disclaimerText","thresholdErrorText","showDisclaimerOnChecked","effectChoiceGroupOptions","memo","order","effectType","getColorPickerStyles","showColorPicker","neutralLighter","padding","borderWidth","borderStyle","borderColor","neutralSecondary","overlay","top","WrappedColorPicker","updateColor","hideColorPicker","FocusLock","onExit","focusFirstItemOnMount","ColorPickerWithClickOutside","changedColor","alphaType","showPreview","outsideClickIgnoreClass","strings","hex","red","green","blue","alpha","mtColorFormat","convertColorToRGBFormat","r","g","b","BackgroundColorPicker","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","getSwatchColorCells","updateColorInternal","colorObj","colorObjStr","cell","clearTimeout","setTimeout","updateSwatchColor","SwatchColorPicker","cellHeight","cellWidth","cellShape","colorCells","onColorChanged","selectedId","columnCount","tableCell","getColorGridCellStyles","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","options","BackgroundBlurPicker","onBlurChange","defaultValue","backgroundBlur","updateBlur","newBlur","Slider","max","min","onChanged","showValue","paddingLeft","SecondaryEffectPicker","EffectPicker","unavailableEffectsConfig","isNotSupported","severeError","severeWarning","isColorThresholdError","fieldProps","render","tooltipTextKey","original","hasTooltip","getImageEffectEditorStyles","altText","LoadingTextConfig","ImageEffectEditor","selectedEffectKey","onEffectChange","onAltTextChange","allEffectSrcs","showAltTextInput","get","resizeImageHeightToPreview","loadingTextKey","TextField","maxLength","GeneralErrorMessagePerEffect","EffectErrorCodeMessageMapping","EFFECT_RESTORE_FAILURE","BACKGROUND_COLOR_THRESHOLD_FAILURE","EffectErrorCodes","findSrcByDesignerEffect","newDesignerEffect","find","Resource","getUpdatedEffectOptions","updatedMtAsset","prevEffectOptions","effectOptionsUpdates","DefaultBgColor","BgBlurLevel","prevState","updates","useEffectSettings","allSrcs","initialModel","model","chosenImage","buildEffectImageModel","setModel","changeImageSrc","generatePromise","newEffectKey","oldEffectKey","modelEffectOptions","effectKeyToRestoreWhenError","isSevereError","isSevereWarning","then","errMsg","throwError","assets","defaultAsset","Show","Error","prev","newEffectOptions","imageLoadResolve","imageLoadReject","imageLoadPromise","Promise","resolve","reject","nativeImage","Image","onload","onabort","onerror","preLoadImageAsync","catch","err","tapCatch","code","getEffectErrorMessage","MessageBarType","warning","onEffectOptionsChange","_ref8$mtEffectOptions","mtEffectOptions","_ref8$modelEffectOpti","generateEffect","imageUrl","smartEffects","smartEffectName","smartEffectOptions","first","effectImage","onEffectKeyChange","retVal","onDesignerEffectImageChange","newDesignerSrc","onBackgroundColorChange","newBackgroundColor","ManualBgColor","newBlurAmount","ManualBgBlurLevel","prefetchData","effectKeyToPrefetch","effectOptionsToPrefetch","preloadEffects","Object","forEach","effectChoice","getPivotStyle","commonLinkStyles","link","linkIsSelected","themeLighterAlt","neutralPrimary","PivotView","items","pivotItems","itemKey","PivotItem","Pivot","linkFormat","PivotLinkFormat","tabs","onLinkClick","item","PivotItemKey","Crop","DefaultSelectedPivotItemKey","selectedPivotItemKey","setSelectedPivotItemKey","_useEffectSettings","loadingEffect","effectImageWithAltText","_useCropSettings","setCurrentCropSettings","useCropSettings","_useCropSettings2","currentAllowedAspectRatio","setCurrentAllowedAspectRatio","smartEffectsPivot","cropPivot","pivot","getPivotConfig","onAllowedAspectRatioChange","newImageType","newAllowedAspectRatio","choice","newValue","BaseValidator","_createClass","propertySchema","_classCallCheck","this","ignoreInvalidProperty","requiredField","enableCheck","internalValidate","apply","TypeValidateConfig","object","number","num","Number","minimum","maximum","string","validateBeam","RegistedHandlers","propertyValue","beams","split","ConfiguredValidators","_BaseValidator","TypeValidator","_this","_callSuper","_inherits","validateFunc","EnumValidator","enum","CustomValidator","EffectKeyValidator","EffectSettingsAlias","imageAssetSerializeSchema","properties","alias","nullable","invertSchemaAlias","schemaProperties","newKey","newVal","imageAssetDeserializeSchema","shouldFilterOut","processObjectWithSchema","obj","validatePropertyFunc","_validatePropertyFunc","result","childkeySchema","validateDeserializeProperty","extractInfoForSerialization","i","instance","ValidatorClass","childResult","validate","config","validateProperty","extractInfoForDeserialization","buildImageAssetMetadataToSave","assetModel","metaObject","placementMeta","_ref2$effectOptions","convertStateToMetadata","serializeImageAssetMetadata","isBulkUpsert","serialized","stringifySync","replace","encodeURIComponent","deserializeImageAssetMetadata","metaString","decoded","RegExp","metaObj","parseSync","metaObjCopy","cache","AdGenerationDataService","cid","aid","_ref$cmpId","cmpId","oDataConfig","path","odataPath","oDataToken","odataToken","oDataTokenType","applicationName","odata","landingPageUrl","_ref2$pageNumber","pageNumber","_ref2$pageSize","pageSize","_ref2$forceInternalSc","forceInternalScrapingService","_ref2$minimumResoluti","minimumResolution","headlines","descriptions","criteria","push","Name","Value","endpoint","data","url","source","WithThumbnail","MinWidth","MinHeight","paging","Page","PageSize","rankingCriteria","Criteria","response","ImageWip","Wip","Images","ImagePaging","Paging","PageNumber","TotalCount","_ref3$pageNumber","_ref3$pageSize","_ref3$forceInternalSc","_ref3$minimumResoluti","_this$createRecommend","createRecommendRequestData","generateUrlWithScope","requestBody","post","formatRawReponse","serializedOptions","fetchData","wip","Assets","methodName","GenerateImageDataModel","_GenerateDataModel","assetType","fileFormat","GenerateDataModel","filters","crop","jobId","JobId","BaseImageUrl","Filters","Output","MediaType","GenerateManualCropDataModel","_GenerateImageDataMod","x","y","scale_x","scale_y","GenerateSmartCropDataModel","_GenerateImageDataMod2","placementSettings","Param","ExpectedCrops","AspectRatio","GenerateSmartEffectDataModel","_GenerateImageDataMod3","MediaRepository","dataService","createGenerateRequestWithPolling","timerIds","resetTimers","intervalId","clearInterval","timeoutId","generate","setInterval","newResponse","error","RECOMMEND_POLL_INTERVAL","RecommendationTimeoutError","SuggestionPoller","hasOfflineProcessingFinished","offlineProccesingTimeoutId","jobCompleteCallback","maxTimeout","timeout","logger","recommendPromiseBeforePolling","cancel","callback","_ref$forceInternalScr","recommend","_ref2$enableOfflinePo","enableOfflinePollingDelay","_ref2$additionalCallb","additionalCallback","createAsyncToken","on","onSuccess","doesResponseHaveImages","startPollingJob","handleError","_this2","pollingCount","stopUpdateInterval","cb","isResponseNotEmpty","hasMoreImagesToFetch","_response$ImagePaging","SuggestionStatus","EmptyURL","InvalidURL","ServerError","FetchInProgress","FetchSucceed","SelectSuggestionError","SelectSuggestionComplete","mapSuggestionResponseToState","status","carousel","isSubdomainScraping","suggestion","emptyURL","invalidURL","isTimeout","unKnownError","inProgress","ImageUrl","ThumbnailUrl","SuggestionId","hasMore","isError","mapSuggestionResponseToCarouselState","returnObject","getPreviewRightRailStyle","combinedStyles","getCommonPreviewContainerStyles","getCrudAdImagePreviewStyles","getMsanPreviewStyles","white","rightRailRoot","rightRailRootMMA","getMMAPreviewStyles","PreviewCarouselRightRailWrapper","imageListForPreview","previewTexts","previewLogo","imageListLength","genericImage","activityLogger","PreviewCarousel","isMultimediaAd","isMSANBoostEnabled","isBoost200x100ImageEnabled","adPreviewConfig","isBoostNewAspectRatioSupportEnabled","previewCarouselProps","imageList","disablePlacementActions","totalImageListCount","isAdCreatorEnabled","isMultiMediaAdsPhase2Enabled","IsMultiMediaAdsPhase2Enabled","PreviewSingleRightRailWrapper","imageObj","previewTitle","previewSettings","Preview","isCombinedMsanAndMmaAspectRatios","placementType","opacityChangeEnabled","placement","getThumbsUpDownStyles","thumbsUpDown","thumbsUpDownAddImage","innerWidth","calloutRoot","ComponentSettings","getFeedbackFormStyles","checkboxOptions","feedbackAction","float","feedbackFormRoot","FeedbackForm","onSubmit","initialOptionsState","optionsState","setOptionsState","screenshotState","setScreenshotState","commentState","setCommentState","enableSubmit","setEnableSubmit","Text","block","variant","Checkbox","otherValues","multiline","placeholder","ReactTemplate","a","Link","infoText","template","comments","takeScreenshot","getIconStyles","ThankYouIcon","viewBox","fill","xmlns","d","fillRule","clipRule","x1","y1","x2","y2","gradientUnits","stopColor","ThankYouContent","ThumbsUpDownOCVDataService","_OCVDataService","OCVDataService","sendFeedbackInternal","screenshotGenerationPromise","formOptions","onFinishTakeScreenshot","onFinishSendRequest","clientFeedbackId","uuidv4","comment","serializeComments","complianceChecks","authenticationType","ageGroup","telemetry","html2canvas","body","foreignObjectRendering","logging","canvas","toDataURL","sendFeedback","appId","containerName","thumbsUpSelected","setThumbsUpSelected","thumbsDownSelected","setThumbsDownSelected","showFeedback","setShowFeedback","showThumbsUpThankYouContent","setShowThumbsUpThankYouContent","showThumbsDownThankYouContent","setShowThumbsDownThankYouContent","showBlocker","setShowBlocker","_useState13","_useState14","blockerText","setBlockerText","_useState15","_useState16","formOptionsInternal","setFormOptionsInternal","_useState17","_useState18","hasOngoingRequest","setHasOngoingRequest","rootHovered","iconHovered","newThumbsUpState","Callout","directionalHint","DirectionalHint","bottomRightEdge","calloutMain","newThumbsDownState"],"sourceRoot":""}\r\n {i18n.getString(_TL_('Leave feedback'))}\r\n
\r\n