\r\n {url && (\r\n \r\n {children}\r\n \r\n )}\r\n {!url && (\r\n \r\n {children}\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nMMAPlacementCardImpl.propTypes = {\r\n isEnabled: PropTypes.bool,\r\n url: PropTypes.string,\r\n width: PropTypes.number,\r\n height: PropTypes.number,\r\n children: PropTypes.node.isRequired,\r\n mmaPlacementCardClassName: PropTypes.string,\r\n classes: PropTypes.shape({\r\n mmaPlacementCardRoot: PropTypes.string,\r\n mmaPlacementCardDisabled: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nMMAPlacementCardImpl.defaultProps = {\r\n isEnabled: true,\r\n url: undefined,\r\n width: undefined,\r\n height: undefined,\r\n mmaPlacementCardClassName: undefined,\r\n};\r\n\r\nexport const MMAPlacementCard = withUAPLThemedStyles(\r\n MMAPlacementCardImpl,\r\n getPlacementCardStyles,\r\n { componentName: 'MMAPlacementCard ' }\r\n);\r\n","export const getPlacementCardStyles = (/* theme */) => ({\r\n mmaRefreshedPlacementCardRoot: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n // flex: 1,\r\n alignItems: 'center',\r\n\r\n position: 'relative',\r\n boxSizing: 'border-box',\r\n overflow: 'hidden',\r\n boxShadow: '0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)',\r\n borderRadius: 8,\r\n background: '#fff',\r\n margin: 'auto',\r\n\r\n '& .placement-card-content': {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n },\r\n mmaPlacementCardRoot: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n // flex: 1,\r\n alignItems: 'center',\r\n\r\n position: 'relative',\r\n boxSizing: 'content-box',\r\n overflow: 'hidden',\r\n boxShadow: '0px 0.511px 1.533px rgb(0 0 0 / 10%), 0px 2.72533px 6.132px rgb(0 0 0 / 13%)',\r\n borderRadius: 5.11,\r\n background: '#fff',\r\n margin: 'auto',\r\n\r\n '& .placement-card-content': {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n },\r\n mmaPlacementCardDisabled: {\r\n opacity: 0.5,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nexport const PlacementContentContainer = ({\r\n finalUrl,\r\n displayUrl,\r\n isClickDisabled,\r\n placementContentContainerClassName,\r\n children,\r\n}) => {\r\n if (isClickDisabled) {\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n }\r\n return (\r\n \r\n {i18n.getString('Ad')}\r\n
\r\n);\r\n\r\nAdLabelImpl.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n adsLabelClassName: PropTypes.string,\r\n classes: PropTypes.shape({\r\n adLabelRoot: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nAdLabelImpl.defaultProps = {\r\n adsLabelClassName: undefined,\r\n};\r\n\r\nexport const AdLabel = withUAPLThemedStyles(\r\n AdLabelImpl,\r\n getAdLabelStyles,\r\n { componentName: 'AdLabel' }\r\n);\r\n","export const getAdLabelStyles = (/* theme */) => ({\r\n adLabelRoot: {\r\n position: 'absolute',\r\n backgroundColor: 'white', // palette.white,\r\n color: 'black', // color: palette.black,\r\n fontSize: 11,\r\n borderRadius: 5,\r\n padding: '1.2px 6px 1.8px 6px',\r\n margin: 7,\r\n opacity: '90%',\r\n },\r\n\r\n adLabelRefreshedRoot: {\r\n display: 'inline-block',\r\n verticalAlign: 'top',\r\n borderRadius: '4px',\r\n border: '0.5px solid rgba(26, 26, 26, 0.3)',\r\n padding: '1px 4px',\r\n height: 16,\r\n boxSizing: 'border-box',\r\n fontFamily: 'Segoe UI',\r\n fontWeight: 400,\r\n fontSize: '11px',\r\n lineHeight: '12px',\r\n color: 'rgba(43, 43, 43, 0.8)', // color: palette.black,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getBusinessNameWithAdLabelStyles } from '../styles';\r\n\r\nconst adsIconImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAotJREFUWIW9lrFWGlEQhr+5cEzLG2R9AxBTpMM6jWBSUAlPID4B+ATKE0gqz4mH3Sq1WOWc6EregE2bxjUdJjApUBS4wC4L+bu9d/b+387cnTMCQNtvIBwBIHT4O2zy6V2H/yCh7VcQzi1bHaRfpfg+2CSAwcihfUsL6FYPzz/H++ZsCkBw/XsgEyF0Ixkx0cxhUxkxlrUAzD5pKaC0ZjmorBNEcH2dXNEaxd3m+Pmi6/Bm4IFk55zQgseTVUtjgHBiRc2PiedyLqC0m0OpgsyaJMyIAQmXhwEH+Ralne2lIJd+Iw6I7Q5EBTm2gqSoo1tXXPqN9QJ4XQfPP8W9PXwCOaMvewg2I4cUdVy/N45PBOB1HXTYRamBtMaHlnMBxfwJfbNt/WPAGcXPB4lTgpd+ITJZ43Iu4CBfXQUkGkAxFzylOgDtEJqmNS4OyJfvWQDBveuBvvoiKVDauY4EtkwXXYc36oHae8hguBe9BG2/gevf4/o9zrvR2nc5FyCyx3SveVZKTqMDjOaFDOCQGSy82ZaX5/Qayax2CcGe0ml5NwVUryZL/EpDPUvHAIgu76YAqTqqBVBLgHbANPiYv14vQNuvYORwqXEpP77k6wFo+xVE6qAOGs14PQDe7RFqaqMaxzNOBqAmi3vXQ+cZE4BUFhknA5jXWEadskFp93PUk9KgEWfChQpRzvhtmlRz0eaLF4CpoVSGWcCWunAmNoHxa4BJqdTwbgFxAAcICc0xw0EVY06fmkqI0uLxsUk52Zg+O5RapZVxXb/eveWXPKz6xdNKY0/tpPp/XkryYefnOoyftWwoDUErSdO8GEDUNjiA0uLBbMf5pVZRGkwTHWYR9kE7qHSS3Oq4+gfBZCnchNpiDQAAAABJRU5ErkJggg==';\r\n\r\nexport const BusinessNameWithAdsLabelImpl = ({\r\n businessName,\r\n showAdsLabel,\r\n showAdsIcon,\r\n i18n,\r\n rootClassName,\r\n classes,\r\n isAdPreviewRefreshEnabled,\r\n}) => (\r\n \r\n {\r\n showAdsLabel && {i18n.getString(_TL_('Ad'))}\r\n }\r\n {\r\n businessName && {businessName}\r\n }\r\n {\r\n showAdsIcon && 
\r\n }\r\n
\r\n);\r\n\r\nBusinessNameWithAdsLabelImpl.propTypes = {\r\n businessName: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showAdsLabel: PropTypes.bool,\r\n rootClassName: PropTypes.string,\r\n classes: PropTypes.shape({\r\n businessNameWithAdsLabelRoot: PropTypes.string,\r\n }).isRequired,\r\n showAdsIcon: PropTypes.bool,\r\n};\r\n\r\nBusinessNameWithAdsLabelImpl.defaultProps = {\r\n businessName: undefined,\r\n rootClassName: undefined,\r\n showAdsLabel: false,\r\n showAdsIcon: false,\r\n};\r\n\r\nexport const BusinessNameWithAdsLabel = withUAPLThemedStyles(\r\n BusinessNameWithAdsLabelImpl,\r\n getBusinessNameWithAdLabelStyles,\r\n { componentName: 'BusinessNameWithAdsLabel ' }\r\n);\r\n","export const getBusinessNameWithAdLabelStyles = (/* theme */) => ({\r\n businessNameWithAdsLabelRoot: {\r\n padding: [1, 0],\r\n overflow: 'hidden',\r\n marginTop: 9,\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n color: '#333', // color: palette.black,\r\n fontSize: 10,\r\n lineHeight: '16px',\r\n\r\n '& .ads-label': {\r\n position: 'relative',\r\n padding: '.8px 4px',\r\n margin: '0 5px 0 0',\r\n background: 'transparent',\r\n color: '#78718a',\r\n lineHeight: 1.364,\r\n fontSize: '10px',\r\n fontWeight: '400',\r\n fontFamily: 'Segoe UI,Segoe WP,Arial,Sans-Serif',\r\n border: '.5px solid #78718a',\r\n borderRadius: '4px',\r\n },\r\n\r\n '& .business-name': {\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n color: '#333',\r\n fontSize: 11,\r\n lineHeight: 1.364,\r\n padding: '1px 0',\r\n marginTop: 9,\r\n },\r\n },\r\n\r\n businuessNameRefreshed: {\r\n fontFamily: 'Segoe UI',\r\n fontWeight: 600,\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n color: 'rgba(0, 0, 0, 1)',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getPlacementGradientStyles } from '../styles';\r\n\r\nconst GradientImpl = ({\r\n gradientClassName, classes,\r\n}) => (\r\n \r\n);\r\n\r\nGradientImpl.propTypes = {\r\n gradientClassName: PropTypes.string,\r\n classes: PropTypes.shape({\r\n placementCardGradientRoot: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nGradientImpl.defaultProps = {\r\n gradientClassName: undefined,\r\n};\r\n\r\nexport const PlacementGradient = withUAPLThemedStyles(\r\n GradientImpl,\r\n getPlacementGradientStyles,\r\n { componentName: 'PlacementGradient ' }\r\n);\r\n","export const getPlacementGradientStyles = (/* theme */) => ({\r\n placementCardGradientRoot: {\r\n display: 'block',\r\n position: 'absolute',\r\n width: '100%',\r\n height: '100%',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const withLink = (WrappedComponent) => {\r\n const HoC = React.memo(props => (\r\n \r\n {text}\r\n
\r\n )\r\n));\r\n\r\nPlacementText.propTypes = {\r\n text: PropTypes.string,\r\n isMultiLine: PropTypes.bool.isRequired,\r\n placementTextClassName: PropTypes.string,\r\n};\r\n\r\nPlacementText.defaultProps = {\r\n placementTextClassName: undefined,\r\n text: undefined,\r\n};\r\n\r\n\r\n// --------------------------------------------------------------------------------\r\nexport const PlacementHeadline = React.forwardRef(({\r\n headlineText,\r\n isMultiLine,\r\n placementHeadlineClassName,\r\n}, ref) => (\r\n \r\n
\r\n );\r\n }\r\n return (\r\n setShowCallout(!showCallout)}\r\n ref={ref}\r\n >\r\n {disclaimer.Title}\r\n \r\n {showCallout &&\r\n setShowCallout(false)}\r\n >\r\n \r\n
\r\n ) : null;\r\n};\r\n\r\nPopupDisclaimer.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n disclaimer: PropTypes.shape({\r\n DisclaimerLayout: PropTypes.string,\r\n Title: PropTypes.string,\r\n PopupText: PropTypes.string,\r\n FinalUrls: PropTypes.arrayOf(PropTypes.string),\r\n }),\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nPopupDisclaimer.defaultProps = {\r\n disclaimer: {},\r\n styleOverrides: {},\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\n\r\nexport const BusinessNameWithLogo = ({\r\n businessName,\r\n showLogo,\r\n logo,\r\n logoHeight,\r\n classes,\r\n}) => (\r\n \r\n {i18n.getString(_TL_('Disclaimer'))}\r\n
\r\n \r\n {disclaimer.PopupText}\r\n
\r\n \r\n {i18n.getString('Learn more')}\r\n \r\n \r\n }\r\n \r\n {showLogo && logo && (\r\n
\r\n);\r\n\r\nBusinessNameWithLogo.propTypes = {\r\n businessName: PropTypes.string,\r\n showLogo: PropTypes.bool.isRequired,\r\n classes: PropTypes.shape({\r\n businuessAndLogoContainer: PropTypes.string,\r\n placementLogoContainer: PropTypes.string,\r\n placementBusinessNameContainer: PropTypes.string,\r\n }).isRequired,\r\n logoHeight: PropTypes.number,\r\n logo: PropTypes.shape({\r\n Src: PropTypes.string,\r\n Width: PropTypes.number,\r\n Height: 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\n\r\nBusinessNameWithLogo.defaultProps = {\r\n businessName: undefined,\r\n logoHeight: 16,\r\n logo: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { PlacementAction } from './placement-action';\r\nimport { AdLabel } from './ad-label';\r\n\r\nconst ChoiceIcon = ({ headChoiceIconClassName }) => (\r\n \r\n);\r\n\r\nconst ChoiceIconBright = ({ headChoiceIconClassName }) => (\r\n \r\n);\r\n\r\nexport const BusinessNameWithChoiceIcon = ({\r\n businessName,\r\n showBusinessName,\r\n showAdIcon,\r\n showChoiceIcon,\r\n showCallToAction,\r\n callToAction,\r\n showCallToActionAsLink,\r\n classes,\r\n i18n,\r\n showBrightStyleChoiceIcon,\r\n}) => {\r\n const showChoiceIconAhead = showCallToAction && callToAction;\r\n\r\n return (\r\n \r\n
\r\n )}\r\n {businessName && {businessName}
}\r\n \r\n {showChoiceIconAhead && showChoiceIcon && (showBrightStyleChoiceIcon ?
\r\n );\r\n};\r\n\r\nBusinessNameWithChoiceIcon.propTypes = {\r\n businessName: PropTypes.string,\r\n showBusinessName: PropTypes.bool.isRequired,\r\n showAdIcon: PropTypes.bool.isRequired,\r\n showChoiceIcon: PropTypes.bool.isRequired,\r\n showCallToAction: PropTypes.bool,\r\n callToAction: PropTypes.string,\r\n classes: PropTypes.shape({\r\n adsLabelClassName: PropTypes.string,\r\n placementCallToAction: PropTypes.string,\r\n }).isRequired,\r\n showCallToActionAsLink: PropTypes.bool,\r\n};\r\n\r\nBusinessNameWithChoiceIcon.defaultProps = {\r\n businessName: undefined,\r\n showCallToAction: false,\r\n callToAction: undefined,\r\n showCallToActionAsLink: false,\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\n\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getLargeAdChoiceIconStyles } from '../styles';\r\n\r\nconst CircleRightArrowImpl = ({ classes, customizedClassName }) => (\r\n {businessName}
}\r\n {!showChoiceIconAhead && showChoiceIcon && (showBrightStyleChoiceIcon ? \r\n \r\n
\r\n);\r\n\r\nexport const CircleRightArrow = withUAPLThemedStyles(\r\n CircleRightArrowImpl,\r\n getLargeAdChoiceIconStyles,\r\n { componentName: 'LargeChoiceIcon' }\r\n);\r\n","export const getLargeAdChoiceIconStyles = (/* theme */) => ({\r\n largeIconRoot: {\r\n width: 36,\r\n height: 36,\r\n backgroundColor: 'rgba(33, 105, 235, 1)',\r\n boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.25)',\r\n borderRadius: '50px',\r\n },\r\n arrowIcon: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n margin: 'auto',\r\n },\r\n});\r\n","import React from 'react';\r\n\r\nexport const ThreeDot = ({ threeDotClassName }) => (\r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const OutlookPcDesktopUnread = ({ customizedUnreadClassName }) => (\r\n \r\n \r\n \r\n
\r\n);\r\n\r\nexport const OutlookMobileWebUnread = ({ customizedUnreadClassName }) => (\r\n \r\n);\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport { PlacementText } from './placement-text';\r\nimport { PlacementAction } from './placement-action';\r\n\r\nexport const DescriptionWithAction = ({\r\n isMultiLine,\r\n description,\r\n descriptionWithActionClassName,\r\n placementDescriptionClassName,\r\n placementCallToActionClassName,\r\n placementCallToActionAsLinkClassName,\r\n showCallToActionAsLink,\r\n callToAction,\r\n}) => (\r\n \r\n
\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { isValidUrl } from '@bingads-webui/url-util';\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\n\r\nimport {\r\n MMAPlacementCard,\r\n AdLabel,\r\n PlacementGradient,\r\n PlacementHeadline,\r\n PlacementFinalUrl,\r\n PlacementDescription,\r\n PlacementAction,\r\n BusinessNameWithAdsLabel,\r\n} from '../shared-components';\r\nimport dotsIcon from './media/dots.svg';\r\n\r\nexport const AdPlacementMmaBase = ({\r\n placementData, // UAPVMSingleImagePlacement\r\n isEnabled,\r\n\r\n showShortHeadline,\r\n shortHeadline,\r\n isMultiLineShortHeadline,\r\n\r\n showLongHeadline,\r\n longHeadline,\r\n isMultiLineLongHeadline,\r\n\r\n showFinalUrl,\r\n finalUrl,\r\n isMultiLineFinalUrl,\r\n displayUrl,\r\n displayFinalUrlOrigin,\r\n\r\n showDescription,\r\n description,\r\n isMultiLineDescription,\r\n\r\n showCallToAction,\r\n callToAction,\r\n\r\n showAdLabel,\r\n showGradient,\r\n\r\n showBusinessName,\r\n businessName,\r\n showBusinessNameAdLabel,\r\n showAdsIcon,\r\n\r\n showLogo,\r\n logo,\r\n\r\n showDots,\r\n\r\n i18n, // may need to set window._TL_ in other platforms\r\n classes,\r\n}) => {\r\n const {\r\n placementMeta, placementCropping, imageMeta, effectiveImageUrl, effectiveImageWidth, effectiveImageHeight, expandedPlacementCropping,\r\n } = placementData || {};\r\n const {\r\n previewHeight, aspectRatio, logoHeight, imageBorderRadius,\r\n } = placementMeta || {};\r\n\r\n // const srcForCroppedImageView = showImage && this.props.image.FinalSrc;\r\n const imagePreviewWidth = previewHeight * aspectRatio;\r\n\r\n let finalUrlOrigin;\r\n if (displayFinalUrlOrigin && isValidUrl(finalUrl)) {\r\n finalUrlOrigin = new URL(finalUrl).origin;\r\n }\r\n\r\n if (!placementData || !imageMeta) {\r\n return null;\r\n }\r\n\r\n const cropping = expandedPlacementCropping || placementCropping;\r\n\r\n return (\r\n \r\n {showAdLabel &&
\r\n \r\n {showLogo && logo &&\r\n 
\r\n )}\r\n {showShortHeadline && (\r\n
\r\n \r\n
\r\n }\r\n {showDots && (\r\n \r\n
\r\n \r\n
\r\n {businessName}
\r\n {showFinalUrl &&\r\n \r\n {\r\n imageMeta.url &&\r\n
\r\n \r\n {showGradient && }\r\n
\r\n {CustomizedComponent && \r\n {showBusinessNameWithLogoTop && (\r\n
\r\n {showAdChoiceIconArea && (\r\n \r\n
\r\n \r\n {\r\n imagesWithPadding.map(({\r\n imageMeta, placementCropping, effectiveImageUrl, effectiveImageWidth, effectiveImageHeight, expandedPlacementCropping,\r\n }, idx) => {\r\n const cropping = expandedPlacementCropping || placementCropping;\r\n return (\r\n // eslint-disable-next-line react/no-array-index-key\r\n
\r\n \r\n
);\r\n })\r\n }\r\n \r\n \r\n {\r\n imagesWithPadding.map(({\r\n imageMeta, placementCropping, effectiveImageUrl, effectiveImageWidth, effectiveImageHeight, expandedPlacementCropping,\r\n }, idx) => {\r\n const cropping = expandedPlacementCropping || placementCropping;\r\n return (\r\n \r\n );\r\n })\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n);\r\n\r\nBingSearchPlacementBase.propTypes = {\r\n placementData: PropTypes.shape({}).isRequired, // UAPVMSingleImagePlacement\r\n longHeadline: PropTypes.string,\r\n finalUrl: PropTypes.string,\r\n displayUrl: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n isClickDisabled: PropTypes.bool,\r\n showLogo: PropTypes.bool,\r\n logo: PropTypes.shape({\r\n Src: PropTypes.string,\r\n Width: PropTypes.number,\r\n Height: 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 i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n placementCard: PropTypes.string,\r\n placementTextContainer: PropTypes.string,\r\n placementAdsLabel: PropTypes.string,\r\n placementShortHeadline: PropTypes.string,\r\n placementLongHeadline: PropTypes.string,\r\n placementFinalUrl: PropTypes.string,\r\n placementDescriptionContainer: PropTypes.string,\r\n placementDescription: PropTypes.string,\r\n }).isRequired,\r\n adExtensionContainerClassName: PropTypes.string,\r\n};\r\n\r\nBingSearchPlacementBase.defaultProps = {\r\n longHeadline: undefined,\r\n finalUrl: undefined,\r\n displayUrl: undefined,\r\n description: undefined,\r\n businessName: undefined,\r\n isClickDisabled: false,\r\n showLogo: false,\r\n logo: undefined,\r\n adExtensionContainerClassName: undefined,\r\n};\r\n\r\nexport const AdPlacementBingSearchText = withUAPLThemedStyles(\r\n props => (\r\n \r\n {showLogo && logo &&\r\n
\r\n {children && (\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n {businessName}
\r\n \r\n
\r\n \r\n {children}\r\n
\r\n )}\r\n \r\n
\r\n ),\r\n getBingSearchTextDesktopPlacementStyles,\r\n { componentName: 'AdPlacementBingSearchTextDesktop' }\r\n);\r\n\r\nexport const AdPlacementBingSearchTextMobile = withUAPLThemedStyles(\r\n props => (\r\n \r\n 
\r\n
\r\n \r\n
\r\n ),\r\n getBingSearchTextMobilePlacementStyles,\r\n { componentName: 'AdPlacementBingSearchTextMobile' }\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 { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\nimport { PermissionsContext, withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\n\r\nimport { getOutlookMobilePlacementStyles, getOutlookWebPlacementStyles, getOutlookWebRefreshedPlacementStyles, getOutlookMobileRefreshedPlacementStyles } from '../styles';\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport {\r\n BusinessNameWithAdsLabel,\r\n PlacementHeadline,\r\n PlacementDescription,\r\n AdLabel,\r\n ThreeDot,\r\n OutlookMobileWebUnread,\r\n OutlookPcDesktopUnread,\r\n DescriptionWithAction,\r\n} from '../shared-components';\r\n\r\nconst OutlookPlacementBase = ({\r\n placementData, // UAPVMSingleImagePlacement\r\n businessName,\r\n shortHeadline,\r\n isMultiLineShortHeadline,\r\n finalUrl,\r\n displayUrl,\r\n description,\r\n isMultiLineDescription,\r\n showLogo,\r\n logo,\r\n i18n, // may need to set window._TL_ in other platforms\r\n classes,\r\n}) => (\r\n \r\n
\r\n \r\n \r\n {showLogo && logo &&\r\n
\r\n);\r\n\r\nOutlookPlacementBase.propTypes = {\r\n placementData: PropTypes.shape({}).isRequired, // UAPVMSingleImagePlacement\r\n businessName: PropTypes.string,\r\n shortHeadline: PropTypes.string,\r\n isMultiLineShortHeadline: PropTypes.bool,\r\n finalUrl: PropTypes.string,\r\n displayUrl: PropTypes.string,\r\n\r\n description: PropTypes.string,\r\n isMultiLineDescription: PropTypes.bool,\r\n\r\n showLogo: PropTypes.bool,\r\n logo: PropTypes.shape({\r\n Src: PropTypes.string,\r\n Width: PropTypes.number,\r\n Height: 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\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n placementCard: PropTypes.string,\r\n placementTextContainer: PropTypes.string,\r\n placementBusinessNameWithAdsLabel: PropTypes.string,\r\n placementShortHeadline: PropTypes.string,\r\n placementDescription: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nOutlookPlacementBase.defaultProps = {\r\n businessName: undefined,\r\n shortHeadline: undefined,\r\n isMultiLineShortHeadline: false,\r\n finalUrl: undefined,\r\n displayUrl: undefined,\r\n description: undefined,\r\n isMultiLineDescription: false,\r\n showLogo: false,\r\n logo: undefined,\r\n};\r\n\r\nconst OutlookRefreshedPlacementBase = ({\r\n placementData, // UAPVMSingleImagePlacement\r\n businessName,\r\n shortHeadline,\r\n isMultiLineShortHeadline,\r\n finalUrl,\r\n displayUrl,\r\n description,\r\n isMultiLineDescription,\r\n showLogo,\r\n showThreeDot,\r\n logo,\r\n i18n, // may need to set window._TL_ in other platforms\r\n classes,\r\n showDescriptionWithAction,\r\n callToAction,\r\n showCallToActionAsLink,\r\n customizedUnreadComponent: CustomizedUnreadComponent,\r\n}) => (\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n {CustomizedUnreadComponent && \r\n {showLogo && logo &&\r\n
\r\n);\r\n\r\nexport const AdPlacementOutlookMobile = withPermissions((props1) => {\r\n const permissions = useContext(PermissionsContext);\r\n const isAdPreviewRefreshEnabled = _.get(permissions, ['dynamic', 'AdPreviewRefresh']);\r\n\r\n const StyledComp = isAdPreviewRefreshEnabled ? withUAPLThemedStyles(\r\n props => (\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n ),\r\n getOutlookMobileRefreshedPlacementStyles,\r\n { componentName: 'AdPlacementOutlookMobile' }\r\n ) : withUAPLThemedStyles(\r\n props => (\r\n \r\n
\r\n ),\r\n getOutlookWebRefreshedPlacementStyles,\r\n { componentName: 'AdPlacementOutlookWeb' }\r\n ) : withUAPLThemedStyles(\r\n props => (\r\n \r\n
\r\n ),\r\n getOutlookWebPlacementStyles,\r\n { componentName: 'AdPlacementOutlookWeb' }\r\n );\r\n\r\n return {companyPageName}
}\r\n description={\r\n {imageMeta && imageMeta.url && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n\r\n const renderCallToAction = () => (\r\n \r\n );\r\n\r\n const renderFooter = () => (\r\n \r\n {headline} \r\n {showfinalUrl && {finalUrl} }\r\n
\r\n {callToAction && renderCallToAction()}\r\n \r\n
\r\n \r\n
\r\n {callToAction && renderCallToAction()}\r\n {companyPageName}
\r\n \r\n \r\n \r\n\r\n {showHeader && renderHeader()}\r\n\r\n {showIntroductoryText && {introductoryText} }\r\n\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nAdPlacementLinkedInSingleImageBase.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n placementData: PropTypes.shape({}),\r\n companyPageName: PropTypes.string,\r\n userProfileImageSrc: PropTypes.string,\r\n finalUrl: PropTypes.string,\r\n introductoryText: PropTypes.string,\r\n headline: PropTypes.string,\r\n callToAction: PropTypes.string,\r\n showHeader: PropTypes.bool,\r\n showIntroductoryText: PropTypes.bool,\r\n showFooter: PropTypes.bool,\r\n showCompanyInFooter: PropTypes.bool,\r\n showIntroductoryTextInFooter: PropTypes.bool,\r\n showfinalUrl: PropTypes.bool,\r\n};\r\n\r\nAdPlacementLinkedInSingleImageBase.defaultProps = {\r\n placementData: {},\r\n companyPageName: undefined,\r\n userProfileImageSrc: undefined,\r\n finalUrl: undefined,\r\n introductoryText: undefined,\r\n headline: undefined,\r\n callToAction: undefined,\r\n showHeader: false,\r\n showIntroductoryText: false,\r\n showFooter: false,\r\n showCompanyInFooter: false,\r\n showIntroductoryTextInFooter: false,\r\n showfinalUrl: false,\r\n};\r\n","\r\nimport React from 'react';\r\n\r\nimport { withUAPLThemedStyles } from '../../with-themed-styles';\r\nimport { AdPlacementLinkedInSingleImageBase } from './li-single-image-ad-placement-base';\r\nimport {\r\n getLinkedInSingleImageDesktopStyles,\r\n getLinkedInSingleImageMobileStyles,\r\n getLinkedInSingleImageMediumRectangleStyles,\r\n getLinkedInSingleImageMobileInterstitialStyles,\r\n getLinkedInSingleImageNativeStyles,\r\n} from '../../styles';\r\n\r\n\r\nexport const AdPlacementLinkedInSingleImageDesktop = withUAPLThemedStyles(\r\n props => (\r\n \r\n {renderImage()}\r\n\r\n {showFooter && !showCompanyInFooter && renderFooter()}\r\n {showFooter && showCompanyInFooter && renderFooterWithCompany()}\r\n
\r\n \r\n
\r\n);\r\n\r\nAppAdsBasePlacement.propTypes = {\r\n classes: PropTypes.shape({\r\n placementPreview: PropTypes.string,\r\n placementCard: PropTypes.string,\r\n phoneInnerContent: PropTypes.string,\r\n }),\r\n children: PropTypes.node,\r\n};\r\n\r\nAppAdsBasePlacement.defaultProps = {\r\n classes: {},\r\n children: null,\r\n};\r\n","import { getResponsiveSearchAdMobilePlacementStyles } from '../../styles';\r\n\r\nexport const getAppAdsBasePlacementStyles = () => ({\r\n placementCard: {\r\n width: 300,\r\n height: 600,\r\n border: '10px solid rgba(214, 214, 214, 1)',\r\n borderTopRightRadius: '30px',\r\n borderTopLeftRadius: '30px',\r\n borderBottom: 'none',\r\n },\r\n placementPreview: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n phoneInnerContent: {\r\n marginTop: 30,\r\n marginBottom: 30,\r\n height: '90%',\r\n marginLeft: 10,\r\n marginRight: 10,\r\n borderRadius: 10,\r\n },\r\n videoPlayerRoot: {\r\n height: '100%',\r\n width: '100%',\r\n backgroundColor: 'black',\r\n borderRadius: 10,\r\n },\r\n});\r\n\r\nexport const getAppAdsMobileStyles = () => {\r\n const {\r\n placementCard,\r\n placementTextContainer,\r\n placementContentContainer,\r\n ...rest\r\n } = getResponsiveSearchAdMobilePlacementStyles();\r\n const { placementCard: appAdsPlacementCard, ...appAdsStyles } = getAppAdsBasePlacementStyles();\r\n\r\n return {\r\n ...rest,\r\n ...appAdsStyles,\r\n placementCard: {\r\n ...placementCard,\r\n ...appAdsPlacementCard,\r\n width: '400px',\r\n height: '300px',\r\n },\r\n placementTextContainer: {\r\n ...placementTextContainer,\r\n flex: '1',\r\n },\r\n placementContentContainer: {\r\n ...placementContentContainer,\r\n marginTop: 10,\r\n boxShadow: '0px 0.511px 1.533px rgb(0 0 0 / 10%), 0px 2.72533px 6.132px rgb(0 0 0 / 13%)',\r\n borderRadius: '5.11px',\r\n border: '0.5px solid #ddd',\r\n background: '#fff',\r\n '&.placement-card-content': {\r\n height: 'auto',\r\n padding: '10px',\r\n },\r\n },\r\n };\r\n};\r\n\r\nexport const getAppAdsM365MobileStyles = () => {\r\n const { placementCard: appAdsPlacementCard, ...appAdsStyles } = getAppAdsBasePlacementStyles();\r\n\r\n return {\r\n ...appAdsStyles,\r\n placementCard: {\r\n ...appAdsPlacementCard,\r\n display: 'flex',\r\n width: '300px',\r\n height: '300px',\r\n '& .placement-card-content': {\r\n height: '130px',\r\n padding: '10px',\r\n boxShadow: '0px 0.511px 1.533px rgb(0 0 0 / 10%), 0px 2.72533px 6.132px rgb(0 0 0 / 13%)',\r\n marginTop: 30,\r\n border: '0.5px solid #ddd',\r\n background: '#fff',\r\n width: '100%',\r\n },\r\n },\r\n preview: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n previewContent: {\r\n border: '1px solid #C8C8C8',\r\n boxShadow: 'none',\r\n width: 340,\r\n height: 80,\r\n padding: '5px 10px 5px 15px',\r\n marginTop: 150,\r\n },\r\n placementBusinessNameWithAdsLabel: {\r\n display: 'block',\r\n color: 'black',\r\n textDecoration: 'none',\r\n fontSize: '20px !important',\r\n maxWidth: 300,\r\n verticalAlign: 'middle',\r\n lineHeight: '30px',\r\n marginTop: 0,\r\n '& .ads-label': {\r\n backgroundColor: 'blue !important',\r\n borderRadius: 4,\r\n height: 15,\r\n verticalAlign: 'middle',\r\n padding: '0 4px !important',\r\n width: 'auto',\r\n display: 'inline-block',\r\n position: 'static',\r\n margin: '0 4px 0 0',\r\n fontSize: 10,\r\n color: 'white !important',\r\n lineHeight: '15px',\r\n },\r\n '& .business-name': {\r\n fontSize: '20px !important',\r\n },\r\n },\r\n placementShortHeadline: {\r\n display: 'block',\r\n fontSize: 13,\r\n marginTop: 2,\r\n lineHeight: '19.5px',\r\n },\r\n placementDescription: {\r\n display: 'block',\r\n color: 'black',\r\n textDecoration: 'none',\r\n fontSize: 13,\r\n marginTop: 2,\r\n lineHeight: '19.5px',\r\n },\r\n description: {\r\n display: 'inline-block',\r\n },\r\n };\r\n};\r\n\r\nexport const getAppAdsMSNMobileStyles = () => {\r\n const { placementCard: appAdsPlacementCard, ...appAdsStyles } = getAppAdsBasePlacementStyles();\r\n\r\n return {\r\n ...appAdsStyles,\r\n placementCard: {\r\n ...appAdsPlacementCard,\r\n height: '300px',\r\n width: '400px',\r\n },\r\n msnDescription: {\r\n paddingTop: '5px',\r\n fontWeight: '600',\r\n fontSize: '14px',\r\n },\r\n msnPlacementImage: {\r\n '& .cropped-image-view': {\r\n borderRadius: '5px',\r\n },\r\n },\r\n };\r\n};\r\n\r\nexport const getAppAdsCasualGamesStyles = () => {\r\n const { placementCard: appAdsPlacementCard, ...appAdsStyles } = getAppAdsBasePlacementStyles();\r\n\r\n return {\r\n ...appAdsStyles,\r\n placementCard: {\r\n ...appAdsPlacementCard,\r\n height: '350px',\r\n width: '300px',\r\n },\r\n casualGamesBase: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n };\r\n};\r\n","import React from 'react';\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\n\r\nimport { AppAdsBasePlacement } from './app-ads-base-placement';\r\nimport { getAppAdsMSNMobileStyles } from '../../styles/ad-placement-components/app-ads-ad-placement-styles';\r\nimport { withUAPLThemedStyles } from '../../with-themed-styles';\r\nimport { PlacementDescription, BusinessNameWithAdsLabel } from '../../shared-components';\r\n\r\nexport const AppAdsMSNDisplayPlacement = withUAPLThemedStyles(\r\n (props) => {\r\n const {\r\n classes,\r\n placementData, // UAPVMSingleImagePlacement\r\n businessName,\r\n description,\r\n i18n, // may need to set window._TL_ in other platforms\r\n } = props;\r\n\r\n const {\r\n placementMeta, placementCropping, imageMeta, effectiveImageUrl, effectiveImageWidth, effectiveImageHeight, expandedPlacementCropping,\r\n } = placementData || {};\r\n const { previewHeight, aspectRatio } = placementMeta || {};\r\n if (!placementData || !imageMeta) {\r\n return null;\r\n }\r\n\r\n const cropping = expandedPlacementCropping || placementCropping;\r\n\r\n return (\r\n \r\n
\r\n \r\n {children}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n },\r\n getAppAdsMSNMobileStyles,\r\n { componentName: 'AppAdsMSNDisplayPlacement' }\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\n\r\nimport {\r\n getResponsiveOutlookMobilePlacementStyles,\r\n getResponsiveOutlookWebPlacementStyles,\r\n} from '../../styles';\r\nimport { withUAPLThemedStyles } from '../../with-themed-styles';\r\n\r\nimport {\r\n BusinessNameWithAdsLabel,\r\n PlacementHeadline,\r\n PlacementDescription,\r\n} from '../../shared-components';\r\n\r\nexport const OutlookPlacementBase = ({\r\n placementData, // UAPVMSingleImagePlacement\r\n businessName,\r\n shortHeadline,\r\n isMultiLineShortHeadline,\r\n finalUrl,\r\n displayUrl,\r\n description,\r\n isMultiLineDescription,\r\n showLogo,\r\n logo,\r\n i18n, // may need to set window._TL_ in other platforms\r\n classes,\r\n customClassName,\r\n}) => (\r\n \r\n {showLogo && logo &&\r\n
\r\n);\r\n\r\nOutlookPlacementBase.propTypes = {\r\n placementData: PropTypes.shape({}).isRequired, // UAPVMSingleImagePlacement\r\n businessName: PropTypes.string,\r\n shortHeadline: PropTypes.string,\r\n isMultiLineShortHeadline: PropTypes.bool,\r\n finalUrl: PropTypes.string,\r\n displayUrl: PropTypes.string,\r\n\r\n description: PropTypes.string,\r\n isMultiLineDescription: PropTypes.bool,\r\n\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n placementCard: PropTypes.string,\r\n placementTextContainer: PropTypes.string,\r\n placementBusinessNameWithAdsLabel: PropTypes.string,\r\n placementShortHeadline: PropTypes.string,\r\n placementDescription: PropTypes.string,\r\n }).isRequired,\r\n customClassName: PropTypes.string,\r\n showLogo: PropTypes.bool,\r\n logo: PropTypes.shape({\r\n Src: PropTypes.string,\r\n Width: PropTypes.number,\r\n Height: 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\n\r\nOutlookPlacementBase.defaultProps = {\r\n businessName: undefined,\r\n shortHeadline: undefined,\r\n isMultiLineShortHeadline: false,\r\n finalUrl: undefined,\r\n displayUrl: undefined,\r\n description: undefined,\r\n isMultiLineDescription: false,\r\n customClassName: undefined,\r\n showLogo: false,\r\n logo: undefined,\r\n};\r\n\r\nexport const ResponsiveAdPlacementOutlookMobile = withUAPLThemedStyles(\r\n props => (\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n ),\r\n getResponsiveOutlookWebPlacementStyles,\r\n { componentName: 'AdPlacementOutlookWeb' }\r\n);\r\n","const getOutlookPlacementBaseStyles = () => ({\r\n placementCard: {\r\n display: 'block',\r\n border: '1px solid #C8C8C8',\r\n margin: 'auto',\r\n overflow: 'hidden',\r\n position: 'relative !important',\r\n background: '#fff',\r\n boxSizing: 'content-box',\r\n boxShadow: 'none',\r\n\r\n '& .placement-card-content': {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n },\r\n placementTextContainer: undefined,\r\n placementBusinessNameWithAdsLabel: undefined,\r\n placementShortHeadline: undefined,\r\n placementDescription: undefined,\r\n placementLogoContainer: undefined,\r\n});\r\n\r\nexport const getResponsiveOutlookMobilePlacementStyles = (theme) => {\r\n const { placementCard, ...baseStyles } = getOutlookPlacementBaseStyles(theme);\r\n const styles = {\r\n ...baseStyles,\r\n\r\n placementCard: {\r\n ...placementCard,\r\n height: 80,\r\n borderRadius: '5.11px',\r\n padding: '5px 10px 5px 15px',\r\n '& .placement-card-content': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n },\r\n\r\n placementTextContainer: {\r\n display: 'block',\r\n fontSize: 10,\r\n lineHeight: '16px',\r\n color: '#0078d4',\r\n cursor: 'pointer',\r\n overflow: 'hidden',\r\n '&:hover': {\r\n color: '#004578',\r\n },\r\n },\r\n\r\n placementBusinessNameWithAdsLabel: {\r\n color: 'black !important',\r\n fontSize: '20px !important',\r\n maxWidth: 300,\r\n marginTop: '0px !important',\r\n lineHeight: '30px !important',\r\n verticalAlign: 'middle',\r\n\r\n '& .ads-label': {\r\n color: 'white !important',\r\n width: 'auto',\r\n height: 15,\r\n margin: '0 4px 0 0 !important',\r\n display: 'inline-block',\r\n padding: '0 4px !important',\r\n lineHeight: '15px !important',\r\n verticalAlign: 'middle',\r\n backgroundColor: 'blue !important',\r\n border: 'unset !important',\r\n borderRadius: '4px !important',\r\n },\r\n\r\n '& .business-name': {\r\n color: 'unset !important',\r\n padding: 'unset !important',\r\n fontSize: 'unset !important',\r\n marginTop: 'unset !important',\r\n lineHeight: 'unset !important',\r\n },\r\n },\r\n\r\n placementShortHeadline: {\r\n fontSize: 13,\r\n marginTop: 2,\r\n fontWeight: 200,\r\n lineHeight: '19.5px',\r\n paddingBottom: 5,\r\n },\r\n\r\n placementDescription: {\r\n color: 'black',\r\n fontSize: 13,\r\n marginTop: 2,\r\n lineHeight: '19.5px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n width: '100%',\r\n whiteSpace: 'nowrap',\r\n },\r\n placementLogoContainer: {\r\n paddingTop: 8,\r\n paddingRight: 16,\r\n '& .cropped-image-view': {\r\n borderRadius: '50%',\r\n },\r\n },\r\n };\r\n return styles;\r\n};\r\n\r\nexport const getResponsiveOutlookWebPlacementStyles = (theme) => {\r\n const { placementCard, ...baseStyles } = getOutlookPlacementBaseStyles(theme);\r\n const styles = {\r\n ...baseStyles,\r\n\r\n outlookWebCardRoot: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n },\r\n\r\n placementCard: {\r\n ...placementCard,\r\n borderRadius: 0,\r\n width: '100%',\r\n boxSizing: 'border-box',\r\n border: 'none',\r\n '& .placement-card-content': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n minWidth: 0,\r\n border: '1px solid #C8C8C8',\r\n },\r\n },\r\n\r\n placementTextContainer: {\r\n fontSize: 10,\r\n lineHeight: '16px',\r\n color: '#0078d4',\r\n cursor: 'pointer',\r\n overflow: 'hidden',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n whiteSpace: 'nowrap',\r\n minWidth: 0,\r\n '& .logo-and-businessname-container': {\r\n display: 'inline-block',\r\n position: 'relative',\r\n },\r\n },\r\n\r\n placementBusinessNameWithAdsLabel: {\r\n display: 'inline-block !important',\r\n margin: '0px 10px 0px 0px !important',\r\n verticalAlign: 'middle',\r\n\r\n '& .ads-label': {\r\n color: 'white !important',\r\n width: 'auto',\r\n height: 13,\r\n margin: '0 4px 0 0 !important',\r\n display: 'inline-block',\r\n padding: '0 4px !important',\r\n lineHeight: '15px !important',\r\n verticalAlign: 'middle',\r\n backgroundColor: 'blue !important',\r\n border: 'unset !important',\r\n borderRadius: '4px !important',\r\n opacity: '90%',\r\n position: 'relative',\r\n top: -2.5,\r\n },\r\n\r\n '& .business-name': {\r\n color: 'black !important',\r\n fontSize: '10px !important',\r\n lineHeight: '16px !important',\r\n padding: '4px 0px !important',\r\n },\r\n },\r\n\r\n placementShortHeadline: {\r\n display: 'inline-block',\r\n color: 'blue',\r\n padding: 4,\r\n fontWeight: 200,\r\n paddingBottom: 5,\r\n '&:before': {\r\n content: '\" \"',\r\n border: 'solid gray',\r\n display: 'inline-block',\r\n padding: '2px',\r\n transform: 'rotate(45deg) translateY(-3px)',\r\n borderWidth: '0 1.5px 1.5px 0',\r\n marginRight: 10,\r\n position: 'relative',\r\n left: -4,\r\n },\r\n '&::after': {\r\n content: '\"*\"',\r\n display: 'inline',\r\n padding: 4,\r\n color: 'gray',\r\n position: 'relative',\r\n left: 4,\r\n },\r\n },\r\n\r\n placementDescription: {\r\n display: 'inline-block',\r\n color: 'black',\r\n padding: 4,\r\n flex: '1 1 0px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n width: '100%',\r\n paddingBottom: 5,\r\n },\r\n\r\n placementLogoContainer: {\r\n padding: [2, 8, 2, 8],\r\n '& .cropped-image-view': {\r\n borderRadius: '50%',\r\n },\r\n },\r\n };\r\n return styles;\r\n};\r\n","import React from 'react';\r\n\r\nimport { getAppAdsM365MobileStyles } from '../../styles/ad-placement-components/app-ads-ad-placement-styles';\r\nimport { withUAPLThemedStyles } from '../../with-themed-styles';\r\nimport { OutlookPlacementBase } from '../responsive-ad-placements/responsive-outlook-placements';\r\n\r\nexport const AppAdsM365OutlookPlacement = withUAPLThemedStyles((props) => {\r\n const {\r\n placementData, // UAPVMSingleImagePlacement\r\n businessName,\r\n shortHeadline,\r\n isMultiLineShortHeadline,\r\n description,\r\n isMultiLineDescription,\r\n logo,\r\n finalUrl,\r\n displayUrl,\r\n i18n, // may need to set window._TL_ in other platforms\r\n classes,\r\n ...rest\r\n } = props;\r\n\r\n return (\r\n \r\n
\r\n\r\n );\r\n}, getAppAdsM365MobileStyles, { componentName: 'AppAdsM365OutlookPlacement' });\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport {\r\n AdLabel,\r\n AdditionalLineDisclaimer,\r\n PopupDisclaimer,\r\n PlacementHeadlineWithLink,\r\n PlacementFinalUrlWithLink,\r\n PlacementDescription,\r\n PlacementContentContainer,\r\n PlacementImage,\r\n} from '../../shared-components';\r\n\r\nexport const AdPlacementResponsiveSearchPropTypes = {\r\n propTypes: {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n placementContentContainer: PropTypes.string,\r\n placementCard: PropTypes.string,\r\n placementTextContainer: PropTypes.string,\r\n placementAdsLabel: PropTypes.string,\r\n placementLongHeadline: PropTypes.string,\r\n placementFinalUrl: PropTypes.string,\r\n placementDescriptionContainer: PropTypes.string,\r\n placementDescription: PropTypes.string,\r\n placementImage: PropTypes.string,\r\n placementInlineItems: PropTypes.string,\r\n }).isRequired,\r\n decoratorsData: PropTypes.shape({\r\n disclaimer: PropTypes.shape({\r\n DisclaimerLayout: PropTypes.string,\r\n }),\r\n imageExtension: PropTypes.shape({\r\n image: PropTypes.shape({}),\r\n enableCrop: PropTypes.bool,\r\n }),\r\n }),\r\n showAdDisclaimer: PropTypes.bool,\r\n showImageExtension: PropTypes.bool,\r\n previewImageAspectRatio: PropTypes.number,\r\n previewImageHeight: PropTypes.number,\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n displayUrl: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n },\r\n\r\n defaultProps: {\r\n showAdDisclaimer: false,\r\n showImageExtension: false,\r\n previewImageAspectRatio: 1.78,\r\n previewImageHeight: 100,\r\n decoratorsData: {},\r\n },\r\n};\r\n\r\nexport const ResponsiveSearchAdPlacementBase = (props) => {\r\n const {\r\n i18n,\r\n classes,\r\n showAdDisclaimer,\r\n showImageExtension,\r\n previewImageAspectRatio,\r\n previewImageHeight,\r\n decoratorsData,\r\n previewTexts: {\r\n longHeadline,\r\n description,\r\n displayUrl,\r\n url,\r\n },\r\n } = props;\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nResponsiveSearchAdPlacementBase.propTypes = AdPlacementResponsiveSearchPropTypes.propTypes;\r\n\r\nResponsiveSearchAdPlacementBase.defaultProps = AdPlacementResponsiveSearchPropTypes.defaultProps;\r\n","import React from 'react';\r\n\r\nimport { getAppAdsMobileStyles } from '../../styles/ad-placement-components/app-ads-ad-placement-styles';\r\nimport { withUAPLThemedStyles } from '../../with-themed-styles';\r\nimport { ResponsiveSearchAdPlacementBase } from '../responsive-search-ad-placements/responsive-search-ad-placement-base';\r\n\r\n\r\nexport const AppAdsBingSearchPlacementBase = (props) => {\r\n const {\r\n shortHeadline,\r\n description,\r\n displayUrl,\r\n url,\r\n placementData,\r\n classes,\r\n showImageExtension,\r\n ...rest\r\n } = props;\r\n\r\n const {\r\n placementMeta,\r\n placementCropping,\r\n imageMeta,\r\n effectiveImageUrl,\r\n effectiveImageWidth,\r\n effectiveImageHeight,\r\n expandedPlacementCropping,\r\n imageCropping,\r\n } = placementData || {};\r\n\r\n const cropping = expandedPlacementCropping || placementCropping;\r\n const { previewHeight, aspectRatio } = placementMeta || {};\r\n\r\n const decoratorsData = showImageExtension && {\r\n imageExtension: {\r\n image: {\r\n src: effectiveImageUrl || imageMeta.url,\r\n width: effectiveImageWidth || imageMeta.width,\r\n height: effectiveImageHeight || imageMeta.height,\r\n cropSettings: {\r\n SourceWidth: cropping.SourceWidth,\r\n SourceX: cropping.SourceX,\r\n SourceY: cropping.SourceY,\r\n },\r\n },\r\n enableCrop: true,\r\n },\r\n enableCrop: imageCropping,\r\n };\r\n\r\n return (\r\n \r\n
\r\n {\r\n showImageExtension && decoratorsData.imageExtension && decoratorsData.imageExtension.image &&\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};\r\n\r\nAppAdsVideoHorizontalPlacementInner.propTypes = {\r\n classes: PropTypes.shape({\r\n videoPlayerRoot: PropTypes.string,\r\n }),\r\n videos: PropTypes.arrayOf(PropTypes.shape({\r\n src: PropTypes.string,\r\n })),\r\n};\r\n\r\nAppAdsVideoHorizontalPlacementInner.defaultProps = {\r\n classes: {},\r\n videos: null,\r\n};\r\n\r\nexport const AppAdsVideoHorizontalPlacement = withUAPLThemedStyles(\r\n props => (\r\n \r\n
\r\n \r\n );\r\nMMAPlacementCardImpl.propTypes = {\r\n isEnabled: PropTypes.bool,\r\n url: PropTypes.string,\r\n children: PropTypes.node.isRequired,\r\n mmaPlacementCardClassName: PropTypes.string,\r\n classes: PropTypes.shape({\r\n mmaPlacementCardRoot: PropTypes.string,\r\n mmaPlacementCardDisabled: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nMMAPlacementCardImpl.defaultProps = {\r\n isEnabled: true,\r\n url: undefined,\r\n mmaPlacementCardClassName: undefined,\r\n};\r\n\r\nexport const ResponsiveMMAPlacementCard = withUAPLThemedStyles(\r\n MMAPlacementCardImpl,\r\n getResponsivePlacementCardStyles,\r\n { componentName: 'MMAPlacementCard ' }\r\n);\r\n","export const getResponsivePlacementCardStyles = () => ({\r\n mmaPlacementCardRoot: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n\r\n position: 'relative',\r\n boxSizing: 'content-box',\r\n overflow: 'hidden',\r\n background: 'transparent',\r\n margin: 'auto',\r\n\r\n '& .card-parent': {\r\n width: '100%',\r\n '& .placement-card-content': {\r\n boxShadow: '0px 0.511px 1.533px rgb(0 0 0 / 10%), 0px 2.72533px 6.132px rgb(0 0 0 / 13%)',\r\n border: 'solid thin #ddd',\r\n borderRadius: 5.11,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n overflow: 'hidden',\r\n margin: 'auto',\r\n position: 'relative',\r\n },\r\n },\r\n },\r\n mmaPlacementCardDisabled: {\r\n opacity: 0.5,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\n\r\nimport {\r\n AdLabel,\r\n PlacementGradient,\r\n PlacementHeadline,\r\n PlacementFinalUrl,\r\n PlacementDescription,\r\n PlacementAction,\r\n BusinessNameWithAdsLabel,\r\n} from '../../shared-components';\r\n\r\nimport { ResponsiveMMAPlacementCard } from './responsive-mma-placement-card';\r\n\r\nexport const ResponsiveAdPlacementMmaBase = ({\r\n placementData, // UAPVMSingleImagePlacement\r\n isEnabled,\r\n customClassName,\r\n imagePreviewHeight,\r\n\r\n showShortHeadline,\r\n shortHeadline,\r\n isMultiLineShortHeadline,\r\n\r\n showLongHeadline,\r\n longHeadline,\r\n isMultiLineLongHeadline,\r\n\r\n showFinalUrl,\r\n finalUrl,\r\n isMultiLineFinalUrl,\r\n displayUrl,\r\n\r\n showDescription,\r\n description,\r\n isMultiLineDescription,\r\n\r\n showCallToAction,\r\n callToAction,\r\n\r\n showAdLabel,\r\n showGradient,\r\n\r\n showBusinessName,\r\n businessName,\r\n showBusinessNameAdLabel,\r\n\r\n showLogo,\r\n logo,\r\n\r\n i18n, // may need to set window._TL_ in other platforms\r\n classes,\r\n}) => {\r\n const {\r\n placementMeta, placementCropping, imageMeta, effectiveImageUrl, effectiveImageWidth, effectiveImageHeight, expandedPlacementCropping,\r\n } = placementData || {};\r\n const { previewHeight, aspectRatio, logoHeight } = placementMeta || {};\r\n if (!placementData || !imageMeta) {\r\n return null;\r\n }\r\n\r\n const finalImagePreviewHeight = imagePreviewHeight > 0 ? imagePreviewHeight : previewHeight;\r\n\r\n const cropping = expandedPlacementCropping || placementCropping;\r\n\r\n return (\r\n \r\n {url && (\r\n \r\n {children}\r\n \r\n )}\r\n {!url && (\r\n \r\n {children}\r\n
\r\n )}\r\n \r\n {showAdLabel &&
\r\n \r\n {showLogo && logo &&\r\n
\r\n \r\n
\r\n }\r\n {showShortHeadline && (\r\n \r\n
\r\n \r\n
\r\n {businessName}
\r\n {showFinalUrl &&\r\n \r\n
\r\n);\r\n\r\nBingSearchPlacementBase.propTypes = {\r\n showShortHeadline: PropTypes.bool,\r\n shortHeadline: PropTypes.string,\r\n isMultiLineShortHeadline: PropTypes.bool,\r\n\r\n showLongHeadline: PropTypes.bool,\r\n longHeadline: PropTypes.string,\r\n isMultiLineLongHeadline: PropTypes.bool,\r\n\r\n showFinalUrl: PropTypes.bool,\r\n finalUrl: PropTypes.string,\r\n isMultiLineFinalUrl: PropTypes.bool,\r\n displayUrl: PropTypes.string,\r\n\r\n description: PropTypes.string,\r\n isMultiLineDescription: PropTypes.bool,\r\n\r\n businessName: PropTypes.string,\r\n placementData: PropTypes.shape({}), // UAPVMSingleImagePlacement\r\n showLogo: PropTypes.bool,\r\n logo: PropTypes.shape({\r\n Src: PropTypes.string,\r\n Width: PropTypes.number,\r\n Height: 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\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n placementCard: PropTypes.string,\r\n placementTextContainer: PropTypes.string,\r\n placementAdsLabel: PropTypes.string,\r\n placementShortHeadline: PropTypes.string,\r\n placementLongHeadline: PropTypes.string,\r\n placementFinalUrl: PropTypes.string,\r\n placementDescriptionContainer: PropTypes.string,\r\n placementDescription: PropTypes.string,\r\n placementLogoContainer: PropTypes.string,\r\n adExtensionContainer: PropTypes.string,\r\n }).isRequired,\r\n customClassName: PropTypes.string,\r\n};\r\n\r\nBingSearchPlacementBase.defaultProps = {\r\n showShortHeadline: false,\r\n showLongHeadline: false,\r\n showFinalUrl: false,\r\n\r\n shortHeadline: undefined,\r\n isMultiLineShortHeadline: false,\r\n longHeadline: undefined,\r\n isMultiLineLongHeadline: false,\r\n finalUrl: undefined,\r\n displayUrl: undefined,\r\n isMultiLineFinalUrl: false,\r\n description: undefined,\r\n isMultiLineDescription: false,\r\n customClassName: undefined,\r\n businessName: undefined,\r\n showLogo: false,\r\n logo: undefined,\r\n placementData: {},\r\n};\r\n\r\nexport const ResponsiveAdPlacementBingSearchText = withUAPLThemedStyles(\r\n props => (\r\n \r\n \r\n
\r\n \r\n {showLogo && logo &&\r\n
\r\n {children && (\r\n \r\n
\r\n }\r\n {showShortHeadline && (\r\n \r\n
\r\n \r\n
\r\n {businessName}
\r\n \r\n
\r\n \r\n {children}\r\n
\r\n )}\r\n \r\n \r\n {\r\n imageMeta.url &&\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('10:36'))}
\r\n {i18n.getString(_TL_('Tuesday, October 18'))}
\r\n \r\n 
\r\n
\r\n \r\n {\r\n hotspots && hotspots[0] && hotspots[0].placement === 'Center' &&\r\n (\r\n // eslint-disable-next-line react/no-array-index-key\r\n
\r\n \r\n
\r\n )\r\n }\r\n {hotspots[0].title}
\r\n {hotspots[0].desc}
\r\n {hotspots[0].actionText}
\r\n {hotspots[0].uri}
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n hotspots && hotspots[0] && hotspots[0].placement === 'TopLeft' &&\r\n (\r\n // eslint-disable-next-line react/no-array-index-key\r\n
\r\n \r\n
\r\n )\r\n }\r\n {hotspots[0].title}
\r\n {hotspots[0].desc}
\r\n {hotspots[0].actionText}
\r\n \r\n
\r\n);\r\n\r\nexport const ResponsiveAdPlacementBoostProngFeed191x100 = ({\r\n customClassName,\r\n ...rest\r\n}) => (\r\n \r\n
\r\n);\r\n\r\nexport const ResponsiveAdPlacementBoostCoachmark175x100 = ({\r\n customClassName,\r\n ...rest\r\n}) => (\r\n \r\n
\r\n);\r\n\r\nexport const ResponsiveAdPlacementBoostStartMenu = ({\r\n customClassName,\r\n ...rest\r\n}) => (\r\n \r\n
\r\n);\r\n\r\nexport const ResponsiveAdPlacementBoostActionCenter = ({\r\n customClassName,\r\n ...rest\r\n}) => (\r\n \r\n
\r\n);\r\n\r\nexport const ResponsiveAdPlacementBoostBanner = ({\r\n customClassName,\r\n ...rest\r\n}) => (\r\n \r\n
\r\n);\r\n\r\nconst BoostWindowsSpotlight191x100 = withUAPLThemedStyles(\r\n UnstyledWindowsSpotlight191x100,\r\n getResponsiveBoostWindowsSpotlight191x100Styles,\r\n { componentName: 'ResponsiveAdPlacementBoostWindowsSpotlight191x100' }\r\n);\r\n\r\nexport const ResponsiveAdPlacementBoostWindowsSpotlight191x100 = ({\r\n customClassName,\r\n ...rest\r\n}) => (\r\n \r\n
\r\n);\r\n","import React from 'react';\r\n\r\nimport { withUAPLThemedStyles } from '../../with-themed-styles';\r\nimport { AdPlacementMmaBase } from '../mma-ad-placement-base';\r\n\r\nimport {\r\n getBoostHeroImageCarouselStyles,\r\n getBoostProngFeed191x100Styles,\r\n getBoostCoachmark175x100Styles,\r\n} from '../../styles';\r\n\r\nexport const AdPlacementBoostHeroImageCarousel = withUAPLThemedStyles(\r\n props => (\r\n \r\n
\r\n }\r\n \r\n {showSuggested && (\r\n
\r\n \r\n 
\r\n
\r\n )}\r\n {i18n.getString(_TL_('Suggested'))}
\r\n \r\n {showShortHeadline && (\r\n
\r\n \r\n {showCallToAction && callToAction && ( // add a space before each capital letter, e.g. \"ActNow\" => \"Act Now\"\r\n
\r\n \r\n {\r\n imageMeta.url &&\r\n
\r\n {i18n.getString(_TL_('Discover'))}
\r\n \r\n
\r\n \r\n
\r\n ),\r\n getResponsiveSearchAdDesktopPlacementStyles,\r\n { componentName: 'AdPlacementResponsiveSearchDesktop' }\r\n);\r\n\r\nexport const AdPlacementResponsiveSearchMobile = withUAPLThemedStyles(\r\n props => (\r\n \r\n \r\n
\r\n \r\n
\r\n ),\r\n getResponsiveSearchAdMobilePlacementStyles,\r\n { componentName: 'AdPlacementResponsiveSearchMobile' }\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { withUAPLThemedStyles } from '../../with-themed-styles';\r\nimport { getDynamicSearchAdPlacementStyles } from '../../styles';\r\n\r\nimport {\r\n AdLabel,\r\n PlacementHeadline,\r\n PlacementFinalUrlWithLink,\r\n PlacementDescription,\r\n PlacementContentContainer,\r\n} from '../../shared-components';\r\n\r\nexport const AdPlacementDynamicSearchPropTypes = {\r\n propTypes: {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n placementContentContainer: PropTypes.string,\r\n placementCard: PropTypes.string,\r\n placementTextContainer: PropTypes.string,\r\n placementAdsLabel: PropTypes.string,\r\n placementDisplayUrl: PropTypes.string,\r\n placementDescriptionContainer: PropTypes.string,\r\n placementDescription: PropTypes.string,\r\n }).isRequired,\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n displayUrl: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n },\r\n defaultProps: {\r\n },\r\n};\r\n\r\nexport const DynamicSearchAdPlacementBase = (props) => {\r\n const {\r\n i18n,\r\n classes,\r\n previewTexts: {\r\n headline,\r\n description,\r\n finalUrl,\r\n displayUrl,\r\n },\r\n } = props;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nDynamicSearchAdPlacementBase.propTypes = AdPlacementDynamicSearchPropTypes.propTypes;\r\n\r\nDynamicSearchAdPlacementBase.defaultProps = AdPlacementDynamicSearchPropTypes.defaultProps;\r\n\r\nexport const AdPlacementDynamicSearch = withUAPLThemedStyles(\r\n props => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Dynamically generated ad'))}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nVideoPlacementInner.propTypes = {\r\n classes: PropTypes.shape({\r\n videoPlayerRoot: PropTypes.string,\r\n }),\r\n videos: PropTypes.arrayOf(PropTypes.shape({\r\n src: PropTypes.string,\r\n })),\r\n};\r\n\r\nVideoPlacementInner.defaultProps = {\r\n classes: {},\r\n videos: null,\r\n};\r\n\r\nexport const VideoPlacement = withUAPLThemedStyles(\r\n props => (\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nContainerBase.propTypes = {\r\n titleText: PropTypes.string,\r\n isValid: PropTypes.bool,\r\n onRenderHeader: PropTypes.func,\r\n onRenderFooter: PropTypes.func,\r\n onRenderPlacement: PropTypes.func,\r\n classes: PropTypes.shape({\r\n adPreviewContainer: PropTypes.string,\r\n adPreviewContainerError: PropTypes.string,\r\n adPreviewContainerHeader: PropTypes.string,\r\n adPreviewContainerTitle: PropTypes.string,\r\n adPreviewPlacementContainer: PropTypes.string,\r\n adPreviewContainerFooter: PropTypes.string,\r\n }).isRequired,\r\n children: PropTypes.node.isRequired,\r\n previewContainerClassName: PropTypes.string,\r\n containerHeaderClassName: PropTypes.string,\r\n containerTitleClassName: PropTypes.string,\r\n containerFooterClassName: PropTypes.string,\r\n placementContainerClassName: PropTypes.string,\r\n};\r\n\r\nContainerBase.defaultProps = {\r\n titleText: undefined,\r\n onRenderHeader: undefined,\r\n onRenderFooter: undefined,\r\n onRenderPlacement: undefined,\r\n isValid: true,\r\n previewContainerClassName: undefined,\r\n containerHeaderClassName: undefined,\r\n containerTitleClassName: undefined,\r\n containerFooterClassName: undefined,\r\n placementContainerClassName: undefined,\r\n};\r\n\r\nexport const AdPreviewPlacementContainerBase = withUAPLThemedStyles(\r\n ContainerBase,\r\n getAdPreviewContainerBaseStyles,\r\n { componentName: 'AdPreviewPlacementContainerBase' }\r\n);\r\n","export const getAdPreviewContainerBaseStyles = (components, { palette = {} } = {}) => ({\r\n adPreviewContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n background: 'white',\r\n boxShadow: '0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)',\r\n borderRadius: 6,\r\n },\r\n adPreviewContainerError: {\r\n border: `1px solid ${palette.orange}`,\r\n },\r\n adPreviewContainerHeader: {\r\n display: 'flex',\r\n padding: [12, 12, 0, 16],\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n },\r\n adPreviewContainerTitle: {\r\n },\r\n adPreviewPlacementContainer: {\r\n margin: 'auto',\r\n },\r\n adPreviewContainerFooter: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n});\r\n","//\r\n// each placement will use one of the following image types\r\n// the type defines the image size and aspect ratio\r\nexport const UAPImageType = {\r\n Image1x1: 'Image1x1',\r\n Image4x1: 'Image4x1',\r\n Image1x2: 'Image1x2',\r\n Image191x100: 'Image191x100',\r\n Image178x100: 'Image178x100',\r\n Image172x100: 'Image172x100',\r\n Image169x100: 'Image169x100',\r\n Image155x100: 'Image155x100',\r\n Image150x100: 'Image150x100',\r\n Image133x100: 'Image133x100',\r\n Image93x100: 'Image93x100',\r\n Image201x100: 'Image201x100',\r\n Image200x100: 'Image200x100',\r\n Image153x100: 'Image153x100',\r\n Image124x100: 'Image124x100',\r\n Image120x100: 'Image120x100',\r\n Image122x100: 'Image122x100',\r\n Image159x100: 'Image159x100',\r\n Image180x100: 'Image180x100',\r\n Image233x100: 'Image233x100',\r\n Image320x100: 'Image320x100',\r\n Image57x100: 'Image57x100',\r\n};\r\n\r\nexport const UAPVideoType = {\r\n VideoMedia16X9: 'VideoMedia16X9',\r\n VideoMedia5X4: 'VideoMedia5X4',\r\n VideoMedia1X1: 'VideoMedia1X1',\r\n VideoMedia4X5: 'VideoMedia4X5',\r\n VideoMedia9X16: 'VideoMedia9X16',\r\n};\r\n","//\r\n// uniquely identify a placement on supply side channels\r\n// - if a placement is used in more than one supply channels and share the same look,\r\n// then we could use one placement type to represent them all\r\nexport const UAPPlacementType = {\r\n // mma\r\n MMA_WideImage_4x1: 'MMA_WideImage_4x1',\r\n MMA_LandscapeImage_191x100: 'MMA_LandscapeImage_191x100',\r\n MMA_SquareImage_1x1: 'MMA_SquareImage_1x1',\r\n MMA_VerticalImage_1x2: 'MMA_VerticalImage_1x2',\r\n\r\n // audience ad (mma in msan)\r\n Audience_Network_WideImage_191x100: 'Audience_Network_WideImage_191x100',\r\n Audience_Network_SquareImage_1x1: 'Audience_Network_SquareImage_1x1',\r\n Microsoft_Edge_Single_Carousel_178x100: 'Microsoft_Edge_Single_Carousel_178x100',\r\n MSN_InArticle_Ad_150x100: 'MSN_InArticle_Ad_150x100',\r\n MSN_Small_Headline_133x100: 'MSN_Small_Headline_133x100',\r\n\r\n // audience ad (mma in msan) V2\r\n MsanV2_Microsoft_Edge_Carouse_l201x100: 'MsanV2_Microsoft_Edge_Carouse_l201x100',\r\n MsanV2_Microsoft_Edge_Mobile_1x1: 'MsanV2_Microsoft_Edge_Mobile_1x1',\r\n MsanV2_MSAN_Banner_2x1: 'MsanV2_MSAN_Banner_2x1',\r\n MsanV2_MSAN_River_191x100: 'MsanV2_MSAN_River_191x100',\r\n MsanV2_MSAN_Rectangle_120x100: 'MsanV2_MSAN_Rectangle_120x100',\r\n MsanV2_MSN_Carousel_169x100: 'MsanV2_MSN_Carousel_169x100',\r\n MsanV2_MSN_Partner_Stripe_153x100: 'MsanV2_MSN_Partner_Stripe_153x100',\r\n MsanV2_MSN_Restoday_124x100: 'MsanV2_MSN_Restoday_124x100',\r\n\r\n // pmax\r\n PMax_MMA_WideImage_4x1: 'PMax_MMA_WideImage_4x1',\r\n PMax_MMA_LandscapeImage_191x100: 'PMax_MMA_LandscapeImage_191x100',\r\n PMax_MMA_VerticalImage_1x2: 'PMax_MMA_VerticalImage_1x2',\r\n PMax_Audience_Network_WideImage_191x100: 'PMax_Audience_Network_WideImage_191x100',\r\n PMax_Audience_Network_SquareImage_1x1: 'PMax_Audience_Network_SquareImage_1x1',\r\n PMax_Microsoft_Edge_Single_Carousel_178x100: 'PMax_Microsoft_Edge_Single_Carousel_178x100',\r\n PMax_MSN_InArticle_Ad_150x100: 'PMax_MSN_InArticle_Ad_150x100',\r\n PMax_MSN_Small_Headline_133x100: 'PMax_MSN_Small_Headline_133x100',\r\n // pmax v2\r\n PMax_MMAV2_Microsoft_Edge_Single_Carousel_201x100: 'PMax_MMAV2_Microsoft_Edge_Single_Carousel_201x100',\r\n PMax_MMAV2_MSN_Single_Carousel_169x100: 'PMax_MMAV2_MSN_Single_Carousel_169x100',\r\n PMax_MMAV2_MSN_Restoday_124x100: 'PMax_MMAV2_MSN_Restoday_124x100',\r\n PMax_MMAV2_MSN_Partner_Stripe_153x100: 'PMax_MMAV2_MSN_Partner_Stripe_153x100',\r\n PMax_MMAV2_MSN_River_191x100: 'PMax_MMAV2_MSN_River_191x100',\r\n PMax_Video: 'PMax_Video',\r\n PMax_MMAV2_Microsoft_Edge_Mobile_1x1: 'PMax_MMAV2_Microsoft_Edge_Mobile_1x1',\r\n\r\n // Boost\r\n Boost_Hero_Image_Carousel_200x100: 'Boost_Hero_Image_Carousel_200x100',\r\n Boost_Hero_Image_Carousel_122x100: 'Boost_Hero_Image_Carousel_122x100',\r\n Boost_Hero_Image_Carousel_159x100: 'Boost_Hero_Image_Carousel_159x100',\r\n Boost_Hero_Image_Carousel_180x100: 'Boost_Hero_Image_Carousel_180x100',\r\n Boost_Hero_Image_Carousel_233x100: 'Boost_Hero_Image_Carousel_233x100',\r\n Boost_Hero_Image_Carousel_320x100: 'Boost_Hero_Image_Carousel_320x100',\r\n Boost_Hero_Image_Carousel_57x100: 'Boost_Hero_Image_Carousel_57x100',\r\n Boost_Windows_Spotlight_191x100: 'Boost_Windows_Spotlight_191x100',\r\n Boost_Discover_Card_1x1: 'Boost_Discover_Card_1x1',\r\n Boost_Start_Menu: 'Boost_Start_Menu',\r\n Boost_Action_Center: 'Boost_Action_Center',\r\n Boost_Banner: 'Boost_Banner',\r\n Boost_Prong1_Prong2_Feed_191x100: 'Boost_Prong1_Prong2_Feed_191x100',\r\n Boost_Coachmark_175x100: 'Boost_Coachmark_175x100',\r\n\r\n // image extension\r\n ImgExt_MMAV2_MSN_River_191x100: 'ImgExt_MMAV2_MSN_River_191x100',\r\n ImgExt_MMAV2_MSN_Single_Carousel_169x100: 'ImgExt_MMAV2_MSN_Single_Carousel_169x100',\r\n ImgExt_MMAV2_MSN_Microsoft_Edge_Mobile_1x1: 'ImgExt_MMAV2_MSN_Microsoft_Edge_Mobile_1x1',\r\n ImgExt_Audience_Network_WideImage_191x100: 'ImgExt_Audience_Network_WideImage_191x100',\r\n ImgExt_Audience_Network_SquareImage_1x1: 'ImgExt_Audience_Network_SquareImage_1x1',\r\n ImgExt_Microsoft_Edge_Single_Carousel_178x100: 'ImgExt_Microsoft_Edge_Single_Carousel_178x100',\r\n ImgExt_Bing_Desktop_SingleImage_Extension_178x100: 'ImgExt_Bing_Desktop_SingleImage_Extension_178x100',\r\n ImgExt_Microsoft_Edge_Medium_Headline_172x100: 'ImgExt_Microsoft_Edge_Medium_Headline_172x100',\r\n ImgExt_MSN_Single_Carousel_169x100: 'ImgExt_MSN_Single_Carousel_169x100',\r\n ImgExt_MSN_Medium_Headline_155x100: 'ImgExt_MSN_Medium_Headline_155x100',\r\n ImgExt_MSN_InArticle_Ad_150x100: 'ImgExt_MSN_InArticle_Ad_150x100',\r\n ImgExt_MSN_Small_Headline_133x100: 'ImgExt_MSN_Small_Headline_133x100',\r\n ImgExt_Bing_Desktop_MultiImage_Extension_133x100: 'ImgExt_Bing_Desktop_MultiImage_Extension_133x100',\r\n ImgExt_Bing_Mobile_MultiImage_Extension_133x100: 'ImgExt_Bing_Mobile_MultiImage_Extension_133x100',\r\n ImgExt_MSN_Double_Carousel_93x100: 'ImgExt_MSN_Double_Carousel_93x100',\r\n\r\n // text ads\r\n Outlook_Text_Mobile: 'TextOutlookMobile',\r\n Outlook_Text_Web: 'TextOutlookWeb',\r\n Bing_Search_Mobile: 'BingTextMobile',\r\n Bing_Search_Desktop: 'BingTextDesktop',\r\n Bing_Search_Text: 'BingText',\r\n\r\n // responsive mma\r\n Responsive_MMA_WideImage_4x1: 'Responsive_MMA_WideImage_4x1',\r\n Responsive_MMA_LandscapeImage_191x100: 'Responsive_MMA_LandscapeImage_191x100',\r\n Responsive_MMA_SquareImage_1x1: 'Responsive_MMA_SquareImage_1x1',\r\n Responsive_MMA_VerticalImage_1x2: 'Responsive_MMA_VerticalImage_1x2',\r\n\r\n // responsive audience ad (mma in msan)\r\n Responsive_Audience_Network_WideImage_191x100: 'Responsive_Audience_Network_WideImage_191x100',\r\n Responsive_Audience_Network_SquareImage_1x1: 'Responsive_Audience_Network_SquareImage_1x1',\r\n Responsive_Microsoft_Edge_Single_Carousel_178x100: 'Responsive_Microsoft_Edge_Single_Carousel_178x100',\r\n Responsive_MSN_InArticle_Ad_150x100: 'Responsive_MSN_InArticle_Ad_150x100',\r\n Responsive_MSN_Small_Headline_133x100: 'Responsive_MSN_Small_Headline_133x100',\r\n\r\n // responsive audience ad (mma in msan) V2\r\n Responsive_MsanV2_Microsoft_Edge_Carouse_l201x100: 'Responsive_MsanV2_Microsoft_Edge_Carouse_l201x100',\r\n Responsive_MsanV2_Microsoft_Edge_Mobile_1x1: 'Responsive_MsanV2_Microsoft_Edge_Mobile_1x1',\r\n Responsive_MsanV2_MSAN_Banner_2x1: 'Responsive_MsanV2_MSAN_Banner_2x1',\r\n Responsive_MsanV2_MSAN_River_191x100: 'Responsive_MsanV2_MSAN_River_191x100',\r\n Responsive_MsanV2_MSAN_Rectangle_120x100: 'Responsive_MsanV2_MSAN_Rectangle_120x100',\r\n Responsive_MsanV2_MSN_Carousel_169x100: 'Responsive_MsanV2_MSN_Carousel_169x100',\r\n Responsive_MsanV2_MSN_Partner_Stripe_153x100: 'Responsive_MsanV2_MSN_Partner_Stripe_153x100',\r\n Responsive_MsanV2_MSN_Restoday_124x100: 'Responsive_MsanV2_MSN_Restoday_124x100',\r\n\r\n // responsive text ads\r\n Responsive_Outlook_Text_Mobile: 'ResponsiveTextOutlookMobile',\r\n Responsive_Outlook_Text_Web: 'ResponsiveTextOutlookWeb',\r\n Responsive_Bing_Search_Text: 'ResponsiveBingText',\r\n\r\n // responsive boost ads\r\n Responsive_Boost_Windows_Spotlight_191x100: 'Responsive_Boost_Windows_Spotlight_191x100',\r\n Responsive_Boost_Discover_Card_1x1: 'Responsive_Boost_Discover_Card_1x1',\r\n Responsive_Boost_Start_Menu: 'Responsive_Boost_Start_Menu',\r\n Responsive_Boost_Action_Center: 'Responsive_Boost_Action_Center',\r\n Responsive_Boost_Banner: 'Responsive_Boost_Banner',\r\n Responsive_Boost_Prong1_Prong2_Feed_191x100: 'Responsive_Boost_Prong1_Prong2_Feed_191x100',\r\n Responsive_Boost_Coachmark_175x100: 'Responsive_Boost_Coachmark_175x100',\r\n\r\n // responsive search ads\r\n Responsive_Search: 'ResponsiveSearch',\r\n Responsive_Search_Desktop: 'ResponsiveSearchDesktop',\r\n Responsive_Search_Mobile: 'ResponsiveSearchMobile',\r\n\r\n // responsive pmax\r\n Responsive_PMax_MMA_WideImage_4x1: 'Responsive_PMax_MMA_WideImage_4x1',\r\n Responsive_PMax_MMA_LandscapeImage_191x100: 'Responsive_PMax_MMA_LandscapeImage_191x100',\r\n Responsive_PMax_MMA_VerticalImage_1x2: 'Responsive_PMax_MMA_VerticalImage_1x2',\r\n Responsive_PMax_Audience_Network_WideImage_191x100: 'Responsive_PMax_Audience_Network_WideImage_191x100',\r\n Responsive_PMax_Audience_Network_SquareImage_1x1: 'Responsive_PMax_Audience_Network_SquareImage_1x1',\r\n Responsive_PMax_Microsoft_Edge_Single_Carousel_178x100: 'Responsive_PMax_Microsoft_Edge_Single_Carousel_178x100',\r\n Responsive_PMax_MSN_InArticle_Ad_150x100: 'Responsive_PMax_MSN_InArticle_Ad_150x100',\r\n Responsive_PMax_MSN_Small_Headline_133x100: 'Responsive_PMax_MSN_Small_Headline_133x100',\r\n // responsive pmax v2\r\n Responsive_PMax_MMAV2_Microsoft_Edge_Single_Carousel_201x100: 'Responsive_PMax_MMAV2_Microsoft_Edge_Single_Carousel_201x100',\r\n Responsive_PMax_MMAV2_MSN_Single_Carousel_169x100: 'Responsive_PMax_MMAV2_MSN_Single_Carousel_169x100',\r\n Responsive_PMax_MMAV2_MSN_Restoday_124x100: 'Responsive_PMax_MMAV2_MSN_Restoday_124x100',\r\n Responsive_PMax_MMAV2_MSN_Partner_Stripe_153x100: 'Responsive_PMax_MMAV2_MSN_Partner_Stripe_153x100',\r\n Responsive_PMax_MMAV2_MSN_River_191x100: 'Responsive_PMax_MMAV2_MSN_River_191x100',\r\n Responsive_PMax_MMAV2_Microsoft_Edge_Mobile_1x1: 'Responsive_PMax_MMAV2_Microsoft_Edge_Mobile_1x1',\r\n\r\n // dynamic search ads\r\n Dynamic_Search: 'DynamicSearch',\r\n\r\n // linkedin ads\r\n LinkedIn_Single_Image_Desktop_Landscape: 'LinkedIn_Single_Image_Desktop_Landscape',\r\n LinkedIn_Single_Image_Mobile_Landscape: 'LinkedIn_Single_Image_Mobile_Landscape',\r\n LinkedIn_Single_Image_Medium_Rectangle_Landscape: 'LinkedIn_Single_Image_Medium_Rectangle_Landscape',\r\n LinkedIn_Single_Image_Mobile_Interstitial_Landscape: 'LinkedIn_Single_Image_Mobile_Interstitial_Landscape',\r\n LinkedIn_Single_Image_Native_Landscape: 'LinkedIn_Single_Image_Native_Landscape',\r\n\r\n LinkedIn_Single_Image_Desktop_Square: 'LinkedIn_Single_Image_Desktop_Square',\r\n LinkedIn_Single_Image_Mobile_Square: 'LinkedIn_Single_Image_Mobile_Square',\r\n LinkedIn_Single_Image_Medium_Rectangle_Square: 'LinkedIn_Single_Image_Medium_Rectangle_Square',\r\n LinkedIn_Single_Image_Mobile_Interstitial_Square: 'LinkedIn_Single_Image_Mobile_Interstitial_Square',\r\n LinkedIn_Single_Image_Native_Square: 'LinkedIn_Single_Image_Native_Square',\r\n\r\n LinkedIn_Single_Image_Mobile_Vertical: 'LinkedIn_Single_Image_Mobile_Vertical',\r\n LinkedIn_Single_Image_Medium_Rectangle_Vertical: 'LinkedIn_Single_Image_Medium_Rectangle_Vertical',\r\n LinkedIn_Single_Image_Mobile_Interstitial_Vertical: 'LinkedIn_Single_Image_Mobile_Interstitial_Vertical',\r\n LinkedIn_Single_Image_Native_Vertical: 'LinkedIn_Single_Image_Native_Vertical',\r\n\r\n Unified_App_Ads_Video_Horizontal: 'Unified_App_Ads_Video_Horizontal',\r\n Unified_App_Ads_Bing_Search: 'Unified_App_Ads_Bing_Search',\r\n Unified_App_Ads_Bing_Search_Text: 'Unified_App_Ads_Bing_Search_Text',\r\n Unified_App_Ads_Causal_Games_Dimensions: 'Unified_App_Ads_Causal_Games_Dimensions',\r\n Unified_App_Ads_M365_Outlook: 'Unified_App_Ads_M365_Outlook',\r\n Unified_App_Ads_MSN_Display: 'Unified_App_Ads_MSN_Display',\r\n // todo: video\r\n};\r\n","\r\nexport const UAPAdExtensionType = {\r\n SiteLink: 'SiteLink',\r\n Callout: 'Callout',\r\n Promotion: 'Promotion',\r\n StructuredSnippet: 'StructuredSnippet',\r\n Price: 'Price',\r\n};\r\n","import _ from 'underscore';\r\nimport {\r\n UAPImageType,\r\n UAPPlacementType as PT,\r\n UAPVideoType,\r\n // UAPPlacementMeta,\r\n} from '../@types';\r\n\r\nexport const UAPLPlacementMetaList /* : Record\r\n {onRenderHeader ? onRenderHeader(props) : (\r\n titleText &&
\r\n {titleText}
\r\n )}\r\n \r\n {onRenderPlacement ? onRenderPlacement(props) : children}\r\n
\r\n \r\n {onRenderFooter ? onRenderFooter() : null}\r\n
\r\n \r\n {placementComponentList}\r\n
\r\n ) : emptyView;\r\n};\r\n\r\nexport const AdPreviewGridLayout = withUAPLThemedStyles(\r\n GridLayout,\r\n getAdPreviewGridLayoutStyles,\r\n { componentName: 'AdPreviewGridLayout' }\r\n);\r\n","export const getAdPreviewGridLayoutStyles = (/* components, { palette = {} } = {} */) => ({\r\n adPreviewGridLayoutContainer: {\r\n display: 'grid',\r\n },\r\n});\r\n","/* eslint-disable react/prop-types */\r\n\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport React, { useMemo } from 'react';\r\n\r\nimport { getAdPlacementComponent } from './get-ad-placement-component';\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getAdPreviewSinglePlacementLayoutStyles } from '../styles';\r\nimport { pickSingleImageFromImageList } from '../ad-preview-model/use-ad-preview-model';\r\n\r\n// import {\r\n// UAPVMSingleImagePlacement as TSingleImageViewModel,\r\n// UAPVMPlacement as TMultiImageViewModel,\r\n// } from '../@types';\r\n\r\n// interface SinglePlacementLayoutProps {\r\n// placementData: TSingleImageViewModel | TMultiImageViewModel | undefined | null;\r\n// onRenderPlacement: Function;\r\n// onRenderEmptyView?: Function | undefined | null;\r\n// layoutContainerClassName?: String | undefined | null;\r\n// classes: {\r\n// adPreviewLayoutContainer: string;\r\n// };\r\n// }\r\n\r\nconst SinglePlacementLayout = ({\r\n placementData, // SinglePlacementLayoutProps\r\n onRenderPlacement,\r\n onRenderEmptyView,\r\n layoutContainerClassName,\r\n hasContainer = true,\r\n classes,\r\n}) => {\r\n const emptyView = useMemo(() => {\r\n if (onRenderEmptyView) {\r\n return onRenderEmptyView(placementData);\r\n }\r\n return null;\r\n }, [onRenderEmptyView, placementData]);\r\n\r\n const placementComponent = useMemo(() => {\r\n const { placementMeta, images, ...rest } = placementData || {};\r\n const { placementType, hasMultiImages = false } = placementMeta || {};\r\n const AdPlacementComponent = getAdPlacementComponent(placementType);\r\n if (AdPlacementComponent) {\r\n // convert multi-image model to single-image model if needed\r\n if (!hasMultiImages && !_.isEmpty(images)) {\r\n const selectedImage = pickSingleImageFromImageList(images) || {};\r\n const newPlacement = { placementMeta, ...selectedImage, ...rest };\r\n return onRenderPlacement(newPlacement, AdPlacementComponent);\r\n }\r\n return onRenderPlacement(placementData, AdPlacementComponent);\r\n }\r\n return null;\r\n }, [onRenderPlacement, placementData]);\r\n\r\n return hasContainer ? (\r\n \r\n {placementComponent || emptyView}\r\n
\r\n ) : (\r\n <>\r\n {placementComponent || emptyView}\r\n \r\n );\r\n};\r\n\r\nexport const AdPreviewSinglePlacementLayout = withUAPLThemedStyles(\r\n SinglePlacementLayout,\r\n getAdPreviewSinglePlacementLayoutStyles,\r\n { componentName: 'AdPreviewSinglePlacementLayout' }\r\n);\r\n","export const getAdPreviewSinglePlacementLayoutStyles = (/* components, { palette = {} } = {} */) => ({\r\n adPreviewLayoutContainer: {\r\n },\r\n});\r\n","import classNames from 'classnames';\r\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Carousel as BsCarousel } from 'react-bootstrap';\r\n\r\nconst bsProps = {\r\n bsClass: 'carousel',\r\n};\r\n\r\n// custom the Carousel component from react-bootstrap to put the\r\n// controls (left/right arrows) and indicators (dots) within a same\r\n// parent div, to make it easy to align them, like this: \"< .... >\"\r\n//\r\n// !!NOTE!!\r\n// The implementation is highly coupled with the internal implementation\r\n// of react-bootstrap Carousel, it calls the internal methods of BsCarousel\r\n// by using reference\r\nexport const CustomCarousel = (props) => {\r\n const carouselRef = useRef(null);\r\n const {\r\n controls, // ignore this prop\r\n indicators, // ignore this prop\r\n activeIndex,\r\n children,\r\n InjectedControls,\r\n carouselWrapperClassName,\r\n ...rest\r\n } = props;\r\n\r\n const [carouselInstance, setCarouselInstance] = useState(null);\r\n\r\n useEffect(() => {\r\n if (!carouselInstance) {\r\n setCarouselInstance(carouselRef.current);\r\n }\r\n }, [carouselInstance]);\r\n\r\n const [leftArrowControl, rightArrowControl] = useMemo(() => {\r\n if (carouselInstance) {\r\n return carouselInstance.renderControls({ ...props, bsProps });\r\n }\r\n return [undefined, undefined];\r\n }, [carouselInstance, props]);\r\n\r\n return (\r\n \r\n \r\n {children}\r\n \r\n
\r\n );\r\n};\r\n\r\nCustomCarousel.propTypes = {\r\n activeIndex: PropTypes.number.isRequired,\r\n controls: PropTypes.bool,\r\n indicators: PropTypes.bool,\r\n children: PropTypes.node,\r\n InjectedControls: PropTypes.element,\r\n carouselWrapperClassName: PropTypes.string,\r\n};\r\n\r\nCustomCarousel.defaultProps = {\r\n // use the default props from react-bootstrap Carousel, including default icons\r\n ...BsCarousel.defaultProps,\r\n //\r\n controls: false,\r\n indicators: false,\r\n children: null,\r\n InjectedControls: null,\r\n carouselWrapperClassName: null,\r\n};\r\n\r\nCustomCarousel.Caption = BsCarousel.Caption;\r\nCustomCarousel.Item = BsCarousel.Item;\r\n","import _, { map, isEmpty } from 'underscore';\r\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { Carousel } from '@bingads-webui-react/primitive-unthemed';\r\nimport { PlayPauseButtons } from '@bingads-webui-campaign-react/play-pause-buttons';\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getAdPlacementComponent } from './get-ad-placement-component';\r\nimport { getCarouselLayoutStyles } from '../styles/layout-components/carousel-layout-styles';\r\nimport { pickSingleImageFromImageList } from '../ad-preview-model/use-ad-preview-model';\r\nimport { CustomCarousel } from './custom-carousel-component';\r\n\r\nconst autoRotateInterval = 3000;\r\n\r\nexport const CarouselLayout = ({\r\n activeIndex,\r\n setActiveIndex,\r\n classes,\r\n customCarouselRootClassName,\r\n customCarouselLayoutStyles,\r\n customPlayPauseButtonsStyles,\r\n enableAutoRotate,\r\n startAutoRotating,\r\n i18n,\r\n onRenderEmptyView,\r\n onRenderPlacement,\r\n onActiveIndexChange,\r\n onRenderHeader,\r\n placementList,\r\n disableDefaultStyles,\r\n useCustomCarousel,\r\n customCarouselWrapperClassName,\r\n}) => {\r\n const [index, setIndex] = useState(0);\r\n\r\n // if external activeIndex is provided, use it, otherwise use the internal state\r\n const curActiveIndex = !_.isUndefined(activeIndex) ? activeIndex : index;\r\n const curSetIndex = setActiveIndex || setIndex;\r\n\r\n const [direction, setDirection] = useState('next');\r\n const [auto, setAuto] = useState(enableAutoRotate && startAutoRotating);\r\n const [startAutoRotateListner, setStartAutoRotateListner] = useState(false);\r\n\r\n const autoRotateListener = useRef(null);\r\n\r\n const emptyView = useMemo(() => {\r\n if (onRenderEmptyView) {\r\n return onRenderEmptyView(placementList);\r\n }\r\n return null;\r\n }, [onRenderEmptyView, placementList]);\r\n\r\n const placementComponentList = useMemo(() => {\r\n const ret = map(placementList, (placement, i) => {\r\n const { placementMeta, images, ...rest } = placement || {};\r\n const { placementType, hasMultiImages } = placementMeta || {};\r\n const AdPlacementComponent = getAdPlacementComponent(placementType);\r\n if (AdPlacementComponent) {\r\n // convert multi-image model to single-image model if needed\r\n let newPlacement = placement;\r\n if (!hasMultiImages && !isEmpty(images)) {\r\n const selectedImage = pickSingleImageFromImageList(images) || {};\r\n newPlacement = { placementMeta, ...selectedImage, ...rest };\r\n }\r\n return [onRenderPlacement(newPlacement, AdPlacementComponent, i), placement];\r\n }\r\n return [null, placement];\r\n });\r\n return ret;\r\n }, [onRenderPlacement, placementList]);\r\n\r\n const onRenderCarouselHeader = useCallback(() => {\r\n if (onRenderHeader) {\r\n const placement = placementList ? placementList[curActiveIndex] : null;\r\n const { placementMeta, images, ...rest } = placement || {};\r\n const { hasMultiImages } = placementMeta || {};\r\n let newPlacement = placement;\r\n if (!hasMultiImages && !isEmpty(images)) {\r\n const selectedImage = pickSingleImageFromImageList(images) || {};\r\n newPlacement = { placementMeta, ...selectedImage, ...rest };\r\n }\r\n return onRenderHeader(newPlacement, curActiveIndex);\r\n }\r\n return null;\r\n }, [curActiveIndex, onRenderHeader, placementList]);\r\n\r\n const clearAutoRotateListener = useCallback(() => {\r\n if (autoRotateListener.current) {\r\n clearTimeout(autoRotateListener.current);\r\n autoRotateListener.current = null;\r\n }\r\n }, []);\r\n\r\n const autoRotate = useCallback((currentIndex) => {\r\n if (!auto || isEmpty(placementList)) {\r\n // eslint-disable-next-line no-useless-return\r\n return;\r\n }\r\n\r\n setStartAutoRotateListner(true);\r\n\r\n const previewCount = placementList.length;\r\n let nextIndex = currentIndex + 1;\r\n if (nextIndex >= previewCount) {\r\n nextIndex = 0;\r\n }\r\n\r\n autoRotateListener.current = setTimeout(() => {\r\n curSetIndex(nextIndex);\r\n setDirection('next');\r\n autoRotate(nextIndex);\r\n }, (autoRotateInterval));\r\n }, [auto, curSetIndex, placementList]);\r\n\r\n const start = useCallback(() => {\r\n setDirection('next');\r\n setAuto(true);\r\n }, []);\r\n\r\n const stop = useCallback(() => {\r\n if (auto) {\r\n setAuto(false);\r\n clearAutoRotateListener();\r\n setStartAutoRotateListner(false);\r\n }\r\n }, [clearAutoRotateListener, auto]);\r\n\r\n const onSelect = useCallback((selectedIndex, e) => {\r\n stop();\r\n curSetIndex(selectedIndex || 0);\r\n setDirection(e.direction);\r\n }, [curSetIndex, stop]);\r\n\r\n // auto rotate at initialisation when auto rotate is enabled\r\n useEffect(() => {\r\n if (auto && !startAutoRotateListner) {\r\n autoRotate(curActiveIndex);\r\n }\r\n }, [autoRotate, auto, startAutoRotateListner, curActiveIndex]);\r\n\r\n useEffect(() => {\r\n if (onActiveIndexChange) {\r\n onActiveIndexChange(curActiveIndex);\r\n }\r\n }, [curActiveIndex, onActiveIndexChange]);\r\n\r\n useEffect(() => () => {\r\n clearAutoRotateListener();\r\n }, [clearAutoRotateListener]);\r\n\r\n useEffect(() => {\r\n if (placementList && placementList.length > 0 && curActiveIndex >= placementList.length) {\r\n setActiveIndex(0);\r\n }\r\n }, [curActiveIndex, placementList, setActiveIndex]);\r\n\r\n const CarouselComponent = useCustomCarousel ? CustomCarousel : Carousel;\r\n const moreCarouselProps = useMemo(\r\n () => (useCustomCarousel ? {\r\n carouselWrapperClassName: classnames(customCarouselWrapperClassName, classes.customCarouselWrapper),\r\n } : {}),\r\n [classes.customCarouselWrapper, customCarouselWrapperClassName, useCustomCarousel]\r\n );\r\n\r\n return !isEmpty(placementComponentList) ? (\r\n \r\n {/* render custom controls and indicators in the same parent div */}\r\n {leftArrowControl}\r\n {carouselInstance ? carouselInstance.renderIndicators(children, activeIndex, bsProps) : null}\r\n {rightArrowControl}\r\n {\r\n InjectedControls ? <> {InjectedControls} : null\r\n }\r\n
\r\n \r\n \r\n {placementComponent}\r\n \r\n );\r\n })\r\n }\r\n \r\n
\r\n ) : emptyView;\r\n};\r\n\r\nCarouselLayout.propTypes = {\r\n activeIndex: PropTypes.number,\r\n setActiveIndex: PropTypes.func,\r\n classes: PropTypes.shape({\r\n carouselLayoutContainer: PropTypes.string.isRequired,\r\n adPreviewCarousel: PropTypes.string.isRequired,\r\n baseCarouselLayoutStyles: PropTypes.string.isRequired,\r\n playPauseButtons: PropTypes.string.isRequired,\r\n }),\r\n customCarouselRootClassName: PropTypes.string,\r\n customCarouselLayoutStyles: PropTypes.string,\r\n customPlayPauseButtonsStyles: PropTypes.string,\r\n enableAutoRotate: PropTypes.bool,\r\n startAutoRotating: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n onRenderEmptyView: PropTypes.func,\r\n onRenderHeader: PropTypes.func,\r\n onRenderPlacement: PropTypes.func.isRequired,\r\n placementList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onActiveIndexChange: PropTypes.func,\r\n disableDefaultStyles: PropTypes.bool,\r\n useCustomCarousel: PropTypes.bool,\r\n customCarouselWrapperClassName: PropTypes.string,\r\n};\r\n\r\nCarouselLayout.defaultProps = {\r\n activeIndex: undefined,\r\n setActiveIndex: undefined,\r\n customCarouselRootClassName: null,\r\n customCarouselLayoutStyles: null,\r\n customPlayPauseButtonsStyles: null,\r\n enableAutoRotate: false,\r\n startAutoRotating: true,\r\n onRenderEmptyView: null,\r\n onActiveIndexChange: null,\r\n onRenderHeader: null,\r\n disableDefaultStyles: false,\r\n useCustomCarousel: false,\r\n customCarouselWrapperClassName: null,\r\n classes: {},\r\n};\r\n\r\nexport const AdPreviewCarouselLayout = withUAPLThemedStyles(CarouselLayout, getCarouselLayoutStyles, { componentName: 'AdPreviewCarouselLayout' });\r\n\r\nexport const UnstyledAdPreviewCarouselLayout = CarouselLayout;\r\n\r\n// when trying to reuse the Carousel instance with different children count, the carousel behaves\r\n// abnormal, seems its internal states are messed up, fix it by creating a new component when the\r\n// resetOn prop changes\r\nexport const AdPreviewCarouselLayoutEx = (props) => {\r\n const { resetOn } = props;\r\n const LayoutComponent = useCallback(\r\n props2 => \r\n {onRenderCarouselHeader()}\r\n
\r\n \r\n {extensionData.map(({ Category, Texts }) => (\r\n
\r\n);\r\n\r\nStructuredSnippetExtension.propTypes = {\r\n classes: PropTypes.shape({\r\n structuredSnippetExtensionContainer: PropTypes.string,\r\n }),\r\n extensionData: PropTypes.arrayOf(PropTypes.shape({\r\n Category: PropTypes.string,\r\n Texts: PropTypes.string,\r\n })),\r\n};\r\n\r\nStructuredSnippetExtension.defaultProps = {\r\n classes: {},\r\n extensionData: [],\r\n};\r\n\r\nexport const AdPreviewStructuredSnippetExtension = withUAPLThemedStyles(\r\n StructuredSnippetExtension,\r\n getStructuredSnippetExtensionStyles, { componentName: 'AdPreviewStructuredSnippetExtension' }\r\n);\r\n","export const getCalloutExtensionStyles = () => ({\r\n calloutExtensionContainer: {\r\n color: '#767676',\r\n fontFamily: 'Roboto',\r\n lineHeight: '22px',\r\n },\r\n});\r\n\r\nexport const getPriceExtensionStyles = () => ({\r\n priceExtensionContainer: {\r\n color: '#4007A2',\r\n fontFamily: 'Roboto',\r\n lineHeight: '22px',\r\n '& a': {\r\n color: '#4007A2',\r\n },\r\n '& div': {\r\n display: 'inline-block',\r\n },\r\n },\r\n});\r\n\r\nexport const getPromotionExtensionStyles = () => ({\r\n promotionExtensionContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n '& .promotion-info': {\r\n '& span': {\r\n color: '#767676',\r\n fontFamily: 'Roboto',\r\n lineHeight: '22px',\r\n },\r\n '& .discount': {\r\n color: '#1A0DAB',\r\n },\r\n },\r\n '& .promotion-rate': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '3px',\r\n '& span': {\r\n color: '#767676',\r\n fontFamily: 'Roboto',\r\n fontWeight: '700',\r\n lineHeight: '22px',\r\n },\r\n '& .rating-icons': {\r\n marginTop: '-2px',\r\n display: 'flex',\r\n },\r\n '& .reviews': {\r\n color: '#767676',\r\n fontWeight: '400',\r\n },\r\n },\r\n },\r\n});\r\n\r\nexport const getSitelinkExtensionStyles = () => ({\r\n sitelinkExtensionContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n '& .sitelink-row': {\r\n display: 'flex',\r\n gap: '48px',\r\n marginTop: '12px',\r\n '& .sitelink-tile': {\r\n width: '270px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '3px',\r\n '& .title': {\r\n color: '#4007A2',\r\n fontFamily: 'Roboto',\r\n fontSize: '20px',\r\n lineHeight: '24px',\r\n },\r\n '& .text': {\r\n color: '#666',\r\n fontFamily: 'Roboto',\r\n lineHeight: '22px',\r\n },\r\n },\r\n },\r\n },\r\n});\r\n\r\nexport const getStructuredSnippetExtensionStyles = () => ({\r\n structuredSnippetExtensionContainer: {\r\n '& .category': {\r\n color: '#767676',\r\n fontFamily: 'Roboto',\r\n fontWeight: '700',\r\n lineHeight: '22px',\r\n },\r\n '& .texts': {\r\n color: '#767676',\r\n fontFamily: 'Roboto',\r\n lineHeight: '22px',\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n// import classnames from 'classnames';\r\n\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getCalloutExtensionStyles } from '../styles';\r\n\r\nconst CalloutExtension = ({\r\n classes,\r\n extensionData,\r\n}) => (\r\n \r\n {Category && {`${Category}: `}}\r\n {Texts && {Texts.join(', ')}}\r\n
\r\n ))}\r\n \r\n {extensionData.map(({ Text }) => Text).join(' · ')}\r\n
\r\n);\r\n\r\nCalloutExtension.propTypes = {\r\n classes: PropTypes.shape({\r\n calloutExtensionContainer: PropTypes.string,\r\n }),\r\n extensionData: PropTypes.arrayOf(PropTypes.shape({\r\n Text: PropTypes.string,\r\n })),\r\n};\r\n\r\nCalloutExtension.defaultProps = {\r\n classes: {},\r\n extensionData: [],\r\n};\r\n\r\nexport const AdPreviewCalloutExtension = withUAPLThemedStyles(\r\n CalloutExtension,\r\n getCalloutExtensionStyles, { componentName: 'AdPreviewCalloutExtension' }\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n// import classnames from 'classnames';\r\n\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getPriceExtensionStyles } from '../styles';\r\n\r\nconst PriceExtension = ({\r\n classes,\r\n extensionData,\r\n}) => (\r\n \r\n {\r\n extensionData.map(({\r\n Header, Description, Currency, Price, FinalUrls,\r\n }, index) => (\r\n \r\n {Header}\r\n {` - ${Description} `}\r\n \r\n ))\r\n }\r\n
\r\n);\r\n\r\nPriceExtension.propTypes = {\r\n classes: PropTypes.shape({\r\n priceExtensionContainer: PropTypes.string,\r\n }),\r\n extensionData: PropTypes.arrayOf(PropTypes.shape({\r\n Header: PropTypes.string,\r\n Description: PropTypes.string,\r\n Currency: PropTypes.string,\r\n Price: PropTypes.string,\r\n FinalUrls: PropTypes.arrayOf(PropTypes.string),\r\n })),\r\n};\r\n\r\nPriceExtension.defaultProps = {\r\n classes: {},\r\n extensionData: [],\r\n};\r\n\r\nexport const AdPreviewPriceExtension = withUAPLThemedStyles(\r\n PriceExtension,\r\n getPriceExtensionStyles, { componentName: 'AdPreviewPriceExtension' }\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n// import classnames from 'classnames';\r\n\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getPromotionExtensionStyles } from '../styles';\r\nimport star from './media/star.svg';\r\n\r\nconst PromotionExtension = ({\r\n classes,\r\n extensionData,\r\n}) => (\r\n extensionData.map(({\r\n Occasion, PromotionType, PromotionItem, PromotionDetail, DateRange, hasOccasion, hasPromotionDetail, hasDateRange,\r\n }) => (\r\n {`${Currency + Price}`}
\r\n {index < extensionData.length - 1 && {' · '}}\r\n \r\n
\r\n ))\r\n);\r\n\r\nPromotionExtension.propTypes = {\r\n classes: PropTypes.shape({\r\n promotionExtensionContainer: PropTypes.string,\r\n }),\r\n extensionData: PropTypes.arrayOf(PropTypes.shape({\r\n Occasion: PropTypes.string,\r\n PromotionType: PropTypes.string,\r\n PromotionItem: PropTypes.string,\r\n PromotionDetail: PropTypes.string,\r\n DateRange: PropTypes.string,\r\n hasOccasion: PropTypes.bool,\r\n hasPromotionDetail: PropTypes.bool,\r\n hasDateRange: PropTypes.bool,\r\n })),\r\n};\r\n\r\nPromotionExtension.defaultProps = {\r\n classes: {},\r\n extensionData: [],\r\n};\r\n\r\nexport const AdPreviewPromotionExtension = withUAPLThemedStyles(\r\n PromotionExtension,\r\n getPromotionExtensionStyles, { componentName: 'AdPreviewPromotionExtension' }\r\n);\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\n// import classnames from 'classnames';\r\n\r\nimport { withUAPLThemedStyles } from '../with-themed-styles';\r\nimport { getSitelinkExtensionStyles } from '../styles';\r\n\r\nconst SitelinkExtension = ({\r\n classes,\r\n extensionData,\r\n}) => {\r\n const onRenderTile = useCallback(({\r\n DisplayText, Description1, Description2, DestinationUrl, FinalUrls,\r\n }) => {\r\n let distUrl;\r\n if (DestinationUrl) {\r\n distUrl = DestinationUrl;\r\n } else if (FinalUrls && FinalUrls.length > 0) {\r\n [distUrl] = FinalUrls;\r\n } else {\r\n distUrl = '';\r\n }\r\n if (distUrl && distUrl.indexOf('http') !== 0) {\r\n distUrl = `http://${distUrl}`;\r\n }\r\n\r\n return (\r\n \r\n );\r\n }, []);\r\n\r\n const tiles = [];\r\n for (let i = 0; i < extensionData.length; i += 2) {\r\n const current = extensionData[i];\r\n const next = i + 1 < extensionData.length ? extensionData[i + 1] : null;\r\n tiles.push((\r\n \r\n {hasOccasion && {`${Occasion}: `}}\r\n {PromotionType}\r\n {` · ${PromotionItem}`}\r\n {hasPromotionDetail && {` · ${PromotionDetail}`}}\r\n {hasDateRange && {` · ${DateRange}`}}\r\n
\r\n \r\n 5/5\r\n
\r\n \r\n {[...Array(5)].map(() => (\r\n 
\r\n ))}\r\n
\r\n (1,000 reviews)\r\n \r\n {onRenderTile(current)}\r\n {next && onRenderTile(next)}\r\n
\r\n ));\r\n }\r\n\r\n return (\r\n \r\n {tiles}\r\n
\r\n );\r\n};\r\n\r\nSitelinkExtension.propTypes = {\r\n classes: PropTypes.shape({\r\n sitelinkExtensionContainer: PropTypes.string,\r\n }),\r\n extensionData: PropTypes.arrayOf(PropTypes.shape({\r\n DisplayText: PropTypes.string,\r\n Description1: PropTypes.string,\r\n Description2: PropTypes.string,\r\n DestinationUrl: PropTypes.string,\r\n FinalUrls: PropTypes.arrayOf(PropTypes.string),\r\n })),\r\n};\r\n\r\nSitelinkExtension.defaultProps = {\r\n classes: {},\r\n extensionData: [],\r\n};\r\n\r\nexport const AdPreviewSitelinkExtension = withUAPLThemedStyles(\r\n SitelinkExtension,\r\n getSitelinkExtensionStyles, { componentName: 'AdPreviewSitelinkExtension' }\r\n);\r\n","export const UAPImageExpansionType = {\r\n None: 'None',\r\n WhitePadding: 'WhitePadding',\r\n // Blur: 'Blur',\r\n Outpainting: 'Outpainting',\r\n SingleColorPadding: 'SingleColorPadding',\r\n};\r\n\r\nexport const UAPCroppingType = {\r\n ManualCrop: 'ManualCrop', // 1\r\n CenterCrop: 'CenterCrop', // 2\r\n SmartCrop: 'SmartCrop', // 3\r\n Unknown: 'Unknown', // 4\r\n};\r\n","import _ from 'underscore';\r\nimport { UAPImageExpansionType, UAPCroppingType } from './constants';\r\n\r\nexport const getExpandedImageUrl = (imageExpansionType, src, paddingColor, expandedImageWidth, expandedImageHeight) => {\r\n if (!imageExpansionType || imageExpansionType === UAPImageExpansionType.None) {\r\n // no expanded image\r\n return null;\r\n }\r\n\r\n const hasQuery = !_.isEmpty(src) && src.indexOf('?') > 0;\r\n const srcWithQuery = hasQuery ? src : `${src}?`;\r\n let queryParams = '';\r\n if (imageExpansionType === UAPImageExpansionType.Outpainting) {\r\n queryParams = hasQuery ? '&ustim=1' : 'ustim=1';\r\n } else if (imageExpansionType === UAPImageExpansionType.WhitePadding\r\n || imageExpansionType === UAPImageExpansionType.SingleColorPadding\r\n ) {\r\n queryParams = `${hasQuery ? '&' : ''}w=${expandedImageWidth}&h=${expandedImageHeight}`;\r\n if (paddingColor) {\r\n const idx = paddingColor.indexOf('#');\r\n queryParams += `&pcl=${paddingColor.slice(idx + 1)}`;\r\n }\r\n }\r\n\r\n return `${srcWithQuery}${queryParams}`;\r\n};\r\n\r\nexport const setROIInfo = (roiInfo, imageUrl) => {\r\n if (!roiInfo || !imageUrl) {\r\n return {};\r\n }\r\n try {\r\n const ROIInfoObj = JSON.parse(roiInfo);\r\n const imageExpansionType = ROIInfoObj.ImageExpansionType;\r\n const expandedImageWidth = imageExpansionType === UAPImageExpansionType.Outpainting ? ROIInfoObj.ThumbnailWidth : ROIInfoObj.PaddingImageWidth;\r\n const expandedImageHeight = imageExpansionType === UAPImageExpansionType.Outpainting ? ROIInfoObj.ThumbnailHeight : ROIInfoObj.PaddingImageHeight;\r\n const paddingColor = ROIInfoObj.PaddingColor;\r\n const expandedImageCropSettings = ROIInfoObj.ImageCropSetting ? _.map(ROIInfoObj.ImageCropSetting, ({ aspectRatio, cropSetting: cs }) => ({\r\n AspectRatio: aspectRatio,\r\n CropSetting: {\r\n SourceHeight: cs.sourceHeight, SourceWidth: cs.sourceWidth, SourceX: cs.sourceX, SourceY: cs.sourceY,\r\n },\r\n })) : null;\r\n const croppingType = imageExpansionType === UAPImageExpansionType.Outpainting ? UAPCroppingType.CenterCrop : UAPCroppingType.SmartCrop;\r\n const originalImageCropSettings = ROIInfoObj.OriginalImageCropSetting ? _.map(ROIInfoObj.OriginalImageCropSetting, ({ aspectRatio, cropSetting: cs }) => ({\r\n AspectRatio: aspectRatio,\r\n CropSetting: {\r\n SourceHeight: cs.sourceHeight, SourceWidth: cs.sourceWidth, SourceX: cs.sourceX, SourceY: cs.sourceY, CroppingType: croppingType,\r\n },\r\n })) : null;\r\n const expandedImageUrl = getExpandedImageUrl(imageExpansionType, imageUrl, paddingColor, expandedImageWidth, expandedImageHeight);\r\n\r\n return {\r\n expandedImageWidth,\r\n expandedImageHeight,\r\n expandedImageCropSettings,\r\n originalImageCropSettings,\r\n expandedImageUrl,\r\n imageExpansionType,\r\n paddingColor,\r\n };\r\n } catch (e) {\r\n return {};\r\n }\r\n};\r\n","import React, { useMemo, useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Wizard,\r\n LayoutContainer,\r\n Layout,\r\n StepContainer,\r\n} from '@bingads-webui-react/wizard';\r\nimport {\r\n SaveBlocker,\r\n DefaultTemplate,\r\n CancelWizardDialog,\r\n} from '@bingads-webui-react/wizard-ui-library';\r\nimport { FluentSwitcherContext } from '@bingads-webui-react/fluent-version-switcher';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { WizardPerfMarker } from '@bingads-webui-campaign/wizard-performance-marker';\r\nimport { Scenario, Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { PerformanceMarkerProvider } from '@bingads-webui-campaign-react/performance-marker-provider';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\n\r\nexport const UnifiedAppWizard = ({\r\n action, storeType, wizardConfig, perfMarker, children,\r\n}) => {\r\n const instrumentation = useContext(InstrumentationContext);\r\n\r\n const wizardName = useMemo(() => `UnifiedAppCampaign${action}-${storeType}`, [action, storeType]);\r\n\r\n const wizardPerfMarker = useMemo(() => (\r\n perfMarker.createChild(wizardName)\r\n ), [perfMarker, wizardName]);\r\n\r\n useEffect(() => {\r\n setClarityTag({ [`UnifiedAppCampaign${action}`]: storeType });\r\n }, [action, storeType]);\r\n\r\n return (\r\n {campaign && !campaign.AppSetting && i18n.getString(_TL_('Choose the app you want to promote'))}
\r\n \r\n
\r\n );\r\n};\r\n\r\nAssetsSection.propTypes = {\r\n imageExperiencePortalContainerState: PropTypes.shape({}).isRequired,\r\n imageExperienceAddNewImageCallback: PropTypes.func.isRequired,\r\n imageProngContainerRef: PropTypes.shape({}).isRequired,\r\n imageSpotlightContainerRef: PropTypes.shape({}).isRequired,\r\n imageExpereienceProngPortalContainerState: PropTypes.shape({}).isRequired,\r\n imageExperienceSpotLightPortalContainerState: PropTypes.shape({}).isRequired,\r\n logosContainerRef: PropTypes.shape({}).isRequired,\r\n imagesContainerRef: PropTypes.shape({}).isRequired,\r\n setAddNewDescriptionCallback: PropTypes.func.isRequired,\r\n setAddNewShortHeadlinesCallback: PropTypes.func.isRequired,\r\n perfMarker: PropTypes.string.isRequired,\r\n mergedI18n: PropTypes.shape({}).isRequired,\r\n prongImageExperienceAddNewImageCallback: PropTypes.func.isRequired,\r\n imageSpotlightExperienceAddNewImageCallback: PropTypes.func.isRequired,\r\n data: PropTypes.shape({\r\n videos: PropTypes.shape([]),\r\n Images: PropTypes.shape([]),\r\n ImageSPOTLIGHT: PropTypes.shape([]),\r\n ImagePRONG: PropTypes.shape([]),\r\n logos: PropTypes.shape([]),\r\n }).isRequired,\r\n transparentLogoContainerRef: PropTypes.shape({}).isRequired,\r\n transparentLogoExperiencePortalContainerState: PropTypes.shape({}).isRequired,\r\n assetPanels: PropTypes.shape({}).isRequired,\r\n setSelectedVideoId: PropTypes.func.isRequired,\r\n selectedVideoId: PropTypes.string.isRequired,\r\n};\r\n","import classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { noop, isArray, union } from 'underscore';\r\nimport React, { useContext, useMemo, useCallback, useRef, useState, useEffect } from 'react';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { withBannerService, CopilotRepositoryProvider } from '@bingads-webui/inline-copilot';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { RecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { withControlErrorHandling } from '@bingads-webui-campaign-react/error-handling';\r\nimport { mergeI18n } from '@bingads-webui-campaign-react/i18n-merger';\r\nimport { useWizardService, matchStepState, STEP_STATES } from '@bingads-webui-react/wizard';\r\nimport { buildLegacyI18n } from '@bingads-webui/build-legacy-i18n';\r\nimport { ValidationStringMap } from '@bingads-webui/validation-string-map';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { ActuationGroup } from '@bingads-webui-campaign-react/actuator';\r\nimport { getGenericImageObjectAsync } from '@bingads-webui-campaign/image-experience-utils';\r\nimport {\r\n FormErrorGroup, UnmappedFormErrors as OriginalUnmappedFormErrors,\r\n} from '@bingads-webui-campaign-react/form-error';\r\nimport { AssetScenario } from '@bingads-webui-react/copilot-event-provider';\r\nimport { AssetEventFeature } from '@bingads-webui-campaign-react/copilot-common';\r\nimport { useCopilot } from '@bingads-webui-campaign-react/copilot-experience';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { useFormService } from '@bingads-webui-react/form';\r\nimport { useIsMounted } from '@bingads-webui-campaign-react/step-wizard-controls';\r\nimport { useResponsiveStyles } from '@bingads-webui-campaign-react/common-hooks';\r\nimport { legacyI18nOfListingGroup } from '@bingads-webui-campaign-react/listing-groups-page';\r\nimport { StepHeader } from '@bingads-webui-campaign-react/pmax-common';\r\nimport { SystemErrors, AssetGroupValidationGroup, FLOWS, AppAdsPreview } from '@bingads-webui-campaign-react/unified-app-shared';\r\nimport {\r\n ValidatedImageExperienceWrapper,\r\n PerfMaxResponsiveAdPreviewUAPL\r\n} from '@bingads-webui-campaign-react/pmax-image-experience';\r\nimport { PerformanceMarkerContext } from '@bingads-webui-campaign-react/performance-marker-provider';\r\n\r\nimport { getAssetStepStyles } from '../use-assets-step-styles';\r\n\r\nimport { AssetGroupNameSection } from './asset-group-name-section';\r\nimport { AssetsSection } from './assets-section';\r\nimport { adPreviewConfig, unifiedAppAdsSurfaces } from '../model/constants';\r\n\r\nconst UnmappedFormErrors = withControlErrorHandling(OriginalUnmappedFormErrors);\r\nconst MaxImageCount = 1;\r\n\r\nconst AssetsStepFormInternal = ({\r\n data,\r\n onDataChange: onDataChangeProp,\r\n error,\r\n scope,\r\n assetPanels,\r\n}) => {\r\n const isMounted = useIsMounted();\r\n\r\n const { state } = useWizardService();\r\n\r\n const {\r\n wizardData: { flow },\r\n } = state.context;\r\n\r\n const permissions = useContext(PermissionsContext);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const instrumentation = useContext(InstrumentationContext);\r\n const [recommendationContext] = useContext(RecommendationContext);\r\n\r\n const imagesContainerRef = useRef(null);\r\n const logosContainerRef = useRef(null);\r\n const transparentLogoContainerRef = useRef(null);\r\n const ImageSPOTLIGHTContainerRef = useRef(null);\r\n const ImagePRONGContainerRef = useRef(null);\r\n const portraitContainerRef = useRef(null);\r\n\r\n const stylingProps = useMemo(() =>\r\n ({ component: { placements: 3 } }), []);\r\n\r\n const getStyles = useResponsiveStyles(getAssetStepStyles, stylingProps);\r\n\r\n const { cid, aid } = scope.values || {};\r\n\r\n const [selectedVideoId, setSelectedVideoId] = useState(0);\r\n\r\n const [imageExperiencePortalContainerState, setImageExperiencePortalContainerState] = useState({});\r\n const [ImageSPOTLIGHTExperiencePortalContainerState, setImageSPOTLIGHTExperiencePortalContainerState] = useState({});\r\n const [ImagePRONGExperiencePortalContainerState, setImagePRONGExperiencePortalContainerState] = useState({});\r\n\r\n const [imageExperienceAddNewImageCallback, setImageExperienceAddNewImageCallback] = useState(noop);\r\n const [prongImageExperienceAddNewImageCallback, setProngImageExperienceAddNewImageCallback] = useState(noop);\r\n const [imageSpotlightExperienceAddNewImageCallback, setImageSpotlightExperienceAddNewImageCallback] = useState(noop);\r\n\r\n const [addNewDescriptionCallback, setAddNewDescriptionCallback] = useState(noop);\r\n const [addNewShortHeadlinesCallback, setAddNewShortHeadlinesCallback] = useState(noop);\r\n const [transparentLogoExperiencePortalContainerState, setTransparentLogoExperiencePortalContainerState] = useState({});\r\n const [previewTransparentLogoSharedState, setPreviewTransparentLogoSharedState] = useState({ previewImageId: null, cropImageObj: null });\r\n const [previewImageSPOTLIGHTSharedState, setPreviewImageSPOTLIGHTSharedState] = useState({ previewImageId: null, cropImageObj: null });\r\n const [previewImagePRONGSharedState, setPreviewImagePRONGSharedState] = useState({ previewImageId: null, cropImageObj: null });\r\n const [appLogo, setAppLogo] = useState(null);\r\n\r\n const {\r\n assetGroup,\r\n campaign,\r\n } = data || {};\r\n\r\n const {\r\n AppSetting,\r\n } = campaign || {};\r\n\r\n const {\r\n Images,\r\n CallToAction,\r\n LongHeadlines,\r\n Descriptions,\r\n Headlines,\r\n videos = [],\r\n ImageSPOTLIGHT,\r\n ImagePRONG,\r\n TransparentLogo,\r\n } = assetGroup || {};\r\n\r\n const onDataChange = useCallback((result) => {\r\n if (!isMounted.current) return;\r\n onDataChangeProp({ ...result });\r\n }, [isMounted, onDataChangeProp]);\r\n\r\n const onReset = useCallback(() => {\r\n onDataChange({\r\n data: prevData => ({\r\n ...prevData,\r\n assetGroup: {\r\n ...prevData.assetGroup,\r\n Images: {\r\n ...assetGroup.Images,\r\n ImageList: [],\r\n ImageAssets: null,\r\n },\r\n Headlines: {\r\n Headline0: '',\r\n Headline1: '',\r\n Headline2: '',\r\n },\r\n LongHeadlines: {\r\n LongHeadline0: '',\r\n },\r\n Descriptions: {\r\n Description0: '',\r\n Description1: '',\r\n },\r\n },\r\n }),\r\n isValid: false,\r\n });\r\n }, [assetGroup, onDataChange]);\r\n\r\n const onUpdateImageList = useCallback((newImageList) => {\r\n onDataChange({\r\n data: prevData => ({\r\n ...prevData,\r\n assetGroup: {\r\n ...prevData.assetGroup,\r\n Images: {\r\n ...prevData.assetGroup.Images,\r\n ImageList: newImageList,\r\n ImageAssets: null,\r\n },\r\n },\r\n }),\r\n });\r\n }, [onDataChange]);\r\n\r\n const {\r\n serverErrors = [],\r\n systemErrors = [],\r\n } = error || {};\r\n\r\n const i18n = useContext(I18nContext);\r\n const legacyGlobalI18n = useMemo(() => window.globalLegacyI18n.get('$/i18n!legacy/global'), []);\r\n\r\n const legacyI18n = useMemo(() => buildLegacyI18n(i18n, [ValidationStringMap, legacyI18nOfListingGroup]), [i18n]);\r\n\r\n const mergedI18n = useMemo(() => {\r\n const mergedTempI18n = mergeI18n(\r\n legacyI18n,\r\n i18n\r\n );\r\n\r\n return mergeI18n(\r\n legacyGlobalI18n,\r\n mergedTempI18n\r\n );\r\n }, [i18n, legacyI18n, legacyGlobalI18n]);\r\n\r\n const { state: { context: { saveFailed } } } = useFormService();\r\n\r\n const isSaving = matchStepState(state, STEP_STATES.SAVING);\r\n const isCanceling = matchStepState(state, STEP_STATES.CANCELING);\r\n\r\n const perfMarker = useContext(PerformanceMarkerContext);\r\n\r\n const [previewImagesSharedState, setPreviewImagesSharedState] = useState({\r\n previewImageId: null,\r\n previewLogoId: null,\r\n cropImageObj: null,\r\n editingPlacementType: '',\r\n });\r\n\r\n const { postAssetEventLog } = recommendationContext || noop;\r\n\r\n const maxUploadNum = useMemo(() => {\r\n const imageListLength = Images && Images.ImageList && isArray(Images.ImageList) ? Images.ImageList.length : 0;\r\n return 20 - imageListLength;\r\n }, [Images]);\r\n\r\n const finalUrlFromApp = useMemo(() => {\r\n if (AppSetting) {\r\n if (flow === FLOWS.WINDOWS) {\r\n return `https://apps.microsoft.com/detail/${AppSetting.AppId}`;\r\n }\r\n return AppSetting.AppUrl;\r\n }\r\n return null;\r\n }, [AppSetting, flow]);\r\n\r\n const {\r\n copilotBanner,\r\n suggestionPoller,\r\n } = useCopilot({\r\n maxUploadNum,\r\n addNewShortHeadlinesCallback,\r\n addNewLongHeadlinesCallback: noop,\r\n addNewDescriptionCallback,\r\n imageExperienceAddNewImageCallback,\r\n // newCTACallback,\r\n currentCTA: CallToAction,\r\n onReset,\r\n cid,\r\n aid,\r\n serverContext,\r\n instrumentation,\r\n data: {\r\n ...assetGroup,\r\n finalUrls: [finalUrlFromApp],\r\n FinalUrlForRecommendation: finalUrlFromApp,\r\n },\r\n isSaving,\r\n isCanceling,\r\n enableCopilotRecommendations: true,\r\n feature: AssetEventFeature.PMAX, // TODO Feature name\r\n assetScenario: AssetScenario.CREATE_WORK_FLOW,\r\n });\r\n\r\n const imageExperienceComponents = useMemo(() => (\r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Add assets'))}\r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Provide your assets and we\\'ll automatically determine what your ads look like, where and when they appear, and who sees them.'))}\r\n \r\n
\r\n \r\n \r\n {}}\r\n icon={ImageAssetsImg}\r\n imagesContainerRef={imagesContainerRef}\r\n imageExperiencePortalContainerState={imageExperiencePortalContainerState}\r\n imageExperienceAddNewImageCallback={imageExperienceAddNewImageCallback}\r\n images={data && data.Images}\r\n topicKey=\"pop_BA_Apps_Images\"\r\n />\r\n {}}\r\n icon={ImageAssetsImg}\r\n titleKey={_TL_('Large image')}\r\n iconAltText={_TL_('\"Images\" panel\\'s image')}\r\n imagesData={data && data.ImageSPOTLIGHT}\r\n containerRef={imageSpotlightContainerRef}\r\n portalContainerState={imageExperienceSpotLightPortalContainerState}\r\n addNewImageCallback={imageSpotlightExperienceAddNewImageCallback}\r\n maxUploadNum={1}\r\n />\r\n {}}\r\n icon={ImageAssetsImg}\r\n titleKey={_TL_('Small image')}\r\n iconAltText={_TL_('\"Images\" panel\\'s image')}\r\n imagesData={data && data.ImagePRONG}\r\n containerRef={imageProngContainerRef}\r\n portalContainerState={imageExpereienceProngPortalContainerState}\r\n addNewImageCallback={prongImageExperienceAddNewImageCallback}\r\n maxUploadNum={1}\r\n />\r\n
\r\n \r\n {\r\n _.contains(assetPanels, PANEL_KEYS.AUDIENCE_SIGNAL) && (\r\n \r\n \r\n \r\n )\r\n }\r\n
\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('More Settings'))} \r\n
\r\n \r\n {}} // TODO\r\n isLogoEnabled={false}\r\n previewImagesSharedState={previewImagesSharedState}\r\n setPreviewImagesSharedState={setPreviewImagesSharedState}\r\n updatePortalContainerState={setImageExperiencePortalContainerState}\r\n setImageExperienceAddNewImageCallback={setImageExperienceAddNewImageCallback}\r\n validationProps={{ data: assetGroup, initialValue: assetGroup }}\r\n suggestionPoller={suggestionPoller}\r\n wizardPerfMarker={perfMarker}\r\n postAssetEventLog={postAssetEventLog}\r\n UAPLPMaxIntegration\r\n showCopilotOptionForImage={permissions.IsBackgroundSceneEnabled}\r\n // currently there is implementation in image experience to unify prong and spotlight images for windows store.\r\n // but we will not use it for now. We will keep two separate panels for prong and spotlight images.\r\n // Later when we want to unify this behaviour we can turn on this flag and undo this change.\r\n // isUnifiedAppCampaignWindowsStore={flow === FLOWS.WINDOWS}\r\n imageAssetsOptional={flow === FLOWS.WINDOWS}\r\n />\r\n
), [i18n, permissions, postAssetEventLog, suggestionPoller, previewImagesSharedState, assetGroup, perfMarker, flow]);\r\n\r\n const transparentLogoComponent = useMemo(() => (\r\n \r\n
), [i18n, permissions, perfMarker, assetGroup, previewTransparentLogoSharedState]);\r\n\r\n const validatedImageSPOTLIGHTExperienceWrapper = useMemo(() => (\r\n \r\n
\r\n \r\n
\r\n {\r\n flow === FLOWS.WINDOWS ?\r\n \r\n \r\n \r\n
\r\n \r\n {windowsAppAdsPreivew}\r\n
\r\n :\r\n \r\n {adPreview}\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
\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 );\r\n};\r\n\r\nCampaignDetailsForm.propTypes = {\r\n data: PropTypes.shape({\r\n campaign: PropTypes.shape({}),\r\n }),\r\n onDataChange: PropTypes.func.isRequired,\r\n allSectionsKeys: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n initiallyExpandedSectionsKeys: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n};\r\n\r\nCampaignDetailsForm.defaultProps = {\r\n data: {},\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { ActuationGroup } from '@bingads-webui-campaign-react/actuator';\r\nimport { useFormService } from '@bingads-webui-react/form';\r\nimport {\r\n FormErrorGroup,\r\n UnmappedFormErrors as OriginalUnmappedFormErrors,\r\n} from '@bingads-webui-campaign-react/form-error';\r\nimport {\r\n apiErrorMapper,\r\n} from '@bingads-webui-campaign-react/perf-max-step-wizard';\r\nimport { withControlErrorHandling } from '@bingads-webui-campaign-react/error-handling';\r\nimport { StepHeader } from '@bingads-webui-campaign-react/pmax-common';\r\nimport { PANEL_KEYS } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { SystemErrors } from '@bingads-webui-campaign-react/unified-app-shared';\r\n\r\nimport { CampaignDetailsForm } from './campaign-details-form';\r\n\r\nconst UnmappedFormErrors = withControlErrorHandling(OriginalUnmappedFormErrors);\r\n\r\nconst ALL_SECTIONS_KEYS = [PANEL_KEYS.CAMPAIGN_NAME, PANEL_KEYS.AD_SCHEDULE, PANEL_KEYS.URL_OPTIONS];\r\nconst INITIALLY_EXPANDED_SECTIONS_KEYS = ALL_SECTIONS_KEYS;\r\n\r\nexport const CampaignDetailsStepShell = ({\r\n data,\r\n onDataChange,\r\n error,\r\n}) => {\r\n const { serverErrors, systemErrors } = error || {};\r\n\r\n const { state } = useFormService();\r\n const { saveFailed } = state.context;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nSummaryStepShell.propTypes = {\r\n data: PropTypes.shape({}),\r\n onDataChange: PropTypes.func.isRequired,\r\n};\r\n\r\nSummaryStepShell.defaultProps = {\r\n data: {},\r\n};\r\n","import { buildDefaultDataProperty } from '@bingads-webui-campaign-react/ui-generator';\r\n\r\nexport const buildSchema = options => ({\r\n separatorStyles: {\r\n marginBottom: 20,\r\n },\r\n assets: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Assets'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onAssetsHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n assetGroupName: buildDefaultDataProperty({\r\n label: _TL_('Asset group name'),\r\n dynamicProps: props => props.assetGroupName,\r\n }),\r\n appName: buildDefaultDataProperty({\r\n label: options.appPlatformString,\r\n dynamicProps: props => props.appName,\r\n }),\r\n hd1: {\r\n type: 'horizontal-divider',\r\n },\r\n images: {\r\n type: 'images',\r\n dynamicProps: props => props.images,\r\n },\r\n hd2: {\r\n type: 'horizontal-divider',\r\n isRendered: options.flow !== 'WINDOWS',\r\n },\r\n videos: {\r\n type: 'videos',\r\n dynamicProps: props => props.videos,\r\n isRendered: options.flow !== 'WINDOWS',\r\n },\r\n hd3: {\r\n type: 'horizontal-divider',\r\n },\r\n headlines: {\r\n type: 'headlines',\r\n dynamicProps: props => props.headlines,\r\n },\r\n descriptions: {\r\n type: 'descriptions',\r\n dynamicProps: props => props.descriptions,\r\n },\r\n },\r\n },\r\n targeting: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Targeting'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onTargetingHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n locationTargeting: {\r\n type: 'location-targeting',\r\n dynamicProps: props => props.locationTargeting,\r\n },\r\n languages: {\r\n type: 'languages',\r\n dynamicProps: props => props.languages,\r\n },\r\n audienceSignal: {\r\n type: 'audience-signal',\r\n dynamicProps: props => props.audienceSignal,\r\n },\r\n },\r\n },\r\n campaignSettings: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Campaign Details'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onCampaignSettingsHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n campaignName: buildDefaultDataProperty({\r\n label: _TL_('Campaign name'),\r\n dynamicProps: props => props.campaignName,\r\n }),\r\n adScheduleCampaign: {\r\n type: 'ad-schedule',\r\n dynamicProps: props => props.adScheduleCampaign,\r\n },\r\n conversionGoals: {\r\n type: 'conversion-goals',\r\n dynamicProps: props => props.conversionGoals,\r\n },\r\n },\r\n },\r\n budget: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Budget'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onBudgetSettingsHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n budget: {\r\n type: 'budget',\r\n dynamicProps: props => props.budget,\r\n },\r\n bidStrategy: {\r\n type: 'bid-strategy',\r\n dynamicProps: props => props.bidStrategy,\r\n },\r\n bidValue: {\r\n type: 'bid-value',\r\n dynamicProps: props => props.bidValue,\r\n },\r\n },\r\n },\r\n});\r\n","import { useCallback, useContext } from 'react';\r\nimport Promise from 'bluebird';\r\nimport {\r\n loadBundleCountries,\r\n loadCampaign,\r\n modelToViewModelForCampaign,\r\n loadAssetGroupWithVideos,\r\n} from '@bingads-webui-campaign-react/perf-max-step-wizard';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport {\r\n readLocationCriterions,\r\n} from '@bingads-webui-campaign-react/perf-max-data';\r\nimport { flowToPlatform } from '@bingads-webui-campaign-react/unified-app-assets';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { createVideoRepository } from '@bingads-webui-campaign-react/asset-library-services';\r\nimport { useAppStoreRepository } from '@bingads-webui-campaign-react/app-store-selector';\r\nimport { updateAssetGroupAndCampaignStatus } from '@bingads-webui-campaign-react/perf-max-wizard-north-star';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nexport const useSummaryStepRepository = () => {\r\n const serverContext = useContext(ServerContext);\r\n const { scope } = useContext(ScopeContext) || {};\r\n const { cid, aid } = scope.values;\r\n const { state } = useWizardService();\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n const {\r\n wizardData: {\r\n flow,\r\n isPublishing,\r\n campaign: savedCampaign,\r\n assetGroup: savedAssetGroup,\r\n },\r\n } = state.context;\r\n\r\n const { searchAppById, oDataConfig } = useAppStoreRepository({ platform: flowToPlatform[flow] });\r\n\r\n const videoRepository = createVideoRepository({\r\n oDataConfig,\r\n aid,\r\n cid,\r\n });\r\n\r\n const load = useCallback(() => {\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n const assetGroupId = savedAssetGroup ? savedAssetGroup.Id : null;\r\n\r\n const loadPromises = {\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n locationTargets: readLocationCriterions(cid, aid, campaignId),\r\n assetGroup: loadAssetGroupWithVideos(cid, aid, campaignId, assetGroupId, i18n, false, false, videoRepository),\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n };\r\n return Promise.props(loadPromises).then(({\r\n bundleCountriesAndLocationCriterions,\r\n campaign,\r\n assetGroup,\r\n locationTargets,\r\n }) => {\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: { ...campaign, Status: savedCampaign.status }, // MT sends UserPaused, if we send this back they mark it as active. So we just use Paused from the saved ad model\r\n locationCriterionsModel: locationTargets ? locationTargets.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions.bundleCountries,\r\n });\r\n\r\n return ({\r\n ...bundleCountriesAndLocationCriterions,\r\n campaign: campaignData.data,\r\n assetGroup,\r\n });\r\n }).then(({ campaign, assetGroup }) => {\r\n if (campaign && campaign.CampaignSettings && campaign.CampaignSettings.length > 0) {\r\n const appSettings = campaign.CampaignSettings.find(settings => settings['@odata.type'] === '#Model.AppSetting');\r\n const { AppId } = appSettings;\r\n\r\n return searchAppById(AppId).then((appInfo) => {\r\n // eslint-disable-next-line no-param-reassign\r\n campaign.AppSetting = appInfo;\r\n\r\n return {\r\n campaign,\r\n assetGroup,\r\n };\r\n });\r\n }\r\n return {\r\n campaign,\r\n assetGroup,\r\n };\r\n }).catch((errorData) => {\r\n activity.trace(`[UnifiedAppWizard] loadData failed. Error: ${errorData}`);\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n error: {\r\n ...errorData,\r\n },\r\n });\r\n });\r\n }, [activity, aid, cid, i18n, savedAssetGroup, savedCampaign, searchAppById, serverContext, videoRepository]);\r\n\r\n const save = useCallback(({\r\n data,\r\n }) => {\r\n const { Id: campaignId } = savedCampaign || {};\r\n const { Id: assetGroupId } = savedAssetGroup || {};\r\n\r\n if (isPublishing) {\r\n updateAssetGroupAndCampaignStatus({ campaignId, assetGroupId }).then(() => ({\r\n campaign: data.campaign,\r\n assetGroup: data.assetGroup,\r\n })).catch(errorData => (\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n Promise.reject({ error: { ...errorData } })));\r\n }\r\n\r\n // no update necessary if not publishing.\r\n return Promise.resolve({\r\n campaign: data.campaign,\r\n assetGroup: data.assetGroup,\r\n });\r\n }, [isPublishing, savedAssetGroup, savedCampaign]);\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","export const UNIFIED_APP_CAMPAIGN_WIZARD_ID = 'UNIFIED_APP_CAMPAIGN_WIZARD_ID';\r\nexport const UNIFIED_APP_EDIT_CAMPAIGN_SETTINGS_WIZARD_ID = 'UNIFIED_APP_EDIT_CAMPAIGN_SETTINGS_WIZARD_ID';\r\nexport const UNIFIED_APP_EDIT_ASSET_GROUP_SETTINGS_WIZARD_ID = 'UNIFIED_APP_EDIT_ASSET_GROUP_SETTINGS_WIZARD_ID';\r\n\r\nexport const STEP_PATHS = {\r\n ASSETS: 'ASSETS',\r\n TARGETING: 'TARGETING',\r\n CAMPAIGN_DETAILS: 'CAMPAIGN_DETAILS',\r\n CAMPAIGN_DETAILS_EDIT: 'CAMPAIGN_DETAILS_EDIT',\r\n ASSETS_GROUP_EDIT: 'ASSETS_GROUP_EDIT',\r\n BUDGET: 'BUDGET',\r\n SUMMARY: 'SUMMARY',\r\n};\r\n","import React from 'react';\r\nimport { Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { AssetsStepShell, AssetsStepSettingsShell, useAssetsStepRepository } from '@bingads-webui-campaign-react/unified-app-assets';\r\nimport { TargetingStepShell, useTargetingStepRepository } from '@bingads-webui-campaign-react/unified-app-targeting';\r\nimport { CampaignDetailsStepShell, CampaignDetailsEditStepShell, useCampaignDetailsStepRepository, useCampaignDetailsEditStepRepository } from '@bingads-webui-campaign-react/unified-app-campaign-details';\r\nimport { BudgetStepShell, useBudgetStepRepository } from '@bingads-webui-campaign-react/unified-app-budget';\r\nimport { SummaryStepShell, useSummaryStepRepository } from '@bingads-webui-campaign-react/unified-app-summary';\r\n\r\nimport { STEP_PATHS } from './step-constants';\r\n\r\nexport const UnifiedAppCampaignStepsConfig = [\r\n {\r\n id: STEP_PATHS.ASSETS,\r\n view: props => \r\n
\r\n);\r\n\r\nSystemErrors.propTypes = {\r\n errors: propTypes.arrayOf(propTypes.string),\r\n};\r\n\r\nSystemErrors.defaultProps = {\r\n errors: [],\r\n};\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport { Campaign, AssetGroup } from '@bingads-webui/campaign-odata-schemas';\r\n\r\nexport const CampaignValidationGroup = ({\r\n data, onDataChange, i18n, children, stopPropagation,\r\n}) => {\r\n const onValidate = useCallback((results) => {\r\n onDataChange({\r\n data: prevData => ({\r\n ...prevData,\r\n campaign: {\r\n ...prevData.campaign,\r\n ...results.data,\r\n },\r\n }),\r\n isValid: results.isValid,\r\n isDirty: results.isDirty,\r\n });\r\n }, [onDataChange]);\r\n\r\n return (\r\n \r\n setSurfaceChoice(item.props.itemKey)}>\r\n \r\n
);\r\n};\r\n\r\nAppAdPreviewControls.propTypes = {\r\n onSurfaceChange: PropTypes.func.isRequired,\r\n onPlacementFilterChange: PropTypes.func.isRequired,\r\n showStart: PropTypes.bool.isRequired,\r\n};\r\n","export const getAdPreviewStyles = (components, { palette = {} }) => ({\r\n adPreviewContainer: {\r\n '& .new-preview-carousel-container-adprelib': {\r\n border: 0,\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n borderRadius: '2px',\r\n backgroundColor: `${palette.white}`,\r\n },\r\n '& .ad-preview-controls-container': {\r\n paddingBottom: 10,\r\n },\r\n '& .ad-preview-actions': {\r\n '& button': {\r\n marginRight: 8,\r\n },\r\n },\r\n '& .ad-preview-title': {\r\n '& .preview-title-string-key': {\r\n fontSize: 14,\r\n fontWeight: 'bold',\r\n marginRight: 8,\r\n },\r\n '& .preview-title-preview-type': {\r\n fontSize: 14,\r\n },\r\n },\r\n '& .preview-type-string': {\r\n visibility: 'hidden',\r\n },\r\n '& .carousel-wrapper': {\r\n '& .carousel-inner': {\r\n height: 515,\r\n merginTop: 10,\r\n },\r\n '& .carousel-control': {\r\n background: 'transparent',\r\n },\r\n },\r\n },\r\n\r\n carouselLayoutClassName: {\r\n border: 0,\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n borderRadius: '2px',\r\n backgroundColor: `${palette.white}`,\r\n\r\n '& .carousel-wrapper': {\r\n '& .carousel-inner': {\r\n height: 515,\r\n },\r\n '& .carousel-control.left, .carousel-control.right': {\r\n left: 0,\r\n bottom: -7,\r\n background: 'transparent',\r\n zIndex: 20,\r\n },\r\n },\r\n },\r\n carouselControlsMsn: {\r\n '& .carousel-wrapper': {\r\n '& .carousel-control.left': {\r\n marginLeft: 200,\r\n },\r\n '& .carousel-control.right': {\r\n marginLeft: 430,\r\n },\r\n '& .carousel-indicators': {\r\n marginLeft: 240,\r\n margin: '20px 24px',\r\n left: 0,\r\n },\r\n },\r\n },\r\n carouselControlsOthers: {\r\n '& .carousel-wrapper': {\r\n '& .carousel-control.left': {\r\n marginLeft: 270,\r\n },\r\n '& .carousel-control.right': {\r\n marginLeft: 357,\r\n },\r\n '& .carousel-indicators': {\r\n marginLeft: 310,\r\n margin: '20px 24px',\r\n left: 0,\r\n },\r\n },\r\n },\r\n customCarouselRoot: {\r\n '& .custom-carousel-controls-and-indicators': {\r\n transform: 'translateX(-15px) translateX(-50%)',\r\n left: '50%',\r\n\r\n '& .carousel-control.left': {\r\n marginRight: '10px !important',\r\n },\r\n '& .carousel-control.right': {\r\n marginLeft: '5px !important',\r\n },\r\n },\r\n },\r\n adExtensionContainer: {\r\n // todo: add styles for ad extension preview components if needed\r\n margin: 10,\r\n },\r\n placementContainerClassName: {\r\n minWidth: 669,\r\n border: '0 !important',\r\n boxShadow: 'unset !important',\r\n borderRadius: '0 !important',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n flexDirection: 'column',\r\n\r\n '& .placement-validation-message': {\r\n display: 'inline-block',\r\n width: '100%',\r\n fontSize: 14,\r\n textAlign: 'center',\r\n lineHeight: 2,\r\n marginRight: 16,\r\n },\r\n },\r\n carouselLayoutHeader: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n\r\n '& .carousel-header-texts': {\r\n display: 'inline-block',\r\n margin: '20px 8px 16px 24px',\r\n fontSize: 18,\r\n lineHeight: '24px',\r\n\r\n '& .carousel-header-ratio': {\r\n fontSize: 14,\r\n fontWeight: 'bold',\r\n marginRight: 8,\r\n },\r\n '& .carousel-header-title': {\r\n fontSize: 14,\r\n },\r\n },\r\n '& .ad-preview-actions': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexGrow: 0,\r\n flexShrink: 0,\r\n alignItems: 'center',\r\n marginRight: 16,\r\n '& button': {\r\n marginRight: 8,\r\n },\r\n },\r\n },\r\n});\r\n\r\nconst geCarouselStyleForMsan = {\r\n root: {\r\n '& .carousel-wrapper': {\r\n '& .carousel-control.left': {\r\n marginLeft: 200,\r\n },\r\n '& .carousel-control.right': {\r\n marginLeft: 430,\r\n },\r\n },\r\n },\r\n previewCarousel: {\r\n bottomCarouselNavigation: {\r\n '& .carousel-indicators': {\r\n marginLeft: 240,\r\n margin: '20px 24px',\r\n left: 0,\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst geCarouselStyleForOthers = {\r\n root: {\r\n '& .carousel-wrapper': {\r\n '& .carousel-control.left': {\r\n marginLeft: 270,\r\n },\r\n '& .carousel-control.right': {\r\n marginLeft: 357,\r\n },\r\n },\r\n },\r\n previewCarousel: {\r\n bottomCarouselNavigation: {\r\n '& .carousel-indicators': {\r\n marginLeft: 310,\r\n margin: '20px 24px',\r\n left: 0,\r\n },\r\n },\r\n },\r\n};\r\n\r\nexport const getCarouselControlsAndIndicatorsStyleBySurface = (surface) => {\r\n switch (surface) {\r\n case 'Bing':\r\n case 'Edge':\r\n case 'Outlook':\r\n return geCarouselStyleForOthers;\r\n case 'Msn':\r\n default:\r\n return geCarouselStyleForMsan;\r\n }\r\n};\r\n","import React, { useCallback, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { usePreviewCarouselLayout } from '@bingads-webui-campaign-react/ad-placement-factory';\r\nimport { AdPlacementsGroupType } from '@bingads-webui-campaign-react/ad-placement-consts';\r\nimport { AppAdPreviewControls } from './preview-controls';\r\nimport previewPlaceholder from '../media/preview-placeholder.png';\r\nimport { getAdPreviewStyles, getCarouselControlsAndIndicatorsStyleBySurface } from './preview-styles';\r\n\r\nconst shortHeadlineMaxLength = 30;\r\nconst longHeadlineMaxLength = 90;\r\nconst descriptionMaxLength = 90;\r\n\r\nexport const AppAdsPreview = (props) => {\r\n const {\r\n imageList,\r\n updateImageList,\r\n previewImagesSharedState,\r\n setPreviewImagesSharedState,\r\n placementCustomizationPredicate,\r\n hideHeaderButtons,\r\n isAppCampaignPreview,\r\n showStart,\r\n } = props;\r\n\r\n const adDataProps = ['shortHeadline', 'longHeadline', 'description', 'url', 'displayUrl', 'callToAction', 'businessName'];\r\n const currentAdData = _.pick(props, adDataProps);\r\n const [adData, setAdData] = React.useState(currentAdData);\r\n\r\n const isAdDataUpdated = useCallback(newAdData => (newAdData.length !== adData.length || !_.isMatch(newAdData, adData)), [adData]);\r\n const debouncedSetAdData = useMemo(() => _.debounce(setAdData, 500), []);\r\n if (isAdDataUpdated(currentAdData)) {\r\n debouncedSetAdData.cancel();\r\n debouncedSetAdData(currentAdData);\r\n }\r\n\r\n const getImageIndexFromId = useCallback((id) => {\r\n const index = _.findIndex(imageList, placement => _.first(placement).id === id && !_.first(placement).isLogo && !_.first(placement).isPortrait);\r\n return index >= 0 ? index : null;\r\n }, [imageList]);\r\n\r\n const getPreviewImageIndex = useCallback((idRequestedByImageExperience) => {\r\n let index = getImageIndexFromId(idRequestedByImageExperience);\r\n\r\n if (!index) {\r\n const firstImageIndex = _.findIndex(imageList, placement => !_.first(placement).isLogo && !_.first(placement).isPortrait);\r\n index = firstImageIndex >= 0 ? firstImageIndex : null;\r\n }\r\n\r\n return index;\r\n }, [getImageIndexFromId, imageList]);\r\n\r\n const { previewImageId } = previewImagesSharedState;\r\n\r\n let imagesToDisplay = [];\r\n let previewImageIndex = null;\r\n if (imageList && isAppCampaignPreview) {\r\n // for app campaign, always send all images for preview\r\n imagesToDisplay = imageList.flat();\r\n } else if (imageList && imageList.length > 0) {\r\n previewImageIndex = getPreviewImageIndex(previewImageId);\r\n imagesToDisplay = _.isNumber(previewImageIndex) ? imageList[previewImageIndex] : [];\r\n }\r\n\r\n const onAddAspectRatio = useCallback((type) => {\r\n const newImageList = [...imageList];\r\n _.find(newImageList[previewImageIndex], imagePlacement => imagePlacement.type === type).isIncluded = true;\r\n setPreviewImagesSharedState({ ...previewImagesSharedState, isImageListUpdatedByPreview: true });\r\n updateImageList(newImageList);\r\n }, [imageList, previewImageIndex, previewImagesSharedState, setPreviewImagesSharedState, updateImageList]);\r\n\r\n const onRemoveAspectRatio = useCallback((type) => {\r\n const newImageList = [...imageList];\r\n _.find(newImageList[previewImageIndex], imagePlacement => imagePlacement.type === type).isIncluded = false;\r\n setPreviewImagesSharedState({ ...previewImagesSharedState, isImageListUpdatedByPreview: true });\r\n updateImageList(newImageList);\r\n }, [imageList, previewImageIndex, previewImagesSharedState, setPreviewImagesSharedState, updateImageList]);\r\n\r\n const onEdit = useCallback((type) => {\r\n const cropImageObj = _.find(imageList[previewImageIndex], imagePlacement => imagePlacement.type === type);\r\n setPreviewImagesSharedState({ ...previewImagesSharedState, cropImageObj });\r\n }, [imageList, previewImageIndex, previewImagesSharedState, setPreviewImagesSharedState]);\r\n\r\n const truncatedAdData = useMemo(() => {\r\n const validAdData = { ...adData };\r\n\r\n if (validAdData.shortHeadline && validAdData.shortHeadline.length > shortHeadlineMaxLength) {\r\n validAdData.shortHeadline = validAdData.shortHeadline.substring(0, shortHeadlineMaxLength - 1);\r\n }\r\n\r\n if (validAdData.longHeadline && validAdData.longHeadline.length > longHeadlineMaxLength) {\r\n validAdData.longHeadline = validAdData.longHeadline.substring(0, longHeadlineMaxLength - 1);\r\n }\r\n\r\n if (validAdData.description && validAdData.description.length > descriptionMaxLength) {\r\n validAdData.description = validAdData.description.substring(0, descriptionMaxLength - 1);\r\n }\r\n\r\n return validAdData;\r\n }, [adData]);\r\n\r\n const [placementFilter, setPlacementFilter] = useState({ func: () => true });\r\n\r\n const getFirstElement = useCallback((item) => {\r\n if (_.isArray(item)) {\r\n return _.first(item);\r\n }\r\n return item;\r\n }, []);\r\n\r\n const getLogo = useCallback(() => {\r\n const logos = _.filter(imageList, imageArr =>\r\n // reuse the selected TransparentLogo for the Logo property in preview\r\n // for Prong previews where we need both smallImage and Logo scenario\r\n getFirstElement(imageArr).associationType === 'TransparentLogo');\r\n\r\n return _.first(logos);\r\n }, [getFirstElement, imageList]);\r\n\r\n const { PreviewCarouselLayout } = usePreviewCarouselLayout({\r\n groupType: showStart ? AdPlacementsGroupType.appAdStart : AdPlacementsGroupType.appAd,\r\n placementFilterPredicate: placementFilter.func,\r\n customDefaultImage: previewPlaceholder,\r\n placementCustomizationPredicate: placementCustomizationPredicate || null,\r\n });\r\n\r\n const classes = useDefaultStyles(getAdPreviewStyles);\r\n const [surfaceChoice, setSurfaceChoice] = useState({});\r\n const styleOverrides = useMemo(() => getCarouselControlsAndIndicatorsStyleBySurface(surfaceChoice), [surfaceChoice]);\r\n\r\n const onPlacementFilterChange = useCallback((newPlacementFilter) => {\r\n setPlacementFilter({ func: newPlacementFilter });\r\n }, []);\r\n\r\n return (\r\n \r\n logo.isIncluded)}\r\n headerButtonProps={{\r\n onAddAspectRatio,\r\n onRemoveAspectRatio,\r\n onEdit,\r\n }}\r\n adData={truncatedAdData}\r\n getIsRequiredByIndex={() => true}\r\n enableAutoPlay={false}\r\n styleOverrides={styleOverrides}\r\n hideHeaderButtons={hideHeaderButtons}\r\n />\r\n
);\r\n};\r\n\r\nAppAdsPreview.propTypes = {\r\n imageList: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({}))),\r\n updateImageList: PropTypes.func.isRequired,\r\n previewImagesSharedState: PropTypes.shape({\r\n previewImageId: PropTypes.shape({}),\r\n }).isRequired,\r\n setPreviewImagesSharedState: PropTypes.func.isRequired,\r\n placementCustomizationPredicate: PropTypes.func,\r\n hideHeaderButtons: PropTypes.bool,\r\n isAppCampaignPreview: PropTypes.bool,\r\n showStart: PropTypes.bool,\r\n};\r\n\r\nAppAdsPreview.defaultProps = {\r\n imageList: null,\r\n placementCustomizationPredicate: null,\r\n hideHeaderButtons: false,\r\n isAppCampaignPreview: false,\r\n showStart: false,\r\n};\r\n","import { pick, extend, isString } from 'underscore';\r\nimport { loadCampaignAsViewModel, bulkModelToViewModelForLocationTargets, bulkModelToViewModelForDayTimeTargets } from '@bingads-webui-campaign-react/perf-max-step-wizard';\r\n\r\nconst whitelistedSchemaPropertyKeysForModel = [\r\n 'Notes', 'Budget', 'Id', 'Name', 'TimeZone', 'BidStrategyName', 'Status',\r\n 'DeliveryStatus', 'DeliveryStatusDetails', 'CampaignType', 'CampaignSubType',\r\n 'HasAuctionInsight', 'IsBidLandscapeAvailable', 'TrackingUrlTemplate',\r\n 'FinalUrlSuffix', 'UrlCustomParameters', 'BiddingScheme', 'NativeBidAdjustment',\r\n 'CampaignSettings', 'DisplayBiddingStrategyType',\r\n 'DisplayBiddingStrategyMaxCpc', 'DisplayBiddingStrategyTargetCpa', 'Languages',\r\n 'ExperimentId', 'BaseCampaignName', 'TargetSetting',\r\n 'AdScheduleUseSearcherTimeZone', 'AvailableInsightTypeIds',\r\n 'MultiMediaAdBidAdjustment', 'AppStore', 'AppId',\r\n];\r\n\r\nexport const viewModelToBulkModelForCampaign = (campaignViewModel) => {\r\n const data = pick(campaignViewModel.data, whitelistedSchemaPropertyKeysForModel);\r\n\r\n if (campaignViewModel.data\r\n && campaignViewModel.data.BiddingScheme\r\n && (campaignViewModel.data.BiddingScheme.ManualCPC || campaignViewModel.data.BiddingScheme.ManualCPI)\r\n ) {\r\n // Get Campaigns call returns it as ManualCPC.\r\n // Bulk upsert expects it as ManualCpc in lower case.\r\n data.BiddingScheme = {\r\n ...campaignViewModel.data.BiddingScheme,\r\n ManualCpc: campaignViewModel.data.BiddingScheme.ManualCPC,\r\n ManualCpi: campaignViewModel.data.BiddingScheme.ManualCPI,\r\n };\r\n }\r\n\r\n return data;\r\n};\r\n\r\nexport const bulkModelToViewModelForCampaign = ({\r\n campaignModel,\r\n bundleCountries,\r\n originalCampaignViewModel,\r\n}) => {\r\n let data = pick(campaignModel, whitelistedSchemaPropertyKeysForModel);\r\n if (data.Id && isString(data.Id)) {\r\n // eslint-disable-next-line no-param-reassign\r\n data.Id = parseInt(data.Id, 10);\r\n }\r\n data = extend(data, bulkModelToViewModelForLocationTargets({\r\n locationTargetsModel: campaignModel.CampaignCriterions,\r\n bundleCountries,\r\n }));\r\n\r\n data = extend(data, bulkModelToViewModelForDayTimeTargets({\r\n criterions: campaignModel.CampaignCriterions,\r\n }));\r\n\r\n data = extend(data, {\r\n AppSetting: originalCampaignViewModel && originalCampaignViewModel.data && originalCampaignViewModel.data.AppSetting,\r\n });\r\n\r\n const campaignViewModel = {\r\n data,\r\n isValid: true,\r\n isDirty: false,\r\n };\r\n return campaignViewModel;\r\n};\r\n\r\nexport { loadCampaignAsViewModel };\r\n","import _ from 'underscore';\r\nimport { createOrUpdateCampaign } from '@bingads-webui-campaign-react/perf-max-data';\r\nimport { Campaign } from '@bingads-webui/campaign-odata-schemas';\r\nimport { ERROR_ENTITY } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport {\r\n viewModelToBulkModelForLocationTargets,\r\n viewModelToBulkModelForAdSchedules,\r\n getBulkUploadErrorType, modelToViewModelForBulkErrors, removeReferencedEntityInvalidIdErrors, unexpectedBulkErrorToString,\r\n isBulkWrappedResponse,\r\n genericApiError,\r\n} from '@bingads-webui-campaign-react/perf-max-step-wizard';\r\nimport { viewModelToBulkModelForCampaign, bulkModelToViewModelForCampaign } from './campaign';\r\n\r\nconst bulkUpsertCampaignSettingsEntityErrorMap = {\r\n [getBulkUploadErrorType(Campaign)]: ERROR_ENTITY.Campaign,\r\n 'Campaign Location Criterion Error': ERROR_ENTITY.CampaignLocation,\r\n 'Campaign Radius Criterion Error': ERROR_ENTITY.CampaignRadius,\r\n 'Campaign Negative Location Criterion Error': ERROR_ENTITY.CampaignNegativeLocation,\r\n 'Campaign Location Intent Criterion Error': ERROR_ENTITY.CampaignLocationIntent,\r\n 'Campaign Day Time Criterion Error': ERROR_ENTITY.CampaignDayTimeCriterion,\r\n};\r\n\r\nexport const getErrorsPlaceholders = () => ({\r\n serverErrors: [],\r\n systemErrors: [],\r\n});\r\n\r\nexport const saveCampaign = ({\r\n campaign: campaignViewModel,\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n}, { scenario, i18n, activityLogger }) => {\r\n const campaignModel = viewModelToBulkModelForCampaign(campaignViewModel);\r\n const locationTargetsModel = viewModelToBulkModelForLocationTargets(campaignViewModel, bundleLocationCriterions);\r\n const adSchedulesModel = viewModelToBulkModelForAdSchedules(campaignViewModel);\r\n\r\n const modelToSave = {\r\n ...campaignModel,\r\n CampaignCriterions: [\r\n ...locationTargetsModel,\r\n ...adSchedulesModel,\r\n ],\r\n };\r\n\r\n return createOrUpdateCampaign(modelToSave)\r\n // with bulk the result will have shape of:\r\n // - { ...entityData } - in case of success;\r\n // - { entity: { ...entityData }, errors: [(EditorialError|MTError)] } - in case of error(s).\r\n .then((result) => {\r\n const campaign = bulkModelToViewModelForCampaign({\r\n campaignModel: result,\r\n originalCampaignViewModel: campaignViewModel,\r\n bundleCountries,\r\n });\r\n\r\n const data = {\r\n campaign,\r\n ...getErrorsPlaceholders(),\r\n };\r\n\r\n return data;\r\n }, (bulkOrSystemError) => {\r\n if (isBulkWrappedResponse(bulkOrSystemError)) {\r\n const { entity, errors } = bulkOrSystemError;\r\n const campaign = entity ?\r\n bulkModelToViewModelForCampaign({\r\n campaignModel: entity,\r\n bundleCountries,\r\n }) :\r\n campaignViewModel;\r\n\r\n let filteredErrors = errors;\r\n if (campaign.data.Id <= 0) {\r\n filteredErrors = removeReferencedEntityInvalidIdErrors(filteredErrors);\r\n }\r\n const serverErrors = modelToViewModelForBulkErrors(\r\n filteredErrors,\r\n bulkUpsertCampaignSettingsEntityErrorMap,\r\n scenario,\r\n i18n,\r\n activityLogger\r\n );\r\n\r\n const data = {\r\n campaign,\r\n ...getErrorsPlaceholders(),\r\n serverErrors,\r\n };\r\n\r\n return _.isEmpty(filteredErrors) ? data : Promise.reject(data);\r\n }\r\n\r\n // Activity\r\n // eslint-disable-next-line no-console\r\n console.warn(`Campaign bulk upsert system error: ${unexpectedBulkErrorToString(bulkOrSystemError)}`);\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n campaign: campaignViewModel,\r\n ...getErrorsPlaceholders(),\r\n serverErrors: [genericApiError],\r\n // TODO: We would want to return the criterions with Ids, but UI's bulk drops them\r\n });\r\n });\r\n};\r\n","import { saveCampaign as UnifiedAppCampaignSave } from './campaign-bulk';\r\n\r\nexport const saveCampaign = UnifiedAppCampaignSave;\r\n","import { saveAssetGroupAndLinkedData } from '@bingads-webui-campaign-react/perf-max-step-wizard';\r\n\r\nexport const saveAssetGroup = saveAssetGroupAndLinkedData;\r\n","import { useCallback, useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { useLocalizeBudget } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { usePreference, preferenceNames } from '@bingads-webui-campaign-react/pmax-lite-data';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nexport const roasMtToUI = roas => (_.isNumber(roas) ? roas * 100 : null);\r\nexport const roasUiToMt = roas => (_.isNumber(roas) ? (roas / 100).toFixed(4) : null);\r\n\r\nexport const useBudgetModel = () => {\r\n const i18n = useContext(I18nContext);\r\n const { localizeBudget } = useLocalizeBudget();\r\n const [{ value: currencyPreference }] = usePreference(preferenceNames.SelectedCurrency);\r\n\r\n const budgetModelToViewModel = useCallback((campaign) => {\r\n const budgetAmount = _.get(campaign, ['Budget', 'Amount']);\r\n const bidStrategy = _.get(campaign, ['BiddingScheme', 'Type']);\r\n const bidValueCpc = _.get(campaign, ['BiddingScheme', 'ManualCPC']) || null;\r\n const bidValueCpi = _.get(campaign, ['BiddingScheme', 'ManualCPI']) || null;\r\n const cpa = _.get(campaign, ['BiddingScheme', 'TargetCpa']);\r\n const roas = parseFloat(_.get(campaign, ['BiddingScheme', 'TargetRoas'])) || null;\r\n const isInitialAdditionalDetailsChecked = _.isNumber(cpa) || _.isNumber(roas) || _.isNumber(bidValueCpc) || _.isNumber(bidValueCpi);\r\n\r\n return {\r\n budgetAmount: localizeBudget(budgetAmount, 'USD'),\r\n bidStrategy,\r\n ManualCPI: bidValueCpi,\r\n ManualCPC: bidValueCpc,\r\n currency: currencyPreference,\r\n cpa,\r\n roas: roasMtToUI(roas),\r\n isInitialAdditionalDetailsChecked,\r\n isMarketingMetricValid: true,\r\n };\r\n }, [currencyPreference, localizeBudget]);\r\n\r\n const budgetViewModelToModel = useCallback((bidStrategy, budgetAmount, bidValueCpc = null, bidValueCpi = null) => (\r\n {\r\n BiddingScheme: {\r\n Type: bidStrategy,\r\n ...(bidStrategy === 'ManualCpc' && bidValueCpc !== null && { ManualCpc: bidValueCpc }),\r\n ...(bidStrategy === 'ManualCpa' && bidValueCpi !== null && { ManualCpi: bidValueCpi }),\r\n },\r\n Budget: {\r\n Amount: i18n.parseDecimal(budgetAmount),\r\n Type: 'DailyStandard',\r\n },\r\n }), [i18n]);\r\n\r\n const isBudgetInputValid = (isBudgetValid, isMarketingMetricValid) =>\r\n isBudgetValid && isMarketingMetricValid;\r\n\r\n return {\r\n budgetModelToViewModel,\r\n budgetViewModelToModel,\r\n isBudgetInputValid,\r\n };\r\n};\r\n","import classNames from 'classnames';\r\nimport { useResponsiveStyles } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\nexport const useResponsiveStyleWrapper = (getStylesFunction) => {\r\n const getResponsiveStyles = useResponsiveStyles(getStylesFunction);\r\n\r\n return className => classNames(getResponsiveStyles(className));\r\n};\r\n","export const StoreTypes = {\r\n WindowsAppStore: 'WindowsAppStore',\r\n AndroidPlayStore: 'AndroidPlayStore',\r\n IosAppStore: 'IosAppStore',\r\n};\r\n\r\nexport const FLOWS = {\r\n ANDROID: 'ANDROID',\r\n IOS: 'IOS',\r\n WINDOWS: 'WINDOWS',\r\n};\r\n\r\nexport const AppStoreTypes = {\r\n GoogleAppStore: 'GoogleAppStore',\r\n AppleAppStore: 'AppleAppStore',\r\n MicrosoftAppStore: 'MicrosoftAppStore',\r\n};\r\n\r\nexport const APP_STORE_TO_STORE_TYPE = {\r\n [AppStoreTypes.GoogleAppStore]: StoreTypes.AndroidPlayStore,\r\n [AppStoreTypes.AppleAppStore]: StoreTypes.IosAppStore,\r\n [AppStoreTypes.MicrosoftAppStore]: StoreTypes.WindowsAppStore,\r\n};\r\n\r\nexport const STORE_TYPE_TO_FLOW = {\r\n [StoreTypes.WindowsAppStore]: FLOWS.WINDOWS,\r\n [StoreTypes.AndroidPlayStore]: FLOWS.ANDROID,\r\n [StoreTypes.IosAppStore]: FLOWS.IOS,\r\n};\r\n","import { PANEL_KEYS } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { FLOWS } from './constants';\r\n\r\nexport const getAssetsPanels = (flow) => {\r\n const defaultPanels = [\r\n PANEL_KEYS.SHORT_HEADLINES,\r\n PANEL_KEYS.VIDEOS,\r\n ];\r\n\r\n if (flow === FLOWS.WINDOWS) {\r\n defaultPanels.push(PANEL_KEYS.PRONG_IMAGES);\r\n defaultPanels.push(PANEL_KEYS.SPOTLIGHT_IMAGES);\r\n defaultPanels.push(PANEL_KEYS.LOGOS);\r\n }\r\n\r\n if (flow === FLOWS.ANDROID || flow === FLOWS.IOS) {\r\n defaultPanels.push(PANEL_KEYS.DESCRIPTIONS);\r\n defaultPanels.push(PANEL_KEYS.IMAGES);\r\n }\r\n\r\n return defaultPanels;\r\n};\r\n\r\nexport const getAssetsSettingsPanels = (flow) => {\r\n const panels = getAssetsPanels(flow);\r\n\r\n panels.push(PANEL_KEYS.AUDIENCE_SIGNAL);\r\n\r\n return panels;\r\n};\r\n","export const parseFileName = (nameWithExtension) => {\r\n let nameWithoutExt = null;\r\n let ext = null;\r\n\r\n if (nameWithExtension) {\r\n const index = nameWithExtension.lastIndexOf('.');\r\n if (index > 0) {\r\n nameWithoutExt = nameWithExtension.slice(0, index);\r\n ext = nameWithExtension.slice(index);\r\n } else {\r\n nameWithoutExt = nameWithExtension;\r\n ext = '';\r\n }\r\n }\r\n\r\n return {\r\n nameWithoutExt,\r\n ext,\r\n };\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\n\r\nimport { FileDragger } from '@bingads-webui-campaign-react/file-dragger';\r\nimport { FilePicker as BackboneFilePicker } from '@bingads-webui/file-picker';\r\nimport { BackboneInstanceWrapper } from '@bingads-webui-react/backbone-instance-wrapper';\r\nimport { parseFileName } from '../utils/parse-file';\r\n\r\nexport class FilePicker extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n const {\r\n i18n,\r\n enableMultiple,\r\n allowedFileExtensions,\r\n showExtensionError,\r\n useButton,\r\n } = props;\r\n const filePickerOptions = {\r\n allowedFileExtensions,\r\n i18n,\r\n isNative: false,\r\n displayFilePath: 'filename',\r\n enableMultiple,\r\n useButton,\r\n };\r\n\r\n // This dependency injection is only for test purpose\r\n // For the implementation is coupled tightly with BackboneFilePicker\r\n this.filePicker = this.props.filePicker ? this.props.filePicker : new BackboneFilePicker(filePickerOptions);\r\n\r\n this.filePicker.on('validated', this.readFile);\r\n this.filePicker.on('error.extension', () => { showExtensionError(); });\r\n\r\n this.filePicker.render();\r\n this.filePicker.$('.remove-file').remove();\r\n this.filePicker.$('.file-text').hide();\r\n\r\n this.state = {\r\n isFileDraging: false,\r\n };\r\n\r\n // Only for test purpose\r\n if (this.props.testRef) {\r\n this.props.testRef.current = {\r\n filePicker: this.filePicker,\r\n readFile: this.readFile.bind(this),\r\n getReachFileSizeLimitErrorMessage: this.props.getReachFileSizeLimitErrorMessage.bind(this),\r\n };\r\n }\r\n }\r\n\r\n readFile = (fileObjects) => {\r\n const {\r\n onFileRead,\r\n showErrors,\r\n onFileSelected,\r\n maximumFileSizeMB,\r\n isReachFileSizeLimit,\r\n getReachFileSizeLimitErrorMessage,\r\n } = this.props;\r\n\r\n const selectedFiles = !_.isUndefined(fileObjects) && fileObjects.length > 0 ? fileObjects :\r\n this.filePicker.fileObjects;\r\n\r\n if (selectedFiles) {\r\n const selectedFilesCount = selectedFiles.length;\r\n let fileIndex;\r\n const errorArr = [];\r\n\r\n for (fileIndex = 0; fileIndex < selectedFilesCount; fileIndex += 1) {\r\n const fileObj = selectedFiles[fileIndex];\r\n const fileSizeMB = (fileObj.size / 1024 / 1024).toFixed(3);\r\n let reachLimit;\r\n\r\n if (isReachFileSizeLimit) {\r\n const { ext } = parseFileName(fileObj.name);\r\n reachLimit = isReachFileSizeLimit({ ext, fileSizeMB });\r\n } else {\r\n reachLimit = maximumFileSizeMB > 0 && fileSizeMB > maximumFileSizeMB;\r\n }\r\n\r\n if (reachLimit) {\r\n errorArr.push(getReachFileSizeLimitErrorMessage(_.extend({\r\n fileSizeMB,\r\n }, !isReachFileSizeLimit && { maximumFileSizeMB })));\r\n\r\n break;\r\n }\r\n }\r\n\r\n if (_.isEmpty(errorArr)) {\r\n if (_.isFunction(onFileSelected)) {\r\n onFileSelected(selectedFiles);\r\n }\r\n\r\n return onFileRead(selectedFiles);\r\n }\r\n\r\n showErrors(errorArr);\r\n } // else no media picked, so do nothing\r\n\r\n return ''; // for testability\r\n };\r\n\r\n handleDraging = (isDraging) => {\r\n this.setState({\r\n isFileDraging: isDraging,\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n i18n,\r\n enableDrag,\r\n hideDescription,\r\n allowedFileExtensions,\r\n showExtensionError,\r\n fileDraggerLabel,\r\n fileDraggerTip,\r\n fileDraggerDropDescription,\r\n useLargeStyling,\r\n } = this.props;\r\n\r\n const {\r\n isFileDraging,\r\n } = this.state;\r\n\r\n const fileButton = (\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n {!hideDescription &&\r\n
\r\n );\r\n }\r\n}\r\n\r\nFilePicker.propTypes = {\r\n onFileRead: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showErrors: PropTypes.func.isRequired,\r\n enableMultiple: PropTypes.bool,\r\n enableDrag: PropTypes.bool,\r\n hideDescription: PropTypes.bool,\r\n fileDraggerLabel: PropTypes.string,\r\n fileDraggerTip: PropTypes.string,\r\n fileDraggerDropDescription: PropTypes.string,\r\n onFileSelected: PropTypes.func,\r\n allowedFileExtensions: PropTypes.arrayOf(PropTypes.string),\r\n showExtensionError: PropTypes.func,\r\n\r\n maximumFileSizeMB: PropTypes.number,\r\n isReachFileSizeLimit: PropTypes.func,\r\n getReachFileSizeLimitErrorMessage: PropTypes.func,\r\n useLargeStyling: PropTypes.bool,\r\n useButton: PropTypes.bool,\r\n};\r\n\r\nFilePicker.defaultProps = {\r\n enableMultiple: false,\r\n enableDrag: false,\r\n hideDescription: false,\r\n onFileSelected: _.noop(),\r\n allowedFileExtensions: [],\r\n showExtensionError: _.noop,\r\n\r\n fileDraggerLabel: '',\r\n fileDraggerTip: '',\r\n fileDraggerDropDescription: '',\r\n\r\n // below two are conflict and isReachFileSizeLimit takes higher priority\r\n isReachFileSizeLimit: undefined,\r\n maximumFileSizeMB: undefined,\r\n getReachFileSizeLimitErrorMessage: _.noop,\r\n useLargeStyling: false,\r\n useButton: false,\r\n};\r\n","import Promise from 'bluebird';\r\n\r\nexport const readFileAsDataURLAsync = file => new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n\r\n reader.addEventListener('load', (e) => {\r\n resolve(e.target.result);\r\n });\r\n\r\n reader.onerror = reject;\r\n\r\n reader.readAsDataURL(file);\r\n});\r\n","export const MaximumImageFileSizeMB = 50;\r\nexport const MaximumVideoFileSizeMB = 1e4;\r\n\r\n// Refer to https://docs.microsoft.com/en-us/azure/media-services/latest/encode-media-encoder-standard-formats-reference\r\n// Plus some additional video formats supported by Xandr confirmed by Weiyuan to work with AMS\r\nexport const allowedVideoFileExtensions = [\r\n '.flv',\r\n '.mxf',\r\n '.gxf',\r\n '.ts',\r\n '.ps',\r\n '.3gp',\r\n '.3gpp',\r\n '.mpg',\r\n '.wmv',\r\n '.asf',\r\n '.avi',\r\n '.mp4',\r\n '.m4a',\r\n '.m4v',\r\n '.isma',\r\n '.ismv',\r\n '.dvr-ms',\r\n '.mkv',\r\n '.wav',\r\n '.mov',\r\n '.vob',\r\n '.ogv',\r\n '.qt',\r\n '.mpv',\r\n '.m2v',\r\n '.3g2',\r\n '.swf',\r\n '.mpeg',\r\n '.mpe',\r\n];\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\n\r\nimport { FilePicker } from './file-picker';\r\nimport { readFileAsDataURLAsync } from '../utils/read-file';\r\nimport { MaximumImageFileSizeMB } from '../utils/constants';\r\n\r\n// Refer to https://docs.microsoft.com/en-us/azure/media-services/latest/encode-media-encoder-standard-formats-reference\r\nconst defaultAllowedImageExtensions = ['.png', '.jpg', '.jpeg', '.gif'];\r\n\r\n// to reuse existing test coverage, still keep class format\r\nexport class ImageFilePicker extends React.PureComponent {\r\n onFileReadInternal = (selectedFiles) => {\r\n const { onFileRead } = this.props;\r\n\r\n return Promise.map(\r\n selectedFiles,\r\n fileObj => readFileAsDataURLAsync(fileObj)\r\n ).then((imageSources) => {\r\n onFileRead(imageSources, selectedFiles);\r\n });\r\n };\r\n\r\n getReachFileSizeLimitErrorMessage = ({ fileSizeMB, maximumFileSizeMB }) => {\r\n const { enableMultiple, i18n } = this.props;\r\n let errorMsg;\r\n\r\n if (enableMultiple) {\r\n errorMsg = i18n.getString('ImageExperience_MultipleUpload_FileSize_TooBig', {\r\n maximumFileSize: maximumFileSizeMB,\r\n });\r\n } else {\r\n errorMsg = i18n.getString('ImageExperience_FileSize_Too_Big_Template', {\r\n fileSize: fileSizeMB,\r\n maximumFileSize: maximumFileSizeMB,\r\n });\r\n }\r\n\r\n return errorMsg;\r\n };\r\n\r\n showExtensionError = () => {\r\n const {\r\n i18n, showErrors, enableMultiple, isMultimediaAd, isAudienceAd,\r\n } = this.props;\r\n\r\n let errorLinkText;\r\n let errorTopic;\r\n\r\n if (isMultimediaAd) {\r\n errorLinkText = i18n.getString(_TL_('About multimedia ads'));\r\n errorTopic = 'app54810';\r\n } else if (isAudienceAd) {\r\n errorLinkText = i18n.getString('ImageExperience_BestPracticeHelp');\r\n errorTopic = 'app54718';\r\n } else {\r\n errorLinkText = i18n.getString(_TL_('About image guidelines and policies'));\r\n errorTopic = 'app54718';\r\n }\r\n\r\n showErrors([\r\n \r\n {i18n.getString(`ImageExperience_${enableMultiple ? 'MultipleUpload_' : ''}Error_MediaFormatNotSupported`)}\r\n \r\n {i18n.getString('ImageExperience_Choose_File_Description')}\r\n
\r\n }\r\n {\r\n !enableDrag ?\r\n \r\n
:\r\n \r\n
\r\n }\r\n \r\n
\r\n );\r\n\r\n const errorInfoBox = () => (\r\n \r\n
\r\n \r\n
\r\n {getFileSize(item.size)}
\r\n \r\n
\r\n );\r\n\r\n const uploadTitle = i18n.getString(_TL_('Uploading {{uploadingNum}} files...'), { uploadingNum: maxUploadNum ? Math.min(maxUploadNum, assetList.length) : assetList.length });\r\n\r\n const previewComponentClasses = useMemo(() => ({\r\n imageContent: classnames(classes.imageContent, customClasses.imageContent),\r\n imageContentText: classnames(customClasses.imageContentText),\r\n }), [customClasses, classes]);\r\n\r\n return (\r\n assetList && assetList.length > 0 ?\r\n {i18n.getString(_TL_('Upload failed. Maximum limit reached.'))}
\r\n \r\n {\r\n showTitle && (\r\n
\r\n : null\r\n );\r\n};\r\nUploadPreviewWithCustomPreview.propTypes = {\r\n assetList: PropTypes.arrayOf(PropTypes.shape({\r\n url: PropTypes.string,\r\n progress: PropTypes.number,\r\n name: PropTypes.string,\r\n size: PropTypes.number,\r\n })).isRequired,\r\n maxUploadNum: PropTypes.number,\r\n PreviewComponent: PropTypes.func.isRequired,\r\n customClasses: PropTypes.shape({}),\r\n showTitle: PropTypes.bool,\r\n};\r\n\r\nUploadPreviewWithCustomPreview.defaultProps = {\r\n customClasses: {},\r\n showTitle: true,\r\n maxUploadNum: undefined,\r\n};\r\n\r\nexport const SimpleImagePreview = ({ className, url, alt }) => (\r\n \r\n {uploadTitle}\r\n
\r\n )\r\n }\r\n \r\n {\r\n assetList.map((item, index) => {\r\n const exceedMaxUploadNum = maxUploadNum && index >= maxUploadNum;\r\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n const { progress, ...rest } = item;\r\n\r\n return (\r\n \r\n
\r\n );\r\n })\r\n }\r\n {item.name}
\r\n {\r\n exceedMaxUploadNum ? errorInfoBox() : normalInfoBox(item)\r\n }\r\n \r\n
);\r\n};\r\n\r\nconst CircleUploadProgress = (props) => {\r\n const styles = useDefaultStyles(getCircleProgressStyle);\r\n return (\r\n {uploadProcessText}
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const UploadProgress = (props) => {\r\n switch (props.type) {\r\n case 'bar':\r\n return \r\n \r\n {this.props.protocols.map(option => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst UrlEditorValidationAdapter = AdapterFactory({\r\n valueToInject: 'url',\r\n});\r\n\r\nexport const UrlEditorWithValidation = withError(withValidation(\r\n UrlEditor,\r\n UrlEditorValidationAdapter\r\n));\r\n","import _ from 'underscore';\r\nimport React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { UrlEditorWithValidation } from './url-editor';\r\n\r\nexport function UrlEditorForArray(props) {\r\n const [url, setUrl] = useState(_.first(props.value[props.field]));\r\n const urlSchema = {\r\n properties: {\r\n url: {\r\n ...props.schema.properties[props.field],\r\n type: 'string',\r\n },\r\n },\r\n };\r\n\r\n const onUrlChange = (newUrl) => {\r\n setUrl(newUrl);\r\n const urls = newUrl ? [newUrl] : [];\r\n props.onChange({\r\n [props.field]: urls,\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nUrlPathFluent.propTypes = {\r\n config: PropTypes.shape({\r\n }).isRequired,\r\n value: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n url: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onChange: PropTypes.func,\r\n};\r\n\r\nUrlPathFluent.defaultProps = {\r\n onChange: noop,\r\n};\r\n","import _ from 'underscore';\r\n\r\nexport const URL_COLON_SLASH_SLASH = '://';\r\nexport const DEFAULT_URL_PREFIX = 'https';\r\n\r\nexport function getUrlPrefixAndDestination(finalUrl, defaultUrlPrefix = DEFAULT_URL_PREFIX) {\r\n const index = _.isString(finalUrl) ? finalUrl.indexOf(URL_COLON_SLASH_SLASH) : -1;\r\n if (index >= 0) {\r\n const prefix = finalUrl.substring(0, index).toLowerCase();\r\n const destination = finalUrl.substring(index + URL_COLON_SLASH_SLASH.length).trim();\r\n\r\n return [prefix, destination];\r\n }\r\n\r\n return [defaultUrlPrefix, ''];\r\n}\r\n\r\nexport const getUpdatedFullUrlOnPrefixUpdate =\r\n (urlWithoutPrefix, newPrefix) => {\r\n let slash = '';\r\n if (!newPrefix.includes(URL_COLON_SLASH_SLASH)) {\r\n slash = URL_COLON_SLASH_SLASH;\r\n }\r\n\r\n return `${newPrefix}${slash}${urlWithoutPrefix}`;\r\n };\r\n\r\nexport const getUpdatedFullUrlOnTextUpdate = (urlPrefix, newValue) => {\r\n if (newValue.includes(URL_COLON_SLASH_SLASH)) {\r\n // detect if the user is entering a URL and update the URL prefix\r\n const [prefix, destination] = getUrlPrefixAndDestination(newValue);\r\n\r\n if (prefix === 'http' || prefix === 'https') {\r\n return `${prefix}${URL_COLON_SLASH_SLASH}${destination}`;\r\n }\r\n }\r\n\r\n return `${urlPrefix}${URL_COLON_SLASH_SLASH}${newValue.trim()}`;\r\n};\r\n\r\nexport const isEmptyUrl = (finalUrls) => {\r\n // FinalUrlWithCustomValidation contol always specifies prefix. If destination is empty\r\n // then treat this as empty final URL. This is needed for when final URL is optional and\r\n // we want to avoid specifying prefixed empty URL.\r\n const [, dest] = getUrlPrefixAndDestination(_.first(finalUrls));\r\n return _.isEmpty(dest);\r\n};\r\n","import { noop } from 'underscore';\r\nimport React, { useCallback, useMemo, useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Dropdown, Option, Input, mergeClasses } from '@fluentui/react-components';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport {\r\n getUrlPrefixAndDestination,\r\n getUpdatedFullUrlOnPrefixUpdate,\r\n getUpdatedFullUrlOnTextUpdate,\r\n} from './utils';\r\nimport { validateAdUrl, UrlLengthLimit } from './validation';\r\nimport { useStyles } from './styles';\r\n\r\nconst urlPrefixOptions = [\r\n { key: 'https', text: 'https://', title: 'https://' },\r\n { key: 'http', text: 'http://', title: 'http://' },\r\n];\r\n\r\nexport function UrlInputFluent({\r\n url,\r\n i18n,\r\n onChange,\r\n containerClassName,\r\n additionalValidation,\r\n prepopulateUrl,\r\n dropdownOptionAriaLabel,\r\n propertyKey,\r\n validateOnRender,\r\n additionalProperties,\r\n textFieldAriaLabel,\r\n customUrlProtocol,\r\n enableSpecialCharactersValidation,\r\n hideProtocol,\r\n}) {\r\n const activity = useContext(ActivityContext);\r\n\r\n const [urlPrefix, urlWithoutPrefix] = useMemo(\r\n () => getUrlPrefixAndDestination(url),\r\n [url]\r\n );\r\n\r\n const selectedOptionText = useMemo(() => {\r\n const selectedOption = urlPrefixOptions.filter(option => option.key === urlPrefix)[0] || urlPrefixOptions[0];\r\n return selectedOption.text;\r\n }, [urlPrefix]);\r\n\r\n const validateAndUpdateUrl = useCallback((currentURL) => {\r\n // first check URL validity. If valid then validate domain by need.\r\n let finalUrlValidatorError = validateAdUrl(currentURL, '', i18n, UrlLengthLimit, customUrlProtocol, enableSpecialCharactersValidation);\r\n if (!finalUrlValidatorError && additionalValidation) {\r\n finalUrlValidatorError = additionalValidation(currentURL);\r\n }\r\n\r\n onChange(finalUrlValidatorError ? [finalUrlValidatorError] : [], currentURL);\r\n if (activity) {\r\n activity.signal(`on${propertyKey}Change - ${JSON.stringify(currentURL)} - isValid: ${!finalUrlValidatorError}}`);\r\n }\r\n }, [activity, additionalValidation, customUrlProtocol, i18n, onChange, propertyKey]);\r\n\r\n const onUrlPrefixChanged = useCallback(\r\n (event, newItem) =>\r\n validateAndUpdateUrl(getUpdatedFullUrlOnPrefixUpdate(urlWithoutPrefix, newItem.optionValue)),\r\n [urlWithoutPrefix, validateAndUpdateUrl]\r\n );\r\n\r\n const onCustomUrlProtocolChanged = useCallback(\r\n (event, { value }) =>\r\n validateAndUpdateUrl(getUpdatedFullUrlOnPrefixUpdate(urlWithoutPrefix, value)),\r\n [urlWithoutPrefix, validateAndUpdateUrl]\r\n );\r\n\r\n const onTextChange = useCallback((event, { value }) => {\r\n const newValue = getUpdatedFullUrlOnTextUpdate(urlPrefix, value);\r\n\r\n if (newValue) {\r\n validateAndUpdateUrl(getUpdatedFullUrlOnTextUpdate(urlPrefix, value));\r\n }\r\n }, [validateAndUpdateUrl, urlPrefix]);\r\n\r\n useEffect(() => {\r\n if (!url && prepopulateUrl) {\r\n // Prepopulate final url with prepopulate on load if no value is provided.\r\n validateAndUpdateUrl(getUpdatedFullUrlOnTextUpdate(urlPrefix, prepopulateUrl));\r\n } else if (validateOnRender) {\r\n validateAndUpdateUrl(url);\r\n }\r\n // only validate on render and prepopulate on load\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [url]);\r\n\r\n const styles = useStyles();\r\n\r\n return (\r\n \r\n {isString(urlDomain) && urlDomain.length > 0 ?\r\n urlDomain :\r\n 'www.example.com'\r\n }\r\n
\r\n /
\r\n /
\r\n \r\n {\r\n !hideProtocol && customUrlProtocol &&\r\n \r\n {urlPrefixOptions.map(option => (\r\n \r\n ))}\r\n \r\n )\r\n }\r\n
\r\n );\r\n}\r\n\r\nUrlInputFluent.propTypes = {\r\n containerClassName: PropTypes.string,\r\n url: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onChange: PropTypes.func,\r\n onClick: PropTypes.func,\r\n additionalValidation: PropTypes.func,\r\n prepopulateUrl: PropTypes.string,\r\n dropdownOptionAriaLabel: PropTypes.string,\r\n propertyKey: PropTypes.string,\r\n validateOnRender: PropTypes.bool,\r\n additionalProperties: PropTypes.shape({}),\r\n textFieldAriaLabel: PropTypes.string.isRequired,\r\n customUrlProtocol: PropTypes.bool,\r\n enableSpecialCharactersValidation: PropTypes.bool,\r\n hideProtocol: PropTypes.bool,\r\n};\r\n\r\nUrlInputFluent.defaultProps = {\r\n onChange: noop,\r\n onClick: noop,\r\n containerClassName: '',\r\n additionalValidation: noop,\r\n prepopulateUrl: '',\r\n dropdownOptionAriaLabel: '',\r\n propertyKey: '',\r\n validateOnRender: false,\r\n additionalProperties: {},\r\n customUrlProtocol: false,\r\n enableSpecialCharactersValidation: false,\r\n hideProtocol: false,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { getUrlPrefixAndDestination } from './utils';\r\n\r\nexport const withNoProtocol = (WrappedComponent) => {\r\n const URLInputWithNoProtocol = (props) => {\r\n const { url, onChange, ...rest } = props;\r\n\r\n const urlWithProtocol = url ? `https://${url}` : url;\r\n\r\n const onChangeWithProtocol = (errors, currentURL) => {\r\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n const [urlPrefix, urlWithoutPrefix] = getUrlPrefixAndDestination(currentURL);\r\n return onChange(errors, urlWithoutPrefix);\r\n };\r\n\r\n return \r\n {isString(urlDomain) && urlDomain.length > 0 ?\r\n urlDomain :\r\n 'www.example.com'\r\n }\r\n
\r\n /
\r\n /
\r\n \r\n \r\n
\r\n );\r\n}\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useFooterStyles = makeStyles({\r\n footer: {\r\n marginTop: '12px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n});\r\n\r\n","import classNames from 'classnames';\r\nimport React, { useCallback, useContext } from 'react';\r\nimport { Button } from '@fluentui/react-components';\r\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\n\r\nimport { useFooterStyles } from '../styles/footer-styles';\r\nimport { IScopeContext, FooterProps } from '../utils/types';\r\n\r\nexport function Footer({\r\n showPagination,\r\n paginationConfig,\r\n i18n,\r\n campaignType,\r\n}: FooterProps) {\r\n const styles = useFooterStyles();\r\n const { scope } = useContext(ScopeContext) as IScopeContext;\r\n const {\r\n current, total, onNext, onPrevious,\r\n } = paginationConfig;\r\n\r\n const onClick = useCallback(() => {\r\n let path = '/campaign/vnext/locations/campaign';\r\n // LinkedIn campaigns don't support campaign locations grid so far, so route user to campaign settings page\r\n if (campaignType === 'LinkedIn') {\r\n path = '/campaign/vnext/settings';\r\n }\r\n scope.save(path);\r\n }, [campaignType, scope]);\r\n\r\n return (\r\n \r\n \r\n {showPagination &&\r\n
\r\n );\r\n}\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useNoLocationsStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n },\r\n imageContainer: {\r\n flexGrow: 1,\r\n flexBasis: '0',\r\n maxHeight: '210px',\r\n width: '100%',\r\n overflowY: 'hidden',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n display: 'flex',\r\n backgroundColor: '#FAFAFA',\r\n },\r\n image: {\r\n maxHeight: '148px',\r\n },\r\n title: {\r\n marginTop: '16px',\r\n },\r\n});\r\n\r\n","import classNames from 'classnames';\r\nimport React from 'react';\r\nimport { Image, Subtitle2, Body1 } from '@fluentui/react-components';\r\n\r\nimport { useNoLocationsStyles } from '../styles/no-locations-styles';\r\nimport { i18nProps } from '../utils/types';\r\nimport noDataImage from '../../media/no-data-image.png';\r\n\r\nexport function NoData({ i18n }: { i18n: i18nProps }) {\r\n const styles = useNoLocationsStyles();\r\n return (\r\n \r\n } appearance=\"transparent\" aria-label={i18n.getString('Previous')} />\r\n {i18n.getString(_TL_('{{current}} of {{total}}'), { current, total })}\r\n
\r\n }\r\n \r\n {i18n.getString(_TL_('No data available'))} \r\n {i18n.getString(_TL_('To update the tile, select a different date range. If the tile remains blank, your account might have no data.'))} \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Shimmer, ShimmerElementType } from '@fluentui/react';\r\n\r\nconst rowElement = [{ type: ShimmerElementType.line, height: 43 }];\r\nconst mapElement = [{ type: ShimmerElementType.line, height: 240 }];\r\n\r\nexport function TableShimmer() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport function MapShimmer() {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useTableStyles = makeStyles({\r\n value: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n});\r\n\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport {\r\n Table, TableCell, TableRow, TableBody, Body1 as Text\r\n} from '@fluentui/react-components';\r\n\r\nimport { TableShimmer } from './shimmer';\r\nimport { LOCATIONS_PER_PAGE } from '../utils/const';\r\nimport { getPageLocations } from '../utils/get-page-locations';\r\nimport { TopLocationsTableProps } from '../utils/types';\r\nimport { useTableStyles } from '../styles/table-styles';\r\n\r\nexport function TopLocationsTable({\r\n i18n,\r\n isLoading,\r\n locations,\r\n paginationConfig,\r\n}: TopLocationsTableProps) {\r\n const styles = useTableStyles();\r\n if (isLoading) {\r\n return \r\n
\r\n );\r\n}\r\n","import _ from 'underscore';\r\nimport { useState, useEffect, useMemo } from 'react';\r\n\r\nimport { LOCATIONS_PER_PAGE } from '../utils/const';\r\nimport { LocationData, paginationConfigProps } from '../utils/types';\r\n\r\nexport const usePaginationConfig = (locations: Array(WrappedComponent: ComponentType
): ComponentType\r\n \r\n );\r\n }\r\n\r\n if (headerState?.viewOption === VIEWS.MAP) {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport const TopLocationsCard = withPMaxPreferencesMetric(withBingMapsContext(withHeaderState(TopLocationsCardInternal)));\r\n","import React, { useContext } from 'react';\r\nimport hoistNonReactStatics from 'hoist-non-react-statics';\r\n\r\nimport { getDisplayName } from '@bingads-webui-react/hoc-utils';\r\nimport { BingMapsContextProvider } from '@bingads-webui-react/bing-maps';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\n// TODO: Send this in serverContext\r\nconst BING_MAPS_API_KEY = 'AgRuCtepgsuuCYV9J6S6w1j8ay2JJwnu8f5EPgv4kkoJoIuka8yui-NzKrvlESTQ';\r\n\r\nexport function withBingMapsContext(WrappedComponent) {\r\n const HOC = (props) => {\r\n const serverContext = useContext(ServerContext) as any;\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nTopLocationViewSelector.defaultProps = {\r\n state: undefined,\r\n};\r\n"],"names":["bulkEditStyle","_ref","_ref$palette","palette","overflowY","margin","maxHeight","display","minWidth","width","border","maxWidth","fontWeight","textAlign","marginLeft","marginRight","paddingLeft","_objectSpread","marginBottom","underlineLinkStyle","upgradedUrlOverrideStyle","alignItems","whiteSpace","height","fontFamily","content","cursor","getAutomatedRulesStyles","semanticColors","background","concat","neutralPrimaryAlt","themePrimary","themeDark","neutralSecondary","red","color","fontSize","position","float","top","right","lineHeight","neutralPrimary","padding","marginTop","neutralLight","borderTop","verticalAlign","paddingTop","W","M","appearance","backgroundClip","themeDarkAlt","backgroundColor","borderRadius","bodyBackground","paddingBottom","getBulkEditOverrideStyle","_ref$iconFontFamily","iconFontFamily","fontStyle","borderLeft","borderRight","borderColor","neutralLighter","redDark","adColumnPreviewStyle","paddingRight","wordBreak","neutralTertiary","boxShadow","bottom","paddingInline","getInlineDownloadStyle","sharedStyle","pasteStyle","left","columnChooserStyle","ComponentSettings","getColumnChooserOverrideStyle","filterEditorStyle","getFilterEditorOverrideStyle","getTopGridPanelCommonStyle","TopGridPanelUnStyled","_React$PureComponent","props","_this","_classCallCheck","_callSuper","rootRef","React","_inherits","_createClass","key","value","this","current","tabbableNode","filter","getTabbableNodes","item","$","is","length","focus","preventScroll","addDataFocus","panelContent","_this$props","panelView","customClasses","classes","_jsx","BackboneInstanceWrapper","managed","instance","id","ref","className","classNames","topGridPanelCustomStyles","topGridPanelDefaultStyles","children","defaultProps","TopGridPanel","withDefaultStyles","_","_ref$semanticColors","_ref$spacing","spacing","Object","assign","zIndex","outline","datePickerStyle","style","mergeStyles","CustomComponent","Renderer","renderProps","dynamicProps","_objectWithoutProperties","_excluded","withCustomRendering","Component","CustomRenderingWrapper","_Fragment","ActionButton","label","iconName","iconStyles","ariaLabel","onClick","rest","i18n","useContext","I18nContext","buttonIcon","styles","root","DefaultButton","iconProps","getString","ActionButtonWrapped","headerStyles","borderStyle","borderWidth","headerStackStyles","titleStyles","Header","title","actionButton","actionButtonDynamic","as","_jsxs","Stack","horizontal","horizontalAlign","Text","HeaderWrapped","panelStyles","panelContentStyles","Panel","header","headerDynamic","MessageBar","text","FluentMessageBar","rendererProps","MessageBarWrapped","labelStyles","PropertyLabelWrapped","dataStyles","overflow","PropertyDataWrapped","PropertyRow","propertyLabel","propertyLabelDynamic","propertyData","propertyDataDynamic","disableShrink","PropertyLabel","PropertyData","dividerStyles","componentTypes","FluentText","panel","data","generateComponents","registrationMap","schema","customComponentTypes","separatorStyles","unrenderedComponents","c","isRendered","componentsToRenderSchema","apply","_toConsumableArray","schemaComponents","selectedComponentTypes","schemaComponent","commonSchemaStyles","numberOfComponents","field","params","type","separatorStylesForComponent","componentStyles","componentClassName","getDirectlyDefinedDynamicProperties","componentsSchema","components","build","propertiesSchema","dynamicProperties","directlyDefinedComponentDynamicProperties","schemaBasedComponentDynamicProperties","childComponentsDynamicProperties","componentDynamicProperties","dynamicallyHideComponent","componentStylesWithDynamics","GeneratedUI","selectComponentType","dynamicComponentBuilders","useMemo","componentBuilder","propTypes","PropTypes","isRequired","buildDefaultDataProperty","baselineProperty","withAutoRotate","CarouselLayout","enableAutoRotate","permissions","autoRotate","isPlayPausePreviewImageEnabled","AdPreviewCarouselLayoutWrapper","AdPreviewCarouselLayout","AdPreviewCarouselLayoutWrapperEx","AdPreviewCarouselLayoutEx","withCMUITheme","withTheme","UAPMediaPlacementType","MediaPlacementTypeToPlacementTypeMap","_MediaPlacementTypeTo","_defineProperty","EPT","MMA_WideImage_4x1","MMA_LandscapeImage_191x100","MMA_SquareImage_1x1","MMA_VerticalImage_1x2","Audience_Network_WideImage_191x100","MsanV2_MSAN_River_191x100","Microsoft_Edge_Single_Carousel_178x100","undefined","MsanV2_MSN_Carousel_169x100","PMax_MMAV2_MSN_Single_Carousel_169x100","MSN_InArticle_Ad_150x100","MSN_Small_Headline_133x100","Audience_Network_SquareImage_1x1","MsanV2_Microsoft_Edge_Mobile_1x1","MsanV2_Microsoft_Edge_Carouse_l201x100","PMax_MMAV2_Microsoft_Edge_Single_Carousel_201x100","MsanV2_MSAN_Banner_2x1","MsanV2_MSN_Partner_Stripe_153x100","PMax_MMAV2_MSN_Partner_Stripe_153x100","MsanV2_MSN_Restoday_124x100","PMax_MMAV2_MSN_Restoday_124x100","MsanV2_MSAN_Rectangle_120x100","ImgExt_Audience_Network_WideImage_191x100","ImgExt_Microsoft_Edge_Single_Carousel_178x100","ImgExt_Bing_Desktop_SingleImage_Extension_178x100","ImgExt_Microsoft_Edge_Medium_Headline_172x100","ImgExt_MSN_Single_Carousel_169x100","ImgExt_MSN_Medium_Headline_155x100","ImgExt_MSN_InArticle_Ad_150x100","ImgExt_MSN_Small_Headline_133x100","ImgExt_Bing_Desktop_MultiImage_Extension_133x100","ImgExt_Bing_Mobile_MultiImage_Extension_133x100","ImgExt_Audience_Network_SquareImage_1x1","ImgExt_MSN_Double_Carousel_93x100","PMax_Audience_Network_WideImage_191x100","PMax_MMA_LandscapeImage_191x100","PMax_Audience_Network_SquareImage_1x1","PMax_MSN_InArticle_Ad_150x100","PMax_MSN_Small_Headline_133x100","PMax_Microsoft_Edge_Single_Carousel_178x100","PMax_MMA_VerticalImage_1x2","PMax_MMA_WideImage_4x1","PlacementType2MediaPlacementTypeMap","_PlacementType2MediaP","transformCroppingParam","param","MediaPlacementType","CropSetting","placementTypes","placementType","cropping","transformImage","image","_ref2","url","originalUrl","originalWidth","originalHeight","cropSettingOnOriginal","placementSettings","roiInfo","expandedMeta","imageCropping","placementsCropping","transformImageParam","useAdPreviewModel","placementConfig","onError","transformedConfig","_ref3","placementSets","_useAdPreviewModelCor","useAdPreviewModelCore","setPlacementConfigCore","setPlacementConfig","changedCropSettingsCore","changedCropSettings","useCallback","config","newConfig","_ref4","_ref5","placements","hasCroppingChanged","map","_ref6","placementMeta","placementCropping","compact","reduce","acc","cropSettings","getSmartCropSettingsFactory","mediaRepository","smartCropActivity","imageMeta","placementMetaList","getCentralCroppedPlacements","ratioAndMinSizeList","aspectRatio","minSize","generateSmartCrop","imageUrl","then","assets","asset","AspectRatio","aspectRatioStr","smartCropping","SourceWidth","Width","SourceHeight","Height","SourceX","X","SourceY","Y","isValidSmartCropping","validateSmartCropSettings","originalImage","Src","minHeight","catch","smartPlacementAndCroppingList","placementsWithoutSmartCropping","croppingList","centralCroppingList","idx","PlacementType2AssociationTypeMap","_PlacementType2Associ","EPlacementType","Boost_Hero_Image_Carousel_200x100","Boost_Hero_Image_Carousel_122x100","Boost_Hero_Image_Carousel_159x100","Boost_Hero_Image_Carousel_180x100","Boost_Hero_Image_Carousel_233x100","Boost_Hero_Image_Carousel_320x100","Boost_Hero_Image_Carousel_57x100","Boost_Windows_Spotlight_191x100","Boost_Discover_Card_1x1","Boost_Prong1_Prong2_Feed_191x100","Boost_Coachmark_175x100","ImgExt_MMAV2_MSN_River_191x100","ImgExt_MMAV2_MSN_Single_Carousel_169x100","ImgExt_MMAV2_MSN_Microsoft_Edge_Mobile_1x1","Responsive_MMA_WideImage_4x1","Responsive_MMA_LandscapeImage_191x100","Responsive_MMA_SquareImage_1x1","Responsive_MMA_VerticalImage_1x2","Responsive_Audience_Network_WideImage_191x100","Responsive_Audience_Network_SquareImage_1x1","Responsive_Microsoft_Edge_Single_Carousel_178x100","Responsive_MSN_InArticle_Ad_150x100","Responsive_MSN_Small_Headline_133x100","Responsive_Boost_Windows_Spotlight_191x100","Responsive_Boost_Discover_Card_1x1","Responsive_Boost_Prong1_Prong2_Feed_191x100","Responsive_Boost_Coachmark_175x100","Responsive_MsanV2_Microsoft_Edge_Carouse_l201x100","Responsive_MsanV2_Microsoft_Edge_Mobile_1x1","Responsive_MsanV2_MSAN_Banner_2x1","Responsive_MsanV2_MSAN_River_191x100","Responsive_MsanV2_MSAN_Rectangle_120x100","Responsive_MsanV2_MSN_Carousel_169x100","Responsive_MsanV2_MSN_Partner_Stripe_153x100","Responsive_MsanV2_MSN_Restoday_124x100","LinkedIn_Single_Image_Desktop_Landscape","LinkedIn_Single_Image_Mobile_Landscape","LinkedIn_Single_Image_Medium_Rectangle_Landscape","LinkedIn_Single_Image_Mobile_Interstitial_Landscape","LinkedIn_Single_Image_Native_Landscape","LinkedIn_Single_Image_Desktop_Square","LinkedIn_Single_Image_Mobile_Square","LinkedIn_Single_Image_Medium_Rectangle_Square","LinkedIn_Single_Image_Mobile_Interstitial_Square","LinkedIn_Single_Image_Native_Square","LinkedIn_Single_Image_Mobile_Vertical","LinkedIn_Single_Image_Medium_Rectangle_Vertical","LinkedIn_Single_Image_Mobile_Interstitial_Vertical","LinkedIn_Single_Image_Native_Vertical","PMax_MMAV2_MSN_River_191x100","PMax_MMAV2_Microsoft_Edge_Mobile_1x1","Responsive_PMax_MMA_WideImage_4x1","Responsive_PMax_MMA_LandscapeImage_191x100","Responsive_PMax_MMA_VerticalImage_1x2","Responsive_PMax_Audience_Network_WideImage_191x100","Responsive_PMax_Audience_Network_SquareImage_1x1","Responsive_PMax_Microsoft_Edge_Single_Carousel_178x100","Responsive_PMax_MSN_InArticle_Ad_150x100","Responsive_PMax_MSN_Small_Headline_133x100","Unified_App_Ads_Video_Horizontal","Unified_App_Ads_Bing_Search","Unified_App_Ads_Causal_Games_Dimensions","Unified_App_Ads_MSN_Display","Responsive_PMax_MMAV2_Microsoft_Edge_Single_Carousel_201x100","Responsive_PMax_MMAV2_MSN_Single_Carousel_169x100","Responsive_PMax_MMAV2_MSN_Restoday_124x100","Responsive_PMax_MMAV2_MSN_Partner_Stripe_153x100","Responsive_PMax_MMAV2_MSN_River_191x100","Responsive_PMax_MMAV2_Microsoft_Edge_Mobile_1x1","convertEffectSettings","effectSettings","effectKey","effectOptions","effectSrc","backgroundBlur","designerEffect","effectType","effectValue","transformImageExperienceImageList","placementSetsConfig","imageExperienceImageList","isImageFittingEnabled","isAdPreviewRefreshEnabled","imageList","imgExpPlacementList","isLogo","changed","newImageList","placementList","placementListMap","srcList","forEach","src","push","splitPlacementListBySrc","PlacementMetaList","UAPLPlacementMetaListV2","UAPLPlacementMetaList","imageSmartEffect","hasImageCroppingChanged","placementSetName","name","curAssociationType","placement","_ref7","associationType","toLowerCase","placementSmartEffect","isPlacementIncluded","hasImageExperienceData","baseImage","BaseImage","IdString","Id","OriginalUrl","OriginalWidth","OriginalHeight","CropSettings","EffectSettings","isMaunalCropped","_getExpandedImagePlac","hasSmartEffect","imageExpansionType","originalImageCropSettings","CroppingType","getExpandedImageInfo","expandedImageUrl","getExpandedImageUrl","expandedImageWidth","expandedImageHeight","expandedImageCropSettings","extraCheck","UAPCroppingType","ManualCrop","getExpandedImagePlacementInfo","applyImageFitting","ignoreImageFitting","isIncluded","previewImage","useImageExperienceAdPreviewModel","placeholderImage","resetReducerStates","multiImagePlacementSets","PermissionsContext","isPlaceHolderImage","placeHolderUrl","imageExperiencePlacementSets","ret","_ref9","images","newImages","_ref11","onUpdateImageExperienceImageList","activeImageIndices","hasDataChanged","previewImageListState","activeImageIndexList","img","index","AdPreviewGridLayout","GridLayoutCore","AdPreviewSinglePlacementLayout","SinglePlacementLayoutCore","UnstyledAdPreviewCarouselLayout","UnstyledCarouselLayoutCore","AdPreviewPlacementContainerBase","MmaWideImage4x1","MmaLandscapeImage191x100","MmaSquareImage1x1","MmaVerticalImage1x2","AdPreviewPlacementContainerBaseCore","AdPreviewStructuredSnippetExtension","MmaInMsanWideImage191x100","MmaInMsanSquareImage1x1","MmaInMsanMSEdgeSingleCarousel178x100","MmaInMsanMSNInArticle150x100","MmaInMsanMSNSmallHeadline133x100","MmaInMsanV2MicrosoftEdgeCarousel201x100","MmaInMsanV2MicrosoftEdgeMobile1x1","MmaInMsanV2MSANBanner2x1","MmaInMsanV2MSANRiver191x100","MmaInMsanV2MSANRectangle191x100","MmaInMsanV2MSNCarousel169x100","MmaInMsanV2MSNPartnerStripe153x100","MmaInMsanV2MSNRestoday124x100","BoostHeroImageCarousel","BoostWindowsSpotlight191x100","BoostDiscoverCard1x1","BoostStartMenu","BoostActionCenter","BoostBanner","BoostProngFeed191x100","BoostCoachmark175x100","ImgExtWideImage191x100","MSEdgeSingleCarousel178x100","BingDesktopSingleImage178x100","MSEdgeMediumHeadline172x100","MSNSingleCarousel169x100","MSNMediumHeadline155x100","MSNInArticle150x100","MSNSmallHeadline133x100","BingDesktopMultiImage133x100","BingMobileMultiImage133x100","SquareImage1x1","MSNDoubleCarousel93x100","DynamicSearch","ResponsiveSearch","ResponsiveSearchDesktop","ResponsiveSearchMobile","ResponsiveMmaLandscapeImage191x100","ResponsiveMmaSquareImage1x1","ResponsiveMmaVerticalImage1x2","ResponsiveMmaWideImage4x1","ResponsiveMmaInMsanMSEdgeSingleCarousel178x100","ResponsiveMmaInMsanMSNInArticle150x100","ResponsiveMmaInMsanMSNSmallHeadline133x100","ResponsiveMmaInMsanSquareImage1x1","ResponsiveMmaInMsanWideImage191x100","ResponsiveBingSearchText","ResponsiveOutlookMobile","ResponsiveOutlookWeb","LinkedInSingleImageDesktop","LinkedInSingleImageMobile","LinkedInSingleImageMediumRectangle","LinkedInSingleImageMobileInterstitial","LinkedInSingleImageNative","UnifiedAppAdsVideoHorizontalPlacement","UnifiedAppAdsM365OutlookPlacement","UnifiedAppAdsCasualGamesDimensionsPlacement","UnifiedAppAdsMSNDisplayPlacement","UnifiedAppAdsBingSearchPlacement","StructuredSnippetExtension","AdPreviewCalloutExtension","CalloutExtension","AdPreviewPriceExtension","PriceExtension","AdPreviewPromotionExtension","PromotionExtension","AdPreviewSitelinkExtension","SitelinkExtension","AdPreviewAdExtensionComponents","UAPAdExtensionType","SiteLink","Callout","Promotion","StructuredSnippet","Price","emptyTheme","core","withUAPLThemedStyles","WrappedComponent","getStyles","options","prefixClassName","useRawStyles","componentName","HOC","theme","themedStyles","createUseStyles","useStyles","displayName","hoistNonReactStatics","withThemedStyles","defaultAdsLabelStyles","getMmaInMsanV2MicrosoftEdgeCarousel201x100Styles","baseStyles","placementCard","placementImageContainer","placementTextContainer","placementAdsLabel","placementGradient","placementShortHeadline","placementLongHeadline","placementFinalUrl","placementDescription","placementCallToAction","placementBusinessNameWithAdsLabel","textDecoration","backgroundImage","opacity","getMmaInMsanV2MSANBanner2x1Styles","flexDirection","getMmaInMsanV2MSANRiver191x100Styles","widht","getMmaInMsanV2MSNCarousel169x100Styles","getMmaInMsanV2MSNPartnerStripe153x100Styles","getMmaInMsanV2MSNRestoday124x100Styles","getMmaInMsanV2MicrosoftEdgeMobile1x1Styles","getBingSearchTextPlacementStyles","_getBingSearchPlaceme","boxSizing","placementDescriptionContainer","flexGrow","placementLogoContainer","getBingSearchTextDesktopPlacementStyles","_getBingSearchPlaceme2","_excluded2","bingSearchDesktopPlacementRoot","getBingSearchTextMobilePlacementStyles","_getBingSearchPlaceme3","_excluded3","bingSearchMobilePlacementRoot","borderBottom","getOutlookMobilePlacementStyles","_getOutlookPlacementB","getOutlookWebPlacementStyles","_getOutlookPlacementB2","outlookWebCardRoot","transform","getLinkedInSingleImageDesktopStyles","placementCardHeader","placementCardPreview","placementCardFooter","placementLogo","placementCompanyName","placementPromoteText","placementIntroductoryText","placementHeadline","gap","letterSpacing","justifyContent","WebkitBoxOrient","WebkitLineClamp","textDecorationLine","getLinkedInSingleImageMediumRectangleStyles","placementCompanyMeta","placementHeader","getBoostWindowsSpotlight191x100Styles","placementCenterSection","placementSearchIconCenter","placementHotspotsCenterSection","placementTopRightSection","placementCameraIcon","placementTopLeftSection","placementSearchIconTopLeft","placementHotspotsLeftSection","placementWifiIcon","placementBatteryIcon","getDisclaimerStyles","styleOverrides","e","_ref2$palette","additionalLineDisclaimer","extend","popupDisclaimer","disclaimerCallout","getResponsiveSearchAdPlacementBaseStyles","placementContentContainer","placementInlineItems","getResponsiveSearchAdMobilePlacementStyles","_getResponsiveSearchA3","placementImage","getMmaInMsanV2RefreshedMSANRiver191x100Styles","placementInfoContainer","placementBusinessNameContainer","businuessAndLogoContainer","placementCallToActionAsLink","businuessAndAdChoiceContainer","adsLabelClassName","headChoiceIconClassName","adsLabelContainerClassName","textOverflow","getMmaInMsanV2RefreshedMSNRestoday124x100Styles","getMmaInMsanV2RefreshedMSNCarousel169x100Styles","getMmaInMsanV2RefreshedMicrosoftEdgeCarousel201x100Styles","borderImageSource","getMmaInMsanV2RefreshedMSNPartnerStripe153x100Styles","getMmaInMsanV2RefreshedMSANBanner2x1Styles","getMmaInMsanV2RefreshedMicrosoftEdgeMobile1x1Styles","getOutlookMobileRefreshedPlacementStyles","overflowX","unreadClassName","threeDot","descriptionWithAction","flexWrap","flexShrink","getOutlookWebRefreshedPlacementStyles","MMAPlacementCardImpl","isEnabled","mmaPlacementCardClassName","classnames","mmaRefreshedPlacementCardRoot","mmaPlacementCardRoot","mmaPlacementCardDisabled","target","rel","href","MMAPlacementCard","PlacementContentContainer","finalUrl","displayUrl","isClickDisabled","placementContentContainerClassName","AdLabelImpl","adLabelRefreshedRoot","adLabelRoot","AdLabel","BusinessNameWithAdsLabelImpl","businessName","showAdsLabel","showAdsIcon","rootClassName","businuessNameRefreshed","businessNameWithAdsLabelRoot","_TL_","alt","BusinessNameWithAdsLabel","GradientImpl","gradientClassName","placementCardGradientRoot","PlacementGradient","withLink","HoC","PlacementText","isMultiLine","placementTextClassName","MultiLineEllipsisText","PlacementHeadline","headlineText","placementHeadlineClassName","PlacementHeadlineWithLink","PlacementFinalUrl","placementFinalUrlClassName","PlacementFinalUrlWithLink","PlacementDescription","description","placementDescriptionClassName","PlacementAction","actionText","placementActionClassName","PlacementImage","enableCrop","previewImageAspectRatio","previewImageHeight","placementImageClassName","CroppedImageView","resizeImageHeight","Image","shouldFadeIn","AdditionalLineDisclaimer","disclaimer","useDefaultStyles","isEmpty","DisclaimerLayout","Link","first","FinalUrls","PopupDisclaimer","_useState","useState","_useState2","_slicedToArray","showCallout","setShowCallout","useRef","Title","ariaLabelledBy","getId","ariaDescribedBy","directionalHint","DirectionalHint","bottomLeftEdge","gapSpace","isBeakVisible","setInitialFocus","onDismiss","PopupText","disabled","BusinessNameWithLogo","showLogo","logo","logoHeight","ChoiceIcon","viewBox","fill","xmlns","d","fillOpacity","ChoiceIconBright","BusinessNameWithChoiceIcon","showBusinessName","showAdIcon","showChoiceIcon","showCallToAction","callToAction","showCallToActionAsLink","showBrightStyleChoiceIcon","showChoiceIconAhead","replace","customizedClassName","largeIconRoot","arrowIcon","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ThreeDot","threeDotClassName","OutlookPcDesktopUnread","customizedUnreadClassName","OutlookMobileWebUnread","DescriptionWithAction","descriptionWithActionClassName","placementCallToActionClassName","placementCallToActionAsLinkClassName","AdPlacementMmaBase","finalUrlOrigin","placementData","showShortHeadline","shortHeadline","isMultiLineShortHeadline","showLongHeadline","longHeadline","isMultiLineLongHeadline","showFinalUrl","isMultiLineFinalUrl","displayFinalUrlOrigin","showDescription","isMultiLineDescription","showAdLabel","showGradient","showBusinessNameAdLabel","showDots","effectiveImageUrl","effectiveImageWidth","effectiveImageHeight","expandedPlacementCropping","previewHeight","imageBorderRadius","imagePreviewWidth","isValidUrl","URL","origin","placementDotsIcon","dotsIcon","AdPlacementMmaWideImage4x1","AdPlacementMmaLandscapeImage191x100","wordWrap","AdPlacementMmaSquareImage1x1","AdPlacementMmaVerticalImage1x2","AdPlacementMmaInMsanWideImage191x100","AdPlacementMmaInMsanMSEdgeSingleCarousel178x100","AdPlacementMmaInMsanMSNInArticle150x100","AdPlacementMmaInMsanMSNSmallHeadline133x100","AdPlacementMmaInMsanSquareImage1x1","AdPlacementMmaBaseV2","showSmallSizeHeadline","showBusinessNameWithLogoTop","showAdChoiceIconArea","showBusinessNameInAdChoiceArea","CustomizedComponent","customizedComponent","smallSizeHeadline","customizedArea","AdPlacementMmaInMsanV2MicrosoftEdgeCarousel201x100","withPermissions","props1","StyledBaseComp","AdPlacementMmaInMsanV2MSANBanner2x1","AdPlacementMmaInMsanV2MSANRiver191x100","props2","AdPlacementMmaInMsanV2MSNCarousel169x100","AdPlacementMmaInMsanV2MSNPartnerStripe153x100","AdPlacementMmaInMsanV2MSNRestoday124x100","AdPlacementMmaInMsanV2MSANRectangle191x100","AdPlacementMmaInMsanV2MicrosoftEdgeMobile1x1","AdPlacementImgExtWideImage191x100","AdPlacementImgExtMSEdgeSingleCarousel178x100","AdPlacementImgExtBingDesktopSingleImage178x100","AdPlacementImgExtMSEdgeMediumHeadline172x100","AdPlacementImgExtMSNSingleCarousel169x100","AdPlacementImgExtMSNMediumHeadline155x100","AdPlacementImgExtMSNInArticle150x100","AdPlacementImgExtMSNSmallHeadline133x100","AdPlacementImgExtSquareImage1x1","AdPlacementImgExtMSNDoubleCarousel93x100","AdPlacementImgExtBingDesktopMultiImage133x100","_ref2$images","imagesWithPadding","AdPlacementImgExtBingMobileMultiImage133x100","direction","carouselState","setCarouselState","handleSelect","selectedIndex","Carousel","activeIndex","onSelect","controls","wrap","Item","textShadow","bingDesktopHeaderImage","BingSearchPlacementBase","adExtensionContainerClassName","adExtensionContainer","AdPlacementBingSearchText","AdPlacementBingSearchTextDesktop","AdPlacementBingSearchTextMobile","OutlookPlacementBase","OutlookRefreshedPlacementBase","showThreeDot","showDescriptionWithAction","CustomizedUnreadComponent","customizedUnreadComponent","AdPlacementOutlookMobile","StyledComp","AdPlacementOutlookWeb","AdPlacementLinkedInSingleImageBase","companyPageName","userProfileImageSrc","introductoryText","headline","showHeader","showIntroductoryText","showfinalUrl","showFooter","showCompanyInFooter","showIntroductoryTextInFooter","renderCallToAction","Button","FluentProvider","webLightTheme","Card","CardHeader","CardPreview","CardFooter","AdPlacementLinkedInSingleImageDesktop","AdPlacementLinkedInSingleImageMobile","AdPlacementLinkedInSingleImageMediumRectangle","AdPlacementLinkedInSingleImageMobileInterstitial","alignSelf","AdPlacementLinkedInSingleImageNative","showfinalUrlInFooter","AppAdsBasePlacement","placementPreview","phoneInnerContent","getAppAdsBasePlacementStyles","borderTopRightRadius","borderTopLeftRadius","videoPlayerRoot","getAppAdsMobileStyles","_getResponsiveSearchA","_getAppAdsBasePlaceme","appAdsPlacementCard","appAdsStyles","flex","AppAdsMSNDisplayPlacement","msnPlacementImage","msnPlacementTextContainer","msnDescription","msnBusinessName","msnBusinessNameWithAdsLabel","_getAppAdsBasePlaceme3","_excluded4","customClassName","ResponsiveAdPlacementOutlookMobile","ResponsiveAdPlacementOutlookWeb","AppAdsM365OutlookPlacement","preview","_getAppAdsBasePlaceme2","previewContent","AdPlacementResponsiveSearchPropTypes","decoratorsData","imageExtension","showAdDisclaimer","showImageExtension","previewTexts","ResponsiveSearchAdPlacementBase","_props$previewTexts","AppAdsBingSearchPlacementBase","AppAdsBingSearchPlacement","AppAdsBingSearchPlacementText","AppAdsCasualGamesDimensionsPlacement","casualGamesBase","casualGamesHeadline","_getAppAdsBasePlaceme4","_excluded5","AppAdsVideoHorizontalPlacementInner","videos","videoRef","useEffect","load","disablepictureinpicture","controlsList","kind","srcLang","default","AppAdsVideoHorizontalPlacement","ResponsiveMMAPlacementCard","ResponsiveAdPlacementMmaBase","imagePreviewHeight","finalImagePreviewHeight","ResponsiveAdPlacementMmaWideImage4x1","ResponsiveAdPlacementMmaLandscapeImage191x100","ResponsiveAdPlacementMmaSquareImage1x1","ResponsiveAdPlacementMmaVerticalImage1x2","ResponsiveAdPlacementMmaInMsanWideImage191x100","ResponsiveAdPlacementMmaInMsanMSEdgeSingleCarousel178x100","ResponsiveAdPlacementMmaInMsanMSNInArticle150x100","ResponsiveAdPlacementMmaInMsanMSNSmallHeadline133x100","ResponsiveAdPlacementMmaInMsanSquareImage1x1","ResponsiveAdPlacementBingSearchText","WindowsSpotlight191x100","hotspots","searchIcon","desc","uri","cameraIcon","wifiIcon","batteryIcon","AdPlacementBoostWindowsSpotlight191x100","AdPlacementBoostHeroImageCarousel","AdPlacementBoostProngFeed191x100","AdPlacementBoostCoachmark175x100","BoostTextAdPlacementBase","showSuggested","showDismissAction","placementSuggestedContainer","placementVectorIcon","vectorIcon","placementSuggestedText","placementDetailsContainer","placementActionContainer","placementDismissAction","AdPlacementBoostStartMenu","AdPlacementBoostActionCenter","AdPlacementBoostBanner","AdPlacementBoostDiscoverCard1x1","AdPlacementResponsiveSearch","AdPlacementResponsiveSearchDesktop","_getResponsiveSearchA2","AdPlacementResponsiveSearchMobile","AdPlacementDynamicSearchPropTypes","placementDisplayUrl","DynamicSearchAdPlacementBase","placementTextCardContainer","placementUrl","placementDisclaimer","AdPlacementDynamicSearch","VideoPlacementInner","videoPlayerRootClass","videoPlayerVertical","VideoPlacement","ContainerBase","titleText","isValid","onRenderHeader","onRenderPlacement","onRenderFooter","previewContainerClassName","containerHeaderClassName","containerTitleClassName","containerFooterClassName","placementContainerClassName","adPreviewContainer","adPreviewContainerError","adPreviewContainerHeader","adPreviewContainerTitle","adPreviewPlacementContainer","adPreviewContainerFooter","arguments","orange","UAPImageType","Image1x1","Image4x1","Image1x2","Image191x100","Image178x100","Image172x100","Image169x100","Image155x100","Image150x100","Image133x100","Image93x100","Image201x100","Image200x100","Image153x100","Image124x100","Image120x100","Image122x100","Image159x100","Image180x100","Image233x100","Image320x100","Image57x100","UAPVideoType","UAPPlacementType","PMax_Video","Boost_Start_Menu","Boost_Action_Center","Boost_Banner","Outlook_Text_Mobile","Outlook_Text_Web","Bing_Search_Mobile","Bing_Search_Desktop","Bing_Search_Text","Responsive_Outlook_Text_Mobile","Responsive_Outlook_Text_Web","Responsive_Bing_Search_Text","Responsive_Boost_Start_Menu","Responsive_Boost_Action_Center","Responsive_Boost_Banner","Responsive_Search","Responsive_Search_Desktop","Responsive_Search_Mobile","Dynamic_Search","Unified_App_Ads_Bing_Search_Text","Unified_App_Ads_M365_Outlook","_UAPLPlacementMetaLis","PT","imageType","hasMultiImages","Image4x5","getPlacementListMetaDataByImageType","imageTypes","types","values","imgType","flatten","uniq","mergePlacementSets","prevPlacementSets","curPlacementSets","newPlacementSets","_loop2","curPlacementSet","i","prevPlacementSet","_mergePlacementList","prevPlacementList","curPlacementList","newPlacementList","_loop","curPlacement","prevPlacement","mergePlacementList","_mergePlacementList2","isListChanged","mergeReducerStates","prevState","curState","prevPreviewState","prevHasDatachanged","prevActiveImageIndices","curPreviewState","curHasDatachanged","curActiveImageIndices","_mergePreviewImageAnd","prevImageAndPlacementSets","curImageAndPlacementSets","prevImageAndPlacementSetsCopy","newImageAndPlacementSets","_loop3","curImageAndPlacementSet","prevImageAndPlacementSet","prevPreviewImage","curPreviewImage","isPreviewImageChanged","_mergePlacementSets","_mergePlacementSets2","isPlacementSetsChanged","splice","mergePreviewImageAndPlacementSets","_mergePreviewImageAnd2","isPreviewStateChanged","newPreviewState","isActiveImageIndicesChanged","AdPreviewModelActions","ADPREVIEW_INIT_STATE","adPreviewReducer","state","action","actionType","actionData","newState","forceToReset","_mergeReducerStates","_mergeReducerStates2","mergedState","imageIndex","imageAndPlacementSets","placementSet","updatePlacementCorpSettings","updatePlacementCorpSettingsByImageType","newPreviewImages","newIndices","sortBy","getCenterCroppedSettings","originalBoxToCrop","originalRatio","Math","abs","scaledSourceWidth","round","centerX","scaledSourceHeight","middleY","_ref$useOriginalImage","useOriginalImageSize","maxCropBox","aspectRatios","ratio","pickSingleImageFromImageList","selectedImage","getImageInfo","pLoadedImage","Promise","resolve","reject","onload","naturalWidth","naturalHeight","onerror","Error","p$ret","loadedImage","manualPlacementCroppings","err","getPlacementSet","placementSetParam","_placementSetParam$ge","getDefaultPlacementsCropping","getPlacementListMetaData","defaultCroppingList","manualCropping","getImageAndPlacementSetList","placementSetsParam","concurrency","curPlacementConfigRef","_useAdPreviewReducer","initState","_useReducer","useReducer","_useReducer2","adPreviewModel","dispatch","_ref10","updateImageCropping","updatePlacementCropping","_ref11$imageIndex","updatePlacementCroppingByImageType","_ref12","_ref12$imageIndex","setActiveImageIndices","_len","indices","Array","_key","useAdPreviewReducer","updateImageCroppingState","updatePlacementCroppingState","updatePlacementCroppingByImageTypeState","newImageCropping","imgAndPlacementSets","newPlacementCropping","_ref9$imageIndex","_ref10$imageIndex","prevModelConfigRef","initializeModel","pNewModelConfig","newModelConfig","_newModelConfig","_toArray","firstConfig","otherConfigs","slice","firstImageInfo","firstPreviewImage","imgInfo","otherPreviewImages","getPlacementSetsViewModel","activeImagesOnly","finalPlacementSets","pickedPreviewImageListState","pImage","_ref13","placementSetViewModel","find","_ref14","imageViewModel","fpIndex","multiImagePlacementSetsViewModel","activeMultiImagePlacementSetsViewModel","singleImagePlacementSetsViewModel","_ref15","_ref16","activeSingleImagePlacementSetsViewModel","_ref17","_ref18","firstImage","allImages","_ref20","activeImages","_ref21","_ref22","resetReducerStatesWrapper","singleImagePlacementSets","UAPPlacementTypeAlias","MMA","WideImage","LandscapeImage","SquareImage","VerticalImage","MSAN","MSEdgeSingleCarousel","MSNInArticle","MSNSmallHeadline","MSANV2","MSEdgeCarousel","MSEdgeMobile","MSANBanner","MSANRiver","MSANRectangle","MSNCarousel","MSNPartnerStripe","MSNRestoday","PMax","AudienceSquareImage","AudienceWideImage","MMALandscapeImage","MMAVerticalImage","MMAWideImage","MMAV2MSEdgeCarousel","MMAV2MSNSingleCarousel","MMAV2MSNRestoday","MMAV2MSNPartnerStripe","MMAV2MSNRiver","Video","PMaxV2","Boost","HeroImageCarousel200x100","HeroImageCarousel122x100","HeroImageCarousel159x100","HeroImageCarousel180x100","HeroImageCarousel233x100","HeroImageCarousel320x100","HeroImageCarousel57x100","WindowsSpotlight","DiscoverCard","StartMenu","ActionCenter","Banner","Prong1Prong2Feed","Coachmark","ImageExt","MSEdgeMediumHeadline","MSNSingleCarousel","MSNMediumHeadline","MSNDoubleCarousel","BingDesktopSingleImage","BingDesktopMultiImage","BingMobileMultiImage","Outlook","Mobile","Web","BingSearch","Desktop","Responsive","Dynamic","LinkedIn","Landscape","SingleImageDesktop","SingleImageMobile","Square","Vertical","UnifiedAppAds","VideoHorizontal","M365Outlook","MSNDisplay","CasualGamesDimensions","BingSearchText","All","AllV2","_ref$extraCheck","UAPImageExpansionType","None","Outpainting","SmartCrop","SingleColorPadding","getCropSettingsFromRoi","_ref2$useOriginalImag","expandedInfo","setROIInfo","_expandedInfo","expandedImageCropSettingsOriginal","expandedImageCropSettingsMap","cropSetting","originalImageCropSettingsMap","CenterCrop","expandedCropSetting","expandedImageInfo","PlacementType2Component","_PlacementType2Compon","_excluded7","_excluded6","getAdPlacementComponent","onRenderEmptyView","gridLayoutContainerClassName","emptyView","placementComponentList","AdPlacementComponent","newPlacement","adPreviewGridLayoutContainer","layoutContainerClassName","_ref$hasContainer","hasContainer","placementComponent","_ref3$hasMultiImages","adPreviewLayoutContainer","bsProps","bsClass","CustomCarousel","carouselRef","indicators","InjectedControls","carouselWrapperClassName","carouselInstance","setCarouselInstance","_useMemo","renderControls","_useMemo2","leftArrowControl","rightArrowControl","BsCarousel","renderIndicators","Caption","setActiveIndex","customCarouselRootClassName","customCarouselLayoutStyles","customPlayPauseButtonsStyles","startAutoRotating","onActiveIndexChange","disableDefaultStyles","useCustomCarousel","customCarouselWrapperClassName","setIndex","curActiveIndex","curSetIndex","_useState3","_useState4","setDirection","_useState5","_useState6","auto","setAuto","_useState7","_useState8","startAutoRotateListner","setStartAutoRotateListner","autoRotateListener","onRenderCarouselHeader","clearAutoRotateListener","clearTimeout","currentIndex","previewCount","nextIndex","setTimeout","start","stop","CarouselComponent","moreCarouselProps","customCarouselWrapper","carouselLayoutContainer","PlayPauseButtons","newI18n","isPlaying","play","pause","playPauseButtons","nextLabel","prevLabel","adPreviewCarousel","baseCarouselLayoutStyles","_ref8","resetOn","LayoutComponent","extensionData","structuredSnippetExtensionContainer","Category","Texts","join","calloutExtensionContainer","priceExtensionContainer","Description","Currency","Occasion","PromotionType","PromotionItem","PromotionDetail","DateRange","hasOccasion","hasPromotionDetail","hasDateRange","promotionExtensionContainer","star","onRenderTile","distUrl","DisplayText","Description1","Description2","DestinationUrl","indexOf","tiles","next","sitelinkExtensionContainer","WhitePadding","Unknown","paddingColor","hasQuery","srcWithQuery","queryParams","ROIInfoObj","JSON","parse","ImageExpansionType","ThumbnailWidth","PaddingImageWidth","ThumbnailHeight","PaddingImageHeight","PaddingColor","ImageCropSetting","cs","sourceHeight","sourceWidth","sourceX","sourceY","croppingType","OriginalImageCropSetting","UnifiedAppWizard","storeType","wizardConfig","perfMarker","instrumentation","InstrumentationContext","wizardName","wizardPerfMarker","createChild","setClarityTag","FluentSwitcherContext","Provider","PerformanceMarkerProvider","immediateDone","Scenario","Activity","Wizard","WizardPerfMarker","wizardMarker","LayoutContainer","template","DefaultTemplate","Layout","component","StepContainer","SaveBlocker","CancelWizardDialog","getIndicatorsWidth","getAssetStepStyles","container","imageExperience","formContainer","previewerContainer","adPreview","windowsAdPreview","transformations","indicatorsWidth","useAssetsStepStyles","useResponsiveStyleWrapper","flowToPlatform","FLOWS","IOS","platforms","ANDROID","WINDOWS","unifiedAppAdsSurfaces","VideoGaming","M365","MsnDisplay","MicrosoftCasualGames","adPreviewConfig","AssetGroupNameSection","flow","isValidating","onDataChange","campaign","onRenderAdGroupNameLabel","TextTitle","titleKey","topicKey","ValidatedFixedPanel","icon","GroupInfoImg","attentionBeaconProps","getExtraProps","getPanelErrorProps","AppSetting","CampaignValidationGroup","StoreAppSelector","platform","isMounted","placeholderText","readOnly","AppSettingReadOnly","isCountryRefinementEnabled","ServerValidatedRemainingCharsValidatedTextField","placeholder","validationProps","AssetGroup","onRenderLabel","AssetsSection","imageExperiencePortalContainerState","transparentLogoExperiencePortalContainerState","imageExpereienceProngPortalContainerState","imageExperienceSpotLightPortalContainerState","prongImageExperienceAddNewImageCallback","imageSpotlightExperienceAddNewImageCallback","transparentLogoContainerRef","logosContainerRef","imageExperienceAddNewImageCallback","imagesContainerRef","imageSpotlightContainerRef","imageProngContainerRef","setAddNewDescriptionCallback","setAddNewShortHeadlinesCallback","mergedI18n","assetPanels","setSelectedVideoId","selectedVideoId","isLoading","useWizardService","context","wizardData","Headlines","Descriptions","headlinesCardSummaryDetails","getHeadlinesCardSummaryDetails","descriptionsCardSummaryDetails","getDescriptionsCardSummaryDetails","_useCollapseState","useCollapseState","_useCollapseState2","allSections","allSectionsExpandedSections","setAllSectionsExpandedSections","_useCollapseState3","PANEL_KEYS","START_END_DATES","_useCollapseState4","moreSettings","moreSettingsExpandedSections","setMoreSettingsExpandedSections","allAssetsExpand","collapseExpander","setActiveKeys","fetch","useVideoAdsCopilot","copilotFetchTaskManager","TaskManager","Subtitle1","Collapse","allPanelItems","skipItemsTypeCheck","activeKeys","checkItems","ImagesPanel","setAddNewImageCallback","ImageAssetsImg","Images","IMAGES","BaseImagePanel","iconAltText","imagesData","ImageSPOTLIGHT","containerRef","portalContainerState","addNewImageCallback","maxUploadNum","SPOTLIGHT_IMAGES","ImagePRONG","PRONG_IMAGES","LogosPanel","logos","logoExperiencePortalContainerState","LOGOS","ShortHeadlinesPanel","TextAssetsImg","featureName","isOptional","SHORT_HEADLINES","DescriptionsPanel","DESCRIPTIONS","VideoPanel","isVideoRequired","skipQualityValidation","VIDEOS","AUDIENCE_SIGNAL","AudienceSignalSection","AudienceSignalPanel","expand","size","weight","DateSettingsPanel","UnmappedFormErrors","withControlErrorHandling","OriginalUnmappedFormErrors","AssetsStepFormInternal","onDataChangeProp","error","scope","useIsMounted","serverContext","ServerContext","_useContext","RecommendationContext","recommendationContext","ImageSPOTLIGHTContainerRef","ImagePRONGContainerRef","portraitContainerRef","stylingProps","useResponsiveStyles","cid","aid","setImageExperiencePortalContainerState","ImageSPOTLIGHTExperiencePortalContainerState","setImageSPOTLIGHTExperiencePortalContainerState","ImagePRONGExperiencePortalContainerState","setImagePRONGExperiencePortalContainerState","_useState9","noop","_useState10","setImageExperienceAddNewImageCallback","_useState11","_useState12","setProngImageExperienceAddNewImageCallback","_useState13","_useState14","setImageSpotlightExperienceAddNewImageCallback","_useState15","_useState16","addNewDescriptionCallback","_useState17","_useState18","addNewShortHeadlinesCallback","_useState19","_useState20","setTransparentLogoExperiencePortalContainerState","_useState21","previewImageId","cropImageObj","_useState22","previewTransparentLogoSharedState","setPreviewTransparentLogoSharedState","_useState23","_useState24","previewImageSPOTLIGHTSharedState","setPreviewImageSPOTLIGHTSharedState","_useState25","_useState26","previewImagePRONGSharedState","setPreviewImagePRONGSharedState","_useState27","_useState28","appLogo","setAppLogo","assetGroup","CallToAction","LongHeadlines","_ref5$videos","TransparentLogo","result","onReset","prevData","ImageList","ImageAssets","Headline0","Headline1","Headline2","LongHeadline0","Description0","onUpdateImageList","_ref6$serverErrors","serverErrors","_ref6$systemErrors","systemErrors","legacyGlobalI18n","window","globalLegacyI18n","get","legacyI18n","buildLegacyI18n","ValidationStringMap","legacyI18nOfListingGroup","mergedTempI18n","mergeI18n","saveFailed","useFormService","isSaving","matchStepState","STEP_STATES","SAVING","isCanceling","CANCELING","PerformanceMarkerContext","_useState29","previewLogoId","editingPlacementType","_useState30","previewImagesSharedState","setPreviewImagesSharedState","postAssetEventLog","isArray","finalUrlFromApp","AppId","AppUrl","_useCopilot","useCopilot","addNewLongHeadlinesCallback","currentCTA","finalUrls","FinalUrlForRecommendation","enableCopilotRecommendations","feature","AssetEventFeature","PMAX","assetScenario","AssetScenario","CREATE_WORK_FLOW","copilotBanner","suggestionPoller","imageExperienceComponents","ValidatedImageExperienceWrapper","imagesContaineRef","logosContaineRef","updateFinalUrlCallback","isLogoEnabled","updatePortalContainerState","initialValue","UAPLPMaxIntegration","showCopilotOptionForImage","IsBackgroundSceneEnabled","imageAssetsOptional","transparentLogoComponent","isBoostPortraitEnabled","customMaxImageCount","imageListPropName","isStoreAppTransparentLogo","isCombinedMsanAndMmaAspectRatios","isCopilotRecommendations","validatedImageSPOTLIGHTExperienceWrapper","isStoreAppSpotLight","validatedImagePRONGExperienceWrapper","isDisplayPlus","isStoreAppProng","previewProps","updateImageList","AppTitle","autoHeightCarousel","customSurfaceKeys","PerfMaxResponsiveAdPreviewUAPL","logoPreviewEnabled","windowsAppAdsPreivew","AppAdsPreview","union","hideHeaderButtons","isAppCampaignPreview","showStart","IconUrl","getGenericImageObjectAsync","iconImage","ActuationGroup","actuationProps","isActive","AttentionBeaconGroup","FormErrorGroup","formErrorProps","errors","showAllValidationErrors","StepHeader","SystemErrors","AssetGroupValidationGroup","CopilotRepositoryProvider","campaignId","locale","getLocale","recommendationType","enableLogoAndCTA","AssetsStepForm","withBannerService","withScope","AssetsStepShell","getAssetsPanels","AdAssetsFormShimmer","AdAssetsPreviewerShimmer","platformToAppStore","Windows","Android","iOS","getBiddingScheme","Type","ManualCpc","ManualCpi","getDefaultCampaignData","platformNamePrefix","cnMarketAccount","Name","generateNameSuggestionSuffix","floor","random","Status","Languages","getDefaultLanguagesViewModel","Budget","Amount","getBudgetRange","CurrentAccount","CurrencyCode","Daily","Default","BiddingScheme","CampaignType","CampaignSubType","locationTargets","getDefaultLocationTargetsViewModel","AppStore","AppPlatform","AppStoreId","TrackingUrlTemplate","useAssetsStepRepository","scenarioContext","ScenarioContext","_useWizardService","send","activity","ActivityContext","versionForLog","getLogVersion","logger","getLoggerWithoutPageInfo","_scope$values","ScopeContext","_useAppStoreRepositor","useAppStoreRepository","searchAppById","oDataConfig","videoRepository","createVideoRepository","folderRepository","createFolderRepository","imageRepository","createImageRepository","uploadVideoIfNeeded","videoPromises","video","uploadVideoMetadata","videoMetadata","newVideoFromMTObject","newVideo","_state$context$wizard","savedAssetGroup","savedCampaign","assetGroupId","saveCampaignsPromise","loadCampaignAsViewModel","assetGroupPromise","loadAssetGroupForWindowsStore","loadAssetGroupWithVideos","savedAssetGroupPromise","_ref2$storeFinalUrl","storeFinalUrl","IsOptional","BusinessName","UrlRulesOption","URL_RULES_OPTIONS","getDefaultAssetGroup","CampaignSettings","settings","appInfo","errorData","trace","save","initialData","assetGroupToSave","campaignToSave","initialAssetGroup","Permissions","initialCampaignViewModel","IsDomesticSimplifiedChineseEnabled","saveCampaign","scenario","activityLogger","createActivity","createDefaultCampaign","signal","WIZARD_EVENTS","UPDATE_WIZARD_DATA","cacheManager","invalidate","assetGroupChanges","originalAssetGroup","saveContext","saveAssetGroup","AssetsStepSettingsShell","getAssetsSettingsPanels","getLocationTargetingStyles","useTargetingStepStyles","TargetingStepShell","_ref$data","targetingInfo","bundleCountries","bundleLocationCriterions","_ref3$campaign","_ref3$assetGroup","LOCATIONS","LANGUAGE_TARGET","expandedSections","setExpandedSections","targetingExpand","errorMapper","apiErrorMapper","LocationTargetingSettingPanel","LanguageTargetPanel","PlacementTargetPanel","PANEL_KEYS_V2","PLACEMENT_TARGET","CampaignDetailsForm","campaignInfo","allSectionsKeys","initiallyExpandedSectionsKeys","isBidStrategyCPC","getBidStrategyOptions","MANUAL_CPC","MANUAL_CPA","CampaignNamePanel","CAMPAIGN_NAME","AppDetailsPanel","APP","BidStrategyPanel","bidStrategyComponentOptions","bidStrategyOptions","hideAdditionalDetails","biddingBannerOptions","isCampaignCreation","BID_STRATEGY","BidValuePanel","bidValueType","BID_VALUE","BudgetPanel","BUDGET","AdSchedulePanel","AD_SCHEDULE","UrlOptionsPanel","urlParameterOptions","showFinalUrlSuffix","showCustomParameters","isTrackingUrlTemplateRequired","isWithError","URL_OPTIONS","ALL_SECTIONS_KEYS","INITIALLY_EXPANDED_SECTIONS_KEYS","CampaignDetailsStepShell","CampaignDetailsEditStepShell","useCampaignDetailsStepRepository","_useBudgetModel","useBudgetModel","budgetModelToViewModel","budgetViewModelToModel","isBudgetInputValid","_ref2$isBudgetAndBidd","isBudgetAndBiddingEnabled","loadPromises","loadCampaign","readLocationCriterions","bundleCountriesAndLocationCriterions","loadBundleCountries","dayTimeCriterions","readDayTimeCriterions","campaignData","modelToViewModelForCampaign","campaignModel","status","locationCriterionsModel","dayTimeCriterionsModel","commonCampaignData","ManualCPC","ManualCPI","budgetAmount","bidStrategy","isBudgetValid","isMarketingMetricValid","savePromises","campaignResults","BudgetStepShell","budgetInfo","wizardState","allExpandedSections","expandSections","useSummarySchemaData","timeDisplayType","setTimeDisplayType","DynamicPermissions","dynamic","loadedStoresData","savedProductFilter","savedListingGroup","getFlowFactors","preferencesService","_preferencesService","initialize","isTwelveHourDisplay","findByName","Data","locations","currentLevelSettings","currentLocations","loc","SelectionStatus","location","campaignName","assetGroupName","appName","appPlatform","autoGeneratedAssets","finalUrlExpansionOptOut","finalUrlExpansions","autoGeneratedTextOptOut","autoGeneratedImageOptOut","budget","currencyCode","bidValue","costPerSale","costPerSaleOptOut","conversionGoals","locationTargeting","targetOption","languages","audienceSignal","AudienceGroup","searchThemes","AssetGroupSearchThemes","shouldFetchFromMT","headlines","descriptions","adScheduleCampaign","startDate","StartDate","endDate","EndDate","adSchedules","dayTimeRanges","useSearcherTimeZone","AdScheduleUseSearcherTimeZone","urlOptions","FinalUrlSuffix","UrlCustomParameters","urlRules","path1","Path1","path2","Path2","mobileFinalUrls","MobileFinalUrls","AssetGroupUrlTargets","newCustomerAcquisition","newCustomerAcquisitionOptOut","buildSchemaData","SummaryStepShell","schemaData","appPlatformString","currentFlow","getCurrentFlow","onAssetsHeaderActionClick","NAVIGATE_TO","stepId","STEP_PATHS","ASSETS","onTargetingHeaderActionClick","TARGETING","onCampaignSettingsHeaderActionClick","CAMPAIGN_DETAILS","onBudgetSettingsHeaderActionClick","hd1","hd2","hd3","targeting","campaignSettings","buildSchema","SummaryShimmer","currentSteps","summaryPageComponentTypes","CAMPAIGN_DETAILS_EDIT","ASSETS_GROUP_EDIT","SUMMARY","UnifiedAppCampaignStepsConfig","view","repository","assetGroupResults","updatedCampaign","newCampaign","isPublishing","updateAssetGroupAndCampaignStatus","UnifiedAppEditCampaignSettingsStepsConfig","UnifiedAppEditAssetGroupSettingsStepConfig","SaveAndPublish","isBlocking","FETCHING","LOADING","onNextClicked","SAVE_AND_EXIT","buttonText","getCurrentStepId","PrimaryButton","SaveAsDraft","_useWizardService2","NextButton","_useWizardService3","SAVE_AND_NEXT","BackButton","_useWizardService4","onBackClicked","BACK","UnifiedAppCampaignFooter","nextButtonText","nextDisabled","backButtonText","cancelButtonText","hideBackButton","isFirstStep","getIsFirstStep","isLastStep","getIsLastStep","tokens","childrenGap","CancelButton","EditFooter","SaveAndExitButton","StepList","currentStepId","displayMode","useResponsiveSize","Constants","ResponsiveSizeBreakpoints","stepListConfig","getStepListConfig","getDefaultOnItemClickFn","step","toStep","includes","steps","firstSubStep","s","isBehind","ResponsiveStepList","getOnItemClickFn","localStorageKey","LocalStorageKeys","UnifiedAppCampaignAdType","useLocalStorageStoreType","defaultStoreType","unifiedAppCampaignStoreType","appConfig","localStorage","supportsStorage","set","useCampaignStoreType","appSettings","APP_STORE_TO_STORE_TYPE","UnifiedAppCampaignWizard","withSiteMap","withRecommendationContext","siteMap","StoreTypes","AndroidPlayStore","wizardFlow","STORE_TYPE_TO_FLOW","routeToNavigateToWhenDone","getRoutePathById","initialStep","initialFlowFactors","initialWizardData","actions","onDone","onExited","UnifiedAppEditCampaignSettingsWizard","currentCampaign","UnifiedAppEditAssetGroupSettingsWizard","ErrorMessages","messages","stopPropagation","onValidate","results","isDirty","ValidationGroup","Campaign","AppAdPreviewControls","onSurfaceChange","onPlacementFilterChange","surfaceChoice","setSurfaceChoice","surfaceMap","Store","placementFilterByPreviewControlState","previewTemplateType","surfaceList","Pivot","onLinkClick","itemKey","PivotItem","headerText","getAdPreviewStyles","white","visibility","merginTop","carouselLayoutClassName","carouselControlsMsn","carouselControlsOthers","customCarouselRoot","carouselLayoutHeader","geCarouselStyleForMsan","previewCarousel","bottomCarouselNavigation","geCarouselStyleForOthers","placementCustomizationPredicate","currentAdData","_React$useState","_React$useState2","adData","setAdData","isAdDataUpdated","newAdData","debouncedSetAdData","cancel","getImageIndexFromId","isPortrait","getPreviewImageIndex","idRequestedByImageExperience","firstImageIndex","imagesToDisplay","previewImageIndex","flat","onAddAspectRatio","imagePlacement","isImageListUpdatedByPreview","onRemoveAspectRatio","onEdit","truncatedAdData","validAdData","substring","shortHeadlineMaxLength","longHeadlineMaxLength","descriptionMaxLength","func","placementFilter","setPlacementFilter","getFirstElement","getLogo","imageArr","PreviewCarouselLayout","usePreviewCarouselLayout","groupType","AdPlacementsGroupType","appAdStart","appAd","placementFilterPredicate","customDefaultImage","previewPlaceholder","surface","getCarouselControlsAndIndicatorsStyleBySurface","newPlacementFilter","headerButtonProps","getIsRequiredByIndex","enableAutoPlay","whitelistedSchemaPropertyKeysForModel","bulkModelToViewModelForCampaign","originalCampaignViewModel","pick","isString","parseInt","bulkModelToViewModelForLocationTargets","locationTargetsModel","CampaignCriterions","bulkModelToViewModelForDayTimeTargets","criterions","bulkUpsertCampaignSettingsEntityErrorMap","getBulkUploadErrorType","ERROR_ENTITY","CampaignLocation","CampaignRadius","CampaignNegativeLocation","CampaignLocationIntent","CampaignDayTimeCriterion","campaignViewModel","viewModelToBulkModelForCampaign","viewModelToBulkModelForLocationTargets","adSchedulesModel","viewModelToBulkModelForAdSchedules","modelToSave","createOrUpdateCampaign","bulkOrSystemError","isBulkWrappedResponse","entity","filteredErrors","removeReferencedEntityInvalidIdErrors","modelToViewModelForBulkErrors","console","warn","unexpectedBulkErrorToString","genericApiError","saveAssetGroupAndLinkedData","roasMtToUI","roas","localizeBudget","useLocalizeBudget","_usePreference","usePreference","preferenceNames","SelectedCurrency","currencyPreference","bidValueCpc","bidValueCpi","cpa","parseFloat","isInitialAdditionalDetailsChecked","currency","parseDecimal","getStylesFunction","getResponsiveStyles","WindowsAppStore","IosAppStore","AppStoreTypes","defaultPanels","panels","parseFileName","nameWithExtension","nameWithoutExt","ext","lastIndexOf","FilePicker","readFile","fileObjects","onFileRead","showErrors","onFileSelected","maximumFileSizeMB","isReachFileSizeLimit","getReachFileSizeLimitErrorMessage","selectedFiles","filePicker","fileIndex","selectedFilesCount","errorArr","fileObj","fileSizeMB","toFixed","reachLimit","handleDraging","isDraging","setState","isFileDraging","enableMultiple","allowedFileExtensions","showExtensionError","filePickerOptions","isNative","displayFilePath","useButton","BackboneFilePicker","on","render","remove","hide","testRef","bind","_this$props2","enableDrag","hideDescription","fileDraggerLabel","fileDraggerTip","fileDraggerDropDescription","useLargeStyling","fileButton","FileDragger","onReadFile","allowedFileExtension","onInvalidExtension","dropDescription","dragging","readFileAsDataURLAsync","file","reader","FileReader","addEventListener","readAsDataURL","MaximumImageFileSizeMB","MaximumVideoFileSizeMB","allowedVideoFileExtensions","defaultAllowedImageExtensions","ImageFilePicker","args","onFileReadInternal","imageSources","maximumFileSize","fileSize","errorLinkText","errorTopic","isMultimediaAd","isAudienceAd","LearnMoreLink","linkText","topic","_this$props3","minimumSize","maxCount","VideoFilePicker","isVideo","imageItemBox","imageContent","objectFit","uploadPreviewStyle","uploadPreviewContainer","uploadTitle","imagePreviewContainer","scrollBar","neutralLighterAlt","imageItemBoxRight","imageItemErrBox","imageName","progressBox","progressLine","statusIcon","completeIcon","green","transition","ongoingIcon","errorIcon","errorMsg","imageSize","UploadPreviewWithCustomPreview","assetList","PreviewComponent","showTitle","getFileSize","fileSizeStr","normalInfoBox","Progress","progressPercentage","progress","uploadingNum","min","previewComponentClasses","imageContentText","exceedMaxUploadNum","errorInfoBox","SimpleImagePreview","UploadPreview","BarUploadProgress","uploadProcessText","uploadedBytes","totalBytes","CircleUploadProgress","getCircleProgressStyle","circle","RadialProgress","UploadProgress","updateProgress","setProgress","uploadProgressBoundary","evt","boundary","loaded","total","updateFilePreviewArrayUploadProgress","previewArr","previous","generatePreviewArray","_ref3$files","files","fileSources","_ref3$customizedOptio","customizedOptions","source","validateImageAsync","imageSource","minimumWidth","minimumHeight","validateImageSyncAsyncWithDimensionParams","validateVideoAsync","defaultProtocols","buildUrl","_ref$protocol","protocol","_ref$url","_ref$protocols","protocols","prefix","parseUrl","regexResult","RegExp","exec","UrlEditor","_React$Component","onUrlChange","onChange","onUrlPartChange","rawInput","_parseUrl","newUrl","newProtocol","fullUrl","buildFullUrl","trim","onProtocolPartChange","_parseUrl2","_this$state","containerClassName","Select","selectClassName","ariaProtocolLabelledBy","ariaProtocolLabel","option","Input","inputClassName","ariaUrlLabelledBy","ariaUrlLabel","UrlEditorValidationAdapter","AdapterFactory","valueToInject","UrlEditorWithValidation","withError","withValidation","UrlEditorForArray","setUrl","urlSchema","properties","urls","isValidCustomUrlProtocol","test","doesUrlContainUnsafeCharacters","UrlLengthLimit","pathLengthLimitErrorMessages","pathLengthLimit","makeStyles","urlInputContainer","shorthands","urlInput","urlProtocol","customUrlProtocol","urlPath","UrlPathFluent","_value","urlDomain","getDomain","onPathChange","path","newValue","validatePath","onPath1Change","event","onPath2Change","mergeClasses","URL_COLON_SLASH_SLASH","DEFAULT_URL_PREFIX","getUrlPrefixAndDestination","defaultUrlPrefix","getUpdatedFullUrlOnPrefixUpdate","urlWithoutPrefix","newPrefix","slash","getUpdatedFullUrlOnTextUpdate","urlPrefix","_getUrlPrefixAndDesti","_getUrlPrefixAndDesti2","destination","urlPrefixOptions","UrlInputFluent","additionalValidation","prepopulateUrl","dropdownOptionAriaLabel","propertyKey","validateOnRender","additionalProperties","textFieldAriaLabel","enableSpecialCharactersValidation","hideProtocol","selectedOptionText","validateAndUpdateUrl","currentURL","finalUrlValidatorError","requiredUrlProtocolAndDomain","urlLengthLimit","lengthLimit","getUrlProtocolAndDomain","validateAdUrl","stringify","onUrlPrefixChanged","newItem","optionValue","onCustomUrlProtocolChanged","onTextChange","contentAfter","Dropdown","onOptionSelect","selectedOptions","Option","withNoProtocol","urlWithProtocol","validateSpecialCharacters","urlPathStyle","flexFlow","TextField","isEmptyUrl","_getUrlPrefixAndDesti3","dest","customizedValidation","suffix","selectedKey","grow","pug","module","exports","locals","pug_interp","pug_html","locals_for_with","date","formattedValue","metricName","escape","call","filterLocationData","granularity","metric","latitude","longitude","VIEWS","VIEW_STRINGS","MAP","TABLE","LOCATIONS_PER_PAGE","locationGranularity","country","county","stateOrProvince","city","postalCode","METRIC_STRINGS","Clicks","Impressions","CTR","AverageCPC","Spend","TopImpressionRatePercent","AbsoluteTopImpressionRatePercent","ConversionsCredit","PartialConversionRate","PartialConversionCPA","AdvertiserReportedRevenue","RevenueOnAdSpend","METRIC_FULL_STRINGS","bubbleColorForVNext","createPushpinOption","locationInfo","radius","svg","getPushPinIcon","anchor","x","y","roundClickableArea","formatLocationData","locationData","dateRange","maxValue","formatMetric","Latitude","Longitude","pushpinOption","max","getCustomPushpin","pinOption","Maps","Location","Pushpin","Point","formatDate","end","useTopLocationsData","willFetchData","willRender","setLocations","setIsLoading","setTopLocationValues","fetchCountryData","fetchStateOrProvinceData","fetchCountyData","fetchCityData","fetchPostalCodeData","fetchLocationData","countryData","countryLocationData","CountryLatitude","CountryLongitude","isUSorCanada","stateOrProvinceData","stateOrProvinceLocationData","countyData","countyLocationData","cityData","cityLocationData","postalCodeData","postalCodeLocationData","useMetricSelectorStyles","iconContainer","colorPaletteGreenBackground2","colorStatusSuccessForeground1","button","lineBreak","MetricSelector","onMetricChange","Menu","MenuTrigger","disableButtonEnhancement","Tooltip","relationship","MenuButton","MenuPopover","MenuList","MenuItem","useFooterStyles","footer","Footer","showPagination","paginationConfig","campaignType","onNext","onPrevious","useNoLocationsStyles","imageContainer","flexBasis","NoData","fit","Subtitle2","Body1","rowElement","line","mapElement","TableShimmer","Shimmer","shimmerElements","MapShimmer","useTableStyles","TopLocationsTable","rowsToDisplay","locationsPerPage","getPageLocations","Table","sortable","TableBody","TableRow","TableCell","useMapStyles","backdropFilter","TopLocationTarget","LocationTarget","constructor","topLocation","super","GeoPoint","ExpandedName","TARGETING_TYPE","Top","TopLocationsMap","mapRef","l","onGetTooltipHtmlContent","locationTarget","BingMapsView","usePaginationConfig","ceil","cardId","useCardStyles","wideContainer","wideContentWrapper","TopLocationsCardInternal","headerState","perfMarkerUtils","done","hasLocations","contentArea","isWideMode","viewOption","TopLocationsCard","BingMapsContextProvider","campaignApiServiceRoot","ServicesEndpoints","CampaignAPI","CampaignAPIPath","campaignApiToken","Token","bingMapsApiKey","getDisplayName","withBingMapsContext","preferenceFromServer","patchPreference","preferenceService","PreferenceContext","preferences","cardPreferences","cards","currentCardPreferences","card","initMetric","setMetric","newMetric","preferencesData","useViewSelectorStyles","WIDE_MODE_WIDTH","TopLocationViewSelector","dimensions","onViewSelected"],"sourceRoot":""}