\r\n {!isIncludedImage ?\r\n (onAddAspectRatio &&\r\n onAddAspectRatio(getTemplateTypeByIndex(index))}\r\n data-index={index}\r\n >\r\n { i18n.getString(_TL_('Include')) }\r\n \r\n ) :\r\n (\r\n \r\n {!isRecommendedImage &&\r\n onEdit(getTemplateTypeByIndex(index))}\r\n data-index={index}\r\n title={i18n.getString(_TL_('Edit aspect ratio'))}\r\n >\r\n { i18n.getString(_TL_('Edit aspect ratio')) }\r\n \r\n }\r\n {isRequired ?\r\n (onRemoveAspectRatio &&\r\n \r\n { excludeButton }\r\n \r\n )\r\n : (onRemoveAspectRatio && excludeButton)\r\n }\r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nIncludeExcludeEditButtons.propTypes = {\r\n index: PropTypes.number.isRequired,\r\n isIncludedImage: PropTypes.bool.isRequired,\r\n isRecommendedImage: PropTypes.bool.isRequired,\r\n getIsRequiredByIndex: PropTypes.func.isRequired,\r\n onAddAspectRatio: PropTypes.func,\r\n onRemoveAspectRatio: PropTypes.func,\r\n onEdit: PropTypes.func.isRequired,\r\n getTemplateTypeByIndex: PropTypes.func.isRequired,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nIncludeExcludeEditButtons.defaultProps = {\r\n onAddAspectRatio: undefined,\r\n onRemoveAspectRatio: undefined,\r\n styleOverrides: {},\r\n};\r\n\r\nconst ReCropReplaceButtons = ({\r\n index,\r\n onCrop,\r\n onReplace,\r\n styleOverrides,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getReCropReplaceButtonsStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n onCrop(index)}\r\n data-index={index}\r\n >\r\n { i18n.getString(_TL_('Re-crop')) }\r\n \r\n onReplace(index)}\r\n data-index={index}\r\n >\r\n { i18n.getString(_TL_('Replace'))}\r\n \r\n
\r\n );\r\n};\r\n\r\nReCropReplaceButtons.propTypes = {\r\n index: PropTypes.number.isRequired,\r\n onCrop: PropTypes.func.isRequired,\r\n onReplace: PropTypes.func.isRequired,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nReCropReplaceButtons.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n\r\nconst PreviewCarouselHeaderWithButtons = ({\r\n index,\r\n title,\r\n headerButtonProps,\r\n selectedImage,\r\n styleOverrides,\r\n getIsRequiredByIndex,\r\n getTemplateTypeByIndex,\r\n}) => {\r\n const classes = useDefaultStyles(getPreviewCarouselHeaderWithButtonsStyles({ styleOverrides }));\r\n const { onCrop } = headerButtonProps;\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nPreviewCarouselHeaderWithButtons.propTypes = {\r\n index: PropTypes.number.isRequired,\r\n title: PropTypes.string.isRequired,\r\n headerButtonProps: PropTypes.shape({\r\n onCrop: PropTypes.func,\r\n }).isRequired,\r\n selectedImage: PropTypes.shape({}).isRequired,\r\n getIsRequiredByIndex: PropTypes.func.isRequired,\r\n getTemplateTypeByIndex: PropTypes.func.isRequired,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nPreviewCarouselHeaderWithButtons.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n\r\nexport const Header = (props) => {\r\n const {\r\n index,\r\n getCarouselTitleByIndex,\r\n getIsRequiredByIndex,\r\n selectedImage,\r\n headerButtonProps,\r\n hideHeaderButtons,\r\n isImageValid,\r\n styleOverrides,\r\n getTemplateTypeByIndex,\r\n shouldHideHeaderButtonsByIndex,\r\n } = props;\r\n\r\n const title = useMemo(() => getCarouselTitleByIndex(index), [index, getCarouselTitleByIndex]);\r\n const { header: headerStyles } = styleOverrides;\r\n\r\n if (!hideHeaderButtons && isImageValid && headerButtonProps && !shouldHideHeaderButtonsByIndex(index)) {\r\n return (\r\n \r\n {title}\r\n
\r\n \r\n { onCrop ?\r\n \r\n
\r\n );\r\n }\r\n\r\n return null;\r\n};\r\n\r\nDisclaimerMessage.propTypes = {\r\n disclaimerMessage: PropTypes.string,\r\n styleOverrides: PropTypes.shape({\r\n disclaimerMessage: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nDisclaimerMessage.defaultProps = {\r\n disclaimerMessage: '',\r\n styleOverrides: {},\r\n};\r\n","import { extend } from 'underscore';\r\n\r\nexport const getFooterButtonStyles = ({\r\n styleOverrides = {},\r\n}) => (_, { palette = {} }) => ({\r\n footerButton: extend({\r\n position: 'relative',\r\n float: 'right',\r\n bottom: 113,\r\n color: palette.themePrimary,\r\n '& .iconba': {\r\n top: 1,\r\n fontSize: 16,\r\n },\r\n }, styleOverrides.footerButton),\r\n});\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ActionButton } from '@bingads-webui-react/fabric-control';\r\n\r\nimport { getFooterButtonStyles } from './styles/footer-button';\r\n\r\nexport const FooterButton = ({\r\n index,\r\n selectedImage,\r\n footerButtonProps,\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getFooterButtonStyles({ styleOverrides: styleOverrides.footerButton }));\r\n\r\n if (footerButtonProps) {\r\n const {\r\n onClick,\r\n onRenderIcon,\r\n buttonText,\r\n buttonClassName,\r\n } = footerButtonProps;\r\n\r\n return (\r\n \r\n {disclaimerMessage}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nAllPlacementsPanel.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n onDismiss: PropTypes.func.isRequired,\r\n cellsNumberPerRow: PropTypes.number.isRequired,\r\n totalCount: PropTypes.number.isRequired,\r\n onRenderCell: PropTypes.func.isRequired,\r\n className: PropTypes.string,\r\n cellHeight: PropTypes.number,\r\n};\r\n\r\nAllPlacementsPanel.defaultProps = {\r\n className: '',\r\n cellHeight: 482,\r\n};\r\n\r\nexport const useAllPlacementsPanel = ({\r\n previewElements,\r\n getSelectedImage,\r\n headerButtonProps,\r\n getCarouselTitleByIndex,\r\n isImageValid,\r\n getIsRequiredByIndex,\r\n getMinSizeByIndex,\r\n styleOverrides,\r\n shouldHideHeaderButtonsByIndex,\r\n getTemplateTypeByIndex,\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getAdPlacementStyle);\r\n\r\n const onDismiss = useCallback(() => {\r\n setIsOpen(false);\r\n }, []);\r\n\r\n const onRenderCell = useCallback((index) => {\r\n const previewElement = previewElements[index];\r\n const selectedImage = getSelectedImage(index);\r\n\r\n return (\r\n \r\n
\r\n );\r\n }, [\r\n classes,\r\n previewElements,\r\n getSelectedImage,\r\n headerButtonProps,\r\n getCarouselTitleByIndex,\r\n isImageValid,\r\n getMinSizeByIndex,\r\n styleOverrides,\r\n getIsRequiredByIndex,\r\n shouldHideHeaderButtonsByIndex,\r\n getTemplateTypeByIndex,\r\n ]);\r\n\r\n // eslint-disable-next-line arrow-body-style\r\n const panelElement = useMemo(() => {\r\n return (\r\n \r\n {previewElement}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nPreviewCarouselLayout.propTypes = {\r\n previewElements: PropTypes.arrayOf(PropTypes.func).isRequired,\r\n hideNavigationControlsIfSingle: PropTypes.bool,\r\n // helper methods\r\n getImageInfoByIndex: PropTypes.func.isRequired,\r\n getCarouselTitleByIndex: PropTypes.func.isRequired,\r\n getMinSizeByIndex: PropTypes.func.isRequired,\r\n validateImageSizeByIndex: PropTypes.func.isRequired,\r\n doesTemplateShowImageByIndex: PropTypes.func.isRequired,\r\n hideHeaderButtons: PropTypes.bool,\r\n\r\n // header decorator props\r\n headerButtonProps: PropTypes.shape({}),\r\n\r\n // disclaimer message props\r\n disclaimerMessage: PropTypes.string,\r\n\r\n // footer button props\r\n footerButtonProps: PropTypes.shape({}),\r\n\r\n // custom style overrides\r\n styleOverrides: PropTypes.shape({}),\r\n\r\n // enable behavior in carousel to auto play through carousel items\r\n enableAutoPlay: PropTypes.bool,\r\n};\r\n\r\nPreviewCarouselLayout.defaultProps = {\r\n hideNavigationControlsIfSingle: false,\r\n headerButtonProps: null,\r\n disclaimerMessage: '',\r\n footerButtonProps: null,\r\n styleOverrides: {},\r\n enableAutoPlay: true,\r\n hideHeaderButtons: false,\r\n};\r\n","export const getGroupsLayoutStyles = () => ({\r\n controls: {\r\n display: 'flex',\r\n paddingBottom: 8,\r\n },\r\n\r\n channelControl: {\r\n marginLeft: 'auto',\r\n },\r\n\r\n groupContainer: {\r\n background: '#ffffff',\r\n borderRadius: 4,\r\n boxShadow: '0 2px 4px rgba(0,0,0,0.1)',\r\n\r\n '& .preview-string': {\r\n display: 'none',\r\n },\r\n\r\n '& .additional-disclaimer-message': {\r\n display: 'none',\r\n },\r\n\r\n '& .multi-line-processed-text': {\r\n wordBreak: 'break-word',\r\n },\r\n },\r\n\r\n inactiveGroup: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nexport const getCarouselOverrideStyles = () => ({\r\n carouselContainer: {\r\n '& .new-preview-carousel-container-adprelib ': {\r\n border: 'none',\r\n },\r\n\r\n '& .ad-preview-title': {\r\n fontSize: 14,\r\n margin: 0,\r\n padding: 20,\r\n },\r\n\r\n '& .exclude-aspect-ratio-button': {\r\n display: 'none',\r\n },\r\n\r\n '& .carousel-wrapper': {\r\n '& .carousel-inner': {\r\n paddingBottom: 24,\r\n },\r\n '& .carousel-control': {\r\n background: 'transparent',\r\n },\r\n '& .carousel-control.left': {\r\n left: 'calc(50% - 65px)',\r\n transform: 'translateX(-50%)',\r\n margin: '15px 0',\r\n },\r\n '& .carousel-control.right': {\r\n left: 'calc(50% + 60px)',\r\n transform: 'translateX(-50%)',\r\n margin: '15px 0',\r\n },\r\n '& .carousel-indicators': {\r\n display: 'flex',\r\n gap: '10px',\r\n left: '50% !important',\r\n transform: 'translateX(-50%)',\r\n margin: '20px 0 !important',\r\n\r\n '& li': {\r\n margin: '0',\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { Pivot, PivotItem } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getGroupsLayoutStyles } from './styles';\r\n\r\nexport const GroupsLayoutControls = (props) => {\r\n const {\r\n i18n,\r\n groups,\r\n activeGroupKey,\r\n onChangeActiveGroupKey,\r\n } = props;\r\n const classes = useDefaultStyles(getGroupsLayoutStyles);\r\n\r\n if (groups.length === 1) return null;\r\n\r\n return (\r\n \r\n onChangeActiveGroupKey(item.props.itemKey)}\r\n >\r\n {\r\n _.map(groups, group => (\r\n
\r\n );\r\n};\r\n\r\nGroupsLayoutControls.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n groups: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n })).isRequired,\r\n activeGroupKey: PropTypes.string.isRequired,\r\n onChangeActiveGroupKey: PropTypes.func.isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useCallback, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { GroupsLayoutControls } from './controls';\r\nimport { getCarouselOverrideStyles, getGroupsLayoutStyles } from './styles';\r\n\r\n\r\nexport const GroupsPreviewer = (props) => {\r\n const {\r\n groups,\r\n defaultGroup,\r\n previewers,\r\n adData,\r\n decoratorsData,\r\n images,\r\n headerButtonProps,\r\n onActiveGroupChange,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getGroupsLayoutStyles);\r\n const carouselClasses = useDefaultStyles(getCarouselOverrideStyles);\r\n\r\n const [activeGroupKey, setActiveGroupKey] = useState(groups[0].key);\r\n\r\n const handleSetActiveGroupKey = useCallback((groupKey) => {\r\n setActiveGroupKey(groupKey);\r\n onActiveGroupChange(groupKey);\r\n }, [onActiveGroupChange]);\r\n\r\n useEffect(() => {\r\n if (defaultGroup) {\r\n setActiveGroupKey(defaultGroup);\r\n }\r\n }, [defaultGroup]);\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nGroupsPreviewer.propTypes = {\r\n groups: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n predicate: PropTypes.func.isRequired,\r\n })).isRequired,\r\n defaultGroup: PropTypes.string,\r\n onActiveGroupChange: PropTypes.func,\r\n previewers: PropTypes.shape({}).isRequired,\r\n adData: PropTypes.shape({}).isRequired,\r\n decoratorsData: PropTypes.shape({}),\r\n images: PropTypes.arrayOf(PropTypes.shape({})),\r\n headerButtonProps: PropTypes.shape({\r\n onEdit: PropTypes.func.isRequired,\r\n onAddAspectRatio: PropTypes.func.isRequired,\r\n onRemoveAspectRatio: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nGroupsPreviewer.defaultProps = {\r\n defaultGroup: null,\r\n onActiveGroupChange: _.noop,\r\n decoratorsData: {},\r\n images: [],\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getAdsLabelStyles } from './styles/ads-label';\r\n\r\nexport const AdsLabel = ({\r\n adsLabelText,\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getAdsLabelStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n {\r\n _.map(groups, ({ key }) => {\r\n const Previewer = previewers[key];\r\n\r\n return (\r\n \r\n
\r\n );\r\n })\r\n }\r\n \r\n {adsLabelText}\r\n
\r\n );\r\n};\r\n\r\nAdsLabel.propTypes = {\r\n adsLabelText: PropTypes.string.isRequired,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nAdsLabel.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n","/* eslint-disable arrow-body-style */\r\n\r\nimport _ from 'underscore';\r\n\r\nexport const getAdsLabelStyles = ({ styleOverrides }) => (e, { palette = {} }) => {\r\n return {\r\n adsLabel: _.extend({\r\n color: palette.black,\r\n margin: 7,\r\n opacity: '90%',\r\n padding: '1.2px 6px 1.8px 6px',\r\n position: 'absolute',\r\n fontSize: 11,\r\n borderRadius: 5,\r\n backgroundColor: palette.white,\r\n }, styleOverrides.adsLabel),\r\n };\r\n};\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getBoostStyles = ({ styleOverrides }) => () => {\r\n return {\r\n boostDiscover: _.extend({\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n width: '100%',\r\n fontSize: 16,\r\n color: 'black',\r\n borderBottom: '1px solid #C8C8C8',\r\n paddingLeft: 10,\r\n }, styleOverrides.boostDiscover),\r\n boostWindows: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n '& .welcome': {\r\n marginBottom: 10,\r\n },\r\n '& .time': {\r\n fontSize: 40,\r\n },\r\n }, styleOverrides.boostWindows),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getBoostStyles } from './styles/boost';\r\n\r\nexport const BoostDiscover = ({\r\n text,\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getBoostStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n {text}\r\n
\r\n );\r\n};\r\n\r\nBoostDiscover.propTypes = {\r\n text: PropTypes.string.isRequired,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nBoostDiscover.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n\r\nexport const BoostWindows = ({\r\n welcomeText,\r\n timeText,\r\n dateText,\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getBoostStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nBoostWindows.propTypes = {\r\n welcomeText: PropTypes.string.isRequired,\r\n timeText: PropTypes.string.isRequired,\r\n dateText: PropTypes.string.isRequired,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nBoostWindows.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n\r\n","/* eslint-disable arrow-body-style */\r\n\r\nimport _ from 'underscore';\r\n\r\nexport const getBusinessNameWithAdsStyles = ({ styleOverrides }) => () => {\r\n return {\r\n businessNameWithAds: _.extend({\r\n marginTop: 9,\r\n padding: '1px 0',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n }, styleOverrides.businessNameWithAds),\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 { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getBusinessNameWithAdsStyles } from './styles/business-name-with-ads';\r\n\r\nexport const BusinessNameWithAds = ({\r\n businessName,\r\n i18n,\r\n onlyIcon,\r\n showLabel,\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getBusinessNameWithAdsStyles({ styleOverrides }));\r\n\r\n return (\r\n {welcomeText}
\r\n {timeText}
\r\n {dateText}
\r\n \r\n {\r\n showLabel &&\r\n \r\n {i18n.getString(_TL_('Ad'))}\r\n \r\n }\r\n { !onlyIcon &&\r\n \r\n {businessName}\r\n \r\n }\r\n
\r\n );\r\n};\r\n\r\nBusinessNameWithAds.propTypes = {\r\n businessName: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onlyIcon: PropTypes.bool,\r\n showLabel: PropTypes.bool,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nBusinessNameWithAds.defaultProps = {\r\n onlyIcon: false,\r\n showLabel: false,\r\n styleOverrides: {},\r\n};\r\n","/* eslint-disable arrow-body-style */\r\n\r\nimport _ from 'underscore';\r\n\r\nexport const getCallToActionStyles = ({ styleOverrides }) => (e, { palette = {} }) => {\r\n return {\r\n actionButton: _.extend({\r\n color: palette.white,\r\n border: 'none',\r\n opacity: '90%',\r\n position: 'absolute',\r\n fontSize: '16px',\r\n fontWeight: 'bold',\r\n borderRadius: 32,\r\n backgroundColor: '#a19f9d',\r\n }, styleOverrides.actionButton),\r\n dismissButton: _.extend({\r\n }, styleOverrides.dismissButton),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getCallToActionStyles } from './styles/call-to-action';\r\n\r\nexport const CallToAction = ({\r\n actionText,\r\n dismissText,\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getCallToActionStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n 
\r\n
\r\n );\r\n};\r\n\r\nPersonaDecorator.propTypes = {\r\n data: PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n picture: PropTypes.string.isRequired,\r\n sponsoredText: PropTypes.string.isRequired,\r\n }).isRequired,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nPersonaDecorator.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n","/* eslint-disable arrow-body-style */\r\n\r\nimport _ from 'underscore';\r\n\r\nexport const getContactDecoratorStyles = ({ styleOverrides }) => () => {\r\n return {\r\n container: _.extend({\r\n display: 'flex',\r\n gap: '8px',\r\n alignItems: 'center',\r\n marginTop: '8px',\r\n }, styleOverrides.phoneAndAddressDecoratorContainer),\r\n section: _.extend({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '4px',\r\n }, styleOverrides.phoneAndAddressDecoratorSection),\r\n addressLabel: _.extend({\r\n fontSize: '13px',\r\n lineHeight: '16px',\r\n color: '#001BA0',\r\n }, styleOverrides.phoneAndAddressDecoratorAddressLabel),\r\n phoneLabel: _.extend({\r\n fontSize: '13px',\r\n lineHeight: '16px',\r\n color: '#605e5c',\r\n }, styleOverrides.phoneAndAddressDecoratorPhoneLabel),\r\n icon: _.extend({\r\n display: 'inline-block',\r\n height: '16px',\r\n width: '16px',\r\n verticalAlign: 'text-top',\r\n }, styleOverrides.phoneAndAddressDecoratorIcon),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getContactDecoratorStyles } from './styles/contact';\r\n\r\nimport locationIcon from './assets/contact-address-icon.svg';\r\nimport phoneIcon from './assets/contact-phone-icon.svg';\r\n\r\nexport const ContactDecorator = ({\r\n data: {\r\n phone,\r\n address,\r\n },\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getContactDecoratorStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n
\r\n {name}
\r\n {sponsoredText}
\r\n \r\n {\r\n address &&\r\n
\r\n );\r\n};\r\n\r\nContactDecorator.propTypes = {\r\n data: PropTypes.shape({\r\n phone: PropTypes.string,\r\n address: PropTypes.string,\r\n }),\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nContactDecorator.defaultProps = {\r\n data: {},\r\n styleOverrides: {},\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport prong from './assets/prong-dark-bgimage.svg';\r\nimport winStoreLogo from './assets/winStoreLogo.svg';\r\nimport { getProngStyles } from './styles/win-prong-dark-style';\r\n\r\n\r\nexport const ProngDark = ({\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getProngStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n 
\r\n {address}\r\n
\r\n }\r\n { phone &&\r\n \r\n {\r\n !address &&\r\n 
\r\n }\r\n
\r\n }\r\n {phone}
\r\n \r\n 
\r\n 
\r\n
\r\n );\r\n};\r\n\r\nProngDark.propTypes = {\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nProngDark.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getProngStyles = ({ styleOverrides }) => () => {\r\n return {\r\n prong: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n }, styleOverrides.prongWindows),\r\n winStoreLogo: _.extend({\r\n position: 'absolute',\r\n top: 117,\r\n left: 83,\r\n zIndex: 2,\r\n }, styleOverrides.prongWindows),\r\n winStore: _.extend({\r\n position: 'absolute',\r\n top: 118,\r\n left: 93,\r\n fontWeight: 400,\r\n fontSize: 5,\r\n color: '#FFFFFF',\r\n zIndex: 2,\r\n }, styleOverrides.prongWindows),\r\n sponsored: _.extend({\r\n position: 'absolute',\r\n top: 169,\r\n left: 83,\r\n borderRadius: 2,\r\n fontWeight: 400,\r\n fontSize: 5,\r\n border: '0.25px solid #FFFFFF',\r\n padding: '0.5px 2px 0px 2px',\r\n color: '#FFFFFF',\r\n zIndex: 2,\r\n }, styleOverrides.prongWindows),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport prong from './assets/prong-light-bgimage.svg';\r\nimport winStoreLogo from './assets/winStoreLogo.svg';\r\nimport { getProngStyles } from './styles/win-prong-light-style';\r\n\r\n\r\nexport const ProngLight = ({\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getProngStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n {_TL_('Microsoft store')}\r\n
\r\n \r\n {_TL_('Sponsored')}\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nProngLight.propTypes = {\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nProngLight.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getProngStyles = ({ styleOverrides }) => () => {\r\n return {\r\n prong: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n }, styleOverrides.prongWindows),\r\n winStoreLogo: _.extend({\r\n position: 'absolute',\r\n top: 117,\r\n left: 83,\r\n zIndex: 2,\r\n }, styleOverrides.prongWindows),\r\n winStore: _.extend({\r\n position: 'absolute',\r\n top: 118,\r\n left: 93,\r\n fontWeight: 400,\r\n fontSize: 5,\r\n color: '#FFFFFF',\r\n zIndex: 2,\r\n }, styleOverrides.prongWindows),\r\n sponsored: _.extend({\r\n position: 'absolute',\r\n top: 169,\r\n left: 83,\r\n borderRadius: 2,\r\n fontWeight: 400,\r\n fontSize: 5,\r\n border: '0.25px solid #FFFFFF',\r\n padding: '0.5px 2px 0px 2px',\r\n color: '#FFFFFF',\r\n zIndex: 2,\r\n }, styleOverrides.prongWindows),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport win11StartLightBackground from './assets/win11-start-light-bgimage.svg';\r\nimport { getStartStyles } from './styles/win11-start-light-style';\r\n\r\n\r\nexport const Win11StartLight = ({\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getStartStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n {_TL_('Microsoft store')}\r\n
\r\n \r\n {_TL_('Sponsored')}\r\n
\r\n \r\n 
\r\n \r\n
\r\n );\r\n};\r\n\r\nWin11StartLight.propTypes = {\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nWin11StartLight.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getStartStyles = ({ styleOverrides }) => () => {\r\n return {\r\n start: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n }, styleOverrides.startWindows),\r\n adContainer: _.extend({\r\n width: 300,\r\n height: 59,\r\n position: 'absolute',\r\n top: 50,\r\n left: 57,\r\n backgroundColor: '#DDDFE3',\r\n border: '1px solid #0078D4',\r\n }, styleOverrides.startWindows),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport win11StartDarkBackground from './assets/win11-start-dark-bgimage.svg';\r\nimport { getStartStyles } from './styles/win11-start-dark-style';\r\n\r\n\r\nexport const Win11StartDark = ({\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getStartStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n 
\r\n \r\n
\r\n );\r\n};\r\n\r\nWin11StartDark.propTypes = {\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nWin11StartDark.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getStartStyles = ({ styleOverrides }) => () => {\r\n return {\r\n start: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n }, styleOverrides.startWindows),\r\n adContainer: _.extend({\r\n width: 300,\r\n height: 59,\r\n position: 'absolute',\r\n top: 65,\r\n left: 57,\r\n backgroundColor: '#2F3C5D',\r\n border: '1px solid #0078D4',\r\n }, styleOverrides.startWindows),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport win10StartLightBackground from './assets/win10-start-light-bgimage.svg';\r\nimport { getStartStyles } from './styles/win10-start-light-style';\r\n\r\n\r\nexport const Win10StartLight = ({\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getStartStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n 
\r\n \r\n
\r\n );\r\n};\r\n\r\nWin10StartLight.propTypes = {\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nWin10StartLight.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getStartStyles = ({ styleOverrides }) => () => {\r\n return {\r\n start: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n }, styleOverrides.startWindows),\r\n adContainer: _.extend({\r\n width: 300,\r\n height: 59,\r\n position: 'absolute',\r\n top: 116,\r\n left: 30,\r\n backgroundColor: '#DDDFE3',\r\n border: '1px solid #0078D4',\r\n }, styleOverrides.startWindows),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport win10StartDarkBackground from './assets/win10-start-dark-bgimage.svg';\r\nimport { getStartStyles } from './styles/win10-start-dark-style';\r\n\r\n\r\nexport const Win10StartDark = ({\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getStartStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n 
\r\n \r\n
\r\n );\r\n};\r\n\r\nWin10StartDark.propTypes = {\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nWin10StartDark.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getStartStyles = ({ styleOverrides }) => () => {\r\n return {\r\n start: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n }, styleOverrides.startWindows),\r\n adContainer: _.extend({\r\n width: 300,\r\n height: 59,\r\n position: 'absolute',\r\n top: 116,\r\n left: 30,\r\n backgroundColor: '#2F3C5D',\r\n border: '1px solid #0078D4',\r\n }, styleOverrides.startWindows),\r\n };\r\n};\r\n","import React from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport winStore from './assets/winStore.svg';\r\nimport adBadge from './assets/adBadge.svg';\r\nimport getButton from './assets/getButton.svg';\r\nimport { getWinStoreStyles } from './styles/win-store';\r\n\r\n\r\nexport const WinStore = ({\r\n styleOverrides,\r\n}) => {\r\n const classes = useDefaultStyles(getWinStoreStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n 
\r\n 
\r\n 
\r\n
\r\n );\r\n};\r\n\r\nWinStore.propTypes = {\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nWinStore.defaultProps = {\r\n styleOverrides: {},\r\n};\r\n\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\n\r\nexport const getWinStoreStyles = ({ styleOverrides }) => () => {\r\n return {\r\n winStoreWindows: _.extend({\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n top: 20,\r\n left: '50%',\r\n color: 'white',\r\n transform: 'translate(-50%)',\r\n '& .welcome': {\r\n marginBottom: 10,\r\n },\r\n '& .time': {\r\n fontSize: 40,\r\n },\r\n }, styleOverrides.winStoreWindows),\r\n icon: _.extend({\r\n display: 'inline-block',\r\n height: '16px',\r\n width: '16px',\r\n verticalAlign: 'text-top',\r\n }, styleOverrides.phoneAndAddressDecoratorIcon),\r\n adBadge: _.extend({\r\n position: 'absolute',\r\n top: 140,\r\n left: 94,\r\n zIndex: 1,\r\n }, styleOverrides.phoneAndAddressDecoratorIcon),\r\n getButton: _.extend({\r\n position: 'absolute',\r\n top: 187,\r\n left: 94,\r\n zIndex: 1,\r\n }, styleOverrides.phoneAndAddressDecoratorIcon),\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 { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { MultiLineEllipsisText } from '@bingads-webui-react/multiline-ellipsis';\r\n\r\nimport { AdsLabel } from './ads-label';\r\n\r\nimport { getDescriptionStyles } from './styles/description';\r\nimport { getFinalUrlStyles } from './styles/final-url';\r\nimport { getLongHeadlineStyles } from './styles/long-headline';\r\nimport { getShortHeadlineStyles } from './styles/short-headline';\r\n\r\nconst TextContainer = React.forwardRef(({\r\n className,\r\n showMultiline,\r\n text,\r\n}, ref) => (\r\n showMultiline ?\r\n \r\n {text}\r\n
\r\n )\r\n));\r\n\r\nTextContainer.propTypes = {\r\n className: PropTypes.string.isRequired,\r\n showMultiline: PropTypes.bool.isRequired,\r\n text: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const Description = React.forwardRef(({\r\n styleOverrides,\r\n showMultipleDescription,\r\n description,\r\n showAdsLabel,\r\n adsLabelText,\r\n}, ref) => {\r\n const classes = useDefaultStyles(getDescriptionStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n {\r\n showAdsLabel &&\r\n
\r\n );\r\n});\r\n\r\nDescription.propTypes = {\r\n showMultipleDescription: PropTypes.bool.isRequired,\r\n description: PropTypes.string.isRequired,\r\n showAdsLabel: PropTypes.bool,\r\n adsLabelText: PropTypes.string,\r\n styleOverrides: PropTypes.shape({}),\r\n};\r\n\r\nDescription.defaultProps = {\r\n styleOverrides: {},\r\n showAdsLabel: false,\r\n adsLabelText: '',\r\n};\r\n\r\n\r\nexport const FinalUrl = React.forwardRef(({\r\n styleOverrides,\r\n showUrlMultiline,\r\n finalUrl,\r\n displayUrl,\r\n}, ref) => {\r\n const classes = useDefaultStyles(getFinalUrlStyles({ styleOverrides }));\r\n\r\n return (\r\n \r\n \r\n {\r\n this.props.showProngLight &&\r\n
\r\n );\r\n }\r\n}\r\n\r\nUnstyledAdPlacementCardPreview.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n ...AdPlacementCardPropTypes.propTypes,\r\n};\r\n\r\nUnstyledAdPlacementCardPreview.defaultProps = {\r\n ...AdPlacementCardPropTypes.defaultProps,\r\n};\r\n\r\nexport const AdPlacementCardPreview = (props) => {\r\n const { styleOverrides } = props;\r\n // eslint-disable-next-line arrow-body-style\r\n const StyledComponent = useMemo(() => {\r\n return withI18nConsumer(withDefaultStyles(UnstyledAdPlacementCardPreview, getPlacementCardStyles({ styleOverrides })));\r\n }, [styleOverrides]);\r\n\r\n return (\r\n \r\n {\r\n this.props.showAdsLabel &&\r\n
\r\n {\r\n showBoostDiscover &&\r\n \r\n
\r\n }\r\n\r\n {\r\n showHotspots &&\r\n hotspots.map((hotspot, index) => (\r\n // eslint-disable-next-line react/no-array-index-key\r\n \r\n
\r\n ))\r\n }\r\n\r\n {hotspot.title}
\r\n {hotspot.actionText}
\r\n \r\n {\r\n this.props.showBusinessNameFirst && this.props.showBusinessName &&\r\n
\r\n \r\n {\r\n showPreviewTypeString &&\r\n \r\n {previewTypeStringKey}\r\n
\r\n }\r\n {\r\n showAdditionalDisclaimer &&\r\n \r\n {disclaimerMessage}\r\n
\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nAdPlacementPreview.propTypes = {\r\n ...AdPlacementPreviewPropTypes.propTypes,\r\n};\r\n\r\nAdPlacementPreview.defaultProps = {\r\n ...AdPlacementPreviewPropTypes.defaultProps,\r\n};\r\n","import _ from 'underscore';\r\n\r\nexport const getPlacementStyles = ({ styleOverrides, isIncluded }) => () => {\r\n const overrides = _.pick(styleOverrides, 'placementContainer', 'headerImage', 'cardParent');\r\n\r\n return {\r\n placementContainer: _.extend({\r\n flexGrow: 1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n opacity: isIncluded ? '100%' : '50%',\r\n }, overrides.placementContainer),\r\n cardParent: _.extend({\r\n }, overrides.cardParent),\r\n headerImage: _.extend({\r\n }, overrides.headerImage),\r\n };\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport { AdPlacementsComponentTypes } from '@bingads-webui-campaign-react/ad-placement-consts';\r\nimport {\r\n AdPlacementDynamicSearch,\r\n AdPlacementDynamicSearchPropTypes,\r\n AdPlacementResponsiveSearch,\r\n AdPlacementResponsiveSearchDesktop,\r\n AdPlacementResponsiveSearchMobile,\r\n AdPlacementResponsiveSearchPropTypes,\r\n} from '@bingads-webui-campaign-react/unified-ad-preview-library-core';\r\nimport { templateParserUtils } from '@bingads-webui-campaign-react/ad-placement-templates';\r\n\r\nimport { AdPlacementPreview, AdPlacementPreviewPropTypes } from './ad-placement-preview';\r\n\r\nconst { getImageTypeForTemplate } = templateParserUtils;\r\n\r\nconst AdPlacementsViewMapping = {\r\n [AdPlacementsComponentTypes.AdPlacementPreview]: AdPlacementPreview,\r\n [AdPlacementsComponentTypes.AdPlacementDynamicSearch]: AdPlacementDynamicSearch,\r\n [AdPlacementsComponentTypes.AdPlacementResponsiveSearch]: AdPlacementResponsiveSearch,\r\n [AdPlacementsComponentTypes.AdPlacementResponsiveSearchDesktop]: AdPlacementResponsiveSearchDesktop,\r\n [AdPlacementsComponentTypes.AdPlacementResponsiveSearchMobile]: AdPlacementResponsiveSearchMobile,\r\n};\r\n\r\nconst AdPlacementsViewPropsMapping = {\r\n [AdPlacementsComponentTypes.AdPlacementPreview]: _.keys(AdPlacementPreviewPropTypes.propTypes),\r\n [AdPlacementsComponentTypes.AdPlacementDynamicSearch]: _.keys(AdPlacementDynamicSearchPropTypes.propTypes),\r\n [AdPlacementsComponentTypes.AdPlacementResponsiveSearch]: _.keys(AdPlacementResponsiveSearchPropTypes.propTypes),\r\n [AdPlacementsComponentTypes.AdPlacementResponsiveSearchDesktop]: _.keys(AdPlacementResponsiveSearchPropTypes.propTypes),\r\n [AdPlacementsComponentTypes.AdPlacementResponsiveSearchMobile]: _.keys(AdPlacementResponsiveSearchPropTypes.propTypes),\r\n};\r\n\r\nexport const getAdPlacementElement = ({\r\n template,\r\n templateTransformerFunc,\r\n i18n,\r\n}) => {\r\n const { componentType } = template;\r\n const Component = AdPlacementsViewMapping[componentType];\r\n const componentPropKeys = AdPlacementsViewPropsMapping[componentType];\r\n\r\n return {\r\n AdPlacementElement: ({\r\n // eslint-disable-next-line react/prop-types\r\n adData,\r\n // eslint-disable-next-line react/prop-types\r\n imagesToDisplay,\r\n // eslint-disable-next-line react/prop-types\r\n decoratorsData,\r\n // eslint-disable-next-line react/prop-types\r\n logo,\r\n }) => {\r\n // eslint-disable-next-line react/prop-types\r\n const imageForTemplate = useMemo(() => _.find(imagesToDisplay, ({ associationType }) => associationType.toLowerCase() === getImageTypeForTemplate(template).toLowerCase()), [imagesToDisplay]);\r\n\r\n const transformedTemplate = useMemo(() => templateTransformerFunc({\r\n adData,\r\n decoratorsData,\r\n template,\r\n i18n,\r\n }), [adData, decoratorsData]);\r\n\r\n const componentProps = _.pick(transformedTemplate, componentPropKeys);\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n showHeaderImage &&\r\n
\r\n {children}\r\n \r\n 
\r\n
\r\n }\r\n \r\n {\r\n !this.props.hideLabel &&\r\n \r\n {this.props.i18n.getString('Entity_Ads')}\r\n \r\n }\r\n { !this.props.onlyIcon &&\r\n \r\n {this.props.businessName}\r\n \r\n }\r\n {\r\n this.props.showAdsIcon &&\r\n 
\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nBusinessNameWithAds.propTypes = {\r\n businessName: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onlyIcon: PropTypes.bool,\r\n hideLabel: PropTypes.bool,\r\n};\r\n\r\nBusinessNameWithAds.defaultProps = {\r\n onlyIcon: false,\r\n hideLabel: false,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { MultiLineEllipsisText } from '@bingads-webui-react/multiline-ellipsis';\r\nimport { isValidUrl } from '@bingads-webui/url-util';\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\nimport { ImageExperienceImage } from '@bingads-webui-campaign-react/image-experience';\r\nimport { ImageModelPropTypes } from '@bingads-webui-campaign/image-experience-proptypes';\r\nimport { BusinessNameWithAds } from './business-name-with-ads';\r\n\r\nexport class AdPlacementCardPreview extends React.PureComponent {\r\n constructor(props, context) {\r\n super(props, context);\r\n\r\n this.multiLineTextRefs = [\r\n React.createRef(),\r\n React.createRef(),\r\n React.createRef(),\r\n ];\r\n }\r\n\r\n componentDidUpdate() {\r\n this.multiLineTextRefs.forEach((ref) => {\r\n if (ref.current) {\r\n ref.current.processText();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n const {\r\n hideLabel,\r\n multipleLineLongHeadline,\r\n showImage,\r\n multipleDescription,\r\n dismissText,\r\n showHotspots,\r\n hotspots,\r\n isMultimediaAd,\r\n previewContentClassName,\r\n isMultiMediaAdsPhase2Enabled,\r\n previewTexts,\r\n logo,\r\n showLogo,\r\n } = this.props;\r\n const imageContainerClassName =\r\n this.props.showGradient ?\r\n 'gradient image-container' :\r\n 'image-container';\r\n const srcForCroppedImageView = this.props.isAdCreatorEnabled\r\n ? this.props.image.FinalSrc\r\n : this.props.image.Src;\r\n\r\n const showMultipleDescription = multipleDescription || (isMultimediaAd && isMultiMediaAdsPhase2Enabled);\r\n\r\n return (\r\n \r\n {\r\n this.props.showAdsLabel &&\r\n isMultimediaAd && isMultiMediaAdsPhase2Enabled &&\r\n
\r\n {\r\n previewContentClassName === 'boost-discover-card' &&\r\n \r\n {this.props.i18n.getString('Entity_Ads')}\r\n
\r\n }\r\n {\r\n isMultimediaAd && isMultiMediaAdsPhase2Enabled &&\r\n \r\n }\r\n {\r\n showImage &&\r\n {this.props.i18n.getString(_TL_('Discover'))}
\r\n }\r\n {\r\n previewContentClassName === 'boost-windows' &&\r\n \r\n
\r\n }\r\n {showLogo && logo &&\r\n {this.props.i18n.getString(_TL_('Welcome back. Dismiss the lock screen to sign back into Windows.'))}
\r\n {this.props.i18n.getString(_TL_('10:36'))}
\r\n {this.props.i18n.getString(_TL_('Tuesday, October 18'))}
\r\n \r\n
\r\n }\r\n\r\n {\r\n showHotspots &&\r\n hotspots.map((hotspot, index) => (\r\n // eslint-disable-next-line\r\n \r\n
\r\n ))\r\n }\r\n\r\n {hotspot.title}
\r\n {hotspot.actionText}
\r\n \r\n {\r\n this.props.showShortHeadline &&\r\n (\r\n isMultimediaAd ? (\r\n isMultiMediaAdsPhase2Enabled &&\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nAdPlacementCardPreview.propTypes = {\r\n image: ImageModelPropTypes.isRequired,\r\n previewTexts: PropTypes.shape({\r\n shortHeadline: PropTypes.string,\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n url: PropTypes.string,\r\n callToAction: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showShortHeadline: PropTypes.bool,\r\n showLongHeadline: PropTypes.bool,\r\n showDescription: PropTypes.bool,\r\n multipleLineLongHeadline: PropTypes.bool,\r\n hotspots: PropTypes.arrayOf(PropTypes.shape({\r\n title: PropTypes.string,\r\n desc: PropTypes.string,\r\n actionText: PropTypes.string,\r\n uri: PropTypes.string,\r\n })),\r\n multipleDescription: PropTypes.bool,\r\n showGradient: PropTypes.bool,\r\n dismissText: PropTypes.string,\r\n previewContentClassName: PropTypes.string.isRequired,\r\n additionalSetting: PropTypes.shape({\r\n imagePreviewHeight: PropTypes.number.isRequired,\r\n aspectRatio: PropTypes.number.isRequired,\r\n logoHeight: PropTypes.number,\r\n }).isRequired,\r\n logo: PropTypes.instanceOf(ImageExperienceImage),\r\n showBusinessName: PropTypes.bool,\r\n showUrl: PropTypes.bool,\r\n showAction: PropTypes.bool,\r\n showAdsLabel: PropTypes.bool,\r\n showHotspots: PropTypes.bool,\r\n showLogo: PropTypes.bool,\r\n showImage: PropTypes.bool,\r\n hideLabel: PropTypes.bool,\r\n isMultimediaAd: PropTypes.bool,\r\n isMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n};\r\n\r\nAdPlacementCardPreview.defaultProps = {\r\n showShortHeadline: false,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n dismissText: null,\r\n showGradient: false,\r\n showHotspots: false,\r\n showBusinessName: true,\r\n hotspots: [],\r\n multipleLineLongHeadline: false,\r\n logo: null,\r\n showUrl: false,\r\n multipleDescription: false,\r\n showAction: false,\r\n hideLabel: false,\r\n showLogo: false,\r\n showImage: true,\r\n showAdsLabel: false,\r\n isMultimediaAd: false,\r\n isMultiMediaAdsPhase2Enabled: false,\r\n isAdCreatorEnabled: false,\r\n};\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { ImageModelPropTypes } from '@bingads-webui-campaign/image-experience-proptypes';\r\nimport { AdPlacementCardPreview } from './ad-placement-card-preview';\r\n\r\nexport class AdPlacementPreview extends React.PureComponent {\r\n render() {\r\n const containerOpacity = !this.props.opacityChangeEnabled || this.props.image.IsIncluded ? '100%' : '50%';\r\n const cardProps = _.pick(\r\n this.props,\r\n 'image',\r\n 'previewTexts',\r\n 'i18n',\r\n 'showShortHeadline',\r\n 'showLongHeadline',\r\n 'showDescription',\r\n 'showGradient',\r\n 'previewContentClassName',\r\n 'additionalSetting',\r\n 'showBusinessName',\r\n 'multipleDescription',\r\n 'multipleLineLongHeadline',\r\n 'hideLabel',\r\n 'showUrl',\r\n 'showAction',\r\n 'showAdsLabel',\r\n 'showAdsIcon',\r\n 'dismissText',\r\n 'showHotspots',\r\n 'showImage',\r\n 'hotspots',\r\n 'showLogo',\r\n 'logo',\r\n 'isMultimediaAd',\r\n 'isMultiMediaAdsPhase2Enabled',\r\n 'isAdCreatorEnabled'\r\n );\r\n\r\n return (\r\n \r\n {previewTexts.shortHeadline}\r\n
\r\n ) :\r\n \r\n {previewTexts.longHeadline}\r\n
:\r\n \r\n {isValidUrl(previewTexts.url) ?\r\n new URL(previewTexts.url).origin : previewTexts.url}\r\n
\r\n ) :\r\n \r\n {previewTexts.description}\r\n
\r\n :\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nAdPlacementPreview.propTypes = {\r\n image: ImageModelPropTypes.isRequired,\r\n previewTexts: PropTypes.shape({\r\n shortHeadline: PropTypes.string,\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n businessName: PropTypes.string,\r\n url: PropTypes.string,\r\n callToAction: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n showShortHeadline: PropTypes.bool,\r\n showLongHeadline: PropTypes.bool,\r\n showDescription: PropTypes.bool,\r\n showGradient: PropTypes.bool,\r\n previewContentClassName: PropTypes.string.isRequired,\r\n showBusinessName: PropTypes.bool,\r\n showUrl: PropTypes.bool,\r\n showAction: PropTypes.bool,\r\n opacityChangeEnabled: PropTypes.bool,\r\n showAdsLabel: PropTypes.bool,\r\n isMultimediaAd: PropTypes.bool,\r\n isMultiMediaAdsPhase2Enabled: PropTypes.bool,\r\n isAdCreatorEnabled: PropTypes.bool,\r\n additionalSetting: PropTypes.shape({\r\n previewTypeStringKey: PropTypes.string.isRequired,\r\n }).isRequired,\r\n children: PropTypes.node,\r\n};\r\n\r\nAdPlacementPreview.defaultProps = {\r\n showShortHeadline: false,\r\n opacityChangeEnabled: false,\r\n showLongHeadline: false,\r\n showDescription: false,\r\n showGradient: false,\r\n showBusinessName: true,\r\n showUrl: false,\r\n showAction: false,\r\n showAdsLabel: false,\r\n isMultimediaAd: false,\r\n isMultiMediaAdsPhase2Enabled: false,\r\n isAdCreatorEnabled: false,\r\n children: null,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Carousel } from '@bingads-webui-react/primitive-unthemed';\r\nimport { MultiLineEllipsisText } from '@bingads-webui-react/multiline-ellipsis';\r\nimport { CroppedImageView } from '@bingads-webui-campaign-react/cropped-image-view';\r\nimport { ImageExperienceImage, constants as C } from '@bingads-webui-campaign-react/image-experience-model';\r\n\r\nexport class MultiImagePreview extends React.PureComponent {\r\n constructor(props, context) {\r\n super(props, context);\r\n\r\n this.multiLineTextRefs = [\r\n React.createRef(),\r\n React.createRef(),\r\n React.createRef(),\r\n React.createRef(),\r\n ];\r\n\r\n this.state = {\r\n index: 0,\r\n direction: null,\r\n };\r\n }\r\n\r\n componentDidUpdate() {\r\n this.multiLineTextRefs.forEach((ref) => {\r\n if (ref.current) {\r\n ref.current.processText();\r\n }\r\n });\r\n }\r\n\r\n handleSelect = (selectedIndex, e) => {\r\n this.setState({\r\n index: selectedIndex,\r\n direction: e.direction,\r\n });\r\n }\r\n\r\n render() {\r\n const imageContainerClassName = 'image-container';\r\n const { index, direction } = this.state;\r\n\r\n return (\r\n \r\n {this.props.i18n.getString(this.props.additionalSetting.previewTypeStringKey)}\r\n
\r\n {this.props.children}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nMultiImagePreview.propTypes = {\r\n images: PropTypes.arrayOf(PropTypes.instanceOf(ImageExperienceImage)).isRequired,\r\n previewTexts: PropTypes.shape({\r\n longHeadline: PropTypes.string,\r\n extensionHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n parseDecimal: PropTypes.func.isRequired,\r\n }).isRequired,\r\n imagePreviewHeight: PropTypes.number,\r\n isInsideImages: PropTypes.bool,\r\n};\r\n\r\nMultiImagePreview.defaultProps = {\r\n imagePreviewHeight: null,\r\n isInsideImages: false,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { MultiLineEllipsisText } from '@bingads-webui-react/multiline-ellipsis';\r\nimport { ImageExperienceImage } from '@bingads-webui-campaign-react/image-experience-model';\r\nimport { MultiImagePreview } from './multi-image-preview';\r\n\r\nexport class AdPlacementMultiImagePreview extends React.PureComponent {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.multiLineTextRefs = [\r\n React.createRef(),\r\n React.createRef(),\r\n React.createRef(),\r\n ];\r\n\r\n this.isMobilePreview = (this.props.previewType === 'MobileMultiImage');\r\n }\r\n\r\n componentDidUpdate() {\r\n this.multiLineTextRefs.forEach((ref) => {\r\n if (ref.current) {\r\n ref.current.processText();\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n const {\r\n images,\r\n previewTexts,\r\n previewContentClassName,\r\n imagePreviewHeight,\r\n i18n,\r\n } = this.props;\r\n const finalPreviewContentClassName =\r\n `${previewContentClassName} responsive-ad-preview-content`;\r\n\r\n this.isMobilePreview = (this.props.previewType === 'MobileMultiImage');\r\n\r\n return (\r\n !this.isMobilePreview ?\r\n \r\n {\r\n this.props.isInsideImages &&\r\n
\r\n\r\n \r\n
\r\n }\r\n {\r\n !this.props.isInsideImages &&\r\n \r\n
\r\n \r\n \r\n {\r\n this.props.images.map(imageObj => (\r\n \r\n \r\n \r\n ))\r\n }\r\n \r\n
\r\n }\r\n \r\n {this.props.i18n.getString('Entity_Ads')}\r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {\r\n images.map(imageObj => (\r\n
\r\n :\r\n {onRenderCell(i)}
);\r\n }\r\n\r\n return totalCount > 0 ? (\r\n \r\n {cells}\r\n
\r\n ) : null;\r\n}\r\n\r\nAdPlacementsGridPreview.propTypes = {\r\n cellsNumberPerRow: PropTypes.number.isRequired,\r\n totalCount: PropTypes.number.isRequired,\r\n onRenderCell: PropTypes.func.isRequired,\r\n cellHeight: PropTypes.number,\r\n};\r\n\r\nAdPlacementsGridPreview.defaultProps = {\r\n cellHeight: 482,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Panel, DefaultButton } from '@bingads-webui-react/fabric-control';\r\nimport { AdPlacementsGridPreview } from './ad-placements-grid-preview';\r\nimport { getPanelStyle } from './ad-placements-grid-preview-style';\r\n\r\nexport function AdPlacementsGridPreviewPanel({\r\n isOpen,\r\n onDismiss,\r\n className,\r\n cellsNumberPerRow,\r\n totalCount,\r\n onRenderCell,\r\n cellHeight,\r\n}) {\r\n const i18n = useContext(I18nContext);\r\n const onRenderFooterContent = React.useCallback(\r\n () => (\r\n \r\n {i18n.getString(_TL_('Close'))} \r\n
\r\n ),\r\n [i18n, onDismiss]\r\n );\r\n\r\n return (\r\n