\r\n ) : null;\r\n}\r\n\r\nAdPlacementsGridPreview.propTypes = {\r\n cellsNumberPerRow: PropTypes.number.isRequired,\r\n totalCount: PropTypes.number.isRequired,\r\n onRenderCell: PropTypes.func.isRequired,\r\n cellHeight: PropTypes.number,\r\n};\r\n\r\nAdPlacementsGridPreview.defaultProps = {\r\n cellHeight: 482,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Panel, DefaultButton } from '@bingads-webui-react/fabric-control';\r\nimport { AdPlacementsGridPreview } from './ad-placements-grid-preview';\r\nimport { getPanelStyle } from './ad-placements-grid-preview-style';\r\n\r\nexport function AdPlacementsGridPreviewPanel({\r\n isOpen,\r\n onDismiss,\r\n className,\r\n cellsNumberPerRow,\r\n totalCount,\r\n onRenderCell,\r\n cellHeight,\r\n}) {\r\n const i18n = useContext(I18nContext);\r\n const onRenderFooterContent = React.useCallback(\r\n () => (\r\n
\r\n {i18n.getString(_TL_('Close'))}\r\n
\r\n ),\r\n [i18n, onDismiss]\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nAdPlacementsGridPreviewPanel.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n onDismiss: PropTypes.func.isRequired,\r\n cellsNumberPerRow: PropTypes.number.isRequired,\r\n totalCount: PropTypes.number.isRequired,\r\n onRenderCell: PropTypes.func.isRequired,\r\n className: PropTypes.string,\r\n cellHeight: PropTypes.number,\r\n};\r\n\r\nAdPlacementsGridPreviewPanel.defaultProps = {\r\n className: '',\r\n cellHeight: 482,\r\n};\r\n","export const ROTATION_OPTIONS = Object.freeze({\r\n OPTIMIZED_FOR_CLICKS: 'OptimizeForClicks',\r\n ROTATE_ADS_EVENLY: 'RotateAdsEvenly',\r\n});\r\n\r\nexport const ROTATION_OPTION_TO_TEXT = Object.freeze({\r\n [ROTATION_OPTIONS.OPTIMIZED_FOR_CLICKS]: _TL_('Optimize - prioritize ads that perform well'),\r\n [ROTATION_OPTIONS.ROTATE_ADS_EVENLY]: _TL_('Rotate ads more evenly - include all ads, even those with a lower CTR'),\r\n});\r\n\r\nexport const RotationItems = [\r\n { id: ROTATION_OPTIONS.OPTIMIZED_FOR_CLICKS, text: ROTATION_OPTION_TO_TEXT[ROTATION_OPTIONS.OPTIMIZED_FOR_CLICKS] },\r\n { id: ROTATION_OPTIONS.ROTATE_ADS_EVENLY, text: ROTATION_OPTION_TO_TEXT[ROTATION_OPTIONS.ROTATE_ADS_EVENLY] },\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 { Stack } from '@bingads-webui-react/fabric-control';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { RadioGroupLite } from '@bingads-webui-react/primitive-validation-fluent';\r\nimport { Radio } from '@fluentui/react-components';\r\n\r\nimport { ROTATION_OPTIONS, RotationItems } from './constants';\r\n\r\nexport const ValidatedAdRotation = ({ value, field, disableOptions }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n
\r\n \r\n \r\n {RotationItems.map(option => (\r\n \r\n ))\r\n }\r\n \r\n \r\n \r\n {i18n.getString(_TL_('This ad rotation setting will be ignored if you use an automated bidding bid strategy, as automated bidding prioritizes better-performing ads.'))}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nValidatedAdRotation.propTypes = {\r\n value: PropTypes.string,\r\n field: PropTypes.string.isRequired,\r\n disableOptions: PropTypes.bool,\r\n};\r\n\r\nValidatedAdRotation.defaultProps = {\r\n value: ROTATION_OPTIONS.OPTIMIZED_FOR_CLICKS,\r\n disableOptions: false,\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 { TextTitle, getPanelErrorProps, ValidatedPanel } from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { ValidatedAdRotation } from './validated-ad-rotation';\r\nimport adRotationIcon from './ad-rotation.svg';\r\nimport { ROTATION_OPTION_TO_TEXT } from './constants';\r\n\r\nexport const AdRotationSection = ({ data, disableOptions, ...rest }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n }\r\n attentionBeaconProps={{ getExtraProps: getPanelErrorProps }}\r\n {...rest}\r\n >\r\n \r\n {i18n.getString(_TL_('Which ads do you want to show?'))}\r\n \r\n {\r\n data &&\r\n \r\n }\r\n \r\n );\r\n};\r\n\r\nAdRotationSection.propTypes = {\r\n data: PropTypes.shape({\r\n AdRotation: PropTypes.string,\r\n }).isRequired,\r\n disableOptions: PropTypes.bool,\r\n};\r\n\r\nAdRotationSection.defaultProps = {\r\n disableOptions: false,\r\n};\r\n","export const assetLibraryLegacyI18nMap = {\r\n ImageExperience_MultipleUpload_SizeValidationFailTemplate: _TL_('One or more images are smaller than the required minimum size ({{width}} x {{height}}).'),\r\n ImageExperience_MultipleUpload_SizeValidationFailTemplate_WithoutDimension: _TL_('One or more images are smaller than the required minimum size.'),\r\n ImageExperience_SizeValidationFailTemplate_WithDetail: _TL_('The resized image is smaller than the required minimum size ({{width}} x {{height}}). The image is resized if the file size is too big.'),\r\n ImageExperience_SizeValidationFailTemplate_WithDetail_WithoutDimension: _TL_('The resized image is smaller than the required minimum size. The image is resized if the file size is too big.'),\r\n ImageExperience_SizeValidationFailTemplate: _TL_('The image is smaller than the required minimum size ({{width}} x {{height}}).'),\r\n ImageExperience_SizeValidationFailTemplate_WithoutDimension: _TL_('The image is smaller than the required minimum size.'),\r\n ImageExperience_Error_AnimatedImageNotAllowed: _TL_('Animated images are not allowed.'),\r\n ImageExperience_Error_ImageLoadError: _TL_('That file type isn’t supported. Please select a different file.'),\r\n ImageExperience_Error_CampaignServiceMediaDataEncodingInvalid: _TL_('Data in one of the media entities is not valid format.'),\r\n ImageExperience_Error_CampaignServiceMediaFormatNotSupported: _TL_(\"That file type isn't supported. Please select a different file.\"),\r\n ImageExperience_Error_InternalError: _TL_(\"We've encountered an error and can't continue.\"),\r\n};\r\n","import Promise from 'bluebird';\r\nimport { useState, useMemo, useCallback, useEffect } from 'react';\r\nimport _ from 'underscore';\r\n\r\nimport {\r\n validateImageSizeAsync,\r\n validateImageWithDimension,\r\n getSmartCroppedImagesAsync,\r\n getImageValidationErrorMessage,\r\n} from '@bingads-webui-campaign/image-experience-utils';\r\nimport { constants, newImageFromMTObject, addCropSettingsToCreativeImage } from '@bingads-webui-campaign-react/image-experience-model';\r\nimport { StockImageDataService } from '@bingads-webui-campaign/stock-image-data-service';\r\nimport { InvestImageDataService } from '@bingads-webui-campaign/invest-image-data-service';\r\nimport { VIEWS } from '@bingads-webui-campaign-react/add-media-panel-crud-ad';\r\nimport { buildLegacyI18n } from '@bingads-webui/build-legacy-i18n';\r\nimport { isCopilotRegionRestricted } from '@bingads-webui-react/copilot-utils';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport {\r\n SocialMediaRepository,\r\n SocialMediaDataSource,\r\n ImageRepository,\r\n} from '@bingads-webui-campaign-react/image-experience';\r\nimport { MediaRepository } from '@bingads-webui-campaign/media-repository';\r\nimport { stringifySync, parseSync } from '@bingads-webui/safe-json';\r\n\r\n\r\nimport { assetLibraryLegacyI18nMap } from './legacy-i18n-map';\r\n\r\nconst imageOption = constants.defaultImageOption;\r\n\r\nconst removeNullUndefined = (obj) => {\r\n const newObj = {};\r\n _.keys(obj).forEach((key) => {\r\n const value = obj[key];\r\n if (_.isObject(obj[key])) {\r\n newObj[key] = removeNullUndefined(value);\r\n } else if (value !== null && value !== undefined) {\r\n newObj[key] = value;\r\n }\r\n });\r\n return newObj;\r\n};\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nconst serializeData = (data) => {\r\n const serialized = stringifySync(removeNullUndefined(data));\r\n return serialized.replace(/,/g, encodeURIComponent(','));\r\n};\r\n\r\nconst processNewlyAddedImages = ({\r\n imgObjMT,\r\n imageSource,\r\n optionalCallback,\r\n isDisplayAds,\r\n isPortraitImage,\r\n isAudienceAdSmartCropEnabled,\r\n mediaRepository,\r\n isBrandKit = false,\r\n}) => {\r\n const postValidationError = validateImageWithDimension(\r\n imgObjMT.Width,\r\n imgObjMT.Height,\r\n null,\r\n false,\r\n imageOption,\r\n false,\r\n false,\r\n isDisplayAds,\r\n isPortraitImage,\r\n false,\r\n false,\r\n false,\r\n false,\r\n false,\r\n false,\r\n isBrandKit\r\n );\r\n\r\n if (postValidationError) {\r\n postValidationError.isDueToResizing = true;\r\n\r\n throw postValidationError;\r\n }\r\n\r\n optionalCallback && optionalCallback(); // eslint-disable-line no-unused-expressions\r\n\r\n const imageObject = newImageFromMTObject(imgObjMT, imageSource);\r\n const croppedImagePlacementsPromise = getSmartCroppedImagesAsync({\r\n mediaRepository,\r\n originalImageToCrop: imageObject,\r\n isMultimediaAd: false,\r\n isMultimediaAdinMSANEnabled: false,\r\n imageOption,\r\n aspectRatioOption: constants.defaultAspectRatioOption,\r\n isDisplayAds,\r\n isPortraitImage,\r\n isAudienceAdSmartCropEnabled,\r\n });\r\n\r\n return croppedImagePlacementsPromise;\r\n};\r\n\r\nconst genericErrorMsg = _TL_('We\\'ve encountered an error and can\\'t continue.');\r\n\r\nexport const useAssetLibraryImagePicker = ({\r\n cid,\r\n aid,\r\n oDataConfig,\r\n onNewImageSelected,\r\n i18n,\r\n permissions,\r\n isDisplayAds,\r\n isPortraitImage,\r\n serverContext,\r\n isAllUploadFlowImageUpscaleEnabled,\r\n isBrandKit = false,\r\n}) => {\r\n const [imagePickerError, setImagePickerError] = useState('');\r\n const [isUploadImageUpscaleEnabled, setIsUploadImageUpscaleEnabled] = useState(false);\r\n\r\n useEffect(() => {\r\n if (isAllUploadFlowImageUpscaleEnabled) {\r\n isCopilotRegionRestricted({\r\n feature: 'AssetLibraryImagePicker',\r\n permissions,\r\n serverContext,\r\n })\r\n .then((isRestricted) => {\r\n if (!isRestricted) {\r\n setIsUploadImageUpscaleEnabled(isAllUploadFlowImageUpscaleEnabled);\r\n }\r\n });\r\n }\r\n }, [isAllUploadFlowImageUpscaleEnabled, permissions, serverContext]);\r\n\r\n const errorValidationI18n = useMemo(\r\n () => buildLegacyI18n(i18n, [assetLibraryLegacyI18nMap])\r\n , [i18n]\r\n );\r\n\r\n const minSize = useMemo(() => constants.getMinimumSizeForImage(null, false, imageOption, false, false, isDisplayAds, isPortraitImage), [isDisplayAds, isPortraitImage]);\r\n\r\n const minUploadSize = useMemo(() => {\r\n if (isUploadImageUpscaleEnabled && minSize.length > 1 && minSize[0] >= 352 && minSize[0] <= 703 && minSize[1] >= 184 && minSize[1] <= 368) {\r\n return [352, 184]; // It's a half of constants.DefaultImageMinimumSize 703x368\r\n }\r\n return [];\r\n }, [isUploadImageUpscaleEnabled, minSize]);\r\n\r\n const supportImageUpscale = useMemo(() => (isUploadImageUpscaleEnabled && !_.isEmpty(minUploadSize)), [isUploadImageUpscaleEnabled, minUploadSize]);\r\n\r\n const setImagePickerErrorWithErrorCodeError = useCallback((e) => {\r\n setImagePickerError(getImageValidationErrorMessage(e, errorValidationI18n) || i18n.getString(genericErrorMsg));\r\n }, [errorValidationI18n, i18n]);\r\n\r\n const clearImagePickerError = useCallback(() => {\r\n setImagePickerError('');\r\n }, []);\r\n\r\n const customMediaSourceConfig = useCallback(({ addMediaConfig }) => {\r\n let mediaSourceConfig = addMediaConfig;\r\n\r\n if (!permissions.IsSocialMediaImagesEnabled) {\r\n mediaSourceConfig = _.omit(mediaSourceConfig, VIEWS.SocialMedia);\r\n }\r\n\r\n return mediaSourceConfig;\r\n }, [\r\n permissions,\r\n ]);\r\n\r\n const imageRepository = useMemo(() => new ImageRepository(cid, aid, oDataConfig), [\r\n cid,\r\n aid,\r\n oDataConfig,\r\n ]);\r\n\r\n const stockImageDataService = useMemo(() => new StockImageDataService({\r\n cid,\r\n aid,\r\n oDataConfig,\r\n controller: 'StockImages',\r\n }), [\r\n cid,\r\n aid,\r\n oDataConfig,\r\n ]);\r\n\r\n const investImageDataService = useMemo(() => new InvestImageDataService({ cid, aid }), [cid, aid]);\r\n\r\n const socialMediaRepository = useMemo(() => new SocialMediaRepository({\r\n cid,\r\n aid,\r\n oDataConfig,\r\n }), [\r\n cid,\r\n aid,\r\n oDataConfig,\r\n ]);\r\n\r\n const socialMediaDataSource = useMemo(() => new SocialMediaDataSource({\r\n repository: socialMediaRepository,\r\n }), [\r\n socialMediaRepository,\r\n ]);\r\n\r\n const mediaRepository = useMemo(() => new MediaRepository({\r\n cid, aid, oDataConfig,\r\n }), [cid, aid, oDataConfig]);\r\n\r\n const isAudienceAdSmartCropEnabled = _.result(permissions.dynamic, 'AudienceAdSmartCrop', false);\r\n\r\n // don't have a great way to test uploading through webdriver right now\r\n // looking into it\r\n /* istanbul ignore next */\r\n const uploadImage = useCallback(({ imageData, updateCurrentProgress, name }) => { // eslint-disable-line arrow-body-style, max-len\r\n return validateImageSizeAsync(imageData, null)\r\n .then(() => imageRepository.uploadImageAsync(\r\n imageData,\r\n null,\r\n updateCurrentProgress,\r\n imageOption,\r\n name\r\n ))\r\n .then((response) => {\r\n if (!response || !response.imageId) {\r\n throw new Error(response && response[0] && response[0].Code);\r\n }\r\n return response;\r\n });\r\n }, [\r\n imageRepository,\r\n ]);\r\n\r\n // don't have a great way to test uploading through webdriver right now\r\n // looking into it\r\n /* istanbul ignore next */\r\n const processUploadedImage = useCallback(({ imageId, index, updateCurrentProgress }) => {\r\n const callback = () => updateCurrentProgress(index, 1);\r\n const imageSource = constants.imageSources.Upload;\r\n\r\n return imageRepository.getImageByIdAsync(imageId)\r\n .then(imgObjMT => processNewlyAddedImages({\r\n imgObjMT,\r\n imageSource,\r\n optionalCallback: callback,\r\n isDisplayAds,\r\n isPortraitImage,\r\n mediaRepository,\r\n isAudienceAdSmartCropEnabled,\r\n isBrandKit,\r\n }))\r\n .then((croppedImagePlacements) => {\r\n onNewImageSelected([croppedImagePlacements]);\r\n if (supportImageUpscale) {\r\n return _.first(croppedImagePlacements);\r\n }\r\n return null;\r\n });\r\n }, [imageRepository, isAudienceAdSmartCropEnabled, isDisplayAds, isPortraitImage, mediaRepository, onNewImageSelected, supportImageUpscale]);\r\n\r\n const onProcessUploadComplete = useCallback((args = []) => {\r\n const upscaledImages = _.filter(args, item => _.result(item, 'isImageUpscaled') === true);\r\n const count = upscaledImages.length;\r\n\r\n if (count === 1) {\r\n const imageName = _.get(upscaledImages, ['0', 'text']);\r\n if (imageName) {\r\n notificationApi.showInfo(i18n.getString(_TL_('We upscaled {{fileName}} to meet the minimum required file size. Please note that you can also upload a higher quality image if needed.'), { fileName: imageName }));\r\n }\r\n } else if (count > 1) {\r\n notificationApi.showInfo(i18n.getString(_TL_('We upscaled {{fileCount}} images to meet the minimum required file size. Please note that you can also upload higher quality images if needed.'), { fileCount: count }));\r\n }\r\n }, [i18n]);\r\n\r\n const addImageByUrl = useCallback((\r\n imageUrl,\r\n imageSource = constants.imageSources.WebsiteCarousel\r\n // eslint-disable-next-line arrow-body-style\r\n ) => {\r\n return validateImageSizeAsync(imageUrl, null, false, imageOption)\r\n .then(() => (\r\n imageRepository.bulkSaveImagesByUrl([{ url: imageUrl }])\r\n .then((ids) => {\r\n if (_.isObject(_.first(ids))) {\r\n throw new Error(ids[0].code);\r\n }\r\n\r\n return ids[0];\r\n })\r\n ))\r\n .then(id => imageRepository.getImageByIdAsync(id))\r\n .then(imgObjMT => processNewlyAddedImages({\r\n imgObjMT,\r\n imageSource,\r\n isDisplayAds,\r\n isPortraitImage,\r\n mediaRepository,\r\n isAudienceAdSmartCropEnabled,\r\n isBrandKit,\r\n }))\r\n .then((croppedImagePlacements) => {\r\n onNewImageSelected([croppedImagePlacements]);\r\n return {\r\n processedImage: croppedImagePlacements,\r\n };\r\n })\r\n .catch((e) => {\r\n setImagePickerErrorWithErrorCodeError(e);\r\n\r\n return {\r\n errorMessage: getImageValidationErrorMessage(e, errorValidationI18n) || i18n.getString(genericErrorMsg),\r\n };\r\n });\r\n }, [imageRepository, isDisplayAds, isPortraitImage, mediaRepository, isAudienceAdSmartCropEnabled, onNewImageSelected, setImagePickerErrorWithErrorCodeError, errorValidationI18n, i18n]);\r\n\r\n\r\n const addCreatives = useCallback(({ creativeData }) => {\r\n const getMTImages = async (ids) => {\r\n const images = await Promise.all(ids.map(id => imageRepository.getImageByIdAsync(id)));\r\n return images;\r\n };\r\n\r\n const getImages = async (imgObjsMT) => {\r\n const images = await Promise.all(imgObjsMT.map(imgObjMT => addCropSettingsToCreativeImage(imgObjMT)));\r\n return images;\r\n };\r\n\r\n // save original image first.\r\n const originalImageUrls = _.map(creativeData, (creative) => {\r\n const { template } = creative || {};\r\n\r\n const { image } = template || {};\r\n\r\n return { url: image.url };\r\n });\r\n\r\n\r\n return imageRepository.bulkSaveImagesByUrl(originalImageUrls)\r\n .then(ids => Promise.all(ids.map(id => imageRepository.getImageByIdAsync(id))))\r\n .then(images => creativeData.map((creative, index) => {\r\n const { template } = creative || {};\r\n\r\n // eslint-disable-next-line no-param-reassign\r\n creative.image = images[index].Url;\r\n template.image.url = images[index].Url;\r\n\r\n return {\r\n url: creative.url,\r\n metadata: serializeData(creative),\r\n baseId: images[index].Id,\r\n sourceType: 'AIGenerated',\r\n };\r\n }))\r\n .then(args => imageRepository.bulkSaveImagesByUrl(args))\r\n .then((ids) => {\r\n const error = _.find(ids, id => _.isObject(id));\r\n if (error) {\r\n throw new Error(error.code);\r\n }\r\n\r\n return ids;\r\n })\r\n .then(getMTImages)\r\n .then(getImages);\r\n }, [imageRepository]);\r\n\r\n const getStockImages = useCallback(args => stockImageDataService.getStockImages(args), [\r\n stockImageDataService,\r\n ]);\r\n\r\n const getInvestImages = useCallback(args => investImageDataService.getInvestAssets(args), [\r\n investImageDataService,\r\n ]);\r\n\r\n const onSelectStockImage = useCallback(({ selectedImageId }) => {\r\n const imageSource = constants.imageSources.Stock;\r\n\r\n return stockImageDataService.saveStockImage({\r\n stockImageId: selectedImageId,\r\n stockImageVendorId: 'ShutterStock',\r\n })\r\n .then(({ value }) => imageRepository.getImageByIdAsync(value))\r\n .then(imgObjMT => processNewlyAddedImages({\r\n imgObjMT,\r\n imageSource,\r\n isDisplayAds,\r\n isPortraitImage,\r\n mediaRepository,\r\n isAudienceAdSmartCropEnabled,\r\n }))\r\n .then((croppedImagePlacements) => {\r\n onNewImageSelected([croppedImagePlacements]);\r\n })\r\n .catch((e) => {\r\n setImagePickerErrorWithErrorCodeError(e);\r\n });\r\n }, [stockImageDataService, imageRepository, isDisplayAds, isPortraitImage, mediaRepository, isAudienceAdSmartCropEnabled, onNewImageSelected, setImagePickerErrorWithErrorCodeError]);\r\n\r\n const onImageSelected = useCallback((image, imageSource = constants.imageSources.Existing) => {\r\n const { id } = image || {};\r\n\r\n if (id) {\r\n return imageRepository.getImageByIdAsync(id)\r\n .then((imgObjMT) => {\r\n const { Metadata } = imgObjMT;\r\n\r\n let uriDecodedMetaData = Metadata;\r\n\r\n // while saving we only replace the ',' symbol with %2C. So we need to replace it back to ','\r\n if (Metadata) {\r\n uriDecodedMetaData = Metadata.replace(/%2C/g, ',');\r\n }\r\n\r\n const decodedMetadata = parseSync(uriDecodedMetaData);\r\n\r\n // if it is a display plus creative return the image\r\n if (decodedMetadata && decodedMetadata.template) {\r\n return {\r\n image: addCropSettingsToCreativeImage(imgObjMT),\r\n creativeData: {\r\n creativeMeta: decodedMetadata,\r\n creativeId: id,\r\n },\r\n };\r\n }\r\n\r\n return processNewlyAddedImages({\r\n imgObjMT,\r\n imageSource,\r\n isDisplayAds,\r\n isPortraitImage,\r\n mediaRepository,\r\n isAudienceAdSmartCropEnabled,\r\n isBrandKit,\r\n });\r\n })\r\n .then((croppedImagePlacements) => {\r\n onNewImageSelected([croppedImagePlacements]);\r\n })\r\n .catch((e) => {\r\n setImagePickerErrorWithErrorCodeError(e);\r\n });\r\n }\r\n\r\n return Promise.resolve();\r\n }, [imageRepository, isAudienceAdSmartCropEnabled, isDisplayAds, isPortraitImage, mediaRepository, onNewImageSelected, setImagePickerErrorWithErrorCodeError]);\r\n\r\n const onImagesSelected = useCallback((imageIds, imageSource = constants.imageSources.Existing) => {\r\n const addImagePromises = [];\r\n\r\n _.each(imageIds, (imageId) => {\r\n addImagePromises.push(imageRepository.getImageByIdAsync(imageId)\r\n .then(((imgObjMT) => {\r\n const { Metadata } = imgObjMT;\r\n\r\n let uriDecodedMetaData = Metadata;\r\n\r\n // while saving we only replace the ',' symbol with %2C. So we need to replace it back to ','\r\n if (Metadata) {\r\n uriDecodedMetaData = Metadata.replace(/%2C/g, ',');\r\n }\r\n\r\n const decodedMetadata = parseSync(uriDecodedMetaData);\r\n\r\n // if it is a display plus creative return the image\r\n if (decodedMetadata && decodedMetadata.template) {\r\n return {\r\n image: addCropSettingsToCreativeImage(imgObjMT),\r\n creativeData: {\r\n creativeMeta: decodedMetadata,\r\n creativeId: imageId,\r\n },\r\n };\r\n }\r\n\r\n return processNewlyAddedImages({\r\n imgObjMT,\r\n imageSource,\r\n isDisplayAds,\r\n isPortraitImage,\r\n mediaRepository,\r\n isAudienceAdSmartCropEnabled,\r\n isBrandKit,\r\n });\r\n })));\r\n });\r\n\r\n return Promise.all(addImagePromises)\r\n .then(processedImages => onNewImageSelected(processedImages))\r\n .catch((e) => {\r\n setImagePickerErrorWithErrorCodeError(e);\r\n });\r\n }, [imageRepository, isAudienceAdSmartCropEnabled, isDisplayAds, isPortraitImage, mediaRepository, onNewImageSelected, setImagePickerErrorWithErrorCodeError]);\r\n\r\n return {\r\n imagePickerError,\r\n setImagePickerError: setImagePickerErrorWithErrorCodeError,\r\n clearImagePickerError,\r\n uploadImage,\r\n processUploadedImage,\r\n onProcessUploadComplete,\r\n minSize,\r\n minUploadSize,\r\n supportImageUpscale,\r\n addImageByUrl,\r\n addCreatives,\r\n getStockImages,\r\n getInvestImages,\r\n onSelectStockImage,\r\n onImageSelected,\r\n socialMediaDataSource,\r\n customMediaSourceConfig,\r\n onImagesSelected,\r\n };\r\n};\r\n","import { useState } from 'react';\r\nimport { VIEWS } from '@bingads-webui-campaign-react/add-media-panel-crud-ad';\r\n\r\nconst WebsiteSuggestionTab = 2;\r\n\r\nexport const useImagePicker = () => {\r\n const [show, setShow] = useState(false);\r\n const [activeImagePickerPillIndex, setActiveImagePillIndex] = useState(0);\r\n const [selectedMediaPanelSource, setSelectedMediaPanelSource] = useState(VIEWS.LandingPage);\r\n\r\n const setDisplayImagePicker = (display) => {\r\n setShow(display);\r\n setActiveImagePillIndex(0);\r\n setSelectedMediaPanelSource(VIEWS.LandingPage);\r\n };\r\n\r\n const displayWebsiteSuggestionTab = () => {\r\n setShow(true);\r\n setActiveImagePillIndex(WebsiteSuggestionTab);\r\n setSelectedMediaPanelSource(VIEWS.WebsiteImage);\r\n };\r\n\r\n return {\r\n displayImagePicker: show,\r\n activeImagePickerPillIndex,\r\n setDisplayImagePicker,\r\n displayWebsiteSuggestionTab,\r\n selectedMediaPanelSource,\r\n setSelectedMediaPanelSource,\r\n };\r\n};\r\n","import { useEffect, useReducer, useCallback, useRef, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport {\r\n SuggestionPoller,\r\n SuggestionStatus,\r\n mapSuggestionResponseToState,\r\n} from '@bingads-webui-campaign/media-repository';\r\nimport { getAdCreatorInstrumentation } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience-model';\r\nimport { MessageBarType } from '@bingads-webui-react/fabric-control';\r\n\r\n// for every request to poll, we use debounce of 1000ms.\r\nconst DebouncedPollWaitMs = 1000;\r\n\r\nconst websiteSuggestionReducer = (state, action) => {\r\n const {\r\n type,\r\n response,\r\n isSubdomainScraping,\r\n error,\r\n selectedIndex,\r\n } = action;\r\n\r\n if (type === SuggestionStatus.SelectSuggestionError) {\r\n return {\r\n ...state,\r\n carousel: {\r\n ...state.carousel,\r\n message: {\r\n type: MessageBarType.error,\r\n message: error.errorMessage,\r\n },\r\n },\r\n };\r\n }\r\n\r\n if (type === SuggestionStatus.SelectSuggestionComplete) {\r\n return {\r\n ...state,\r\n carousel: {\r\n ...state.carousel,\r\n images: _.reject(state.carousel.images, (val, ind) => ind === selectedIndex),\r\n message: undefined,\r\n },\r\n };\r\n }\r\n\r\n const updatedSuggestions = mapSuggestionResponseToState(type, response, isSubdomainScraping);\r\n\r\n // in subdomain scraping case, carousel state isn't updated; keep existing suggestion carousel state\r\n if (!updatedSuggestions.carousel) {\r\n updatedSuggestions.carousel = state.carousel;\r\n }\r\n\r\n return updatedSuggestions;\r\n};\r\n\r\nexport const useWebsiteSuggestion = ({\r\n oDataConfig,\r\n adContext,\r\n instrumentation,\r\n logActivity,\r\n permissions,\r\n fullUrl,\r\n hasErrorInUrl,\r\n headlines,\r\n descriptions,\r\n adCreatorScenario,\r\n customizedGetMinimumSizeForImage = null,\r\n}) => {\r\n const [\r\n suggestionState,\r\n dispatchSuggestionState,\r\n ] = useReducer(\r\n websiteSuggestionReducer,\r\n fullUrl ? {} : mapSuggestionResponseToState(SuggestionStatus.EmptyURL)\r\n );\r\n\r\n const onPollingSuggestionCompleted = (response, isSubdomainScraping) => {\r\n dispatchSuggestionState({\r\n type: response.error ? SuggestionStatus.ServerError : SuggestionStatus.FetchSucceed,\r\n response,\r\n isSubdomainScraping,\r\n });\r\n };\r\n\r\n // could not replace it with useMemo or useRef\r\n // The carousel will be refreshed twice. So still keep this way\r\n const [poller] = useState(() => {\r\n const { websiteSuggestionActivity: logger } =\r\n getAdCreatorInstrumentation(instrumentation, adCreatorScenario, permissions);\r\n\r\n return new SuggestionPoller({\r\n cid: adContext.advertiserCustomerId,\r\n aid: adContext.accountId,\r\n cmpId: adContext.campaignId,\r\n oDataConfig,\r\n jobCompleteCallback: onPollingSuggestionCompleted,\r\n logger,\r\n });\r\n });\r\n\r\n // this is to support API calls directly from suggestionPoller\r\n const pollerWrapperRef = useRef({});\r\n\r\n pollerWrapperRef.current.getLandingPageSuggestions =\r\n useCallback((opts) => {\r\n logActivity(`Under Image extensions: getLandingPageSuggestions: opts: ${JSON.stringify(opts)}`);\r\n\r\n return poller.getLandingPageSuggestions({\r\n ...opts,\r\n headlines,\r\n descriptions,\r\n });\r\n }, [descriptions, headlines, logActivity, poller]);\r\n\r\n pollerWrapperRef.current.getMoreLandingPageSuggestions =\r\n useCallback((opts) => {\r\n logActivity(`Under Image extensions: getMoreLandingPageSuggestions: opts: ${JSON.stringify(opts)}`);\r\n\r\n return poller.getMoreLandingPageSuggestions({\r\n ...opts,\r\n headlines,\r\n descriptions,\r\n });\r\n }, [descriptions, headlines, logActivity, poller]);\r\n\r\n const fetchSuggestionByUrl =\r\n useCallback(_.debounce(\r\n (url, headlinesArg, descriptionsArg, enableOfflinePollingDelay = false) => {\r\n dispatchSuggestionState({ type: SuggestionStatus.FetchInProgress });\r\n\r\n const [width, height] = customizedGetMinimumSizeForImage ? customizedGetMinimumSizeForImage() : constants.getMinimumSizeForImage();\r\n\r\n logActivity(`Under Image extensions: get landing page suggestions: url: ${url}; headlinesArgs: ${headlinesArg}; descriptionsArg: ${descriptionsArg}`);\r\n\r\n poller.getLandingPageSuggestions({\r\n landingPageUrl: url,\r\n headlines: headlinesArg,\r\n descriptions: descriptionsArg,\r\n enableOfflinePollingDelay,\r\n minimumResolution: { width, height },\r\n });\r\n },\r\n DebouncedPollWaitMs\r\n ), [poller]);\r\n\r\n useEffect(() => {\r\n poller.cancel();\r\n\r\n if (_.isEmpty(fullUrl)) {\r\n dispatchSuggestionState({ type: SuggestionStatus.EmptyURL });\r\n } else if (hasErrorInUrl) {\r\n dispatchSuggestionState({ type: SuggestionStatus.InvalidURL });\r\n } else {\r\n fetchSuggestionByUrl(\r\n fullUrl,\r\n headlines,\r\n descriptions\r\n );\r\n }\r\n\r\n return () => {\r\n poller.cancel();\r\n };\r\n }, [descriptions, fetchSuggestionByUrl, fullUrl, hasErrorInUrl, headlines, poller]);\r\n\r\n return {\r\n suggestionState,\r\n suggestionPoller: pollerWrapperRef.current,\r\n dispatchSuggestionState,\r\n };\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/label-has-for */\r\n/* eslint-disable react/forbid-prop-types */\r\nimport _ from 'underscore';\r\nimport $ from 'jquery';\r\nimport React, { createRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ValidatedUrlEditor } from '@bingads-webui-react/url-editor';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { TextArea } from '@bingads-webui-react/primitive-validation';\r\nimport {\r\n ValidatedInput,\r\n ValidationGroup,\r\n ValidatedRadioGroup\r\n} from '@bingads-webui-react/validation-controls';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\nimport { ErrorMessages } from '@bingads-webui-react/validation';\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\nimport { DropdownSelector } from '@bingads-webui-react/dropdown-selector';\r\nimport { RemainingCharsHint } from '@bingads-webui-campaign-react/remaining-chars-hint';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst LayoutType = {\r\n popup: 'Popup',\r\n line: 'AdditionalLine',\r\n};\r\n\r\nconst getStyles = () => ({\r\n hideLayoutOption: {\r\n '& label': {\r\n paddingLeft: 15,\r\n },\r\n\r\n '& input': {\r\n display: 'none',\r\n },\r\n },\r\n});\r\n\r\nclass UnStyledDisclaimerEditor extends React.PureComponent {\r\n static propTypes = {\r\n editData: PropTypes.object,\r\n onClose: PropTypes.func.isRequired,\r\n isNativeAd: PropTypes.bool,\r\n onDisclaimerAddOrUpdated: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n schema: PropTypes.object.isRequired,\r\n repository: PropTypes.shape({\r\n create: PropTypes.func.isRequired,\r\n }).isRequired,\r\n usePanel: PropTypes.bool,\r\n permissions: PropTypes.shape({}),\r\n classes: PropTypes.shape({}).isRequired,\r\n showOnlyPopupLayout: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n editData: null,\r\n onDisclaimerAddOrUpdated: _.noop,\r\n usePanel: false,\r\n isNativeAd: false,\r\n permissions: {},\r\n showOnlyPopupLayout: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.dropdownitems = [\r\n {\r\n Id: 'disclaimer-editor-title',\r\n value: this.props.i18n.getString('Disclaimers_Title_Default'),\r\n },\r\n {\r\n Id: 'disclaimer-editor-disclaimer',\r\n value: this.props.i18n.getString('Disclaimers_Dropdown_Disclaimer'),\r\n },\r\n {\r\n Id: 'disclaimer-editor-disclosure',\r\n value: this.props.i18n.getString('Disclaimers_Dropdown_Disclosure'),\r\n },\r\n {\r\n Id: 'disclaimer-editor-moreDisclaimer',\r\n value: this.props.i18n.getString('Disclaimers_Dropdown_MoreDisclaimer'),\r\n },\r\n {\r\n Id: 'disclaimer-editor-offer',\r\n value: this.props.i18n.getString('Disclaimers_Dropdown_Offer'),\r\n },\r\n {\r\n Id: 'disclaimer-editor-safetyInfor',\r\n value: this.props.i18n.getString('Disclaimers_Dropdown_SafetyInfor'),\r\n },\r\n {\r\n Id: 'disclaimer-editor-safetyInformation',\r\n value: this.props.i18n.getString('Disclaimers_Dropdown_SafetyInformation'),\r\n },\r\n ];\r\n\r\n // Hide popup option in Ads CN and when creation mode or edit mode but the layout is line, which means when layout is popup, we allow to switch to line.\r\n this.hidePopupOption = _.get(props.permissions, 'IsDomesticSimplifiedChineseEnabled', false) && (_.isEmpty(this.props.editData) || this.props.editData.DisclaimerLayout === LayoutType.line);\r\n // We will not allow domestic simplified chinese user to use native ad disclaimer.\r\n if (props.isNativeAd || props.showOnlyPopupLayout) {\r\n this.layoutTypeOptions = [LayoutType.popup];\r\n } else {\r\n this.layoutTypeOptions = this.hidePopupOption ? [LayoutType.line] : [LayoutType.popup, LayoutType.line];\r\n }\r\n\r\n const defaultData = {\r\n Name: '',\r\n Title: this.props.i18n.getString('Disclaimers_Title_Default'),\r\n PopupText: '',\r\n LineText: '',\r\n DisclaimerLayout: this.hidePopupOption ? LayoutType.line : LayoutType.popup,\r\n FinalUrls: [],\r\n FinalMobileUrls: [],\r\n };\r\n\r\n // find the item in the list, otherwise, select the first one.\r\n const dropdownSeleted = (this.props.editData ? _.findWhere(\r\n this.dropdownitems,\r\n { value: this.props.editData.Title }\r\n ) : null) || this.dropdownitems[0];\r\n\r\n this.state = {\r\n disclaimer: this.props.editData ? cloneDeep(this.props.editData) : defaultData,\r\n isValid: '',\r\n errors: [],\r\n alwaysShowError: false,\r\n selected: dropdownSeleted,\r\n };\r\n\r\n const popupSchema = {\r\n ...this.props.schema,\r\n properties: {\r\n ...this.props.schema.properties,\r\n Name: {\r\n ...this.props.schema.properties.Name,\r\n required: true,\r\n },\r\n DisclaimerLayout: {\r\n ...this.props.schema.properties.DisclaimerLayout,\r\n required: true,\r\n },\r\n Title: {\r\n ...this.props.schema.properties.Title,\r\n required: true,\r\n },\r\n PopupText: {\r\n ...this.props.schema.properties.PopupText,\r\n required: true,\r\n },\r\n },\r\n };\r\n const lineSchema = {\r\n ...this.props.schema,\r\n properties: {\r\n ...this.props.schema.properties,\r\n Name: {\r\n ...this.props.schema.properties.Name,\r\n required: true,\r\n },\r\n DisclaimerLayout: {\r\n ...this.props.schema.properties.DisclaimerLayout,\r\n required: true,\r\n },\r\n LineText: {\r\n ...this.props.schema.properties.LineText,\r\n required: true,\r\n },\r\n FinalUrls: {\r\n ...this.props.schema.properties.FinalUrls,\r\n required: true,\r\n },\r\n },\r\n };\r\n\r\n this.schema = {\r\n [LayoutType.popup]: popupSchema,\r\n [LayoutType.line]: lineSchema,\r\n };\r\n\r\n this.ref = createRef();\r\n }\r\n\r\n onSubmit = () => {\r\n this.setState({ alwaysShowError: true }, () => {\r\n this.getFirstAlertElementAndFocus();\r\n });\r\n\r\n if (this.state.isValid === 'false') {\r\n return;\r\n }\r\n\r\n if (this.state.disclaimer.DisclaimerLayout === LayoutType.popup) {\r\n this.state.disclaimer.Title = this.state.selected.value;\r\n }\r\n\r\n const dataToBeSaved = this.state.disclaimer;\r\n\r\n if (this.props.editData && this.props.editData.Id > 0) {\r\n // eslint-disable-next-line no-alert, no-restricted-globals\r\n if (confirm(this.props.i18n.getString('Disclaimers_Edit_Confirmation'))) {\r\n dataToBeSaved.Id = this.props.editData.Id;\r\n } else {\r\n return;\r\n }\r\n }\r\n\r\n this.props.repository.create(dataToBeSaved)\r\n .then(() => {\r\n this.props.onClose();\r\n this.props.onDisclaimerAddOrUpdated(dataToBeSaved);\r\n })\r\n .catch((errors) => {\r\n this.setState({\r\n errors: _.chain(errors)\r\n .uniq(value => value.message)\r\n .map(error => (error.isHtmlMessage ? { DangerousHtmlMessage: error.message } : error.message))\r\n .value(),\r\n });\r\n })\r\n .finally(withUiBlock($(this.props.usePanel ? '.disclaimer-editor-panel .panel-content' : '.disclaimer-editor-modal'), this.props.i18n.getString('Loading')));\r\n };\r\n\r\n onValidate = (result) => {\r\n this.setState(preState => ({\r\n isValid: result.isValid.toString(),\r\n disclaimer: preState.disclaimer.DisclaimerLayout !== result.data.DisclaimerLayout\r\n && result.data.DisclaimerLayout === LayoutType.popup ?\r\n _.defaults({ Title: this.props.i18n.getString('Disclaimers_Title_Default') }, result.data)\r\n : result.data,\r\n errors: [],\r\n }));\r\n };\r\n\r\n onLayoutTypeChange = () => {\r\n this.setState({\r\n alwaysShowError: false,\r\n selected: this.dropdownitems[0],\r\n });\r\n };\r\n\r\n onSelectedChange = (selected) => {\r\n this.setState({\r\n selected,\r\n });\r\n };\r\n\r\n getFirstAlertElementAndFocus = () => {\r\n const alertNode = this.ref.current.querySelector('.col-sm-8 [role=\"alert\"]');\r\n if (alertNode) {\r\n alertNode.parentElement.firstChild.focus();\r\n }\r\n\r\n return null;\r\n };\r\n\r\n renderlayoutOptions = item => (\r\n \r\n {this.props.i18n.getString(`Disclaimers_DisplayLayout_${item}`)}\r\n {item === LayoutType.line\r\n && this.state.disclaimer.DisclaimerLayout === LayoutType.line\r\n && )}\r\n message={this.props.i18n.getString('Disclaimers_DisplayLayout_AdditionalLine_Hint')}\r\n />}\r\n \r\n );\r\n\r\n renderSettingItem = ({\r\n settingName,\r\n labelText,\r\n helpId = '',\r\n children,\r\n }) => (\r\n
\r\n ), []);\r\n\r\n const onChangeSaveOption = useCallback((_event, { key }) => {\r\n setSaveOption(key);\r\n }, []);\r\n\r\n const saveOptions = useMemo(() => [\r\n {\r\n key: SaveOption.SAVE,\r\n text: i18n.getString(_TL_('Save this audience signal')),\r\n subText: i18n.getString(_TL_('This audience signal will be updated, and any changes will be applied to all asset groups.')),\r\n onRenderLabel: onRenderSaveOption,\r\n },\r\n {\r\n key: SaveOption.SAVECOPY,\r\n text: i18n.getString(_TL_('Save as a copy')),\r\n subText: i18n.getString(_TL_('The original audience signal will remain unchanged.')),\r\n onRenderLabel: onRenderSaveOption,\r\n },\r\n ], [i18n, onRenderSaveOption]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {i18n.getString(\r\n audienceGroupViewModel.data.AssociationsCount > 1 ?\r\n _TL_('{{count}} asset groups') :\r\n _TL_('{{count}} asset group'),\r\n { count: audienceGroupViewModel.data.AssociationsCount }\r\n )}\r\n \r\n ),\r\n }}\r\n template={i18n.getString(_TL_('This audience signal is currently being used in {{usage}}'))}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {showSaveCopyFields && (\r\n \r\n
\r\n ), [i18n, onClose, onSave, isReadOnlyUser]);\r\n\r\n const onGlobalShortcut = useCallback((e) => {\r\n if (e.key === 'Tab' && !e.shiftKey && e.target.parentElement.className.includes('nav-skip')) {\r\n e.preventDefault();\r\n document.getElementsByClassName('ms-Panel-closeButton')[0].focus();\r\n }\r\n if (e.key === 'Tab' && e.shiftKey && e.target.className.includes('HelpTopic analysable')) {\r\n e.preventDefault();\r\n document.getElementsByClassName('btn-cancel')[0].focus();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n document.addEventListener('keyup', onGlobalShortcut);\r\n return () => {\r\n document.removeEventListener('keyup', onGlobalShortcut);\r\n };\r\n }, [i18n, onGlobalShortcut]);\r\n\r\n const onNavigateToAudiencesPage = useCallback((e) => {\r\n e.preventDefault();\r\n\r\n const route = getRoutePathById(siteMap, 'audiences-library');\r\n scope.remove(['campaignId', 'assetGroupId']);\r\n scope.save(route);\r\n }, [scope, siteMap]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n )}\r\n message={i18n.getString(_TL_('To reach more customers and maximize conversions, please note that your ads may surface to audiences beyond those associated with your audience signal.'))}\r\n />\r\n {serverErrors && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n ({text}),\r\n }}\r\n template={i18n.getString(_TL_('Choose from your existing audience lists. To create a new list, go to {{link}}Audiences{{/link}}.'))}\r\n />\r\n }\r\n onGenericError={onGenericError}\r\n validationProps={{ field: 'CustomerData', value: customerData }}\r\n popupId=\"pop_BA_PMAX_AudienceLists\"\r\n wizardPerfMarker={wizardPerfMarker}\r\n />\r\n
\r\n \r\n {i18n.getString(_TL_('This is an example of what your video ad might look like. Depending on placement, the actual ad shown may appear differently.'))}\r\n \r\n
\r\n {i18n.getString(_TL_('Predictive targeting allows us to optimize your ad reach based on your targeting preferences. You can customize predictive targeting by setting up targeting preferences below.'))}\r\n {i18n.getString(_TL_('Learn more'))}\r\n
\r\n \r\n );\r\n};\r\n\r\nTextFormattingDialogue.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func }).isRequired,\r\n onToggleBack: PropTypes.func.isRequired,\r\n isUsedForButton: PropTypes.bool,\r\n hideColorFormatting: PropTypes.bool,\r\n textFormatOptions: PropTypes.shape({\r\n font: PropTypes.string,\r\n color: PropTypes.string,\r\n weight: PropTypes.string,\r\n })\r\n .isRequired,\r\n onFormatText: PropTypes.func.isRequired,\r\n};\r\n\r\nTextFormattingDialogue.defaultProps = {\r\n isUsedForButton: false,\r\n hideColorFormatting: false,\r\n};\r\n","import { makeStyles } from '@fluentui/react-components';\r\nimport { helpbuttonStyle } from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const useDefaultContainerStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n rowGap: '16px',\r\n },\r\n});\r\n\r\nexport const getStyles = (_, core) => ({\r\n collapseContainer: {\r\n '& .helpbutton': {\r\n ...helpbuttonStyle(core)['.helpbutton'],\r\n marginBottom: '4px',\r\n display: 'inline-block',\r\n },\r\n '& .helpbutton::before': helpbuttonStyle(core)['.helpbutton::before'],\r\n },\r\n});\r\n","import { getTextAssetCollectionConfig } from '@bingads-webui-campaign-react/pmax-text-input';\r\n\r\nconst collectionConfig = {\r\n headlines: {\r\n labelText: _TL_('Short headline'),\r\n placeholderText: _TL_('Enter your short headline'),\r\n fieldName: 'short-headline',\r\n singleAssetValidationPropsField: 'Headline',\r\n validationPropsField: 'Headlines',\r\n addButtonText: _TL_('Add headline'),\r\n copilotButtonLabel: _TL_('Get recommendations for your short headline'),\r\n deleteButtonLabel: _TL_('Remove short headline'),\r\n minCollectionSize: 1,\r\n maxCollectionSize: 1,\r\n errorMessage: _TL_('At least one short headlines are required'),\r\n helpPopupTopic: 'pop_BA_DisplayTemplate_Headline',\r\n helpPopupAriaLabel: _TL_('Click to learn more about short headlines'),\r\n inlineRecommendationsTitle: _TL_('Recommended short headlines'),\r\n inlineRecommendationsHelpTopicKey:\r\n 'pop_BA_Recommendations_Pmax_Shortheadlines',\r\n inlineRecommendationsHelpTopicAriaLabel: _TL_('Click to learn more about short headlines recommendations'),\r\n inlineRecommendationsDisabledItemTooltip: _TL_(\"You've reached the maximum number of short headlines. Please remove one short headline if you'd like to add this recommended short headline.\"),\r\n duplicateErrorMessage: _TL_('Duplicate short headlines are not allowed'),\r\n },\r\n longHeadlines: {\r\n labelText: _TL_('Long headline'),\r\n placeholderText: _TL_('Enter your long headline'),\r\n fieldName: 'long-headline',\r\n singleAssetValidationPropsField: 'LongHeadline',\r\n validationPropsField: 'LongHeadlines',\r\n addButtonText: _TL_('Add long headline'),\r\n copilotButtonLabel: _TL_('Get recommendations for your long headline'),\r\n deleteButtonLabel: _TL_('Remove long headline'),\r\n minCollectionSize: 1,\r\n maxCollectionSize: 1,\r\n errorMessage: _TL_('At least one long headline is required'),\r\n helpPopupTopic: 'pop_BA_DisplayTemplate_Headline',\r\n helpPopupAriaLabel: _TL_('Click to learn more about long headlines'),\r\n inlineRecommendationsTitle: _TL_('Recommended long headlines'),\r\n inlineRecommendationsHelpTopicKey:\r\n 'pop_BA_Recommendations_Pmax_Longheadlines',\r\n inlineRecommendationsHelpTopicAriaLabel:\r\n _TL_('Click to learn more about long headlines recommendations'),\r\n inlineRecommendationsDisabledItemTooltip:\r\n _TL_(\"You've reached the maximum number of long headlines. Please remove one long headline if you'd like to add this recommended long headline.\"),\r\n duplicateErrorMessage: _TL_('Duplicate long headlines are not allowed'),\r\n },\r\n descriptions: {\r\n labelText: _TL_('Description'),\r\n placeholderText: _TL_('Enter a description'),\r\n fieldName: 'description',\r\n singleAssetValidationPropsField: 'Description',\r\n validationPropsField: 'Descriptions',\r\n addButtonText: _TL_('Add description'),\r\n minCollectionSize: 1,\r\n maxCollectionSize: 1,\r\n errorMessage: _TL_('At least one description is required'),\r\n helpPopupTopic: 'pop_BA_DisplayTemplate_Description',\r\n helpPopupAriaLabel: _TL_('Click to learn more about descriptions'),\r\n inlineRecommendationsTitle: _TL_('Recommended descriptions'),\r\n inlineRecommendationsHelpTopicKey: 'pop_BA_Recommendations_Pmax_Descriptions',\r\n inlineRecommendationsHelpTopicAriaLabel:\r\n _TL_('Click to learn more about descriptions recommendations'),\r\n inlineRecommendationsDisabledItemTooltip:\r\n _TL_('You’ve reached the maximum number of descriptions. Please remove one description if you’d like to add this recommended description.'),\r\n duplicateErrorMessage: _TL_('Duplicate descriptions are not allowed'),\r\n\r\n },\r\n};\r\n\r\nexport const getLongHeadlineAssetCollectionConfig = i18n => getTextAssetCollectionConfig('longHeadlines', i18n, collectionConfig);\r\n\r\nexport const getDescriptionAssetCollectionConfig = i18n => getTextAssetCollectionConfig('descriptions', i18n, collectionConfig);\r\n\r\nexport const getShortHeadlineAssetCollectionConfig = i18n => getTextAssetCollectionConfig('headlines', i18n, collectionConfig);\r\n\r\n","import React from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport {\r\n Body1,\r\n Button,\r\n makeStyles,\r\n mergeClasses,\r\n shorthands,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nconst useTextAssetPlaceholderStyles = makeStyles({\r\n root: {\r\n width: '100%',\r\n ...shorthands.borderStyle('solid'),\r\n ...shorthands.border(tokens.strokeWidthThin),\r\n ...shorthands.borderWidth(tokens.strokeWidthThin),\r\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\r\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n rowGap: tokens.spacingVerticalS,\r\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalM),\r\n\r\n '& > span': {\r\n textAlign: 'center',\r\n },\r\n },\r\n});\r\n\r\nexport const TextAssetPlaceholder = ({ i18n, placeholder, onEdit }) => {\r\n const classes = useTextAssetPlaceholderStyles();\r\n\r\n return (\r\n
\r\n \r\n {placeholder\r\n ? i18n.getString(placeholder)\r\n : i18n.getString(_TL_('Multiple options, editing will override for all texts'))}\r\n \r\n \r\n
\r\n {/* Horizontal images each get their own row in decreasing width order */}\r\n {targetSizes\r\n .filter(size => getAdSizeCategory(size) === 'Horizontal')\r\n .sort((a, b) => adImages[b].width - adImages[a].width)\r\n .map(size => (\r\n \r\n ))}\r\n {/* Other images take the same row sorted by aspect ratio */}\r\n