\r\n \r\n \r\n {i18n.getString(content)}\r\n \r\n {disabled && disableText && isVertical &&\r\n \r\n {i18n.getString(disableText)}\r\n
\r\n }\r\n \r\n );\r\n}\r\n\r\nCampaignCreationMethodItem.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func.isRequired }).isRequired,\r\n itemIndex: PropTypes.number.isRequired,\r\n onMethodItemClick: PropTypes.func.isRequired,\r\n\r\n method: PropTypes.string.isRequired,\r\n imageSrc: PropTypes.string.isRequired,\r\n content: PropTypes.string.isRequired,\r\n alt: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n\r\n shouldForceContentInTwoLines: PropTypes.bool,\r\n isVertical: PropTypes.bool,\r\n disabled: PropTypes.bool,\r\n disableText: PropTypes.string,\r\n selected: PropTypes.bool,\r\n};\r\n\r\nCampaignCreationMethodItem.defaultProps = {\r\n shouldForceContentInTwoLines: false,\r\n isVertical: false,\r\n disabled: false,\r\n disableText: '',\r\n selected: false,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@fluentui/react';\r\n\r\nimport { getCampaignCreationMethod, CampaignCreationMethod } from './components/campaign-creation-method-constants';\r\nimport { CampaignCreationMethodSelectionStyles } from './styles/campaign-creation-method-item-styles';\r\nimport { CampaignCreationMethodItem } from './components/campaign-creation-method-item';\r\n\r\nexport function CampaignCreationMethodSelection(props) {\r\n const {\r\n i18n,\r\n\r\n onClickCreateNewCampaign,\r\n onClickGoogleImport,\r\n onClickFacebookImport,\r\n\r\n isVertical,\r\n disableImports,\r\n isRebranding,\r\n isHideImports,\r\n\r\n selectedItem,\r\n hiddenMethod,\r\n } = props;\r\n\r\n const campaignCreationMethods = useMemo(\r\n () => getCampaignCreationMethod(disableImports, isVertical, isRebranding, isHideImports).filter(item => hiddenMethod.indexOf(item.method) === -1),\r\n [disableImports, isVertical, isRebranding, isHideImports, hiddenMethod]\r\n );\r\n const onMethodItemClick = useCallback((selection) => {\r\n if (selection === CampaignCreationMethod.GOOGLE_IMPORT) {\r\n onClickGoogleImport();\r\n } else if (selection === CampaignCreationMethod.FACEBOOK_IMPORT) {\r\n onClickFacebookImport();\r\n } else {\r\n onClickCreateNewCampaign();\r\n }\r\n }, [onClickCreateNewCampaign, onClickFacebookImport, onClickGoogleImport]);\r\n\r\n const renderSelectionItem = useMemo(() => _.map(campaignCreationMethods, (item, itemIndex) => (\r\n \r\n )), [campaignCreationMethods, i18n, isVertical, onMethodItemClick, selectedItem]);\r\n\r\n return (\r\n \r\n \r\n {renderSelectionItem}\r\n \r\n
\r\n );\r\n}\r\n\r\nCampaignCreationMethodSelection.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func.isRequired }),\r\n\r\n onClickCreateNewCampaign: PropTypes.func.isRequired,\r\n onClickGoogleImport: PropTypes.func.isRequired,\r\n onClickFacebookImport: PropTypes.func.isRequired,\r\n\r\n isVertical: PropTypes.bool,\r\n disableImports: PropTypes.bool,\r\n isRebranding: PropTypes.bool,\r\n isHideImports: PropTypes.bool,\r\n\r\n selectedItem: PropTypes.string,\r\n hiddenMethod: PropTypes.arrayOf(PropTypes.string),\r\n};\r\n\r\nCampaignCreationMethodSelection.defaultProps = {\r\n i18n: { getString: value => value },\r\n isVertical: false,\r\n disableImports: false,\r\n isRebranding: false,\r\n isHideImports: false,\r\n selectedItem: '',\r\n hiddenMethod: [],\r\n};\r\n","export const getStyles = () => ({\r\n error: { color: '#a80000', marginTop: '8px' },\r\n});\r\n\r\nexport const getTileHeaderStyles = () => ({\r\n tileHeader: {\r\n display: 'flex',\r\n flexFlow: 'column',\r\n alignItems: 'center',\r\n width: '530px',\r\n },\r\n headerTitle: {\r\n textAlign: 'center',\r\n marginTop: '4px',\r\n marginBottom: '8px',\r\n },\r\n // size s classes\r\n 'tileHeader-s': { width: '283px' },\r\n 'headerTitle-s': { fontSize: '18px' },\r\n\r\n // size m classes\r\n 'tileHeader-m': { width: '382px' },\r\n\r\n // size l classes\r\n 'tileHeader-l': { width: '552px' },\r\n});\r\n\r\nexport const getTileStyles = (_, { palette = {} }) => ({\r\n tile: {\r\n width: '700px',\r\n display: 'flex',\r\n flexFlow: 'column',\r\n alignItems: 'center',\r\n padding: '30px 0',\r\n background: palette.white,\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 },\r\n navigationButtons: {\r\n marginTop: '24px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n // size s classes\r\n 'tile-s': { width: '321px' },\r\n\r\n // size m classes\r\n 'tile-m': { width: '424px' },\r\n\r\n // size l classes\r\n 'tile-l': { width: '618px' },\r\n});\r\n\r\nexport const tileStyles = {\r\n image: { root: { marginBottom: '8px', height: 45 } },\r\n back: { root: { marginRight: '28px', color: '#1375DC' } },\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Image, Text } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport goalWebsiteImg from '../media/advertising-icon.svg';\r\nimport { getTileHeaderStyles, tileStyles } from './styles';\r\n\r\nexport function TileHeader(props) {\r\n const {\r\n id,\r\n title,\r\n subtitle,\r\n displayMode,\r\n hideIcon,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getTileHeaderStyles);\r\n\r\n return (\r\n \r\n { !hideIcon &&\r\n \r\n }\r\n \r\n {title}\r\n \r\n {subtitle}\r\n
\r\n );\r\n}\r\n\r\nTileHeader.propTypes = {\r\n id: PropTypes.string,\r\n title: PropTypes.string.isRequired,\r\n subtitle: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\r\n displayMode: PropTypes.string,\r\n hideIcon: PropTypes.bool,\r\n};\r\n\r\nTileHeader.defaultProps = {\r\n id: '',\r\n subtitle: null,\r\n displayMode: '',\r\n hideIcon: false,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { PrimaryButton, ActionButton } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { TileHeader } from './tile-header';\r\nimport { getTileStyles as getStyles, tileStyles } from './styles';\r\n\r\nexport function Tile(props) {\r\n const {\r\n children,\r\n title,\r\n subtitle,\r\n onBack,\r\n onNext,\r\n backBtnText,\r\n nextBtnText,\r\n displayMode,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n return (\r\n \r\n
\r\n {children}\r\n {\r\n (_.isFunction(onBack) || _.isFunction(onNext)) &&\r\n
\r\n {_.isFunction(onBack) &&\r\n
\r\n {backBtnText || i18n.getString(_TL_('Back'))}\r\n \r\n }\r\n \r\n {nextBtnText || i18n.getString(_TL_('Next'))}\r\n \r\n \r\n }\r\n
\r\n {i18n.getString(campaignGoal.title)}\r\n
\r\n {\r\n campaignGoal.isRecommended &&\r\n \r\n {i18n.getString(_TL_('(recommended)'))}\r\n
\r\n }\r\n \r\n );\r\n}\r\n\r\nGoalItem.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func.isRequired }).isRequired,\r\n id: PropTypes.string.isRequired,\r\n itemIndex: PropTypes.number.isRequired,\r\n selectedCampaignGoals: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n isShowIcon: PropTypes.bool.isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useMemo, useContext, useEffect, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SelectionZone, Selection, SelectionMode, Stack } from '@fluentui/react';\r\n\r\nimport { GoalItem } from './goal-item';\r\nimport { campaignGoals } from './consts';\r\n\r\nexport function GoalSelection(props) {\r\n const i18n = useContext(I18nContext);\r\n\r\n const {\r\n selectedCampaignGoals,\r\n onCampaignGoalSelectionChange,\r\n multiSelect,\r\n isShowIcon,\r\n } = props;\r\n\r\n const selection = useMemo(() => new Selection({\r\n canSelectItem: () => true,\r\n getKey: item => item,\r\n selectionMode: multiSelect ? SelectionMode.multiple : SelectionMode.single,\r\n items: campaignGoals,\r\n onSelectionChanged: () => {\r\n onCampaignGoalSelectionChange(selection.getSelection());\r\n },\r\n }), [onCampaignGoalSelectionChange, multiSelect]);\r\n\r\n const changeGoalSelection = useCallback((item) => {\r\n const selectedValue = !selection.isKeySelected(item);\r\n selection.setKeySelected(item, selectedValue, true);\r\n }, [selection]);\r\n\r\n useEffect(() => {\r\n if (selection && !_.isEmpty(selectedCampaignGoals)) {\r\n _.each(selectedCampaignGoals, (item) => {\r\n selection.setKeySelected(item, true, true);\r\n });\r\n }\r\n }, [selection, selectedCampaignGoals]);\r\n\r\n return (\r\n \r\n \r\n \r\n {_.map(campaignGoals, (campaignGoal, index) => (\r\n \r\n ))}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nGoalSelection.propTypes = {\r\n selectedCampaignGoals: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n onCampaignGoalSelectionChange: PropTypes.func.isRequired,\r\n isShowIcon: PropTypes.bool.isRequired,\r\n multiSelect: PropTypes.bool,\r\n};\r\n\r\nGoalSelection.defaultProps = {\r\n multiSelect: true,\r\n};\r\n","export const getWebsiteAndBusinessStyles = () => ({\r\n container: {\r\n width: '440px',\r\n marginTop: '30px',\r\n '& .error': { color: '#a80000' },\r\n },\r\n businessName: { maxWidth: '440px' },\r\n});\r\n\r\nexport const websiteAndBusinessStyles = {\r\n title: { root: { fontWeight: 600, marginBottom: '5px', textAlign: 'center' } },\r\n titleWithMargin: { root: { fontWeight: 600, marginBottom: '5px', marginTop: '16px' } },\r\n website: { maxWidth: '440px' },\r\n};\r\n\r\nexport const getWebsiteAndSmartPagesStyles = () => ({\r\n container: {\r\n width: '100%',\r\n maxWidth: 400,\r\n marginTop: '30px',\r\n display: 'flex',\r\n flexFlow: 'column',\r\n '& .error': { color: '#a80000' },\r\n },\r\n websiteItemContainer: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginBottom: 18,\r\n },\r\n selectedOptionContainer: {\r\n borderColor: 'transparent',\r\n boxShadow: '0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)',\r\n padding: '20px',\r\n },\r\n smartPageErrors: {\r\n paddingTop: '5px',\r\n },\r\n});\r\n\r\nconst websiteItemMarginRight = '16px';\r\n\r\nexport const websiteAndSmartPagesStyles = {\r\n websiteInput: { maxWidth: '320px', marginTop: '8px' },\r\n title: { root: { fontWeight: 600 } },\r\n link: { root: { fontWeight: 400 } },\r\n};\r\n\r\nexport const getWebsiteItemStyles = () => ({\r\n item: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexFlow: 'column',\r\n width: `calc((100% - ${websiteItemMarginRight}) / 2)`,\r\n backgroundColor: '#fff !important',\r\n border: '2px solid',\r\n position: 'relative',\r\n },\r\n itemContainerRebranding: {\r\n '& .ms-Image-image': {\r\n marginTop: '20px',\r\n },\r\n },\r\n itemContainerWithIcon: {\r\n padding: '34px 20px 20px',\r\n },\r\n itemContainerWithoutIcon: {\r\n padding: '0px 20px 20px',\r\n },\r\n optionSelected: {\r\n borderColor: '#0078D4',\r\n },\r\n optionNotSelected: {\r\n borderColor: 'transparent',\r\n boxShadow: '0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)',\r\n },\r\n imgContainer: {\r\n marginBottom: '-25px',\r\n height: '126px',\r\n },\r\n icon: {\r\n color: '#0078D4',\r\n fontSize: '20px',\r\n position: 'absolute',\r\n top: '9px',\r\n right: '14px',\r\n },\r\n iconNotSelected: {\r\n color: '#323130',\r\n fontSize: '20px',\r\n position: 'absolute',\r\n top: '9px',\r\n right: '14px',\r\n },\r\n});\r\n\r\nexport const websiteItemStyles = {\r\n title: { root: { fontWeight: 600 } },\r\n image: { root: { marginBottom: 10 } },\r\n};\r\n\r\nexport const getWebsiteInputStyles = () => ({\r\n websiteInputContainer: {\r\n display: 'flex',\r\n flexFlow: 'column',\r\n alignItems: 'start',\r\n width: '100%',\r\n },\r\n});\r\n","import websiteIcon from '../../media/website-icon.svg';\r\nimport noWebsiteIcon from '../../media/no-website-icon.svg';\r\nimport websiteImg from '../../media/website-img.svg';\r\nimport noWebsiteImg from '../../media/no-website-img.svg';\r\nimport wwwImage from '../../media/www-website.svg';\r\nimport rebrandingWebsiteImg from '../../media/rebranding-website-img.svg';\r\nimport rebrandingNoWebsiteImg from '../../media/rebranding-no-website-img.svg';\r\n\r\nexport const businessNameValidationErrors = {\r\n required: _TL_('Field must not be empty'),\r\n type: _TL_('Invalid Character'),\r\n maxLength: _TL_('Maximum length exceeded'),\r\n minLength: _TL_('Minimum length not met'),\r\n};\r\n\r\nexport const websiteValidationErrors = {\r\n required: _TL_('Business website is required'),\r\n maxLength: _TL_('Business website exceeds the maximum allowed length'),\r\n pattern: _TL_('Enter a valid business website'),\r\n};\r\n\r\nexport const OPTIONS = {\r\n SIGNUP_EXISTING_WEBSITE: 'existing-website',\r\n SIGNUP_SMART_PAGES: 'smart-pages',\r\n USE_MY_WEBSITE: 'use-my-website',\r\n USE_SMART_PAGES: 'use-smart-pages',\r\n};\r\n\r\nexport const optionTitles = {\r\n [OPTIONS.SIGNUP_EXISTING_WEBSITE]: _TL_('I have a website'),\r\n [OPTIONS.SIGNUP_SMART_PAGES]: _TL_('I don\\'t have a website'),\r\n [OPTIONS.USE_MY_WEBSITE]: _TL_('Use my website'),\r\n [OPTIONS.USE_SMART_PAGES]: _TL_('Use my Smart Pages'),\r\n};\r\n\r\nexport const getOptionImages = (isShowIcon, isRebranding) => {\r\n let signupWebsiteImg = isShowIcon ? websiteIcon : websiteImg;\r\n let signupNoWebsiteImg = isShowIcon ? noWebsiteIcon : noWebsiteImg;\r\n if (isRebranding) {\r\n signupWebsiteImg = rebrandingWebsiteImg;\r\n signupNoWebsiteImg = rebrandingNoWebsiteImg;\r\n }\r\n return {\r\n [OPTIONS.SIGNUP_EXISTING_WEBSITE]: {\r\n imageSrc: signupWebsiteImg,\r\n alt: _TL_('website icon'),\r\n },\r\n [OPTIONS.SIGNUP_SMART_PAGES]: {\r\n imageSrc: signupNoWebsiteImg,\r\n alt: _TL_('no website icon'),\r\n },\r\n [OPTIONS.USE_MY_WEBSITE]: {\r\n imageSrc: websiteImg,\r\n alt: _TL_('website icon'),\r\n },\r\n [OPTIONS.USE_SMART_PAGES]: {\r\n imageSrc: wwwImage,\r\n alt: _TL_('www website icon'),\r\n },\r\n };\r\n};\r\n\r\nexport const selectedText = {\r\n [OPTIONS.SIGNUP_SMART_PAGES]: _TL_('No worries, you can use Microsoft Smart Pages to create a free webpage.'),\r\n [OPTIONS.USE_SMART_PAGES]: _TL_('Use my website created using Microsoft Smart Pages.'),\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Input } from '@bingads-webui-react/primitive-validation';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getWebsiteInputStyles as getStyles } from './styles';\r\n\r\nimport { websiteValidationErrors } from './consts';\r\n\r\nexport const WebsiteInput = (props) => {\r\n const {\r\n website, setWebsite, alwaysShowError, style, labelId,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const onWebsiteChange = useCallback(({ target: { value } }) => {\r\n setWebsite(value);\r\n }, [setWebsite]);\r\n\r\n const handleWebsiteError = useCallback((errors) => {\r\n const errorStrings = _.map(\r\n errors,\r\n (oldError, key) => (\r\n _.has(websiteValidationErrors, key) ?\r\n i18n.getString(websiteValidationErrors[key]) : oldError)\r\n );\r\n return _.isEmpty(errorStrings) ? [] : [_.last(errorStrings)];\r\n }, [i18n]);\r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nWebsiteInput.propTypes = {\r\n website: PropTypes.string,\r\n setWebsite: PropTypes.func.isRequired,\r\n alwaysShowError: PropTypes.bool,\r\n style: PropTypes.shape({}),\r\n labelId: PropTypes.string,\r\n};\r\n\r\nWebsiteInput.defaultProps = {\r\n website: undefined,\r\n alwaysShowError: false,\r\n style: {},\r\n labelId: undefined,\r\n};\r\n","const UrlRegexWithOptionalProtocol = /^(?:http(s)?:\\/\\/)?([a-z0-9-_]+\\.)*[a-z0-9-_]+\\.[a-z]{2,63}(\\/[^\\s]*\\/?)*$/i;\r\n\r\nexport const websiteSchema = {\r\n name: 'Website schema',\r\n type: 'object',\r\n properties: {\r\n website: {\r\n required: true,\r\n type: 'string',\r\n pattern: UrlRegexWithOptionalProtocol,\r\n maxLength: 253,\r\n },\r\n },\r\n};\r\n\r\nexport const websiteAndBusinessSchema = {\r\n name: 'Website and business schema',\r\n type: 'object',\r\n properties: {\r\n website: {\r\n required: true,\r\n type: 'string',\r\n pattern: UrlRegexWithOptionalProtocol,\r\n maxLength: 253,\r\n },\r\n business: {\r\n type: 'string',\r\n maxLength: 40,\r\n minLength: 3,\r\n required: true,\r\n },\r\n },\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useCallback } from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { LegacyI18nContext } from '@bingads-webui-react/legacy-i18n-context';\r\nimport { Text } from '@fluentui/react';\r\nimport { ValidationGroup, Input } from '@bingads-webui-react/primitive-validation';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { WebsiteInput } from './website-input';\r\nimport { websiteAndBusinessSchema } from './validation-schema';\r\nimport { businessNameValidationErrors } from './consts';\r\nimport { getWebsiteAndBusinessStyles as getStyles, websiteAndBusinessStyles as styles } from './styles';\r\n\r\nexport const WebsiteAndBusiness = (props) => {\r\n const {\r\n website,\r\n setWebsite,\r\n businessName,\r\n setBusinessName,\r\n setIsValid,\r\n alwaysShowError,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const legacyI18n = useContext(LegacyI18nContext);\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const onValidate = useCallback((e) => {\r\n setIsValid(e.isValid);\r\n }, [setIsValid]);\r\n\r\n const onChangeBusinessName = useCallback(({ target: { value } }) => {\r\n setBusinessName(value);\r\n }, [setBusinessName]);\r\n const errorProcessor = useCallback((errors) => {\r\n const errorStrings = _.map(\r\n errors,\r\n (oldError, key) => (\r\n _.has(businessNameValidationErrors, key) ?\r\n i18n.getString(businessNameValidationErrors[key]) : oldError)\r\n );\r\n return _.isEmpty(errorStrings) ? [] : [_.last(errorStrings)];\r\n }, [i18n]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('What\\'s the name of your business?'))}\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('What\\'s your business website?'))}\r\n \r\n \r\n \r\n \r\n {showWebsiteOptions &&\r\n
\r\n \r\n \r\n
\r\n }\r\n
\r\n {\r\n existingWebsiteSelected ?\r\n \r\n \r\n {websiteLabel || i18n.getString(_TL_('Your business website you want customers to visit'))}\r\n {websiteHelpTopic && }\r\n \r\n \r\n {isWebsiteSocialPlatform && }\r\n {customError && }\r\n\r\n \r\n :\r\n \r\n {optionText} \r\n \r\n {i18n.getString(_TL_('Learn more'))}\r\n \r\n \r\n \r\n }\r\n
\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nSearchableDropdown.propTypes = {\r\n options: PropTypes.arrayOf(PropTypes.shape({ key: PropTypes.string, text: PropTypes.string })),\r\n};\r\n\r\nSearchableDropdown.defaultProps = {\r\n options: [],\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext } 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 { getStyles } from './styles';\r\nimport { SearchableDropdown } from './searchable-dropdown';\r\n\r\nexport function LanguageCountrySelection(props) {\r\n const {\r\n selectedLanguage,\r\n onLanguageSelected,\r\n languages,\r\n countryOptions,\r\n selectedCountry,\r\n onCountrySelected,\r\n isCountrySelectDisabled,\r\n error,\r\n noShadow,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyles, { noShadow });\r\n\r\n return (\r\n \r\n {countryOptions &&\r\n
\r\n \r\n
\r\n }\r\n
\r\n \r\n
\r\n {error &&
{error}
}\r\n
\r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Your business website you want customers to visit'))}\r\n \r\n \r\n {isWebsiteSocialPlatform && }\r\n \r\n
\r\n
\r\n {\r\n currentView === VIEWS.CREATION_METHOD &&\r\n
\r\n \r\n \r\n }\r\n\r\n {currentView === VIEWS.GOALS &&\r\n \r\n \r\n {goalError && {goalError}
}\r\n \r\n }\r\n {isLanguageEnabled && currentView === VIEWS.LANGUAGE && (\r\n \r\n )}\r\n {currentView === VIEWS.WEBSITE &&\r\n \r\n {withBusinessName ?\r\n \r\n : getWebsiteOptions()\r\n }\r\n \r\n }\r\n {showSwitchToExpertTile && goalTileFooter}\r\n \r\n {renderIcon &&\r\n
\r\n {renderIcon()}\r\n
\r\n }\r\n
\r\n {t} }}\r\n template={i18n.getString(text)}\r\n />\r\n \r\n \r\n
\r\n {i18n.getString(_TL_('Recommended'))}\r\n
\r\n
\r\n \r\n \r\n {i18n.getString(title)}\r\n \r\n {selected && }\r\n \r\n {i18n.getString(description)}\r\n \r\n {!_.isEmpty(bulletItems) &&\r\n \r\n \r\n \r\n {i18n.getString(bulletsTitle)}\r\n \r\n {!isRebranding &&\r\n \r\n {bulletItems.map((bulletItem) => {\r\n const text = _.isString(bulletItem) ? bulletItem : bulletItem.text;\r\n return (\r\n - \r\n \r\n {t} }}\r\n template={i18n.getString(text)}\r\n />\r\n \r\n
\r\n );\r\n })}\r\n
\r\n }\r\n {isRebranding &&\r\n \r\n {bulletItems.map((bulletItem) => {\r\n const { key, text, renderIcon } = bulletItem;\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 {i18n.getString(introTitle)}\r\n
\r\n
\r\n
\r\n {introTexts.map(text => (- {i18n.getString(text)}
))}\r\n
\r\n
\r\n
\r\n (\r\n \r\n {text}\r\n ),\r\n }}\r\n template={subtitleText}\r\n />\r\n
\r\n ), [classes.accountModeSubtitle, subtitle, subtitleText]);\r\n\r\n const onConfirmNext = useCallback(() => {\r\n if (initSelectedMode !== selectedMode) {\r\n uiActivity.trace(`User update accountMode from ${initSelectedMode} to ${selectedMode}`);\r\n }\r\n\r\n if (isSkip) {\r\n onSkip();\r\n } else {\r\n onNext(selectedMode);\r\n }\r\n }, [initSelectedMode, selectedMode, onNext, uiActivity, isSkip, onSkip]);\r\n\r\n const onCancelDialog = useCallback(() => {\r\n setIsSkip(false);\r\n }, []);\r\n\r\n const [\r\n changeDialog,\r\n showChangeDialog,\r\n isChangeDialogVisible,\r\n ] = useConfirmDialog({\r\n title: i18n.getString(_TL_('Confirm changes')),\r\n content: initSelectedMode === ACCOUNT_MODE.UNIFIED_SMART ?\r\n i18n.getString(_TL_('When you confirm a change to the account mode, the associated campaign and social profile will be deleted.')) :\r\n i18n.getString(_TL_('When you confirm a change to the account mode, the associated campaign will be deleted.')),\r\n confirmText: i18n.getString(_TL_('Confirm')),\r\n onConfirm: onConfirmNext,\r\n cancelText: i18n.getString(_TL_('Discard changes')),\r\n onCancel: onCancelDialog,\r\n className: 'wizard-change-account-mode-dialog',\r\n }, {\r\n activity: uiActivity,\r\n dialogName: 'WizardChangeAccountModeDialog',\r\n });\r\n\r\n const onSkipClicked = useCallback(() => {\r\n if (shouldShowAccountModeChangedWarningForSkip) {\r\n setIsSkip(true);\r\n showChangeDialog();\r\n } else {\r\n onSkip();\r\n }\r\n }, [shouldShowAccountModeChangedWarningForSkip, showChangeDialog, onSkip]);\r\n\r\n const skipText = i18n.getString(_TL_('Do you want to create another campaign? {{a}}Create an account first.{{/a}}'));\r\n const skipNode = useMemo(() => (\r\n (\r\n \r\n {text}\r\n ),\r\n }}\r\n template={skipText}\r\n />\r\n ), [skipText, onSkipClicked]);\r\n\r\n const onBackClicked = useCallback(() => {\r\n onBack(selectedMode);\r\n }, [onBack, selectedMode]);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (shouldShowAccountModeChangedWarning && selectedMode !== initSelectedMode) {\r\n showChangeDialog();\r\n } else {\r\n onNext(selectedMode);\r\n }\r\n }, [selectedMode, initSelectedMode, shouldShowAccountModeChangedWarning, showChangeDialog, onNext]);\r\n\r\n const onSmartModeClicked = useCallback(() => {\r\n onModeSelectionChange(ACCOUNT_MODE.UNIFIED_SMART);\r\n }, [onModeSelectionChange]);\r\n\r\n const onExpertModeClicked = useCallback(() => {\r\n onModeSelectionChange(ACCOUNT_MODE.EXPERT);\r\n }, [onModeSelectionChange]);\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n {selectedMode === ACCOUNT_MODE.EXPERT &&\r\n
\r\n {skipNode}\r\n
}\r\n
\r\n
{description}}\r\n displayMode={displayMode}\r\n hideIcon={!showIcon}\r\n />\r\n \r\n {useProgressIndicator &&
}\r\n {!useProgressIndicator &&
}\r\n
\r\n
\r\n \r\n
\r\n {children}\r\n
\r\n );\r\n};\r\n\r\nDisclaimerBannerUnStyledWrapper.propTypes = {\r\n ...commonPropTypes,\r\n children: PropTypes.node.isRequired,\r\n instore: PropTypes.bool.isRequired,\r\n text: PropTypes.string,\r\n};\r\n\r\nDisclaimerBannerUnStyledWrapper.defaultProps = {\r\n text: '',\r\n};\r\n\r\nconst DisclaimerBannerUnStyled = ({\r\n classes,\r\n i18n,\r\n timezone,\r\n instore,\r\n text,\r\n children,\r\n}) => {\r\n let timeZoneStr = typeof timezone === 'string' ? i18n.getString(timezone) : i18n.getString(getTimezoneI18nString(timezone));\r\n timeZoneStr = timeZoneStr || timezone;\r\n const mrcAccreditedText = i18n.getString(_TL_('Only search ads clicks are MRC accredited; other metrics are not MRC accredited.'));\r\n const timeZoneText = `${i18n.getString(_TL_('The time zone for the date range is'))} ${timeZoneStr}`;\r\n\r\n return (\r\n \r\n \r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nDisclaimerBannerUnStyled.propTypes = {\r\n ...commonPropTypes,\r\n timezone: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.number,\r\n ]).isRequired,\r\n instore: PropTypes.bool,\r\n text: PropTypes.string,\r\n};\r\n\r\nDisclaimerBannerUnStyled.defaultProps = {\r\n instore: false,\r\n text: '',\r\n};\r\n\r\nexport const DisclaimerBanner = withDefaultStyles(\r\n withI18nConsumer(DisclaimerBannerUnStyled),\r\n getDisclaimerBannerStyle\r\n);\r\n\r\nconst DisclaimerBannerWithInstoreUnStyled = ({\r\n classes,\r\n i18n,\r\n timezone,\r\n}) => (\r\n \r\n);\r\n\r\nDisclaimerBannerWithInstoreUnStyled.propTypes = {\r\n ...commonPropTypes,\r\n timezone: PropTypes.number.isRequired,\r\n};\r\n\r\nexport const DisclaimerBannerWithInstore = withDefaultStyles(\r\n withI18nConsumer(DisclaimerBannerWithInstoreUnStyled),\r\n getDisclaimerBannerStyle\r\n);\r\n\r\nconst DisclaimerBannerWithoutTimezoneUnStyled = ({\r\n classes,\r\n i18n,\r\n instore,\r\n text,\r\n}) => (\r\n \r\n \r\n \r\n);\r\n\r\n\r\nDisclaimerBannerWithoutTimezoneUnStyled.propTypes = {\r\n ...commonPropTypes,\r\n instore: PropTypes.bool,\r\n text: PropTypes.string,\r\n};\r\n\r\nDisclaimerBannerWithoutTimezoneUnStyled.defaultProps = {\r\n instore: false,\r\n text: '',\r\n};\r\n\r\nexport const DisclaimerBannerWithoutTimezone = withDefaultStyles(\r\n withI18nConsumer(DisclaimerBannerWithoutTimezoneUnStyled),\r\n getDisclaimerBannerStyle\r\n);\r\n\r\nconst DisclaimerBannerWithInstoreWithoutTimezoneUnStyled = ({\r\n classes,\r\n i18n,\r\n}) => (\r\n \r\n);\r\n\r\nDisclaimerBannerWithInstoreWithoutTimezoneUnStyled.propTypes = commonPropTypes;\r\n\r\nexport const DisclaimerBannerWithInstoreWithoutTimezone = withDefaultStyles(\r\n withI18nConsumer(DisclaimerBannerWithInstoreWithoutTimezoneUnStyled),\r\n getDisclaimerBannerStyle\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport class HelpIcon extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.element = React.createRef();\r\n }\r\n\r\n onClick = (event) => {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n // eslint-disable-next-line no-undef\r\n PopupController.PopupJsClick(this.element.current);\r\n }\r\n\r\n render() {\r\n const { topic, ariaLabel, disabled } = this.props;\r\n return (\r\n // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid\r\n \r\n );\r\n }\r\n}\r\n\r\nHelpIcon.propTypes = {\r\n topic: PropTypes.string.isRequired,\r\n ariaLabel: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nHelpIcon.defaultProps = {\r\n ariaLabel: 'Learn more',\r\n disabled: false,\r\n};\r\n","module.exports = __webpack_public_path__ + \"static/media/goal-website-img.8bbb635c.svg\";","module.exports = __webpack_public_path__ + \"static/media/consultant.0da02865.jpg\";","module.exports = __webpack_public_path__ + \"static/media/RebrandingGoogleImport.9bcc7e16.svg\";","import { ComponentSettings } from '@bingads-webui-theme-2018/theme-fluent';\r\n\r\n// The styles listed here have been migrated to above package, since they might be shared across sites (CMUI and CCUI).\r\n// If you want to fix a common issue for all sites, please do it there;\r\n// If you want do some change only for CMUI, please config the styles after importing to this package.\r\nexport const {\r\n alertStyle,\r\n buttonInputStyle,\r\n btnStyle,\r\n btnInteractStyle,\r\n closeImageStyle,\r\n controlStyle,\r\n datePickerStyle,\r\n dropDownEditorStyle,\r\n entitySelectorStyle,\r\n floatButtonStyle,\r\n getBlockerStyle,\r\n gridInlineErrorStyle,\r\n helpbuttonStyle,\r\n InlineEditorStyle,\r\n inlineErrorStyle,\r\n internalLinkStyle,\r\n legacyUIBlockerStyle,\r\n paginationStyle,\r\n scrollbarStyle,\r\n searchboxStyle,\r\n spinnerKeyframe,\r\n statusStyle,\r\n toggleButtonStyle,\r\n uiblockerStyle,\r\n underlineLinkStyle,\r\n reactUIBlockerStyle,\r\n} = ComponentSettings;\r\n","import { crudAdStyle } from './crud-ad-style';\r\nimport { underlineLinkStyle } from './shared-styles-from-theme-fluent';\r\n\r\nexport const summaryPageStyle = ({ palette = {} }) =>\r\n ({\r\n '& .recommendation-summary-view': {\r\n '& >.toolbar': {\r\n marginLeft: 10,\r\n '& .upper-toolbar': {\r\n display: 'inline-block',\r\n },\r\n },\r\n '& .empty-buttons': {\r\n marginTop: 36,\r\n },\r\n\r\n // empty view\r\n '& .empty-filter-view': {\r\n margin: '32px 10px 32px 32px',\r\n\r\n '& .empty-icon': {\r\n display: 'none',\r\n },\r\n\r\n '& .empty-details': {\r\n color: '#605E5C',\r\n gridRow: '1',\r\n gridColumn: '2',\r\n '& .empty-title': {\r\n fontSize: 26,\r\n margin: '0 0 8.5px',\r\n },\r\n '& .empty-sub-title': {\r\n fontSize: 14,\r\n fontWeight: 'normal',\r\n ...underlineLinkStyle({ palette }),\r\n },\r\n },\r\n },\r\n\r\n // summary cards\r\n '& .recommendation-summary-cards': {\r\n width: '100%',\r\n minWidth: 1000,\r\n maxWidth: 1200,\r\n transformStyle: 'preserve-3d',\r\n '& .btn-primary': {\r\n fontFamily: '\\'Segoe UI\\', Arial, sans-serif',\r\n fontSize: 14,\r\n height: '32px',\r\n backgroundColor: palette.themePrimary,\r\n color: palette.white,\r\n padding: '5px 10px',\r\n borderRadius: '2px',\r\n margin: '0 5px 0 0',\r\n '&:hover': {\r\n backgroundColor: '#106ebe',\r\n },\r\n },\r\n '& .recommendation-summary-card': {\r\n minHeight: 120,\r\n marginBottom: 20,\r\n width: 500,\r\n border: 'solid 1px #dddddd',\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.108), 0px 1.6px 3.6px rgba(0, 0, 0, 0.132)',\r\n fontFamily: '\\'Segoe UI\\', Arial, sans-serif',\r\n fontSize: 12,\r\n color: '#333333',\r\n display: 'grid',\r\n gridTemplateColumns: '100%',\r\n gridTemplateRows: 'repeat(4,auto)',\r\n borderRadius: '2px',\r\n '& .summary-header': {\r\n paddingTop: '8px',\r\n paddingRight: '16px',\r\n paddingLeft: '16px',\r\n paddingBottom: '8px',\r\n gridRow: '1',\r\n '& .recommendation-summary-header': {\r\n display: 'grid',\r\n gridTemplateColumns: '24px min-content auto 40px',\r\n '-ms-grid-columns': '24px auto 1fr 15px',\r\n gridTemplateRows: 24,\r\n alignItems: 'center',\r\n '& .summary-header-icon': {\r\n gridColumn: '1',\r\n justifySelf: 'stretch',\r\n alignSelf: 'center',\r\n position: 'relative',\r\n borderRadius: '50%',\r\n width: 24,\r\n height: 24,\r\n '& span': {\r\n color: palette.white,\r\n position: 'absolute',\r\n fontSize: 13,\r\n left: '25%',\r\n right: '25%',\r\n top: '25%',\r\n bottom: '25%',\r\n },\r\n },\r\n '& .summary-header-title': {\r\n padding: '2px 0 2px 8px',\r\n gridColumn: '2',\r\n fontSize: 14,\r\n color: '#323130',\r\n fontWeight: '500',\r\n whiteSpace: 'nowrap',\r\n },\r\n '& .summary-header-label': {\r\n alignSelf: 'center',\r\n marginLeft: 8,\r\n gridColumn: '3',\r\n fontSize: 12,\r\n background: '#EFF6FC',\r\n border: '1px solid #FFFFFF',\r\n boxSizing: 'border-box',\r\n borderRadius: 12,\r\n width: 48,\r\n padding: '0 10px 0 10px',\r\n },\r\n '& .summary-header-menu': {\r\n gridColumn: '4',\r\n justifySelf: 'right',\r\n '& .toggle-context-menu': {\r\n cursor: 'pointer',\r\n\r\n '& button': {\r\n background: 'none',\r\n border: 'none',\r\n margin: 0,\r\n padding: 0,\r\n },\r\n },\r\n },\r\n '& .summary-context-menu': {\r\n '& .bingads-popover': {\r\n background: '#fff',\r\n border: '1px solid #ddd',\r\n boxShadow: '3px 3px 4px #ddd',\r\n top: 'inherit !important',\r\n left: 'inherit !important',\r\n '& >ul': {\r\n minWidth: 170,\r\n listStyle: 'none',\r\n margin: '0',\r\n padding: '0',\r\n '& button': {\r\n margin: '0',\r\n padding: '7px 10px',\r\n color: '#333',\r\n fontWeight: 'normal',\r\n textAlign: 'left',\r\n '&[disabled]': {\r\n opacity: 0.5,\r\n },\r\n '&:hover': {\r\n textDecoration: 'none',\r\n background: '#e5e5e5',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '& .summary-summary': {\r\n paddingRight: '24px',\r\n paddingLeft: '24px',\r\n paddingTop: '24px',\r\n borderTop: 'solid 1px #dddddd',\r\n gridRow: '2',\r\n gridTemplateRows: 'repeat(2,auto)',\r\n '& .summary-banner': {\r\n background: '#DDDDDD',\r\n gridRow: '1',\r\n '& .summary-banner-title': {\r\n fontWeight: 'bold',\r\n color: '#333333',\r\n height: 30,\r\n padding: '0px 20px',\r\n },\r\n },\r\n '& .summary-summary-content': {\r\n borderBottom: 'solid 1px #dddddd',\r\n display: 'grid',\r\n gridRow: '3',\r\n paddingBottom: '38px',\r\n gridTemplateColumns: '125px 16px',\r\n '& .summary-info': {\r\n gridColumn: '3',\r\n '& .summary-description': {\r\n fontSize: 16,\r\n lineHeight: '22px',\r\n fontWeight: 'bold',\r\n color: '#323130',\r\n },\r\n '& .summary-pitching': {\r\n fontSize: 12,\r\n lineHeight: '16px',\r\n fontWeight: 'normal',\r\n color: '#797775',\r\n marginTop: 8,\r\n '& > span': {\r\n ...underlineLinkStyle({ palette }),\r\n },\r\n },\r\n },\r\n },\r\n '& .summary-estimates': {\r\n gridColumn: '1',\r\n },\r\n },\r\n '& .summary-sample': {\r\n paddingRight: '16px',\r\n paddingLeft: '16px',\r\n paddingTop: '16px',\r\n gridRow: '3',\r\n '& .recommendation-sample': {\r\n '& .sample-insight-title': {\r\n fontSize: 13,\r\n fontWeight: 'bold',\r\n color: '#323130',\r\n },\r\n '& .sample-insight': {\r\n margin: '10px 0 0 0',\r\n fontSize: 13,\r\n fontWeight: 'normal',\r\n color: '#666666',\r\n },\r\n '& .sample-visual, & .sample-action-table': {\r\n margin: '15px 0 0 0',\r\n },\r\n '& .sample-horizontal-separator': {\r\n margin: '15px 0',\r\n borderTop: '1px solid #ececec',\r\n },\r\n '& .sample-action-title': {\r\n fontSize: 13,\r\n fontWeight: 'normal',\r\n color: '#333333',\r\n },\r\n '& .sample-more-recommendations': {\r\n margin: '15px 0 0 0',\r\n },\r\n '& .sample-visual .MicrosoftMap': {\r\n width: 'inherit !important',\r\n height: 'inherit !important',\r\n '& .InfoboxCustom': {\r\n pointerEvents: 'auto',\r\n /* background-color: #FFFFFF; */\r\n /* background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), rgba(255, 255, 255, 0.25); */\r\n backgroundBlendMode: 'normal, luminosity',\r\n backdropFilter: 'blur(60px)',\r\n boxShadow: '0px 1.2px 3.6px rgba(0, 0, 0, 0.18), 0px 6.4px 14.4px rgba(0, 0, 0, 0.22)',\r\n padding: '10px',\r\n /* font-family: 'Segoe UI'; */\r\n '& .infobox-title': {\r\n fontSize: '14px',\r\n fontWeight: 600,\r\n },\r\n },\r\n },\r\n // '& .sample-visual': {\r\n // '& .advisor-chart .vnext-legend-labels-container': {\r\n // display: 'none',\r\n // },\r\n // },\r\n },\r\n ...crudAdStyle({ palette }), // TODO: remove duplicated crudAdStyle if toolbar style conflict is resolved\r\n '& .ad-preview-header': {\r\n padding: '15px 0 15px 0',\r\n },\r\n '& .recommendation-suggested-ads-column': {\r\n padding: '10px 10px 10px 10px',\r\n background: '#f5f5f5',\r\n '& .recommendation-summary-ad-preview': {\r\n width: '100%',\r\n padding: '15px 15px 15px 15px',\r\n background: palette.white,\r\n border: 'solid 1px #dddddd',\r\n boxShadow: '3px 3px 4px #dddddd',\r\n },\r\n },\r\n },\r\n '& .summary-footer': {\r\n paddingBottom: '16px',\r\n paddingRight: '16px',\r\n paddingLeft: '16px',\r\n margin: '20px 0 0 0',\r\n gridRow: '4',\r\n '& .primary-button': {\r\n '& button': {\r\n fontFamily: 'Segoe UI, Helvetica, sans-serif',\r\n fontWeight: 'bold',\r\n fontSize: 13,\r\n backgroundColor: palette.themePrimary,\r\n color: palette.white,\r\n padding: '5px 10px',\r\n margin: '0 8px 0 0',\r\n '&:hover': {\r\n backgroundColor: '#006464',\r\n },\r\n },\r\n },\r\n '& .secondary-button': {\r\n '& buuton': {\r\n fontFamily: 'Segoe UI, Helvetica, sans-serif',\r\n fontWeight: 'bold',\r\n fontSize: 13,\r\n backgroundColor: palette.white,\r\n color: '#000000',\r\n padding: '5px 10px',\r\n border: '1px black solid',\r\n margin: '0 8px 0 0',\r\n '&:hover': {\r\n backgroundColor: '#a8a8a8',\r\n },\r\n },\r\n },\r\n },\r\n '& .btn-default': {\r\n position: 'absolute',\r\n fontFamily: 'Segoe UI, Helvetica, sans-serif',\r\n fontSize: 14,\r\n padding: '5px 10px',\r\n margin: '0 5px',\r\n borderRadius: '2px',\r\n height: '32px',\r\n boxSizing: 'border-box',\r\n border: '1px solid #8A8886',\r\n fontWeight: 'bold',\r\n '&[disabled]': {\r\n opacity: 0.5,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n // recommendation visual\r\n '& .action-table': {\r\n marginTop: 10,\r\n fontFamily: '\\'Segoe UI\\', Arial, sans-serif',\r\n '& thead': {\r\n '& th': {\r\n fontSize: 12,\r\n color: '#323130',\r\n fontWeight: 'bold',\r\n paddingBottom: '16px',\r\n },\r\n },\r\n '& tbody': {\r\n '& th': {\r\n fontSize: 12,\r\n color: '#323130',\r\n },\r\n },\r\n '& tr td:last-child': { // will the impressions ever be negative?\r\n color: '#107C10 !important',\r\n },\r\n '& tr td:not(:last-child)': {\r\n color: '#333333',\r\n },\r\n '& td': {\r\n fontSize: 13,\r\n fontWeight: 'normal',\r\n paddingBottom: 5,\r\n verticalAlign: 'top',\r\n 'word-break': 'break-word',\r\n '& .progress-bar-with-right-label': {\r\n marginLeft: 10,\r\n alignItems: 'center',\r\n display: 'flex',\r\n '& .progress': {\r\n height: 7,\r\n marginRight: 5,\r\n gridRow: '1',\r\n gridColumn: '1',\r\n width: '100%',\r\n marginBottom: 0,\r\n '& .progress-bar': {\r\n backgroundColor: '#0078D4',\r\n },\r\n },\r\n '& .right-label': {\r\n marginLeft: '7px',\r\n },\r\n },\r\n },\r\n },\r\n '& .navbar-nav': {\r\n '& .recommendation-download': {\r\n paddingLeft: 20,\r\n paddingTop: 6,\r\n marginBottom: '-15px',\r\n '& #button-download': {\r\n background: '#FFFFFF',\r\n border: '1px solid #8A8886',\r\n boxSizing: 'border-box',\r\n borderRadius: '2px',\r\n fontSize: '14px',\r\n marginLeft: '770px',\r\n zIndex: '1',\r\n },\r\n },\r\n },\r\n '& .nav-pills': {\r\n '& li': {\r\n border: '1px solid #505050',\r\n '&.active, &.active a': {\r\n backgroundColor: '#e7f0f6',\r\n color: '#666',\r\n fontWeight: 'bold',\r\n },\r\n '&:nth-child(1)': {\r\n borderRight: '0',\r\n },\r\n '& a': {\r\n padding: '5px 20px 4px 20px',\r\n border: 'none',\r\n fontWeight: 'normal',\r\n },\r\n },\r\n },\r\n '& .filter-editor': {\r\n '& .selector-container': {\r\n '& button': {\r\n border: '1px solid #BBB',\r\n padding: '3px 5px 5px 5px',\r\n textAlign: 'right',\r\n },\r\n },\r\n '& .selector-v2': {\r\n width: 400,\r\n },\r\n },\r\n\r\n });\r\n","import CircleSolidSmall from '../media/CircleSolidSmall.svg';\r\nimport DiamondSolidSmall from '../media/DiamondSolidSmall.svg';\r\nimport TriangleDownSolidSmall from '../media/TriangleDownSolidSmall.svg';\r\nimport TriangleUpSolidSmall from '../media/TriangleUpSolidSmall.svg';\r\nimport SquareSolidSmall from '../media/SquareSolidSmall.svg';\r\n\r\nexport const competitionCardStyle = {\r\n '.competition-card': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n paddingBottom: 16,\r\n '& .vnext-legend-labels-container': {\r\n paddingLeft: 10,\r\n paddingTop: 10,\r\n\r\n '& ul': {\r\n display: 'flex',\r\n listStyle: 'none',\r\n paddingLeft: 0,\r\n\r\n '& li': {\r\n minWidth: 60,\r\n\r\n '& .legend-label': {\r\n height: 20,\r\n paddingLeft: '15PX !important',\r\n backgroundRepeat: 'no-repeat',\r\n backgroundPosition: 'left',\r\n backgroundSize: '12px 20px',\r\n marginRight: 5,\r\n marginLeft: 5,\r\n marginTop: 1,\r\n cursor: 'pointer',\r\n textOverflow: 'ellipsis',\r\n overflow: 'hidden',\r\n whiteSpace: 'nowrap',\r\n },\r\n\r\n '& .legend-label.disabled': {\r\n opacity: '50%',\r\n },\r\n },\r\n '& li:nth-child(1) .legend-label': {\r\n backgroundImage: `url(\"${CircleSolidSmall}\")`,\r\n },\r\n '& li:nth-child(2) .legend-label': {\r\n backgroundImage: `url(\"${DiamondSolidSmall}\")`,\r\n },\r\n '& li:nth-child(3) .legend-label': {\r\n backgroundImage: `url(\"${TriangleDownSolidSmall}\")`,\r\n },\r\n '& li:nth-child(4) .legend-label': {\r\n backgroundImage: `url(\"${TriangleUpSolidSmall}\")`,\r\n },\r\n '& li:nth-child(5) .legend-label': {\r\n backgroundImage: `url(\"${SquareSolidSmall}\")`,\r\n },\r\n },\r\n },\r\n '& .highcharts-container': {\r\n overflow: 'visible !important',\r\n\r\n '& .chart-tooltip': {\r\n fontFamily: '\"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif',\r\n fontSize: 14,\r\n position: 'absolute',\r\n whiteSpace: 'nowrap',\r\n color: 'rgb(51, 51, 51)',\r\n padding: 15,\r\n display: 'block',\r\n boxShadow: '0 3.2px 7.2px 0 rgba(0,0,0,.132), 0 0.6px 1.8px 0 rgba(0,0,0,.108)',\r\n backgroundColor: 'rgba(255, 255, 255, 0.95)',\r\n '@supports (backdrop-filter: blur(60px))': {\r\n backdropFilter: 'blur(60px)',\r\n backgroundColor: 'rgba(255, 255, 255, 0.25)',\r\n },\r\n\r\n '& .segment-wrapper': {\r\n marginBottom: 10,\r\n },\r\n\r\n '& .tooltip-name': {\r\n marginLeft: 6,\r\n maxWidth: 400,\r\n wordWrap: 'break-word',\r\n whiteSpace: 'normal',\r\n },\r\n },\r\n },\r\n },\r\n '.competition-card .selector-container': {\r\n float: 'left',\r\n marginBottom: 12,\r\n },\r\n '.competition-card .competition_action .competition_clickLink': {\r\n flex: '0 0 auto',\r\n },\r\n '.competition-card .competition-graph': {\r\n flex: '1',\r\n },\r\n '.competition-card .tile-content .error-msg': {\r\n paddingTop: 100,\r\n display: 'flex',\r\n width: '100%',\r\n justifyContent: 'center',\r\n },\r\n '.competition-card .competition-empty': {\r\n height: 234,\r\n textAlign: 'center',\r\n display: 'inline-block',\r\n width: '100%',\r\n },\r\n '.competition-card .competition-empty .competition-empty-text': {\r\n position: 'relative',\r\n top: '50%',\r\n W: 'translateY(-50%)',\r\n M: 'translateY(-50%)',\r\n transform: 'translateY(-50%)',\r\n },\r\n '.competition-card-in-toolbar': {\r\n order: '2',\r\n margin: '0 5px 0 10px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n '.competition-card .selector-container, .competition-card-in-toolbar .selector-container': {\r\n lineHeight: 'normal !important',\r\n fontWeight: '400',\r\n fontSize: '14px !important',\r\n },\r\n '.competition-card .selector-container .btn, .competition-card-in-toolbar .selector-container .btn': {\r\n border: '0',\r\n padding: 1,\r\n fontWeight: 'normal',\r\n },\r\n '.competition-card .selector-container .truncated, .competition-card-in-toolbar .selector-container .truncated': {\r\n marginRight: 5,\r\n },\r\n '.competition-card .domain-selector-header, .competition-card-in-toolbar .domain-selector-header': {\r\n paddingLeft: 10,\r\n paddingRight: 10,\r\n paddingTop: 10,\r\n },\r\n '.selector-v2': {\r\n width: 300,\r\n padding: '0',\r\n },\r\n '.selector-v2 .selector__filter': {\r\n padding: 10,\r\n },\r\n '.selector-v2 .selector__main': {\r\n width: '100%',\r\n },\r\n '.selector-v2 .selector__filter .search-box__input[type=\"text\"]': {\r\n width: '100%',\r\n },\r\n '.selector-v2 .selector__data-host': {\r\n position: 'relative',\r\n minHeight: 40,\r\n },\r\n '.selector-v2 .selector__data-progress-backdrop': {\r\n backgroundColor: 'white',\r\n bottom: '0',\r\n left: '0',\r\n opacity: '0.8',\r\n position: 'absolute',\r\n right: '0',\r\n top: '0',\r\n },\r\n '.selector-v2 .selector__data-progress-overlay': {\r\n backgroundColor: 'white',\r\n height: 40,\r\n left: '50%',\r\n lineHeight: '40px',\r\n marginLeft: -60,\r\n marginTop: -20,\r\n overflowX: 'hidden',\r\n overflowY: 'hidden',\r\n position: 'absolute',\r\n textAlign: 'center',\r\n textOverflow: 'ellipsis',\r\n top: '50%',\r\n width: 120,\r\n whiteSpace: 'pre',\r\n },\r\n '.selector-v2 .selector__data-progress-overlay span': {\r\n verticalAlign: 'middle',\r\n },\r\n '.selector-v2 .selector__data': {\r\n maxHeight: 360,\r\n overflowY: 'auto',\r\n position: 'relative',\r\n },\r\n '.selector-v2 .selector__data-progress-overlay .progress__icon': {\r\n display: 'inline-block',\r\n backgroundRepeat: 'no-repeat',\r\n width: 40,\r\n height: 30,\r\n },\r\n '.selector-v2 .selector__grid-host .table.grid': {\r\n marginBottom: 0,\r\n cursor: 'pointer',\r\n overflow: 'hidden',\r\n },\r\n '.selector-v2 .selector__grid-host .table.grid > tbody > tr > td.table__cell--icon': {\r\n width: 30,\r\n paddingLeft: 7,\r\n },\r\n '.selector-v2 .selector__grid-host .table.grid > tbody > tr:hover': {\r\n backgroundColor: '#f3f2f1',\r\n },\r\n '.selector-v2 .selector__grid-host .table.grid > thead > tr:hover': {\r\n backgroundColor: '#f3f2f1',\r\n },\r\n '.selector-v2 .selector__grid-host td': {\r\n whiteSpace: 'pre',\r\n },\r\n '.selector-v2 .selector__list-checkbox, .selector-v2 .column-tri-state-checkbox': {\r\n height: '20px',\r\n width: '20px',\r\n '& > span:after': {\r\n display: 'inline-block',\r\n backgroundColor: '#fff',\r\n border: '1px solid rgba(155, 155, 155, 0.57)',\r\n borderRadius: '2px',\r\n color: 'transparent',\r\n content: '\"\\\\E73E\"',\r\n height: '20px',\r\n width: '20px',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontSize: '16px',\r\n fontWeight: '400',\r\n paddingTop: '1px',\r\n textAlign: 'center',\r\n },\r\n '& > span.glyphicon-ok:before': {\r\n content: '\"\" !important',\r\n },\r\n '& > span.glyphicon-ok:after': {\r\n content: '\"\\\\E73E\"',\r\n backgroundColor: '#0078d4',\r\n borderColor: '#0078d4',\r\n color: '#fff',\r\n },\r\n },\r\n '.selector-v2 .selector__no-data-message, .selector-v2 .selector__progress': {\r\n lineHeight: '38px',\r\n minHeight: 40,\r\n paddingLeft: 10,\r\n },\r\n '.selector-v2 .selector__no-data-message span, .selector-v2 .selector__progress span': {\r\n verticalAlign: 'middle',\r\n },\r\n '.selector-v2 .selector__no-data-message .progress__icon, .selector-v2 .selector__progress .progress__icon': {\r\n display: 'inline-block',\r\n backgroundRepeat: 'no-repeat',\r\n width: 40,\r\n height: 30,\r\n marginRight: 10,\r\n },\r\n '.selector-v2 .selector__filter-pill': {\r\n paddingLeft: 10,\r\n marginTop: 10,\r\n },\r\n '.selector-v2 .selector__filter-pill .pill-control': {\r\n display: 'inline-block',\r\n marginBottom: '0',\r\n verticalAlign: 'middle',\r\n },\r\n '.selector-v2 .selector__filter-pill .pill-control__list--links': {\r\n listStyle: 'none',\r\n marginBottom: '0',\r\n paddingLeft: '0',\r\n },\r\n '.selector-v2 .selector__filter-pill .pill-control__list-item--links': {\r\n float: 'left',\r\n marginLeft: 7,\r\n },\r\n '.selector-v2 .selector__filter-pill .pill-control__list-item--links a': {\r\n textDecoration: 'none',\r\n },\r\n '.selector-v2 .selector__filter-pill-label': {\r\n verticalAlign: 'middle',\r\n },\r\n '.selector-v2 .search-box-v2 .search-box__input-group': {\r\n position: 'relative',\r\n overflow: 'hidden',\r\n },\r\n '.selector-v2 .search-box-v2 .search-box__input': {\r\n padding: '3px 8px',\r\n paddingLeft: 33,\r\n border: '1px solid #bbbbbb',\r\n display: 'block',\r\n width: '100%',\r\n fontSize: '1em',\r\n '&:focus, &:hover': {\r\n border: '1px #0078d4 solid',\r\n },\r\n },\r\n '.selector-v2 .search-box-v2 .search-box__icon': {\r\n position: 'absolute',\r\n left: 6,\r\n fontSize: 12,\r\n color: '#605e5c',\r\n fontFamily: '\"MsAds MDL2 Assets\"',\r\n '&:hover': {\r\n cursor: 'pointer',\r\n },\r\n '&:before': {\r\n display: 'inline-block',\r\n fontWeight: 'normal',\r\n fontStyle: 'normal',\r\n textDecoration: 'inherit',\r\n speak: 'none',\r\n fontVariant: 'normal',\r\n textTransform: 'none',\r\n verticalAlign: 'top',\r\n lineHeight: 1,\r\n WebkitFontSmoothing: 'antialiased',\r\n MozOsxFontSmoothing: 'grayscale',\r\n content: '\"\\\\E721\"',\r\n fontSize: 14,\r\n paddingTop: 4,\r\n },\r\n overflow: 'visible !important',\r\n textDecoration: 'none !important',\r\n background: 'none !important',\r\n top: 0,\r\n marginTop: 5,\r\n },\r\n '.selector-v2 .search-box-v2 .filter_search_icon_small': {\r\n '&:before': {\r\n fontSize: '14px',\r\n },\r\n height: '15px !important',\r\n display: 'inline-block !important',\r\n verticalAlign: 'text-top',\r\n marginTop: '5px',\r\n },\r\n};\r\n","import { alertStyle } from './shared-styles-from-theme-fluent';\r\n\r\nexport const getInlineDownloadStyle = ({ palette = {}, iconFontFamily = 'MsAds MDL2 Assets' }) => ({\r\n '& .inline-download-form, & .inlinereportdownload-panel': {\r\n '& .dropdown-toggle': {\r\n minWidth: '180px',\r\n border: `1px solid ${palette.neutralSecondary}`,\r\n paddingLeft: '8px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n paddingRight: '0',\r\n alignItems: 'center',\r\n fontWeight: 'normal',\r\n '& .caret': {\r\n paddingLeft: '4px',\r\n paddingRight: '4px',\r\n },\r\n },\r\n '& .inline-download-start-time-editor, & .inline-download-end-time-editor': {\r\n width: 180,\r\n },\r\n '& .form-group > label': {\r\n textAlign: 'left',\r\n width: '100%',\r\n paddingLeft: '0',\r\n paddingBottom: '8px',\r\n },\r\n '& .form-group > div': {\r\n paddingLeft: '0',\r\n },\r\n '& .btn+.btn': {\r\n marginLeft: '7px',\r\n },\r\n ...alertStyle({ palette }),\r\n },\r\n '& .inline-download-form': {\r\n '& .checkbox input[type=\"checkbox\"]': {\r\n float: 'left',\r\n },\r\n '& .inline-download-form__save-as-custom-report input[type=text]': {\r\n height: 32,\r\n width: 180,\r\n paddingLeft: 8,\r\n marginBottom: 2,\r\n },\r\n '& .checkbox > label :nth-child(n+3)': {\r\n marginLeft: '8px',\r\n },\r\n '& .inline-download-email-frequency-editor': {\r\n paddingLeft: '28px',\r\n },\r\n '& .iconba-Forward': {\r\n color: palette.white,\r\n backgroundColor: palette.themeDark,\r\n },\r\n '& .email-notification-delivery-option-editor__search-box': {\r\n marginBottom: '5px',\r\n },\r\n '& .email-notification-delivery-option-editor__user-list': {\r\n border: `1px solid ${palette.neutralSecondary}`,\r\n padding: '10px',\r\n overflowY: 'auto',\r\n maxHeight: '300px',\r\n },\r\n '& .inline-download-cron-editor': {\r\n display: 'flex',\r\n whiteSpace: 'pre',\r\n alignItems: 'center',\r\n\r\n '& .dropdown-menu': {\r\n overflow: 'auto',\r\n maxHeight: 360,\r\n },\r\n },\r\n '& .segment-row': {\r\n '&:first-child': {\r\n marginBottom: '5px',\r\n },\r\n },\r\n '& .add-target': {\r\n border: 'none',\r\n color: '#1470A5',\r\n background: 'none',\r\n padding: '0px',\r\n '&:hover': {\r\n color: '#0c4261',\r\n },\r\n },\r\n '& .add_icon': {\r\n fontFamily: iconFontFamily,\r\n fontSize: 12,\r\n marginRight: 5,\r\n '&:before': {\r\n content: '\"\\\\E710\"',\r\n },\r\n },\r\n '& .glyphicon-remove': {\r\n fontFamily: iconFontFamily,\r\n fontSize: 14,\r\n fontWeight: 'normal',\r\n '&:before': {\r\n content: '\"\\\\E711\"',\r\n },\r\n },\r\n },\r\n '& .inlinereportdownload-panel': {\r\n '& .icon-arrowdown-normal': {\r\n color: palette.neutralSecondary,\r\n fontFamily: iconFontFamily,\r\n fontSize: 12,\r\n fontWeight: 'normal',\r\n margin: '0 4px',\r\n padding: '0 4px',\r\n '&:before': {\r\n content: '\"\\\\E70D\"',\r\n },\r\n },\r\n },\r\n});\r\n","export const getInlineHelpButtonStyles = ({ palette, iconFontFamily }) => ({\r\n '& .helpbutton': {\r\n paddingTop: '2px',\r\n paddingLeft: '2px',\r\n\r\n '&::before': {\r\n content: '\"\\\\E9CE\"',\r\n fontFamily: iconFontFamily,\r\n position: 'relative',\r\n color: palette.themePrimary,\r\n verticalAlign: 'middle',\r\n },\r\n\r\n '&:focus': {\r\n outline: '1px solid',\r\n outlineColor: palette.neutralSecondary,\r\n border: 'none',\r\n color: palette.black,\r\n textDecoration: 'none',\r\n },\r\n\r\n '&:hover': {\r\n backgroundColor: palette.neutralLighter,\r\n color: palette.black,\r\n textDecoration: 'none',\r\n },\r\n\r\n '&:active': {\r\n backgroundColor: palette.neutralLight,\r\n color: palette.black,\r\n textDecoration: 'none',\r\n },\r\n },\r\n});\r\n","import {\r\n flexibleGrid,\r\n flexibleGridRow,\r\n flexibleGridColumn, flexibleGridColumnSpan,\r\n} from '@bingads-webui-campaign-react/flexible-grid-styles';\r\nimport { commonDoubleListBoxLeanStyle } from '../double-list-box-lean-style';\r\n\r\nconst pagerStyles = (components, theme) => ({\r\n '& .dlb-pager-container': {\r\n padding: 0,\r\n\r\n '& .pager': {\r\n height: 'auto',\r\n textAlign: 'unset',\r\n padding: 0,\r\n margin: 0,\r\n\r\n '& .pager-page': {\r\n marginBottom: 8,\r\n\r\n '& span': {\r\n marginLeft: 6,\r\n verticalAlign: 'baseline',\r\n },\r\n },\r\n },\r\n },\r\n ...components.paginationStyle(theme),\r\n});\r\n\r\nexport const newAdExtensionsAssociationsContainer = layout => (components, theme = {}) => ({\r\n // associations editor container\r\n '& .associations__container': {\r\n // Common bootstrap layout styles\r\n // Common panel styles\r\n '& .panel-body': {\r\n lineHeight: '19px',\r\n // marginBottom: 18,\r\n padding: 0,\r\n },\r\n\r\n // Common form styles\r\n '& .form-group': {\r\n padding: 0,\r\n margin: 0,\r\n },\r\n\r\n '& .associations-sub-title': {\r\n margin: '0 0 10px 0',\r\n fontSize: '14px',\r\n fontWeight: 'normal',\r\n },\r\n\r\n '& .associations': {\r\n marginBottom: 8,\r\n\r\n '& .extension-editor-dblist-container': {\r\n margin: 0,\r\n\r\n ...commonDoubleListBoxLeanStyle(theme),\r\n\r\n '& .doubleListBoxLean': {\r\n '& .layout-columns-container': {\r\n ...flexibleGrid(),\r\n '-ms-grid-columns': layout.layoutColumnsContainerGridTemplateColumns,\r\n gridTemplateColumns: layout.layoutColumnsContainerGridTemplateColumns,\r\n columnGap: 8,\r\n\r\n // \"Maximum selection alert\" section\r\n '& .alerts-section': {\r\n ...flexibleGridRow(1),\r\n ...flexibleGridColumn(1),\r\n ...flexibleGridColumnSpan(2),\r\n\r\n '& > div[data-bind*=\"showMaximumSelectionAlert\"]': {\r\n marginBottom: 10.5,\r\n },\r\n },\r\n\r\n // Available extensions column\r\n '& .source-items-section': {\r\n ...flexibleGridRow(2),\r\n ...flexibleGridColumn(1),\r\n\r\n display: 'flex',\r\n flexDirection: 'column',\r\n overflowY: 'hidden',\r\n\r\n '& > .filter-block': {\r\n\r\n '& .dlb-filter-alignPlaceholder': {\r\n padding: 0,\r\n position: 'relative',\r\n\r\n '& .searchbox': {\r\n\r\n '& input.searchbox-input.form-control': {\r\n border: `1px solid ${theme.palette.neutralSecondary}`,\r\n borderRadius: 0,\r\n height: 48,\r\n paddingTop: 5,\r\n paddingLeft: 48,\r\n },\r\n\r\n '& .form-control-feedback': {\r\n position: 'absolute',\r\n top: 16,\r\n left: 16,\r\n right: 'unset',\r\n width: 'unset',\r\n height: 'unset',\r\n lineHeight: '16px',\r\n pointerEvents: 'auto',\r\n\r\n '& .filter_search_icon_small': {\r\n display: 'block',\r\n fontSize: 16,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n\r\n // list\r\n '& > .list-block': {\r\n paddingBottom: 8,\r\n\r\n '& .panel-form': {\r\n border: `1px solid ${theme.palette.neutralSecondary}`,\r\n borderTop: 0,\r\n maxHeight: 311,\r\n minHeight: 311,\r\n overflowY: 'auto',\r\n '& .panel-heading': {\r\n padding: 0,\r\n marginBottom: 0,\r\n\r\n '& .panel-title': {\r\n fontSize: 14,\r\n height: 'auto',\r\n lineHeight: '36px',\r\n marginTop: 'unset',\r\n padding: [0, 8],\r\n },\r\n },\r\n\r\n '& .panel-body': {\r\n marginBottom: 0,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n '& .dlb-source-container': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n\r\n '& .dlb-selectAll': {\r\n padding: [0, 8],\r\n\r\n '& > span': {\r\n minHeight: 36,\r\n lineHeight: '36px',\r\n },\r\n\r\n '& .arrow-button.enabled': {\r\n float: 'right',\r\n marginTop: 8,\r\n marginRight: 4,\r\n },\r\n },\r\n\r\n '& .dlb-source-list': {\r\n flexGrow: 1,\r\n outline: 'none',\r\n overflowY: 'auto',\r\n\r\n '& .dlbItem': {\r\n padding: '0 8px',\r\n\r\n '& .dlbItem-actions': {\r\n float: 'right',\r\n marginTop: 8,\r\n\r\n '& .dlbItem-customAction, & .arrow-button': {\r\n textDecoration: 'none',\r\n\r\n '&:focus': {\r\n outline: 'solid 1px',\r\n outlineOffset: 2,\r\n },\r\n },\r\n\r\n '& .arrow-button.enabled': {\r\n marginLeft: 10,\r\n },\r\n },\r\n\r\n '& .dlbItem-content': {\r\n minHeight: 36,\r\n lineHeight: '36px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n\r\n '& .type-bold': {\r\n fontWeight: 600,\r\n },\r\n\r\n '& .wordwrap, .itemTemplate-text, .appListItem-text': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n },\r\n\r\n '& .itemTemplate-text': {\r\n padding: '4px 0px 2px 0px',\r\n lineHeight: '28px',\r\n\r\n '& li': {\r\n height: 32,\r\n lineHeight: '32px',\r\n\r\n '& a': {\r\n verticalAlign: 'middle',\r\n },\r\n },\r\n },\r\n\r\n '& .image-adextension-v2-item, & .image-adextension-v1-item': {\r\n width: '160px',\r\n float: 'left',\r\n position: 'relative',\r\n marginTop: '10px',\r\n '& img': {\r\n width: '150px',\r\n height: '100px',\r\n },\r\n '& .overlayText': {\r\n lineHeight: 'normal',\r\n paddingLeft: '5px',\r\n position: 'absolute',\r\n bottom: 0,\r\n width: '150px',\r\n height: '30px',\r\n fontSize: '11px',\r\n color: '#FFFFFF',\r\n opacity: 0.9,\r\n background: '#505050',\r\n },\r\n },\r\n '& .image-adextension-v2-text': {\r\n float: 'left',\r\n lineHeight: 'normal',\r\n width: '175px',\r\n textOverflow: 'ellipsis',\r\n maxWidth: '175px',\r\n paddingTop: '20px',\r\n },\r\n },\r\n },\r\n\r\n '& .k-loading-mask': {\r\n display: 'none',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n\r\n // pager\r\n ...pagerStyles(components, theme),\r\n },\r\n\r\n // Selected extensions column\r\n '& .selected-items-section': {\r\n ...flexibleGridRow(2),\r\n ...flexibleGridColumn(2),\r\n\r\n marginRight: 0,\r\n padding: 0,\r\n\r\n // list\r\n '& .list-block': {\r\n paddingBottom: 8,\r\n\r\n '& .panel-form': {\r\n padding: 0,\r\n border: `1px solid ${theme.palette.neutralSecondary}`,\r\n minHeight: 359,\r\n maxHeight: 359,\r\n overflowY: 'auto',\r\n '& .panel-heading': {\r\n padding: 0,\r\n marginBottom: 0,\r\n\r\n '& .panel-title': {\r\n fontSize: 14,\r\n height: 'auto',\r\n lineHeight: '36px',\r\n marginTop: 'unset',\r\n padding: [0, 8],\r\n },\r\n },\r\n\r\n '& .panel-body': {\r\n marginBottom: 0,\r\n\r\n '& .dlb-selected-container': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n '& .dlb-deselectAll': {\r\n padding: '0 8px',\r\n\r\n '& .arrow-button.remove': {\r\n marginRight: 6,\r\n marginLeft: 10,\r\n marginTop: 8,\r\n float: 'right',\r\n padding: 0,\r\n },\r\n\r\n '& > span': {\r\n minHeight: 36,\r\n lineHeight: '36px',\r\n },\r\n },\r\n\r\n '& .dlb-selected-list': {\r\n flexGrow: 1,\r\n overflowY: 'auto',\r\n\r\n '& .dlbItem': {\r\n padding: [0, 8],\r\n\r\n '&.k-state-selected a': {\r\n color: '#006cbe', // Fixing A11Y contrast issue. Original link color was #0078d4\r\n },\r\n\r\n '& .arrow-button': {\r\n textDecoration: 'none',\r\n\r\n '&:focus': {\r\n outline: 'solid 1px',\r\n outlineOffset: 2,\r\n },\r\n },\r\n\r\n '& .arrow-button.remove': {\r\n marginRight: 10,\r\n marginTop: 8,\r\n float: 'right',\r\n padding: 0,\r\n },\r\n\r\n '& .dlbItem-actions': {\r\n float: 'right',\r\n marginTop: 8,\r\n\r\n '& .dlbItem-customAction': {\r\n textDecoration: 'none',\r\n\r\n '&:focus': {\r\n outline: 'solid 1px',\r\n outlineOffset: 2,\r\n },\r\n },\r\n },\r\n\r\n '& .dlbItem-content': {\r\n minHeight: 36,\r\n lineHeight: '36px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n\r\n '& .type-bold': {\r\n fontWeight: 600,\r\n },\r\n\r\n '& .wordwrap, .itemTemplate-text, .appListItem-text': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n },\r\n\r\n '& .itemTemplate-text': {\r\n '& li': {\r\n height: 32,\r\n lineHeight: '32px',\r\n\r\n '& a': {\r\n verticalAlign: 'middle',\r\n },\r\n },\r\n },\r\n\r\n '& .image-adextension-v2-item, & .image-adextension-v1-item': {\r\n width: '160px',\r\n float: 'left',\r\n position: 'relative',\r\n marginTop: '10px',\r\n '& img': {\r\n width: '150px',\r\n height: '100px',\r\n },\r\n '& .overlayText': {\r\n lineHeight: 'normal',\r\n paddingLeft: '5px',\r\n position: 'absolute',\r\n bottom: 0,\r\n width: '150px',\r\n height: '30px',\r\n fontSize: '11px',\r\n color: '#FFFFFF',\r\n opacity: 0.9,\r\n background: '#505050',\r\n },\r\n },\r\n '& .image-adextension-v2-text': {\r\n float: 'left',\r\n lineHeight: 'normal',\r\n width: '175px',\r\n textOverflow: 'ellipsis',\r\n maxWidth: '175px',\r\n paddingTop: '20px',\r\n },\r\n },\r\n },\r\n\r\n '& .k-loading-mask': {\r\n display: 'none',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n\r\n // pager\r\n ...pagerStyles(components, theme),\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .create-link-Container': {\r\n display: 'inline-block',\r\n margin: '1px',\r\n '&:focus-within': {\r\n outline: `1px solid ${theme.palette.neutralSecondary}`,\r\n },\r\n\r\n '& span': {\r\n color: theme.palette.themePrimary,\r\n },\r\n\r\n '& a.btn-create': {\r\n\r\n '&:hover, &:active': {\r\n textDecoration: 'underline',\r\n },\r\n\r\n '&:focus': {\r\n textDecoration: 'none',\r\n },\r\n },\r\n },\r\n },\r\n\r\n // Save bar\r\n '& .panel-body .save-bar': {\r\n paddingTop: 10,\r\n borderTop: `1px solid ${theme.palette.neutralLight}`,\r\n },\r\n },\r\n});\r\n","import { newAdExtensionsAssociationsContainer } from './new-ad-extensions-associations-container-styles';\r\n\r\nexport const adExtensionsAssociationsContainerLayoutType = {\r\n ExpandHorizontallyToContainer: 'ExpandHorizontallyToContainer',\r\n FixedListBoxWidth: 'FixedListBoxWidth',\r\n};\r\n\r\nconst adExtensionsAssociationsContainerLayout = {\r\n [adExtensionsAssociationsContainerLayoutType.ExpandHorizontallyToContainer]: () => ({\r\n type: adExtensionsAssociationsContainerLayoutType.ExpandHorizontallyToContainer,\r\n layoutColumnsContainerGridTemplateColumns: 'minmax(0px, 1fr) minmax(0px, 1fr)',\r\n }),\r\n [adExtensionsAssociationsContainerLayoutType.FixedListBoxWidth]: ({ listBoxWidthPx }) => ({\r\n type: adExtensionsAssociationsContainerLayoutType.FixedListBoxWidth,\r\n layoutColumnsContainerGridTemplateColumns: `${listBoxWidthPx}px ${listBoxWidthPx}px`,\r\n }),\r\n};\r\n\r\nexport const adExtensionsAssociationsContainer =\r\n (layoutType = adExtensionsAssociationsContainerLayoutType.ExpandHorizontallyToContainer) =>\r\n newAdExtensionsAssociationsContainer(adExtensionsAssociationsContainerLayout[layoutType]());\r\n","import _ from 'underscore';\r\nimport React, { useContext } from 'react';\r\n\r\nexport const CouponContext = React.createContext({\r\n coupon: {},\r\n updateCoupon: _.noop,\r\n resetCouponStore: _.noop,\r\n isSignUp: false,\r\n});\r\nexport const useCouponContext = () => useContext(CouponContext);\r\n","module.exports = __webpack_public_path__ + \"static/media/rebranding-website-img.cca54b99.svg\";"],"sourceRoot":""}