\r\n \r\n {componentsStrings.brandName}\r\n \r\n \r\n {componentsStrings.brandUrl}\r\n \r\n
\r\n \r\n \r\n {componentsStrings.saveButtonText}\r\n \r\n \r\n {componentsStrings.cancelButtonText}\r\n \r\n
\r\n \r\n {isSVGIcon ? (
\r\n \r\n
\r\n \r\n {\r\n isNewFeature ?\r\n {description}
\r\n {i18n.getString(_TL_('New'))}
\r\n : ''\r\n }\r\n {\r\n showFACBadge && FACInfo ?\r\n {i18n.getString(_TL_('{{CouponValue}} off'), { CouponValue: FACInfo.CouponValueWithCurrency })}
\r\n : ''\r\n }\r\n \r\n {this.renderObjectiveItemContent()}\r\n
\r\n );\r\n }\r\n}\r\n\r\nObjectiveItem.propTypes = {\r\n classes: PropTypes.shape(mapObject(\r\n getObjectiveItemStyles({}, {}),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n id: PropTypes.string.isRequired,\r\n iconName: PropTypes.string.isRequired,\r\n descriptionLine: PropTypes.string.isRequired,\r\n helpId: PropTypes.string,\r\n onClick: PropTypes.func,\r\n isSVGIcon: PropTypes.bool,\r\n 'aria-label': PropTypes.string,\r\n isSelected: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n helpArialLabel: PropTypes.string,\r\n isNewFeature: PropTypes.bool,\r\n showFACBadge: PropTypes.bool,\r\n FACInfo: PropTypes.shape({\r\n CouponValueWithCurrency: PropTypes.string,\r\n }),\r\n ariaItemSize: PropTypes.number.isRequired,\r\n ariaItemIndex: PropTypes.number.isRequired,\r\n};\r\n\r\nObjectiveItem.defaultProps = {\r\n helpId: null,\r\n onClick: null,\r\n isSVGIcon: false,\r\n 'aria-label': '',\r\n isSelected: false,\r\n helpArialLabel: null,\r\n isNewFeature: false,\r\n showFACBadge: false,\r\n FACInfo: null,\r\n};\r\n\r\nconst wrap = compose(\r\n TempComponent => withDefaultStyles(TempComponent, getObjectiveItemStyles),\r\n withI18nConsumer\r\n);\r\n\r\nexport const StyledObjectiveItem = wrap(ObjectiveItem);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mapObject, constant } from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getActionListStyles } from '../styles';\r\nimport { StyledObjectiveItem } from './objective-item';\r\n\r\nconst ActionList = ({\r\n classes,\r\n title,\r\n actionItems,\r\n}) => {\r\n const ariaLabelId = `campaignCreationActionListTitle-${Math.floor(Math.random() * 10000)}`;\r\n\r\n return (\r\n \r\n {title && (\r\n
\r\n );\r\n};\r\n\r\nActionList.propTypes = {\r\n classes: PropTypes.shape(mapObject(\r\n getActionListStyles({}, {}),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n title: PropTypes.string,\r\n actionItems: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n iconName: PropTypes.string.isRequired,\r\n descriptionLine: PropTypes.string.isRequired,\r\n helpId: PropTypes.string,\r\n onClick: PropTypes.func,\r\n 'aria-label': PropTypes.string,\r\n isSelected: PropTypes.bool,\r\n })).isRequired,\r\n};\r\n\r\nActionList.defaultProps = {\r\n title: null,\r\n};\r\n\r\nexport const StyledActionList = withDefaultStyles(ActionList, getActionListStyles);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Callout, DirectionalHint } from '@fluentui/react';\r\nimport { mapObject, constant, bind } from 'underscore';\r\nimport { Row } from '@bingads-webui-react/layout';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { getAdTypeItemStyles } from '../styles';\r\nimport { StyledSelectableItem } from './selectable-item';\r\n\r\nclass AdTypeItem extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isSmartShoppingWarningVisible: false,\r\n isPerfMaxWarningVisible: false,\r\n };\r\n this.warningMessageTarget = React.createRef();\r\n }\r\n\r\n handleAdTypeClick = () => {\r\n const {\r\n disabled, onSelect, id, itemId, dealDetails,\r\n } = this.props;\r\n\r\n if (disabled) {\r\n return;\r\n }\r\n\r\n if (itemId === 'MediaPackageCampaign') {\r\n onSelect(dealDetails);\r\n\r\n return;\r\n }\r\n onSelect(id);\r\n };\r\n\r\n showWarning(isShowWarning) {\r\n if (isShowWarning && this.props.isSmartShoppingWarningVisible) {\r\n this.setState({\r\n isSmartShoppingWarningVisible: true,\r\n });\r\n }\r\n if (isShowWarning && this.props.isPerfMaxWarningVisible) {\r\n this.setState({\r\n isPerfMaxWarningVisible: true,\r\n });\r\n }\r\n if (!isShowWarning && this.state.isSmartShoppingWarningVisible) {\r\n this.setState({\r\n isSmartShoppingWarningVisible: false,\r\n });\r\n }\r\n if (!isShowWarning && this.state.isPerfMaxWarningVisible) {\r\n this.setState({\r\n isPerfMaxWarningVisible: false,\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n smartShoppingWarningMessage, disabled, classes, title, description, img, id, isSelected, audienceAdsPolicy, period, 'aria-label': ariaLabel, ariaItemSize, ariaItemIndex, i18n, isNewFeature, helpTopicId,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {title}\r\n
\r\n )}\r\n\r\n {actionItems.map((item, index) => (\r\n
\r\n \r\n \r\n {\r\n isNewFeature ?\r\n \r\n {title}\r\n
\r\n {\r\n img &&\r\n \r\n 
\r\n
\r\n }\r\n \r\n \r\n {description}\r\n {\r\n audienceAdsPolicy ?\r\n {audienceAdsPolicy}\r\n : ''\r\n }\r\n {period}\r\n {\r\n helpTopicId ?\r\n
\r\n \r\n {this.state.isSmartShoppingWarningVisible && smartShoppingWarningMessage ? (\r\n \r\n {smartShoppingWarningMessage}\r\n \r\n ) : null}\r\n {this.state.isPerfMaxWarningVisible && smartShoppingWarningMessage ? (\r\n \r\n {smartShoppingWarningMessage}\r\n \r\n ) : null}\r\n
\r\n );\r\n }\r\n}\r\n\r\nAdTypeItem.propTypes = {\r\n isSmartShoppingWarningVisible: PropTypes.bool,\r\n isPerfMaxWarningVisible: PropTypes.bool,\r\n smartShoppingWarningMessage: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.element,\r\n ]),\r\n classes: PropTypes.shape(mapObject(\r\n getAdTypeItemStyles({}, {}),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n id: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n img: PropTypes.string.isRequired,\r\n helpTopicId: PropTypes.string,\r\n onSelect: PropTypes.func.isRequired,\r\n isSelected: PropTypes.bool.isRequired,\r\n audienceAdsPolicy: PropTypes.string,\r\n period: PropTypes.string,\r\n 'aria-label': PropTypes.string,\r\n ariaItemSize: PropTypes.number.isRequired,\r\n disabled: PropTypes.bool,\r\n ariaItemIndex: PropTypes.number.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isNewFeature: PropTypes.bool,\r\n itemId: PropTypes.string,\r\n dealDetails: PropTypes.shape({}),\r\n};\r\n\r\nAdTypeItem.defaultProps = {\r\n isPerfMaxWarningVisible: false,\r\n isSmartShoppingWarningVisible: false,\r\n smartShoppingWarningMessage: '',\r\n audienceAdsPolicy: null,\r\n period: null,\r\n dealDetails: null,\r\n helpTopicId: '',\r\n itemId: '',\r\n disabled: false,\r\n 'aria-label': '',\r\n isNewFeature: false,\r\n};\r\n\r\nexport const StyledAdTypeItem = withDefaultStyles(AdTypeItem, getAdTypeItemStyles);\r\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\r\n/* eslint-disable jsx-a11y/click-events-have-key-events */\r\nimport React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Dropdown } from '@fluentui/react';\r\nimport { getTargetConstraints } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport config from '@bingads-webui-component-legacy/config/index';\r\n\r\nimport { getChooseAdsPanelStyles } from '../styles';\r\n\r\nfunction isTargetHasValue(deal, targetType) {\r\n return getTargetConstraints(deal, targetType).mandatory.length > 0;\r\n}\r\n\r\nexport function DealFilterBar(props) {\r\n const {\r\n i18n, deals, onFilter, locationFilterOptions, isEnabledDealsV2,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getChooseAdsPanelStyles);\r\n // alphabetical order by location\r\n const locationOptions = _.sortBy(locationFilterOptions, item => item.text);\r\n const [ronFilter, setRonFilter] = useState(false);\r\n const [ageFilter, setAgeFilter] = useState(false);\r\n const [genderFilter, setGenderFilter] = useState(false);\r\n const [genreFilter, setGenreFilter] = useState(false);\r\n\r\n const currentLocation = config.get('CurrentUser').Market;\r\n // For deal V2 SI test, we will remove it when we can fetch US deals from V2 api\r\n const currentLocationInOptions = locationFilterOptions.find(location => location.key === currentLocation);\r\n const usLocationOptions = locationFilterOptions.find(location => location.key === 'US');\r\n const defaultLocationOptions = isEnabledDealsV2 ? _.first(locationFilterOptions) : usLocationOptions;\r\n\r\n const [locationFilter, setLocationFilter] = useState(currentLocationInOptions || defaultLocationOptions);\r\n\r\n function applyFilterToDeal() {\r\n let tmpDeals = deals.slice();\r\n if (ronFilter) {\r\n tmpDeals = tmpDeals.filter(deal =>\r\n _.get(deal, 'Name', '').toLowerCase().includes('top10') ||\r\n (!deal.Genre && !deal.AgeRange && !isTargetHasValue(deal, 'Gender') && !isTargetHasValue(deal, 'Device') && !isTargetHasValue(deal, 'Audience')));\r\n }\r\n\r\n if (ageFilter) {\r\n tmpDeals = tmpDeals.filter(deal => deal.AgeRange);\r\n }\r\n\r\n if (genderFilter) {\r\n tmpDeals = tmpDeals.filter(deal => isTargetHasValue(deal, 'Gender'));\r\n }\r\n\r\n if (genreFilter) {\r\n tmpDeals = tmpDeals.filter(deal => deal.Genre);\r\n }\r\n\r\n if (locationFilter.key !== 'all') {\r\n tmpDeals = tmpDeals.filter((deal) => {\r\n const { mandatory } = getTargetConstraints(deal, 'Location');\r\n return mandatory.includes(String(locationFilter.data.Id));\r\n });\r\n }\r\n\r\n onFilter(tmpDeals);\r\n }\r\n\r\n useEffect(() => {\r\n applyFilterToDeal();\r\n }, [ronFilter, ageFilter, genderFilter, genreFilter, locationFilter]);\r\n\r\n function onLocationChange(ev, item) {\r\n setLocationFilter(item);\r\n }\r\n\r\n function onRonClick() {\r\n setRonFilter(!ronFilter);\r\n\r\n setAgeFilter(false);\r\n setGenderFilter(false);\r\n setGenreFilter(false);\r\n }\r\n\r\n function onAgeClick() {\r\n setAgeFilter(!ageFilter);\r\n\r\n setRonFilter(false);\r\n setGenderFilter(false);\r\n setGenreFilter(false);\r\n\r\n applyFilterToDeal();\r\n }\r\n\r\n function onGenderClick() {\r\n setGenderFilter(!genderFilter);\r\n\r\n setRonFilter(false);\r\n setAgeFilter(false);\r\n setGenreFilter(false);\r\n\r\n applyFilterToDeal();\r\n }\r\n\r\n function onGenreClick() {\r\n setGenreFilter(!genreFilter);\r\n\r\n setRonFilter(false);\r\n setAgeFilter(false);\r\n setGenderFilter(false);\r\n\r\n applyFilterToDeal();\r\n }\r\n\r\n return (\r\n {i18n.getString(_TL_('New'))}
\r\n : ''\r\n }\r\n \r\n \r\n {i18n.getString(_TL_('Age'))}\r\n
\r\n \r\n \r\n {i18n.getString(_TL_('RON and TOP10'))}\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nDealFilterBar.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n deals: PropTypes.array.isRequired,\r\n onFilter: PropTypes.func.isRequired,\r\n locationFilterOptions: PropTypes.array.isRequired,\r\n isEnabledDealsV2: PropTypes.bool,\r\n};\r\n\r\nDealFilterBar.defaultProps = {\r\n isEnabledDealsV2: false,\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\n/* eslint-disable jsx-a11y/click-events-have-key-events */\r\n/* eslint-disable jsx-a11y/interactive-supports-focus */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mapObject, constant, isBoolean, flatten, uniq, each, get } from 'underscore';\r\nimport { MessageBar, Checkbox, Link } from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Button } from '@bingads-webui-react/primitive';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { Loading } from '@bingads-webui-campaign-react/loading';\r\nimport { Panel } from '@bingads-webui-campaign-react/panel';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { getLocalStorage } from '@bingads-webui/storage';\r\nimport { getRoutePathById, siteMapPropType, withSiteMap } from '@bingads-webui-campaign-react/with-site-map';\r\nimport * as createService from '@bingads-webui-campaign-legacy/campaign-create-advanced/view/service';\r\nimport { bytesForHuman, targetConstraintsToText, getCountriesLocations, getTargetConstraints, getVideoConstraintDuration, MTCurrencyConvertor, isNetflixDeal } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport decimal from '@bingads-webui-component-legacy/humanize/decimal';\r\nimport { getChooseAdsPanelStyles } from '../styles';\r\nimport { StyledAdTypeItem } from './ad-type-item';\r\nimport { DealFilterBar } from './deal-filter-bar';\r\nimport {\r\n adTypeConfig,\r\n shoppingCampaignTypeConfig,\r\n perfMaxCampaignTypeConfig,\r\n standardShoppingCampaignTypeConfig,\r\n shoppingCampaignTypes,\r\n xandrVideoCampaignTypeConfig,\r\n adImpressionsCampaignTypeConfig,\r\n getDeals,\r\n getDealsV2,\r\n sponsoredProductCampaignTypeConfig,\r\n} from '../helper';\r\n\r\nconst NFDealAccountPreferenceName = 'WebApp.CampaignUI.AcceptNetflixDealTCs';\r\nlet noSmartShoppingReasonRef = null;\r\n\r\nclass ChooseAdsPanel extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.createService = createService;\r\n\r\n this.localStorage = getLocalStorage();\r\n this.isLocalStorageSupported = this.localStorage.supportsStorage();\r\n if (this.isLocalStorageSupported) {\r\n this.localStorage.invalidate('XandrVideoCampaignType');\r\n }\r\n\r\n this.state = {\r\n selectedAdType: null,\r\n selectedVideoChannelType: null,\r\n selectedAdImpressionsType: null,\r\n selectedCampaignType: null,\r\n selectedSponsoredProductCampaignType: null,\r\n showShoppingCampaignTypeOptions: false,\r\n showPerfMaxCampaignTypeOptions: props.showPerfMaxCampaignTypeOptions,\r\n isPerfMaxCampaignDisabled: false,\r\n netflixDealTCAccepted: this.isAcceptNetflixDealTCs(props),\r\n deals: [],\r\n filteredDeals: [],\r\n isSmartShoppingCampaignDisabled: false,\r\n loading: true,\r\n locationMap: {},\r\n locationFilterOptions: [],\r\n smartShoppingNotSupportedReason: null,\r\n itemId: props.itemId,\r\n };\r\n }\r\n static getDerivedStateFromProps(nextProps, prevState) {\r\n if (nextProps.itemId !== prevState.itemId) {\r\n const { itemId, showPerfMaxCampaignTypeOptions } = nextProps;\r\n const selectedCampaignType = showPerfMaxCampaignTypeOptions ? null : shoppingCampaignTypes.smart;\r\n if (itemId === 'ShoppingCampaign' && nextProps.isSmartShoppingCampaignEnabled) {\r\n return {\r\n loading: true,\r\n selectedCampaignType,\r\n showShoppingCampaignTypeOptions: false,\r\n showPerfMaxCampaignTypeOptions: nextProps.showPerfMaxCampaignTypeOptions,\r\n itemId,\r\n };\r\n } else if (itemId === 'MediaPackageCampaign') {\r\n return {\r\n loading: !prevState.deals || prevState.deals.length === 0,\r\n itemId,\r\n };\r\n }\r\n\r\n return {\r\n selectedAdType: null,\r\n selectedCampaignType,\r\n showShoppingCampaignTypeOptions: false,\r\n showPerfMaxCampaignTypeOptions: nextProps.showPerfMaxCampaignTypeOptions,\r\n loading: nextProps.showPerfMaxCampaignTypeOptions,\r\n itemId,\r\n };\r\n }\r\n return null;\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.itemId !== this.props.itemId) {\r\n this.fetchIsSmartShoppingCampaignEnabled(this.props);\r\n this.fetchIsPerfMaxCampaignEnabled(this.props);\r\n this.fetchDeals(this.props);\r\n }\r\n }\r\n\r\n get adTypes() {\r\n const { i18n } = this.props;\r\n return adTypeConfig(i18n);\r\n }\r\n\r\n get shopppingCampaignTypes() {\r\n const { i18n, permissions } = this.props;\r\n return shoppingCampaignTypeConfig(i18n, permissions);\r\n }\r\n\r\n get perfMaxCampaignType() {\r\n const { i18n } = this.props;\r\n return perfMaxCampaignTypeConfig(i18n);\r\n }\r\n\r\n get standardCampaignType() {\r\n const { i18n } = this.props;\r\n return adTypeConfig(i18n, true)[0];\r\n }\r\n\r\n get audienceCampaignType() {\r\n const { i18n } = this.props;\r\n return adTypeConfig(i18n, true)[1];\r\n }\r\n\r\n get standardShoppingCampaignType() {\r\n const { i18n } = this.props;\r\n return standardShoppingCampaignTypeConfig(i18n);\r\n }\r\n\r\n get xandrVideoCampaignType() {\r\n const { i18n } = this.props;\r\n return xandrVideoCampaignTypeConfig(i18n);\r\n }\r\n\r\n get adImpressionCampaignType() {\r\n const { i18n } = this.props;\r\n return adImpressionsCampaignTypeConfig(i18n);\r\n }\r\n\r\n getPanelTitle() {\r\n if (this.state.loading) {\r\n return '';\r\n }\r\n const { i18n, itemId } = this.props;\r\n\r\n if (itemId === 'MediaPackageCampaign') {\r\n return i18n.getString(_TL_('Choose your deal'));\r\n }\r\n\r\n const shoppingCampaignSubTypeTitle = i18n.getString(_TL_('Select a campaign type.'));\r\n const campaignTypeTitle = i18n.getString(_TL_('What kind of ads do you want to run for this campaign?'));\r\n return this.state.showShoppingCampaignTypeOptions || this.state.showPerfMaxCampaignTypeOptions ? shoppingCampaignSubTypeTitle : campaignTypeTitle;\r\n }\r\n\r\n getConversionGoalWarningMessage(isPerfMaxCampaign) {\r\n const {\r\n classes, scope, siteMap, i18n,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {\r\n evt.preventDefault();\r\n const pathname = getRoutePathById(siteMap, 'conversion-goals');\r\n\r\n scope.history.push({\r\n pathname,\r\n search: scope.history.location.search,\r\n });\r\n }}\r\n >\r\n {i18n.getString(_TL_('Set up conversion tracking'))}\r\n \r\n
\r\n );\r\n }\r\n\r\n getSmartShoppingWarningMessage() {\r\n const { classes, i18n } = this.props;\r\n switch (this.state.smartShoppingNotSupportedReason) {\r\n case noSmartShoppingReasonRef.NO_AVAILABLE_GOAL:\r\n return this.getConversionGoalWarningMessage();\r\n case noSmartShoppingReasonRef.MORE_THAN_100:\r\n return (\r\n {i18n.getString(_TL_('Missing conversion tracking'))}
\r\n {i18n.getString(_TL_('To run a {{campaignType}}, you need conversion tracking so you can keep track of when your ads lead to sales on your website.'), {\r\n campaignType: isPerfMaxCampaign ? i18n.getString(_TL_('Performance Max campaign')) : i18n.getString(_TL_('Smart Shopping campaign')),\r\n })}\r\n\r\n
\r\n );\r\n default:\r\n return '';\r\n }\r\n }\r\n\r\n async fetchDeals(props) {\r\n if (props.permissions.IsDealEnabledForMsAds) {\r\n if (this.state.deals && this.state.deals.length > 0) {\r\n return;\r\n }\r\n const { itemId, scope, serverContext } = props;\r\n const { cid, aid } = scope.values;\r\n const lcid = serverContext ? serverContext.CurrentUser.LocaleID : '1033';\r\n\r\n if (itemId === 'MediaPackageCampaign') {\r\n let deals;\r\n if (props.permissions.IsEnabledDealsV2) {\r\n deals = await getDealsV2(cid, aid).then(response => response.value);\r\n } else {\r\n deals = await getDeals();\r\n }\r\n const locationIds = uniq(flatten(deals.map(deal => getTargetConstraints(deal, 'Location').mandatory)));\r\n\r\n const locationResponse = await getCountriesLocations(locationIds, lcid, cid, aid);\r\n const locationMap = {};\r\n const locationFilterOptions = [];\r\n each(locationResponse, (location) => {\r\n if (!locationMap[location.data.Id]) {\r\n locationFilterOptions.push({ key: location.data.CountryCode, text: location.data.EnglishName, data: location.data });\r\n }\r\n locationMap[location.data.Id] = location.data.EnglishName;\r\n });\r\n\r\n this.setState({\r\n loading: false,\r\n locationMap,\r\n locationFilterOptions,\r\n deals,\r\n filteredDeals: deals,\r\n });\r\n }\r\n }\r\n }\r\n\r\n fetchIsSmartShoppingCampaignEnabled(props) {\r\n const { itemId, showPerfMaxCampaignTypeOptions, isSmartShoppingCampaignEnabled } = props;\r\n if (itemId === 'ShoppingCampaign') {\r\n if (isSmartShoppingCampaignEnabled) {\r\n this.fetchIsSmartShoppingCampaignSupportedWithLegacyCode().then(({ supported, reason }) => {\r\n if (this.props.itemId === itemId) {\r\n const showShoppingCampaignTypeOptions = supported || reason !== noSmartShoppingReasonRef.NO_PILOT;\r\n this.setState({\r\n loading: false,\r\n showShoppingCampaignTypeOptions,\r\n selectedAdType: null,\r\n isSmartShoppingCampaignDisabled: !supported && reason !== noSmartShoppingReasonRef.NO_PILOT,\r\n smartShoppingNotSupportedReason: reason,\r\n });\r\n if (!showPerfMaxCampaignTypeOptions) {\r\n this.setState({\r\n selectedCampaignType: supported ? shoppingCampaignTypes.smart : shoppingCampaignTypes.standard,\r\n });\r\n }\r\n }\r\n });\r\n } else if (this.props.itemId === itemId) {\r\n this.setState({\r\n loading: false,\r\n showShoppingCampaignTypeOptions: true,\r\n isSmartShoppingCampaignDisabled: true,\r\n selectedAdType: null,\r\n });\r\n if (!showPerfMaxCampaignTypeOptions) {\r\n this.setState({\r\n selectedCampaignType: shoppingCampaignTypes.standard,\r\n });\r\n }\r\n }\r\n }\r\n }\r\n\r\n fetchIsPerfMaxCampaignEnabled(props) {\r\n const { showPerfMaxCampaignTypeOptions } = props;\r\n\r\n if (showPerfMaxCampaignTypeOptions) {\r\n this.setState({\r\n loading: false,\r\n isPerfMaxCampaignDisabled: false,\r\n });\r\n }\r\n }\r\n\r\n fetchIsSmartShoppingCampaignSupportedWithLegacyCode() {\r\n return new Promise((resolve) => {\r\n const { fetchIsSmartShoppingCampaignSupported, noSmartShoppingReason } = this.createService;\r\n resolve(fetchIsSmartShoppingCampaignSupported());\r\n noSmartShoppingReasonRef = noSmartShoppingReason;\r\n });\r\n }\r\n\r\n handleNextButtonClick = () => {\r\n const {\r\n handleNavigation, permissions, config, preferenceService,\r\n } = this.props;\r\n const {\r\n selectedVideoChannelType,\r\n itemId,\r\n netflixDealTCAccepted,\r\n selectedDeal,\r\n selectedAdImpressionsType,\r\n selectedSponsoredProductCampaignType,\r\n } = this.state;\r\n if (itemId === 'VideoCampaign') {\r\n config.set('XandrVideoCampaignType', selectedVideoChannelType);\r\n\r\n if (this.isLocalStorageSupported) {\r\n this.localStorage.set('XandrVideoCampaignType', selectedVideoChannelType);\r\n }\r\n handleNavigation('VideoCampaign');\r\n } else if (itemId === 'MediaPackageCampaign') {\r\n config.set('VideoMediaDeal', selectedDeal);\r\n\r\n if (netflixDealTCAccepted && this.isNetflixDealSelected()) {\r\n preferenceService.setAtAccountLevel({\r\n Name: NFDealAccountPreferenceName,\r\n Data: true,\r\n Type: 'bool',\r\n Version: 1,\r\n });\r\n }\r\n\r\n if (this.isLocalStorageSupported) {\r\n this.localStorage.set('VideoMediaDeal', selectedDeal);\r\n }\r\n\r\n handleNavigation('VideoCampaign');\r\n } else if (itemId === 'AdImpressions') {\r\n handleNavigation(selectedAdImpressionsType);\r\n } else if (itemId === 'SponsoredShoppingCampaign') {\r\n handleNavigation(selectedSponsoredProductCampaignType);\r\n } else if (this.state.showPerfMaxCampaignTypeOptions) {\r\n if (this.state.showShoppingCampaignTypeOptions && this.state.selectedCampaignType === shoppingCampaignTypes.standard) {\r\n if (permissions.IsAIMCampaignEnabled) {\r\n this.setState({\r\n showPerfMaxCampaignTypeOptions: false,\r\n showShoppingCampaignTypeOptions: false,\r\n });\r\n } else {\r\n handleNavigation('SearchAds');\r\n }\r\n } else {\r\n const { selectedCampaignType } = this.state;\r\n handleNavigation(selectedCampaignType);\r\n }\r\n } else if (!this.state.showShoppingCampaignTypeOptions) {\r\n const { selectedAdType } = this.state;\r\n\r\n handleNavigation(selectedAdType);\r\n } else if (this.state.selectedCampaignType === shoppingCampaignTypes.standard) {\r\n if (permissions.IsAIMCampaignEnabled) {\r\n this.setState({\r\n showShoppingCampaignTypeOptions: false,\r\n });\r\n } else {\r\n handleNavigation('SearchAds');\r\n }\r\n } else {\r\n const { selectedCampaignType } = this.state;\r\n handleNavigation(selectedCampaignType);\r\n }\r\n };\r\n\r\n handleAdTypeSelect = (adTypeId) => {\r\n this.setState({ selectedAdType: adTypeId });\r\n };\r\n\r\n handleCampaignTypeSelect = (id) => {\r\n this.setState({ selectedCampaignType: id });\r\n };\r\n\r\n handleShoppingCampaignTypeSelect = (id) => {\r\n this.setState({ selectedCampaignType: id });\r\n };\r\n\r\n handleXanerVideoCampaignChannelSelect = (id) => {\r\n this.setState({ selectedVideoChannelType: id });\r\n };\r\n\r\n handleSponsoredProductCampaignTypeSelect = (id) => {\r\n this.setState({ selectedSponsoredProductCampaignType: id });\r\n };\r\n\r\n handleDealSelect = (deal) => {\r\n this.setState({ selectedDeal: deal });\r\n };\r\n\r\n handleAdImpressionsCampaignChannelSelect = (id) => {\r\n this.setState({ selectedAdImpressionsType: id });\r\n };\r\n\r\n handleCheckNFDealIterm = async () => {\r\n this.setState({\r\n netflixDealTCAccepted: !this.state.netflixDealTCAccepted,\r\n });\r\n };\r\n\r\n handleDealFilter = (filteredDeals) => {\r\n this.setState({\r\n filteredDeals,\r\n });\r\n };\r\n\r\n isAcceptNetflixDealTCs = (props) => {\r\n const { preferenceService } = props;\r\n return get(preferenceService.findByNameAtAccountLevel(NFDealAccountPreferenceName), 'Data', false);\r\n };\r\n\r\n isNetflixDealSelected = () => this.state.selectedDeal && isNetflixDeal(this.state.selectedDeal);\r\n\r\n isNextButtonDisabled() {\r\n const {\r\n selectedAdType,\r\n selectedCampaignType,\r\n loading,\r\n itemId,\r\n selectedDeal,\r\n netflixDealTCAccepted,\r\n selectedAdImpressionsType,\r\n selectedVideoChannelType,\r\n selectedSponsoredProductCampaignType,\r\n } = this.state;\r\n if (loading) {\r\n return true;\r\n }\r\n\r\n if (this.state.showShoppingCampaignTypeOptions) {\r\n return selectedCampaignType == null;\r\n }\r\n if (this.state.showPerfMaxCampaignTypeOptions) {\r\n return selectedCampaignType == null;\r\n }\r\n if (itemId === 'VideoCampaign') {\r\n return selectedVideoChannelType == null;\r\n }\r\n if (itemId === 'MediaPackageCampaign') {\r\n return selectedDeal == null || (this.isNetflixDealSelected() && !netflixDealTCAccepted);\r\n }\r\n if (itemId === 'AdImpressions') {\r\n return selectedAdImpressionsType == null;\r\n }\r\n if (itemId === 'SponsoredShoppingCampaign') {\r\n return selectedSponsoredProductCampaignType == null;\r\n }\r\n if (!this.state.showShoppingCampaignTypeOptions) {\r\n return selectedAdType == null;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n renderOptions() {\r\n const { i18n, permissions, isSmartShoppingCampaignEnabled } = this.props;\r\n const {\r\n selectedCampaignType,\r\n selectedVideoChannelType,\r\n selectedAdImpressionsType,\r\n selectedSponsoredProductCampaignType,\r\n itemId,\r\n selectedDeal,\r\n filteredDeals,\r\n deals,\r\n isPerfMaxCampaignDisabled,\r\n locationMap,\r\n } = this.state;\r\n let campaignTypeOptions = [];\r\n const { selectedAdType } = this.state;\r\n\r\n if (permissions.IsDomesticSimplifiedChineseEnabled) {\r\n const campaignTypesToShow = [this.standardCampaignType];\r\n if (itemId !== 'ShoppingCampaign') {\r\n campaignTypesToShow.push(this.audienceCampaignType);\r\n }\r\n return campaignTypesToShow.map((campaigntype, index) =>\r\n (\r\n {i18n.getString(_TL_('Campaign limit reached'))}
\r\n {i18n.getString(_TL_('The maximum number of Smart Shopping campaigns allowed per account is 100.'))}\r\n\r\n {!hideDealImpression && item.EstimatedImpressions &&
\r\n ),\r\n };\r\n return (\r\n {i18n.getString(_TL_('Estimated Impressions'))}: {bytesForHuman(item.EstimatedImpressions)}
}\r\n {i18n.getString(_TL_('Deal Id'))}: {item.Id}
\r\n {/* todos: get location by ids */}\r\n {i18n.getString(_TL_('Country'))}: {targetConstraintsToText(item, 'Location', i18n, locationMap)}
\r\n {\r\n item.MinimumBid ?\r\n {i18n.getString(_TL_('Minimum bid'))}: {decimal.fromFloatToString(item.MinimumBid, 2)} {MTCurrencyConvertor[item.Currency] || 'USD'}
:\r\n {i18n.getString(_TL_('Minimum bid'))}: {i18n.getString(_TL_('Unavailable'))}
\r\n }\r\n {i18n.getString(_TL_('Duration'))}: {getVideoConstraintDuration(item, i18n)}
\r\n {i18n.getString(_TL_('Gender targeting'))}: {targetConstraintsToText(item, 'Gender', i18n)}
\r\n {i18n.getString(_TL_('Device targeting'))}: {targetConstraintsToText(item, 'Device', i18n)}
\r\n {i18n.getString(_TL_('Age targeting'))}: {item.AgeRange || targetConstraintsToText(item, 'Age', i18n)}
\r\n {i18n.getString(_TL_('Audience targeting'))}: {targetConstraintsToText(item, 'Audience', i18n)}
\r\n {isDealGenreRestricted && {i18n.getString(_TL_('Genre targeting'))}: {item.Genre ? 'Available' : 'Unavailable'}
}\r\n \r\n \r\n {i18n.getString(_TL_('I have read and agree to the '))}\r\n \r\n {i18n.getString(_TL_('Netflix Inventory Policy'))}\r\n \r\n {i18n.getString(_TL_('.'))}\r\n \r\n }\r\n onChange={this.handleCheckNFDealIterm}\r\n disabled={this.isAcceptNetflixDealTCs(this.props)}\r\n defaultChecked={netflixDealTCAccepted}\r\n />\r\n \r\n {i18n.getString(_TL_('Once you save your campaign, you cannot change your deal. If at some point you want to change your deal, you\\'ll need to create a new campaign.'))}\r\n \r\n \r\n \r\n {\r\n i18n.getString(_TL_('Advertisers in the following verticals are required to submit their licenses and/or proof of creative approval in select markets to serve their ads on Netflix: Alcohol, Financial Services, Insurance, High fat/sugar/salt foods, online sports betting, state-run lotteries, healthcare, pharmaceuticals, and dating. Licenses and proof of creative approval can be submitted in web forms linked through the'))\r\n }\r\n \r\n \r\n {i18n.getString(_TL_('Restricted policy page.'))}\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n render() {\r\n const {\r\n i18n, isOpen, classes, onClose, isMMCSetup, permissions, isSmartShoppingCampaignEnabled\r\n } = this.props;\r\n const { itemId, deals, locationFilterOptions } = this.state;\r\n let optionsLength = 2;\r\n\r\n if (this.state.showPerfMaxCampaignTypeOptions && !(itemId === 'ShoppingCampaign' && !isSmartShoppingCampaignEnabled)) {\r\n optionsLength = 3;\r\n }\r\n\r\n const width = 1191 - ((3 - optionsLength) * 334);\r\n\r\n return (\r\n \r\n {this.state.loading ?
\r\n {\r\n this.state.showShoppingCampaignTypeOptions && this.state.showPerfMaxCampaignTypeOptions && isBoolean(isMMCSetup) && !isMMCSetup &&\r\n \r\n \r\n {i18n.getString(_TL_('Next'))}\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nChooseAdsPanel.propTypes = {\r\n itemId: PropTypes.string.isRequired,\r\n isSmartShoppingCampaignEnabled: PropTypes.bool.isRequired,\r\n classes: PropTypes.shape(mapObject(\r\n getChooseAdsPanelStyles({}, {}),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n deals: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n handleNavigation: PropTypes.func.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n PMaxLite: PropTypes.bool,\r\n }).isRequired,\r\n IsAIMCampaignEnabled: PropTypes.bool.isRequired,\r\n IsDealFilterEnabled: PropTypes.bool.isRequired,\r\n IsSmartShoppingCampaignEnabled: PropTypes.bool.isRequired,\r\n IsDomesticSimplifiedChineseEnabled: PropTypes.bool,\r\n IsEnabledDealsV2: PropTypes.bool,\r\n }).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n showPerfMaxCampaignTypeOptions: PropTypes.bool,\r\n isMMCSetup: PropTypes.bool.isRequired,\r\n};\r\n\r\nChooseAdsPanel.defaultProps = {\r\n onClose: () => { },\r\n showPerfMaxCampaignTypeOptions: false,\r\n};\r\n\r\nexport const StyledChooseAdsPanel = withDefaultStyles(withI18nConsumer(withScope(withSiteMap(withPermissions(ChooseAdsPanel)))), getChooseAdsPanelStyles);\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _, { compose, mapObject, constant, map, findWhere } from 'underscore';\r\nimport { withScope, QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { getLocalStorage } from '@bingads-webui/storage';\r\nimport { withDFMCache } from '@bingads-webui/dfm-cache';\r\nimport { withPreference } from '@bingads-webui-react/preference-context';\r\nimport { withSiteMap, siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { perfMarkerPropTypes } from '@bingads-webui/performance-marker';\r\nimport { Stack } from '@fluentui/react';\r\nimport { withCcJsData } from '@bingads-webui-cc-react/js-data-rest';\r\nimport { Constants as CCUIConstants } from '@bingads-webui-clientcenter/entity-utils';\r\nimport { FAC_FEATURE_ID } from '@bingads-webui-campaign/recommendation-core';\r\n\r\nimport { StyledActionList } from '../components/action-list';\r\nimport { getChooseObjectiveStyles } from '../styles';\r\nimport {\r\n objectivesConfig,\r\n toolsConfig,\r\n navigateSelectedTools,\r\n navigateSelectedObjective,\r\n withCreationHeader,\r\n shoppingCampaignTypes,\r\n campaignTypes,\r\n objectivesForPerfMax,\r\n adImpressionsCampaignTypes,\r\n getProductData,\r\n} from '../helper';\r\nimport { StyledChooseAdsPanel } from '../components/choose-ads-panel';\r\n\r\nclass ChooseObjective extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.localStorage = getLocalStorage();\r\n this.isLocalStorageSupported = this.localStorage.supportsStorage();\r\n if (this.isLocalStorageSupported) {\r\n this.localStorage.invalidate('CampaignObjective');\r\n }\r\n\r\n this.state = {\r\n isPanelOpen: false,\r\n selectedItemId: null,\r\n isMMCSetup: null,\r\n couponDetails: null,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n perfMarker,\r\n prefetchChunks,\r\n scope,\r\n ccJsData,\r\n permissions,\r\n i18n,\r\n serverContext,\r\n } = this.props;\r\n if (perfMarker) {\r\n perfMarker.done();\r\n }\r\n if (typeof prefetchChunks === 'function') {\r\n prefetchChunks();\r\n }\r\n const { uid, cid, aid } = scope.values;\r\n const {\r\n CurrentAccount: {\r\n CurrencyCode,\r\n },\r\n } = serverContext;\r\n if (permissions.dynamic.FACForShopping) {\r\n this.getFACData({\r\n ccJsData,\r\n aid,\r\n i18n,\r\n CurrencyCode,\r\n });\r\n }\r\n this.getProductData = _.once(() => {\r\n const getProductDataWithCache = withDFMCache(getProductData, 'getProductScopeDFM', this);\r\n const getProductDataPromise = Promise.resolve(getProductDataWithCache(cid, aid, uid));\r\n getProductDataPromise.then((data) => {\r\n const hasAnyStores = !_.isEmpty(data) && !_.isEmpty(data.ProductCollectionAccounts);\r\n this.setState({\r\n isMMCSetup: hasAnyStores,\r\n });\r\n });\r\n });\r\n this.setSelectedItemFromQueryString();\r\n }\r\n\r\n getFACData = ({\r\n ccJsData, aid, i18n, CurrencyCode,\r\n }) => {\r\n ccJsData.FeatureAdoptionCoupon\r\n .findAll({ aid })\r\n .then((coupons) => {\r\n if (!_.isArray(coupons) || coupons.length === 0) {\r\n return [];\r\n }\r\n return coupons;\r\n })\r\n .catch(() => [])\r\n .then(coupons => _.filter(\r\n coupons,\r\n ({ Status, FeatureId }) => FeatureId === parseInt(FAC_FEATURE_ID.SHOPPING_CAMPAIGN, 10)\r\n && (\r\n Status === CCUIConstants.RecommendationAdoptionStatus.NotInProgess\r\n || Status === CCUIConstants.RecommendationAdoptionStatus.Active\r\n )\r\n ))\r\n .then((coupons) => {\r\n if (coupons.length > 0) {\r\n this.setState({\r\n couponDetails: {\r\n ...coupons[0],\r\n CouponValueWithCurrency: i18n.formatCurrency(coupons[0].CouponValue, CurrencyCode),\r\n },\r\n });\r\n }\r\n });\r\n };\r\n\r\n getDescription = i18n => i18n.getString(_TL_('A successful campaign needs a clear goal, and setting your goal here lets us suggest the most helpful Microsoft Advertising features for your campaign. You\\'ll still have access to all Microsoft Advertising features regardless of the goal you choose.'));\r\n\r\n get showPerfMaxCampaignTypeOptions() {\r\n const { permissions } = this.props;\r\n return permissions.dynamic.PerformanceMaxCampaigns && _.contains(objectivesForPerfMax, this.state.selectedItemId);\r\n }\r\n\r\n setSelectedItemFromQueryString = () => {\r\n const { scope, i18n, permissions } = this.props;\r\n const selectedItemKeyFromSearch = scope.values && scope.values.selectedCampaignObjectiveKey;\r\n const objectiveItems = objectivesConfig({ i18n, permissions }).filter(item => item.isEnabled);\r\n\r\n if (objectiveItems.some(item => item.id === selectedItemKeyFromSearch)) {\r\n this.handleSelectedObjective({ id: selectedItemKeyFromSearch });\r\n }\r\n };\r\n\r\n showPanel = () => {\r\n this.setState({ isPanelOpen: true });\r\n if (this.props.permissions.dynamic.PerformanceMaxCampaigns) {\r\n this.getProductData();\r\n }\r\n };\r\n\r\n closePanel = () => {\r\n this.setState({ isPanelOpen: false, selectedItemId: null });\r\n };\r\n\r\n handleSelectedObjective = ({ id: itemId }) => {\r\n const {\r\n config, permissions, scope, siteMap,\r\n } = this.props;\r\n const isSmartCampaign = itemId === 'SmartCampaign';\r\n const isHotelBooking = itemId === 'HotelBooking';\r\n const isAppInstall = itemId === 'AppInstalls';\r\n const isMSStoreAdsGAWorkflow = itemId === 'MSStoreAds';\r\n\r\n if (isMSStoreAdsGAWorkflow) {\r\n scope.history.push({\r\n pathname: '/campaign/vnext/createcampaign/msstoreads',\r\n search: scope.history.location.search,\r\n });\r\n return;\r\n }\r\n\r\n if (isHotelBooking) {\r\n const IsRenameHotelToLodgingEnabled = this.props.permissions && this.props.permissions.dynamic && this.props.permissions.dynamic.IsRenameHotelToLodgingEnabled;\r\n scope.history.push({\r\n pathname: IsRenameHotelToLodgingEnabled ? '/campaign/vnext/createcampaign/lodging' : '/campaign/vnext/createcampaign/hotel',\r\n search: scope.history.location.search,\r\n });\r\n return;\r\n }\r\n\r\n if (isSmartCampaign) {\r\n const { uid, cid, aid } = scope.values;\r\n window.location.href = `/campaign/smart?cid=${cid}&aid=${aid}&uid=${uid}#/CreateCampaign`;\r\n return;\r\n }\r\n\r\n if (isAppInstall) {\r\n navigateSelectedObjective({\r\n isShopping: false,\r\n isAudience: false,\r\n isSmartShopping: false,\r\n siteMap: [findWhere(siteMap, { id: 'campaign-create' })],\r\n scope,\r\n });\r\n }\r\n\r\n const isShopping = itemId.indexOf('ShoppingCampaign') !== -1;\r\n this.setState({ isPanelOpen: false, selectedItemId: itemId });\r\n config.set('CampaignObjective', itemId);\r\n\r\n if (this.isLocalStorageSupported) {\r\n this.localStorage.set('CampaignObjective', itemId);\r\n }\r\n\r\n if ((permissions.IsVideoAdsForCampaignEnabled && !permissions.dynamic.XandrVideoCampaigns) && itemId === 'VideoCampaign') {\r\n navigateSelectedObjective({\r\n isVideo: true, isAudience: true, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope, permissions,\r\n });\r\n } else if (permissions.IsManualCpmEnabled && !permissions.dynamic.XandrDisplayAdsCampaigns && itemId === 'AdImpressions') {\r\n // only native ads enabled\r\n navigateSelectedObjective({\r\n isAudience: true, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope,\r\n });\r\n } else if (!permissions.IsManualCpmEnabled && permissions.dynamic.XandrDisplayAdsCampaigns && itemId === 'AdImpressions') {\r\n // only display ad enabled\r\n navigateSelectedObjective({\r\n isAudience: true, isDisplayAds: true, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope,\r\n });\r\n } else if (\r\n (permissions.IsAIMCampaignEnabled && itemId !== 'SponsoredShoppingCampaign' &&\r\n !(permissions.IsDomesticSimplifiedChineseEnabled && itemId === 'ShoppingCampaign')) ||\r\n (permissions.IsSmartShoppingCampaignEnabled && !permissions.IsDomesticSimplifiedChineseEnabled && !permissions.dynamic.SSCDeprecation && itemId === 'ShoppingCampaign') ||\r\n (permissions.IsDealEnabledForMsAds && itemId === 'MediaPackageCampaign') ||\r\n (permissions.IsManualCpmEnabled && permissions.dynamic.XandrDisplayAdsCampaigns && itemId === 'AdImpressions') ||\r\n (permissions.dynamic.XandrVideoCampaigns && itemId === 'VideoCampaign') ||\r\n (itemId === 'SponsoredShoppingCampaign')) {\r\n this.showPanel();\r\n } else {\r\n navigateSelectedObjective({\r\n isShopping, isAudience: false, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope,\r\n });\r\n }\r\n };\r\n\r\n handleNavigation = (selectedType) => {\r\n const { scope, siteMap, permissions } = this.props;\r\n if (!selectedType) {\r\n return;\r\n }\r\n\r\n if (this.state.selectedItemId === 'VideoCampaign') {\r\n navigateSelectedObjective({\r\n isVideo: true, isAudience: true, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope, permissions,\r\n });\r\n return;\r\n }\r\n\r\n if (this.state.selectedItemId === 'MediaPackageCampaign') {\r\n navigateSelectedObjective({\r\n isMediaPackage: true, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope,\r\n });\r\n return;\r\n }\r\n\r\n if (this.state.selectedItemId === 'AdImpressions') {\r\n if (selectedType === adImpressionsCampaignTypes.displayAds) {\r\n navigateSelectedObjective({\r\n isAudience: true, isDisplayAds: true, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope,\r\n });\r\n return;\r\n }\r\n\r\n navigateSelectedObjective({\r\n isAudience: true, siteMap: [findWhere(siteMap, { id: 'campaign-create' })], scope,\r\n });\r\n return;\r\n }\r\n\r\n if (this.state.selectedItemId === 'SponsoredShoppingCampaign') {\r\n navigateSelectedObjective({\r\n sponsoredBrandAdType: selectedType,\r\n siteMap: [findWhere(siteMap, { id: 'campaign-create' })],\r\n scope,\r\n });\r\n\r\n return;\r\n }\r\n\r\n navigateSelectedObjective({\r\n isShopping: this.state.selectedItemId.indexOf('ShoppingCampaign') !== -1,\r\n isAudience: selectedType === 'AudienceAds',\r\n isNewAudience: permissions.IsNewStaticAudienceCampaignCreationEnabled,\r\n isNewSearch: permissions.dynamic.SearchCampaignCreationRevamp,\r\n isSmartShopping: selectedType === shoppingCampaignTypes.smart,\r\n isPerfMax: selectedType === campaignTypes.perfMax,\r\n siteMap: [findWhere(siteMap, { id: 'campaign-create' })],\r\n scope,\r\n });\r\n };\r\n\r\n renderActionList = () => {\r\n const { i18n, permissions } = this.props;\r\n const objectives = map(objectivesConfig({ i18n, permissions }), item => ({\r\n onClick: this.handleSelectedObjective,\r\n isSelected: (!!this.state.selectedItemId) && this.state.selectedItemId === item.id,\r\n FACInfo: this.state.couponDetails,\r\n ...item,\r\n }));\r\n const tools = map(toolsConfig({ i18n, permissions }), item => ({\r\n onClick: params => navigateSelectedTools({\r\n ...this.props,\r\n ...params,\r\n }),\r\n isSelected: (!!this.state.selectedItemId) && this.state.selectedItemId === item.id,\r\n ...item,\r\n }));\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nChooseObjective.propTypes = {\r\n classes: PropTypes.shape(mapObject(\r\n getChooseObjectiveStyles({}, {}),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({\r\n IsAIMCampaignEnabled: PropTypes.bool.isRequired,\r\n IsDynamicSearchAdsV1Enabled: PropTypes.bool.isRequired,\r\n IsAdultAdsEnabled: PropTypes.bool.isRequired,\r\n IsUserAppInstallAdsAllowed: PropTypes.bool.isRequired,\r\n IsEnhancedShoppingCampaignAllowed: PropTypes.bool.isRequired,\r\n IsSmartShoppingCampaignEnabled: PropTypes.bool.isRequired,\r\n IsVideoAdsForCampaignEnabled: PropTypes.bool.isRequired,\r\n IsDealEnabledForMsAds: PropTypes.bool.isRequired,\r\n IsAmplifyEnabled: PropTypes.bool.isRequired,\r\n IsNewStaticAudienceCampaignCreationEnabled: PropTypes.bool.isRequired,\r\n dynamic: PropTypes.shape({\r\n PerformanceMaxCampaigns: PropTypes.bool,\r\n XandrVideoCampaigns: PropTypes.bool,\r\n XandrDisplayAdsCampaigns: PropTypes.bool,\r\n FACForShopping: PropTypes.bool,\r\n DisplayPlusCampaigns: PropTypes.bool,\r\n SSCDeprecation: PropTypes.bool,\r\n SearchCampaignCreationRevamp: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n // config: e.g. component/config/index file should be inject from the options\r\n // eslint-disable-next-line react/forbid-prop-types\r\n config: PropTypes.object.isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n perfMarker: perfMarkerPropTypes.isRequired,\r\n prefetchChunks: PropTypes.func.isRequired,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({\r\n CurrencyCode: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n ccJsData: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nconst wrap = compose(\r\n TempComponent => withDefaultStyles(TempComponent, getChooseObjectiveStyles),\r\n withScope,\r\n withI18nConsumer,\r\n withPreference,\r\n withPermissions,\r\n withSiteMap,\r\n withCcJsData,\r\n TempComponent => withCreationHeader(TempComponent, undefined, undefined, false)\r\n);\r\n\r\nexport const StyledCampaignChooseObjective = wrap(ChooseObjective);\r\n","/* istanbul ignore file */\r\nimport React from 'react';\r\nimport Promise from 'bluebird';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { ProgressiveLoadingBlock } from '@bingads-webui-campaign-react/shell-ui-common';\r\nimport appConfig from '@bingads-webui-component-legacy/config/index';\r\nimport { StyledCampaignChooseObjective } from './choose-objective';\r\n\r\nconst chooseObjectiveViewPromise = () => Promise.resolve(props => (\r\n
\r\n \r\n
\r\n \r\n \r\n {this.getDescription(i18n)} \r\n \r\n
\r\n {this.renderActionList()}\r\n \r\n Promise.resolve(ShoppingCampaignCreationView)}\r\n InjectViewOption={{\r\n perfMarker,\r\n isMSStoreAdsGAWorkflow,\r\n ccJsData,\r\n scope,\r\n siteMap,\r\n getFACCoupon,\r\n updateCouponStatus,\r\n }}\r\n styleScopeName=\"CampaignCreationSearchShopping\"\r\n />\r\n
\r\n );\r\n};\r\n\r\nconst CampaignCreationSearchShopping = getShoppingCampaignCreationComponent(false);\r\nconst CampaignCreationMSStoreAds = getShoppingCampaignCreationComponent(true);\r\n\r\nconst propTypes = {\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({\r\n CurrencyCode: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n perfMarker: perfMarkerPropTypes.isRequired,\r\n scope: PropTypes.shape({}).isRequired,\r\n siteMap: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n\r\nCampaignCreationSearchShopping.propTypes = propTypes;\r\nCampaignCreationMSStoreAds.propTypes = propTypes;\r\n\r\nexport const StyledCampaignCreationSearchShopping =\r\n withDefaultStyles(withCreationHeader(CampaignCreationSearchShopping), getEntityCreationStyle);\r\nexport const StyledCampaignCreationMSStoreAds =\r\n withDefaultStyles(withCreationHeader(CampaignCreationMSStoreAds), getEntityCreationStyle);\r\n","/* istanbul ignore file */\r\nimport React from 'react';\r\nimport Promise from 'bluebird';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { perfMarkerPropTypes } from '@bingads-webui/performance-marker';\r\nimport { AudienceCampaignCreationWizard } from '@bingads-webui-campaign-legacy/audience-campaign/loader';\r\nimport decimal from '@bingads-webui-component-legacy/humanize/decimal';\r\nimport PageContext from '@bingads-webui-static-legacy/page-context';\r\nimport { getEntityCreationStyle } from '../styles';\r\nimport { InjectWrapperWithHoC, withCreationHeader } from '../helper';\r\nimport VerticalLayout from '../template/steps-template.pug';\r\nimport HeaderTemplate from '../template/header-template.pug';\r\n\r\nconst $top = 10000;\r\n\r\nfunction CampaignCreationAudienceShopping(props) {\r\n const {\r\n serverContext: {\r\n CurrentAccount: {\r\n CurrencyCode,\r\n },\r\n Permissions: {\r\n IsReadOnlyUser,\r\n IsEnabledForDynamicFeedCampaign,\r\n },\r\n CurrentAccountInActive,\r\n },\r\n perfMarker,\r\n } = props;\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nCampaignCreationAudienceSimplified.propTypes = {\r\n serverContext: PropTypes.shape({\r\n CurrentAccountInActive: PropTypes.bool.isRequired,\r\n Permissions: PropTypes.shape({\r\n IsReadOnlyUser: PropTypes.bool.isRequired,\r\n IsImpressionTrackingUrlsEnabled: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n CurrentAccount: PropTypes.shape({\r\n CurrencyCode: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n perfMarker: perfMarkerPropTypes.isRequired,\r\n classes: PropTypes.shape({\r\n CampaignCreationAudience: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }),\r\n};\r\n\r\nCampaignCreationAudienceSimplified.defaultProps = {\r\n i18n: {\r\n getString: text => text,\r\n },\r\n};\r\n\r\nexport const StyledCampaignCreationAudienceSimplified =\r\n withDefaultStyles(withCreationHeader(CampaignCreationAudienceSimplified), getEntityCreationStyle);\r\n","/* istanbul ignore file */\r\nimport React from 'react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { AdTypes } from '@bingads-webui-campaign-react/campaign-onboarding-v2';\r\nimport { ProgressiveLoadingBlock } from '@bingads-webui-campaign-react/shell-ui-common';\r\n\r\nconst getStandardShoppingCampaignWizardAsync = () => import(/* webpackMode: 'eager' */ '@bingads-webui-campaign-react/standard-shopping-wizard')\r\n .then(({ StandardShoppingCampaignWizard }) => StandardShoppingCampaignWizard);\r\n\r\nconst getComponent = getComponentAsync =>\r\n () => getComponentAsync()\r\n .then(component => ({ default: component }));\r\n\r\n\r\nconst StandardShoppingComponent = (props) => {\r\n const Component = React.lazy(getComponent(getStandardShoppingCampaignWizardAsync));\r\n return (\r\n \r\n
);\r\n },\r\n }));\r\n }));\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.instance && this.instance.remove) {\r\n this.instance.remove();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nNavigateSection.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n siteMap: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n scope: PropTypes.instanceOf(QueryParam).isRequired,\r\n backRouterId: PropTypes.string,\r\n content: PropTypes.element,\r\n isShowConfirmPopup: PropTypes.bool,\r\n isBorderInsteadOfShadow: PropTypes.bool,\r\n ariaLabelText: PropTypes.string.isRequired,\r\n};\r\n\r\nNavigateSection.defaultProps = {\r\n backRouterId: 'campaigns',\r\n content: undefined,\r\n isShowConfirmPopup: true,\r\n isBorderInsteadOfShadow: false,\r\n};\r\n\r\nexport const StyledNavigateSection = withScope(withSiteMap(withI18nConsumer(NavigateSection)));\r\n","import React from 'react';\r\nimport { map, last, constant, mapObject } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getNavigateContentStyles } from '../styles';\r\n\r\nfunction NavigateContent(props) {\r\n const { crumbs, classes } = props;\r\n const crumbSpans = map(crumbs, (crumb, index) => {`${crumb} > `});\r\n\r\n if (crumbSpans.length > 0) {\r\n crumbSpans[crumbSpans.length - 1] = ({last(crumbs)});\r\n }\r\n\r\n return (\r\n {props.content ||
\r\n {i18n.getString(_TL_('Campaigns > Create Campaign'))}
}\r\n {crumbSpans}\r\n
);\r\n}\r\n\r\nNavigateContent.propTypes = {\r\n crumbs: PropTypes.arrayOf(PropTypes.string),\r\n classes: PropTypes.shape(mapObject(\r\n getNavigateContentStyles({}, {}),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nNavigateContent.defaultProps = {\r\n crumbs: [],\r\n};\r\n\r\nexport const StyledNavigateContent = withDefaultStyles(NavigateContent, getNavigateContentStyles);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { StyledNavigateSection } from './navigate-section';\r\nimport { StyledNavigateContent } from './navigate-content';\r\n\r\nexport function CreationHeader(props) {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nCreationHeader.propTypes = {\r\n style: PropTypes.shape({}),\r\n crumbs: PropTypes.arrayOf(PropTypes.string),\r\n};\r\n\r\nCreationHeader.defaultProps = {\r\n style: {},\r\n crumbs: [],\r\n};\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { getLocalStorage } from '@bingads-webui/storage';\r\nimport { withSiteMap, siteMapPropType } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { CreationHeader } from '../components/creation-header';\r\n\r\n\r\nconst styles = () => ({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n },\r\n});\r\n\r\nexport function withCreationHeader(Component, headerCrumbs, backRouterId, isShowConfirmPopup, isBorderInsteadOfShadow) {\r\n const CreationHeaderHoC = (props) => {\r\n const { i18n, siteMap, classes } = props;\r\n const localStorage = getLocalStorage();\r\n let fromPathId = backRouterId;\r\n if (localStorage.supportsStorage()) {\r\n fromPathId = localStorage.get('fromPathId');\r\n }\r\n let crumbs = headerCrumbs;\r\n if (_.isUndefined(crumbs)) {\r\n const fromPage = _.findWhere(siteMap, { id: fromPathId });\r\n let fromPageName = '';\r\n if (fromPage && fromPage.name) {\r\n fromPageName = i18n.getString(_TL_(fromPage.name));\r\n }\r\n crumbs = [\r\n fromPageName || i18n.getString(_TL_('Campaigns')),\r\n i18n.getString(_TL_('Create Campaign'))];\r\n }\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n CreationHeaderHoC.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n siteMap: siteMapPropType.isRequired,\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n }).isRequired,\r\n };\r\n\r\n return withDefaultStyles(withI18nConsumer(withSiteMap(CreationHeaderHoC)), styles);\r\n}\r\n","export const getDelayedCreationStyles = () => (\r\n import(/* webpackMode: 'eager' */'../styles')\r\n .then(({ getEntityCreationStyle }) => ({\r\n getDelayedStyles: getEntityCreationStyle,\r\n }))\r\n);\r\n","import PageContext from '@bingads-webui-static-legacy/page-context';\r\n\r\nexport function getCommonCampaignCreationViewOptions(props) {\r\n const {\r\n serverContext: {\r\n CurrentAccount: {\r\n CurrencyCode,\r\n },\r\n CurrentAccountInActive,\r\n Permissions: {\r\n IsReadOnlyUser,\r\n IsImpressionTrackingUrlsEnabled,\r\n },\r\n },\r\n perfMarker,\r\n i18n,\r\n } = props;\r\n\r\n return {\r\n viewContext: {\r\n accountCurrencyCode: CurrencyCode,\r\n isReadOnlyUser: IsReadOnlyUser,\r\n CurrentAccountInActive,\r\n },\r\n perfMarker,\r\n isForVNext: true,\r\n isImpressionTrackingUrlsEnabled: IsImpressionTrackingUrlsEnabled,\r\n newI18n: i18n,\r\n deps: {\r\n pageContext: PageContext,\r\n },\r\n }\r\n}\r\n","\r\nimport { queryify } from '@bingads-webui/url-util';\r\nimport jsData from '@bingads-webui-component-legacy/js-data-campaign/index';\r\n\r\nexport const getProductData = (cid, aid, uid) => {\r\n const url = queryify('/Campaign/NewCampaign/GetProductScope', {\r\n aid,\r\n cid,\r\n uid,\r\n });\r\n\r\n const params = {\r\n url,\r\n adapter: 'legacy',\r\n bypassCache: false,\r\n cacheResponse: true,\r\n };\r\n\r\n return jsData.Product.find('MetaData', params);\r\n};\r\n","import jsData from '@bingads-webui-component-legacy/js-data-campaign/index';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\n\r\nexport const getDeals = () => jsData.Deal.findAll();\r\n\r\nexport const getDealsV2 = (cid, aid) => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Deals.get({\r\n IsUseV2: true,\r\n }).toPromise();\r\n","const objectiveItemsPropsMapping = (i18n, permissions) => [\r\n {\r\n id: 'WebsiteVisits',\r\n descriptionLine: i18n.getString(_TL_('Visits to my website')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_Clicks',\r\n iconName: 'Click',\r\n 'aria-label': i18n.getString(_TL_('Visits to my website')),\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Visits to my website')),\r\n isEnabled: true,\r\n },\r\n {\r\n id: 'LocationVisits',\r\n descriptionLine: i18n.getString(_TL_('Visits to my business location(s)')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_Visits',\r\n iconName: 'PedometerSteps',\r\n 'aria-label': i18n.getString(_TL_('Visits to my business location(s)')),\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Visits to my business location(s)')),\r\n isEnabled: true,\r\n },\r\n {\r\n id: 'WebsiteConversions',\r\n descriptionLine: i18n.getString(_TL_('Conversions in my website')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_Conversions',\r\n iconName: 'WebConversion',\r\n 'aria-label': i18n.getString(_TL_('Conversions in my website')),\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Conversions in my website')),\r\n isEnabled: true,\r\n },\r\n {\r\n id: 'PhoneCalls',\r\n descriptionLine: i18n.getString(_TL_('Phone calls to my business')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_Calls',\r\n iconName: 'Phone',\r\n 'aria-label': i18n.getString(_TL_('Phone calls to my business')),\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Phone calls to my business')),\r\n isEnabled: true,\r\n },\r\n {\r\n id: 'AppInstalls',\r\n descriptionLine: i18n.getString(_TL_('App installs')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_Installs',\r\n iconName: 'CellPhone',\r\n 'aria-label': i18n.getString(_TL_('App installs')),\r\n helpArialLabel: i18n.getString(_TL_('Learn more about App installs')),\r\n isEnabled: permissions.IsUserAppInstallAdsAllowed && !permissions.IsDomesticSimplifiedChineseEnabled,\r\n },\r\n {\r\n id: 'SmartCampaign',\r\n descriptionLine: i18n.getString(_TL_('Smart campaign')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_Smart',\r\n iconName: 'Processing',\r\n 'aria-label': i18n.getString(_TL_('Smart campaign')),\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Smart campaign')),\r\n isEnabled: permissions.IsSmartCampaignPhase2Enabled && !permissions.IsDomesticSimplifiedChineseEnabled,\r\n },\r\n {\r\n id: 'ShoppingCampaign',\r\n descriptionLine: i18n.getString(_TL_('Sell products from your catalog')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_BSC',\r\n iconName: 'ShoppingCart',\r\n 'aria-label': i18n.getString(_TL_('Sell products from your catalog')),\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Sell products from your catalog')),\r\n isEnabled: permissions.IsEnhancedShoppingCampaignAllowed,\r\n showFACBadge: permissions.dynamic.FACForShopping, // show feature adoption coupon badge: eg. '$25 off'\r\n },\r\n {\r\n id: 'SponsoredShoppingCampaign',\r\n descriptionLine: i18n.getString(_TL_('Boost product sales')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_ProductSales',\r\n iconName: 'RetailFinancials',\r\n isSVGIcon: false,\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Boost product sales')),\r\n 'aria-label': i18n.getString(_TL_('Boost product sales')),\r\n isEnabled: permissions.IsSPAv2Enabled && !permissions.IsDomesticSimplifiedChineseEnabled,\r\n },\r\n {\r\n id: 'MSStoreAds',\r\n descriptionLine: i18n.getString(_TL_('Promote your apps and games')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_StoreAds',\r\n iconName: 'MicrosoftStore',\r\n isSVGIcon: true,\r\n helpArialLabel: i18n.getString(_TL_('Learn more about Microsoft Store ads')),\r\n 'aria-label': i18n.getString(_TL_('Promote your apps and games')),\r\n isNewFeature: true,\r\n isEnabled: (!permissions.IsDomesticSimplifiedChineseEnabled && permissions.IsEnhancedShoppingCampaignAllowed) || (permissions.IsDomesticSimplifiedChineseEnabled && permissions.dynamic.WindowsStoreAdsCNExpansion),\r\n },\r\n {\r\n id: 'VideoCampaign',\r\n descriptionLine: permissions.dynamic.XandrVideoCampaigns ? i18n.getString(_TL_('Video views')) : i18n.getString(_TL_('Video views')),\r\n helpId: permissions.dynamic.XandrVideoCampaigns ? 'pop_BA_VideoAds_About' : 'pop_BA_CampaignCreate_Goals_VideoViews',\r\n iconName: 'MSNVideos',\r\n helpArialLabel: permissions.dynamic.XandrVideoCampaigns ? i18n.getString(_TL_('Learn more about brand awareness video')) : i18n.getString(_TL_('Learn more about video views')),\r\n 'aria-label': permissions.dynamic.XandrVideoCampaigns ? i18n.getString(_TL_('Video views')) : i18n.getString(_TL_('Video views')),\r\n isNewFeature: true,\r\n isEnabled: (permissions.IsVideoAdsForCampaignEnabled || permissions.dynamic.XandrVideoCampaigns) && !permissions.IsDomesticSimplifiedChineseEnabled,\r\n },\r\n {\r\n id: 'MediaPackageCampaign',\r\n descriptionLine: i18n.getString(_TL_('Media deals')),\r\n helpId: 'pop_BA_VideoAds_MediaDeals',\r\n iconName: 'MSNVideos',\r\n helpArialLabel: i18n.getString(_TL_('Learn more about media deals')),\r\n 'aria-label': i18n.getString(_TL_('Media deals')),\r\n isNewFeature: true,\r\n isEnabled: permissions.IsDealEnabledForMsAds && !permissions.IsDomesticSimplifiedChineseEnabled,\r\n },\r\n {\r\n id: 'AdImpressions',\r\n descriptionLine: i18n.getString(_TL_('Ad impressions')),\r\n helpId: 'pop_BA_CampaignCreate_Goals_AdImpressions', // TODO\r\n iconName: 'View',\r\n helpArialLabel: i18n.getString(_TL_('Learn more about ad impressions')),\r\n 'aria-label': i18n.getString(_TL_('Ad impressions')),\r\n isEnabled: (permissions.IsManualCpmEnabled || permissions.dynamic.XandrDisplayAdsCampaigns) && !permissions.IsDomesticSimplifiedChineseEnabled,\r\n },\r\n {\r\n id: 'HotelBooking',\r\n descriptionLine: permissions.dynamic.IsRenameHotelToLodgingEnabled ? i18n.getString(_TL_('Increase property bookings')) : i18n.getString(_TL_('Increase hotel bookings')),\r\n helpId: permissions.dynamic.IsRenameHotelToLodgingEnabled ? 'pop_BA_CampaignCreate_Goals_LodgingBooking' : 'pop_BA_CampaignCreate_Goals_HotelBooking',\r\n iconName: 'Hotel',\r\n 'aria-label': permissions.dynamic.IsRenameHotelToLodgingEnabled ? i18n.getString(_TL_('Increase property bookings')) : i18n.getString(_TL_('Increase hotel bookings')),\r\n helpArialLabel: permissions.dynamic.IsRenameHotelToLodgingEnabled ? i18n.getString(_TL_('Learn more about increase property bookings')) : i18n.getString(_TL_('Learn more about increase hotel bookings')),\r\n isNewFeature: true,\r\n isEnabled: permissions.dynamic.HotelCampaign && !permissions.IsDomesticSimplifiedChineseEnabled,\r\n },\r\n];\r\n\r\nexport const objectivesConfig = ({ i18n, permissions }) => {\r\n const objectivesItems = objectiveItemsPropsMapping(i18n, permissions);\r\n\r\n return objectivesItems.filter(item => item.isEnabled);\r\n};\r\n\r\nexport const objectivesForPerfMax = [\r\n 'WebsiteVisits',\r\n 'LocationVisits',\r\n 'WebsiteConversions',\r\n 'PhoneCalls',\r\n 'ShoppingCampaign',\r\n];\r\n","import { isFunction, some, isEmpty } from 'underscore';\r\nimport { merge } from '@bingads-webui/primitive-utilities';\r\nimport {\r\n campaignSettingsStyles, adgroupsKeywordsStyles, adExtensionsStyles, budgetBidsStyles, adgroupCreationStyles,\r\n creationCommonStyle,\r\n dsaCampaignStyles,\r\n audienceCampaignSettingsStyles, audienceTargetsSettingsStyles, audienceBudgetBidsStyles, audienceAdsStyles,\r\n audienceAdgroupStyles,\r\n raiseBidPopupStyles,\r\n disclaimerPanelStyles, globalDsaCampaignStyles,\r\n globalAdgroupCreationStyles,\r\n audienceCampaignBmcRedirectStyles\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\nimport {\r\n entitySelectorStyle, uiblockerStyle, toggleButtonStyle, messageBarStyle, searchboxStyle, tableStyle,\r\n helpbuttonStyle, linkStyle, paginationStyle, statusStyle, glyphIconStyle, kendoMultiSelectStyle, commonDoubleListBoxStyle,\r\n advancedSettingsSectionStyle, containerBudgetStyle, locationBidGridStyle, keywordPlannerStyle, locationMapStyle,\r\n sharedBudgetGridWrapper, estimationResultStyle, audienceAssociationSectionStyle, extensionEditorStyles, audienceReachEstimateContainerStyle,\r\n datePickerStyle, audienceModalStyles, audienceCombinedListStyle, keywordToolbarStyle, selectElementStyle, buttonInputStyle, inputFieldStyle, audienceExpressionStyle,\r\n convertToGlobalStyle, legacyUIBlockerStyle\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { adEditorPanelOverrideStyle } from '@bingads-webui-campaign-react/ad-editor-styles';\r\nimport { stepWizardStyle } from './step-wizard';\r\nimport { getCreationContainerContentStyle, CreationContainerContentOverrideStyle } from './creation-content-container-style';\r\n\r\nfunction resolveStyles(theme, ...styles) {\r\n const resolvedStyles = styles.map(s => (isFunction(s) ? s(theme) : s));\r\n\r\n if (some(resolvedStyles, isEmpty)) {\r\n throw new Error('Cannot pass in empty style!');\r\n }\r\n return resolvedStyles;\r\n}\r\n\r\nexport const getAdgroupCreationAudienceStyle = (_, { palette = {} }) => {\r\n const commonStyles = merge(\r\n {},\r\n ...resolveStyles(\r\n { palette },\r\n statusStyle,\r\n paginationStyle,\r\n entitySelectorStyle,\r\n buttonInputStyle,\r\n containerBudgetStyle,\r\n commonDoubleListBoxStyle,\r\n keywordPlannerStyle,\r\n searchboxStyle,\r\n estimationResultStyle,\r\n locationBidGridStyle,\r\n locationMapStyle,\r\n sharedBudgetGridWrapper,\r\n tableStyle,\r\n advancedSettingsSectionStyle,\r\n toggleButtonStyle,\r\n linkStyle,\r\n selectElementStyle\r\n )\r\n );\r\n\r\n const globalStyles = merge(\r\n {},\r\n ...resolveStyles(\r\n { palette },\r\n stepWizardStyle,\r\n uiblockerStyle,\r\n kendoMultiSelectStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n extensionEditorStyles,\r\n messageBarStyle,\r\n glyphIconStyle,\r\n datePickerStyle,\r\n helpbuttonStyle,\r\n keywordToolbarStyle,\r\n inputFieldStyle,\r\n CreationContainerContentOverrideStyle,\r\n disclaimerPanelStyles,\r\n globalDsaCampaignStyles,\r\n globalAdgroupCreationStyles\r\n ),\r\n convertToGlobalStyle(resolveStyles(\r\n { palette },\r\n adEditorPanelOverrideStyle\r\n ))\r\n );\r\n\r\n\r\n const searchCreationStyles = merge(\r\n {},\r\n ...resolveStyles(\r\n { palette },\r\n audienceTargetsSettingsStyles,\r\n audienceBudgetBidsStyles,\r\n dsaCampaignStyles,\r\n campaignSettingsStyles,\r\n adgroupsKeywordsStyles,\r\n adExtensionsStyles,\r\n budgetBidsStyles,\r\n creationCommonStyle,\r\n adgroupCreationStyles,\r\n raiseBidPopupStyles\r\n )\r\n );\r\n\r\n const audienceCreationStyles = merge(\r\n {\r\n '& .ima-reach-alert': {\r\n padding: '8px 32px 8px 8px !important',\r\n marginTop: '10px',\r\n marginLeft: '0px',\r\n },\r\n },\r\n ...resolveStyles(\r\n { palette },\r\n audienceCampaignSettingsStyles,\r\n audienceReachEstimateContainerStyle,\r\n audienceAssociationSectionStyle,\r\n audienceTargetsSettingsStyles,\r\n audienceBudgetBidsStyles,\r\n audienceAdsStyles,\r\n audienceAdgroupStyles,\r\n audienceCampaignBmcRedirectStyles,\r\n legacyUIBlockerStyle\r\n )\r\n );\r\n\r\n return {\r\n '@global': globalStyles,\r\n\r\n CampaignCreationAudience: {\r\n ...getCreationContainerContentStyle(),\r\n ...audienceCreationStyles,\r\n ...commonStyles,\r\n ...searchCreationStyles,\r\n },\r\n };\r\n};\r\n","/* istanbul ignore file */\r\nimport React from 'react';\r\nimport Promise from 'bluebird';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { perfMarkerPropTypes } from '@bingads-webui/performance-marker';\r\nimport { AudienceAdgroupCreationWizard } from '@bingads-webui-campaign-legacy/audience-campaign/loader';\r\nimport decimal from '@bingads-webui-component-legacy/humanize/decimal';\r\nimport PageContext from '@bingads-webui-static-legacy/page-context';\r\nimport eventDispatcher from '@bingads-webui-component-legacy/event-dispatcher/index';\r\nimport { withDelayedStyles } from '@bingads-webui-campaign-react/common-utils';\r\nimport { getAdgroupCreationAudienceStyle } from '../styles/adgroup-creation-audience-styles';\r\nimport { InjectWrapperWithHoC, getDelayedCreationStyles } from '../helper';\r\nimport VerticalLayout from '../template/steps-template.pug';\r\nimport HeaderTemplate from '../template/header-template.pug';\r\n\r\nconst ADGROUP_CREATION_AUDIENCE_LOADED_EVENT = 'ad_group_creation_view_loaded';\r\nfunction AdGroupCreationAudience(props) {\r\n const {\r\n serverContext: {\r\n CurrentAccount: {\r\n CurrencyCode,\r\n },\r\n CurrentAccountInActive,\r\n Permissions: {\r\n IsReadOnlyUser,\r\n },\r\n },\r\n campaignContext: { currentCampaign },\r\n perfMarker,\r\n isVideo,\r\n isOpenCreatePanel,\r\n i18n,\r\n } = props;\r\n const isShoppingCampaign = _.result(_.take(currentCampaign.CampaignSettings), 'ProviderId');\r\n const AdGroupCreationAudiencePerfMarker = perfMarker.createChild('AdGroupCreationAudience');\r\n\r\n return (