\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